Mobile UX Design: Key Principles

The most important thing to keep in mind when designing a mobile app is to make sure it is both useful and intuitive. If the app is not useful, it has no real value for user and no one has any reason to use it. If app is useful but requires a lot of time and effort, people won’t bother learning how to use it.

Here are 10 UX design principles that I think are key for creating really great mobile user experiences.

1. Cut Out The Clutter

User attention is a precious resource, and should be allocated accordingly. Cluttering your interface overloads your user with too much information: every added button, image, and line of text make the screen more complicated.

Clutter is bad on a desktop app or website, but on a mobile one it’s a hundred times worse. Image credit: ftrain

There’s a famous quote by Antoine de Saint-Exupéry that says

It’s important to get rid of anything on a mobile design that isn’t absolutely necessary, because reducing the clutter will improve comprehension.

A simple rule of thumb: one primary action per screen. Every screen you design for the app should support a single action of real value to the person using it.

Take Uber, for instance. Uber knows that the goal of the user who uses the app is to take a cab. The app does not overwhelm the user with other information: it automatically detects users location based on GEO data and the only thing users have to do is to select a pickup location.

One of the basic rules of good UX is to reduce the effort users have to put in to get what the want.

2. Make Navigation Self-Evident

Helping users navigate should be a high priority for every app. Good navigation should feel like an invisible hand that guides the user along their journey. The principles of good mobile navigation are:

  • Clarity. App uses familiar navigation patterns and each navigation element (such as icon) lead to the proper destination.

  • Consistency. Global navigation controls always located in the same area, no matter what part of the app.
  • Visible. Failing to indicate the current location is probably the single most common problem for many apps. To navigate successfully, the user should always be able to answer the question “Where am I?”

3. Create a Seamless Experience

Modern users have a rage of digital devices that they can use to experience your product. Desktop computer, mobile device, tablet, just to name few. As a designer, you shouldn’t think of a mobile design in isolation. Creating a seamless experience across mobile, desktop and tablet is very important for your users.

Apple Music

Take Apple Music for example. You can set-up a playlist on your Mac and it will instantly be available on your iPhone. Apple recognizes that whilst the design of the mobile app is very important, creating a seamless experience across iPhone, desktop and iPad is just as important for users.

4. Design Finger-friendly Tap-targets

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big enough so that they’re easy for users to tap.

Create controls that measure have a size 7–10 mm so they can be accurately tapped with a finger. Such target allows the user’s finger to fit nicely inside the touch target — users will see the borders of UI controls and will know that they’re hitting the target accurately.

User interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Image credit: Apple

Also ensure that there is good amount of spacing between tap targets.

5. Text Content Should Be Legible

When compared with desktops, smartphones have relatively small screens, which means that one of the challenges of mobile design is to fit a lot of information on a small UI. It’s tempting to squish everything down for a mobile design in attempt to provide as much information as possible. But you should resist the temptation.

A rule of thumb for mobile:

Image credit: Apple

You can also improve legibility by increasing line height or letter spacing. Generous whitespace not only make your text more readable but will make your interface more inviting.

Good UI has a lot of breathing room. Image credit: Apple

6. Make Interface Elements Clearly Visible

Users typically use mobile devices outdoor in poorly lighted placed or in sunglare. It’s vital to create sufficient color contrast between elements so that users can see and use your app.

The neutral grey of this page is pleasant to look indoors, but outdoors it looks not so good. Image credit: usertesting

It’s especially true for elements like text—make sure there is ample contrast between the font color and the background so text are legible. The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Text that don’t meet the color contrast ratio recommendations is difficult to read against it’s background. Image credit: Apple

Icons or other critical elements should also use the above recommended contrast ratios.

Icons that don’t follow the color contrast ratio recommendations are difficult to discern against their backgrounds. Image credit: Material Design

7. Design Controls Based on Hand Position

Steven Hoober in his research on mobile devices usage, found that 49% of people rely on a one thumb to get things done on their phones. In figure below, the diagram that appears on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen.

Comfort zones for a person’s one-handed reach on a smartphone. Image Source: uxmatters

Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they’re holding a device. Hand positions and grip should influence the placement of controls on a mobile design:

  • Place top-level menu, frequently-used controls and common actions to the green zone of the screen, because they are comfortably reached with one-thumb interactions.
  • Place negative actions (such as delete or erase) in the hard to reach red zone, because you don’t want users to accidentally tap them.

8. Minimize Need For Typing

Typing on a mobile is a slow and error-prone process. It’s therefore best to always try to minimize the amount of typing required to use a mobile app:

  • Keep forms as short and simple as possible by removing any unnecessary fields.

No one likes filling in forms. And the longer or more complicated a form seems, the less likely users going to jump in and start filling in the blanks. Image credit: Lukew
  • Use auto-complete and personalized data where appropriate so that users only have to enter the bare minimum of information.

Auto-complete field for country

9. Optimize experience for quick sessions

When people use mobile devices they expect to complete their tasks in the least possible amount of time. Users like quick session with minimal interaction that helps them achieve their goals—set alarm, check email, reply to message shouldn’t take more than a few seconds.

10. Test Your Design

All too often a mobile design looks great when viewed on a large screen of your designer but as soon as you start viewing it and interacting with the app on mobile it becomes much less satisfying. That’s why it’s so important to test your app with real users on a variety of mobile devices. You should ask real users to complete regular tasks and only after that you’ll see how well the design really performs.

Conclusion

Just like with any other design elements, tips specified above are just a place to get started. Make sure to mix and match these ideas with your own for the best results. Just remember that design isn’t just for designers — it’s for users.

Sources: Mobile UX Design: Key Principles. by Nick Babich | by Nick Babich | UX Planet