Navicon

August 14th, 2012

Daniel recently asked a question on Twitter:

I vaguely recall someone (@lukew?) posting examples of ‘open nav’ icons (eg Path and Facebook) showing an emerging de facto standard. Link?

— Daniel Burka (@dburka) August 9, 2012

It was this article by Malarkey that he was looking for. Andy did a great job of comparing the iconography used for navigation in mobile apps and responsive sites. His conclusion:

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.

The three-lines icon is certainly very popular, as can be seen in this collection of mobile navigation icons I gathered together on Dribbble.

But Tom has some reservations:

@dburka @adactio @malarkey I’m a bit suspicious of the three lines thing when not in a clear button though. Looks like a drag affordance

— Tom Coates (@tomcoates) August 9, 2012

Andy Davies points out another potential issue:

@sunpig @adactio Chrome canary is now using the triple line for the menu toolbar button twitter.com/andydavies/sta…

— Andy Davies (@andydavies) August 9, 2012

I noticed this in the more recent versions of Android too. It does indeed look a little odd to see the same icon used in the browser chrome and in the document within the browser.

But I still think it’s a good shorthand for revealing a list of items.

The unicode character ☰ ☰ (U+2630) is the Chinese trigram for sky (or heaven)—one of the eight bagua. It consists of three horizontal lines. Now that could be a handy resolution-independent way of representing navigation.

Alas, when I tested this on a range of mobile devices, some of them just showed the square box of unicode disappointment. I had much better luck with the unicode symbol for black down-pointing triangle ▼ ▼ (U+25BC).

Mind you, with a combination of @font-face and sub-setting we’re not limited to what the browser ships with—we can provide our own icons in a font file, like what Pictos is doing.

12:14am

Tagged with icon navigation mobile unicode symbol

Illustrations

Thanks to the magic of machine tags, you can illustrate this post by tagging a picture on Flickr with:

Related

Links

Find links I've tagged with icon, navigation, mobile, unicode, symbol, etc.

Photos