Key elements and use cases
Website navigation is one of the most important tools for managing user behavior. The clearer and more convenient the navigation, the higher the probability that the visitor will find the necessary information, perform the target action and subsequently return to the resource.
In this article, we will talk about the main tasks of a designer, navigation elements and examples of its effective use.
Tasks of the designer to create navigation
What is good navigation? First of all, if the visitor intuitively feels where to click to take the next step and uses the links “automatically”. Let’s talk about the main tasks that a designer must solve so that the client can use navigation without much difficulty.
Location awareness
Some developers forget that customers come to the site not immediately on the main page, but through a keyword search, a link from a friend, and so on. Therefore, it is important to make it easier for the user to determine his location on the site – he is on the blog, on the main page or in the product catalog…
Facilitating access to “personal space”
If you need to register on the site in order to use the full functionality, you need to make this problem easier for the client. This applies to logging into your account or registering to enter your shopping cart.
Facilitating the search for information
In order for your client to find the information they need, you need to provide him with a search area or organize structured sections of the site.
Ensuring access to up-to-date information
Almost all companies involved in the sale of goods or services have a number of conditions, for example, working hours, methods of delivery and payment, current promotions and discounts, and so on.
In order for the client to have access to this information, the designer must properly structure the site and take care of the appropriate information for both new and regular site visitors.
Help with placing an order
The ultimate goal of a user of a selling site or online store is to buy a product or service. The designer must make the whole process available to the client, assist in the ordering and notify the positive result.
For information sites, the target action is to subscribe to the newsletter, turn on notifications, and so on.
The designer can solve all tasks with the help of the main navigation elements. Let’s consider each of them in more detail.
Site navigation elements
The main task of each element is to help the user navigate to the desired page and get information. What elements can and should be used to organize site navigation?
Menu
The main element in creating navigation is the site menu. This is a panel that contains links to the main sections of the resource. The menu can be presented in several forms.
Horizontal menu
The most common option. Usually located in the header of the site, it consists of buttons and links that lead to the corresponding web pages. If all sections do not fit on the panel, make a drop-down menu with all categories.
Vertical menu
On the left or right side of the screen is a list of the main sections of the site, a product catalog, and more.
Hamburger menu
Another common trick. Categories are hidden with a special icon, which is three horizontal lines. This menu view is a portmanteau of mobile development, most commonly used for sites where it’s important to save space on the home screen.
When creating a menu design, some developers make several mistakes:
- unreadable fonts and obscure category names. The user must immediately understand what the owners of the resource want to offer him. If one of the categories is not clearly indicated (for example, an abbreviation or an overly abstract concept is indicated), it is possible that the client may not receive the necessary information about the company’s conditions;
- incorrect indication. It is necessary to designate the section where the visitor is located. Typically, the active category is highlighted with a different color, underlining, or adding a graphic;
- inconvenience to use. This error concerns drop-down menus and the bulky structure of the site as a whole. Reduce the number of categories if possible. The dropdown should fit entirely on one screen so that the user doesn’t have to scroll the page to view it completely.
- The menu design should be coordinated with the general style of the site, significant sections and an active category should be highlighted, icons can be used for ease of perception.
There is another division of the menu by type – main and secondary. A secondary menu is added to the site if the resource has many sections or categorization is carried out within one page.
Icons
To facilitate the perception of information by the client, not text links are added to the page, but icons. The most common icons for navigation are magnifying glass (search), home (home page), heart (favorites), and shopping cart (checkout page). Such icons are developed in the same style and placed in the site header.
How to properly format hyperlinks:
- All links should stand out from the rest of the text. The standard technique is highlighting the link with color and underlining;
- the color of links in the active state, when hovering and clicking should be different;
- if the link is intended for an unexpected action for the client (going to another site, downloading a file, etc.), he should be warned;
- it is better to format the link not as a direct URL, but to hide it in a text that is understandable to the client
Footer
Footer or footer of the site – the area at the very end of the page, which contains links to sections of the site, contacts of the organization, as well as links to documents and rules for using the resource.
Using the footer, you can find any category on the site. The footer is designed separately, in some cases contrary to the overall style of the site.
Back button
When scrolling, a problem arises – how can the user quickly return to the top of the page without scrolling it again?
To solve this problem, special return buttons are made in the form of arrows in the “up” position. This technique is great for information sites, long landing pages, sites with an endless feed.
Calls to Action
These elements can also be considered a full-fledged navigation element. After clicking on the button or filling out the form, the user is redirected to the page for ordering or purchasing.
After the completion of the target action, it is necessary to provide the client with access to the main page, product catalog or other suitable pages.
Page 404
If the user has landed on a page that does not exist, you need to smoothly redirect the client to the main page or other sections of the site for the targeted action. To do this, make out error pages with links to these parts of the site.
Usability is the convenience of the site for the user in terms of navigation, information search and achievement of goals. The better the site is thought out, the more time the user will spend on it, and the more likely it is to return back.
Usability directly affects behavioral factors and conversion rates. Most usability errors in SEO are considered technical or internal optimization errors.
The task of the designer and webmaster is to make the site in such a way that the user would be pleased to be on it. Of course, you can’t please everyone. The perception of the site interface is a very subjective concept: what one will like, another will not like.
Content
If we have already touched on the topic of texts, we must also mention their content. The text should be simple, understandable for the user and contain the answer to the question, because of which the visitor came to the site. Synonyms are good, but in moderation.
If the site is not scientific or medical, but, for example, an online store, you should not write that “this night cream will cure epidermal xerosis”, just because “dry skin” has already been mentioned twice.
Think about whether the text is easy to read, whether it is so interesting and useful that the user spends 5-10 minutes of his time on it. From an SEO point of view, it is impossible not to touch on the re-optimization of the text with keywords. Search engines actively fight sites that have overoptimized content, as they believe that it was created to manipulate them, and not for users.
Often such texts are uninformative and cause only negative emotions among visitors. You should not neglect the keywords, but it is enough to place several occurrences so that the PS and users understand what the text itself is about.
Conversion Process
For commercial sites, it is important that the user completes his actions on the site by ordering a product or service. But few people care about making it convenient for the visitor to do this.
Often you can find a complex order form for 10 – 20 items or a condition for mandatory registration on the site. The user can spend 30 minutes of time choosing the product he needs, but leave the site at the checkout stage if he does not want to fill out the form or register.
In conclusion: there are many books, articles devoted to the principles of usability, and there is even a separate branch in computer technology. You can list the mistakes that are made in usability ad infinitum, and for each site they will be different: someone made a checkbox smaller than 16 by 16 pixels, someone does not have a “cart” or “postpone” button. Each issue affects Usability to a different extent.