As the world continues to move faster and faster, business people, from executives to the frontlines to the analysts that support them, need the ability to find insights whenever and wherever decisions are made.
That’s why we launched ThoughtSpot Mobile for both iOS and Android, putting the power of search and AI-driven analytics in the hands of every employee.
In building these applications (you can read our case study here), we learned some important mobile UI design best practices along the way that would be helpful for others designing mobile applications.
13 Mobile UI Design Best Practices
- Blend Useful and Intuitive Experiences
- Make User Interfaces Invisible
- Cut Out the Clutter
- Navigation Should be Simple, Yet Discoverable
- Build for One-Handed Operation
- The Appearance Of Speed Matters
- Personalize the Experience
- Thoughtful, Timely Notifications are Essential
- No Web Experience
- Incorporate Security and Trustworthiness at the Outset
- Delight with Animations and Micro-interactions
- Echo Core Interactions
- Engage Gradually
1. Blend Useful and Intuitive Experiences
Reduce the effort users have to put in to get what they want. Organize information in a way that requires a minimum number of actions to reach the destination
Break large tasks into smaller, meaningful chunks. Hide secondary actions.
Offload tasks. Set smart defaults.
Design for the interruption. Allow users to save a state and re-engage later. Users expect to continue the journey from where they stopped.
Focus on User Goals, but do not overwhelm the user with too much information. Don’t interrupt.
Home Pinboard Setup – simple walkthroughs, quick email sign-up followed by onboarding
2. Make User Interfaces Invisible
Make the content the interface and remove unnecessary elements that do not support user tasks. Cards are a great way to display actionable content. Keep the interface light and airy.
Add breathing Room. Use white space to draw attention to important content.
The most successful apps are highly focused and present a limited set of features. Limit feature set by prioritizing what’s important and trimming nice-to-have features.
Content prioritization can simplify the UI and improve the UX.
Simple and direct language maximizes clarity. Avoid acronyms, brand-specific terms, cultural-specific axioms, and technical terminology that people might not understand. Use familiar, understandable words and phrases.
Use a typeface that works well in multiple sizes and weights to maintain readability and usability in every size.
Use legible font size. Text should be at least 11 points so users can read it at a typical viewing distance without zooming.
Use sufficient color contrast for text. Insufficient contrast makes the text blend in with the background. Strive for a minimum contrast ratio of 4.5:1 for body text and image text.
3. Cut Out the Clutter
Cut out the clutter. Reducing clutter will improve comprehension, so get rid of anything in a mobile design that isn’t absolutely necessary. A simple rule of thumb is one primary action per screen.
Avoid Login Walls. Don’t force early registration; instead, gather data slowly.
Avoiding Information Overload so the amount of input to a system exceeds its processing capacity. Decision makers have fairly limited cognitive processing capacity, so a reduction in decision quality occurs.
Chunking helps. Break down long forms into pages, progressively disclosing fields as necessary. Streamline this process by integrating autocomplete, spell-check, and prediction text assistance.
Great user onboarding not only lowers abandonment rates but can also help boost long-term success metrics like user retention and user lifetime value
Lightening-fast charts that are easy to interact with, consume, and share
4. Navigation Should be Simple, Yet Discoverable
Navigation should inspire users to engage and interact with the content. It should be implemented in a way that supports the structure of the app without calling attention to itself.
Navigation must be discoverable and accessible while occupying little screen space.
Navigation should accommodate the needs of the majority of the app’s users.
Assign different priority levels to common user tasks. Give prominence in the UI to paths and destinations with high priority levels and frequent use.
Navigation should be available at all times, not just when we anticipate that the user needs it. Minimize the user’s memory load by making actions and options visible.
Icons and other graphic elements should help users to understand the menu options.
Communicate the current location using location indicators.
Make it easy to interact. menu options should be big enough to easily tap. Use recognizable design patterns as well as recognizable icons.
Hidden navigation drives down engagement, slow down exploration & confuses people.
Tabs are great because they display all major navigation options up front, and with one simple tap, the user can instantly go from one view to another. Should use labels. Can use segment control when there are a couple of options.
Reduce Search Effort. If the search is a key function of your app, it needs to be in front of people. Either display it at the top of the screen or have a visible reference that activates search mode.
Simple Navigation, with icons and labels, available across the app
5. Build for One-Handed Operation
Screen sizes are going to keep expanding, 85% of users use their phone with one hand. The bigger the display is, the more the screen is less easily accessible.
Place the top-level menu, frequently used controls, and common action items in the green zone of the screen, which is comfortably reached with one thumb.
Place destructive actions in the hard-to-reach red zone so users don’t accidentally tap them.
6. The Appearance Of Speed Matters
Don’t make users wait for content. Make the app fast and responsive.
To make the interaction predictable, it’s essential to provide feedback in response to every user action. Feedback acknowledges efforts and helps users understand the results of operations. A lack of feedback can cause them to question whether an app has processed the action. An app that provides visual feedback eliminates the guesswork for the user.
Let people know that things are going to take a while by using a progress indicator. The progress indicators inform users to wait, so we should replace the indicators with skeleton screens as soon as possible.
Use a skeleton screen to focus on actual progress and create anticipation for what is to come. This creates a sense that things are happening immediately, as information is incrementally displayed on the screen and people see that the application is acting while they wait.
Perception can be just as important as raw speed. If users get something interesting to look at while waiting, they will pay less attention to the wait itself. To ensure people don’t get bored while waiting for something to happen, offer a distraction.
Do things in the background to make imminent actions appear fast. Actions that are packed into background operations have two benefits: They are invisible to the user, and they happen before the user asks for them.
Pull to refresh to load new content, you simply need to drag a list down with your finger to trigger a refresh action.
Skeleton screens and spinners show the loading state for different screens
10. Personalize the Experience
Personalization helps provide a more unique and relevant experience to the user. Whenever possible, personalize the UX by leveraging user data to display relevant content and material in the app.
Including the user’s name on the screen and in messaging is an easy and effective way to personalize
Personalization should push users toward content that they’re looking for and away from content that’s irrelevant to them. It can also eliminate distractions
7. Thoughtful, Timely Notifications are Essential
Think twice before sending a message. Users are bombarded with useless distracting notifications. Annoying notifications are the number one reason people uninstall mobile apps.
Mobile is all about making every message count. Don’t overwhelm the users with push messages.
The value users get from notifications should be sufficiently greater than the interruption. Don’t send push notifications for the sake of engaging users.
Personalizing content to inspire and delight is critical.
Don’t send push notifications at odd hours. Send notifications at the most convenient times according to the user’s time zone.
Use different message types: push notifications, email, in-app notifications & news feed updates. Diversify your messaging — your messages should work together in perfect harmony to create a great user experience.
It’s better to ask for permissions in context and communicate the value the access will provide. Users are more likely to grant permissions if asked during a relevant task.
Using storytelling to engage with the users. Using short notifications on the page instead of pop-ups and overlays.
8. No Web Experience
Don’t replicate web experiences on an app. Users expect certain interaction patterns and interface elements in mobile apps. Maintain visual consistency with the color palette, typography, and all other design elements.
Provide seamless experience across all devices. It also builds trust with the brand.
Avoid using underlined links, instead, use buttons.
Don’t take users to a browser. This increases abandonment and reduces conversion.
Avoid creating dead-end pages that act as blockers for user flow.
Error states and empty states should provide instructions and actions to move forward.
Design for glanceability and quick scanning as user behavior. Glanceability refers to how quickly and easily the visual design conveys information.
Make sure your product works when it isn’t connected to the Internet at all. Allow caching of data.
Filters, Pinboards & Drill are customized for the mobile experience
9. Incorporate Security and Trustworthiness at the Outset
Don’t ask a user to rate your app during their first experience. Don’t ask a user to rate an app when they perform a task. Wait until users prove to be repeat users, and they’ll be more likely to rate your app and provide better-informed feedback.
Make sure you provide transparent permission policies and allow your users to control how their personal information is shared within a mobile app.
Reinforce credibility by displaying trusted badges of security, especially when users are trusting your brand with their personal and financial information.
11. Delight with Animations and Micro-interactions
Use delightful animation to make the interface feel human and create an emotional connection with your users.
Animations and micro-interactions catch attention and create the right mood, so there’s no need to add clutter or extra text.
Using animations to make the interface appear more responsive when results are being loaded. Immediacy of transitions gives the sense of the app reacting to input.
Acknowledge touch gestures with subtle UI changes – thus increasing the perception of performance.
12. Echo Core Interactions
Echoing can reinforce a core interaction across an experience, it can also unify the design of a product through familiar visual design elements and ideally make mundane interactions fun.
Echoing occurs when a specific interaction design is reused in various contexts across a product experience. Since the same interaction model is reused, people can learn it in one place and apply their knowledge elsewhere.
13. Engage Gradually
Gradual engagement is the process of moving a user through the app – actually engaging with it, and seeing its benefits. With gradual engagement, the first-time experience for new users is focused on giving them an understanding of how they can use the app and why they should care to, not filling out a registration form.
14. Act Just in Time
Reveal relevant features only when they are needed. Surface them just in time.
Dismiss the keyboard when it’s not needed. It helps communicate otherwise invisible gesture-only functionality.
Reveal useful information when people actually need it, not at all times.
15. Hide Show Passwords
Imprecise fingers and small screens make it harder to accurately input complex characters into password fields.
Try to keep people logged in as much as possible by not displaying sign-out actions upfront. This makes entering passwords a rare occurrence.
