Web Interface  |  Patterns

Navigation

This section is about which navigation patterns work and which do not.

The menu at the end of a page or application interface is an important part of navigation. If the user scrolls to the end of the page, it's good to have a map of actions instead of a dead end. An expanded menu in the footer does just that and helps the user go further around the site or app.

Therefore, you should not ignore the footer menu and make it truncated and simple. It is better to expand all possible items of navigation and show them at once. This way it will be easier for the user to find something inside the site.

Footer menu simply duplicates the main menu.
The items of footer navigation are expanded and show a map of the site.

02Sticky navigation

Many sites and applications use sticky navigation. When users scroll through a page, the menu is fixed at the top edge of the browser and moves with the content.

Sticky navigation is about solving a non-existent problem and creating a new problem.

1. It overlaps the content. Especially on small screens. It's terrible.

2. Users already know that the menu is at the top of the page and will scroll up if necessary. This is not a problem.

3. Content should have call-to-action or tell users to navigate all the way to other sections of the site or app. If the content doesn't contain onward direction, the navigation won't help.

4. At the bottom of the page should be pointers to where the user should go next. It's a good pattern to show the user a map of where to go next instead of a dead end.

So it is better not to use sticky navigation in any case or in any way.

Sticky navigation is always a bad pattern.
Navigation that doesn't change position when user scrolls is a good thing.

03Burger menu icon

Users don't recognize the "burger" icon as a control to show the menu. And they can't find the navigation on the site or in the app because of it. Despite the fact that this has long been a common pattern of showing hidden navigation.

This problem is especially evident in desktop versions of sites, when users do not expect any hidden menus and the shape of three dashes "burger" just do not perceive them as a control. Expecting a normal, expanded menu on the page of the site.

On mobile versions, the "burger" icon is a more expected pattern, but nevertheless can also go unnoticed. In reality, sites drop significantly in the number of views and conversions within the site if the "burger" icon is not emphasized enough and looks ambiguous.

If you add the word "Menu" or something similar next to the "burger" icon, the problem is solved. The label gives unambiguity and clearly indicates that it is a menu.

The three dashes are incomprehensible to users.
The menu icon with the label gives an unambiguous understanding.

It is bad when there is no navigation at the end of a blog post or article. It's always better to navigate to the next or previous post. It can be just a header with an arrow or even a header with the image that tells the user what to read next.

In fact, this is true of almost any content on the site, not just blog posts or other texts. It's always good to show the user related pages of the site or something else on topic.

This navigation greatly increases page views and visitor engagement.

It's bad when there's a dead end at the end of a post or article.
It's good to have navigation to the next or previous entry at the end of the page.

05Mega menu

A good solution is to use Mega menu instead of dropdowns, especially if they are multi-level. Mega menu immediately shows all internal navigation items and helps you conveniently group them into specific categories. Which makes it much easier to navigate the site. The user always has a map at hand.

Also, there is no problem if the mega menu has two or more rows of links and categories. It's still better than wandering through dropdowns.

Dropdowns for navigation are not the best solution, especially if they are multi-level.
Mega menu is better than dropdowns.

06Search is the best navigation

The best way to navigate the site is to search. Filters, categories, and sorting are secondary and should only help the user filter out the results he finds.

Even if the page contains a small number of elements, the search will be relevant the user will find what he needs faster and easier.

Display items without search only with navigation by category.
Display items with search and in addition navigation by category.