The common truth is that every mobile app or mobile website in the world would not exist without mobile user experience design. Even the simplest application does have UX. At the same time, designing for mobile devices is a very sophisticated knowledge. Moreover, it has been dramatically improved over the last decade, transferred from one designer to another. Following the constantly changing design trends, it gives birth to mobile UX design best practices.

Below are the top 10 practices which may be considered as useful tips for your team to create awesome mobile design.

Apple and Google Guidelines

With over 98% of market share as of Q4 2015, iOS and Android OS unconditionally head the worldwide smartphone OS market. So the first most common practice and recommendation at the same time is to keep following Apple iOS Human Interface Guidelines and Google Material Design for Android as long as these platforms exist and dominate.

iOS vs. Android UX Design
iOS vs. Android UX Design

This is what every designer should start from, literally. But take into account that mobile UX design principles are not separated from the guidelines being an integral part of design.

Although this practice is obvious, designers sometimes contrive to disregard those essential rules, especially when it comes to similar design across iOS and Android platforms. In this case, the best way is to find a happy medium like they do for Instagram, Facebook, etc.

Facebook UX and UI Design
Facebook UX and UI Design

Business Strategy Focus

Without understanding who potential users are and what the current situation on the market is, it’s quite difficult to produce appropriate mobile app UX design. Therefore, defining a business strategy and analyzing competitors should definitely go first. Especially for a startup, that is a new player on the market and follows the Lean Startup methodology. Then, the Build-Measure-Learn loops should be more effective with this accurate approach.

For instance, knowing that a mobile app is a chat for kids, designers use enlarged typography and optimize each screen to the minimum possible amount of elements:

App Design for Kids
App Design for Kids

Two Platforms - One UX

Here it doesn’t necessarily mean that design is similar across platforms. Quite on the contrary, even if it should be different, you may anyway think about creating one common mobile app user experience first. It can follow either iOS or Android guidelines only. After all, this practice saves time spent on UX by a designer. Besides, creating UI for the second platform based on that for the first one doesn’t take extra time later.

A bit contradictory practice, isn’t it? But for a development company, saving time usually means saving money for its clients. And that means loyalty.

Inheritance Is the Key

This is one of the most solid pillars of user experience best practices modern UX knowledge stands on. It is recommended to keep the ratio of the same UX elements of an app across all of its screens and, of course, across different devices and screen resolutions if mobile design is responsive.

UX Elements in Responsive Design
UX Elements in Responsive Design

Examples of such UX elements:

  • Text fields
  • Date pickers
  • Segmented control elements
  • Action buttons, etc.

Typography Tuning

By default, the fonts used natively are Helvetica Neue for iOS and Roboto for Android. They usually go with such preset parameters as leading, kerning and tracking. Basically, their tuning is possible later at the UI stage. Yet, often there are unique custom elements for which the standard typography may not be the best fit.

What can be done earlier should be done earlier. Do you agree? That’s why it’s better to fine-tune typography at the mobile UX stage:

  • Set a typography style (headers, titles, subtitles, lists, text, etc.)
  • Set kerning between all the above-listed elements
  • If necessary, set tracking and leading for each element (default values may also be used)

Typography Settings
Typography Settings

Full Version, Then MVP

Once a minimum viable product (MVP) is defined and is a part of the strategy, be careful not to take a wrong step willing to save time and minimize costs at the UX stage. That typical mistake is to build UX only for an MVP version. On one hand, it pretty much complies with the Lean Startup methodology as it does help to release the first version of a product faster. But on the other hand, how can developers plan its further architecture then?

Therefore, don’t hesitate to invest in a full version of mobile user experience. Let the team see all features and mechanics planned for next releases. Be farsighted. That definitely helps to avoid bad news at later stages of development, when the product is already on the market.

Design for Full App Version and MVP Version
Design for Full App Version and MVP Version

Besides, adjusting a full version of mobile UX to an MVP version shouldn’t be a big deal for a design team.

Black and White

Designing for mobile devices is about focusing on how elements are placed on the screen, on interactions and mechanics of an app. This is where it is more important to understand if it’s convenient for a user’s finger to tap the elements. Visual perception always comes at the UI stage.

So forget about colors for a while and make UX monochrome. Make the fingers happy first.

Monochrome UX Design
Monochrome UX Design

Sometimes colored mobile UX design may even confuse because the difference between it and UI becomes less noticeable. For non-design-savvies, it may look like delivering twice the work. And who wants to pay for it?

Flexibility

According to mobile navigation best practices, each screen and element of an app have their own micro-mechanics. And each micro-mechanics usually has different implementation options. The number of possible options depends on a project, but definitely, there are weighty reasons to provide some.

Firstly, it gives room for choice and/or improvement.

Secondly, there is a chance to compare estimates for each option by involving developers. An additional value here is that they may not only prove concept options but also knock the bottom out of them.

Last but not least, in this way a design team delivers some extra expertise to the Product Owner which simply increases loyalty to them.

Prototyping

The main goal of prototyping is interactiveness, but a prototype itself is not necessarily a developed app. It may be a UX or UI prototype as well. In case there’s a need to test and prove MVP usability before working on user interface, a UX prototype is the best option.

It provides a clear understanding of interactions and user scenarios for the Product Owner and for a team. Not just separate screens one by one, but a clickable prototype that gives a feel of the future app. With the help of such useful tools as InvisionApp, Marvel or Proto.io, it’s even possible to launch it right on a mobile device. The convenience of testing a prototype in this way can’t be overestimated.

Additionally, InvisionApp and Marvel allow displaying files right from a Dropbox account. It means that keeping and updating UX screens on Dropbox (in PNG or JPG) updates an interactive prototype automatically.

Map Screen

Even though prototyping is a great thing, there’s always a risk for developers to skip an interaction or a screen. That’s why another special recommendation is to build a map screen additionally.

So what is a map screen exactly? Imagine that you’re in a huge mall for the first time and you don’t have any graphic map or guides. Of course, you are still able to explore every corner of it, but most likely the best places will stay undiscovered. But with a map you have control. The same is with a map screen - it just gives more guidance to a development team preventing them from skipping screens during an estimate.

Map Screen Preview
Map Screen Preview

What’s also important is that all interactions are displayed at once. That can be both convenient and inconvenient at the same time.

Afterword

Mentioned above are the best practices in UX design based on our experience here at MLSDev.

We clearly separate the UX stage from other stages of MVP creation. The input of it is idea description and a business strategy including interaction mechanics, user roles, and use cases. Accompanied by daily communication, it requires the highest level of involvement from both the Product Owner and the design team. The result of the UX stage is a full version of UX wireframes and an MVP version of UX wireframes. They are black and white screens, often supplemented by a prototype in InvisionApp and by a map screen.

Want to create an astonishing app design?

Reach out to our team and we will help you to design your app in accordance with the set guidelines and best practices. Great usability and appealing look are guaranteed.

Contact us