- 1<\/span> Why do you need a menu on the site and why it is important to think over its design<\/a>
- 1.1<\/span> Navigation<\/a><\/li>
- 1.2<\/span> Conversion<\/a><\/li>
- 1.3<\/span> SEO-optimization<\/a><\/li>
- 1.4<\/span> Menu requirements<\/a><\/li>
- 1.5<\/span> Structure<\/a><\/li>
- 1.6<\/span> Static horizontal menu<\/a><\/li>
- 1.7<\/span> Fixed horizontal menu<\/a><\/li>
- 1.8<\/span> Double horizontal menu<\/a><\/li>
- 1.9<\/span> Breadcrumbs<\/a><\/li>
- 1.10<\/span> Multilevel mega-menu<\/a><\/li>
- 1.11<\/span> Burger menu<\/a><\/li><\/ul><\/li>
- 2<\/span> The conclusion<\/a><\/li><\/ul><\/div>\n
Why do you need a menu on the site and why it is important to think over its design<\/span><\/h2>\n\n\n\n
Site menu is a design element intended for navigation. That is, it should help the user to navigate the site, not confuse him.<\/p>\n\n\n\n
Consider the main factors that affect the competent development of the site menu:<\/p>\n\n\n\n
Navigation<\/strong><\/span><\/h3>\n\n\n\n
By creating menus and designing nesting of pages, you show the user the structure of the site so that he understands the hierarchy. To do this, you need to think through the items: main \/ secondary \/ section names, etc. By creating menus and designing nesting of pages, you show the user the structure of the site so that he understands the hierarchy. To do this, you need to think through the items: main \/ secondary \/ section names, etc.<\/p>\n\n\n
\n![\"\"](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/menu-nestors-1024x476.png\" "\\"\\"")
Horizontal menu with a list, where the classic menu is the main menu, and the drop-down list is secondary in priority.<\/figcaption><\/figure><\/div>\n\n\n Thanks to this, the user will not get lost and will be able to go to the section of the site of interest in a couple of clicks.<\/p>\n\n\n\n
Conversion<\/strong><\/span><\/h3>\n\n\n\n
Comfortable search for sections and important pages increases the conversion of the site. You can create logic and guide the user the way the company needs, separating important sections of the site from secondary ones. If the user can move freely and comfortably, find the necessary information, he is less likely to leave the site.<\/p>\n\n\n\n
![\"\"](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/trtnsmall-1024x43.png\" "\\"\\"")
<\/figure>\n\n\n\n![\"\u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0430](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/trtnfull-1024x484.png\" "\\"\\"")
Dividing navigation into conversion and information menu items on the Truetone Service website, AB Agency project<\/figcaption><\/figure>\n\n\n\n SEO-optimization<\/strong><\/span><\/h3>\n\n\n\n
Navigation is important not only for users but also for search robots. Scanning the site, the robot analyzes its structure. The menu helps it to understand the nesting of pages and their weight. Therefore it is important to develop a menu and optimize it for promotion.<\/p>\n\n\n\n
Menu requirements<\/strong><\/span><\/h3>\n\n\n\n
The task of a marketer, UX\/UI designer is to package and launch a new product on the market. In the case of high competition, it is necessary to distinguish the brand among hundreds of similar companies, which is helped by unique design.<\/p>\n\n\n\n
A study conducted by KoMarketing showed that 50% of users surveyed during the interview use the navigation menu when getting acquainted with the site, and 37% leave it in the first minutes due to inconvenient navigation. Therefore, creativity is cool, but convenience should be at the heart of the site menu development.<\/p>\n\n\n\n
Structure<\/strong><\/span><\/h3>\n\n\n\n
It is important not to confuse it with the site structure, they are different things. The general structure of the site shows the relationship between blocks and pages: where you can go from and what page. Menu structure – displays navigation on significant pages (rarely on blocks, for example, on a landing page).<\/p>\n\n\n\n
That is, basically, navigation is built on transit pages, for example, the menu may contain the “Portfolio” page with all projects, but not specifically “Project 1”, “Project 2”, etc. In some cases, when the site is small, the menu can display the full site layout.<\/p>\n\n\n\n
Important:<\/strong> do not try to insert all pages and sections into the menu. This overloads and burdens it. And instead of quickly finding the desired section on the site, the user is forced to search for the desired section in the menu for a long time. The main purpose of this design element is navigation. And if there is a borscht of hundreds of sections, then the very essence of the menu is lost, it becomes useless.<\/p>\n\n\n\n
In this work, it is important to set goals, what you want to achieve: increase conversion or present information. Based on the goal, determine the sequence of items, title and hierarchy.<\/p>\n\n\n\n
![\"\"](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/abmenu-1024x488.png\" "\\"\\"")
The menu is divided into logical sections (conversion and information) for different purposes of the site users.<\/figcaption><\/figure>\n\n\n\n - Names of the items<\/strong><\/li><\/ul>\n\n\n\n
The main task of the names of the items is ease of understanding. There is no need to bring new trends, try to stand out from the competition and create whole slogans. If the user does not understand where this section leads, he will simply get lost and will not find the desired page.<\/p>\n\n\n\n
Examples of bad names<\/td> Examples of good names<\/td><\/tr> LP SMART<\/td> Catering<\/td><\/tr> Why choose us<\/td> Benefits<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n If you can’t describe the menu item in one word, it’s okay, you can make a pithy sentence of 2-3 words. But take into account the visual component: it is a bad tone in the design if the name of the item breaks up into 2 or 3 lines:<\/p>\n\n\n\n
![\"\"](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/aqua1-1024x117.png\" "\\"\\"")
A bad example: because of the long names of the items, the menu just fell apart.<\/figcaption><\/figure>\n\n\n\n ![\"\"](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/aqua2-1024x103.png\" "\\"\\"")
A good example: all menu items fit and everything looks harmonious.<\/figcaption><\/figure>\n\n\n\n Names should be concise, ideally consisting of one word and be as clear as possible for the user: “What happens when I click on \u2026”. No room for imagination.<\/p>\n\n\n\n
- Functionality<\/strong><\/li><\/ul>\n\n\n\n
In addition to transitions to the pages of the site, the menu should provide functionality and micro-animation that will help the user interact with the site. Important: do not forget to make all elements clickable or display that the item is currently inactive, for example, it can be done in a less saturated color.<\/p>\n\n\n\n
Use underlining or other highlighting methods to show users where they are now or hover effect to display which element they hovered over.<\/p>\n\n\n\n
![\"\"](\"https:\/\/abagency.com.ua\/wp-content\/uploads\/2022\/09\/ab1-1024x489.png\" "\\"\\"")
The item “Services” on the site is underlined when hovering.<\/figcaption><\/figure>\n\n\n\n Additionally, the following functions can be built into the menu:<\/p>\n\n\n\n
- Call when you click on a phone number or icon;<\/li>
- Opening pop-up windows with a form;<\/li>
- Opening mail to send a letter when you click on an icon or email address;<\/li>
- Opening the second level menu.<\/li><\/ul>\n\n\n
- Functionality<\/strong><\/li><\/ul>\n\n\n\n
- 1.2<\/span> Conversion<\/a><\/li>
- 1.1<\/span> Navigation<\/a><\/li>