Which program to choose for the navigator. My version of navigation when traveling Navitel: a well-designed GPS navigator for Android

A common website usability mistake is complex or confusing navigation that turns customers away. Remember a simple rule: the easier it is to navigate your website, 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 a potential client always understands which section/page he is in, where he came from and where he can go next. Let's figure out what navigation elements need to be added to the site so that the user does not get lost in the depths of your resource.

Creating site navigation: basic elements

The following elements are the main ones; they must be present on all pages of the site and be in the same style. Their absence disorients the user.

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

1. Logo, which is better placed in the upper left corner, since this option is more familiar to users.
2. Company name and short description activities - tagline(if this information is not indicated in the logo). Additionally, you can indicate your USP (more details about what it is and how to choose the right one).
3. Regions of operation, delivery of goods. There is no need to list the entire list, please provide this information briefly.
4. Contact Information. If you have several offices or stores, then in the site header you should indicate important information only for the main thing, so as not to overload the header.
5. Be sure to add next to the phone number operating mode so that users can see what time they can call the company.
6. Link to cart page, if you have an online store.
7. . Add only if your specialists have time to quickly process requests 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 names for sections, do not forget about semantic design. Main sections that should be in the main menu:

1. Catalog of services or goods (drop-down menu item).
2. Company page.
3. Payment and delivery methods (for online stores).
4. Warranties and returns (for online stores).
5. Portfolio (if you have something to show).
6. Promotions and discounts.
7. Reviews (for service sites).
8. Blog (if you have one).
9. Contacts.

The list for each site is individual, but for easy comprehension we do not recommend placing more than 5-7 links in the menu. If there are more of them, you can select a second menu 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 he is in. Example of highlighting a menu section:

Search form. A must-have for large websites, especially for online stores and information portals. We talk about what it should be and where best to place it on the site.

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

1. Links to all sections of the site. For everything without exception. Duplicate the links from the main menu and specify additional sections. Arrange them in columns and divide them into logical subgroups to make them easier to navigate.
2. Contact Information. It is better to provide more detail than in the site header, adding the address and company details.
3. Links to social networks. They won't be a problem here.
4. 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. It’s worth adding if you have a multi-level site (nesting more than 2 levels). Recommendations for design:

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

An example of clear breadcrumbs:

Sidebar. If a 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.

There is no need to duplicate this menu on all pages of the site; place it only in the section to which it belongs. An anti-example is when on your blog or contact pages you see a menu of product categories:

The selected section should also be highlighted in the side menu.

Filters and product sorting. Mainly needed for online stores. About what a catalog search should be like.

Up button. Helps users quickly return to the top of the page. It is better to place it in the lower right corner. An example of the visual design of this button:

But that's not all

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

Page URL. Create simple and easy to understand to the average user link addresses. It is desirable that the entire page address be in Latin.

A 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. Convenient website navigation is a real goal that can be achieved. Therefore, do not waste time and put the necessary improvements into your plan. We wish you success!

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

Site navigation has become an important aspect of UX design—it can either help or hurt your site. Navigation can be compared to the support of a house. If the foundation plan is not well designed, you put the entire building at risk.

Navigation may vary between sites; there are no specific instructions on how to do it correctly.

What is navigation?

The term “navigation” can be interpreted in different ways. Overall, this is a key part of the site that allows users to find what they are looking for without unnecessary clicks. It will lead your visitors to the most important information.

What questions will help you prepare your navigation map?

Who is your target audience and what is the purpose of your website?

What information and what information modules should be on the site?

How should information be grouped based on its importance to the user?

How to organize functional and information modules in a tree structure?

Planning your navigation

How to organize content? How to name and arrange elements?

From the very beginning, thoroughly discuss the hierarchy in which information should be displayed:

Work with the content. A card sorting technique can be used to help designers find answers to questions before creating a design.

Then go for the structure. Create a sitemap or list with different levels of information. Navigation should be as easy as possible. Cluttered pages with confusing menu titles make the site difficult to use. When creating navigation menus, speak to users in their language.

Finally, define the navigation menu elements, its type and design.

Remember that there is no standard that defines what your site's navigation should look like. Rather, it is important to understand what kind of site you are making, what message you want to convey to users and what goal you want to achieve with its help. For example, when creating an online store site, you can use algorithms that allow visitors to find the product or service they need as quickly as possible and buy it. As for the promotional site, you can focus on quickly finding information, involve the user in the gameplay and simplify the main elements for easier navigation.

Navigation Bar Design Trends

There are several popular types of site navigation that you can use for your project. Which one to choose is up to you.

Horizontal or vertical?

The choice between horizontal and vertical navigation is determined by several factors based on design, usability, and content intent. Small sites often prefer a horizontal navigation bar in the header of the page, while large corporate sites use both horizontal and vertical bars.

Large drop-down lists

