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.
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.
Navigation
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.
Case studies
Implementation Level:
- Search Box Placement: Placing the search box in the upper right corner for easy access.
- Thumbnail Images: Using 100 x 100-pixel square thumbnail images for product listings.
- Breadcrumbs: Displaying a breadcrumb trail to show users their navigation path.
- Pagination: Implementing pagination for long lists of content.
- Hamburger Menu: Using a hamburger icon to reveal a hidden menu on mobile devices.
- Error Messages: Providing clear and consistent error messages for form validation.
Flow Level:
- Lazy Registration vs. Account Registration: Offering users the choice between minimal sign-up and full registration.
- One-Page Checkout vs. Multi-Step Checkout: Deciding between a single-page or multi-step checkout process in e-commerce.
- Wizard Interface: Using a step-by-step wizard for complex tasks like setting up a new account.
- Infinite Scrolling: Loading more content as users scroll down the page.
- Auto-save Drafts: Automatically saving user input as drafts to prevent data loss.
- Progress Indicators: Showing loading spinners or progress bars for lengthy operations.
Context Level:
- Tour Calendar: Creating a “Tour Calendar” feature for a music artist’s website.
- Biography Page: Designing a dedicated “Biography” page for artist profiles.
- Checkout System: Developing a merchandise or ticket checkout system for musicians.
- User Profiles: Providing user profiles with customizable avatars and bios in social media platforms.
- News Feed: Implementing a chronological feed of user-generated content.
- Multimedia Sharing: Enabling users to upload and share images, videos, and audio clips.
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.
Key Highlights
- Origin and Purpose: UI design patterns, initially used in architecture and programming, have evolved into reusable solutions for common user interface problems. They offer predictable and familiar solutions to streamline product development.
- Analogous to Recipes: Just as a cooking recipe provides a method for a recognizable dish, UI design patterns offer predictable solutions to interface design challenges. Teams can use these patterns to guide their design decisions and create better products.
- Adaptation and Customization: Design patterns should guide, not replace, informed product development. Teams can modify patterns to align with user and business needs, making their version unique while retaining the core pattern structure.
- Four Main Types of UI Design Patterns:
- Input and Output: Address user interactions and feedback submission.
- Content Structuring: Organize site content to enhance accessibility.
- Social Sharing: Enable users to promote or share content on social media.
- Navigation: Guide users around the site and prevent navigation issues.
- Three Levels of UI Design Patterns (Pyramid Model):
- Implementation: The base level, featuring patterns for consistent, straightforward experiences, often following strict rules.
- Flow: The middle level, offering solutions to common design problems affecting functionality and user flow. Designers choose alternatives that impact user experience composition.
- Context: The top level, defining patterns specific to the site’s context, genre, or purpose. Patterns are tailored to match the site’s unique requirements.
- Application and Example: Professional artists’ websites might have UI design patterns tailored to their context, such as tour calendars, biography pages, and merchandise checkout systems.
Connected Product Development Frameworks
Connected Agile & Lean Frameworks
Read Also: Continuous Innovation, Agile Methodology, Lean Startup, Business Model Innovation, Project Management.
Read Next: Agile Methodology, Lean Methodology, Agile Project Management, Scrum, Kanban, Six Sigma.
Main Guides:
- Business Models
- Business Strategy
- Business Development
- Distribution Channels
- Marketing Strategy
- Platform Business Models
- Network Effects
Main Case Studies: