What is Mobile User Experience (UX) Design?

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.

Catering to Moving Users

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:

1. Microtasking– they use devices in short, intense spurts – e.g., to buy tickets.
2. Local– they use devices to see what’s happening around them.
3. Bored– e.g., they surf newsfeed links while waiting.

How to Streamline Experiences for Users On the Go

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:

1. Minimize Content
2. 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.
   1. Keep images (including embedded ones) to a minimum, and small.
   2. Have clear visual hierarchy.
   3. Use color and contrast to maximize visibility.
   4. Make text 11 points or larger.
   5. Beware of clutter – everyelement must count. Compress information into icons where appropriate.
   6. Calm pages and complement/frame content with whitespace.
   7. Include card-style design patterns to easily show actionable content.
   8. Ensure alldevices can support content.
   9. Keep page descriptions short for bookmarks.

Most users prefer to use their phone in portrait mode, so make sure you design for limited width.

2. Simplify Navigation
3. Most users use one hand; fingertips can be large. Therefore:
   1. Aim for easy-to-use, easy-to-learn/self-evident navigation. Consider progressive disclosure.
   2. Create 30×30-pixel/7–10-mm (minimum) buttons/tabs.
   3. Use full-screen navigation menus, minimum navigation levels and clear labeling, including tabs/icons and graphics.
   4. Prioritize most-used items at the top. Consider how far users can comfortably reach.
   5. Give short-key access to features.
   6. Don’t mix navigation patterns.
   7. Clearly show links. Indicate when the user has activated them.
   8. Allow one primary action per screen.

3. Restrict User Inputs
4. Users become frustrated when they must continuously tap buttons. So, design to offer maximum effect for minimum interaction/effort.
   1. Keep URLs short.
   2. Pre-fill or minimize required data inputs on forms.
   3. Include alternative input mechanisms (e.g., voice-controlled).
   4. Allow permanent sign-in.
   5. Allow minimal, one-directional scrolling.
   6. Retain data in case connections fail.
   7. Offer obvious search features (e.g., a magnifying glass).
   8. Use skeleton screens to reassure that the system is executing background actions.
5. Ensure Continuity and Consistency
6. Let users continue where they left off and so they can switch easily between mobiles and desktops.
   1. Keep content consistent between screens. If you design separate versions, don’t compromise user trust with unsubtle changes.
   2. Maintain continuity; let users track orders, etc. just as easily on mobiles.
   3. If you design separate versions, let users switch from mobile to desktop formats freely.