User Experience Design For Mobile Apps &

People spend an average of four hours per day using apps on their smartphones. While mobile app users seek streamlined interactions and expect immediate results, mobile users are goal-oriented and have limited time and bandwidth – often literally – which means you must consider your mobile app UX.

The most frequently-used apps are the ones that simplify our lives. According to Josh Clark, author of Tapworthy: Designing Great iPhone Apps, we tend to be in at least one of following three modes when our mobile devices:

Microtasking in short, intense bursts of focused activity, like checking a balance or conducting a search;
Orienting ourselves to a location, looking for directions or attractions near us; or
Filling time, scrolling news and social feeds while between tasks, in transit, or waiting.

In these 'micro-moments,' mobile users are goal-oriented and have limited time and bandwidth. They seek streamlined interactions and expect immediate results.

UX is an essential aspect of any product strategy, but mobile app UX has some specific considerations, like space constraints and context awareness, for designing an experience that's optimized to meet people where they are.

In this guide we'll walk you through the what, why, and how of mobile app UX, and give you a robust set of best practices for designing and improving your own mobile app user experience.

What is a mobile app UX?

Mobile app UX is the end-to-end experience and set of interactions users have with an app on handheld devices, including smartphones, tablets, and wearables.

Note: the more general term 'mobile UX' refers to both app and website design, and is often used interchangeably between the two.

To clarify, UX and UI design work hand-in-hand in any design process. UX is concerned with experience: the holistic journey of touchpoints in a product's design. UI is concerned with interface: the design language and system of elements with which a user interacts.

