Daniel recently asked a question on Twitter:
I vaguely recall someone (— Daniel Burka (@dburka) August 9, 2012
@lukew?) posting examples of ‘open nav’ icons (eg Path and Facebook) showing an emerging de facto standard. Link?
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:
Andy Davies points out another potential issue:
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 ▼
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.
Find photos that I took on August 14th, 2012.