10 heuristic principles for mobile interfaces

Jakob Nielsen consulted and taught usability engineering when he began to learn many patterns. In 1994, he compiled and released a set of principles for evaluating usability heuristics that reflected his accumulated knowledge. Today, almost 25 years later, and after the smartphone replaced the computer, Nielsen’s principles are still valid.

The human-centered design reinforced the importance of the user and the design processes adapted accordingly. However, while Nielsen’s principles remain universal for all types of screens, with the continued growth of mobile device use, the emphasis is on mobile interfaces.

Search the web for heuristic principles and a long list of slightly different principles will emerge that are inspired by human-centered design and usability leaders.

The usability heuristic starts with the user’s needs

7 days of design reload

The most powerful speakers, the friendliest design community and the desire to make cool designs.
10% discount with UXPUB promo code

Join

Before moving on to a set of principles, it must be recognized that the importance of the user continues to grow. The redesign of GOV.UK, despite being a government website, is a prime example of a user-centric product that has received worldwide recognition for its usability.

Ben Terrett, project design director, started with a set of interface design principles that ranged from product strategy to visual design approaches. The very first principle was the guiding star for the success of the product: “Always start with the needs of the users. If you don’t know what the user wants, you’re not going to create the right product. Conduct research, analyze data, communicate with users. Don’t make assumptions. Have empathy for your users and remember that what they ask for is not always what they need. ”

The heuristic principles for evaluating usability help identify where interface design does not provide a good experience.

1. Comprehensibility of the structure of the system

Make certain elements and structures visually conspicuous so that the user has a sufficient understanding of the context.

The interface should allow the user to believe they are in control. He should easily answer the following questions: “Where am I now?” and “Where can I go from here?” When the system is understood, the user can make decisions about what comes next. He gains autonomy and subsequent confidence in using the interface.

0_BAE8DM_ocDtJZg-c
The navigation menu turns into a hamburger menu, indicating where information can be found later. (Designed by Gal Shir)

2. Instant feedback on actions

A response to a user action confirming that the system has received the request.

Any user action should cause an instant response from the interface. Instant feedback convinces the user that the system is taking action. Nick Babich, UX specialist at Smashing Magazine, uses a progress bar as a good example of a clear action status. It visually informs the user that his action has been taken, and the system will soon inform the next action. Without the indicator, the user is left unsure and frustrated, because of which he can leave the site or application.

0_9VP-bybmPpAQo8Ns
A simple animation confirms that the pull-to-refresh action has been accepted and the content below has been updated. (Design by jiangxiaobei)

3. Reporting errors

A sufficient amount of information, as well as parameters that the user can use when he is on the wrong path.

At some point, users inevitably interact with the mobile interface inappropriately and find themselves in a frustrating and unproductive situation that does not meet their needs. Barriers and dead ends are common reasons why a user leaves a site or application prematurely. The user interface should provide enough indicators to help the user recognize, diagnose, and correct the error.

Help should always be readily available. However, finding a balance is difficult. Too many options can cause cognitive overload. The user should have a clear idea of ​​how to fix the error and understand how to prevent it in the future.

0_uPupo3gf8fjFHJTD
The blank state in this mobile interface explains why the user sees this screen and offers two actions to resolve the error. (Designed by Murat Mutlu)

4. Flexibility of use

An interface that users with a wide range of experiences can use intuitively and effectively.

The interactive mobile experience should be independent of external user guidance. Regardless of whether the first is the mobile application that the user is using or the hundredth, the interface must match both scenarios.

An experienced user should have access to hotkeys and deeper systems understanding, and a new user should never be left at a loss. Thanks to the flexibility of the interface, the user can manage the “journey” that best suits his capabilities and needs.

Jill Gerhardt-Powal’s Cognitive Engineering Principles “provide multiple encoding of data when needed – the system must provide data in various formats and / or levels of detail to provide cognitive flexibility and user preference.” An interface that is overwhelming or restrictive for the user will provide an unpleasant experience.

five
A new user should become familiar with the functionality of the tool, but an experienced user will never see prompts for actions that they regularly perform. (Design by Lakshmi Karuppiah)

5. Acquaintance with universal experience

The use of design elements that relate to general human experience and expectations.

The history of the graphical user interface (GUI) began when Apple used real links in the first usable computer interface design. Lisa was designed with elements such as a folder icon to indicate the file organization. These physical links were useful when digital interactions were unfamiliar to most people, but with the rise of digital literacy, universal links no longer need to be so literal.

