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 practical 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.

Good UI design addresses both of these design problems:

In order to be useful, mobile apps should be user-centric. Users install your app because they need to solve a pressing problem. Thus, the app has a sharply defined “sense of purpose.” Think about what it is your users will be trying to accomplish and focus on their key goals/remove all obstacles from their way.
You should bring clarity into your UI. To be effective using an interface you’ve designed, people must be able to recognize what it’s for and how to use it. There is simply no room for confusion.

Here are 9 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 “Perfection is achieved when there is nothing left to take away.” 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. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. One hundred clear screens is preferable to a single cluttered one.

Take Uber, for instance. Uber knows that the goal of the user who uses the app is to take a cab. App does not overwhelm the user with too much of 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. After all, even the coolest feature or the most compelling content is useless if people can’t find it. The principles of good mobile navigation are:

Mobile navigation must be coherent. You should use the proper signifiers (correct visual metaphors) so that the navigation doesn’t require any explanation and make sure that each navigation element (such as icon) lead to the proper destination.
Mobile navigation must be consistent for the app. Don’t move the navigation controls to a new location or hide them on different pages. This will just disorient the user.
Mobile navigation should communicate the current location. Failing to indicate the current location is probably the single most common mistake to see on apps menus. “Where am I?” is one of the fundamental questions users need to answer to successfully navigate.

3. Create a Seamless Experience

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 recognize 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 snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback 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. You might have a temptation 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: text should be at least 11 points so it’s legible at a typical viewing distance without zooming.

Improve legibility by increasing line height or letter spacing. Good, generous whitespace can make some of the messiest interfaces look inviting and simple.

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

#6. Make Interface Elements Clearly Visible You should use *color* and *contrast* to help users see and interpret your content. Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.

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

It’s extremely important to have enough contrast on mobile: users might be outdoors with low contrast on the screen because of lighting. ![](/content/images/2016/07/1-Gbt_qjL268fxFDu7g97GMw.png)

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

Icons or other critical elements should also use the above recommended contrast ratios. ![](/content/images/2016/07/1-YQUUqBSl1I_v4Lz6I4AqXw.png)

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](http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php) 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. ![](/content/images/2016/07/1-0WzaG6f9H4_OM06b7mqnPQ.png)

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:

It’s important to 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.

Tumblr common actions. Image credit: Capptivate

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. Test Your Design

All too often a mobile design looks great when viewed on a large desktop screen but doesn’t work nearly half as well when taken for a test on an actual mobile. Even the most painstakingly-considered UX will ultimately contain some unseen flaw when put into the real world. 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 proceed regular tasks only after that you’ll see how well the design really performs. Treat your app as a continuously evolving entity, using data from analytics and user feedback to constantly improve the experience.

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.