UX Design Patterns: Solutions For Common Usability Problems
- Design and Development
- September 16, 2021
A pleasant and relevant user experience is the foundation for successful designs. However, getting it right is easier said than done. You’ve to invest significant time and effort in the UX design process: researching, interviewing, analysing, finding problems and designing solutions that address them. That’s where UX design patterns come in providing proven solutions for the usability issues. In this article, we’ll explain what are UX design patterns, why using them in your designs matters, some common examples and how to apply them to your designs.
What are UX Design Patterns?
UX design patterns are the approaches applied to address common design problems. These patterns have successfully worked for solving usability problems and create a pleasing user experience. An instance of such a pattern is the pull-to-refresh gesture on touch devices — you just pull down anywhere on the screen to refresh the content.
This pattern improves usability through familiarity and ease. The gesture is a standard way to refresh content, so it meets the user’s expectations. It is also an easier way of retrieving new content without having to spot and touch the refresh button. Thus, using such UX design patterns in your design makes the tasks easier and the interaction pleasant.
(First introduced in 2008 on Tweetie mobile app, pull-to-refresh has become a standard function to refresh the content on the screen. Image source: material.io )
Why UX Design Patterns are Important?
UX design patterns are important from two perspectives. The first one is the very essence of UX design — to create a better user experience. And the second one is from the designer’s perspective — to reduce efforts through reusability.
Users already establish mental models on how to use an app or website based on prior experience. In fact, they are so habituated to certain patterns that their actions are reflexive. When they use a new app they expect a similar interface. If you built your app without considering this, they are more likely to get frustrated and have a bad experience. So using UX design patterns help built familiar interfaces with its standard and establish solutions.
While for designers it significantly reduces the amount of effort. Imagine as a designer constantly coming up with new ideas and reinventing the designs for every project. That’ll be a lot to do and be never-ending. Utilizing the UX patterns solves this and saves you a lot of time.
However, using the patterns doesn’t mean using them as cookie cutters design every interface. You still have to think or research to come up with the best designs. These patterns just work as structural and behavioural features that you can adopt in your designs and customize where needed. We’ll look into how to use UX design patterns to improve your design in a while.
What are Common UX Design Patterns?
There are numerous design patterns that can be categorized based on purpose and use cases. The most commonly used ones fall into these 4 groups: Input and output, navigation, content and information structuring and social sharing. Let’s take a look at them in more detail.
1. Input and output
(Calendar picker, a popular input design pattern for selecting dates. Source: Airbnb)
Users need to enter the information in several places on the interface. It can be for signing up, choosing a date for booking, entering contact and other personal details, credit card numbers, etc. The input and output patterns are aimed at making the data input easy and at the same time provide them feedback about the entered information. Examples of input and output patterns are as follows:
- Password strength meter: This helps users to create a strong password to prevent malicious password cracking.
- Calendar picker: The calendar picker allows users to choose the date to enter, sort or track data. The calendar graphics within the interface make it easy to choose the date or date range and make quick decisions.
- Good defaults: Good defaults prefills certain user data that are likely to match. It is useful when the system can make the appropriate guesses of the input fields. For example, input fields country or location.
- Captcha: Captcha helps reduce spamming by differentiating human users from automated bots.
- Preview information and updates: Previewing information helps users determine whether the inputs are correct and accurate as they need. It helps them safely explore the interface resulting in better interaction and experience.
- Wizard: Wizard breaks down one big task into small sub-tasks and helps users complete it step by step and one at a time. It is highly useful when the user has to input complex and large amounts of data and follow specific steps in sequence.
(Navigation tabs and breadcrumb — patterns that make navigation easy. Source: Adidas.com)
To perform tasks and get the information, the user has to locate features and browse through the product. Navigation patterns are aimed at making this easy by reducing any friction and increasing learnability. They help users understand where they are now and how to reach to the point they want. Common examples of navigational UX patterns include:
- Navigation and module tabs: Tabs divides a large amount of data into separated sections, making them more accessible and easy to navigate. It is the most common navigation pattern that you’ll find across all digital products.
- Pull-to-refresh gesture: Pull to refresh gesture on certain devices help users load new content with a simple pull-down gesture. It’s the standard pattern to refresh the content in social media, chat, email news and content apps.
- Breadcrumbs: Breadcrumbs works as a visual aid helping users know their location in the site’s hierarchy. This makes it easier for them to go back and forth and thus simplifies the navigation.
- Progressive disclosure: To help users focus and easily navigate, you need to minimize the clutter and cognitive load. Progressive disclosure helps you do that by presenting only the required data and displaying other details upon request.
3. Content and information structure
(Slack’s FAQs page with a search bar and different categories with icons to help users easily understand and access the content. )
Content and information structure is similar to the navigation patterns. A clear content structure makes it easy for users to find and access the information. These UX patterns help you arrange the information in a logical order that improves readability and accessibility. Examples of content UX patterns include:
- Carousel: Carousals enables you to display multiple pieces of content in the same place on your page. This is highly useful when you have to showcase a set of items or explain a process.
- Tagging: Tagging helps to label, organize and categorize items using keywords. You can use it in your product when you want to associate a piece of content to multiple topics or when the content falls into multiple categories.
- Thumbnail: Thumbnails provides an overview and preview of a different kind of content: images, videos or text on the page. You can use this pattern when a large number of images and videos to be presented to the users, they have to browse the collection and decide which one to choose.
- FAQs: Frequently asked questions or FAQs is a place where users get answers to common questions. This provides them with a quick solution for their problems or better understand your product/services which result in a good experience.
- Dashboard: Dashboards gives an overview of important data, functions and control in an easily understandable way. It helps users monitor critical information at a glance so that they can make a quick decision. A good dashboard has multiple information but doesn’t confuse the users and every element is presented as per the hierarchy of their importance.
- Product page: Product pages in an e-commerce app/website shows details of the product to help users make a purchase decision. A good product page must have the necessary elements like high-quality product images and videos, social proof like reviews, ratings and badges that reduces friction and induce trust such as easy return and secure payments.
(Reactions that allows users to express how they feel about the content. Source: Discord.)
Social features and components have become an essential part of products for they bring higher engagement and growth. Most successful games and apps in the market have features that help users communicate, share, compete and collaborate with other people online. Here are some of the common social UX patterns:
- Share: Users want to share particular content or interaction on their social media. Features like quick share buttons and auto-share make it easy for them to post updates.
- Reactions: Reactions helps users express sentiments about something in a simple way. It is useful to understand user’s likings and preferences.
- Chat: Personal and group chat helps users to interact and be a part of the community.
- Invites: Invites allows users to share their enjoyable experiences with others and bring them to your product. It also provides a way to connect with their friends and have a better experience on the platform.
- Activity feeds: Activity feeds give users an overview of what’s happening and expose them to the content of their interest. This helps them explore new things resulting in higher engagement.
- Collectable achievements: Achievements displays the user’s status and reputation in the community. Adding collectable achievements such as badges, awards, points, acknowledgement etc. throughout the user journey increases the engagement.
How To Apply UX Design Patterns to Your Design?
1. Identify the problem
The first and foremost thing is to identify the issue with the design. Because patterns are solutions to the problems, and if there’s no problem, applying patterns doesn’t make any sense. There are a couple of research methods you can utilize to discover the problems with your design.
- Conduct surveys. Surveys can be used as a feedback tool to understand user’s experiences. You may want to ask users questions such as what they liked and disliked the most, how easy was the product/website to use and what features users think should be added.
- Perform usability testing. Usability testing helps you understand how the users interact with the interface. You can perform testing with your existing product, prototypes or even with your competitor’s product. The collected data will help with finding the frictions and crucial insights to improve your product.
- Use analytics. Analytics can help you get vital insights about your existing product — what’s working well and what needs to improve. Consider the important metrics such as sign-up rate, bounce rate, cart abandonment rate, etc. to detect the problems for optimizing the design.
2. Analyze the available solutions
Once you have detected the issue with your design, it’s time to look at different approaches to solve it. Search and analyze similar products in the market: how the successful ones have solved the problem; what patterns have they used; which ones are more liked by users.
Chances are that you may come across more than one pattern as the solution. For example, to display content on your app layout options like cards layout, carousal, split screen, etc. Make a list of all solutions suitable for your design.
3. Apply the patterns and test
Once you have the list of patterns, select the ones that rightly address your problem. If more than one patterns are suitable, then you may want to try A/B testing. Essentially, testing will help you understand which pattern works best for you. Perform usability tests and collect analytics data of the new patterns and optimize your designs.
Where To Find UX Design Patterns?
The best way to find the UX patterns is to observe and analyze the popular and successful products. However, there are also some amazing libraries that curate these patterns. Some of these useful libraries are as follows:
- UI Patterns: A comprehensive archive of patterns for almost all design problems — forms, content, menu, shopping, persuasive patterns and more.
- UI Scraps: UI scraps is a blog with a collection of all kinds of good and bad UX design patterns.
- Inspired UI: Pattern library focused on mobile design with patterns for more than 30 categories such as splash screens, sidebars, maps, dashboard, activities feeds and more.
- GoodUI: Huge library of UI patterns for landing pages, content, product, listings, check out, pricing, cart, signup and more based on experimentation and testing.