6 secrets of creating effective navigation in the mobile version of the website

Traditionally, the navigation section is "stuffed" with literally everything on the site. Huge, multi-level lists look ugly, but when viewing a resource from a PC, you could somehow put up with it. On mobile devices, this does not work so easily. If the menu is too cumbersome, and the user has to scroll through it, the chances are that the person simply won't stay on the site.

Comfortable and thoughtful navigation is one of the most important aspects for modern UX design. In addition, usability has just more and more impact on SEO.
Here are a few tips to help properly design this part of the site.

Don't make it hard

The screen width of many smartphones in portrait mode is only 720 px. And this has to be taken into account. With such a limited amount of free space, you should avoid clutter and "creativity". So get right to the point and with no regrets get rid of everything unnecessary.
The names of pages and sections should be as short as possible, but still understandable. If there are more than 7-8 items, you should think about reducing the menu in the mobile version at all.

If you can't do without multi-level navigation (this usually applies only to online stores), the structure should still remain simple. One drop-down list under each menu item, that’s it.
Navigation that requires horizontal scrolling, on the other hand, would not be a good choice. Although some services use carousel-type interfaces based on images, this is the exception rather than the rule.

Ask yourself: which links are objectively necessary to enable the user to complete priority tasks? What navigation elements can be reduced in a mobile environment?
A good option is from 4 to 8 points. The logo at the top can be made into an active link, making it analogous to the "Home" button.

First, list the most important pages

Your website users don't have much time and patience. Your job is to help them get to the right page as quickly as possible. To do this, ask yourself a few questions:

Which pages are the most important?

What actions are most often taken by phone visitors of the site?

Which pages most effectively meet the needs of the mobile user?

The answers to these questions help you to understand not only what elements should be added to the main menu, but also what links and calls to action should be placed on each page.

The main thing is for the navigation menu to be uniform throughout the site. Here you should specify several top pages (e.g., main categories).
Short-term mobile navigation is a win-win for SEO and usability. It helps users navigate better and keep traffic flowing to other, lower-priority pages.

Contextual links can be added to the main content of each page in many ways. For example, when publishing a longread on a blog, you might place a block at the top with the content and anchor links to the main sections of the article. This is not just convenient for the reader, but it also helps search engines better identify pieces of your content that meet certain search queries.

Another option is to add useful calls to action and links to related pages at the bottom of the page or in the body text, where it might be appropriate.

Think of the site search as part of the navigation

Many site owners forget about the search bar. And meanwhile, in practice users often use it to avoid wandering through sections of the portal. And successful companies take this into account.

The site search is the most convenient navigation option for mobile devices. So let it shine and make sure it works well.

Amazon is a prime example. In the mobile version, Amazon does not emphasize the category drop-down menu (although you can find it in the Departments section, if someone really needs it) — but the entire upper part of the screen is occupied by the usual white search bar.

With the systematic but huge catalog, Amazon doesn't expect users to rush through menus to find what they need. Normally, a person simply enters the product name and immediately sees the relevant goods.

Make navigation intuitive

The user should know exactly what to expect when he or she clicks on this or that element. It is better to abandon creativity in favor of the symbols and designations most people are accustomed to.

For example, to indicate drop-down lists, use the plus sign (+) or the arrow (>).

Another example is to use the magnifying glass icon to indicate a search function.

If you use the hamburger menu, it should be marked with the well-known icon of three horizontal bars.

Choose a readable font and the right combination of colors

No one wants to look at the tiny letters on an already small screen. Neither users nor search engines like that.
All the text in the mobile version of the website should be large enough to be easily read from any device.

For the menu to be readable, choose a simple, strict and sufficiently high font. There should be spacing between lines, letters and words to ensure comfortable reading.

Good font choices are Helvetica, Roboto, Open Sans, Proxima Nova.

Also make sure that the text contrasts with the background. According to WebAIM recommendations, the minimum recommended ratio is 4.5 to 1. You can determine the exact value with the company's Contrast Checker tool: enter the codes for the two colors and see the result right away.

Take into account the specifics of touch screens

While the pointy mouse cursor allows you to accurately select even the smallest elements, by tapping the touch screen with your finger, "aiming" is much more difficult.

Google recommends creating mobile pages with the tap targets (in this case, menu links) are at least 32 px apart, both horizontally and vertically. At the same time, the width and height of the clickable elements themselves should be at least 40 px.

Leave us your phone number and we contact you within 10 minutes

Want to |