UI Design Patterns: Proven solutions for common usability problems

Sonja Hoffmann Updated on 21.10.2020
11 Min.
UI Design Patterns
Last updated on 21.10.2020

How should the menu of your website be structured? Why is it easier for some website owners to get subscribers than others? What makes users fill out or ignore your website's form? As a designer, I have been dealing with questions about user interface design and web usability - you can find the answers in this article.

What are User Interface (UI) Design Patterns?

User Interface (UI) Design Patterns are libraries of usability problems that have already been successfully analyzed and solved. However, they should not be adopted one-to-one. However, they provide a comprehensive basis for harmonious user experience. UI Patterns are there to facilitate and accelerate your workflow.

Further tips on UX Design & Web Usability

As in this article described, good usability helps to guide your users smoothly through your site, your product or your brand.

Formula for UI Design Patterns

How do you know which design patterns are appropriate for your website and how to use them correctly? Chris Bank has written about this in his e-book Mobile UI Design Patterns and provides a winning procedure:

  • Problem identification: What are users trying to achieve and what problems do they encounter? Try to frame possible problems in a single sentence.
  • Solution: Did other designers already solve this problem? If so, how?
  • Real-Life-Example: Take a look at some examples and empathise with your user. Try to analyse what helped you solve a certain task. Reflect on what made you think or unsettled about the task itself. 
  • Use: Summarize the results of your analysis. How can you implement them on your website so that they offer added value to visitors? Which design patterns should you better avoid using? If you have a style guide, you should include your results there.

4 categories of UI Design Patterns

You can categorise 4 sections of UI Design Patterns, which I will briefly introduce to you in this section. Unfortunately, I will not be able to cover all UI design patterns. If you want to dig deeper into this topic, there are rather unlimited possibilities on the web. Some helpful resources on the topic of UI design patterns are:

1. Most common navigation elements

The navigation is one of the most important interaction elements for the user: It functions not only as a table of contents for your website but also helps as a point of orientation. Usually, it is placed at the top or on the website's side due to hierarchical reasons. The navigation helps to show users at a glance what they can do on our website and where they are at the moment.

Thanks to years of practice, we have internalised this knowledge. So the trend towards minimalism does not have to stop at navigation. Design patterns are therefore quite customisable - or they even have to be individualised for your website, so that they work.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Website of Castor & Pollux

Castor et Pullex have followed UI pattern rules and still tailored them to their website: A navigation that is located in the upper right screen and becomes "sticky" when scrolling. The logo that always brings the user back to "the haven" - the homepage.

A website that allows a lot of interaction and therefore seems almost chaotic gets pleasant usability by using already known design solutions.

"Sticky" navigation, as described in the example above, is a wonderful invention in web design. Not only can they be used to display impressive animations - but they also ensure that visitors quickly find their way through your website. One Pager work like a common theme: The user knows where he is and what he has already seen.

As with breadcrumbs: They don't make much sense when it comes to small websites. But when dealing with more complex websites, they are more than useful. They not only help the user to orientate himself, but also to jump back to any desired location in the navigation.

Another way to use these patterns is shown in the following example:

The creators of this website made use of mobile burger menus: on the one hand, they use minimalist navigation that is not foreign to the user to facilitate the user flow. On the other hand, they aim at creating enough space for the product itself.

screenshot-demodern.com
Sample project from Demoders

Somewhat out of fashion but at least as useful are so-called tabs in navigation. They are reminiscent of an archiving system and are quickly and intuitively understood by users. The smaller version works quite good compared to the original version.

Meanwhile, tabs are increasingly used as modal tabs. On the one hand to display content that should be linked to each other. On the other hand to save space. As modal tabs, they also have the advantage that they do sites not have to be completely reloaded to display other content. Especially in the product pages of shops based on we often WooCommerce see them. Such as in the following examples: 

UI Design Patterns: Proven solutions for common usability problems
view from Atlantic Patio

Next, a less minimalist example for comparison:

UI Design Patterns: Proven solutions for common usability problems
sample page from bamboo clothes

