Stuff & Nonsense product and website design

We need a standard show navigation icon for responsive web design

You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.

I flicked through responsively designed sites featured on Media Queries and found several different icons in use.

Plus symbol

Macdonald Hotels have chosen a plus symbol accompanied by the word “show” (show what?) for their collapsed navigation. Unsurprisingly, when the navigation’s visible the icon and text change to a minus symbol and “hide.” Sony use the same plus and minus symbols but their button reads “menu.”

Macdonald Hotels (site) (Larger version)
Sony (site) (Larger version)

Using a plus symbol to reveal navigation could be confusing, as it usually indicates that you can can add something. In iOS:

  • An event in Calendar
  • A contact in Contacts
  • A friend in Find My Friends
  • A note in Notes
  • A URL in Readability
  • A reminder in, err, Reminders
Calendar, Contacts, Find My Friends, Notes, Readability and Reminders (apps) (Larger version)

You get the idea.

Grid icon

YouTube’s mobile site uses a 3x3 grid icon to indicate navigation. The same icon makes sense for the Start Page button in Opera Mini too. It makes sense because a grid is exactly what you see when you tap the button.

YouTube (site) and Opera Mini (app) (Larger version)

The use of a grid icon makes no sense however on the Happy Cog’s Cognition blog, because when its navigation’s revealed it’s anything but a grid.

Happy Cog’s Cognition blog (site) (Larger version)

Unordered list icon

Designers Bearded and Belgian job site Jobat both chose an an unordered list icon (although their accompanying text is different). I can see why they chose it. Navigation’s often a list of links, usually unordered in HTML.

Bearded and Jobat (sites) (Larger version)

Designers understand this but do normal people? When they see that icon in Foursquare or Tweetbot they know it means a ‘list.’ So why do we expect them to know it means ‘navigation’ when they see it on a website in Safari?

Foursquare and Tweetbot (apps) (Larger version)

Three lines

That leaves us with three lines that represent a variety of things across a variety of apps:

Gane Center, Voice Recorder, Reeder and Path (apps) (Larger version)
  • Friend request list in Game Center
  • Recordings list in Voice Recorder
  • Subscription list in Reeder

And show navigation in Path.

This is an icon I’m seeing more and more of to represent show navigation. You’ll find it on Starbucks, Twitter’s Bootstrap and the 2012 Webdagene conference.

Starbucks, Twitter’s Bootstrap and Webdagene (sites) (Larger version)

What icon should become a standard?

Unless our navigation’s arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognisable as navigation to the average person.

Postscript: To slide his content to the right and reveal his navigation, Barack Obama’s site uses the President’s own, unique icon.

Barack Obama (site) (Larger version)

But hey. He’s the President.

Written by Andy Clarke who tagged this with responsive

Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.