Ten UX design patterns for Apps
A design pattern is a general repeatable solution to solve common problems. In the context of UX design, this relates to common user interface problems or challenges. Research suggests that humans are hardwired to recognize patterns. When we start interacting with a new product, our mind unconsciously looks for known patterns. This is why it’s important to follow universal design conventions instead of reinventing the wheel.
Let’s review some of the UX patterns for Data Input, Search & Filter, Content Structuring, Animations, Navigation, Social Interactions, Shopping, Community Actions, Cognition Design Patterns and Skeleton Views.
- Data Input: Data input patterns are used to handle data input. This can be on forms or specific fields where the user enters some information. One key aspect here is to ensure that the UX flow takes care of validation/data processing feedback. Let’s review 2–3 different input types
Password Strength Meter — This pattern can be used to update the user about the strength of the password they are setting. The goal here should be to update users on the go (As and when they type in). If that’s not possible, we can update as soon as there is a pause in input or the focus moves to another field.
Submit Button — Submit Button is used in almost all forms. The user will enter some information and then submit the same. Generally, in these cases, apps will show some feedback to depict API call and successful submissions. One of the good approaches here is to use an animated submit button
Here’s one more
Pop-ups & modals are a thing of past!
Validation Feedback & Forms — One of the key functionality for any input form is data validation. The best approach here again would be to validate data as and when the user is entering the same. Asking user the fill the form again because some data was incorrect is a strict no-no.
If the form has many questions, you can consider breaking up the form into required and non-required items and allowing the user to fill non-required items anytime later (When used for account creation, this is the Lazy Registration pattern). The goal should be to take up information only when it is necessary and validate data on the fly. Smart auto-fill is another pattern your users will love.
2. Search & Filter: Search is one of the most common functionality in most apps. A good UX pattern here is to allow the user to do a contextual search using the same interface and provide ways to filter or sort the results. If “search” is a primary use case for your app then it should be shown as such
Adding a placeholder is also a good UX — “Search for anything” or “Search for cars”. This is especially good if you have a contextual search in-app.
Users become overwhelmed when their search terms result in too many results. Filter options can help users narrow and organize their results and hence should be a part of overall search UX.
3. Content Structuring: The principle of proximity states that people perceive closely-placed elements as related. By using proper content structuring patterns we can create a visual hierarchy so that the users can easily scan pages and find all required information or actions. The visual hierarchy of the app page should be inline with business priorities. The best approach to ensure that we have an optimal hierarchy for the content and actions is to create an information architecture before doing wireframes or actual designs.
There are three main patterns for organizing content: Hierarchical, Sequential, and Matrix.
4. Animations: Animations can be used for different UX flows. If added correctly, they make the app catchy and user-friendly.
Animations can be shown during App load, API calls to give the user the feeling that the app is doing something. This is one of the ways of providing visual feedback to the end-user. Below is a pull to refresh animation for API calls
Animations can also be added to showcase specific actions like switching between day and night mode below
Or for specific events like the one below for no internet connection.
5. Navigation: Users will need navigation to move through different features and or content in the app. Some of the standard navigation patterns include tabs, menus (hamburger, drawer, floating) and gesture-based navigations. A good UX design will make navigation intuitive and predictable. Very good UX designs will make navigation easily discoverable and accessible.
If your app has a small number of high priority navigation items, tab bars will fit in best. If there are many navigation items, most prominent ones should still be visible and not part of the hamburger or any other hidden menu.
If you are using any custom gesture-based navigation in your app, it’s important to disclose the same to users as it might become hard for users to find that otherwise.
6. Social Interactions: If your app has a social component — friend, reactions, activity stream, chat and so on then social interaction patterns might be useful. Let’s review the activity stream
The goal of an activity stream is to allow the user to get an overview of the actions(based on interests, friends, followers and so on) in the system. Best UX patterns will allow users to go through the activity stream with the least amount of time and effort. In this sense, aggregation is one of the key attributes for good UX patterns.
Alpha, Beta, Gamma changed their profile pictures is always better than Alpha changed his profile picture, Beta changed her profile picture, Gamma changed her profile picture
Also, if there are any actions or reactions that can be taken upon any stream, it should be easy and quick to do so. With the AI algorithms in place, a good UX pattern will also allow capturing users’ feedback to improve the very algorithm that displays stream
7. Shopping: E-Commerce or limited commerce are an integral part of many apps. Apps offering many subscription plans should show details of all plans to allow users to understand different plans.
Context-specific call to actions is another good to have feature for apps with e-commerce features.
Shopping cart is another important repeatable UX pattern. Here are some good examples
8. Community Actions: These patterns are useful where we have some community action like polls/votes, rating content or services, flagging or report a content/user and so on. Apart from handling the fraud/obscenity use cases (like voting more than once, using obscene language), apps should handle the workflow of updating the users with poll results or notification of approval of their reviews. In case the results can be shown immediately, it should be done. Easy reference to T & C, Privacy Policy and other guidelines should also be made available.
9. Cognition Design Patterns: Cognition patterns are based on general human biases. A loss averse pattern will the fear of losing out to motivate the users to take action. It’s commonly used for discount offerings. Status Quo pattern is used to put in a default action that we want users to choose. The underlying human psychological behaviour is that not many people will change the status quo and hence the name. There are many more such patterns — negative bias, peak-end rule, set completion pattern and so on.
10. Skeleton Views: Skeleton views make your apps feel faster. It’s especially useful whenever network or processing speed limitations prevent your app from responding immediately to user choices.
Conclusion
In general, when designing the UX for a problem statement or flow, it’s best to review already existing patterns for the same. In case a new customized pattern has been used, it’s best to proactively update the users about the same.
If you are interested in reading about more patterns and implementations, please review the links in references and further reading sections
About the Author
Arpit is a seasoned technologist with vast experience in leading large cross-functional and cross-geography teams. Arpit also consults clients on competitive market analysis, defining MVPs, product ideation, product monetisation and go live strategies.
Arpit believes we should all contribute back to society. He has set his goals for social work in five broad areas. You can read more about the same in his blog post “Do Good, Together” on Tumblr. Arpit is interested in working with people who want to contribute towards the same goals.
You can follow Arpit on Linkedin and Twitter
ABC. Always be clappin’.
