The difference between a good app and a bad app is usually the quality of its user experience (UX). A good UX is what separates successful apps from unsuccessful ones.
Today, mobile users expect a lot from an app: fast loading time, ease of use and delight during interaction. If you want your app to be successful, you have to consider UX to be not just a minor aspect of design, but an essential component of product strategy. There are many things to consider when designing for mobile. In this article, I‘ve summarized a lot of practical recommendations that you can apply to your design.
Minimize Cognitive Load Cognitive load refers here to the amount of brain power required to use the app. The human brain has a limited amount of processing power, and when an app provides too much information at once, it might overwhelm the user and make them abandon the task. Our practical handbook, in which Alla Kholmatova explores how to create effective and maintainable design systems to design great digital products. Meet Design Systems, with common traps, gotchas and the lessons Alla has learned over the years.
DECLUTTERING Cutting out the clutter is one of the major recommendations in ―10 Do‘s and Don‘ts of Mobile UX Design.‖ Clutter is one of the worst enemies of good design. By cluttering your interface, you overload users with too much information: Every added button, image and icon makes the screen more complicated. Clutter is terrible on desktop, but it‘s far worse on mobile (simply because we don‘t have as much real estate on mobile devices as we do on desktops and laptops). It‘s essential to get rid of anything in a mobile design that isn‘t absolutely necessary because reducing clutter will improve comprehension.
The technique of functional minimalism can help you deal with the problem of a cluttered UI:
• Keep content to a minimum (present the user with only what they need to know).
• Keep interface elements to a minimum. A simple design will keep the user at ease with the product. The clear tab bar (right) is much better than the cluttered one (left). (Image: Apple)
• Use the technique of progressive disclosure to show more options. The interface reveals more options after interaction. (Image source: Ramotion) OFFLOAD TASKS Look for anything in the design that requires user effort (this might be entering data, making a decision, etc.), and look for alternatives. For example, in some cases you can reuse previously entered data instead of asking the user to type more, or use already available information to set a smart default. BREAK TASKS INTO BITE-SIZED CHUNKS
If a task contains a lot of steps and actions required from the user‘s side, it‘s better to divide such tasks into a number of subtasks. This principle is extremely important in mobile design because you don‘t want to create too much complexity for the user at one time. One good example is a step-by-step checkout flow in an e-commerce app, where the designer breaks down a complex checkout task into bite-sized chunks, each requiring user action. Chunking makes a form look less loaded, especially when you‘re requesting a lot of information from the user. (Image source: Murat Mutlu) Chunking can also help to connect two different activities (such as browsing and purchasing). When a flow is presented as a number of steps logically connected to each other, the user can more easily proceed through it. Finding a film and purchasing tickets to the cinema. (Image source: Anton Skvortsov) USE FAMILIAR SCREENS Familiar screens are screens that users see in many apps. Screens such as ―Gettings started,‖ ―What‘s new‖ and ―Search results‖ have become de facto standards for mobile apps. They don‘t require additional explanation because users are already familiar with them. This allows users to use prior experience to interact with the app, with no learning curve. User profile screen in Quora app Consider reading ―The 11 Screens You‘ll Find in Many of the Most Successful Mobile Apps‖ for more information on familiar screens. MINIMIZE USER INPUT Typing on a small mobile screen isn‘t the most comfortable experience. In fact, it‘s often error-prone. And the most common case of user input is filling out a form. Here are a few practical recommendations to make this process easy: • Keep forms as short as possible by removing any unnecessary fields. The app should ask for only the bare minimum of information from the user. A rule of thumb in form design is that shorter is better. Combine multiple fields into one easy-to-fill field. (Image source: Luke W.) • Provide input masks. Field masking is a technique that helps users format inputted text. A mask appears once a user focuses on a field, and it formats the text automatically as the field is being filled out, helping users to focus on the required data and to more easily notice errors. (Image credit: Josh Morony) • Use smart features such as autocomplete. For example, filling out an address field is often the most problematic part of any registration form. Using tools like Place Autocomplete Address Form (which uses both geo- location and address prefilling to provide accurate suggestions based on the user‘s exact location) enables users to enter their address with fewer keystrokes than they would have to with a regular input field. • Dynamically validate field values. It‘s frustrating when, after submitting data, you have to go back and correct mistakes. Whenever possible, check field values immediately after entry so that users can correct them right away. Inline validation (Image source: Baymard) • Customize the keyboard for the type of query. Display a numeric keyboard when asking for phone number, and include the @ button when asking for an email address. Ensure that this feature is implemented consistently throughout the app, rather than only for certain forms. Match the keyboard to the required text input. (Image: ThinkWithGoogle) ANTICIPATE USERS NEEDS Proactively look for steps in the user journey where users might need help. For example, the screenshot below shows a part where users need to provide specific information. It is not obvious where the user can find the barcode. Concise help text next to the input field would be very useful. (Image source: Hotjar)
USE VISUAL WEIGHT TO CONVEY IMPORTANCE
The most important element on the screen should have the most visual weight. Adding more weight to an element is possible with font weight, size and color. Large items catch the eye and appear more important than smaller ones. The ―Request Lyft‖ button will capture user attention.
Clear communication should always be a top priority in any mobile app. Use what you know about your target audience to determine whether certain words or phrases are appropriate. Unknown terms or phrases will increase cognitive load for the user. (Image source: ThinkWithGoogle)
MAKE THE DESIGN CONSISTENT
Consistency is a fundamental principle of design. Consistency eliminates confusion. Maintaining an overall consistent appearance throughout an app is essential. Regarding mobile app, consistency means the following: • Visual consistency Typefaces, buttons and labels need to be consistent across the app. • Functional consistency Interactive elements should work similarly in all parts of your app. • External consistency Design should be consistent across multiple products. This way, the user can apply prior knowledge when using another product. Here are a few practical recommendations on how to make a design consistent: • Respect platform guidelines. Each mobile OS has standard guidelines for interface design: Apple‘s Human Interface Guidelines and Google‘s Material Design Guidelines. When designing for native platforms, follow the OS‘ design guidelines for maximum quality. The reason why following design guidelines is important is simple: Users become familiar with the interaction patterns of each OS, and anything that contradicts the guidelines will create friction. • Don‘t mimic UI elements from other platforms. As you build your app for Android or iOS, don‘t carry over UI elements from other platforms. Icons, functional elements (input fields, checkboxes, switches) and typefaces should have a native feel. Use native components as much as possible, so that people trust your app. • Keep the mobile app consistent with the website. This is an example of external consistency. If you have a web service and a mobile app, make sure that both of them share similar characteristics. This will allow users to make frictionless transitions between the mobile app and the mobile web. Inconsistency in design (for example, a different navigation scheme or different color scheme) might cause confusion. Put The User In Control KEEP INTERACTIVE ELEMENTS FAMILIAR AND PREDICTABLE Predictability is a fundamental principle of UX design. When things work in the way users predict, they feel a stronger sense of control. Unlike on desktop, where users can use hover effects to understand whether something is interactive or not, on mobile, users can check interactivity only by tapping on an element. That‘s why, with buttons and other interactive elements, it‘s essential to think about how the design communicates affordance. How do users understand an element as a button? Form should follow function: The way an object looks tells users how to use it. Visual elements that look like buttons but aren‘t clickable will easily confuse users. THE ―BACK‖ BUTTON SHOULD WORK PROPERLY An improperly created ―back‖ button can cause a lot of problems for users. Prevent situations when tapping the ―back‖ button in a multi-step process would take users all the way back to the home screen. A good design makes it easier for users to go back and make corrections. When users know that they can take a second look at data they‘ve provided or options they‘ve selected, this allows them to proceed with ease. MEANINGFUL ERROR MESSAGES To err is human. Errors occur when people engage with apps. Sometimes, they happen because the user makes a mistake. Sometimes, they happen because the app fails. Whatever the cause, these errors and how they are handled have a huge impact on the UX. Bad error handling paired with useless error messages can fill users with frustration and could be the reason why users abandon your app. Take an error-state screen from Spotify as an example. It doesn‘t help users understand the context and doesn‘t help them find the answer to the question, ―What can I do about it?‖ Spotify‘s error screen just states ―An error occurred‖ and doesn‘t provide any constructive advice on how to fix the problem. Don‘t assume users are tech-savvy enough to figure things out. Always tell people what‘s wrong in plain language. Each error message should tell users: • what went wrong and possibly why, • what‘s the next step the user should take to fix the error. Consider reading ―How to Design Error States for Mobile Apps‖ for more information on error handling. Design An Accessible Interface Accessible design allows users of all abilities to use products successfully. Consider how users with vision loss, hearing loss and other disabilities can interact with your app. BE AWARE OF COLOR-BLINDNESS 4.5% of the global population experience color-blindness (that‘s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It‘s easy to forget that we‘re designing for this group of users because most designers don‘t experience such problems. Let me give you a simple example. Success and error messages in mobile forms are often colored green and red, respectively. But red and green are the colors most affected by color-vision deficiency (these colors can be difficult to distinguish for people with deuteranopia or protanopia). Most probably you‘ve seen the following error message when filling out a form: ―The fields marked in red are required‖? While it might not seem like a big thing, this error message combined with the form in the example below can be an extremely frustrating experience for people who have color-vision deficiency. The form field‘s design relies only on red and green to indicate fields with and without an error. Color-blind users cannot differentiate the fields highlighted in red. As the W3C‘s guidelines state, color shouldn‘t be used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. It‘s important to use other visual signifiers to ensure that users will be able to interact with an interface. The use of icons and labels to show which fields are invalid better communicates the information to a color-blind user.
MAKE ANIMATIONS OPTIONAL
Users who suffer from motion sickness often turn off the animated effects in their OS settings. When the option to reduce motion is enabled in accessibility preferences, your app should minimize or eliminate its own animations. Make The Navigation Simple Helping users navigate should be a high priority for every app. All the cool features and compelling content that your app has won‘t matter if people can‘t find them; also, if it takes too much time or effort to discover how to navigate your product, chances are you‘re just going to lose users. Users should be able to explore the app intuitively and to complete all primary tasks without any explanation. USE STANDARD NAVIGATION COMPONENTS It‘s better to use standard navigation patterns, such as the tab bar (for iOS) and the navigation drawer (for Android). The majority of users are familiar with both navigation patterns and will intuitively know how to get around your app. Side drawer (Android). (Image source: Material Design)Tab bar (iOS). (Image source: Ramotion) For more information on navigation patterns, read the article ―Basic Patterns for Mobile Navigation: Pros and Cons.‖ PRIORITIZE NAVIGATION OPTIONS Prioritize navigation based on the way users interact with your app. Assign different priority levels (high, medium, low) to common user tasks. Give prominence in the UI to paths and destinations with high priority levels and frequent use. Use those paths to define your navigation. Organize your information structure in a way that requires a minimum number of taps, swipes and screens.
DON‘T MIX NAVIGATION PATTERNS
When you choose a primary navigation pattern for your app, use it consistently. There shouldn‘t be a situation in which part of your app has a tab bar, while another part has a side drawer.
MAKE NAVIGATION VISIBLE
As Jakob Nielsen says, recognizing something is easier than remembering it. Minimize the user‘s memory load by making actions and options visible. Navigation should be available at all times, not just when we anticipate that the user needs it.
COMMUNICATE CURRENT LOCATION
Failing to indicate the current location is a very common problem of many mobile app menus. ―Where am I?‖ is one of the fundamental questions users need to answer in order to successfully navigate. People should know where they are in your app at any moment. he Health app (designed by Apple) provides information about the current section (the navigation option ―Health data‖ is highlighted) and subsection (the headline ―Activity‖ is visible at the top of the layout). Use Functional Animation To Clarify Navigational Transitions Animation is the best tool to describe state transitions. It helps users comprehend a state change in the page‘s layout, what has triggered the change and how to initiate the change again when needed. Functional animation can efficiently guide the user‘s attention and make complex transitions easy to understand. (Image source: Jae-seong, Jeong)
BE CAREFUL WITH USING GESTURES IN THE UI
Using gestures in interaction design can be tempting. But in most cases, it‘s better to avoid this temptation. When gestures are used as a primary navigation option, they can cause a terrible UX. Why? Because gestures are hidden controls. As Thomas Joos points out in his article ―Beyond the Button: Embracing the Gesture-Driven Interface,‖ the biggest downside of using gestures in a user interface is the learning curve. Every time a visible control is replaced with a gesture, the app‘s learning curve goes up. This happens because gestures have lower discoverability — they are always hidden, and people need to be able to identify these options in order to use them. That‘s why it‘s essential to use only widely accepted gestures (the ones that users expect in your app). When it comes to using gestures in a UI, follow a few simple rules: • Use standard gestures. By ―standard,‖ I mean gestures that are most natural for the app in your category. People are familiar with the standard gestures, so no extra effort is required to discover or remember them. • Offer gestures as a supplement to, not a replacement for, visible navigation options. Gestures might work as shortcuts for navigation, but not as a complete replacement for visible menus. Thus, always offer a simple, visible way to navigate, even if it means a few extra actions. For more information on using gestures in your UI, consider reading ―In-App Gestures and Mobile App User Experience.‖ Focus On The First-Time Experience The first-time experience is a make or break part of mobile apps. You only get one shot at a first impression. And if you fail, there‘s a huge probability that users won‘t launch your app again. (Research by Localytics shows that 24% of users never return to an app after the first use.)
AVOID SIGN-IN WALLS
A sign-in wall is mandatory registration before using an app. It is a common source of friction for users and one of the reasons why users abandon apps. The number of users who abandon the process of registration is especially significant for apps with low brand recognition or those in which the value proposition is unclear. Pinterest asks users to create a new account or log in upon first loading. As a rule of thumb, only ask users to register if it‘s essential (for example, if core features of your app are available only when users complete registration). And even in this case, it‘s better to delay sign-in as long as possible — allow users to experience the app for a little while (for example, take a tour), and only then gently remind them to sign up. This will give your users a taste of the experience, and they will be more likely to commit to it.
DESIGN A GOOD ONBOARDING EXPERIENCE
In the context of the mobile UX, delivering an excellent onboarding experience is the foundation for retaining users. The goal of onboarding is to show the value your app provides. Among the many strategies for onboarding, one is especially effective: contextual onboarding. Contextual onboarding means that instructions are provided only when the user needs them. Duolingo is an excellent example. This app pairs an interactive tour with progressive disclosure to show users how the app works. Users are encouraged to jump in and do a quick test in their selected language. This makes learning fun and discoverable.
By The Arcpro Digital 2020