Get better mobile navigation buttons!

One of the first things you'll notice after Mobilizing your site, is that the default navigation buttons can often seem quite small and awkward to use. When www.life-with-siamese-cats.com went mobile, they asked us to improve this.

Here's a "Before" snapshot of the navigation area, followed by an "After" snapshot once we'd made our changes.

The problem

Here's what the site navigation looked like when Mobilize It was first switched on. 

You can see the  Navigation area on the left, and the Extra Column on the right.

The main problems are

• The Navigation area on the left does not contain any visual cues to let the user know that this is a clickable area for navigation.  As the Site Designer and Owner, you know this is a Navigation area.  But to a newcomer who's been on your site for less than 10 seconds, it just looks like a list of words on a mottled background.
• "Hover" does not exist on a smartphone.  The mouse cursor changing into a hand over a link only happens on a desktop.  It does not happen on a mobile.
• The size of the links themselves are too small and need too much concentration to tap.  
• Smartphone users frequently use just their thumbs to navigate and click around a website. With this layout, it's difficult to do with a single finger tip, but it's impossible to get it right with just a thumb.
• The clickable areas are close together and blend into one another. The target is indistinct.
  

A user would say

The solution

Here's the end result after our changes.

• It's been styled to look like the Navigation area on many mobile phones.  It's a familiar recognizable format.
• The button shape looks "clickable".  It looks like an area of the page you should tap, and then expect something to happen.
• There is enough space between each button to make the link a distinct single target.  
• The target for your finger-tip is large, and runs from edge to edge of the screen.  Its twice the width, and nearly twice the height of the old links.
• It's easy to use this layout with your thumbs.

A user would say

How we did it

In plain English, without any "techno-speak", here's what we did to get this result.

• We restyled the Navigation Column and the Extra Column to take up 100% each of the screen width, and not 50% each as in the default.
• This gives more room for the content of each column, but in turn it means that the Extra Column now appears below the Navigation Column.
• The font size on the links has been increased to make them easier to read.
• There is more spacing between each link.  This makes them much more distinct tap targets.
• The background of each link is styled with a gradient color, to look like a button surface.
• There is border and shading added at the edge of each button, to increase the 3D look of the button.
• The textured background to the Navigation Column was removed to leave a clear single unified background behind the button.

There's now no doubt in a user's mind, that these are Navigation buttons. 

They invite the click, and users would have no hesitation in pushing one of these areas.

Check your own mobile links with the Google tool

If you want to check your own navigation, Google's PageSpeed Insights Tool now contains a section that gives you guidance on which links on your site are too small for a mobile.

Put your own page URL into the tool.  You'll find the results at the foot of the mobile page, under the sub-heading "Size tap targets appropriately."

Here's what it looks like for the mobile version of Anguilla Beaches.

Contact Us

In this case, we concentrated on a 3D shape for the buttton.  However, the same techniques can be used to produce a 2D flat icon design.

If you want to make these kind of improvements to the navigation of your mobile site, just get in touch with us via our Contact page.