Overall user expectations have emerged as we spend more time interacting with screens. We expect the “+” sign to reveal additional information, and the navigation menu will remain either at the top or at the bottom of the mobile device screen. By using links that are understandable to most users, the interface becomes intuitive.

6
These two icons are instantly recognizable and clearly represent an action that most users will understand. (Disan Mohammad Amiri)

6. Limiting information and design aesthetics

Creating a minimal design that eliminates unnecessary elements that might interfere with an optimized and focused experience.

The general rule of thumb for all digital interactions is to eliminate confusion. To reduce decision time and error, Jill Gerhardt-Powal encourages designers to reduce uncertainty by displaying data in a clear and obvious way. This can be achieved by removing unnecessary content and using color, layout and typography to guide the user around the screen. Users should not be distracted, but should be oriented enough to easily achieve their goal.

Ben Terrett often used the design principles of GOV.UK: “Do the hard work to make it easier.” He believed that it was up to the design team to fully understand the challenges they face and the process leading to the best solution to deliver an intuitive, informative, and successful user experience. Some of their methods are described in this case study.

7
The British Government Digital Services has broken down the information to determine what users need to know and developed a visual design that eliminated all unnecessary information to ensure clarity. (Designed by Government Digital Services)

7. Function takes precedence over form.

Design decisions are determined by what the element is supposed to do, not by the priority of its visual style.

“If you think your idea is smart and sophisticated, be careful – it’s probably self-deception.” – Don Norman, product designer and author of The Design of Everyday Things.

Visual interface design should always start with specific features. When style and trends are prioritized, the result can look pretty and get a lot of attention, but ultimately lead to an unrelated user experience. Visual form won’t save ineffective designs.

Visual cues can be used to guide the user through the functionality of the application. Fitts’s Law states that shape, distance and size can lead the user to understand the situation and take the necessary action. This is where this form supports and enhances function.

eight
This digital boarding pass takes into account what information the traveler will need and uses visual techniques to make the information functional. (Designed by Marin Begovic)

8. Availability of information

Strategically positioning UI elements at the user’s fingertips so they don’t have to rely on memory.

It is easier to recognize something than to remember it from memory. If the function of the mobile interface relies on a piece of information or understanding of a system that is not generally known, the information must be available so that the user can easily refer to it.

One of the heuristic principles of Nielsen suggests that the developer should “minimize the load on the user’s memory by making objects, actions, and parameters visually visible. The user does not have to remember information from one part of the dialogue to another. The instructions for using the system must be visible or easily retrievable when necessary. “

Jill Gerhardt-Powal proposes to “combine lower-level data into a higher-level sum to reduce cognitive load.” She also argues that “display names and labels should be context sensitive to improve recall and recognition.” It is important to understand that the user who sees the interface for the first time will only get acquainted with the information. Repetition of information may seem overwhelming for an experienced team, but it can be important for new users.

nine
The Uber app provides three levels of taxi service and makes each option easily available to the user when needed. (Designed by Uber)

9. Reliability of consistency

Using consistent and standardized elements such as words, situations and actions to create a unified experience.

People are drawn to patterns – we use them to understand the world. Create templates in the mobile interface and it will become a learning tool for users to know what to expect and how to interact with the interface design.

“This is not a straitjacket or a rulebook. There are different circumstances. ” The GOV.UK design principles state that the interface should be consistent, but not uniform. Jill Gerhardt-Powal echoes them: “New information should be presented in familiar forms (eg, diagrams, metaphors, everyday terms) to make it easier to assimilate.”

10
Google’s increased focus on design is evident in detailed guidelines for all user interface designs. (Material Design)

10. Reasonable redundancy

Constant reflection throughout the design process to ensure that interface design principles and usability heuristics are aligned with product goals and user needs.

Jacob Nielsen was the first to admit that it is impossible to envision universal specifics for user interface design. For example, two heuristic principles formulated by him may presumably contradict each other. # 6: provide all the information the user needs to make a decision, and # 8: eliminate all unnecessary.

The heuristic evaluator and design team must determine the best solutions for their unique use cases. If the product is human-centered and based on user needs, the team will be aware of this and they will be goal-aware when making these decisions.

Leave a Reply

Your email address will not be published. Required fields are marked *