UI patterns are often based on interactions in the real world. Therefore it is important to never lose sight of the physical properties and/or to change them intentionally. Because this leads to the fact that the user can no longer intuitively understand these actions and their consequences. To be clear, I added the following example:

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

The physical properties of the folder structure are no longer given. The tabs now look like misplaced navigation elements. The elements' affiliation is lost somewhat - they seem almost randomly arranged.

Overflow menus and "jump to section" buttons

To make our list complete, overflow menus and "jump to section" buttons should not be missing. Jump to section buttons are usually located in the lower-left corner. They allow users to navigate back to the landing page with a single click. Especially when using One-Pagers, jump to section buttons make sense: they save time and avoid frustration by tedious scrolling.

Dropdown menus weren't built to improve your website's usability. They were developed to save space and to accommodate more content in the navigation. They also make your design look tidier and cleaner. Dropdown menus belong to the kind of design Patterns, which are often called anti-patterns. Because they don't help to navigate through the website. However, using drop-down menus is still recommended. After all, their function is known and learned. Indicators for a drop-down menu are often the downward-pointing herringbone patterns.

UI Design Patterns: Proven solutions for common usability problems
Website of Ehire

Buttons and links are intentionally only mentioned briefly in this article, as they should be sufficiently familiar to every designer. There are hardly any limits to the design and animation of buttons. Their style usually depends on the visual layout of the information offered. They should be visible in the The primary colours of the website and placed so that they are grouped with relevant content.

The same applies to links: They no longer have to be displayed in blue with an underscore, as was previously the case. But their existence must be clear and above all uniform. Extensive knowledge about buttons you get here.

Pagination, the sharing of content over several sites, is especially important for e-commerce shops that offer a large number of products. With the help of pagination, content is offered on several websites, loading time is reduced and the content is divided into easily digestible sections. Newspapers, such as the FAZ, also use Pagination to split up longer articles.

screenshot-www.faz.net-2020.06.13-15-49-43
Example of the FAZ

Also, the so-called "fat footer", which has become a trend in recent years, is now one of the learned UI patterns. Here you can, for example, link to frequently visited subpages, store your contact data and display legal content that has no place in the primary navigation. 

The footer then partly functions as a differently structured table of contents of your website. But it can also serve as a kind of teaser for further information. Once the user has scrolled through your website, the footer can offer him/her relevant content - such as interesting articles, social media links, et cetera - that will keep him/her occupied with your product.

2. Input & output: Contact and subscribe Forms

Apart from data protection guidelines, it is also worthwhile to focus on user needs. Especially on mobile devices, an input form can quickly lead to frustration: The already small screen, the physical environment during use, the time aspect and a possible unstable connection can quickly become a nerve-wracking test. Fortunately, there are some design patterns that have already dealt with exactly these problems.

Tip:

The same applies here as generally on the web: As short as possible, as long as necessary. Studies have shown that adding useless questions is a collapse in participation and can cost a lot of money.

In the following I have created a fictitious form to show you the most important principles:

Form
Principles for input forms
  1. Eye-tracking tests have found that we process information faster when it is arranged from top to bottom instead of left to right. Therefore, it is advisable to place the heading above the form field and create only one column.
  2. It is helpful to give the user a sample input in predefined placeholders - this way the required information is visualized in advance. You should avoid fragmented number entries because they only complicate the input. In addition, they should be programmed in such a way that they are tolerant of spaces.
  3. Error handling is an important and complex topic. The asterisk and the red-framed input field, for example, are common UI patterns. Ideally, the fields should be self-explanatory. Nevertheless, you should always expect that something does not work. Therefore always offer various help options. There are several possibilities for this: An info button, which offers help when hovering. Or the popup of small modals if the form is not sent successfully.
  4. It makes sense to give feedback already during the input. In the case of passwords, it is useful to give the user a qualitative assessment of how secure the password he or she has chosen is. 
  5. The multi-step form has several psychological advantages. First of all, it has a clearer and less dissuasive effect. If the user is then also shown where he is in the form using an indicator (here the loading bar), he knows exactly what to expect. The probability that he will break off prematurely is lower. Personal information should always be requested at the end of the form. If your website visitor has already filled out the form to a large extent, it will be harder for him to give up the time he has already invested without results. It is also advisable to only ask for information that you need and to give reasons for the request. If you ask your users to sign up for something, it is advisable to state a benefit for them à la "Always get the best deals first". In the last step, you should give a small overview of what happens next - and what the user can expect when.

