A Step-by-Step Guide to UX Design Patterns

What Are UX Design Patterns?

UX design patterns are the reusable solutions used to build user interfaces. Unlike UI design patterns (see our article on UX vs. UI to learn more about the differences), they are not physical parts of the interface, but rather the ways through which certain experiences are evoked in the users or particular UX problems are tackled.

Since effective UX design patterns may be used multiple times, at some point, they become more than just a solution to some issues. Instead, the users are beginning to expect them in the products.

An example of that may be the filter on e-commerce websites. Users have become used to this option and commonly use it to navigate through product catalogs. As a result, they feel disappointed or even enraged when this feature is unavailable.

The Types of Web UX Design Patterns

Web UX design patterns may be distinguished into several categories, based on the function that they maintain within a website. They can generally be divided into navigation, input, content, social, and feedback patterns.

Navigation UX Design Patterns

These patterns are used to make moving through different pages on a website easier and more intuitive. Some common examples include:

• Breadcrumbs
• Menu
• Tags

Input UX Design Patterns

These are all the repetitive elements related to the user’s input. Among the most popular ones you may find:

• Autoinput
• Password strength meter
• Keyboard shortcuts

Content UX Design Patterns

Popular UX design solutions include elements related to content organization, such as:

• Block layout
• Adaptable site view
• FAQs

Social UX Design Patterns

Social patterns are one of the most important ones. They may be related both to sharing content and to embracing gamification in UX design. The most popular examples are:

• Testimonials
• User leaderboards
• Chat

Feedback UX Design Patterns

Finally, there are the feedback patterns, designed to gather opinions from other users. They might be used both for user-user interactions and to acquire feedback from clients. The examples include:

• Feedback loops
• Feedback triggers

How to Implement UX Design Patterns?

To choose the right UX design patterns, you need to follow three general steps:

Find the Problem

Initially, you need to consider the issue that your digital product struggles with. Consider what is the main problem. Is it unintuitive navigation? Or, perhaps, difficult-to-reach content? Each of the five categories of UX design patterns represents different challenges that you need to tackle, so you should start with picking the right category. For this sake, use data and gather feedback.

After narrowing down the problem to one of the categories, you may proceed to analyze the issue further. Try to pinpoint the exact area/aspect that affects user experience negatively. Analyze the flow of users throughout your app/website and see whether there is a particular point at which users tend to give up on their activity. You may also gather more feedback, for instance by asking on your social media about the upgrades that your users would like to see in this particular aspect of your product’s functionality. As a result, you should know what exactly needs to be improved.

Look for Solutions

Knowing what the issue is, you may start searching for a possible solution. Since UX patterns are repetitive, the best idea is to check similar websites or apps. This way, you will see whether other organizations also struggle with the same problem, or look into their solutions to it.

Another option in this case is to search through a UX or UI design patterns bank. These are online libraries presenting possible UX improvement ideas. They offer a plethora of solutions, usually categorized by the user experience aspect that they are related to. Searching through these banks may inspire you, or even provide you with dependable UX designs that will improve your customer’s experience.

Select the Pattern, Make It Live, And Test It

Having chosen the perfect solution for your problem, it is time to implement it into your product. Build an adequate UI element and place it on your website or in your application.

Remember, after choosing your solution, you should monitor its effectiveness. Perhaps it will prove ineffective in your particular situation, and you will need to opt for a different one.

UX Dark Pattern – What is it?

You might have heard about the UX dark pattern. It is a type of UX design pattern meant to encourage users to perform a certain action, without making its purpose obvious. UX dark patterns aim to take advantage of the users, by exposing them to elements similar to those on typical websites.

UX dark patterns are used for several, usually malicious purposes. You may see them introduced to:

• Make the user pay more for a product or a service.
• Lure the user to share their data with the company.
• Intimidate the user to agree to unsavory conditions.
• Make the user convert by signing up for a newsletter or spam.

There are several types of UX dark patterns that users should be aware of. Gray, Kou, Battles, Hoggatt, and Toombs describe the following ones:

• Bait and Switch – Users interact to achieve one thing, but a different result occurs.
• Disguised Ad – Advertisements that are disguised as natural UI elements.
• Forced Continuity – Charging your card for service automatically, without any notice after the free trial ends.
• Hidden Costs – Users get to the final stage of payment to discover additional costs awaiting them.
• Misdirection – Creating a design element that grabs users’ attention only to make them ignore another element.
• Price Comparison Prevention – Often seen in shady e-commerce, a practice of making it extremely difficult for the users to see the price and compare it with similar services.
• Privacy Zuckering – Baiting the users to share more information than they are willing to.
• Roach Motel – Making it easy to get into a particular situation while ensuring that leaving it is difficult
• Sneak into Basket – The site adds an extra product to users’ shopping carts without their knowledge.
• Trick Questions – Questions that at first sight seem to ask about one particular thing but are designed to be ambiguous and ask about something different.

Dark UX design patterns are extremely dangerous for users, yet they are still visible among many digital products. Therefore, you should be aware of them when browsing the internet and ensure that none of them is implemented into your website or application.

The Takeaway

UX design patterns are repetitive elements meant to elevate user experience, by making it easier to navigate through a website or an app, make contact with other users, access content, or leave feedback. When used maliciously, they are called dark UX patterns. Implementing them to enhance user experience is a must for any website or application owner, and is quite easy since many solutions are available in online banks – all you have to do is find the problem that you want to solve, pick one of the options, install it, and evaluate its performance.

Did you like this article? Then you should also read Psychology and UX design.

References:

• Colin M. Gray, Yubo Kou, Bryan Battles, Joseph Hoggatt, and Austin L. Toombs. 2018. The Dark (Patterns) Side of UX Design. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (CHI ‘18). Association for Computing Machinery, New York, NY, USA, Paper 534, 1–14. https://doi.org/10.1145/3173574.3174108