Zoom dropdowns are a menu bar that “drops out” or “flies” out of the main navigation bar. This type of navigation is not suitable for every site. The main advantage of drop-down lists is that they allow you to show many links at once. So in what cases might they be needed? Large drop-down lists are well suited for online stores with a large list of categories that is unlikely to fit into a standard navigation menu. Accordingly, other sites offering a comprehensive range of services can successfully use such navigation.

Fixed (“sticky”)

A fixed, or “sticky”, navigation bar does not disappear when you scroll the page. Correctly, such navigation is used on sites where calls to action are located on the main panel.

Volume footer

We are used to seeing links to legal information, newsletter subscription widgets, or social media icons in the footer. Many sites have a large footer if they contain a lot of content or if they are online stores for which it is important to indicate icons with payment methods.

Responsive Design Navigation

Responsive navigation allows your website to look good on different devices. On mobile devices The panel usually collapses into the “hamburger” menu. The menu icon consists of three horizontal stripes, and when opened, the elements are located one below the other, forming a so-called “hamburger”. This menu type was created to make navigation easier on mobile devices without taking up much space.

Linking the logo to the home page

It sounds obvious, but there are still sites that ignore this rule. When users click on the logo, they expect to be taken to home page- this is a common practice.

Primary / secondary

Most often, primary navigation consists of basic elements that

look the same throughout the site. Typically, the main menu is located at the top of the page, centered, left or right. Secondary navigation consists of additional elements and is usually located in the middle of the page and is not highlighted with appropriate design.

Let's look at the 10 best website navigation design ideas

Type: vertical, adaptive.

Click on the menu icon on the left and the main menu will move to the center of the page.

2. WE3

Type: fixed, vertical; located at the top right.

The site design is interactive. As you scroll the page, new information appears.

Type: adaptive, vertical; located on the left.

The navigation in the left panel, which expands from the menu icon, is similar to what you are used to seeing on mobile versions site. The navigation is located to the left of the boarding section and is easy to see.

4.Kennedy Center

Type: horizontal, drop-down list.

You can navigate the JFK Center site in two ways: by dragging and dropping images or by using the horizontal menu.

5. B&O Play

Type: fixed, adaptive, horizontal.

The site attracts the user's attention with its product, so the navigation bar is quite simple.

Type: fixed, horizontal, volumetric footer, adaptive, with drop-down list.

A long scroll along the page with the main functions and a large drop-down list will direct users to the desired page.

7. Adriatic Luxury Hotels

Type: fixed, horizontal, large drop-down list, volumetric footer.

On this site, you can find what you need by simply scrolling down the page or using the fixed menu.

Type: fixed, adaptive, horizontal, volumetric footer.

Kalios navigation is located at the top left. By clicking on the menu icon, you can get information about products by hovering your mouse over the desired product.

This site can be managed by clicking on the arrows. The user can walk through the site as if through a museum. You can scroll through each room's page to get information.

10. Australian Ballet

Type: fixed, adaptive, volume drop-down list

Conclusion

There are many types of navigation that you can use on your site. At the same time, there is no universal way to create perfect navigation; it all depends on your needs or the wishes of your client. We hope that our examples have inspired you, and the AGENTE team, in turn, will help you realize your wildest ideas.

The easier it is to work with a site, the greater the likelihood of repeated use, ordering a product, filling out a form, and performing other useful actions by the user.

It so happens that most sites have a unique design and structure. This leads to the fact that new users have to study the principle of the navigation device each time in order to get to the necessary information or complete their plan.

The task of the designer is to minimize the time a new visitor spends on such training and make the information as accessible as possible. The key to success in solving this problem is building the right navigation system.

Good navigation follows the following set of principles.

1. Simple and logical data structure

A user-friendly interface is based on the correct organization of data. Before taking on the design, it makes sense to think through the information architecture of the project in detail.

Data should be distributed across pages or screens in such a way that a new visitor, without knowing the full picture, can quickly assess how to get to the information they are looking for. To do this, first of all, it is necessary to build a logical hierarchical structure from the data set that was provided for in the project.

Wrong	Right

You can talk as much as you like about increasing the efficiency of your online business, but you won’t get any closer to a practical solution. But Internet marketing is pure practice. And today we are starting a series of materials dedicated to high-converting websites. Using specific examples.

First in line is Booking.com, a service for booking rooms in hotels around the world. If you're into travel, you're probably familiar with it. The company's website receives 11,000,000 unique visitors daily. Of these, 700,000 people take the target action.

No site in this niche can even come close to boasting such efficiency. Despite the fact that the resource is literally “stuffed” with selling features, the developers continue to develop it.

Watch, study, and, most importantly, apply the best techniques of a famous brand.

Home page

Booking.com's strategy is built on social proof. The authors don’t describe how cool they are, but literally back up every element with numbers. The visitor gets the feeling that he has found himself in a huge group of like-minded people. If hundreds of thousands of travelers trust the service, what doubt is there?

As soon as you land on the home page, the following widget catches your attention:

