• 10 Heuristic Principles for Mobile Interfaces
  • By Jordan DeVos
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Hyde Song
  • Proofreader: PortandBridge, Sunui

When Jakob Nielsen started working on design patterns, he was consulting and teaching usability engineering in human-computer interaction. So in 1994, he collected and published a set of usability heuristic evaluation principles that reflected what he was studying. Now, nearly 25 years later, as computers move to smartphones, Nielsen’s principles still hold.

People-oriented design emphasizes the importance of the user, and the design process is adjusted accordingly; However, while Nielsen’s principles are still common across all screen types, as the use of mobile devices continues to increase, the focus of design has shifted to mobile interfaces.

Search for heuristic principles online and you’ll come up with a long list with slightly different contents. Below is a selection of ten principles inspired by advocates of human-centered design and usability ideas.

Usability heuristics start with user requirements

Before we start discussing these ten principles, it’s important to recognize that the importance of users is growing. The redesign of gov.uk, although a government website, is a classic example of a user-led product gaining global recognition for its usability.

Project Design Director Ben Terrett starts with a set of principles for user interface design that covers everything from product strategy to visual design approaches. It is the first principle that guides product success: “Always start with what the user wants. If you don’t know what your users want, you can’t build the right thing. Do research, analyze data, and communicate with users. Don’t assume. Be empathetic to your users and remember that what they ask for is not always what they need.”

The heuristic principles of usability assessment help determine where UI design does not provide a user-friendly experience.

First, the transparency of the system structure

By making certain elements and structures visible, the user has sufficient understanding of the context.

The UI should allow users to believe that everything is under control. Users should be able to easily answer these questions: “Where am I now?” “And” Where can I go from here? When a system is transparent, the user can decide what happens next. Users gain autonomy and subsequent confidence in using the interface.

Second, the immediacy of operational feedback

The response to the user’s action proves that the system has received the request.

Any user action should have an immediate interface feedback. Instant feedback reassures users that the system is doing what is expected. Nick Babich, UX expert at Smashing Magazine, uses progress indicators as a great example to clearly communicate the state of action. He thinks it can intuitively notify users that their actions have been accepted, and the system will soon indicate what to do next. Without indicators, users are faced with uncertainty and frustration, resulting in interrupted user access.

Let the user know the error information

When a user makes an error, he or she will get a prompt message and corresponding operation options.

Sometimes, users interact with mobile interfaces in unexpected ways, and become frustrated and annoyed when using them, unable to meet their needs. Not being able to use it smoothly and easily is a common reason for users to leave early. The UI should provide enough prompts to help users identify, determine, and recover from errors.

Users should always have easy access to help information; Striking a balance, however, will not be easy. Giving the user too many choices can be overwhelming. The user should have a clear understanding of how to resolve the error and how to prevent it from happening again in the future.

Four, the flexibility of use

The interface should be intuitive and effective for users with different experiences.

The mobile interactive experience should not rely on external user instructions. Whether the user is using the mobile app for the first time or the hundredth time, the interface should be adapted to both scenarios.

Make it easy for old users to access the app quickly and gain a deeper understanding of the app as a whole, but don’t leave new users helpless because of simple confusion. With the flexibility of the UI, users can find ways to match their capabilities and meet their needs.

Jill Gerhardt-Powal’s principles of cognitive engineering advise designers to “provide multiple data encoding where appropriate — systems should provide data in different formats and/or levels of detail to improve cognitive flexibility and satisfy user preferences.” Interfaces that stress or constrain users are bound to be annoying to use.

V. User experience that fits the habits of the public

Use design elements that are common sense and predictable.

The history of graphical interfaces began when Apple Computer compared real-world objects to the first user-friendly computer interface design. The graphical interface for “Lisa” uses similar design elements such as folder ICONS to indicate file organization. These realistic comparisons are useful when most people are unfamiliar with digital interaction, but as people’s digital literacy improves, most comparisons no longer need to be literal.

