UX Design Patterns You Should Focus On
It’s a UX designer’s goal to create a seamless and positive user experience. UX design patterns are the universal building blocks design teams use to solve usability issues and create familiarity.
We see many familiar design patterns in the world around us. For example, most roads separate lanes with solid or striped lines. There are also traffic lights and road signs to help you navigate roads. If every country used a different system, drivers would have to learn a new driving pattern for every country they want to drive through—not practical!
UX design patterns work similarly. They provide users with the familiarity to navigate a digital product or web page without learning a new system.
UXPin comes with several built-in design system libraries with common UX patterns so designers can start building high-fidelity prototypes straight away! Sign up for a 14-day free trial.
What are UX Design Patterns?
UX design patterns are the familiar building blocks for building user interfaces. Designers use UX design patterns as reusable components to solve common usability issues.
For example, a design pattern we see regularly is a breadcrumb. A breadcrumb shows the user which page they’re on and the path back to the home page.
How UX Design Patterns Improve the User Experience
Design patterns provide designers with building blocks to create user interfaces faster, but they also enhance the user experience.
UX design patterns typically follow a universal design standard familiar to users, thus reducing the time and cognitive load required to learn and navigate a new product or website.
In How We Decide, author Jonah Lehrer writes that recognizing familiar patterns releases a hit of dopamine—the chemical involved in motivation, reward, memory, and attention. That dopamine hit increases when the UX pattern works as anticipated.
Designers who use effective UX design psychology techniques, like familiar UI design patterns, can enhance the user experience and make product interactions more pleasurable.
Free eBook Resource: Designing Better UX With UI Patterns. Includes examples from Dribbble, Quora, MailChimp, Medium, and others.
Differences Between UX and UI Patterns
Most designers use the terms UX patterns and UI patterns interchangeably because the distinction is minor, there’s lots of overlap, and it can get confusing!
- UX patterns: reusable patterns for user flows and navigation—infinite or continuous scroll on a social media platform or website. The user recognizes that they can scroll down to refresh the page.
- UI patterns: reusable patterns for visual and interaction design—a hamburger icon. The user knows a hamburger icon will open the navigation.
When and How to Apply UI Design Patterns
Knowing when to use a design pattern is vital for product design and user experience. Designers must only use design patterns when there is an exact usability reason. If there is no problem with the user interface, then there’s no need for a design pattern—in other words, if it’s not broken, don’t fix it!
Here is a four-step, problem-centered approach to identifying user needs and applying UX design patterns:
- Pinpoint the problem—You can identify problems through a mix of analytics and usability testing. For example, you notice that your product’s signup flow has a high drop-off rate when capturing customers’ details. Through usability testing, you learn that a common pain point is that the signup process takes too long—your signup form requests full name, email, age, gender, city, and mobile number (many of these details are irrelevant to using the product).
- Find solutions through market and competitor research—Look to competitors and popular design libraries to find common UI patterns to solve your problem. Returning to our example above, you find that competitors usually only ask for a user’s full name and email address during signup. They also allow users to use social media accounts to signup and log in, thus streamlining the onboarding process.
- Customize the design pattern—You must customize the new UX pattern to match your brand and existing design system. For our user signup example, this customization might include adjusting the corner radius for inputs, social media buttons, and submit button. The placeholder text, input labels, and error/success messages will use colors from your style guide.
- Test your design pattern—Lastly, you must always test new design pattern implementations to ensure they meet usability and brand requirements.
The example above shows the importance of usability testing—identifying and applying user interface design patterns starts and ends with testing.
Don’t add a design pattern just because a competitor has one or you think it’s the right thing to do. For example, does your web design need a breadcrumb? For eCommerce, it might be necessary so users can return to a product category or know where they are in a checkout sequence. But, for most other websites, it’s just adding extra data points for users to process.
Redundant patterns clutter user interfaces, making it harder for users to absorb the content and make decisions.
Common Examples of UX Design Patterns
Design patterns fall into six primary categories:
- Data input and output
- Content structuring
- Navigation
- Social media and sharing
- Incentivization
- Hierarchy
Data Input and Output
Data input and output is one of the most common user/product interactions. Users enter information, and the system returns data or completes an action.
A good example is a date picker which many websites and applications use. Although they look slightly different, most date pickers display a similar layout and functionality—month/year in the header, days of the week, and dates.
When a user clicks a date, it’s highlighted to show the selection. Lastly, there’s a CTA (and sometimes a cancel button) the user can click when they’re done and ready to proceed.
Other examples of data input and output include:
- Form submissions
- Success/fail messages
- App notifications
- Progress bars/steps
Content Structuring
Have you ever noticed that most galleries use a similar block layout with image thumbnails? Or, how admin interfaces feature a navigation panel to the left and content to the right?
Using these familiar content structures and UI patterns can help users navigate a new digital product or website quickly. The goal is to minimize friction (such as learning a new interface) for a seamless and enjoyable user experience.
Navigation
Familiar UI patterns can help users navigate a website or digital product with ease. There are different navigation patterns for desktop and mobile interfaces.
For example, the primary navigation is in the header or to the left in a desktop website or application. While in a mobile app, the primary navigation bar is in the footer, where it’s only a thumb reach away.
An infinite or continuous scroll is a typical navigation design pattern used by Instagram and Pinterest. As users scroll, the system refreshes to show more content. This design pattern is familiar and enhances the user experience because users don’t need to click a next button or pagination to see more content.
Extra resource: The 4 Types of Creative Scrolling Patterns.
Social Media & Sharing
There are several social media and sharing design patterns available to designers, including:
- Branded social media icons for links
- Sharing icons—either the arrow curving to the right or share icon with an open triangle and three dots
- Testimonials—quote in inverted commas with the person’s name and image
These familiar design patterns help users find social proof to build trust in your product and brand.
These design patterns leverage psychology, encouraging users to perform desired actions. The goal here is to create a bond between the user and a product. This can be achieved through the use of hooks. Read more about hooks in this article, 6 Persuasive UI Design Patterns to Hooks Users.
Incentivization
Incentivization UX patterns leverage design psychology to encourage users to perform tasks and actions, thus creating a user/product relationship.
Designers incentivize using design patterns to hook users through positive feedback, cognition, gamification, and more.
For example, gamified patterns encourage users to invite friends to earn rewards. A UI pattern will show users their current points with a CTA to invite more friends to earn more.
Hierarchy
Hierarchy patterns are similar to content structure in that they create instant visual familiarity for users to quickly scan an interface and know how to complete the desired action.
Two common hierarchy patterns for a blog include headers and a table of contents. Users can scroll through a page to quickly find what they want or use the table of contents to jump to a specific section.
A breadcrumb is another hierarchy pattern eCommerce websites use to help users navigate product pages and checkout flows.
Extra resource: The Essential Guide to Mobile Design Patterns.
Prototyping and Testing Design Patterns
Prototyping and testing design patterns are critical to identifying usability problems and discovering effective pattern designs to solve them.
The problem is vector-based design tools don’t provide a way to design common design patterns like signup forms or date pickers. Meaning you can’t test these with usability participants!
UXPin is a code-based tool that allows you to build prototypes that look and function like the final product. Now you can test fully functioning design patterns to see if they’re the right fit for your digital product or website.
UXPin features advanced interactions with Javascript-like functionality. Designers can enhance prototype fidelity with states, conditional formatting, variables, data capture and validation, functions, and more.
With these advanced interactions, you can create a fully functioning signup form. The form will capture a user’s personal information and save that data to validate them when they log in—exactly like a coded application.
Try UXPin
UX design patterns are an essential part of the user experience because they minimize a product’s learning curve and human cognitive load. Designers must know when to use these UX design patterns and not just implement them out of habit or copy competitors.
Analytics and usability studies help designers identify which UX patterns are missing from an interface and then test whether they have implemented the correct one.
Can your design tool test fully functioning UX design patterns? Why not try UXPin to experience what it’s like to create advanced interactions to enhance your prototype fidelity and testing. Sign up for a free trial and start designing with the world’s most advanced code-based design tool!
