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 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.
UX design patterns are the approaches applied to address common design problems. These patterns have successfully worked in solving usability problems and creating a pleasing user experience. An example of such a pattern is the pull-to-refresh gesture on touch devices; you just pull down anywhere on the screen, and the content on the screen gets refreshed.
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 the need to find 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 a mobile app named Tweetie, pull-to-refresh has become a standard function to refresh the content on the screen. Image source: material.io )
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. Let’s understand both perspectives.
Users have already established 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 instinctive. And so when they use a new app they expect a similar interface. If you built your app without considering this, the users are more likely to get frustrated and even end up having a bad experience. Technically speaking, UX patterns reduce cognitive strain by creating familiar interfaces that users can interact with intuitively.
While for designers UX designs patterns work as a tried and tested approach to addressing a design problem. This significantly reduces time and effort on a design. Imagine a designer constantly coming up with new ideas and reinventing the designs for every project. That would be a lot to do. And that would be never-ending. So with design patterns, designers don’t have to invent something new every time and instead just pull out these patterns from their toolbox.
However, using the UX patterns doesn’t mean they are cookie cutters to designing every interface. You still have to think and research to come up with the best designs. These patterns just work as structural and behavioural features that you can adopt and customize where needed. We’ll look into how to use UX design patterns to improve your design in a while.
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.
(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 providing them feedback about the entered information. Examples of input and output patterns are as follows:
(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 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:
(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:
(Reactions that allow 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:
Dark patterns in UX take advantage of users’ biases and intuitive behaviours and lead them to do something that they didn’t intend to do. A popular example of this is ‘forced continuity’, where a user is provided with a free trial of the product and is automatically moved to a paid plan as soon as the trial ends.
Consider dark patterns as the evil twin of UX patterns. These patterns are not focused on improving the experience but rather benefitting the product/website owner by increasing sales, influencing users’ behaviour, or getting their personal information.
While dark patterns are used widely in the industry, and even by huge brands, whether they are unethical or just clever is still questionable. For example, is the limited stock notification on the product page added just to create FOMO or help genuinely interested buyers make a quick decision before the stock is out?
The first and foremost thing is to identify the issue you’re trying to solve. Patterns are solutions to 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 problem.
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.
Once you have the list of patterns, select the ones that most appropriately 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.
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: