Mobile User Experience (UX) Design

Mobile design has different limitations and requirements than computer interfaces. Many companies have mobile and computer-based designs for identical products. Designers learn to distill essential elements for smaller screen sizes and to optimize their designs for users on the move.

Cater for Users on the Go

The importance of mobile user experience design grew dramatically in 2014 when mobile users suddenly became the online majority. Designers quickly learned they couldn’t simply miniaturize a desktop interface. They needed to reevaluate the needs and limitations of the growing audience of mobile users.

Since then, mobile design has evolved to find the best use of smaller screens.

Experiences are now tailored specifically for mobile environments and specific contexts of use.

Attention spans are shorter 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 and use devices at the same time.

Typically, mobile users find themselves in three scenarios:

1. Micro tasking: they use devices in short, intense spurt—e.g., to buy tickets.
2. Local: they use devices to see what’s happening around them.
3. Bored: e.g., they surf news feed links while waiting.

Tips for Mobile UX

Here are some practical guidelines to design for mobile interfaces and a mobile-first approach:

1. Minimize Content

Smaller screens mean essential elements need to be legible on a smaller resolution. You must make a clean, legible layout to cater to mobile users.

• Design for minimal page-loading times. Less than 3 seconds is ideal.
• Strive for a simple and straightforward UI (User Interface) design.
• Make an effort to reduce cognitive load for your users.
• 94% of mobile users use portrait mode. Every pixel of width is valuable.
• Keep images small and to a minimum.
• Keep a clear visual hierarchy.
• Use color and contrast to maximize visibility.
• Make text 11 points or larger.
• Reduce clutter. Compress information into icons where appropriate.
• Complement or frame content with whitespace.
• Include card-style design patterns to show actionable content easily.
• 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.
• Consider task-oriented design.

2. Simplify Navigation

Users might not complete a task all at once. Make sure they don't get lost easily. Also, most users use one hand, and some fingertips are larger than others.

• Aim for easy-to-use and self-evident navigation. Consider using progressive disclosure.
• Create 30x30-pixel/7–10-mm (minimum) buttons and tabs.
• Use full-screen navigation menus with the minimum amount of menu levels.
• Use clear menu labeling, including tabs/icons and graphics.
• Prioritize the most-used items at the top of the screen. 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.

3. Restrict User Inputs

Users become frustrated when they have to 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 ensure the system is executing background actions.

4. Ensure Continuity and Consistency

Let users continue where they left off 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.
• Use recognizable UI design patterns.

Learn More about Mobile UX Design

For more practical tips on Mobile UX, read a comprehensive guide to mobile app design.

See examples of excellent navigation menu designs and when to use them.

Questions related to Mobile User Experience (UX) Design

A top-notch mobile user experience follows a structured five-step process, as explained by Frank Spillers, CEO of Experience Dynamics. Firstly, assess your internal priorities and business goals.

1. Transcript loading…

Dive deep into understanding users by recognizing their needs, contexts, and objectives in step two. The third step is defining the app's value proposition, emphasizing emotional value. With insights from user needs and the specified value, step four involves crafting a distinct UX strategy. Lastly, you sketch, review, and refine the design. Ultimately, understanding and integrating the user's context with the design results in an app that resonates, delights, and ensures strong user adoption.

Mobile UX (User Experience) pertains to a user's overall experience while interacting with a mobile device, predominantly smartphones and tablets. It encompasses the design, usability, and functionality tailored for smaller screens and different user behaviors compared to desktops. Effective mobile UX ensures seamless navigation, intuitive design, and rapid load times, catering to on-the-go usage. As highlighted in our Mobile UX Design guidelines, it's crucial to consider factors like touch screen interaction, limited screen real estate, and varied device capabilities to create a satisfactory user experience.

The cornerstone of enhancing mobile UX is task analysis. As Frank Spillers, CEO of Experience Dynamics, explains, task analysis involves observing users performing their tasks without emphasizing the technology they use.

1. Transcript loading…

By having users show their current routines, you can identify workarounds, patterns, and individual adjustments. The goal is to comprehend their problem-solving process step by step. This method reveals invaluable insights, especially with ethnography, which delves into cultural cues and user behavior. Using the observations from task analysis, designers can map and flow chart user activities, ensuring the design supports these sequences seamlessly. The ultimate aim is to create an intuitive user journey that feels natural and logical.

A prime example of good user experience can be observed in the Apple Watch, which functions not just as a standalone device but as part of a broader product-service system. This biofeedback device, when paired with services like Fitness Plus, seamlessly integrates with the user's lifestyle. Its cohesive design complements the mobile app and other devices, creating a harmonious ecosystem. Frank Spillers, CEO of Experience Dynamics, emphasized the importance of examining the entire ecosystem, from service to mobile app, to truly grasp how products like the Apple Watch provide an unparalleled user experience.

1. Transcript loading…

User experience (UX) encompasses more than just usability.

1. Transcript loading…

As described by UX pioneer Peter Morville, the seven critical aspects of UX are:

