Cyber Monday Offer: Professional membership now 25% off! Cyber Monday Offer: Professional membership now 25% off! 

Popular related searches

Filters

Mobile User Experience (UX) Design

Your constantly-updated definition of Mobile User Experience (UX) Design and collection of topical content and literature

What is Mobile User Experience (UX) Design?

Mobile UX designs are interfaces for hand-held and wearable devices. Designers focus on accessibility and efficiency to optimize these on-the-go interactions.

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.

Catering to 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.

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 when designing for mobile interfaces:

  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. 

  • 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.

    1. 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.

      Hand-reach comfort zones

      Hand-reach comfort zones

      Interaction Design Foundation, CC BY-SA 4.0


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 reassure that the system is executing background actions.

    1. 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.

Learn More about Mobile UX Design

Take our course: Mobile UX Design: The Beginner's Guide.

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.


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:

Learn more about Mobile User Experience (UX) Design

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.

All Literature

Please check the value and try again.
  • 1
  • 2
  • 1 of 2