UX Design Patterns – A Step-By-Step Guide

UX design patents are elements that you can reuse and utilize to solve usability problems when designing the user experience of your website or app. Unlike UI patterns, they are not physical; instead, they are the ways through which you provide certain experiences or handle particular situations, functions, and issues. Staying consistent with your UX patterns is critical, as it enables you to elevate your users’ experience even further. Here, you’ll learn all about them and see some examples.

What Are UX Design Patterns?

Design patterns in UX are nothing more than a set of solutions implemented and reused to maintain two principles of UX design: consistency and usability. They might often be mistaken for UI patterns since the difference between these two is often blurry, but the key feature that distinguishes them from each other is that UX patterns are concepts – the ways through which a certain problem is solved, while UI patterns are the solutions put into life. Let’s look at an example to make it more straightforward.

Imagine that you are building a menu for your website and spot that it contains too many elements to place it as a bar on the top of the site. What do you do? You come up with an alternative – a drop-down menu. This is a UX design pattern.

The UI pattern in this situation would be the designed menu, with all the graphic elements, links, etc. – a particular, finished design that you could also reuse all over your website, just with different content.

Why Do UX Design Patterns Matter?

Web design patterns in UX are critical since they enable maintaining consistency across your website or web app. It all goes down to providing an intuitive user experience.

By utilizing patterns for different problems and sticking to the chosen solutions, the users will easily understand how to navigate through your website – every menu will work the same way, every photo will (or will not) be clickable, and so on. Simply, the visitors will know what to expect on each subpage, making their journey more enjoyable, easier, and faster.

Types of Patterns in UX Design

Design UX patterns can be categorized into five different groups: navigation, input/output, content, social, and feedback. Here’s a brief overview of each type.

Navigation UX Design Patterns

These are the patterns implemented for user navigation. Here are some examples:

• Menu (dropdown, hamburger, sticky, sidebar, etc.).
• Breadcrumbs (the model of navigation through content, the hierarchy, and how it is linked).
• Tags and categories (the way you categorize and section your content).

Input/Output UX Design Patterns

Input patterns in UX design are simply the ways through which you let your users fill your website with information or receive it. They may include:

• Password management (password strength meter).
• Keyboard shortcuts.
• Success/fail messages.
• Progress bars.
• App notifications.

Content UX Patterns

Content patterns are related to how you offer content to your users. Some examples include:

• Content layout.
• FAQs.
• Site view.
• Dashboards.

Social Patterns

These are the patterns used for social interactions and sharing your content. Examples of such patterns are:

• Leaderboards.
• Comment sections (reply in thread, etc.)
• Chats.
• Forums.
• Testimonials.

Feedback Patterns

Finally, feedback web design patterns in UX are used to gather information from your users about your website/products. They may include:

• Feedback loops.
• Feedback triggers.

What Are Dark UX Patterns?

Have you ever heard the term dark UX patterns? As the name suggests, they are a variation of UX patterns used for malicious purposes. They come in many shapes and sizes, and while not illegal, they build up a negative user experience in return for potential gains.

There might be different aims for such patterns, such as convincing the user to pay more for a product, getting the user to share data that they don’t want to, making the user agree to something that is not beneficial to them, or even forcing conversions through spam.

What are some examples of them? Let’s see what Gray et. all have to say about them:

• Bait and switch – the user tries to do one thing, but a different thing happens.
• Disguised ads – ads are disguised as UI elements.
• Forced continuity – the user is charged automatically without any notice after a free trial.
• Hidden costs – additional costs appear on the checkout.
• Misdirection – attracting the user’s attention to take it away from another element.
• Price comparison prevention – making it difficult to check the price so that you wouldn’t compare it.
• Privacy zuckering – the aforementioned luring the user to provide extra information that they might not want to share.
• Roach motel – making it easy to get into a situation but difficult to get out of it.
• Sneak into basket – adding extra products to the cart without users’ consent.
• Trick questions – ambiguous questions that seem normal but are designed to ask about something different than it seems. (2018)

Do companies use dark UX patterns? Unfortunately, yes, even the large ones. Take, for instance, Uber Eats, which utilizes the hidden cost pattern – they add extra charges only after you’ve made your order and go to check out, as after X minutes of searching for food you are more likely to accept it and proceed with the payment.

Netflix and Hulu, on the other hand, implement the forced continuity pattern, making the users pay for the streaming services after the trial period ends.

The Takeaway

With UX design patterns, you can deliver a consistent and pleasurable user experience across your whole website or web app. Therefore, we recommend that you build up your own list or library of such patterns, as it will help you stick to them on all subpages. Alternatively, you can choose our UX design services and let our experienced team take care of this for you!

You may also read: UI vs. UX Design: What’s the Difference?

Source:
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