Why should you be thinking about mobile app UX (if you aren't already)

For starters, almost three-quarters of internet users will access the web solely via their smartphones by 2025, equivalent to nearly 3.7 billion people. And those users have high expectations of mobile experiences when it comes to speed, ease of use, and delight.

Combine this with the fact that thirty-eight percent of users are willing to download an app if it's required to make a purchase, but half will uninstall it after completing the transaction. In fact, 1 in 2 apps are uninstalled within 30 days!

And, to make things even more complicated, the average user only engages with five apps on a regular basis.

Compelling, right?

To maintain a user's attention and loyalty , the UX of your mobile app must constantly prove its value. You should always look to simplify users' lives, create more contextual experiences, or simply offer moments of delightful distraction.

Focusing on these qualities is part of what differentiates good from great mobile app UX design.

App UX: Responsible design desktop and apps

Key differences between desktop vs mobile UX

There are multiple differences between desktop and mobile app UX in a user's context and environment:

Physical and virtual workspaces

On a desktop, users are likely to have multiple tabs and apps open for multitasking, a full-size keyboard, and a more stable and comfortable physical workspace. They are also most likely stationary and with steady lighting..

On a mobile device, however, users are likely to be focused on a single task that might have some urgency in the moment. In addition, they might be in transit, in an unfamiliar space, double tasking (think: coffee run, picking something up from the dry cleaners, etc.), and might even have bandwidth/internet constraints.

Display and screen orientation

Desktop users may be using one or more full-size, high-resolution displays that make it easy to see and scroll to reveal details, and calls-to-action that require their attention.

Mobile screens, however, are obviously constrained, meaning that positioning important content and calls-to-action above the proverbial fold and in places where they get the most attention – is critical.

Visual language and cues

Establishing a clear and comprehensive design language is essential to mobile app design, and ease of getting your users from one place to the next in the smoothest fashion.

Patterns, like in real life, help cue people on what action they should take, even if it isn't explicit.

While mobile interfaces rely heavily on these recognizable, universal visual patterns to signal actions on common tasks and features (e.g. the hamburger menu, a three-lined icon to indicate a collapsed menu), desktop is another story.

No one really messes with the ubiquitous hamburger menu mentioned above, or other well-established mobile conventions. However, on desktop, there are a much wider variety of ways in which designers tackle UX.

Just take a look at Awwwards menu design inspiration gallery if you want to see some pretty out there UX patterns.

Consistency and continuity

With mobile overtaking desktop usage since 2014, and especially with Google's emphasis on user experience and mobile first indexing in the past year, designers have increasingly adapted their work to a mobile-first approach to UX.

This means the design process is driven by a focus on the constraints of a user's smallest device (i.e. an Apple Watch or iPhone) and adapted upwards to larger screen sizes.

It also means providing a smooth experience between mobile web and native apps using both on-brand visual cues, and technology such as deep linking and deferred deep linking, to make sure users have an uninterrupted experience.

As a first step, product teams need to make an important decision about their development strategy, which we'll explore in the next section.

Guide

Deep linking for mobile marketers, a guide

Learn more

The mobile app design process – explained

The mobile app design process is essentially the same as any user-centered design process, except that it involves an upfront decision about how the product will be developed.

Let's dive into some important steps along the way:

1. Evaluate and choose which one of three development options best aligns with your business objectives and your user's needs:

Native: Developing an app for a single operating system, i.e. Apple iOS or Google Android OS. To do so means strictly adhering to the published guidelines set out for design, development, and app store distribution.
Adaptive: Developing several versions of the app or site, starting from the smallest device and designing up. Related is a hybrid approach that is developed for an app or a site to work across multiple platforms, and enables support for multiple operating systems. The end user experience should be indistinguishable from a native app.
Responsive: Generally regarded as the best practice for developing sites and web-apps today, designing with a mobile-first user experience in mind. The main drawback is that responsive websites cannot be distributed through an app store.

2. Create a user persona, ideally comprising primary research, like interviews, surveys, and customer data and insights, alongside secondary market research. Focus on understanding your user's needs. Consider what challenges they might face while using your app, and what opportunities there are to offer specific, actionable solutions to help them meet their goals.

3. Define the essential steps of the end-to-end user flow. Identify the key interactions at each touchpoint and prioritize the content and calls-to-action required to move the users through the experience efficiently.

4. Develop sketches into wireframes of individual screens, establishing a navigation system and information hierarchy. In the beginning, your wireframes should be simple, with just the minimum amount of detail necessary to get useful feedback.

5. Connect the screens into prototypes that you can test with users. Prototypes help determine whether your steps are in the right order and if there are any gaps in your flow. They are an effective tool for getting feedback throughout the design process. Test early and often!

6. Iterate, adding layers of detail as you receive feedback from your users and team. With each round of testing, you can layer on visual design elements and style, switch from lorem ipsum to real copy, and add more complex interactivity.

As a general rule of thumb, in mobile app UX, your focus should always be to make things easier.

The constraints of mobile can actually work to your advantage in distilling the essence of your product up the responsive ladder, forcing you to put only the most valuable content and interactions front and center.

So how can you reduce the clutter and sharpen the focus?

Tips and best practices for mobile app UX design

According to the industry experts at the Interaction Design Foundation, "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."

Here is our round-up of best practices to guide your design process:

1. Show users the way forward with focused calls-to-action

DON'T waste above-the-fold real estate with vague calls-to-action or extraneous content.
DO provide easy access to common tasks.
DO provide feedback and real-time validation that shows users something is happening.
DO make it simple to ask for help, i.e. click-to-call or chat

DON'T hide the search functionality in a menu.
DON'T make users pinch to zoom in on images or use a horizontal scroll.
DO offer a single-click path back Home.
DO make sure your most important links are always visible; secondary items can live in a collapsed or slide-out menu if necessary.

3. Eliminate distractions that interrupt a user's task flow

DON'T make users start over when they switch to mobile; create continuity between your desktop and mobile experiences, pre-filling and retaining as much data as possible.
DON'T take users out of the experience with pop-ups or new windows.
DO break multi-step processes into bite-sized tasks.
DO offer alternative inputs, i.e. voice.

4. Make every design element on screen count

DON'T use tiny target areas for making selections; Apple recommends a minimum of a 44px square.
DON'T use long drop-down menus for making selections, i.e. use a visual calendar for dates instead.
DO create a clear visual hierarchy with typography (H1s, H2s, etc.) and visual contrast (i.e. dark mode) to avoid screen glare.
DO make one-handed navigation easy by putting key selections in the 'thumb zone.'

App UX thumb area — *85% of users interact with their screen with a single thumb. (* *Source* )

5. Be intentional with users' requests

DON'T block user exploration with upfront registration.
DON'T ask for data without offering a clear reason (i.e. location data).
DO allow single-sign-on (i.e. with Facebook or Google credentials).
DO allow guest checkouts.

Get the latest marketing news and expert insights delivered to your inbox

How you can work with UX designers to create converting, memorable experiences

Good UX, like marketing, is grounded in deep customer insights. UX is not only responsible for enabling useful and usable functionality, but also for creating resonant brand experiences.

Marketers and UX designers must see each other as mutually invested partners in ensuring an app's success. After all both have the same goal of ensuring engagement.

If you're looking to better understand the baseline experience for your app, a good place to start is to understand the UX design. Talk to your designer about the choices behind in-app user flows and paths. Also see if they had a certain experience in mind for web-to-app journeys.

Powered with this knowledge you can then begin to dig into behavioral data and insights to examine your app's performance.

Squaring KPIs like session depth, number of screens per visit, and in-app event completions against the UX design can reveal what's helping or hindering users on their path to conversion and point to where they might be dropping off.

For example: serving up any offers or promotions that interrupt the user's flow in the app might be one cause of abandonment. 46% of the time people had an interruptive mobile experience, driving them to declare they would not purchase from that brand in the future.

Marketers can work with UX designers to find the appropriate moments in the experience to reach users, with the right message at the right time, without distracting them from their goals.

An app's UX holds the key to its successful market adoption.

When looking at an app's K-factor, or word-of-mouth virality, for example, keep in mind that 89% of people are likely to recommend a brand after a positive experience on mobile.

Though an app's moments of interaction might be small, their impact has the potential to be mighty.

What's important to remember when you're designing a mobile app user experience?

There are three key takeaways here:

Context awareness is everything. Mobile users fluidly shift between modes. Mobile app designers need a clear understanding of how, when, where, and why your customers are going to use your product (and hopefully keep using it for the long run).
Constraints are your friend. Mobile app designers should see mobile's constraints as opportunities to laser-focus on your product's most essential messages and actions.
Design with intent. Focus on what, exactly, you want your users to do in your mobile app, and then give them an unobstructed path to do it.

Above all, when designing features or developing flows, ask yourself how you might make something simpler, faster, frictionless, and more enjoyable for your users. And don't forget to remind them to leave a review in the app store.