In UX Design

UI Design Patterns

What are UI design patterns? An essential guide

Do you know why the best user interfaces all behave in a familiar way? The reason is UI design patterns. UI patterns are vital for designers because they give us proven ways to create an intuitive user interface without having to reinvent the wheel.

In this guide, I’ll explain what UI design patterns are and why they’re more important than ever for web design. Then, I’ll explain how to use them to create an outstanding website and outline the 12 key UI patterns together with real-world examples of these patterns in action.

What is a UI design pattern?

A UI design pattern is a tried and tested method to solve a common problem. A hamburger icon is an example of a popular UI pattern. We know the three lines symbolise a menu and we automatically tap it to explore the site. This solves the problem of providing navigation options when there’s limited screen space.

UI design patterns can be customised to fit your user’s needs and the function of the site. They usually follow the same formula:

Problem– What’s the user trying to do?

Context– When should the pattern be used?

Solution – How will this pattern solve the problem?

Examples– When has the pattern been used?

You can find collections of patterns for your project in UI pattern libraries. Good ones include:

UI-Patterns – ui-patterns.com

UIpatterns –  UIpatterns.io

Welie – Welie.com

Why do you need UI design patterns?

You might be wondering why you need to rely on UI patterns when designing your interface. Why not just work it out for yourself? After all, won’t this create a more unique product?

Unique, maybe. But not better. Here’s why:

As technology evolves, users’ expectations are higher than ever. If your UI isn’t as intuitive as it can possibly be, users will give up on your site and click to a competitor. So relying on basic design principles alone won’t cut it.

Humans are hardwired for pattern recognition. We intuitively look for patterns when we visit a website. Employ them in your design and you’re making things super-easy for users.

UI patterns will save you time, too. They cut out the need for you to work on the best way to perfect your design, and the need for you to test different possible solutions.

While patterns might make your UI behave in a way that’s familiar to users, they won’t curb your creativity. They just provide the UI’s basic function, leaving you to give the site a unique appearance.

How to use UI patterns

The first step is to list the problems your UI needs to solve. It’s helpful to group these into your interface’s 3 core functions:

Input and output: how the user adds info to the website and gets feedback.

Navigating: how the user finds their way around the site.

Content: how each page’s content is laid out so your user can access it.

For each problem, browse your preferred UI pattern library’s categories and choose the pattern that’s the best fit.

Next, take a close look at the pattern’s examples, to see how it can be customised for different websites. It’s a good idea to research live websites as well to experience the pattern from a user’s perspective.

The last step is to recreate the pattern in your own interface. Adapt the pattern so it’s consistent with the website’s elements, meets the site’s business needs and the needs of your target user.

The most Important UI design patterns

Next up, here’s my rundown of the key UI design patterns. For each of your UI’s 3 core functions, I’ve listed some of the most frequently used patterns for improving UI performance:

Input and output

Lazy Registration

Lazy registration lets users explore a website before being prompted to sign up. Users have the chance to get engaged with the site without interruption, so when sign-up is requested it’s seen as a natural step in the process not an annoyance. A great example of this pattern is 500px. This website lets users browse featured photos, with sign up an optional CTA button.

web.500px.com

Lazy registration is perfect for ecommerce sites as it lets users add items to the cart before giving any personal details. And you might choose this pattern if adding personal info is a big step for users, say signing up to a pre-paid annual contract.


Steps left

Steps left is a simple progress bar that shows the number of steps needed to complete an action, with the user’s current step highlighted. As the user moves on to the next stage, their progress is updated. You’ll only need the pattern if users will enter data over more than 2 steps.

Steps left can motivate users because it gives them a visible end goal to aim for. The pattern is important for ecommerce sites at the critical checkout stage because it stops users getting frustrated and abandoning the process. Since major sites like Amazon feature steps left, users expect to see it at any online checkout.

www.amazon.co.uk


Forgiving format

Forgiving format lets users enter data in different formats and intelligently interprets it. This pattern is useful when it’s not clear which format is needed for a data field. For example, a date of birth can be entered with extra whitespace, hyphens or forward slashes.

Forgiving format can present a challenge for you as a designer to programme all possible formats that could be used, but it can have a real benefit for users. It helps them focus on their goals without the frustration of having to enter data in a specific way.

Merging different criteria into a single search field also means you don’t have to clutter the UI with several fields. Airbnb uses this pattern for a search function that’s so flexible users can find results by country, city and even an address.

www.airbnb.co.uk


Input feedback

Input feedback is a way to let users know when a task (like filling in a form) has been successfully completed. It can also alert the user to any mistakes they’ve made.

Feedback messages need to grab the user’s attention, so it’s a good idea to use a strong colour or a bold icon. Ideally error messages should appear next to where the error occurred, and clearly explain how to correct it.

The more specific the message is, the easier it is for the user to correct. Dropbox’s sign-up is a great example of input feedback. Mistakes are simple to fix thanks to messages that can even pinpoint a missing character, while the friendly tone engages the user.