Besides, your forms should include automatic filling (by data stored in the browser) and information recognition (such as adding the city after entering a postal code). Especially in WordPress, many forms have this already included by default. 

You should avoid the use of captchas, if possible, or at least keep it to a minimum. According to of this study captchas can lead to 30 per cent less interaction with the form.

3. Structuring your content

As a website operator, you should pay special attention to how the content of your website is structured: Does it support your visitors to find their way through your website? Are your contents easily accessible and can their hierarchy be understood? 

The question of easy accessibility particularly appeals to users who view your website under changed conditions. For example, people with colour vision disorders and visual impairments. If you would like to deal with the topic of accessibility and freedom from barriers in more detail, you will find further information here: 

If you have a blog or an online magazine, you probably know the problem: You have a lot of interesting content that you would like to offer as evenly as possible. A suitable design pattern for this is a so-called article list. Using this, you categorise your content and show only a small part of it. This way you can show many topics at a glance without flooding your users with information. A nice example shows RAIDBOXES:

RAIDBOXES  WP unboxed
View of the WordPress magazine wp unboxed

This division allows the user to browse the entire content by areas of interest and thus find what interests him more quickly.

To offer certain content without distraction, you can use modal boxes. These boxes are placed over the rest of your webite's content and allow the user to concentrate only on the content. This can be necessary and important. Note, however, that these modals are also more of an anti-pattern: Basically, they block the user's freedom of action as long as the modal is open.

Used correctly, however, modal boxes can help your visitors understand your content better. However, too frequent or seemingly useless modal boxes can quickly cause frustration helplessness.

Lightbox and fullscreen mode also belong in this category. On the one hand, they allow your user to take a closer look at selected content. On the other hand, they make any other interaction impossible. Therefore it is always important to offer at least one vanishing point. Especially well known is the click on an X in the upper right part of the picture or the click outside the box to close it again.

Slideshows are also a popular way of displaying images. A distinction is made between auto-play and manually navigated slideshows. Galleries are often listed as thumbnail images and then enlarged using slideshows and/or lightboxes.

Here you should act primarily according to function: What kind of images do you represent? Do they have to be available as fullscreen? And what is more important: your content as a whole or the individual images? Is it worth resorting to other possibilities - such as a magnifying glass that enlarges your images when hovering? The latter is especially popular in e-commerce.

Screenshot Unsplash-UI Design Patterns
Thumbnail view of unsplash.com

unsplash.com uses a mixture of picture gallery and lightboxes. However, the images are not displayed as thumbnails. Why? Unsplash is a platform that only offers images for download. This means that users must be able to decide for or against the image at first glance. To decide, image resolution must be relatively good. Thumbnails would be too small for that. Clicking on each image individually or navigating through a slideshow would minimise the efficiency of the website system.

Throughout the whole implementation and conception process, you must never lose sight of the question of utility/value-added and importance.

4. Use social channels

This includes patterns that help to guide users to your social media channels and/or facilitate social interaction. You can find detailed examples of these patterns here .

Final Thoughts

In conclusion, I can recommend two approaches in particular. First: Visit and analyse as many websites as possible to gather inspiration: How have other designers solved or not solved certain problems? What frustrates me when I surf the web? When was the last time I was positively surprised - and why? 

Second, always remember that you are not the user. The visitors of your website think surprisingly different than you do. They may not know your product yet. Therefore, conduct several tests to assess how the usability of your site product is.

What questions about UI Patterns do you have?

Feel free to use the comment function. Would you like to be informed about new articles and tips about web design and development? Then follow us on Twitteror Facebook , or subscribe to our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann has specialized in web and app design and development. Her focus is on gamification and the exploration of user motivation and experience, coupled with a passion and curiosity for technological trends.

Related articles

Comments on this article

Write a comment

Your email address will not be published. Required fields are marked with * .