Usability for Dummies. Part 3: what should be the navigation

Read the first part of the article.

Read the second part of the article.

Site navigation system should be clear and convenient. Good can be called a navigation, which visitors of the resource use automatically, without paying conscious attention to it. Something like this you use the mouse: it attracts attention only if it does not work correctly. How to make navigation comfortable and not requiring the conscious attention of visitors? Read below.

Observe the order of the main and secondary pages.

If the buttons of the secondary pages precede the buttons of the main ones, this is misleading the user. For example, one of the variants of Digg service design suggested the following button layout:

The "My News" button leads to a secondary page, which is available only after registration or authorization. The "Top News" button leads to the main page, so it must precede the "My News" button.

Representatives of Western culture browsing sites from left to right from top to bottom. The button to the left and / or above precedes the button to the right and / or below.

Navigation menu: vertical or horizontal?

In some situations, it is appropriate to use the vertical menu, in others - the horizontal one. Designers need to understand what type of menu is appropriate in a given situation.

Visitors more quickly perceive the vertical menu. Due to the small distance between the elements, users scan two or three buttons in one visual stop. The vertical menu occupies the left column of the page, so you have less space for content. The upper elements of the vertical navigation are clearly visible to the user, but the lower ones remain hardly noticeable.

Visitors perceive the horizontal menu more slowly. The buttons are located from left to right, so a person is more accustomed to read them and not to scan patterns. The user perceives one button for one visual stop. All elements of the horizontal menu are clearly visible. Vertical navigation leaves more free space on the page. This means that you can offer the user more content without having to scroll.

Remove vertical bars from horizontal menu.

Designers use vertical bars in the menu to visually separate elements.

There is an easier way to visually separate menu items. Enough to increase the space between them. This way of separating menu items increases the speed of perception, as the user makes fewer visual stops.

Menu accordion: a simple way to pagination

Page pagination is suitable if you offer the user a large amount of different materials. And when you publish one great material, it is better to combine the accordion menu with page pagination:

To read the new content, the user does not need to load the next page. Thanks to the AJAX module, the accordion menu loads content on the open page.

How to make endless scrolling user friendly

The following guidelines will help you increase the effectiveness of pages with endless scrolling:

  • When scrolling endlessly, the top navigation menu should be accessible to the user. This recommendation is implemented in Facebook.
  • Show the user that the content is loading.
  • Tell the visitor how much content is left.
  • Let me go back to the starting point with one click.

Where should be the button "Contact Information"

All menu items are combined into two categories: informational and promotional. The action follows after studying the information. Therefore, the first should be information elements: "about the company", "products", "blog", etc. Promotional items, such as "subscribe" or "contact", should complete the menu.

Carousels, Rotators, Sliders: Avoid Common Mistakes

Designers love the carousel for visual appeal. The following are typical errors that reduce the effectiveness of these elements:

  • Continued content rotation when a user views one of the announcements.

When you hover the cursor on the carousel, the movement should switch to manual mode.

  • Rotation of one element of the carousel

Users perceive the content displayed in the carousel in clusters of several elements. If the person has not found the topic of interest, he presses the scroll button to view the new content. If in the manual scrolling mode the carousel displays only one new element, this leads to a loss of time.

When manually scrolling the carousel, the whole row should change.

  • Lack of progress indicators

The user wants to know how much content he has already viewed and how much is left. Therefore, in the carousel must be signs of progress.

  • Infinite scrolling

Users do not like to scroll around the carousel forever. Therefore, when you finish viewing the navigation button should be inactive.

How to fit everything you need in the header of the site

Typically, the site header includes a logo, menu buttons, a registration and authorization block, and a search field. The header takes up part of the page, taking away space from the content. Using the recipes below, you will make the cap more compact without loss of functionality and visual appeal:

  • Use the elastic search field
  • Combine registration and authorization buttons
  • Put the logo on the navigation bar
  • Radical way: hide the navigation buttons
  • Use the fish eye effect

How to make the vertical menu convenient

The vertical menu is convenient in that the designer can place as many links as possible. The user can scroll the page to see the items at the bottom of the vertical menu. However, this is true only if the user is looking for something specific. Otherwise, it simply does not scroll the page.

To solve this problem, leave only the first order links in the vertical menu. Links of the second order should be displayed by clicking.

External links should open in a new browser tab.

Internal links should open in the existing tab, and external in the new. First, it is user friendly. Secondly, it keeps the user on your site.

Combine the drop-down menu

A standard drop-down menu may confuse the user. He is forced to select each category and study second-order links. The combined drop-down menu displays all items of the second order when you click on any category. This makes navigation more convenient.

Carousel should have easy navigation.

The average CTR of the content displayed using the carousel is 1%. This is too low, as carousels are usually the most visually appealing elements on the main pages.

The problem is in the carousel menu: it is often inconvenient and uninformative. Navigation elements must be large, and the user must know what content he chooses.

Automatic mode - the main criterion for the quality of navigation

If users do not think about how to find the necessary section of the site, it means that you have made a good menu. To help visitors travel the resource, choose the correct order of the main and secondary elements. Consider which menu fits your resource: vertical or horizontal. Make the site header small and convenient. Use the combined drop-down menu, display the secondary elements of the vertical menu by clicking.

Watch the video: Part 3 of 3 - Navigating your MyCharity Account (March 2020).


Leave Your Comment