Navigation is simple and easy to understand. My travel navigation

In this article, we will talk about what good site navigation should be and how to make it really effective. The material is useful primarily to those who want to create their own website.

Navigation is the methods, tricks and special elements that allow you to move between its pages.Everything depends on how well it is thought out: both the conversion and the success of the resource promotion.

This can be compared to the layout of a house. If the layout is good, then you can easily find the room you need, do not confuse the entrance to the kitchen with the entrance to the living room. If there are a lot of moves, corridors and doors, then you can get lost in such a house.

Likewise with websites. If the navigation is bad, there are a lot of links that do not lead to the right place, or it is not clear where they will lead – users are confused and cannot find the necessary pages and the information they need.

For search engines, good, logical navigation is also important. The search engine needs to understand the role of this page on your site. Also, well-designed navigation improves behavioral factors, as users quickly find the information they need.

Basic elements and navigation techniques

I suggest that you first familiarize yourself with the main elements that help you navigate the site.

Navigation in a broad sense includes many techniques and elements, the main task of which is to allow the user to go to the desired page and get acquainted with the information.

One of these elements, which has long been mandatory on the site, iscompany logo, when clicked, we get to.

For example, here it is enough to click on the logo to be back on the start page.

This technique is already familiar to users, and allows you to return to the home page from any page of the site.

The second "classic" element isTop Menu.

It is located under the header and consists of buttons or links that lead to the main sections of the site. Such a menu can be more complex, with drop-down lists that lead to subsections or individual pages.

In the last few years, another technique has become popular - this ishamburger menu, in which all links are hidden in the schematic three horizontal dashes. This element first lived only on mobile devices, but now it is increasingly common on desktop versions of sites:

Also on some sites you can seevertical menu. It is used most often if the top menu could not fit everything you need, or if you need to make it easier for users to navigate to some headings.

Or maybe it lives on its own, without a horizontal menu at the top of the page. And there may even be several such menus, as here - on the left and on the right:

(micro markup) is another navigation element that not only sets the page hierarchy, but also makes it easy to return to the desired section, or to the main one, from any page:

Links within articlesto other pages of the site - these are also navigation elements. For example, these are:

They not only help you move on, but are also good from an SEO point of view - this technique allows you to increase the number of pages viewed.

Links in footer(footer, footer) is another navigation element. Usually, a link to contacts, a user agreement, site usage rules, etc. are placed in the footer. And sometimes you can see a lot of links to different pages of the site, grouped into categories:

On long landing pages, as well as some sites, you can see at the topprogress bar, which shows how far you have scrolled the given page:

The progress bar can also be found in the application and registration forms, if the form is long and broken into several steps.

This makes it easier to navigate the page itself - you can see how much to the end. It is also a small psychological trick that pushes the visitor to finish what he started.

On long pages and on landing pages, you can find another great navigation element -button to quickly return to the top:

This button allows you to quickly return to the top of the page.

To keep the top menu, contacts or other important information always in front of your eyes, the so-called “sticky header”, or “sticky navigation bar” is used. It constantly stays at the top of the page while the user scrolls down.

Here we always have a search in front of our eyes, a logo with the ability to return to the main page, and a small menu.

How to use all these elements with sense and benefit?

How to make site navigation easy

When working on navigation on your site, remember and try to use one simple rule:from the main page to any page of the site, the user must reach a maximum of three clicks. And vice versa.

1. Position the homepage logo in the top right corner.

This is a generally accepted standard, and for good reason: it is in this place that the logo immediately catches the eye. And the user does not have to look for what to click on to return.

2. Consider Primary and Secondary Elements.

The top menu can be primary. Secondary - sidebar, additional links inside the text, in the footer. Breadcrumbs can also act as secondary navigation elements.

Here, the top menu is the main navigation element, and breadcrumbs are auxiliary.

Move the most important sections of the site to the main menu.

3. Consider which pages can be grouped.

If everything does not fit in the top (or side) menu. For example, you can often find an option when some sections of the site are hidden under one button "Information", "More", "More", etc.

Mail.ru mail thus "hid" the company's projects:

4. Find a good place for informational links.

Information links are such as "Contacts", "Public Offer" and the like. The user must find these links on all pages of the site. Therefore, the most suitable place for them is the footer (footer).

Here is a vivid example of such placement of informational links:

5. Don't Forget Design.

All navigation elements should be clearly visible, and it should be clear that a link is a link and a button is a button. Highlight the links with color, make them bold or underline. It is important that the user understands that there is a clickable element in front of him, which will send him to another page of the site.

