What are the best practices for mobile UX?

UI/UX categories

Mobile UX design principles and practices

With 7 years of experience in mobile development, the Sannacode team made sure that a good mobile app should be intuitive and useful.

Today the mobile app market is highly competitive and you only have 1 chance to make a good first impression. If an application is of no value or takes a long time to figure out the functionality, the user will delete such an application and never return to it.

Over the years, the Sannacode design team has deduced 10 basic principles that help create a quality UX design:

  1. Simple interface

  2. Intuitive navigation

  3. Flexibility of use

  4. Universal experience

  5. Touchscreen target sizes

  6. Legible text content

  7. Visible interface elements

  8. Hand-based control

  9. Minimal data entry

  10. Hints and feedback

Top-10 best UX principles and practices on mobile

Let's take a closer look at each of the principles of UX mobile design in 2020.

Simple interface

There is a famous quote from Antoine de Saint-Exupery: "Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away". 

In modern mobile design, it is necessary to quickly get rid of everything that is not essential.

The main principle of a convenient mobile interface: one key action per screen. Each screen you design in an app should support one action that is important to the user. This makes it easy to use and learn. One hundred clear screens are much preferable to one cluttered one.

Intuitive navigation

Even the coolest feature will be useless if people can't find it. Navigation is built on custom behavior.

Here are the main principles of good mobile navigation:

  • Mobile navigation must be consistent. You need to use the right visual metaphors to keep the navigation clear.

  • Do not move various navigation elements to a new location, or hide them on different pages. This will disorient users.

  • The user must understand where he is. Navigation should provide an opportunity for the user to return to the Home screen or the beginning of his path in 1 click.

Flexibility of use

An interface that users with different ranges of experience can use intuitively and effectively.

The interactive mobile experience should be independent of external user guidance. Regardless of whether the first is a 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 system 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-Powell’s Cognitive Engineering Principles "provide multiple encoding of data when needed - the system must provide data in different 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.

Universal experience

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 have to be so literal.

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

Touchscreen target sizes

Small tap targets are more difficult to hit than large ones, so you must choose the optimal size.

Design controls that are about 7-10mm in size and can be quite easy to tap with your finger. Such a tap target will allow the user's finger to fit snugly against the target. The edges of the target are visible when the user clicks on it. So they understand that they hit the target.

User interface controls should be large enough to carry out their tasks without frustrating users with tiny goals and misguided actions.

Also, make sure there is enough free space between the tap targets.

Legible text content

One of the main goals of mobile design is to fit a large amount of information into a small UI. It's not worth reducing the size of the text in an attempt to fit everything on one screen.

The main principle of readable text on modern mobile devices is that the text size must be at least 11. So you can read the text without enlarging the screen.

You can improve the legibility of text by increasing the line-height or the spacing between letters. A lot of white space can make the most confusing interfaces look simple and attractive.

Visible interface elements

Choose primary, secondary, and highlight colors for your mobile application that support usability. Provide the necessary color contrast between all elements so that visually impaired users can see and use your application.

Make sure the background and font colors are insufficient contrast. This oversight can lead to poor intelligibility. The W3C recommends the following contrast ratios for body and image text:

  • Small text should have a contrast ratio of at least 4.5: 1 to its background.

  • Large text (14 pt bold, 18 pt regular, and above) must have a contrast ratio of at least 3: 1 to its background.

Hand-based control

Stephen Huber, in his large-scale study of the use of mobile devices, found that about 49% of people rely solely on their thumb for various tasks. In the image below, the chart shown on the smartphone display is a rough gamut chart, where the colors indicate which areas the user can reach with their thumb to interact with the display.

Green is an area that the user can easily reach. Yellow is an area that requires some effort. Red is the area that requires the user to change the method of holding the smartphone. The user's hand position and grip should affect the placement of various controls in modern mobile design:

  • You must place the top-level menu, commonly used controls, and general actions in the green area of ​​the display so that they can be easily reached with your thumb.

  • Place all negative actions, like deleting, in a hard-to-reach red zone, as you don't want the user to accidentally click on them.

Minimal data entry

 

Typing on a smartphone is a slow, error-prone process. In this regard, it is always advisable to try to minimize the amount of dialing that is needed to use the application:

  • Remove unnecessary fields from forms to make them easy to fill out. Nobody likes filling out various forms. And the more complex and longer the form looks, the less likely the user will fill it out.

  • Use personal information and autocomplete where necessary so that users only have to enter a minimum of information.

Hints and feedback

Another fundamental principle is the presence of feedback for user actions. People like to feel that they have everything under control, that the app responds to their actions, and that they understand that response. 

Therefore, give feedback and explain what is happening (if it is not completely clear). At the design level, use different colors and states, animation. At the user experience level - "empty states", tooltips, messages inside apps, demonstration of "what if", skeletons of interfaces (for example, Instagram or Facebook show you the contours of the content before it is loaded).

Instead of a conclusion

These 10 principles of mobile UX design will form the basis of any mobile app in 2021. The main trend of any digital project is that the product is human-oriented and based on user needs.

Want to create an app that your audience will love? The Sannacode design team always studies user behavior and preferences before prototyping. This will give you an intuitive app interface that will help you present the value of your offer to people. Write to us right now and bring your wildest ideas to life.

 

  • Mobile Development, Our approach

    What are the best ways to speed up a mobile app…

  • Our approach, Start up

    Where and how can I find a dedicated team for my…