Hello, we are Eleken - a SaaS design agency and we use UX design patterns in our work process all the time. Why?
UX design patterns are the general approaches in design that are broadly used to solve common usability issues. Because such patterns are widely spread, users get accustomed to them and know how each UX pattern works. This leads to the fact that implementing UX patterns into your design makes it much easier for users to interact with the product interface and for a designer, it saves time and prevents reinventing the wheel.
But are design patterns in UX really so necessary? If yes, then how to use them correctly? And finally, won’t these ready-made design solutions make your design boring? In our article, we will cover all these questions.
What’s the use of design patterns?
When you visit a website, you probably expect to find the navigation up in the header, the main CTA somewhere to the left, and the logo (or other visuals) on the right side of a page. This is an example of a common UX design pattern.
Here is another example: when you open a gallery of pictures you know that there should be some right-left arrows to scroll through the images, and it is also a pattern. In most cases, app/website interfaces are composed of such ready-made solutions.
Sometimes, designers create new patterns (such as "swipe left-right" onTinder, which, actually, can be replaced with simple "yes or no"). Some patterns appeared with the emergence of touch screen phones on the market - the interaction with such interfaces has changed a bit, and therefore new patterns had to be created.
The truth is that all projects use some design patterns to make an interface convenient, the navigation logical and the content well-structured.
The main task of a UX designer is to create the most user-friendly interface for a target audience. What does the most user-friendly mean? This means that a person interacting with this interface solves their tasks as quickly and efficiently as possible. And UI/UX design patterns facilitate this goal. The usage of patterns saves the designer’s time and helps the user to complete more tasks in a unit of time.
But except for these obvious advantages here are some more pros of using design patterns:
- Meet users’ expectations. When a user notices a familiar pattern and it works according to the person’s expectations, the human brain produces dopamine which makes the user feel good. As a result, the user associates this positive feeling with your product.
- Use proven solutions. You spend less time using off-the-shelf solutions instead of starting from scratch.
- Code standardization. You make fewer design mistakes using standard unified solutions since all the hidden problems in them have been found long ago.
- Simplifies team communication. Instead of spending an hour explaining to other designers/programmers what design idea you came up with and what resources are needed to implement it, you can just tell a pattern name.
How to use design patterns?
When you start searching for design patterns you will find plenty on the Web, but that doesn’t mean you should over-rely on them. The goal of UX patterns is to solve usability issues. Therefore, if there is a problem, look for a solution and vice versa, if there is no flaw with the user experience do not overwhelm your interface with common patterns.
To correctly choose when to use certain design elements you can stick to the following sequence of steps:
- Identify what tasks your customers have trouble solving. To understand what usability problems your users face, conduct research. The best way to learn your users’ pain points is to ask them (collect their feedback). As well, you can address Google Analytics. For example, if analytics show that the majority of potential customers bounce at the moment of registration, probably integrating a sign-up pattern that allows users to try out the site before asking for personal data (lazy registration) can help.
You can find more detailed information on how to conduct research in our article UX Research Process to Design With Confidence.
- Take a look at your competitors. Once you’ve identified the problem, do a competitive analysis. It will let you understand how other successful companies cope with similar usability issues.
- Choose the best pattern for your specific case. Finally, examine all possible patterns that your rivals use to identify which variant suits your needs best and think about how to integrate it into your design.
Can I stay unique with UX patterns?
Each application/website is individual, with different content and goals. Just because they are unique though, it doesn’t mean we should force users to learn how to operate this or that product from scratch. By following some established platform patterns, you can accelerate your users’ app understanding, making it feel more intuitive.
Imagine if every car model had a different pedal layout, different roles for the steering wheel and the gearbox. While you might be able to learn one model you’d have a hard time moving to another. Your UI/UX is exactly the same.
By following some common practices users can quickly get in and “drive" your app.
It is important to understand that coming up with your pattern is a very difficult task and not always necessary. The more new elements the user has to decode, the harder it is for them to interact with your product. Correspondingly, when there are too many unknown elements it becomes irritating and your potential customer will probably close the site and never return.
Mailchimp’s website definitely uses a lot of basic UX design patterns. Still, its brief and on-point copy, along with the focus on personality and cute chimp mascot makes their site extremely lovable.
Most common UX design patterns examples
There are several types of design patterns, each of which exists to solve a different set of tasks. Below you will find some of the most widely used pattern categories among designers and developers.
Data input
From the title itself, it’s easy to understand the goal of this pattern: to let users input the data and provide them with feedback so that they know if they do everything correctly. It can be credit card information, booking a hotel with a calendar picker, or entering some other personal data, so a person would quickly understand what information you want to be provided.
For example, Hootsuite uses a password requirements template. When inputting the data the user sees three simple rules they have to follow at the moment they select the password field. So, the user won’t be annoyed by having to retype the password only because they forgot to include the uppercase letter. Therefore, the product gives them a positive user experience.
Hierarchy and content structure
Information hierarchy and content structure belong to the essential UI/UX design principles and this pattern is responsible for how the content will be prioritized on the page/screen. The more logical you organize all design elements on the page, the easier it will be for your customers to navigate the site/app, and the smoother user experience they will have.
Some common examples of this kind of pattern are using big headlines that draw the viewer’s attention, contrast colors, and negative space (or white space) to make some elements more visible or readable.
The image below demonstrates how the negative space creates hierarchy and I guess it needs no further explanations.
Navigation
To find the needed info/get to the desired place on the site/app, the user uses navigation. Simple and clear navigation patterns give the user an understanding of where they are now, where they were on the previous step and how to get to the place they want.
There are several navigation patterns, some of them are better to use for desktop/tablet users while others are great for smartphone users. Here are some of them:
Drawer (hamburger menu)
The main feature of this pattern is that when you open the navigation, the menu itself takes up almost the entire page. Usually, the background is darkened, and the navigation is placed on a layer above the main screen. This pattern is suitable if you want to include many sections in your navigation. That’s why it usually works perfectly for CRMs (customer relationship management software) or ERP (Enterprise resource planning software).
Here is an example of a drawer menu created by Eleken for Gridle, a client experience platform.
Tab bar
Tab bar is a panel with icons that is especially familiar for owners of Apple devices. It is a fast and clear way to navigate the app. The main drawback is that this pattern is suitable for navigation through up to five subsections.
Modal view
The modal view pattern presupposes the window that opens on top of the main application window when creating/editing an object. The user can exit it either by saving or losing the entered data.
Wizard
Wizard is one of the most famous and widespread patterns. It is mainly used to collect basic data when creating a user account (in cases when you need a lot of information from the user) or to display a tutorial (step-by-step instructions or a demonstration of new/basic app functions).
Using Wizard, you will neatly group information according to meaning and spread it across several sequential screens.
We used Wizard when working with Textmagic - a customer experience platform, to help users configure email marketing campaigns. We broke down campaign configuration into five steps with each step showing less information at a time.
Breadcrumbs
Breadcrumbs are a horizontal hierarchy diagram that shows a user’s path in the app. It is mostly used for tablet or web apps. If the application is large and complex, it is easy to get lost in it and the Breadcrumbs will be useful here.
Social media
Social media patterns are used to build trust, facilitate communication and user engagement, share some content, and so on.
Some examples of social media patterns are:
- Chats
- Testimonials
- Leaderboard
- Auto-sharing
- Invite a friend
For example, take a look at how Intercom uses a testimonial pattern on the website which adds reliability in their users’ eyes.
Libraries of UX design patterns
There are many sources where you can find patterns of common design solutions. The best way to learn them comes from practice. When you visit sites, use popular apps, widely-used design patterns will pop up in your head and you will learn how to correctly recognize them. To choose a suitable solution to your usability problem, it is worth focusing on big, successful companies (analyze how your popular competitors deal with problems similar to yours).
And here is the list of some popular libraries:
- https://goodui.org/ - a huge library of patterns, which was created based on A/B testing;
- UI Patterns - the list of numerous solutions to common design problems for developers and designers with interactive examples and downloadable source code to use for web and mobile apps
- Web UI Design Patterns - 63 patterns with cases of their use from the guys who created UXPin, a popular designing tool.
- Inspired UI - a database of patterns for Android, iPhone, and iPad that is easy to use thanks to a simple drop-down menu
- pttrns - a neatly organized pattern base containing the coolest UI patterns since 2012
- Mobile UI Design Patterns - an e-book with 46 of the most successful mobile UI patterns. There are detailed explanations for their use along with the cases.
The usage of UX design patterns in your design process promotes creating usable and high-convertive websites and applications, and we know it from our experience. And if you cannot make a choice, don’t want to use someone else's template, or strive for the uniqueness of the interface of your site or app, please contact us. Eleken’s UI/UX designers will select the best option for your specific business needs.