www.dropbox.com

Navigating

Dropdown menu

A dropdown menu is a list of options that expand below a single block of text when users click on, or hover over that text. Users can then select an option to be taken to other places on the site.

Dropdown menus can improve click-through rates because they’re familiar to everyone and easy to scan. Dropdowns are also handy for forms, letting users choose an element from a list instead of typing it manually.

This pattern is less effective for longer lists though, as it forces users to scroll. If you’ve too many options or they run over different categories, consider using an accordion menu instead. Union Coffee’s website features simple and scannable dropdown menus that make navigating the site a breeze.

unionroasted.com


Breadcrumbs

Breadcrumbs are a trail of links indicating the current page and the pages further up the site’s hierarchy, usually going all the way back to the homepage. They’re typically listed horizontally near the top of the page.

Breadcrumbs can be great for your UI because they let users orient themselves within the site without taking up too much space. They also help users get a feel for the site’s hierarchy and reduce the number of actions they need to take to get back to a previous page.

Keep in mind breadcrumbs are a supplement to your main navigation, not a replacement. This is clear on Amazon, where breadcrumbs are concisely listed just below the navigation bar. Eionet on the other hand, uses breadcrumbs that distract from the content and confuse an already cluttered layout.

www.amazon.com

www.eionet.europa.eu


Navigation Tabs

Tabs are a series of buttons which give the user a selection of topics, whilst at the same time shows them which section they’re currently viewing.

Tabs let users quickly jump between sections, so they’re a good idea if the user needs to weigh up different options before choosing one. Because they resemble paper folders in a filing cabinet, most people will instinctively know how to use them.

It’s a good idea to keep the labels of each tab concise so users can access the content at a glance. The Invoice Machine uses well-designed tabs as primary navigation. These make it easy for the user to access the site’s info and their visual appeal enhances the brand.

invoicemachine.com/help


Accordion menu

This is a vertical list of sections, each of which can expand when clicked to reveal a set of sub-sections. As one section expands, the others are collapsed.

Accordion menus are great for smaller screens because they present a full range of navigation options without taking up too much space. Accordions are sometimes an alternative to navigation tabs if you need to display info vertically instead of horizontally (say if you’re designing a mobile app). They’re also an intuitive way to present FAQ’s. Tesco’s FAQ page is a great example of a wealth of info made accessible via an accordion.

www.tesco.com/help/

Content

Progressive disclosure

This pattern breaks info into a sequence across different screens, at each stage presenting the user only with the info that’s relevant to their current activity.

Progressive disclosure is helpful to walk a user through complex processes, letting them focus on the task in hand. It’s also handy if your website has a process your user might not be familiar with. One drawback of progressive disclosure is there’s a risk of losing users if you add too many stages.

The pattern is often used in step-by-step guides, but at its most basic works well as a ‘read more’ link on a blog where content’s initially presented in easy-to-scan excerpts. The Adventure Blog uses this feature to great effect, making it easy to browse articles from their homepage.

adventureblog.net


Cards

Cards are containers for bite-sized snippets. Often they’ll contain both text and an image, and sometimes a CTA button. Each card can be clicked on to reveal more info, either as a link to another page or an expanded description.

Cards are a good way to present info in an organised way so your layout doesn’t get too cluttered and confusing for the user. Canopy.co has a clean, minimal homepage thanks to the cards pattern.

canopy.co/

Cards are very flexible from a design point of view, too. You can stack, fold, flip or arrange them in any number of ways. Cards are ideal for responsive design as they’re self-contained elements that can be rearranged to fit different screen sizes.


Carousel

Carousels or sliders are a series of images shown in succession. Carousels can be a great way to tempt users with a selection of products that can’t be viewed all at once. And you might consider a carousel if the site needs to showcase visual products. This is done very effectively on fashion photographer Rankin’s website.

rankin.co.uk/home/

Carousels need to be treated with care though, because they can distract the user from written content and navigation, like this disorienting slider on Forever 21’s homepage. There’s also the chance that key info on the carousel itself won’t be seen because the user will scroll past the carousel before it moves.

www.forever21.com/uk/shop


Favourites

The final pattern on our list allows users to choose certain items to review or buy later. This pattern is ideal for ecommerce sites where users can save and edit a personalised selection of their favourite products.

The pattern can improve conversion rates, as it gives users easy access to products they want (including ones they might have otherwise forgotten about). Favourites can encourage browsing too, because it appeals to our instinct to collect things. It also motivates users to keep coming back to the website.

Keep in mind the pattern’s only effective if you make the process of adding favourites simple so it won’t disrupt browsing. Etsy, for example, uses a convenient favourites icon that’s clickable direct from the search results.

www.etsy.com/uk

So there you have my guide to UI design patterns, why they matter, and how you can use the best patterns to improve your website. I hope you’ve found it a helpful resource for your next project. What did you think of my list? Got a UI design pattern you think is crucial to web design? Drop us a line. We’re always keen to hear about new UI solutions.