14 UX-driven heuristics to consider when designing mobile user interfaces
A complement to Jakob Nielson’s Usability Heuristics for our mobile-centric society
Mobile phones became mainstream 20 years ago, fully equipped with alien-like antennas, short battery lives, and bulky casings that should have come with warning tags saying: “Caution: safe handling may require gym membership.”
Now, mobile devices are easily portable, powerful, and every square millimeter of their hardware and software is designed with hyper-intent and backed by hundreds of hours of user research. In fact, current mobile device interfaces are so usable and intuitive, toddlers have been known to learn touchscreen gestures and fundamental UI patterns easily — accidentally creating, purchasing, and overnight shipping their Amazon wish lists straight to their parents’ front doors before they can even pronounce their own names!
The usability of mobile devices has evolved significantly over the last few decades, none of which has been an accident. It has been a labor of love — the result of curious, creative, and empathic minds watching real end users fail, succeed, and react to hundreds of iterations of products.
A more formal approach to interface design emerged in 1995, when Jakob Nielson created a set of 10 usability guidelines for interaction design on desktop websites. You can get quick recap of those heuristics here: https://www.nngroup.com/articles/ten-usability-heuristics/
Despite Nielson defining his usability standards a few decades ago, his principles are still relevant and applicable, serving as a strong foundation for mobile software design today. However, truly effective and predictive mobile design requires an additional layer of targeted, mobile-specific considerations.
Here are some mobile heuristics that Robots & Pencils has developed over years of working with hundreds of clients on a variety of mobile device products, within every industry silo, and across all platforms. They reflect the adaptive relationship between users and surrounding mobile technologies, and also capture our impression of the current state of that relationship.
Performance of use— Monitor speed as a key metric of usability in the mobile space.
As tech accessibility and speed have increased over time, users’ expectations of responsiveness and intuitiveness have too. If the desired content is hard to find or functionality loads slowly, abandonment rates increase significantly. In fact, research shows that 40% of online shoppers will only wait up to 3 seconds before abandoning a retail or travel site. Additionally, 29% of smartphone users will leave the site or delete the app altogether if they can’t find or load what they want within 3–4 seconds.
Maximize users’ time spent engaging with the interface instead of allowing them to waste time searching for features or waiting while system functionality loads.
2. Aesthetic, simplistic, and minimalist design — Balance information brevity with comprehension, implementing things like progressive disclosure of information. Displaying content and features with sensitivity to cognitive load will allow users to easily find what they need, assess their options, and make decisions. Every color pixel or designated white space on the screen needs to provide value.
3. Color usage — Strategically add color to subtly guide users’ eyes through the screen and enhance the comprehension of features and hierarchies. Material Design and iOS both suggest using color sparingly. Implement a limited color palette aligned with the brand, and an additional accent color to draw attention to call-to-actions and interactive elements. This is very effective as long as the design does not rely on color as the primary distinction between states or values.
When color is used incorrectly or excessively, it can distract, mislead, or overwhelm the user. Contrast ratios of text colors on background colors should be at least 4.5:1, in order to accommodate outdoor and bright lighting contexts. An even more stringent standard is recommended by iOS, with a 7:1 ratio. You can use a contrast checker like this one to assess ratios: https://webaim.org/resources/contrastchecker/
Color considerations also dictate the design’s accessibility to people who experience red-green, blue-yellow, or total color blindness. People who are color blind perceive certain colors as variations of grey, which can ultimately result in the appearance of a much different and less effective color palette than the one initially intended. Check out this color blindness simulator to learn more about how different types of color blindness affect vision: http://www.colourblindawareness.org/colour-blindness/colour-blindness-experience-it/
4. Consistency and standards across devices — Follow input method conventions set by Apple and Google so that the design patterns are familiar to users and meet their interaction expectations. When designing mobile applications, use UI elements that are familiar to users of both Android and iOS platforms so that there is increased familiarity and continuity.
5. Fat fingers and ergonomics — Adhere to tap zones of 48pt x 48pt. The average width of the index finger is 1.6 to 2 cm for most adults, and the average width of an adult thumb is 2.5 cm. These fingers sizes translate into roughly 45–57 pixels and roughly 72 pixels, respectively. Both of which are wider than what most mobile guidelines suggest.
Strategically placing the most important content and action buttons for users within the more accessible reach zones will optimize the physical reachability of the design.
6. Minimization of human input — Provide input shortcuts wherever possible to minimize the amount of input that the user has to perform on the mobile device. Since mobile device screens and keyboards are smaller than those for desktops, manually entering information is laborious. The fewer instances the mobile site or app requires for user input, the lower the chances are for human error and re-work.
7. 3D navigation framework — With limited screen real estate, a mobile site or app’s information architecture should structure user journeys to favor 3D layered drill down sequences rather than 2D scrolling sequences wherever possible. Embrace the use of modals and motion through carousels to progressively disclose information on mobile devices.
8. Visibility and efficiency of key user goals — Make all the key user goals obvious to find and accomplish, ideally accessible towards the top of the information hierarchy tree. Entry and continuation points should be clear, and the number of screens and states required to achieve each goal should be as low as realistically possible.
9. Clear signifiers — Make navigation items obvious and explicit instead of hidden behind menus or other UI elements.
According to Don Norman, affordances are what something can do, and perceived affordances are what someone thinks something can do. Signifiers intend to make affordances clearer by reducing possible interpretations. Social signifiers are created by designers, and they replace affordances because they are broader and richer, allowing for both accidental and deliberate signifiers. For example, a grey link on a screen might afford clicking, but a user might perceive it as a non-interactive label. Styling the link as a button with things like an enclosed background and shadow are signifiers that make it clearer to that user that the link is clickable.
For clearer signifier etiquette, favor textual navigation over graphical navigation cues, and include text labels with graphical navigation wherever possible.
10. Recovering from interruptions — Design experiences that anticipate interruptions and allow users to re-engage with minimally jarring and seemingly continuous experiences.
According to the Washington Post, a survey with more than 1,200 parents and teens showed that 48% of parents and 72% of teens said they feel compelled to respond to texts or notifications immediately. This precedent validates the chances of distractions throughout users’ engagements with an app or mobile website.
Mitigate the cycles of broken attention by returning users to the exact state they were in if the app or mobile site is abandoned. Also, diminish gracefully if the user relegates the app or site to a multitasking menu in an iOS device or recent apps menu on an Android device. When a user is interrupted, ensure that the design considers user control and freedom.
11. Viewing versus doing cycle — Provide entry and exit points that allow users to easily transition between information gathering and acting on information by using the available features of the app. Information gathering is like a set of collected tasks that sometimes does not have an inherent linear flow. Intrinsically explorative minds will poke around in areas they haven’t visited before, and attempt new flows, so it is important to integrate multiple paths that lead to the same goal.
12. Appropriate friction — Perfect usability does not engender perfect satisfaction. Incorporate the appropriate amount of friction when considering how the user audience might react to aspects like the onboarding process or the most challenging feature. The purpose of this intentional, limited friction is to encourage users to gain mastery with each subsequent engagement, while making sure they feel capable and confident throughout the process.
13. Minimization of cognitive load — Display information in ways that require the least amount of thought, effort, and attention to understand and make decisions.
In 1956, cognitive psychologist George Armitage Miller published research that later defined Miller’s Law. It states that the average human can hold an average of seven plus or minus two letters, words, or numbers in their working memory. Effective designs leverage this understanding of human working memory and reduce cognitive load. Some ways to do this include designs that present users with seven or less simultaneous options to choose from, group similar features together, and offer users smart default options to minimize the effort and attention required to achieve their goals.
14. Accommodate expert and novice users — Provide ways for advanced users to customize and optimize frequent actions, while also ensuring that key actions are also easily discoverable and accomplishable by a novice user. Including an advanced features section within settings is acommon method used to support the full spectrum of user abilities across a software system.
As the capabilities of accessible technology continue to evolve, users’ device-driven abilities and expectations elevate. Ideally, mobile-specific heuristics are malleable and should be updated as needed to reflect this dynamic relationship. Keep checking back as we continue to translate our research insights into updated sets of mobile heuristics!