Here I cannot call the menu successful. Too small font. But here there is a different approach - right from the main page, you can go to the catalog of your favorite brand or view discounts:

6. Don't open pages in new windows.

This confuses users.

7. Additional elements.

Consider additional elements like"Related Products", "Recommended Content" or "Related Articles", that will help the user find what they need faster.

8. Hints.

Simplify navigation withtooltips to help the user understand what the button or icon is for:

9. Leave the menu in a visible place.

Try to make sure that the visitor does not have to look for a new menu on each page. Do not change or remove menus on secondary pages.

10. Don't hide your contacts far away.

Leave your phone number in the header. Make sure that the callback buttons and chat with the online assistant are immediately visible - most commonly at the bottom of the page on the left or right, but not on the side.

The address can be left both in the header and in the footer. Don't force the visitor to look for all this information all over the site.

All these techniques will greatly simplify site navigation, make it easier and more efficient.

Choose hosting for the site:

When working on navigation, think first of all about the user.Will he definitely be able to find everything he was looking for in the shortest possible time? Is everything clear to a person who first encountered not only your site, but also your field in general? Are the pages hidden far away, is it possible to get to each one in a maximum of three clicks?

Think for yourself which sites are easiest for you to navigate, and learn from the best.

Good luck in developing your own Internet resource!

Good day!

Dear friends, today I want to talk about the blog promotion system.

As we discussed in, it is the consistency that many novice bloggers lack in order to achieve results in their work.

By the way, the good news is that working on a blog teaches you this consistency itself. True, this takes time. I will share with you a compliment that I recently received from my coach (did I tell you that I am constantly learning something 🙂?).

So blogging is useful in any case. But we still need results!

I do not think I will open your eyes to many things, all the steps from the system below are most likely known to you. BUT! I advise you to check yourself by evaluating your actions, as well as their effectiveness.

Step #1. Goal setting

We have already talked about the goals of creating a blog, I will not repeat myself. You should have your own goals for your blogging, and it is better if there are several of them (you should not be limited to the desire to make money).

Even better, if you have the intention to achieve specific blog metrics by a certain date. In I told you, I had a goal of reaching 1,000 traffic by the end of my first year of blogging. Although there may well be several such goals, this is even better.

Why is this needed?

It's just that if there is an intention to achieve certain indicators, it makes sense to take some actions to achieve them. If there is no intention, then the probability of achieving some abstract goals will tend to zero. You can, of course, trust the case (what if you're just lucky?), but ... I haven't seen such cases in my practice, so it's still better to act on your own - hit targets constantly with accurate shots 🙂 .

So goals and intentions are an important step in creating a successful blog.

Step #2. The technical foundation of the blog

I am sure that this is where you should start - with the technical stuffing of your site. Blog promotion is certainly useful and interesting, but by the time you work on attracting visitors, the blog should work like clockwork. Personally, I include the following points in this paragraph:

absence of blunders in the work of the blog,
good blog page loading speed,
functional and pleasant design (read more about this),
easy blog navigation
design of articles in accordance with the rules of copywriting (for ease of perception of information)

Your blog should work like clockwork - convenient, fast, reliable.

Step number 3. Content

You have probably heard this phrase: the king of the blog is his majesty the content. Perhaps it is loud. But it is important to remember that most often visitors will come to your blog for information.

It is interesting to write, to reveal the topic - these simple rules are known to every blogger.

But, apart from that, almost every post should be an answer to a specific question of your target audience.

Why almost? Because you also need to write about what interests you personally. To have a blog and not write about what excites or surprises you is strange to say the least. But the percentage of such "abstract" articles should be significantly less compared to information directly related to the topic of your blog.

By the way, an important point: with free promotion, it is very important to have explicit theme of the blog. It is much more difficult to promote "everything about everything" blogs. I advise you to take this moment into account and decide on the main topic of your blog as early as possible.

Step number 4. Attracting visitors to the blog

No matter how interesting your blog is, in order for it to be appreciated, you need to ensure a constant flow of visitors to it.

The easiest ways to attract readers to your blog are as follows:

SEO optimization (traffic from search engines)
Social networks (posting, maintaining your groups)
Youtube (creating your own channel and optimizing it with subsequent transfer of traffic to the blog)
Mailing Services
Commenting on other blogs

Perhaps there are other ways. I personally used only these and was convinced of their effectiveness.

Step number 5. Formation of the core of the audience

New visitors to the blog are needed, this is true. But it is equally important to work on fixing readers on the blog.

