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

What are UI design patterns?

User interface (UI) design patterns are libraries of usability problems that have already been successfully analyzed and solved. However, these should not be adopted one-to-one. However, they provide a comprehensive basis for a harmonious user experience. UI patterns are there to make your workflow easier and faster.

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 worked out the following procedure in his e-book Mobile UI Design Patterns:

• Problem identification: What is the user trying to achieve on your website and what problems are they encountering? Try to formulate the problems in a single sentence.
• Solution approach: Have other designers already solved this problem? If so, how?
• Real-life example: Look at examples and go through them as a user. Try to analyze what helped you to solve a certain task. Think about what made you think - or perhaps even unsettled you. 
• Use: Summarize the results of your analysis. How can you implement them on your website so that they offer visitors added value? Which design patterns should you avoid using? If you have a style guide, you should include your results in it.

4 categories of UI design patterns

UI design patterns can be divided into four categories, which I will briefly introduce to you in this section. Unfortunately, I won't be able to cover all UI design patterns. If you would like to delve deeper into the topic, the web offers you almost unlimited opportunities to read more. A few helpful resources on the topic of UI design patterns are:

• Extensive UI design pattern library
• 40+ helpful resources on UI design patterns

1. most common navigation elements

The navigation is one of the most important interaction elements for the user: it not only acts as a table of contents for your site, but also as an orientation aid. The fact that it is usually placed at the top or to the side was originally mainly for hierarchical reasons. With the navigation, we show the user at a glance what they can do on our site and where they are currently located.

Thanks to years of practice, we have internalized this knowledge to such an extent that the trend towards minimalism does not have to stop at navigation. Design patterns are therefore fully customizable - or even need to be individualized for your site to work.

Castor et Pullex have adhered to UI pattern rules and yet tailored them individually to their site: A navigation that is located in the top right-hand screen and becomes "sticky" when scrolling. The logo that always brings the user back to "the safe harbor" - the homepage.

A website that allows a lot of interaction and therefore appears almost chaotic is given a pleasant usability through the use of familiar design solutions.

"Sticky navigations, as described in the example above, are a wonderful invention in web design. Not only can they be used to display impressive animations - they also ensure that visitors to your website get from "A to B" more quickly. With one pagers, they also function like a red thread: The user knows where they are and what they have already seen.

It is similar with breadcrumbs: They don't make much sense for small pages. On more complex pages, however, they can work wonders. They not only help the user to find their way around, but also to jump back to any location in the navigation.

You can see another way of using these patterns in the following example:

The creators of this site have made the knowledge of the mobile burger menu their own: on the one hand, to facilitate a minimalist navigation of their site that is not alien to the user. On the other hand, to give their product enough space to be in the foreground.

Somewhat out of fashion - but at least as useful - are so-called tabs in the navigation. They are reminiscent of an archiving system and are quickly and intuitively understood by users. Here, too, what has been learned works just as well in the slimmed-down version as in the original version.

In the meantime, tabs are increasingly being used as modal tabs to display content that is to be linked to each other in a more space-saving manner. As modal tabs, they also have the advantage that pages do not have to be completely reloaded to show other content. We often see them on the product pages of WooCommerce-based stores in particular - as in the following examples: 

Next, a less minimalist example for comparison:

UI patterns are often based on real-world interactions. It is therefore important never to lose sight of the physical properties and/or to change them intentionally. This leads to the user no longer being able to intuitively understand these actions and their consequences. To illustrate this, I have adapted the example above:

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

Overflow menus and "Jump to Section" buttons

To complete our list, overflow menus and "Jump to Section" buttons should not be missing. "Jump to section" buttons are usually located in the bottom left-hand corner. They allow the user to navigate back to the top of the page with a single click. Jump to section buttons are particularly useful for one-pagers: they save time and prevent frustration caused by tedious scrolling.

Drop-down menus actually have their origins less in improving the usability of pages. They were developed to save space and accommodate more content in the navigation. They also make your design look tidier and clearer. Drop-down menus are one of the design patterns that are often referred to as anti-patterns - because they don't really make it easier to navigate through the website. However, it is still advisable to use drop-down menus. After all, their functionality is known and learned. Indicators of a drop-down menu are often the herringbone patterns pointing downwards.

In this article, I will deliberately only mention buttons and links briefly, as they should be sufficiently familiar to every designer. There are virtually no limits to the design and animation of buttons. Their style usually depends on the visual layout of the information offered. They should be clearly visible in the primary color of the page and placed so that they are grouped with the relevant content.

The same applies to links: They no longer have to be displayed in blue with an underline, as they used to be. But their existence must be clear and, above all, consistent. You can find extensive information about buttons here.

