Ten Principles of Mobile Interface Design

Ten Principles of Mobile Interface Design

Author: JVDS Design Studio Reading time: about 8 min
Link copied

As a mainstream medium for information in modern society, the smartphone has become part of nearly every aspect of life. Mobile software interfaces give us a virtual visual environment that extends beyond the physical world. Using limited space and visual elements effectively in mobile interface design has therefore become an important subject for every interface design company.

Human-centered design emphasizes the importance of users and adapts the design process accordingly. Although Nielsen's principles remain broadly relevant across screen types, the growing use of mobile devices has shifted greater design attention to mobile interfaces.

Search online for heuristic principles and you will find long lists with slightly different content. The following selection of ten principles draws inspiration from advocates of human-centered design and usability.

Usability Heuristics Begin with User Needs

Before discussing the ten principles, it is important to recognize the growing importance of users.

Project design director Ben Terrett introduced a set of user interface design principles spanning product strategy and visual design. The first principle for guiding product success is: "Always start with user needs." If you do not know what users need, you cannot build the right thing. Conduct research, analyze data, and speak with users. Do not assume. Empathize with users, and remember that what they request is not always what they need.

Heuristics for usability evaluation help identify where a UI design fails to provide a user-friendly experience.

1. Transparency of System Structure

Make important elements and structures visible so users have enough context.

The user interface should reassure users that everything is under control. They should be able to answer questions such as, "Where am I now?" and "What happens next?" When the system is transparent, users can anticipate what comes next. This gives them autonomy and confidence while using the interface.

2. Timely System Feedback

Responding to an action confirms that the system has received the user's request.

Every user action should receive immediate interface feedback. Prompt feedback reassures users that the system is doing what they expect. Smashing Magazine user experience expert Nick Babich uses a progress indicator as a strong example because it communicates operational status clearly. It shows users that their action has been accepted and that the system will soon indicate the next step. Without an indicator, users face uncertainty and frustration, which may cause them to abandon the experience.

3. Inform Users About Errors

After an incorrect action, users should receive a clear message and relevant options for what to do next.

Users sometimes interact with mobile interfaces in unexpected ways and become frustrated when they cannot meet their needs. Difficulty using an interface smoothly and easily is a common reason for leaving early. The user interface should provide enough immediate information to help users identify, understand, and recover from errors.

Help should always be easy to access, but balance is difficult. Too many options can overwhelm users. Make it clear how to resolve an error and how to prevent it from happening again.

4. Flexibility in Use

The interface should allow users with different levels of experience to operate it intuitively and efficiently.

A mobile interaction should not depend on an external user guide. The interface should work both for someone opening the mobile APP for the first time and for someone using it for the hundredth time.

Give experienced users fast access and a deeper understanding of the APP, but do not leave newcomers helpless because of simple confusion. A flexible UI enables people to find an approach that fits their abilities and needs.

Jill Gerhardt-Powals' cognitive engineering principles advise designers to "provide multiple data encodings when appropriate." Systems should present data in different formats and/or levels of detail to improve cognitive flexibility and accommodate user preferences. Whether an interface is stressful or restrictive, it will inevitably frustrate the people using it.

5. Match Familiar User Conventions

Use design elements that align with people's common expectations.

The history of graphical interfaces includes Apple's early effort to create a user-friendly computer interface based on real-world objects. In the "Lisa" graphical interface, elements such as folder icons represented file organization. These real-world comparisons were useful when most people were unfamiliar with digital interaction. As digital literacy has grown, however, most controls no longer need to be literal.

As people spend more time interacting with screens, shared expectations have formed. We expect a "+" to expand more information and navigation to remain at the top or bottom of a mobile screen. Interfaces become intuitive when they use comparisons that most users understand.

6. Prevent Information Overload and Overdesign

Create a streamlined design that removes unnecessary elements that could interfere with a smooth, purposeful user experience.

As a general principle, digital interaction design should not confuse users. To reduce decision time and errors, Jill Gerhardt-Powals challenges designers to display data clearly and visibly, reducing uncertainty. Unnecessary content can be removed, while color, layout, and typography guide users through each screen. People should not be distracted; they need enough direction while remaining able to pursue their own goals.

GOV.UK's fourth design principle is: "Do the hard work to make it simple." The design team should thoroughly understand both the problem and the process required to deliver the best solution for an intuitive, informative, and successful user experience. Its approach is documented in the cited case study.

7. Function Over Form

Design decisions should be driven by what an element does, rather than giving priority to its visual style.

The visual design of an interface should begin with defined functionality. When style and trends take priority, the result may look beautiful and striking but ultimately create a disconnected user experience. Visual form cannot rescue a functionally flawed design.

Visual cues can guide users through an APP's functions. Fritt's rule states that shape, spacing, and size can help users understand the situation and take the necessary action. Here, form supports and amplifies function.

8. Make Information Easy to Access

Place interface elements in the best positions for users' "fingers," so they do not have to operate from memory.

If a mobile interface depends on a small amount of information or a system unfamiliar to users, that information should be easy to access and use.

Designers should "reduce the user's memory load by making objects, actions, and options visible." Users should not have to remember information from every part of a session. Instructions for using the system should be visible or easy to retrieve at the appropriate moment.

9. Dependable Consistency

Use consistent, standardized elements—including copy, context, and actions—to create a coherent experience.

People are drawn to patterns; we use them to understand the world. Creating a pattern in a mobile interface gives users a framework for what to expect and how to interact with the interface.

10. Thoughtful Redundancy

Continue reflecting on the design process to ensure user interface principles and usability heuristics remain aligned with the product's purpose and user needs.

An excellent mobile interface must meet three tests: visual appeal, practicality, and convenience. These qualities are inseparable in real-world use. Designers must give mobile interface design its character while meeting the needs of different users.

从想法到落地,我们一起完成

以用户体验为核心,打造真正可用、可增长的数字产品

和我谈谈您的项目