Mobile Web Navigation

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.

Mobile Web Navigation: Best PracticesImage 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.
Mobile E-commerce
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:

Navigation menu for mobiles

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 the mobile menu is implemented carefully.

The most important pages go first

The most important pages go firstImage 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 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

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.

You don’t need a lot of menu buttons
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

Consider nested navigationImage 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

Beware of fonts and contrastsImage source: Greg Christian

Due to the fact that you’re working on a small screen, try to keep the 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 have overdone ornamentation.

Include scrolling navigation

Include scrolling navigationImage 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

Stackable buttonsImage 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-friendly 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.

Touch designImage 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.

Touch design
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.

Travel App
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 a 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

Mobile NavigationImage 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.

The 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:

Mobile News App
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.

Related posts

About Us

Visual Hierarchy is a bundles site where designers can buy and sell their products. we're dedicated to selling innovative and creative products to designers at affordable prices.

Freebies

Subscribe Us

Receive articles like this one every week.
No spamming. Unsubscribe at any time

Recent Posts