Pagination - the sharing of content across multiple pages - is primarily important for e-commerce stores that offer a large number of products. It is used to offer content on several pages, shorten the loading time and divide the content into easily digestible sections. Newspapers, such as the FAZ, also use pagination to split up longer articles.

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

The footer then functions partly as a differently structured table of contents for your page. However, it can also act as a kind of teaser for further information. Once the user has scrolled through your page, the footer can offer them relevant content - such as interesting articles, social media links, etc. - that further engage them with your product.

2. input & output: Contact and subscribe forms

Apart from data protection guidelines, it is also worth focusing on user needs here. 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 be a nervous ordeal. Fortunately, there are some design patterns that have already dealt with precisely these problems.

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

1. Eye tracking tests have shown that we process information faster when it is arranged from top to bottom rather than from left to right. It is therefore advisable to place the headline above the form field and only create one column.
2. It is helpful to provide the user with a sample input in predefined placeholders - this visualizes the required information in advance. You should avoid entering numbers in pieces, as they only complicate the input. They should also 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 input field with a red border have proven themselves as UI patterns here. Ideally, the fields should be self-explanatory. Nevertheless, you should always expect that something will not work. It is therefore essential to offer various help options. There are several options for this: An info button that offers help when hovering. Or pop up small modals if the form is not sent successfully.
4. It is a good idea to provide feedback while the user is entering the password. For passwords, it has also proven useful to give the user a qualitative assessment of how secure the password they have chosen is. 
5. The multi-step form has several psychological advantages. First of all, it is clearer and less daunting. If the user is also shown where they are in the form by means of an indicator (in this case the loading bar), they know exactly what to expect. They are less likely to abandon the form prematurely. Personal information should always be requested at the end of the form. This is because if a person has already completed most of the form, it is more difficult for them to give up the time they have already invested without results. It is also advisable to only ask for information that you actually need and to justify your request. If you ask your users to sign up for something, it is advisable to specify a benefit for them, such as "Always get the best deals first". In the last step, you should provide a brief overview of what will happen next - and what the user can expect and when.

In addition, automatic filling (using data stored in the browser) and the recognition of information (such as adding the city after entering a zip code) should be integrated into your forms. Many WordPress forms already include this by default. 

If possible, you should avoid using captchas or at least keep them to a minimum. According to this study, captchas can lead to 30 percent less interaction with the form.

3. structuring your content

If you run a website, you should pay particular attention to how the content on your site is structured: Does it help your visitors find their way around your site? Is your content easily accessible and can its hierarchy be understood? 

The issue of easy accessibility particularly appeals to users who view your site under different conditions. For example, people with color vision problems and visual impairments. If you would like to delve deeper into the topic of accessibility, you can find more information here: 

• Browser extension for testing and possible problem detection
• Accessibility Guidelines for a UX Designer

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 the so-called "Article List". Here you categorize your content and only show a small section at a time. This allows you to show many topics at a glance without flooding your users with information. Raidboxes shows a good example here:

This division allows the user to skim the entire content according to areas of interest and thus find what interests them more quickly.

You can use modal boxes so that you can offer certain content without distraction. These overlay the rest of your page and allow the user to concentrate only on its content. This can be necessary and important. Note, however, that these modals are also anti-patterns: In principle, they block the user from any room for maneuver as long as the modal is open.

Used correctly, however, modal boxes can help your visitors understand your content better. However, modal boxes that are triggered too frequently or seemingly for no reason can quickly cause frustration and a feeling of 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. That is why it is always important to offer at least one vanishing point. Clicking on an X in the top right-hand part of the image or clicking outside the box to close it again are particularly well known here.

Slideshows are also a popular way of displaying images. A distinction is made here 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 the function: What kind of images are you displaying? Do they necessarily have to be available as a full screen? And what is more important: your content as a whole or the individual images? Is it worth using other options - such as a magnifying glass that enlarges your images when hovering? The latter is particularly popular in e-commerce.

unsplash.com uses a mixture of image 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 be able to make this decision, the image resolution must be relatively good. Thumbnails would be too small for this. And clicking on each image individually or navigating through a slideshow would minimize the efficiency of the page many times over.

Throughout the entire implementation and design process, you must never lose sight of the question of benefit/added value and importance.

4. use social channels

This concerns patterns that help guide your users to your social media channels and/or make social interaction easier for them. You can read detailed examples here.

Conclusion on UI design patterns

In conclusion, I can recommend two main approaches. Firstly, visit and analyze 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 net? When was the last time I was positively surprised - and why? 

Secondly, always remember that you are not the user. The visitors to your website think surprisingly differently from you. They may not yet be familiar with your product. Therefore, repeatedly carry out various tests to assess how usable your site actually is.