Adaptive vs. Responsive Design
- 1.2k shares
- 2 years ago
Mobile UX design is the design of user experiences for hand-held and wearable devices. Designers create solutions (typically applications) to meet mobile users’ unique requirements and restrictions. Designers focus on accessibility, discoverability and efficiency to optimize on-the-go interactive experiences.
The importance of mobile UX design grew dramatically in 2014. Designers had targeted desktop users as the mainstream, but mobile users suddenly became the online majority. These users have unique needs. They don’t have miniaturized desktop experiences or any of the advantages desktop users enjoy. So, we must create designs where we make the best use of smaller screens and cater to human physical limitations such as fingertip size. We also tailor experiences to match mobile environments. Attention spans are short in mobile UX. Users want results fast, with minimal effort and zero friction. They’re often distracted. Signal and power loss are frequent worries. These users often walk while thumbing devices in potentially dangerous settings – for instance, to explain they’ll be late for work from a train station. Typically, mobile users find themselves in three scenarios:
Microtasking – they use devices in short, intense spurts – e.g., to buy tickets.
Local – they use devices to see what’s happening around them.
Bored – e.g., they surf newsfeed links while waiting.
Learn the goals of mobile UX design.
When you design for mobile, you must first decide whether to create a single design that adjusts to all devices or several versions tailor-made for screens of various sizes. The first type is responsive design. The second is adaptive design. You usually design for the smallest device, working upwards (smartphones to tablets, etc.). You should follow web standards (W3C’s) and support as many browser types as possible. It’s important to focus on context, convenience, conciseness and consistency. You should use a less-is-more approach. So, you’ll need to choose carefully which features are vital. Then, you’ll have to decide how to present them best. In any situation, users must be able to quickly find what they want, and that includes reassurance that your brand is what they expect it to be.
“Perfection is achieved when there is nothing left to take away.”
Antoine de Saint-Exupéry, writer and aviator
That means that you should:
Design for minimal page-loading times (less than three seconds) and cognitive load. Also, 94% of mobile users use portrait mode, meaning less width to work with.
Keep images (including embedded ones) to a minimum, and small.
Have clear visual hierarchy.
Use color and contrast to maximize visibility.
Make text 11 points or larger.
Beware of clutter – every element must count. Compress information into icons where appropriate.
Calm pages and complement/frame content with whitespace.
Include card-style design patterns to easily show actionable content.
Ensure all devices can support content.
Keep page descriptions short for bookmarks.
Most users prefer to use their phone in portrait mode, so make sure you design for limited width.
Most users use one hand; fingertips can be large. Therefore:
Aim for easy-to-use, easy-to-learn/self-evident navigation. Consider progressive disclosure.
Create 30x30-pixel/7–10-mm (minimum) buttons/tabs.
Use full-screen navigation menus, minimum navigation levels and clear labeling, including tabs/icons and graphics.
Prioritize most-used items at the top. Consider how far users can comfortably reach.
Give short-key access to features.
Don’t mix navigation patterns.
Clearly show links. Indicate when the user has activated them.
Allow one primary action per screen.
Hand-reach comfort zones
Restrict User Inputs
Users become frustrated when they must continuously tap buttons. So, design to offer maximum effect for minimum interaction/effort.
Keep URLs short.
Pre-fill or minimize required data inputs on forms.
Include alternative input mechanisms (e.g., voice-controlled).
Allow permanent sign-in.
Allow minimal, one-directional scrolling.
Retain data in case connections fail.
Offer obvious search features (e.g., a magnifying glass).
Use skeleton screens to reassure that the system is executing background actions.
Ensure Continuity and Consistency
Let users continue where they left off and so they can switch easily between mobiles and desktops.
Keep content consistent between screens. If you design separate versions, don’t compromise user trust with unsubtle changes.
Maintain continuity; let users track orders, etc. just as easily on mobiles.
If you design separate versions, let users switch from mobile to desktop formats freely.
Learn how to design for mobiles with our course: https://www.interaction-design.org/courses/mobile-user-experience-design
Smashing Magazine showcases best practice: https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
Here are tips for making well-crafted mobile designs, with examples: https://uxplanet.org/top-8-mobile-navigation-menu-design-for-your-inspiration-8a2d925bffc0
Here’s the entire UX literature on Mobile User Experience (UX) Design by the Interaction Design Foundation, collated in one place:
Take a deep dive into Mobile User Experience (UX) Design with our course Mobile User Experience (UX) Design .
Mobile usage overtook that of desktop way back in 2014 according to Comscore; since then, the gap between devices has only widened, with the rise in mobile usage doubling the loss seen on desktop. This increase in mobile traffic has made mobile user experience one of the most important factors in the success of a product or website, and it means that the skills involved are absolutely essential for designers, marketers, and developers if they want to keep up with the times. This course will teach you how to do just that—design great mobile user interfaces, with an emphasis on mobile usability best practices.
When you want to start designing a great user experience on a mobile device, using common sense design approaches or simply learning by doing won’t be enough. With Google reporting that 61% of users were unlikely to return to a mobile site they had trouble accessing and, even worse, 40% choosing to visit a competitor’s site instead, such uneducated approaches could prove disastrous for your product or website. A user’s comprehension is 50% less on a mobile device, which means that content, navigation, and visual design elements must be twice as intuitive as they are on a desktop. With hard facts like that, you must constantly keep in mind the point that little screens mean very little room for error. Designing for mobile means taking the rough of the risk with the smooth of the sheer profit potential, and your need to learn the skills involved in creating an easy-to-use mobile user interface and, consequently, a great mobile user experience is nothing less than vital.
This course is built on evidence-based approaches as well as solid evidence distilled from decades of research and practice. Here, CEO of ExperienceDynamics.com, Frank Spillers, who is a distinguished speaker, author, and internationally respected Senior Usability practitioner, will teach you what you need to know to stay one step ahead as you venture into this exciting, cutting-edge and lucrative field.