There are a lot of reasons why mobile app design is said to be simpler than that of a web. It doesn’t need to solve complex layout, interaction flows, and responsiveness. Also, mobile apps usually have a much simpler functionality and a standard design style dictated by the native OS.
However, mobile app design has its challenges explained by the demand of high interactivity of the product and total dependence on the context of mobile usage (think of lighting conditions, bigger/smaller screens, bigger/smaller hands, being on a move, etc.). When the web is about presenting information to users, a mobile app is about being ultimately useful when on the go.
Apps become more ubiquitous and they are no longer exclusive to professional app developers. Yesterday, an average user searched how to create a blog site. Today, they look for how to convert their blog into an app. The competition and requirements for user experience grow. So what are the main UI/UX guidelines that help you develop user-centric native mobile apps?
Align with the platform
When creating a design for native platforms, keep in mind their design recommendations (Apple’s interface guidelines for iOS and Google’s Design for Android guidelines) for the best possible quality. The trends change quite often, so you need to keep up with the latest practices.
Put your customer first
Not the intricate brand design, but the customer’s benefit must be your ultimate priority. Reusing previous patterns or components without regard as to whether this use case requires them to ruin customer experience.
Keep UI clutter-free
Mobile app design must be minimalistic, inconspicuous, easy-to-skim, and free of lavish elements (images, buttons, random content, intricate icons, etc.) that overloading the interaction. Everything that doesn’t bring benefit to the user immediately must be removed.
Make sure that one screen focuses on no more than 2 actions. Keep any related information short including only what is necessary to support an action.
Minimize typing
Filling out forms when on a mobile device is a true headache. Don’t torment your users with the typing process. Leave only those fields in a form that are crucial for the interaction. Leverage auto-complete data to help your customers start off in a few touches to the screen.
Create intuitive navigation
Navigation in mobile apps is extremely important.
- Make buttons clearly visible on a contrasting background and never hide the navigation elements.
- For text on buttons, use simple language understandable for non-English-speaking users.
- Avoid overlapping of menu items, highlight new features or key elements, and help users go back intuitively.
- Use push (screen swapped leftward) for screens intended for viewing (such as transaction details, lists, etc.) and enable the “back” button for a transition. A modal (screen swapped upward) works best for screens where a user inputs, edits, or selects data (requires Cancel/Save/Done buttons).
- To make the interaction more fluent, leverage Navigation Drawer (for Android) and tab bar (for iOS).
Also, you should use the same design pattern for all navigation components across the app.
Call to action: buttons or text?
If you need to put a call to action, both Android and iOS recommend using text (link). However, buttons enable you to incorporate your unique brand design and colors of your ecosystem being more attractive and contrasting at that.
Choose fonts: brand or system?
Although both platforms require using their native (system) fonts, take it more as an encouragement rather than a rule. Just like with CTAs, fonts are a great opportunity to free up your brand voice and make it sound loudly within headlines and sub-headlines. You should still stay faithful to system fonts for body and button texts.
Make your app finger-friendly
Smartphones get larger and larger, but human thumbs don’t grow that way, so holding a smartphone and tapping with fingers of the same hand often becomes a challenge. For this reason, make sure you don’t place key tap targets in the zone beyond the reach of a thumb.
Also, keep these targets big enough (at least 10mm x 10mm) and leave enough space between them to facilitate tapping.