User interface (UI) design patterns are reusable solutions to common design problems in user interface design.
Let's take a look at one of the most common problems that you might run into:
I need to create a place for users to click and move to a different screen.
The solution?
A button.
A dropdown menu, for example, is a UI pattern that's used to conserve space and maintain information hierarchy within a design, while providing users easy access to pages within the website or app.
Each UI design pattern has a specific purpose, and by understanding how and when to use them, you can create interfaces that are both consistent and efficient. UI design patterns provide a common language for user interface designers and a foundational consistency for users of websites and apps.
What Design Problems Can You Solve With UI Design Patterns?
UI design patterns provide an established solution for common design problems and can help UX/UI designers to create more efficient and effective interface designs. These solutions are helpful whether you're designing a new interface from scratch or polishing an existing one.
These design problems often appear in the form of a question, like:
- How can I make it easier for users to navigate through the interface?
- Do the navigation requirements change depending on where the user is in the website?
- How can I reduce the cognitive load for users, while still presenting this content in a way that's clear and easily digestible?
All these are common questions that might appear as you work on your designs. The good news is that there are many established design patterns that you can utilize to solve a large number of these problems as they arise.
Examples of Common UI Design Patterns
From components such as search boxes, buttons, and carousels to entire page templates and layouts, UI design patterns are essential when creating user friendly, enjoyable user experiences.
In addition to what we've already mentioned, some of the more common UI design patterns that you might already be familiar with include:
- Navigation bar: Navigation deals with a user’s ability to move around an app or website, and is often seen at the top and/or bottom of the page.
- Social Sharing: This UI design pattern promotes sharing content or experiences from a product on a social platform such as Twitter or Instagram.
- Breadcrumbs: Breadcrumbs are a type of secondary navigation that allow the user to understand the website or app’s organization and how pages flow from one to the next.
- Account Registration: A pattern like this prevents customers from viewing certain information on the site unless they’ve registered to receive or view it.
- Dropdown menu: A list of options that are only revealed when a user clicks or hovers over the area. These are used when space is minimal, or when the amount of items in the dropdown menu would otherwise be overwhelming to display in a static format.
- Toolbar: A set of icons grouped together on an interface, often arranged neatly across a bar, that perform various functions when clicked.
- Accordion: A type of visual content structure that hides content until it is clicked on by the user.
- Tabs: These help with content structuring on pages where the content should remain front and center. It imitates the overall look and feel of a physical file folder system.
The Benefits of Using UI Patterns
A More Efficient Design Flow
Using UI patterns can help you save time and energy when designing your user interfaces. By relying on existing patterns as a foundation for your designs, you can focus on solving more specific problems for your users. UI design patterns make it possible to quickly get started on the customization of a site or app with the common building blocks of UI design patterns in place.
Adaptability, Without Reinventing the Wheel
UI design patterns were created so designers don’t have to spend too much time repeating the same creative processes, but are still adaptable to suit different use cases. Each pattern can be altered or personalized to present precisely what the client wants for their customers’ user interface.
Intuitive Usability
UI design patterns provide familiar, recurring solutions for users. If you land on a website, you automatically start using the common UI patterns, like menus, to look for the page or blog article that you want to find.
Consistency Across the User Experience
Like the more robust design system (which will also include UI design patterns and components), incorporating design patterns means that UX/UI designers can ensure consistency throughout an interface or between multiple interfaces, which makes it easier for users to understand how things work.
What Are Dark UI Patterns?
Dark patterns are design patterns that are used in a way that's meant to mislead, confuse, or otherwise trick a user into performing an unintended action, or to prevent a user from taking an action that they would otherwise have taken.
For example: hiding the "unsubscribe" button in an email, or making it difficult to see, is a dark UI pattern, since it makes it difficult for people to remove themselves from a mailing list.
Some marketers also trick users with colors, layout, and copy choices to create opt-in forms that make it seem like the only positive solution for the user is to add their email to the input field.
Dark UI patterns distort the intended flow of a site or app from the user's perspective, and chips away at (or betrays) the trust they have in your product.
Tips for Using UI Patterns in Your Design
1. Start by finding existing patterns that are close to what you need
Whether you studied product interface design in a formal educational setting, or kickstarted your career with a UX bootcamp likeUX Academy, you will likely have been introduced to UI design patterns already, and may have a list or resource file of your own to choose from.
You can also look through various design systems or wireframe kits (there are many great free ones in the Figma community) to reorient yourself with some of the common UI solutions and use that as a starting point.
If you can't find an existing pattern that is a perfect fit for the design that you're working on, you can create your own. It's important to remain as close to established patterns as possible, unless your usability testing indicates otherwise.
2. Adapt UI patterns to fit your specific needs
Each UI pattern will have to be adapted to fit the design that you're working on. If you're adding a navigational menu, for example, you'll have to adjust typography, colors, sizing, and content.
You might also end up layering UI patterns, like creating a sliding hamburger menu, to better fit in a small mobile device screen.
3. Test patterns with users to see how they respond
Whether you use an existing pattern or come up with a new one, it's important to test your work with users to ensure that they respond the way you anticipated. User tests can reveal missing elements (like a user who looks for a menu or breadcrumbs that don't currently exist in the design), as well as identify patterns that should be altered or removed.
Where to Find UI Design Pattern Libraries
User interface design is an innovative field, but that doesn't mean you have to create everything from scratch. Here are a few UI design pattern library sources that you can use to amplify the effectiveness of your designs.
UI Patterns
This website is wholly dedicated towards user interface patterns, analysis of how they work, as well as more advanced resources to help you understand user behavior more holistically.
Mobbin
Mobbin provides a visual repository of app screenshots, which can be filtered by company, design pattern, element, app category, or color. It's a powerful site that you can use to see what common solutions are, and how you might consider integrating them in your own design needs.
UI Garage
This is another great site that allows you to search by design pattern, and sort or filter the results based on the platform that you're designing for (Web, iOS, etc.)
Pttrns
With a paid Pttrns membership, you can gain access to a wealth of mobile UI patterns, connect with other designers, and receive advice or feedback on your questions within an active community.
Key Takeaways
- UI design patterns can help UX/UI designers to create more efficient and effective interface designs.
- By using design patterns, UX/UI designers can ensure consistency throughout an interface or between multiple interfaces, which makes it easier for users to understand how things work.
- There are many UI design pattern libraries available online that you can use as a starting point, then adapt them to fit your specific needs.
