1. Thunderrise
  2. Blog
  3. 9 Best Mobile UX Design Principles
9 Best Mobile UX Design Principles

9 Best Mobile UX Design Principles

team
Thunderrise

In the previous article we have told you about the tools that are used during design creation and prices of this service. Let’s find out today how to design an app properly and save your money from rash act wastings.

The most important while development of the app is to make your idea useful and make the interface intuitive. If the app is useless then there is no sense for users to install it. And if the app is useful, but too complicated people simply won’t study it.

A good mobile app Ux design can solve both these problems:

  • In order to be useful, need to be oriented on your target audience. The best way to motivate your users to install your app is to offer a particular solution. Try to focus on what your clients would like to achieve with your app and what problems should it solve.
  • You need to build responsive and intuitive mobile Ux design. To solve the challenges people need to understand how to navigate through it. All confusion and misleadings have to be removed!

We have come up with 9 prime mobile Ux design principles to create a great interface for your app.

1. Fight chaos

User's attention is extremely valuable resource, so it must not be wasted. The cluttered interface will overshare users, as the more buttons, text fields, and images you have, the more complicated the screen becomes.

Disorder affects desktop app and website badly, and mobile app even worse.

There is famous quotation of Antoine de Saint-Exupéry

“It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.” It perfectly fits for mobile UX design inspiration. Decreasing laxness in design improves usability and comprehension.

Simple rule: one primary activity for each screen. Each screen designed has one core feature. This makes the navigational process easier. A hundred of plain screens are better than one cluttered.

Let’s take Uber as an example. Uber’s prime goal is to help the users find a cab. The app doesn’t spam user with excessive info and takes from user only what is necessary: location, name, payment method, and a place where to pick up the client.

fight chaos

One of the main principles of UX design for a mobile app is to reduce users effort to achieve the goal.

2. Make the navigation intuitive and obvious

The intuitive navigation should be the main priority in any project. There is no point in development of innovative feature or in the creation of great content if people won’t find it. Here are the tips to good navigation:

  • Mobile navigation should be consistent. There should be no extra explanations. You should avoid the usage of misleading buttons and icons. Each element must logically take the user to the point of destination. This doesn’t mean that you can’t use custom solutions and you are forced to use mobile app design patterns. On the contrary, it can be beneficial for a startup as your app will stand out from the competitors.
make the navigation intuitive and obvious
  • Mobile navigation has to be stable. Do not move the elements to new places or hide them. This will disorientate the users.
  • Mobile navigation should show the current location. This is a common mistake for the main menu, when the user can’t tell exactly where he is. This should be noted while mobile user experience design process.

3. Create universal design

You shouldn’t think about creating design only for one platform. Creating universal design for iOS devices, Android phones and tablets, web site, and desktop app is very important to users.

create universal design

Let’s take Apple Music as an example. If you create a playlist on your Mac, you will be able to open it on your iPhone.

4. Use the right size for tap targets

It’s harder to tap on small targets rather than big ones. During the mobile interface creation it is better to make the objects big enough to tap easily on them. The appropriate size for navigation elements is 7-10 mm. Thus users see the edges when they tap on the targets.use the right size for tap targets

UI elements should be big enough. Don’t disappoint the users with misclicks and tiny targets. Besides, you should make sure there is enough space between tap targets.

5. Text must be legible

Mobile screens are very small comparing to laptops and displays. And here we come up with another challenge: place large piece of content on the small UI. You might want to squeeze everything and try to fit as much info as possible. Bad idea!

The № 1 rule for text display on mobile devices: font size must be at least 11, so it could be read comfortably without zooming it.

text must be legible

You can boost the legibility by increasing line spacing and letter spacing. Generous blank space can make the most complicated interfaces look attractive and simple

text must be legible

There is enough space for everything in a good UI

6. All elements must be displayed clearly

You should use colors and contrasty to make great interpretation with your content. Select primary colors and matchy gradients for your app. Also, make enough contrast so the app interface was comfortable even for people with dull sight. This will be beneficial to the usability.

Make sure that text color differs from the background. This small lapse can lead to serious issues with legibility. W3C recommends the following contrast rates for text color and the background image:

  • Contrast rate for small font should be not less than 4,5:1
  • For larger fonts (14 bold/18 regular and higher) the suitable contrast rate will be 3:1
all elements must be displayed clearly

The text that doesn’t meet these requirements is unpleasant to read.

It is extremely important to find the right contrast: users can be on the street where the contrast will be very low due to sunlight.

all elements must be displayed clearly
The neutral gray color is pleasant to look at when you are indoors, but when you are outside it starts to look worse.

Icons and other essential elements should be created in accordance with the contrast rates mentioned above.
all elements must be displayed clearly

It is hard to differ icons that were created ignoring these recommendations.

7. Pay attention to Usability

Steven Hoober, the expert UX designer and consultant, has conducted a research where he found out that 49% of people use only their thumb while surfing through sites and mobile apps.

You can see the colored diagram below that indicates which zones of the screen a user can reach with his thumb to interact with the app.

pay attention to Usability

Zones of comfort while holding a prone in one hand.

Green stands for the most comfortable zone from this position; Yellow stands for acceptable one; Red is the zone where user will have to change position of the phone.

Hand position must be considered during elements disposing:

  • Extremely important to place to the upper part of the green zone those elements that are planned to be used more frequently, so it would be easier for users to reach them.
pay attention to Usability

Main activities in Tumblr.

  • Place the negative actions, like delete, to the red so, so it would be harder to reach and, as the result harder to accidently press it.

8. Reduce the manual typing

Manual typing is slow and rather fallible process on smartphones. That’s why alway try to minimize the manual typing in your app:

  • Delete all unnecessary fields from the forms so they were easier to fill in.
reduce the manual typing

Nobody likes to fill in the forms. The longer it looks, the smaller the chances are that user will be filling it.

  • Where the typing is necessary, it’s better to use Autofill for users convenience.
reduce the manual typing

Autofill feature for the country field.

9. Test your design

It’s the common situation when the mobile design looks great on a big screen, but when it gets to real mobile devices it doesn’t look even half good as it used to. Even the spotless UX at the end will contain undetectable drawback when it is brought to life. That’s why it is essential to test your app with real people on different devices. You should ask the users to complete standard tasks and after that you will see how good (or bad) you design really is. Treat your app like continuously growing substance: use the analytical data and feedbacks from users to upgrade the experience.

Summary

These guidelines can help you start development of your business if you take your project seriously. Mix your ideas with our advices to achieve the best results. And remember, design is not only for designers, but for users!

Have a few ideas in mind? We provide designers and developers services. Contact us and we will develop a great app for you with outstanding design.