Design patterns were originally used in architecture and programming to optimize solutions known to work within specific contexts. Solutions occurring frequently enough then morphed into formulas that could be reused as necessary. Some of the design patterns people encounter daily include apps with tab bars, websites with top navigation, and login screens with two input fields and a submit button. User interface (UI) design patterns are proven and reusable solutions to commonly occurring user interface problems.
Contents
Understanding UI design patterns
As a cooking recipe provides the ingredients and method for making a recognizable dish, so too does a user design pattern in providing a predictable and identifiable solution to an interface design problem.
For users, the structural and behavioral features of a pattern are familiar. Rather than reinvent the wheel, teams can leverage this knowledge to develop better products.
Design patterns should never take the place of informed product development. Instead, they should be used to guide design decisions by modifying them to suit the user and business needs.
There are many ways to make a curry, but there are certain basic ingredients that make one recognizable.
The same is also true for UI design patterns. Teams have a general model for how to create a recognizable pattern and can add or subtract ingredients to make their version unique.
The four main types of UI design pattern
There are four main types of UI design patterns. Each is based on specific design cases and usually target core site functions, including:
Input and output
These design patterns relate to how the user interacts with the site by submitting information.
It also deals with output, where the site responds by submitting feedback in return.
Content structuring
Perhaps the most obvious and recognizable design patterns are those that organize site content and make it more accessible.
Social sharing
Or patterns that enable the user to promote or share the site on social media.
Which helps guide the user around the site and assists them if they become lost.
The three levels of UI design patterns
Product discovery coach Anders Toxboe further categorizes UI design patterns according to how they help a site.
Many choose to visualize each category as a level in a pyramid.
With that said, let’s start from the bottom and work upwards.
1 – Implementation
At the bottom of the pyramid are design patterns contextual to each design case that deliver a consistent if unremarkable experience.
These patterns are the most strict, with governing rules tending to black and white.
Examples include search boxes placed in the upper right corner and 100 x 100-pixel square thumbnail images.
2 – Flow
On the second level are recurring solutions that solve common design problems in terms of functionality and flow.
Designers must choose between alternatives that solve the same problem.
However, both options affect the flow and composition of the user experience as opposed to the consistency of the experience at the implementation level.
To determine the best way to gather input from users, designers may choose between the Lazy Registration and Account Registration design patterns.
3 – Context
At the highest level of the pyramid are design patterns that define what context the user is in. In other words, these are design patterns specific to the type or genre of the site in question.
A professional music artist, for example, will need design patterns appropriate for tour calendars, a biography page, and a checkout system for merchandise sales.
Key takeaways
- UI design patterns (UI) design patterns are proven and reusable solutions to commonly occurring user interface problems.
- UI design patterns can be categorized into four types: input and output, content structuring, social sharing, and navigation. Each is based on specific design cases and typically targets core website functions.
- UI design patterns can also be categorized according to how they help a site. In this case, there are three types represented by the levels of a pyramid: implementation, flow, and context. At the bottom of the pyramid are design patterns that help sites provide a consistent user experience. As one moves up the pyramid, the user experience is defined by flow, composition, and context.
Connected Product Development Frameworks
Connected Agile Frameworks





































Main Guides: