The number of smartphone users is forecast to grow from 2.1 billion in 2016 to around 2.5 billion in 2019, hence having a good mobile app design will help retain users. Users depend on mobile apps to deliver content and services.
There are about 5.8 million apps (in both App Store and Google Play store). How to ensure your mobile app is relevant and useful in the ocean of apps? Users experience is an important part of mobile app design.
Creating a good mobile design is not easy. Good apps need to have a clear focus and clarity. If the experience of the mobile app is not great then the user will abandon the app and never come back. The mobile app’s main job is to provide users with “I-want” moments without any hiccups.
App Navigation
App navigation plays a critical role in mobile design, emphasizing its importance. It should be intuitive and user-friendly, facilitating smooth interactions. Buttons should be clearly labeled with proper attributes. DO NOT write jargon that users will not be able to understand. Menu categories should not overlap. Allow users to go back easily. Engage users by highlighting key or new features.
Keep in mind:
- Navigation should NEVER be hidden.
- Navigation should follow the same pattern across the mobile app.
- Use tab bar for iOS and Navigation Drawer for Android for easy user interaction.
Declutter UI
Keep mobile UI design user interface clutter-free. Clarity is an important characteristic of a good mobile design. Too many design elements like buttons, images, and text can make any phone app complicated and unable to use. Clutter is one of the worst enemies of UI design. Keep it simple and minimal otherwise, the user will not be able to focus on delivering the message in a clear and concise manner.
Already, mobile screens have less real estate (as compared to desktops), so it is best to get rid of unwanted elements. Keep the mobile UI design as inconspicuous as possible and let the user get what they came looking for.
Keep in mind:
- Try for a minimal design for better and easy user interaction
- Try to focus on 1 or 2 actions per screen
- Don’t fill the screen with random content
- Keep headlines and text concise and clear
- Use white space wisely
- Don’t use colors full-heartedly, it will confuse the user, and be sure to use brand colors
- Use simple icons
Readability
Mobile devices have small screens as compared to desktops, fitting in a lot of information in a small mobile UI is a big challenge. Hence, keep the content should be short and easy to skim (users don’t read every word instead they pick out keywords and phrases). The content should be accessible when the user has no data connection. The content needs to be prioritized to enable a seamless user experience.
Finger-friendly tap targets
When designing a mobile UI, keep in mind the tap targets. The tap targets should be big enough for the user to tap easily. The smaller the tap targets, the user will have a tendency to tap on the wrong target.
Keep in mind:
- Research indicates that the average human finger pad is 10 x 14mm and the average fingertip is 8-10mm, making 10mm x 10mm a good minimum touch target size. Keep the touch target at least 10 x 10mm.
- Have enough distance between 2 or more tap targets, so the user does not accidentally tap on the wrong target.
Don’t forget the thumb zone
With every new phone release, the screen sizes have increased, and holding the device with one hand and browsing the app is becoming more difficult. The mobile app design should not only be aesthetically designed but also should focus on the movement of the fingers and thumb (and also keeping in mind which handed side the user is).
Keep in mind all zones when mobile app design is being created. Bigger the phone, the more difficult it is for the user to hold the phone with one hand and tap on targets if they are in the “OW” zone.
Use OS design guidelines
Follow the design conventions set by Android/iOS. Each has a different method of navigation, content layout, buttons, etc. If you have Android design guidelines for iOS (or vice versa), you are risking a seamless user experience of the app.
Try to keep everything as native as possible. Mobile UI kits are different for each OS. Understand each OS guideline and then start working on mobile app design.
Accessibility
With governments taking measures to make products accessible for everyone, designers need to have empathy and create a different experience for different people through the same mobile design. A well-designed product should be accessible to different users such as users with low vision, any type of blindness, and motor and hearing impairments.
With inclusive design, people with disabilities can perceive, navigate and interact with your product.
Keep in mind:
- Contrast: Use color combination with high contrast.
- Language: Use simple language as there would be many users for whom English will be a second language.
- Focus: Use focus to determine the order in which the elements should receive first priority.
Read more about accessibility design here.
Buttons
Use familiar mobile UI designs for the buttons. Do not make any fancy shape or element and say that this is a button. For mobile app design, do not use text links as a button. A few common button design types are:
- Filled rectangle with square edges
- Filled rectangle with round edges
- Ghost Buttons
- Floating buttons used in the material design
Keep in mind:
- Whitespace: Have enough white space between buttons and other design elements. If the button is closer to the design elements, the user will not be able to see the button. Have the right type of button for each mobile app.
- Placement: Buttons should be located where the users can see them without any concerns. Place buttons in the traditional layouts and follow design conventions set up by the respective OS design guidelines.
- Discoverability: Buttons should be easily discoverable. The user should not spend time finding where the button is. The more the button is hidden, the more abandonment of the mobile app.
- Labeling: Label the buttons with what they are actually meant to do. For example, if the button is meant to add an item to the cart and the buttons say “Move Ahead”, the user will not understand the meaning and leave.
Typography
As the real estate for the mobile screen is very less, it is quite difficult to make the right typographical decisions. Mobile typography needs major attention to detail, especially regarding the use of correct fonts, white space, and alignment. The key thing to keep in mind while designing a mobile UI is that the content should be legible and readable.
Keep in mind:
- Font size: The font size should be of the optimum size. Overall, anything below 16px would be difficult to read.
- Font: Choose the right font which is easy to read and expresses the mood of the app. Do not use more than 3 fonts. (2 is better).
- Typeface: Choose one typeface. If you feel that there should be a secondary typeface, choose the one which flows between the primary typeface. BUT do not go with more than 2 different typefaces.
- Leading: Keep the leading (distance between 2 lines) just the right size so that it is easy to read and skim through different lines. Do not think that since mobile has less space you can cram everything into one screen.
- Tracking & Kerning: Keep tracking (space for groups of letters) and kerning (space between pairs of letters) consistent all through the mobile app design. The closer or farther the tracking or the kerning, it might make users unable to read the text.
Reduce the number of user inputs
Users don’t like to be bombarded with huge forms, especially on the mobile phone where they like things to be done quickly.
Keep in mind:
- Keep the forms short and sweet. Remove unnecessary fields.
- Customize the keyboards according to the input fields. If the field requires numbers, show the numeric keyboard.
- Validate the forms dynamically, so that the users don’t have to update the error inputs while submitting the forms.
Make a great first impression
The first impression is the only impression users will remember. If the user does not like what they see for the first time, the mobile app will not get a second chance. Onboarding should not be boring, repetitive, or long.
In today’s world, nobody has time, especially with a mobile app. The app should be fast and the user should quickly understand the purpose.
Conclusion
There should be a seamless user experience without the user scratching his head to understand how the product works. Before starting mobile app design know your target audience by creating lean personas, customer journey maps, and user research. So that you know who you are designing the product for.
The better you know your audience, the right experience can be created for them.
—
What’s Next
Idea Theorem is an award-winning design & development agency based in North America. Through our empathy-driven approach, we have crafted digital products that have positively impacted over 10 million users. Our mission is to shape the digital future by delivering exceptional experiences. Contact Us if you have any questions; we will gladly help you.