It is important that those who once came to your blog feel the desire to return to you again and again, to become your regular readers, friends, and associates. In what ways can this be achieved?

Improving the usability of your blog
Posting interesting content
Showing himself as an author, as a real person and an interesting personality
Communication with readers (encouraging commenting, mandatory responses to comments, questionnaires, answers to questions, etc.)
Organizing interesting contests with prizes
Intriguing and inviting to subscribe to new articles

If a visitor on your blog is comfortable and well, if he sees that your blog is useful for him, that you are pleasant and interesting to him as a person, he will be happy to return to you more than once, and maybe even bring new visitors to you.

A common site usability mistake is complex or confusing navigation that turns customers off. Remember a simple rule: the easier it is to navigate on your site, the faster the user will find the necessary information and, possibly, place an order.

The main principle of convenient site navigation is to make sure that the potential client always understands in which section / on which page he is, where he came from here and where he can go next. Let's figure out what navigation elements you need to add to the site so that the user does not "get lost" in the depths of your resource.

Creating site navigation: basic elements

The elements listed below are the main ones that should be present on all pages of the site and be in the same style. Their absence disorients the user.

Site header. It should be visually separated from other page elements and contain the following elements:

Logo, which is better placed in the upper left corner, since this option is more familiar to users.
Company name and brief description of activities - tagline(if this information is not indicated in the logo). Additionally, you can specify your USP (more on what it is and how to choose the right one).
Regions of work, delivery of goods. It is not necessary to list the entire list, provide this information briefly.
Contact Information. If you have several offices or stores, then in the header of the site you should indicate important information only for the main one, so as not to overload the header.
Be sure to add next to the phone number working mode so that users can see what time they can call the company.
Link to cart page if you have an online store.
. Add only if your specialists have time to quickly process applications from it. Needed for those users who for some reason cannot call the company themselves.

An example of an informative website header:

Main menu. It is best to place these links horizontally under the site header. When choosing titles for sections, do not forget about semantic design. The main sections that should be in the main menu:

Catalog of services or goods (drop-down menu item).
Page about the company.
Methods of payment and delivery (for online stores).
Warranties and returns (for online stores).
Portfolio (if you have something to show).
Promotions and discounts.
Reviews (for service sites).
Blog (if any).
Contacts.

The list for each site is individual, but for easy perception, we do not recommend placing more than 5-7 links in the menu. If there are more of them, a second menu can be distinguished above the site header with links to auxiliary sections - the so-called "service" menu. An example of a site header with two menus:

Visually highlight the active menu section so that the user can see which section it is in. An example of highlighting a menu section:

Search Form. A must-have for large sites, especially for online stores and information portals. About what it should be and where it is better to place it on the site, we.

Site Footer. Many sites ignore this block, but it helps the user, after viewing the page, quickly move to another section or find additional links that are not in the main menu. The basement should contain:

Links to all sections of the site. For everything without exception. Duplicate links from the main menu and specify additional sections. Place them in columns and divide them into logical subgroups to make it easier to navigate them.
Contact Information. It is better to specify in more detail than in the header of the site, adding the address and details of the company.
Links to social networks. They won't interfere here.
Callback order form(only if you added it in the site header.)

It is not necessary to place the logo and company name in the footer of the site, especially if you have many links to sections. An example of a convenient website footer:

Additional navigation elements

They also help the user understand the structure of the site, but are not suitable for all resources.

Breadcrumbs or local navigation. Show the path taken by the user or the location of the page in the site hierarchy. Worth adding if you have a multi-level site (nesting more than 2 levels). Design recommendations:

Must be on all pages of the site, except for the main page.
Breadcrumbs should be placed on the left under the main menu and in the same place on all pages.
Use a small font size.
All elements, except for the last one, must be links to the corresponding pages of the site.
The last element should match the title of the page and be highlighted (preferably bold).

An example of understandable breadcrumbs:

Sidebar. If some section of the site is divided into subsections, then it is worth displaying them in the side menu. It is better to place the menu to the left of the main part of the page.

You do not need to duplicate this menu on all pages of the site, place it only in the section to which it belongs. An anti-example when you see a menu of product categories on the blog or contact pages:

In the side menu, you should also highlight the selected section.

Filters and sorting products. Required mainly for online stores. About what a catalog search should look like, .

Up Button. Helps users quickly return to the top of the page. Better positioned in the lower right corner. An example of the visual design of this button:

But that's not all

There are a couple of other elements that I would also like to talk about within the framework of this topic.

Page URL. Create links that are simple and easy to understand for the average user. It is desirable that the entire address of the page be in Latin.

