Mobile Web Navigation Best Practices

Smartphones are not simply phones, but users’ favorite devices for checking destinations, locations, schedules, and bank balances.

Internet browsing is almost completely transferred to handheld devices, knowing how much time busy people spend on the go, and all the situations in which they’d grab their phone and surf the internet.
 

Image source: Basov Design
 
Still, the biggest problem of handheld devices is their limited screen space, which often obstructs visibility while multi-tasking forcing users to surf with a single finger.

That puts navigation quite high on the list of web development and design priorities. Both developers and designers know a good site is worth nothing if it confuses users, and doesn’t let them find what they are looking for. In most such cases, users leave never to return.

Image source: Rosie

But how to be absolutely sure you’ve handled navigation well? Let us share the mobile web navigation best practices that can be useful to you:

A SUITABLE NAVIGATION MENU FOR SMALL SCREENS

One fact designers always consider is that the behavior of users when accessing a website from their phone is different than accessing the same website from their desktops. Including a comprehensive menu on a small screen is a tricky task, but it is perfectly feasible if planned carefully.

THE MOST IMPORTANT PAGES GO FIRST


Image source: VisualRocks.co

Before you release your own mobile version, take a look at the ones that are already there. Which pages are displayed first? Better yet, have you developed your own strategy for outlining top category pages?

If not, think about the most common actions you expect users to perform, and in particular those that can satisfy their mobile needs.

In the world of mobile browsing, speed is a top notch priority. Users don’t want to list categories for ages in order to perform something simple, and the best way to improve their experience and to invite them to stay is to keep paths simple.

YOU DON’T NEED A LOT OF MENU BUTTONS


Image source: Olia Gozha

Remember that you’re designing a mobile menu which will be displayed on a small screen. Your real estate in the case is fairly limited, so don’t experiment with too much clutter. Keep only the most important fields.

For instance, try to figure out which links can be your users’ priority, and which are the elements that are not really relevant in a mobile environment.


Image source: Anthony Lagoon

Of course, this is not going to be easy at all, but if you want your website to be really mobile friendly, you must stick to a more limited framework than the desktop one, and have a maximum of five menu buttons.

CONSIDER NESTED NAVIGATION

Nested navigation is a three-line button which can be invaluable for mobile websites. The tool allows covering options in drop-down menus so that they won’t occupy the front page space when not needed.

THE FEWER TAPS THE BETTER


Image source: Vilém Ries

Everybody wants to make his website more productive, but tenths of taps are not that likely to help. If you want a successful site, keep tapes and minimum, and let the user choose from a very basic menu.

This strategy eliminates the risk of errors, especially because the user can go back quite easily, and he won’t be frustrated.

BEWARE OF FONTS AND CONTRASTS


Image source: Greg Christian

Due the fact that you’re working on a small screen, try to keep text readable without zooming. This is one of the most important mobile-friendliness priorities.

Navigation, in particular, has to be easy to read, so you should choose a clean font and make it taller with some extra space between the letters. Most commonly, designers opt for Times New Roman, Helvetica, Arial, Georgia, Courier, and Trebuchet MS, because none of them has overdone ornamentation.

INCLUDE SCROLLING NAVIGATION


Image source: Simon Robinson

Be careful when placing categories in your navigation menus, and think of their hierarchical order: Is there a category that is more important than the others? Are there any subcategories? All of these aspects have to be considered in order to ensure each category has its own place.

For instance, the most important categories should come highest in the menu, while the user should scroll down to find the less important ones.

STACKABLE BUTTONS


Image source: Roma Datsyuk

Remember that what mobile users see on their device is a portrait rather than a landscape, so try to present your web design vertically. The text that was originally read across should be read down, assuming that you have no more than 5 categories.

TOUCH DESIGN

Both smartphones and tablets are handled with touch, which is why you need to consider the average space required by fingertips when deciding on the size of your elements. Ideally, when selecting items in tight spaces, users should rely on at least 44 pixels (left to right and up to down) space to tap on the exact item they want to see.


Image source: Nashatwork

As you probably know from personal experience, leaving less target space than 40 pixels leads to taping on the category above or below the desired one – a thing that is very likely to confuse or even disappoint users.


Image source: Marko Prljic

OPTIMIZATION TIPS

  • Place menus on the top/bottom of the screen, depending on what users intend to do on your website. If their aim is to scroll down and to look for content, your bottom menu is likely to inspire them to continue browsing instead of leaving your site to check the competitor’s one.
  • Hide a part of the menu to free space for other content, or make it visible only when users deliberately click on it. In such way the menu will stay up front, and will still be visible without obliterating more useful content.
  • Include a link to the menu on top of the screen in case the menu link is at the bottom.
  • Short and wide are your best bets when designing mobile navigation, since you’re making sure that category titles are visible and look better.
  • Try to decrease header images, or replace them with a smaller logo to leave more space for navigation.
  • Remember to keep your design and branding elements consistent with color, typography and style, and keep all navigation buttons similar instead of wasting valuable space to add large images and graphics.
  • Keep text as short as possible, especially when designing the menus and the buttons. Sometimes, it will be extremely difficult to limit what you have to say to a couple of words, but this is the best way to save space and to keep users interested.
  • Whatever can be made simpler, make it simpler. This matters especially to the homepage, where users should focus exclusively on the top items and the elements that are most relevant to them.


Image source: Rahul Bhadauria

THINGS TO AVOID IN MOBILE NAVIGATION OPTIMIZATION

As counterintuitive as it sounds, users don’t like too much choice. You need to keep them satisfied with only few buttons, and to avoid the following mistakes:

  • Offering too many choices
  • Relying only on horizontal scrolling
  • Hovering
  • Including slider menus
  • Oversimplifying and boring users
  • Making navigation unintuitive
  • Complicating access to important information


Image source: Damien Da Costa

FINAL THOUGHTS

Mobile web design changed almost every basic design rule and principle and imposed a whole new set of practices to adopt. It was a drastic change of interface requirements and a turnover in standards, and like it or not, we had to jump on the bandwagon and surpass the learning curve to know what is best for our mobile users.

Design is no longer traditional, and that’s fine because we live in a user-focused world where creativity matters less than satisfying customer needs. Before designing whatever, we have to ask ourselves:


Image source: Clément Pavageau

What is it that the user came to do on our website? How can we make that easier for him? Does our budget allow it? These are the answers that will help you develop a great mobile navigation strategy to attract and keep users on board.

Basically, all that needs to be done is to meet their needs – that will make them happy, and it will inspire them to come back and to recommend your website.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *