12 rules and tools for building convenient navigation on a website
Posted: Sat Dec 07, 2024 4:24 am
Before you start working on your website, be sure to think about your website visitors and decide what actions they need to take to achieve the goal you want.
For example, your user gets to the main page of the site - but since your product is expensive, it is important for him to know the details about the product. To do this, he can visit the FAQ section. Or vice versa - the price of the product is not a decisive factor, but there are enough fakes on the market. In this case, the page with certificates of authenticity will help convince the client.
To define the scope of work and organize the pages of the future site, work on its structure. The structure of the site is the logical relationships between pages in the form of a hierarchical tree.
Schematic representation of the site map
Mind maps will help you to create the structure of your site. Each new level of the structure leads to pages that logically follow from the previous ones or are linked to them by hyperlinks.
If you need tips on working on the structure, visit your competitors' sites. Identify recurring types of pages, create a rubricator listing such thematic pages.
On Weblium. You can organize the structure of your site using the navigator. Through it, you can nest pages, quickly create, delete and copy pages.
Customer journey
User interaction with the site should be natural. As soon as the user asks himself questions (what am I doing on this page and why should I get to know it?) – your chances of losing the visitor increase.
You can form several chains of user actions. This order of actions is called the customer journey map. That is, by forming the customer journey, you detail the guesses from the work on the site map.
For example, for a site with training courses there may be several paths. Let's describe one of the possible options.
User Journey Map
The user gets to the main page through a search query for graphic design courses and studies the main page.
The visitor doesn't know you well yet, so he cares not only about the content of the courses, but also about the format of the training. To do this, he visits the page with the description of your methodology.
Next, if the training format suits him, he will want to learn more about the course lecturers. He goes to the page with the biographies of the lecturers and course curators.
Once the user is convinced of the competence of your specialists, he is ready to move on to the program of interest and send a request through the form on the page of a specific course.
The user performs all actions by clicking on links.
On Weblium. With our designer, you can redirect the user to other pages: by adding a link to the text via the text editor or by making images and cards clickable.
Hyperlink system
A good user experience should not be interrupted. On each page, the visitor should have a choice: to perform a target action (for example, to submit a form to order services), to return to the previous page or to the main page, to study service pages (procedures, delivery conditions, etc.), to get acquainted with other services or goods.
To do this, you need to either provide hyperlinks in advance, or keep in mind the need to add them when working on the site pages. If you have completed the 2 previous steps, then placing links on the pages will be easy for you.
For each block or blocks on the proposed page, specify the links you want to place. Always give the user ways to explore your site.
On Weblium. Our website builder is block-based. That is, you add blocks to pages, and then content to them. All logical blocks are in front of you – you will never forget to add action elements or links to them.
Calls to action and target actions
Typically, users perform actions on the first screens of your website page. If your page is large, you need to place several buttons to perform actions.
Add elements for performing target actions every 3-4 screens. It is advisable not to take the user to another page to perform the action.
Let's look at an example of such an arrangement of elements. You have a separate landing page dedicated to one product. On it:
Website layout with highlighted blocks of target actions
Place the purchase button on the first screen. This is important for those customers who visit the page with the purpose of making a purchase right away.
Next, tell about your advantages, product features and care rules. Place a screen with two buttons. The first one is for purchasing this product, the second one is for purchasing and simultaneously applying for an extended warranty.
Then, place technical specifications, add testimonials from satisfied customers, and dedicate a separate screen to additional products. Finally, add a transition to purchase or a pop-up form with advanced purchase options (for example, with additional products) and checkout (for example, with the choice of an extended warranty or door delivery).
On Weblium. Our library of ready-made blocks contains 250 ready-made page sections created for you. You will find blocks with forms or calls to action in the corresponding categories of the library.
Page addresses
Based on the structure of your site, you can create unique and readable page addresses. These names can duplicate the page titles or briefly describe their content.
Firstly, readable, understandable page addresses are another hint. The user knows which page he is visiting. Secondly, the visitor will understand which category of the site he is in (we mean an address of this type: site name/ all-services/ service-№2).
On Weblium. You can quickly edit page addresses in our constructor directly in the editor. To do this, open the navigator menu, select the desired page and change its address.
Header as the main navigation menu
Header (site header) is a menu in the form of a line, which is located at the top of the site and contains quick transitions to important pages of the site. Thanks to the header, the user can always go to the necessary information if the current page is not interesting.
Different types of headers
There are several aspects you need to consider when creating your header.
Only the most important in the header. Indicate contact information, your company's business hours, and phone number in the header. Add useful pages (for example, all services, the best-selling service, about us, store) and a button for quick checkout. Links to your social networks can also be useful.
Don't overload your header. The best results come morocco phone number material from navigation menus with 4-6 links. The user will be able to easily highlight the main thing, but won't get lost in the options.
Use full-screen menus in exceptional cases. You have the opportunity to make a menu in the form of a lightbox - a full-screen pop-up with an extensive system of links. When the user sees such a menu - he needs to make a choice and spend time choosing the right option.
Effort scares users. Only make such menus for sites if users are motivated to explore your site.
Often, full-screen menu tasks can be solved in alternative ways. For example, create a page with a list of all services or products, and place a link to this page in the header of your site.
Header dropdowns are another exception. You have the option to create a clickable element with a dropdown list in the header of your site. For example, a user clicks on the “Productselement and a list of products appears below. Make no more than one dropdown list in the header. This way, navigation will be useful, but not cumbersome.
Take care of the mobile version of the navigation menu. Always consider how the header will work in the mobile version of the site. The content of the site header should fit entirely in the menu that opens when you click on the hamburger icon (☰).
Logo transition. Don't forget to make the logo in the header clickable. When clicked, the user should be taken to the home page of your site.
On Weblium. All header settings and editing of its elements are done from the control menu. You can change the site header in the Weblium editor immediately after adding it from the library of ready-made blocks. The mobile version of the navigation menu is created automatically based on the full version. The header supports adding any of the constructor elements. There are 50 of them in total. The list of pages and drop-down lists are created in a separate submenu for managing the site header.
For example, your user gets to the main page of the site - but since your product is expensive, it is important for him to know the details about the product. To do this, he can visit the FAQ section. Or vice versa - the price of the product is not a decisive factor, but there are enough fakes on the market. In this case, the page with certificates of authenticity will help convince the client.
To define the scope of work and organize the pages of the future site, work on its structure. The structure of the site is the logical relationships between pages in the form of a hierarchical tree.
Schematic representation of the site map
Mind maps will help you to create the structure of your site. Each new level of the structure leads to pages that logically follow from the previous ones or are linked to them by hyperlinks.
If you need tips on working on the structure, visit your competitors' sites. Identify recurring types of pages, create a rubricator listing such thematic pages.
On Weblium. You can organize the structure of your site using the navigator. Through it, you can nest pages, quickly create, delete and copy pages.
Customer journey
User interaction with the site should be natural. As soon as the user asks himself questions (what am I doing on this page and why should I get to know it?) – your chances of losing the visitor increase.
You can form several chains of user actions. This order of actions is called the customer journey map. That is, by forming the customer journey, you detail the guesses from the work on the site map.
For example, for a site with training courses there may be several paths. Let's describe one of the possible options.
User Journey Map
The user gets to the main page through a search query for graphic design courses and studies the main page.
The visitor doesn't know you well yet, so he cares not only about the content of the courses, but also about the format of the training. To do this, he visits the page with the description of your methodology.
Next, if the training format suits him, he will want to learn more about the course lecturers. He goes to the page with the biographies of the lecturers and course curators.
Once the user is convinced of the competence of your specialists, he is ready to move on to the program of interest and send a request through the form on the page of a specific course.
The user performs all actions by clicking on links.
On Weblium. With our designer, you can redirect the user to other pages: by adding a link to the text via the text editor or by making images and cards clickable.
Hyperlink system
A good user experience should not be interrupted. On each page, the visitor should have a choice: to perform a target action (for example, to submit a form to order services), to return to the previous page or to the main page, to study service pages (procedures, delivery conditions, etc.), to get acquainted with other services or goods.
To do this, you need to either provide hyperlinks in advance, or keep in mind the need to add them when working on the site pages. If you have completed the 2 previous steps, then placing links on the pages will be easy for you.
For each block or blocks on the proposed page, specify the links you want to place. Always give the user ways to explore your site.
On Weblium. Our website builder is block-based. That is, you add blocks to pages, and then content to them. All logical blocks are in front of you – you will never forget to add action elements or links to them.
Calls to action and target actions
Typically, users perform actions on the first screens of your website page. If your page is large, you need to place several buttons to perform actions.
Add elements for performing target actions every 3-4 screens. It is advisable not to take the user to another page to perform the action.
Let's look at an example of such an arrangement of elements. You have a separate landing page dedicated to one product. On it:
Website layout with highlighted blocks of target actions
Place the purchase button on the first screen. This is important for those customers who visit the page with the purpose of making a purchase right away.
Next, tell about your advantages, product features and care rules. Place a screen with two buttons. The first one is for purchasing this product, the second one is for purchasing and simultaneously applying for an extended warranty.
Then, place technical specifications, add testimonials from satisfied customers, and dedicate a separate screen to additional products. Finally, add a transition to purchase or a pop-up form with advanced purchase options (for example, with additional products) and checkout (for example, with the choice of an extended warranty or door delivery).
On Weblium. Our library of ready-made blocks contains 250 ready-made page sections created for you. You will find blocks with forms or calls to action in the corresponding categories of the library.
Page addresses
Based on the structure of your site, you can create unique and readable page addresses. These names can duplicate the page titles or briefly describe their content.
Firstly, readable, understandable page addresses are another hint. The user knows which page he is visiting. Secondly, the visitor will understand which category of the site he is in (we mean an address of this type: site name/ all-services/ service-№2).
On Weblium. You can quickly edit page addresses in our constructor directly in the editor. To do this, open the navigator menu, select the desired page and change its address.
Header as the main navigation menu
Header (site header) is a menu in the form of a line, which is located at the top of the site and contains quick transitions to important pages of the site. Thanks to the header, the user can always go to the necessary information if the current page is not interesting.
Different types of headers
There are several aspects you need to consider when creating your header.
Only the most important in the header. Indicate contact information, your company's business hours, and phone number in the header. Add useful pages (for example, all services, the best-selling service, about us, store) and a button for quick checkout. Links to your social networks can also be useful.
Don't overload your header. The best results come morocco phone number material from navigation menus with 4-6 links. The user will be able to easily highlight the main thing, but won't get lost in the options.
Use full-screen menus in exceptional cases. You have the opportunity to make a menu in the form of a lightbox - a full-screen pop-up with an extensive system of links. When the user sees such a menu - he needs to make a choice and spend time choosing the right option.
Effort scares users. Only make such menus for sites if users are motivated to explore your site.
Often, full-screen menu tasks can be solved in alternative ways. For example, create a page with a list of all services or products, and place a link to this page in the header of your site.
Header dropdowns are another exception. You have the option to create a clickable element with a dropdown list in the header of your site. For example, a user clicks on the “Productselement and a list of products appears below. Make no more than one dropdown list in the header. This way, navigation will be useful, but not cumbersome.
Take care of the mobile version of the navigation menu. Always consider how the header will work in the mobile version of the site. The content of the site header should fit entirely in the menu that opens when you click on the hamburger icon (☰).
Logo transition. Don't forget to make the logo in the header clickable. When clicked, the user should be taken to the home page of your site.
On Weblium. All header settings and editing of its elements are done from the control menu. You can change the site header in the Weblium editor immediately after adding it from the library of ready-made blocks. The mobile version of the navigation menu is created automatically based on the full version. The header supports adding any of the constructor elements. There are 50 of them in total. The list of pages and drop-down lists are created in a separate submenu for managing the site header.