1. Useful: Products must serve a purpose, fulfilling specific needs or desires.
2. Usable: It's essential for users to achieve their goals effectively and efficiently.
3. Findable: Products should support easy navigation, ensuring users can find desired objects or content.
4. Credible: Trustworthiness is crucial; users should believe in the product's legitimacy.
5. Desirable: Driven by emotions, this aspect pertains to design, imagery, and brand identity.
6. Accessible: Products should cater to users of all abilities, including those with disabilities.
7. Valuable: Ensuring both business and user derive value is vital for sustained success.

1. Transcript loading…

To construct a mobile app tailored for patient-doctor chats:

1. Employ a mobile-first, task-first, and content-first strategy.
2. Begin with a sketch emphasizing large buttons suitable for mobile interfaces.
3. Prioritize content, focusing on security, and protective measures for health information (HIPPA).
4. Allow users to see incoming messages from their doctor, specifying the date and time of the message. The app should support a chat format but with provisions for longer, descriptive messages.
5. Enable a full-screen mode for typing, and add features like attachments for photos or health records and emotion icons to indicate the patient's feelings.
6. Consider features like video calls, but ensure privacy with a video request system.
7. Enable searching and editing of messages while emphasizing security for sensitive content.

Tappability in mobile UX refers to the efficiency and clarity of tap-based interactions on mobile devices. It minimizes unnecessary taps, ensuring users know what's tappable without confusion.

1. Transcript loading…

Tappability is closely related to affordances, UI elements that invite the expected interaction. Think of a button that looks pressable or a slider that looks slideable. Enhancing tappability means offering clear visual cues (or signifiers), such as a pulsating button, to indicate interactive elements. Clean design is vital, but it shouldn't maintain clarity. Proper tappability reduces user frustration, uncertainty, and errors, ensuring a smoother mobile experience. Dive deeper into mobile UX best practices in our course Mobile UX Design: The Beginner's Guide.

Smartphones and tablets differ mainly in size, purpose, and user behavior. A smaller resolution characterizes a smartphone and is not always the primary access device. Users of smartphones often multitask, face more distractions, and interact in a profound social and emotional context, which includes environmental factors like low lighting. They require clear tapability on objects. On the other hand, a tablet offers a larger screen area and is easier to design for due to its size. It's often a multi-user device used more by consumers at home, with less business usage than smartphones. When designing for tablets, one should maximize the available real estate while ensuring objects remain easily tappable.

1. Transcript loading…

Dive deep into mobile UX on the Interaction Design Foundation. Start with Mobile UX Design: The Beginner’s Guide for foundational knowledge. To refine interface skills, explore the Mobile UI Design Course. Enroll in the Mobile UX Strategy Course: Building Successful Products for a strategic perspective on creating successful mobile products. Each course offers expert-led content, ensuring a comprehensive mobile user experience design grasp. Enhance your skills and stay updated with the latest in mobile UX.

1. Transcript loading…

Mobile UX Design: The Beginner's Guide

Get Weekly Design Tips

Literature on Mobile User Experience (UX) Design

Here’s the entire UX literature on Mobile User Experience (UX) Design by the Interaction Design Foundation, collated in one place:

Simple Guidelines When You Design for Mobile

In mobile user experience (UX) design, it’s important that we respect a user’s task and mindset, as well as the device’s limitations. Here you’ll learn about the general principles that can help you get started with your design.

Josh Clark, the author of Tapworthy: Designing Great iPhone Apps, describes three types of mobile mindsets:

• “I’m Microtasking”: When the user interacts with their device for brief but frenzied periods of activity. Think about how you can accommodate users who are in a hurry. Make frequent, recurring tasks as efficient as possible.
• “I’m Local”: When the user wants to know what’s going on around them. Take advantage of mobile devices’ sensors such as location, device orientation, and ambient light to personalize the experience where appropriate (and with permission, of course!).
• “I’m Bored”: When the user is looking to be entertained, think beyond the task-focused features. What can you offer users when they leisurely browse?

We might add a few more categories that have emerged since Josh wrote that book early on in the smartphone era:

• Extended engagement: When the user fully engages with the content for a long time, scrolling, tapping or swiping endlessly.
• Interrupted attention: When notifications pull users back to check up on activity, status updates, or anything else. Note this is not always good, as notifications notoriously pull users back for no urgent reason other than for the company’s app engagement monetization needs.

In that last category, Microsoft offers a set of guidelines called “Respecting Focus.” They fall into five main areas:

1. Understand urgency and medium: Technology communicates in many ways: pop-ups, blinking lights, sounds, and vibrations. Are they all needed? Match the urgency of a notification with the urgency of the communication.
2. Adapt to the customer’s behavior: How a customer interacts with each feature or part of your experience will change over time.
3. Adapt to context: We all focus, filter, and consume information in unique ways. We filter out different information. These preferences and capabilities can rapidly change based on the contexts of use. context. Because of that, how a person interacts with each feature or part of an experience will change. Can your system learn from how people interact to modify the way it communicates?
4. Enable the customer to adapt: Personal experiences should suit each individual. Customizable features help customers feel empowered and in control of their devices. Many alerts on computers today are difficult to tune out or turn off. It can get overwhelming if multiple applications all send alerts simultaneously. Better systems have ways for users to control the type and timing of notifications.
5. Reduce mental cost: Experiences move beyond screens to engage and immerse human senses. Each of these new interactions presents new potential points of friction.

