Have you ever heard of ‘UX Design Pattern’?
When I was looking for a job, I have come across this company stating in their requirement; ‘Working knowledge of effective UX design patterns’. It was caught my curiosity to dig deeper into what is this term wants to tell.
Working knowledge of effective UX design patterns
so…
What is UX Design Pattern?
The UX Design Pattern is a repeatable solution to recurring design problems. When the pattern is applied correctly, it can help reduce the time and effort required while navigating the application, software or product. A design pattern is an essential part of the user experience because it can minimize a product’s learning curve and human cognitive load
As UX Designer:
Design pattern saving a lot of time by not having to re-invent the wheel to come up with a design solution
As a user:
Design patterns help to reduce cognitive strain by giving them sometimes that they are familiar with. However, when a designer tries to create a new design pattern of interaction, they need to justify, explain the benefit and rationalize the new pattern.
Why UX Design Pattern is important?
The biggest benefit of design patterns is the communication between designers, users, and developers because they have a conventional look and feel such as global navigation.
- Reduce cognitive strain on users — users get familiar with the object and interface and know what to do next.
- Users often have an easier time getting where they going to accomplish their goals.
- Saving designers from re-invent design wheel — For example, the engineer has their larger repository like Github where they can recycle existing code by copying, pasting, and tweaking. The same flow also can be implemented to designer with the design pattern
- Using familiar design patterns can help to increase dopamine on a user — the chemical that involved motivation, reward, memory, and attention
How to apply UX Design Pattern?
Here are problem-centered approaches to identifying user needs and applying UX design patterns:-
Firstly knowing the problem (1). For example, why do users leave the website during checkout in ABC.com. Then conduct research (2) about your website and analyze another successful website to uncover your problem. In this case, it was suggested to have competitor analysis and interviews.
Compare by seeing how others do (3). For example, users leave the website during checkout because the website asking lengthy and repetitive forms. Instead, you can improve the flow by making some of the forms can be auto-filled as it was filled up previously.
Lastly, analyze available patterns (4). Suggestion, chuck the form into their category by using a stepper; best way to reduce cognitive strain. By doing this, you are able to reduce the scrolling time when the user needs to recheck the forms and easier for a user to remember if there is information that is not filled up.
Notes: Do not add unnecessary design patterns just because competitors have them.
Most Common Design Pattern
Design patterns are commonly used without you knowing it. It helps designers design better products and helps increase “design literacy” amongst non-designers as well — so that everyone can understand the value of design.
1. Design pattern in design components
(1) Data input/out is one of the common user interactions. A good example is the date picker to lets users quickly pick a date in a form. With the visibility of the calendar icon at the right of the field, users can understand the instruction more clearer.
(2) It is important to receive a clear alert about the potential error. Validation is a design pattern that helps the user understand the system requirement and gives effort for the user to find the error.
(3) Share button gives users clear instruction that the content can be shared. This familiar design pattern helps the user to build trust, support brand reputation, encourage others to have social chain interaction, and play a big role in the rate of conversion.
2. Design Pattern in Application
(1) The status indicator in Skype resembles the colors of the traffic light. Green means the person is active, yellow means the person is idle, and red means the person is not here or simply does not want to be disturbed. The usage of these three colors is clear to use because it’s around us and as designers do not need to explain or justify it, users are already familiar with it.
(2) The thumbnail preview in Netflix is mainly to gain the attention of the user. Giving a vibe of safe exploration, increasing the interactivity, and showing immediate feedback. By providing an overview of the images, users know what is available for them.
“ All these efforts are a design wheel that allows users to get familiar with the action and know what to next ”
Design pattern plays with human psychology, and the desire for a user to perform an action. The goal of the design pattern is to create a bond between user and product.
Design Pattern Reference Site
- UI Pattern, a pattern is a recurring solution that solves common design problems
- Pattern tap, collection of designs, patterns, and inspirations of user interaction
- UX Archive, allowing the user to compare the most popular iPhone apps user flows.
- Call to Idea, presenting design elements including layouts, components, and utilities for user inspiration
- Other design collections like Dribble or Pinterest
Notes: Material Design and Apple Human Interface Guideline is a style guide, not a pattern library.
future reference: https://www.eleken.co/blog-posts/ux-design-patterns-to-make-designers-work-simpler-and-your-product-more-intuitive