As people spend more time interacting with screens, common user expectations have developed. We want the + to expand more information, and the navigation menu to stay at the top or bottom of the moving screen. The interface is intuitive with comparisons that most users can understand.

6. Prevent overinformation and overdesign

Create a streamlined design that excludes non-essential elements that can affect a smooth and purposeful user experience.

As a general rule, digital interaction design should not confuse users. To reduce decision time and errors, Jill Gerhardt-Powal challenged designers to reduce uncertainty by presenting data in a clear and obvious way. This can be done by removing unnecessary content and using color, layout, and typography to guide the user through the screen. Users should not be distracted, but should be provided with enough guidance to make it easier for them to achieve their goals.

Ben Terrett often uses the fourth design principle of gov.uk: “Try to make things simple.” He believes that design teams should fully understand the problem they are dealing with and the process of providing the best solution for intuitive, informative, and successful user experience. Their approach is documented in this case study.

Function over form

Design decisions are driven by the role of the element, rather than prioritizing its visual style.

“If you think something is smart and complicated, be careful — it could be self-indulgent.” Don Norman, prolific product designer and author of The Design of Everyday Things.

The visual design of an interface should always start with a defined function. When style and trends are prioritized, the results can look pretty and eye-catching, but ultimately can lead to a disengaged user experience. Visual form cannot save dysfunctional design.

Visual cues can be used to guide the user through the application’s functions. Fritt’s law states that shape, spacing, and size guide the user to understand the situation and take the required action. It is here that form supports and amplifies function.

Information should be easily accessible

Put the interface elements in the best possible place for the user to touch and finger, so that they don’t have to manipulate them from memory.

It is easier to recognize something than to recall it. If the functionality of a mobile interface is based on a small amount of information or a system that the audience is not familiar with, then the information should be accessible and user-friendly.

One of Nielsen’s heuristic principles suggests that designers should “reduce the burden on the user’s memory by making every object, action, and option visible. The user does not have to remember information for each part of the session. Instructions for using the system should be visible or, where appropriate, easily searchable.”

Jill Gerhardt-Powal suggests “integrating lower-level data into higher-level summations to reduce the cognitive burden.” She added, “Display names and labels should be context-relevant, which will improve recall and recognition.” It is important to realize that a user seeing an interface for the first time will not know and be as familiar with the information as a designer. Repeating information may seem redundant to an experienced team, but it is essential to a new user.

Ix. Reliable consistency

Use consistent and standardized elements such as copywriting, scenarios, and actions to create a cohesive experience.

Humans are attracted to patterns — we use patterns to make sense of the world. By creating patterns in a mobile interface, it becomes a training tool for users on what to expect and how to interact with the interface design.

“This should not be a constraint. Every situation is different.” The design principles of gov.uk state that the interface style should be consistent, but it should not be uniform. As Jill Gerhardt-Powal echoed, “New information should be presented within a familiar framework (e.g., patterns, metaphors, everyday language) so that it is more accessible to people.”

Wise redundancy

Constant reflection during the design process to ensure that user interface design principles and usability heuristics are consistent with the product’s purpose and user needs.

Jakob Nielsen is the first to admit that it is impossible to provide generic details for UI design. For example, his two heuristic principles can be contradictory — #6: Provide all the information the user needs to make a decision; #8: Eliminate anything unnecessary.

The responsibility for determining the best strategy for a particular use case falls on the heuristic evaluator and the design team. If the product is designed for people and built around the needs of the user, the team understands this and has a clear goal when making decisions.

Read more:

  • Heuristic Analysis for UX — How to Run a Usability Evaluation
  • The Principles of Design and Their Importance
  • The Importance of Human-Centered Design in Product Design
  • Creating a UI Style Guide for Better UX
  • Mobile App Design Best Practices and Mistakes

This article was originally published onwww.toptal.com.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.