Basic Design Considerations for the Mobile Web

Small Screens

You don’t have as much screen real estate for mobile devices as you do for PCs and laptops. That means, normally, you’ll design for multiple screen sizes. Remember, you want to focus on a “mobile first” approach, which means you’ll design for the smallest mobile platforms and increase complexity from there.

A good process to follow would be:

• Group device types based on similar screen sizes and try to keep these groups to a manageable size.
• Define content and design adaption rules that enable you to make a clean layout on each group of devices.
• Adhere as closely to web standards (W3, Material Design, etc.) as possible.

Prioritize the Primary Task

If we use a task-first approach, we can guarantee that you've got the main task upfront. Think of it as a measure of urgency for the task.

The app Shazam is an excellent example of how you prioritize the main task. Shazam identifies the music playing around you. It helps solve a problem that we can all relate to: how many times have you heard a great song on the radio, at a shop or bar but couldn't identify it? Often, you don't have much time to Shazam a song, and the app caters to this issue. The interface is pared back, with just one large button on the screen. The button is animated to show the user that it needs to be pressed, with a line of text saying, "Tap to Shazam." The app's main task is immediately apparent to anyone who uses it.

Keep Navigation Simple

Keypads and touch screens don’t make for precise navigation like mice do, so try to:

• Prioritize navigation with the most common tasks at the top.
• Minimize the levels of navigation involved.
• Ensure the labels are clear and concise for navigation.
• Offer short-key access to different features.
• Remember to offer a minimum 10mm size for all buttons.
• Ensure that links are visually distinct and make it clear when users have activated them.
• Make it easy to “hand off” or swap between the mobile and desktop sites and keep task continuity between devices if possible.
• Offer navigation links in the footer of a page (if a mobile website) as well as a “back-to-top” function. This feature helps reduce scrolling fatigue, so users don’t have to scroll all the way back to the top. Also, screen readers (for blind users) need repeat footer links, so they have a forward motion path.
• Make sure “hamburger menus” (a menu icon with three horizontal lines) are visually distinct (don’t assume users know what they are). Use appropriate ARIA attributes to identify the hamburger menu for accessibility.

This isn't to say that you should never use a hamburger menu. Mobile gaming especially finds good uses for hamburger menus, but be aware of their strengths and weaknesses.

As always, test with your users to make sure your mobile menu is accessible.

Keep Content to a Minimum

• Don’t overwhelm your users—respect the small screen space. Keep content to a minimum.
• Ensure content is universally supported on all devices, or avoid it.
• Make page descriptions and microcopy short, verb-oriented and concise.

Reduce the Inputs Required from Users

The less the user has to fiddle with their phone, the more they’ll enjoy your mobile web or app. Consider how to:

• Offer alternative input mechanisms (video, voice, etc.).
• Minimize inputs in forms (you can always ask for more data when the user logs on to the desktop).
• Allow permanent sign-in (most smartphones are password- or fingerprint-protected, so this poses less risk than on the desktop).
• Keep scrolling to a minimum and ensure users only have to scroll in one direction.

Remember That Mobile Connections Are Not Stable

Mobile connections can be a colossal pain in areas with patchy service. Don’t make things difficult for your users. Try to:

• Retain data, so you don’t lose it in a connection break.
• Minimize page size for rapid loading.
• Kill off ad networks and pop-ups on mobile sites which consume huge amounts of bandwidth and data.
• Keep images to a minimum and reduce the size of those images.
• Reduce the number of embedded images to a minimum (speeding up load times).

Continuous Integrated Experiences

As users move between mobile and desktop, they will expect similar experiences. Remember to:

• Maintain continuity. If they log into your web store on mobile, they should be able to track orders and make purchases just like they would on the desktop.
• Maintain consistency. Offer the option to switch between mobile and desktop at will.
• Maintain brand. The look and feel of each version should be similar.

The Take Away

Mobile is different from the traditional desktop environment. While standard UX and usability considerations apply to a mobile context, the mobile environment brings new design considerations. We must respect a user’s attention and minimize interruptions. Overall, we must pay attention to the particular details of mobile experiences to deliver the best possible UX.

References and Where to Learn More

Creative Bloq suggests focusing on these 10 principles of interactive design for mobile.

Read Microsoft’s guide on Respecting Focus.

Learn more about designing interruptions in this Medium article.

Familiarize yourself with Toptal’s Guide to notification design.

Learn about how to make a hamburger menu accessible.

Learn more about Mobile User Experience (UX) Design

Take a deep dive into Mobile User Experience (UX) Design with our course Mobile UX Design: The Beginner's Guide .

In the “Build Your Portfolio” project, you’ll find a series of practical exercises that will give you first-hand experience with the methods we cover. You will build on your project in each lesson so once you have completed the course you will have a thorough case study for your portfolio.

Mobile User Experience Design: Introduction, has been built on evidence-based research and practice. It is taught by the CEO of ExperienceDynamics.com, Frank Spillers, author, speaker and internationally respected Senior Usability practitioner.