Good example: https://site.ru/company/portfolio/

Bad example: https://site.ru/site/28787343/

Conclusion

All recommendations have been tested by practice, so you can safely add the listed elements to the site. Easy site navigation is a real goal that can be achieved. Therefore, do not waste time and put in the plan the necessary improvements. We wish you success!

If you want to check how clear and rational navigation on your site is, you can contact us for an audit. We also conduct usability testing, which quickly identifies and visually shows problems in navigation.

It's no secret that every company's website has four main goals: fostering brand loyalty, increasing traffic, reducing bounce rates, and increasing conversion rates to leads or sales! A lot depends on how comfortable users feel when they land on your site.

Therefore, in our article today we will talk about what site navigation is, thanks to which a “cozy atmosphere” is created. Or rather, about the most common mistakes made during its development.

Mistake No. 1: non-standard style

Users tend to be used to seeing site navigation at the top or left of the page, so don't force them to wander around your site looking for it, as they may not like this kind of hide-and-seek game, which will negatively affect conversion rates and increase bounce rates.

Yes, a creative approach is always welcome in the development of pages / site, but site navigation is clearly not the case in which you should give free rein to your imagination. With such experiments, you distract the attention of users who will be forced to study a new style of navigation, and not the main content of the resource.

Mistake No. 2: universal labels for menu items

Another golden rule of how to make navigation on the site is that the labels of the navigation menu should be informative. So, for example, the use of menu items "Products" or "Services" is common to all companies, and such names mean little to users. Here's another example: "What are we doing" - the same faceless phrase.

In this case, how to improve site navigation? Try to find the most accurate labels for each navigation menu item icon, and you will see how they speak to users. Site visitors came to you in search of an answer to their questions, so you should not dismiss them with stereotyped phrases and words.

Agree that your customers are not looking for abstract "Products" or "Services", and navigation with such icons will not affect the promotion of the site in the search results. Did you recognize yourself? So it's time to fix it! The site menu and its structure as a whole should be optimized for search engines and speak a language understandable to the target audience. After reading our article to the end, you will see how many companies solve this problem.

Mistake #3: Dropdown Menu

The drop-down menu as a navigation element has become extremely popular, but there are two good reasons why you need to approach its use with the utmost care.

Many of you probably had to literally catch the drop-down menu. One awkward move and it runs away from you! And here you are, gathering your strength, again looking, clicking, and there - a surprise! - Another list of options. Such catch-ups are terribly annoying! Think about it, maybe you shouldn’t wag the nerves of your potential customers once again?

Another reason for abandoning the drop-down menu is low traffic to the next pages of the site or the depth of browsing. If you have a problem with low traffic to the top level pages, it is possible that the reason lies in the use of a drop-down menu. But there are always exceptions to the rules. In this case, exceptions apply to large sites with many sections, since here, using such a menu, the usability of the site is significantly improved.

Mistake #4: Too many menu items

It used to be like this, but you should not stick to this tradition today without an urgent need, because sometimes even 8 points are too much. Try to limit them to a smaller number, not exceeding 5: the fewer secondary points, the less often the users' eyes will stumble over them, and the louder the most important ones will speak.

This rule also works for all site content, not just site navigation. Each removed element makes the remaining ones more visible. The brevity of navigation is also important for SEO. Since most often users follow the link to the main page, and not to the internal pages of the site, therefore it is "authoritative" for search engines. When your navigation is cluttered with links, the site's homepage becomes less authoritative compared to the internal pages.

Mistake #5: Inappropriate menu item placement for checkout

Psychological research has shown that the first and last items on any list are easier to remember than the items in the middle. A similar action occurs with users. This phenomenon is called the “serial positions curve” and is clearly expressed in the form of a graph:

The concentration of attention is significantly higher at the beginning of the list (the effect of primacy) and at the end (the effect of novelty). That is why it is correct to arrange the most important items at the beginning of the navigation, secondary - in the center. The menu item "Contact" should be placed at the end of the TOP navigation in the far right corner.

Bonus tip: links are forever, buttons are never!

In case you are 8 years behind the trends in web design and still use graphical navigation buttons instead of text links, then here are 5 reasons for you to reconsider your habits:

Button text is not visible to search engines.
Buttons are harder to update than text links.
Buttons load slower, making them unsuitable for mobile applications.
Buttons are not readable by speech and text browsers.
Buttons are not needed even if you want to use custom fonts, for example with tools like TypeKit.

And now, as we promised: 5 examples of site navigation without errors.