“What kind of proposals are these for participants? You need to register and take a look!” This is how a beginner thinks, and the service easily and naturally collects a client base.

"Buns" for registration:

The next slide shows the notorious breadth of choice. You definitely won't be left without an apartment for your vacation. :

The demand for services is visible on the feed« Just booked" It is being updated every 3 seconds:

Convenient navigation when searching

The intuitive search filter interface does not slow down the user at all, but, on the contrary, makes the selection process easy. The first stage of the conversion funnel goes like clockwork.

Work with objections

Unobtrusively and convincingly, right under the search form. Most users ask 2 questions:

• How to cancel a reservation?
• How quickly is a reservation confirmed (will someone intercept my number)?

In any business, the target audience has 2-3 “hot” questions and doubts. Answering them clearly and clearly means increasing response.

Benefits and Advantages

The traditional list of bulletins with benefits also convincingly speaks about the main features of Booking.com:

Summary: profitable, convenient, reliable. It is based on these 3 factors that we make a decision in favor of one resource or another.

Social proof

See how the service elegantly uses social proof to help guide your decision when choosing a hotel:

Firstly, the hotel has a high rating (4 out of 5 stars). And not by decision of the administration, but based on reviews. Next you see another “hook”: the rating is “Awesome” based on 66 reviews. By the way, they are presented in more detail inside the hotel card. Finally, the information that there is the last issue left and someone is looking at it at the same time as you, involuntarily evokes a “grasping” reflex.

Instead of a conclusion

What can and should be used from the Booking.com experience:

• If you ask the user to register (note to owners of online stores), explain the reason and give a value as a gift (a permanent discount, for example);
• Make your site navigation as easy as possible. Visitors should glide towards the target action as if on a well-trodden path;
• Identify the main objections and answer them briefly and convincingly;
• Ask every satisfied client for a review, or even better, place a form for automatic feedback;
• Social proof powerfully increases conversions. One fact sells better than a hundred beautiful words.

Happy sales to you!

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

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

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

The same goes for websites. If the navigation is poor, there are a lot of links that don’t lead where they need to go, or it’s unclear where they will lead, users get confused and can’t find the pages they need and the information they need.

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

Basic elements and techniques of navigation

I suggest 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 familiarize themselves with the information.

One of these elements that has long become mandatory on the site iscompany logo, when you click on it you will be taken to.

For example, here you just need to click on the logo to return to 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 “classical” 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 - thishamburger menu, in which all links are hidden on schematic three horizontal lines. At first this element lived only on mobile devices, but now it is increasingly found on desktop versions of sites:

Also on some sites you can seevertical menu. It is used most often if it was not possible to fit everything necessary into the top menu, or if it is necessary to make it easier for users to navigate to certain sections.

Or maybe it can live independently, without horizontal menu at the top of the page. And there may even be several such menus, like here - on the left and on the right:

(micro markup) is another navigation element that not only defines the page hierarchy, but also allows you to easily return to to the required section, or to the main page, from any page:

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

They not only help you move further, 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, user agreement, rules for using the site, etc. are placed in the footer. And sometimes you can see many links to different pages of the site, grouped into categories:

On long landing pages, as well as on some sites, you can seeprogress scale, which shows how far you have scrolled on this page:

Progress bars can also be found on application and registration forms if the form is long and divided into several steps.

This makes it easier to navigate through the page itself - you can see how far to the end. This is also a small psychological technique that encourages the visitor to bring what he started to completion.

On long pages and landing pages you can find another great navigation element -button for quick return to top:

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

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

Here we constantly have before our eyes a search, a logo with the ability to return to the main page, and a small menu.

How to use all these elements effectively and profitably?

How to make site navigation convenient

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 should get a maximum of three clicks. And vice versa.

1. Place the return to home logo in the upper right corner.

This is a generally accepted standard, and for good reason: this is where the logo immediately catches the eye. And the user will not have to look for what to click to return.

2. Consider primary and secondary elements.

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

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

Place the most important sections of the site in the main menu.

3. Think about which pages can be grouped.

If everything doesn’t 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 “hid” the company’s projects in this way:

4. Find a good place for information 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.

Here is a striking example of such placement of information links:

5. Don't forget about 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 links with color, make them bold or underlined. It is important that the user understands that in front of him is a clickable element that will send him to another page on the site.

This is where I can’t call the menu successful. The font is too small. But here there is a different approach - immediately with home 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.

Think it over additional elements type“Related Products”, “Recommended Content” or “Related Articles”, which will help the user quickly find what he needs.

8. Hints.

Make navigation easier withtooltips , which will help the user understand what this 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 call back 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 search for all this information throughout the site.

All these techniques will greatly simplify site navigation, making it simpler and more efficient.

Select hosting for the site:

When designing navigation, think about the user first.Will he definitely be able to find everything he was looking for in the shortest possible time? Is everything clear to a person who has encountered not only your site for the first time, 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 take cues from the best.

Good luck in developing your own Internet resource!