The Semantic, Responsive Navicon

Advertisement

Icons are scattered throughout our history as a species; early man painted pictures onto stone depicting their triumphs over their hunted prey, Egyptians had an icon-based writing system in their hieroglyphics, and in the early church the symbol of a fish represented a Christian meeting place or tomb. Icons have always served a definitive purpose throughout mankind’s history on this planet: to inform and instruct.

Icons are still prominent today in our everyday lives, as they serve the same purpose as they always have. As the craftsmen of the Web industry, we must ensure that we use correct representations of actions to inform users of their consequences.

As the Web has evolved over the years, we have established a (fairly) standard set of icons — a trash can or a cross has come to represent deleting or removing something; an envelope has become the indicator for a message or mail. These are little visual cues to help people along their way. Some icons have established such strong associations that they can exist on their own without supporting text, meaning, they can remove language barriers to form their own universal language. We need to use the right icons to communicate the right things.

Today’s Web is in a transitional phase, probably the most groundbreaking phase since the Web standards movement — I would go as far as suggesting that we are in the middle of the Responsive Web Design movement. As we build responsively, our websites will appear differently on different devices and often behave differently too. Navigation menus in particular are elements that can change dramatically in responsive websites1. The change from a large context to a small context often requires changing the navigation pattern to something rarely seen on the Web until the arrival of responsive design. As more and more responsive websites enter the public domain, the more people will see these newfangled navigation solutions, so they shouldn’t need to ask “What does that button do?”.

There have been calls recently from Andy Clarke2 and Jeremy Keith3 to have a standard icon for revealing navigation in small contexts, and rightly so — this is a new technique and we need to set users’ expectations about the consequence of the reveal action.

Three Horizontal Lines

The majority of responsive websites that use an icon to represent a hidden menu opt for the three horizontal stripes — these include some high-profile websites like Starbucks and also popular apps like Facebook and Path. Part of its power lies in its versatility, as the icon itself doesn’t clearly represent a precise object nor method, which means it can be applied to a variety of navigation-based design patterns without showing a preference to a particular pattern. Its vagueness in shape doesn’t detract from its message as the icon is becoming an emerging standard. Like a new term appearing in our everyday language, we know what it means. And with high-profile websites throwing their weight behind it, so will average users over time.

Let’s take a look at some examples if the horizontal lines being used in some responsive websites.

Twitter Bootstrap4
Twitter’s bootstrap framework shows three horizontal lines as a visual cue for a sliding menu, revealing the main menu links which anchor to the various sections of the page.

5

Webdagene6
The Webdagene conference website also uses the same pattern for a similar reveal, but unlike Twitter’s Bootstrap the links open a new page instead of anchoring to sections. Two different approaches to navigation encompassed by the same icon.

7

dConstruct 20128
dConstruct uses the three horizontal lines to represent the menu revealed in an upward sliding transition. Note that even though the revealed items here are square in shape, they still use the horizontal lines to represent the menu.

9

Golden Grid System10
Joni Korpi’s Golden Grid System uses the same icon but for a different purpose — pressing the button shows the gridlines for the currently active grid.

11

The three lines icon isn’t the only indicator people are using in the wild — like the alternatives, it has its drawbacks. In iOS, three horizontal lines are used to signify the ability to re-arrange full-width list items. So perhaps this part of our icon language is still finding its feet.

Alternative Patterns

Cognition by Happy Cog12
There are alternative patterns in the wild that aren’t as common as Happy Cog’s grid icon. This could perhaps indicate something similar to a speed dial or home screen — a springboard to other destinations. On the other hand, it could mislead less experienced users to think they are leaving the website to go somewhere else.

13

Sony14
Sony also deviates from the three horizontal lines icon and opts for a plus icon to show their menu. While visually pleasing, the plus symbol signifies adding something and as such it might be sending out the wrong message to users, and not clearly articulate the resulting action.

15

Nathan Sawaya16
Nathan Sawaya’s hidden menu is represented by a cog which also could cause confusion. In digital products, the cog icon has become the universal indicator for settings, options or for customization. It feels like it’s misrepresenting the action and consequence, and may only be pressed as a last resort or out of curiosity.

17

MSN Olympics Coverage18
Governor Technology produced the MSN’s Olympics Coverage website which boasts a series of creative pattern translations that include the main navigation — represented by a downward arrow. The downward arrow is a safe bet, specifically in slide-down menus. It hints towards the consequence in the same way a <select> menu would.

19

Microsoft20
Microsoft recently launched a new responsive home for their products which was expertly designed and developed by Paravel21 using Microsoft’s new design language. The icon used to represent the menu in small contexts is a good example of “table of contents” metaphor which communicates that the click on the icon would lead to an overview of available navigation options.

22

All these examples produce the same end result — you push a button, a menu appears. But there is a disparity in the way the action is presented. If icons are a language, then we are sending mixed messages where responsive navigation is concerned. We are dealing with new patterns, new techniques but so are the people on the other side of our products — they are closer to our interfaces than ever before. Today we are dealing with both those devices as well as touch-based interfaces where there is nothing between the user and the interface. The message we deliver needs to be consistent and clear, the icon is part of this message, part of the greater language. As Andy Clarke has already said: “We need a standard show icon for Responsive Web Design”.

“Unless our navigation is 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 recognizable as navigation to the average person.”

— Andy Clarke, We need a standard show navigation icon for Responsive Web Design23.

I would wager that the vast majority of users faced with a hidden menu in small contexts have already used the three lines pattern to navigate rather than the alternatives. With the sheer amount of users using apps like Facebook and Path, it’s safe to say that it’s an intuitive indicator. If we are to use this effectively in resolution independent responsive designs, then it needs to be represented in a scalable way, ensuring it stays legible regardless of the device where it is being displayed on. There are a number of ways we can do this.

Pictographic Web Fonts

“Don’t get hung up on ‘Retina’, worry about hi-res.”

— Adam Bradley, Responding to the New High-Resolution Web24.

With different pixel densities cropping up, resolution independence is crucial to achieving a consistent experience regardless of the user’s context. It’s impossible to design for device dimensions and specific screen properties and stay future friendly at the same time. Scalable assets are key to staying ahead of the game, and one way to create them is to use pictographic Web fonts.

In theory, you could create a font containing only one glyph to represent the menu indicator. It would be a light resource to load, but you would still be imposing an additional HTTP request on the user, which isn’t ideal (it would essentially be a hack). Additionally, if the user is on a very slow connection, then the icon may take time to load. During that time they may miss the menu option — we are talking about mere seconds and potentially fractions of seconds here — but this level of care and attention to detail is what defines you as a craftsman of the Web. After all, each decision you make directly affects the user on the other side of the screen.

You could get around this by embedding the Web font using a data:URI which would save the additional HTTP request. This is fine in isolation, but if you are loading multiple data (URIs in different places), you run into issues regarding maintainability. Multiple font variations can also produce a page weight overhead that would render this approach pointless. So it all depends on the case for your individual use.

In general, we should avoid loading a Web font solely for one glyph for use in displaying our responsive navigation icon. The page weight today is as important as it was when we were designing and building for dial-up connections, and latency is the new Web performance bottleneck25, so keeping the webpage size small is still very important. The contrast in connection capabilities is larger than it has ever been and any unnecessary burdens on the user’s connection can have a negative impact on the user’s experience.

However, it’s likely that you may be loading pictographic icons for other purposes in your project. If that is the case, then I see no harm in loading the set containing the three horizontal lines icon and making use of the range of glyphs at your disposal. Josh Emerson26 takes this a step further and has produced a fantastic walkthrough showing you how to create a font fit for purpose, containing only the glyphs that you need for your project (which consequently keeps resources light and page weight down). IcoMoon4727 is a browser-based app that lets you do something similar by offering a library of pre-selected icons and the option to import SVGs to build your own font.

Unicode Characters

Standard system fonts provided us with a false glimmer of hope. The character entity “Chinese Trigram for Sky (Heaven)28” (☰ (U+2630)) is exactly what we are looking for, only it doesn’t render correctly on Android devices. Jeremy Keith has done some research into platform and browser compatibility in his Navicon article29, which concludes that the downward arrow character entity has better cross-platform and cross-browser compatibility for indicating a reveal menu. There are similarly suitable unicode characters like the character entity “Identical to30“. This has much better support than the Trigram for Sky entity (although the geometric shapes aren’t quite in proportion with the icons we have become familiar with).

31
Live demo32

You can see that the icon retains its sharpness when the user’s browser is zoomed, as a pictographic Web font would. Proportionally it isn’t ideal, although it may provide a good fallback to a more suitable technique.

CSS

Tim Kadlec33 and Stu Robson34 have produced the navicon icon in CSS by making clever use of mixing border styles and the :before pseudo selector which works in all major device browsers. While this seems ideal, it isn’t exactly best practice, as we are using CSS to draw a graphic which resides somewhere in that blurred line of whether CSS generated “graphics” are presentational or not.

35
Live demo36

When the browser zoom level is set to something other than a multiple of 100, the proportions between the generated lines become uneven, which wouldn’t happen in the other solutions presented here. I wouldn’t rule this approach out completely, however, as it serves as a solid workaround when the following approach fails.

The SVG Approach

Without doubt, SVG is a good fit for the purpose of crafting the icon. By definition, an icon is a picture or symbol to represent such an action, therefore a scalable vector graphic is the right tool for the job37. The browser draws the SVG based on mathematical parameters, meaning that it is resolution independent. So it will look crisp on whatever pixel resolution or density it is presented on, making it a future friendly38 solution. Support for SVG is pretty good across the contexts we need it for (mainly mobile devices, although some versions of Android don’t support it).

We can cater for browsers that don’t support SVGs by using feature detection. A custom build of Modernizr39 that only checks for SVG provides a lightweight way of testing support for the SVG — if the browser can serve SVGs, then the user should be shown the SVG image. And if the browser can’t, then it should revert to using a bitmap image. After loading Modernizr, checking for SVG support is simple:

if (!Modernizr.svg) {
    $("#svg-icon").css("background-image", "url(fallback.png)");
}

SVG isn’t widely utilized yet, not as much as it should be. Perhaps it is the lack of mainstream tools to create them. The tools do exist40 though, and we just need to look a bit harder to find them and grow accustomed to them — crafting SVGs should become second nature to us as we enter a new high-definition Web41.

42
Live demo43

The SVG icon stays sharp when loaded at any resolution, however when the page is zoomed after the initial load, the graphic can begin to blur in certain browsers at irregular zoom levels. The drawbacks in using SVG for retina graphics are found in its limitations for customization in the browser — for example, changing the color of the icon. What seems like a straightforward property change cannot be achieved without JavaScript intervention (or by loading an additional image) which means triggering another HTTP request. Furthermore, if HTTP requests are a concern and you want to load the SVG inline, you will have limited browser support — just be sure to use feature detection to cover all eventualities so the user’s experience isn’t affected. You can download the SVG icon and the PNG fallback44.

To Conclude

After reading this you may feel like I’m over-analyzing something so small, and on the surface it may look insignificant when in fact it’s quite the opposite. Building responsively requires more care and attention than we have ever given to our craft. A mobile-first approach invites opportunities for the butterfly effect in our work, in which a bad decision that could impact page weight (or loading redundant resources) for small contexts could be detrimental to the user experience in small contexts and beyond. We, as craftsmen of the Web, have a duty to sensibly inform, instruct and exercise responsible Web design.

Further Resources

(jvb) (vf)

Footnotes

  1. 1 http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  2. 2 http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
  3. 3 http://adactio.com/journal/5666/
  4. 4 http://twitter.github.com/bootstrap/
  5. 5 http://twitter.github.com/bootstrap/
  6. 6 http://webdagene.no/
  7. 7 http://webdagene.no/
  8. 8 http://2012.dconstruct.org/
  9. 9 http://2012.dconstruct.org/
  10. 10 http://goldengridsystem.com/
  11. 11 http://goldengridsystem.com/
  12. 12 http://cognition.happycog.com/
  13. 13 http://cognition.happycog.com/
  14. 14 http://www.sony.com
  15. 15 http://www.sony.com
  16. 16 http://brickartist.com/
  17. 17 http://brickartist.com/
  18. 18 http://london.msn.co.uk
  19. 19 http://london.msn.co.uk
  20. 20 http://www.microsoft.com
  21. 21 http://paravelinc.com/
  22. 22 http://www.microsoft.com
  23. 23 http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
  24. 24 https://dl.dropbox.com/u/75469230/responding-to-the-hi-res-web/index.html
  25. 25 http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
  26. 26 http://joshemerson.co.uk/blog/asset-fonts/
  27. 27 http://keyamoon.com/icomoon/app/
  28. 28 http://www.fileformat.info/info/unicode/char/2630/index.htm
  29. 29 http://adactio.com/journal/5666/
  30. 30 http://www.fileformat.info/info/unicode/char/2261/index.htm
  31. 31 http://codepen.io/jordanmoore/full/voiFg
  32. 32 http://codepen.io/jordanmoore/full/voiFg
  33. 33 http://timkadlec.com/2012/08/mobile-navigation-icons/
  34. 34 http://www.alwaystwisted.com/post.php?s=2012-05-12-create-a-pure-css-menu-button
  35. 35 http://codepen.io/jordanmoore/full/BIzCe
  36. 36 http://codepen.io/jordanmoore/full/BIzCe
  37. 37 http://www.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
  38. 38 http://futurefriend.ly/
  39. 39 http://modernizr.com/
  40. 40 http://fireworks.abeall.com/extensions/commands/Export/
  41. 41 http://www.smashingmagazine.com/2012/08/20/towards-retina-web/
  42. 42 http://codepen.io/jordanmoore/full/CKfGw
  43. 43 http://codepen.io/jordanmoore/full/CKfGw
  44. 44 http://provide.smashingmagazine.com/navicon/icon-menu.zip
  45. 45 http://iconhandbook.co.uk/
  46. 46 http://www.implementingresponsivedesign.com/
  47. 47 http://keyamoon.com/icomoon/app/

↑ Back to topShare on Twitter

Jordan Moore is a Web designer and front end developer based in Bangor, Northern Ireland. He is a responsive web design enthusiast with a passion for typography and design theory. Jordan documents such thoughts and experiments on his blog. And you can follow Jordan on Twitter.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    SVGs wont work on android phones & tablets (tested on galaxy nexus & 4.1.1). they crash the browser…

    • 2

      Running 4.1.1 on my Nexus 7, using Chrome for Android, the SVG works beautiful. So probably it only crashes in the stock browser?

      • 3

        Yup, once people start using Chrome or Firefox on their mobile devices the user experience will be much better.

    • 4

      You should use feature detection to serve the icon appropriately (have a look at the 4th paragraph from the bottom) :)

    • 5

      You can always stick to Jpeg and use the @2x function to adapt your graphics to retina screens.

      • 6

        For UI-Related Images Yes. For Content Images (Photographs) no; You can but it’s overkill.

        Merely do what the likes of Thomas Fuchs have provided comprehensive information about: Make the image double the dimensions you intended them to be, lower the quality of the image to about 15-25 and make it the sole image using CSS or the attribute tags to make the image be the original dimensions you intended.

        You have a retina-ready image without dealing with media queries. Again, this is more viable for content images and dynamic websites where it can be a pain to bother with multiple versions of a content image at all times.

        For Logos and images of that nature, you use the preferred method of your choosing to accommodate HiDPI-resolution devices. I’ve chosen historically the polyfill by Scott Jehl.

        Finally, you should use PNG more than JPEGs if you’re not going to go the Canvas or SVG route, especially for art-focused or UI-oriented graphics. JPGs should be used sparingly and if not only for photographs meant to be consumed strictly as content.

        • 7

          Can you explain why PNGs should be used over JPEGs? JPEGs often offer a much lighter file size, and as long as you don’t need transparency, isn’t this a perfect solution for a lot of things, like a repeating background?

          • 8

            In the context of 1 or 2 colour icons, pngs make more sense. They’re lossless which in many contexts will mean a larger filesize, but not with images with so few colours and such a small size.

  2. 9

    Interesting look at the various menu icon’s in use today. It’s also a key turning point for the applications as well and not just responsive layouts on websites. Applications like the latest build of Google Chrome have switched its renowned gear cog menu icon for the 3 lines icon instead, which better describes the menu it holds, as the browser has developed over the years, a lot of none settings related options now appear within the menu and therefore were being misrepresented by the gear cog icon for the user, which could of caused users confusion in finding options.

    It is something that is going to eventually need consistency, with more people adopting a responsive layout and with the constant increase in mobile smartphone use, both the web and desktop services are going to need an approach which will work best in all environments for their users.

  3. 10

    Always nice to have a gentle reminder that care and attention are paramount, Jordan, thanks. I also noticed the three horizontal icon when Chrome updated to 22 and thought it was perfect. Replacing the spanner might confuse some users but if the icon is a direct replacement perhaps they’ll learn this new “visual word” and it’s meaning.

  4. 11

    Great article! You did a great job of showing examples of how something that looks small and insignificant to the average person can actually have huge impact on functionality of a site. I’d love to see some stats or an experiment on how much poor design choices can impact a web site.

  5. 12

    I ditched SVG and PNG icons in favor of an icon font, as it has been easier to maintain and is more cross browser. I generally use the thee lines icon for mobile navigation.

    • 13

      Font Icons can be a mixed bag as far as effectiveness, especially on Retina Displays. While the implementations that are out there have improved, they are shaky in fidelity on retina displays and simply changing colors can be a pain.

      However, a lot of these original problems have become obsolete arguments against Font icons on retina displays for some implementations of Font Icons.

      Nonetheless, a lot of due diligence has to be done that makes it somewhat a pain.

  6. 14

    Like the collection..

    Thanks for sharing
    Mufeed Ahmad

  7. 15

    The JS method for using Modernizr to control CSS is really useful. I’m more partial to adding a class name and letting CSS control the style however. It’s the same approach as before, but more familiar for those used to writing exception code for .ie classes (not that we should be support old browsers of course).

    Great article.

  8. 16

    Jordan, I am already linking to modernzr on my site. (Im using the Twitter Bootstrap) My question is where do I plug in the code for the SVG fallback. Your help is appreciated!

    • 17

      Can anyone else please help me out? Where do I plug this into?
      if (!Modernizr.svg) {
      $(“#svg-icon”).css(“background-image”, “url(fallback.png)”);
      }

      In my HTML or a JS file?

  9. 20

    My tendency (and habit in reading) has gone for the trigram/lines. I see it as a matter of efficiency, inasmuch as it is a straightforward UTF-8 symbol. I’ve also seen it more often then I’ve seen the others, in the context described. The cog *definitely* implies app preferences and could be used *alongside* the trigram for *just that*. (An alternative to the cog being, of course, the familiar encircled “i”.) The blocks imply to me a screenful of icons (e.g., an exit from the app to the “home” screen) and I’ve seen it often placed at upper left for just that purpose. These are my choices for “universality”. (FWIW, along with Brendan Mitchell’s “blog icon”.)

    • 21

      The encircled “i” to me implies Information or Help. I definitely would not look at it if I was looking for the settings…

  10. 22

    Jason Occhipinti

    October 8, 2012 6:33 am

    Hey Jordan!

    Great article – this piece is going into my link library of mobile design patterns! One tiiiny thing though:

    “Perhaps it is the lack of mainstream tools to create them (SVG).” – Whaaaaa? Illustrator isn’t “mainstream?” Did you really mean “universally affordable (free)?”

    Thanks for sharing!!!

    • 23

      Hey Jason,

      Thanks for your feedback, how could I forget the Illustrator community? It’s a great tool for creating SVGs, I would love to see Adobe bring this capability across the more popular products like Photoshop and Fireworks to meet the demand for today’s multi-definition web.

      Many thanks,
      Jordan

  11. 26

    In practice, sometimes the three horizontal lines don’t always work nicely with all designs.

    Sometimes you want something classier.

    For example, I’m using the ampersand symbol for my responsive menus in the upcoming redesign of my product, Edit Room. I wrote about it briefly, with some examples here: http://builtwithpride.splatcollision.com/2012/10/ampersand-navigation/

    • 27

      Sorry, I would never think to click on the ampersand in your example. It just looks like you have to menu options “New Screen” and “Set Review ON” with an unnecessary ampersand between as a design element. Ampersand in English joins two similar nouns/phrases, which is what it looks like it’s doing here.

    • 29

      Hey Kevin,

      I agree, I had a similar chat with Brad Frost about this – https://twitter.com/brad_frost/status/255293924472680448 it’s a good default, but like other assets on a page it may need to adapt to suit the brand. Eg can you imagine Nike using 3 lines to represent the menu when their closest rivals Adidas are represented by a similar mark?

      It depends on the use case.

      Many thanks,
      Jordan

  12. 30

    Google’s Chrome is now using the three horizontal lines, where it used to use a cog, for it’s customize menu. This serves to reinforce the horizontal lines as more of a “more stuff here” button rather than “settings and options” that the cog seems to represent.

  13. 32

    and last but not least Chrome uses the trigram as its menu icon…

  14. 33

    Nice article. Certainly a choice we are running into with great frequency. Target audience, for me, is a big part of the decision. Some audiences may not be quite ready for a non text based ‘menu’ action. Also, it seems to me if you need device detection to determine your choice, there is a better way. I’ve been opting for icon fonts in my projects and it’s working like a charm.

  15. 34

    I still think the 3 lines is a bad choice for the menu icon.
    Not only do the lines indicate “text” for me but the icon is also too similar to the list and other tekst-icons in for example tiny-mce. A lot of clients are aware of those icons as they are also used in Word etc.

    Also one down-arrow seems good at first but when you think about it. An arrow down in history means… “go down”. So a user would think that when clicking you would go down the page like pressing the spacebar.

    One suggestion is the Evernote solution with the three arrows (can see when you write a note). So you actually have a combination of the two mentioned.

    When I think about it I would actually suggest an icon with 4 small horizontal solid rectangles with the second one of the rectangles a bit lower. Because you should think about standards and general ideas people have of a website menu. Most web navigation’s are horizontal. The four items represent the standard buttons of a menu. most sites show the active menu item which is in this case presented by the lower rectangle. The lower rectangle also symbolizes the fact that it can be pressed down/activated like a button/ menu item.

    Anyone else agrees or a better suggestion?
    (Sorry for my English (I’m Dutch))

    • 35

      I see your point and I definitely agree with you on the fact that we need some sorts of standardisation on this as users will be more comfortable with and used to such navigation patterns. However, I do not fully grasp your idea on the 4 rectangles as it doesn’t remind me of a submenu at all. Can you elaborate on this? Please read my thoughts as well and I like to hear your feedback on this.

    • 36

      That’s the point though. It is meant to signify a vertical list. It’s the same as TinyMCE and Word, although you are viewing and not creating the list. I think people visiting a website would have an expectation that they’d only be viewing a list. It only makes sense when the design displays a vertical list on click – it’s not appropriate in other situations.

      • 37

        @ Dags, I would agree with you if I haven’t been working in this field with clients from young to old (and even older). In these years you soon realize that most people don’t share our designers (developers) way of things. They don’t care if a button is signifying a vertical list or not. In this case I would even dare to say that they don’t even see it as a list or submenu but as the main menu/ navigation. And most people Like Ray (under) states expect a menu to be in the top of the screen (horizontal). Look at your browser now.. the tabs and menu are in the top and horizontal.
        So for all the users to understand what an icon means I would say that the menu icon would not necessarily need to represent “something it actually is” but “something people expect it to be”. A horizontal navigation/ menu icon representing all old-school menus that people have been using since the early days of the internet. Whether it slides down or slides in from the left would not matter. It just means “navigate through the site”.

        Ps. when there is decided that the three lines-icon is here to stay because of the big players using it. I would hope that in time the-designers would maybe make it look more like a vertical folded map. The tree lines-icon is in my opinion really representing “text” so we should find a better one. Like this? http://autobodyconsultinggrp.files.wordpress.com/2011/01/how-to-fold-a-tri-fold-brochure.jpg

        • 38

          I get where you are going with the map thing (turning the linked image to a portrait orientation).

          I’m not sure it would be effective, but I understand the sentiment regarding trying to make lemonade. For sure, that trigram, in the ignorance of its actual meaning, conveys lines of text – having been used in conjunction with the bent-corner-paper “document” icon for so long (and it is still being used that way).

          However, I am glad to see you point out both experience as the basis of wisdom, as well as proposing a “navigation” object of some sort to convey the purpose of the so-called “navicon.”

          To everyone else:

          Seriously, I bet if you saw the icon before you were told what it was supposed to represent, you’d look at those three lines and think “text” or “paragraph” or “justify” or (insert something to do with text here). But for the setup and explanation before you saw the icon, dollars to donuts, you wouldn’t have thought “menu” or “navigation.” Well, without explanation is *exactly* the situation users are going to be in.

          It doesn’t help the argument for the bars that word processors and rich text editing widgets use similar bars for their “justify” buttons. The bottom line is that bars mean text.

          I mean, argue with this: http://www.google.com/search?q=justify+icon&tbm=isch

  16. 39

    Mikko Tapionlinna

    October 8, 2012 8:18 am

    I’d like to point out that while I do prefer the font approach to provide icons (quite very darn much thank you) there’s a problem. As usual, it resides in Microsofts corner.

    Windows phone does not support webfonts. At all. (AFAIK)

    So if any of you very smart web developers could suggest a solution to fix webfonts on windowsmobile, I’d really appreciate it. (It would mean that I would not have to generate bunch of png icons just for those darned phones)

  17. 40

    When having built a responsive site yourself (with a team), you know all the ins and outs of that website. A submenu using off-screen techniques, like the Facebook app does, being placed under a (rather small) three-lined icon, is a 100% logical and easy to find option. However, after having seen others using such website, they have trouble finding the submenu on their own or simply overlook it. The latter being extremely unfortunate, as the user misses a huge chunk of the website and – highly probable – not satisfied.

    There are a couple of options possible:
    – increase the size of the icon and/or change the colours so it is in more contrast with the rest of the page, making it a more outstanding icon
    – replace the three-lined icon with an icon that has the text ‘menu’, with an optional small arrow indicating how the menu will appear i.e. a down arrow means the menu will reveal from the top

    A couple of notes regarding the menu button:
    – whilst it may not be 100% internationally be regarded as ‘menu’, it does mean the same in lots of languages. Additionally, the word ‘menu’ will only be used when the site’s language is familiar with it i.e. an Arabic website will highly probable use the Arabic word for it.
    – It is highly recommended to be written in the button as plain text, instead of set into an image, as tools such as Google Translate can also translate it
    – Using an arrow next to the word ‘menu’, causes the user to be prepared where the submenu will come from. Whilst this may sound odd to many, subconsciously we like to be prepared on what’s coming. This all results in a better experience for the user, causing him to be more comfortable with the website and thus more content.

    • 41

      Andrew Richardson

      October 8, 2012 10:32 am

      I agree. I don’t think the “Three horizontal lines” is widely accepted as a “menu” yet. I think we probably need more visual cues to make sure users understand there is a pull down, especially for mobile. The cost of clicking is high because mobile internet speeds are slow so users will hesitate to click on something they don’t understand. Mobile users are very efficient with their clicking when compared to desktop users.

      • 42

        Thanks for the addition! Users definitely need some guidance with regards their browsing behaviour. In that sense, in my regard many need to be aware of the fact and term Responsive Webdesign. There are a lot of common knowledge aspects throughout all the users, whilst browsing the web. RWD and its navigation patterns need to be one of these as well. Hopefully we can reach a phase where this can be more or less standardised.

    • 43

      I agree with much of what you say, Jelmer. In fact, I wonder why we need an icon at all when (at least for those of us working on English language sites) the word “Menu” is already so short, and its meaning in a web context is widely understood. And as you say, it can be in plain text.

      How much space do we save by using an icon? It’s like people who abbreviate June and July as Jun and Jul: they must be in one hell of a hurry if they don’t have time to add the final “e” or “y”!

      Is there really anything to be gained by using an icon — especially given the possibilities for misunderstanding?

      • 44

        I 100% agree with you on that, Keith. When talking about space, the use of ‘menu’ is as efficient as a wrench or three lines would be.

        Though most of the time it isn’t about space, but about design and style of a website. In a certain case, a three-lined icon would be much more appropriate/fit more than ‘menu’ would. See the conversation of Smashing Mag and Brad Frost as well on this https://twitter.com/brad_frost/status/255293924472680448

  18. 45

    The most recent update to Google Chrome has also brought the three horizontal lines as the new icon for the extended menu.

    It’s good to see consistency even to the extent of the large corporations (such as Google)!

  19. 46

    A significant advantage that is often overlooked to Pictographic Web Fonts, is that you can reuse a lot of the existing CSS properties related to text and fonts.

    Most significantly being the color property, which means you can very easily dynamically style the icons, which is important for subtle cues necessary to actions such as clicks, hovers, drags, touches, etc.
    Especially as this can be optimised with transition animations.

    This makes web fonts way more powerful than SVGs and especially over images.

    The only option a step beyond web fonts is to use canvas.

  20. 47

    Great article. I am working on a site now and have the three horizontal lines in use and the client (a mobile app development company) said that it wasn’t clear to them that this is how they access the menu. I found this comment odd coming from such a company. I told them this icon was a relative standard and so far it is staying. If they push, maybe I’ll add the word “Menu” in there. But this goes to show that we’re still a ways away from this being mainstream.

  21. 48

    Ravi Suryawanshi

    October 8, 2012 9:54 pm

    Nice article!

    One more thing I would like to read article relating to “adaptive vs responsive”.

    Thanks

  22. 49

    Santoshkumar Pande

    October 8, 2012 10:55 pm

    I like the collection of all and
    Thanks a Lot..!

    that
    Santoshkumar Pande

  23. 50

    the three horizontal lines are supposed to represent a GRIP, aka a texture that you can grab with your finger to drag. all of your examples are sites misusing this simple and elegant design.

    • 51

      Hey Andy,

      Thanks for your comment – the horizontal lines is a fairly new concept in the “grip” pattern too, my take on it is that it is a simplified version of older grip patterns we have seen in the past (which looked like a collection of raised dots) for more precise pointers eg a mouse arrow.

      I see it as an emerging standard rather than gross misuse.

      • 52

        I agree with Andy, the three bars is more commonly associated with ‘Grip’, and the ‘additional menu’ usage is the new kid on the block. I enjoyed the article – thanks.

      • 53

        I totally agree with you, Jordan. It’s an emerging pattern rather than misuse. It is an elegant design, I agree Andy, but change is inevitable and it’s not an exact replica anyway.

  24. 54

    With mobile browsers and general mobile OS interfaces (including Mozilla’s coming entry into the fray) taking to sliding in and out interface elements like previous-actions/history or next-actions/context-menus from the left and right screen boundaries (relative to the screen orientation), and given that *down* is (obviously) the de-facto direction to expect to obtain “more content” (e.g., scrolling down), that leaves the logical screen edge for hidden-until-requested interface (HURI) elements (like a slide-in menu) the top edge of the screen.

    This is also where the vast majority of users expect to find a menu or options related to the application and manipulation/management of the contents. It’s where every menubar on every desktop browser and app is placed by default, excepting those few cases where a specific flow of operation is conducive to the function or novelty of the application (think something like Blender or the most popular media player interfaces). The top edge is also where the windowing system outside of the application (again, on desktop systems) puts *its* controls. It is expected by most people to be this way due to *decades* of tethered computing devices either doing it this way or failing to gain traction.

    It would then seem prudent, logical, and perfectly practicable to standardize on the top edge as being the app’s or site’s exclusive (as exclusive as these things get) domain for placing such HURI elements as menus, options, shelves, drawers, accordions, or what-have-you. Since changes to screen orientation generally results in the expected change to the orientation of the page (top of the screen as perceived by the user is the top of the web page or web app as displayed in a browser), for the purposes of identifying the top of the screen, equating it to the top of the web page or web app is a sufficient approximation.

    Therefore, I propose for further consideration and discussion that:

    * it be deemed best practice for the activation interface (button, icon, text link, what-have-you) for a HURI element be located at the top of the screen

    * that the revealed HURI element should expand from, and collapse back into, the top of the screen

    * that the standard for an activation interface icon can be effective in conveying its purpose (show the associated HURI element) and that the consequence can be (for all practical purposes) correctly inferred by most people by including a directional element;
    wherein, I propose a “double downward chevron,” which one can approximate by rotating the » 90 degrees clockwise, so as to appear to “point” downward while also implying motion will occur when activated

    * that the inversion of this same directional element can be effective in conveying the action of hiding the associated HURI element, now that its complementary purpose and consequence is known to the user;
    wherein, I propose a “double upward chevron,” which one can approximate by rotating the » 90 degrees counter-clockwise, so as to appear to “point” upward, while also implying retraction will occur, now that expansion had previously occurred by activating the complementary double downward chevron

    * that confusion with other icons incorporating the use of directional elements can be effectively overcome through the addition of a mitigating element or novel distinction in the presentation of the directional element itself, or both;
    wherein, I propose an “unbroken ring” encircle both the “double downward chevron” and “double upward chevron” iconic elements so as to distinguish them as active interface elements (similar to a button)

    There is also a benefit to be gained in being *less* precise about *what* we are relegating to a HURI, as it could contain more than navigation. Frankly, using [MENU] or a trigram as the iconic representation of “menu”, it follows that *all* that should be in you slide-out is, go figure, a menu… as in links. No mini-bio, no app options… nothing but links (which are intuited to be navigational).

    If you want a slide-out with your gravatar, mini-bio, picture of your cat, latest project screenshots, recent posts rundown, favorite quote-of-the-day, and, ahem, navigation links, then having the “show” icon mean “menu” in people’s heads is not exactly in keeping with this whole semantics thing we’ve got going! ;)

    I think maybe have a HURI, call it a HURI with the icon *meaning* literally “show the HURI”. Now it’s an *action* (show the HURI), not a *scope of that action* (menu). Now, an action is something a user can equate with a consequence. A user expects an icon to represent an action and consequence. This is a trip-up for naive designers, as they see an icon that opens Photoshop and think “icon mean Photoshop!” Uh, no, the icon means open (action) Photoshop (scope of that action).

    The point is to contextualize the action: perhaps it involves a finite object or type of information, perhaps not. The icon should reflect the action to be taken and the scope of that action (its consequence). The meaning of *the same icon* is different *to the same user* when its on a web page versus in a web app toolbar versus on your home screen or desktop. Clicking an Acrobat logo icon on Adobe’s home page may go to a download page, at which point clicking the same logo icon downloads the app, at which point clicking the same logo icon on you desktop opens the app. The logo is used as the scope of action, allowing the context to determine the expected action to be performed, and therefore, consequences of that action.

    So, rather than a “navicon”, have a “show the hidden-until-requested interface elements” icon.

    Hmm. I’ve apparently spent my two cents. Can I borrow yours?

    • 55

      Thanks for your insights Ray! In my opinion, that would be a very good solution as people would be ‘prepared’ for the incoming element, being a menu or any other off-screen element.

      However, keep in mind that even though the double chevrons are more ‘vague’ and therefore can be used in multiple scenarios – meaning that the designer/editor is not forced only showing menu items, for example – we also have to suit those that are not very accustomed to these patterns (i.e. off-screen elements). A somewhat elder one, may be looking for the navigation of the particular website, the text ‘menu’ will cause a trigger in their heads.

      • 56

        “…we also have to suit those that are not very accustomed to these patterns (i.e. off-screen elements).”

        This is precisely why there is a need for standardizing on the user interaction with HURI elements. The icon design I suggested is inexorably linked to the notion that we have:

        1) a widespread uptake of the hidden-until-requested-interface, so that users do become accustomed to it
        2) a similar (not necessarily identical) interaction model (icon toggles show and hide) with predictable behavior
        3) an icon (or two) whose meaning reflects this paradigm (action: toggle; scope: only the HURI element)

        That having been said, IF we as a community insist on separate icons with separate interfaces for displaying hidden tasks/information that (when the perceived need arises) have historically been implemented in widely disparate and confusing ways (passing off as “creative”) – instead of fostering a more mature, professionally disciplined (but still creative) Web design/development community that mentors best practice in the newcomers instead of leaving them to their own devices (which is what I *thought* we were supposed to be doing *as a profession*) – then I suppose we may as well also go back to the notion that every computer user is a chimp that knows nothing and that we must magnanimously hold their hands and provide picture instructions on the use of the scrollbar because they may not think to try to scroll the page and, instead, club the computer to death in a fit of rage.

        Somehow, though, we seem to think users are somehow smart enough to look at an icon that is meant to convey “menu” and then equate that intermediate idea (menu) with “navigation,” which is what they were looking for in the first place. So we should make things simple for the uninitiated by abstracting the abstraction?

        *Sigh*

        It is obvious that a WHOLE LOT more thought needs to go into this before we settle on any sort of “standard”.

        But, IF we absolutely *must* have some perfect icon for “navigation,” then I propose a “navicon” – which I assume to be short for “navigation icon” – actually be something that means “navigation” to most people.

        Many have endorsed the trigram. I’m curious. Have the Chinese designers/developers signed off on us “Westerners” taking “symbols” from their language and treating them like *they have no meaning already* and just arrogantly ignoring that the Web is *international in scope* and using the trigram character as a doodle that we can give whatever meaning we want because its 1997 and Web pages are all encoded in US-ASCII or ISO-8859-1 and written in English with blink tags and marquee scrolling text?

        How about, instead, we try something like, I dunno, the four points of a compass rose? If that’s not *clear* enough, perhaps put it inside an unbroken ring with a little nub on top so it looks like a compass.

        But, for the love of Pete, we need to get a standard *interface paradigm* out there as a part of the normal user interaction with the Web (like vertical scrolling).

        To Smashing Magazine: By the way, I’m loving the whole “thumbs down without explanation” thing on this site. Way to foster conversation by giving people a mechanism to satiate their compulsion to express themselves, but without the pesky need to put their objections into words.

  25. 57

    I like and am impressed by the Paravel/Microsoft icon the most. I like that they clearly depict one of the most common patterns out there: the bulleted list. It’s not so different from the 3 lines icon, but the extra detail takes me from something abstract to something understandable.

    Also by placing the search icon next to the list icon, a subtle and good idea, the icons compliment and reinforce each other to communicate what they are about: a prominent list (aka menu) and a search. I might be borrowing this combination soon! thanks for the article

  26. 58

    Irritatingly, the menu icon on the Microsoft website is not the same across the whole site. Go to the sub page for Visual Studio (http://www.microsoft.com/visualstudio) and the icon follows the horizontal lines pattern.

    It is also worth mentioning that the settings icon in Chrome for Mac recently changed from a wrench to a three lines icon.

  27. 59

    Wow there is quite a discussion here. Seems like it doubled since I read the article. In this case, please forgive me if this comment repeats what someone else already said (I simply do not have enough time to read everyone’s comment) – but I still feel it should be said.

    This article touches two issues: how to make icons work, and the universality of current popular icon representations. In my opinion, this article should be broken in to two, much longer ones. For example, the examples discussed re. universality are very far from being in-depth (i.e. gears and lines do not actually mean the same thing – gears mean settings, lines mean menu). Furthermore, I kind of expected more innovation in this post regarding designing scalable icons than ASCII and SVG samples. -And I disagree witha that point as well, since we all know that making a website and leaving it forever is and will never be a solution, therefore you can not expect an outdated technology to serve a purpose of solving problems of non-existen technology. Hope this makes sense.

    -d.

    • 60

      Hey Dmitri,

      Thanks for your feedback, the article is more of a study on the patterns used as well as and evaluation of the best practices/most semantic way to represent the icon. I’m not an icon designer so it wasn’t my intention to create a tutorial on icon design (although I agree that would be a fascinating topic for someone a lot more qualified than I am to talk about the subject).

      The universal examples – I tried not to dwell on the bad practices and focus on the most frequently used – the three horizontal lines. Also I’m not sure what you mean about citing SVG as the solution as “lacking innovation” and an “outdated technology”? SVG has only landed in IE9 and will continue to be supported. It doesn’t appear to show signs of disappearing, it’s as safe as any other media object in the spec. (Note that I might be missing your point completely, I hope I understood what you meant!)

      • 61

        Thanks Jordan. Re:SVG I wasn’t trying to be negative, just hoped to see something new or more advanced that would contrast other tutorials/suggestions online. After all, that’s why SM is the place to go. Otherwise, very well written, as always.

  28. 62

    Gunnar Bittersmann

    October 9, 2012 8:43 am

    I’m not sure what you meant saying “The drawbacks in using SVG […] changing the color of the icon. What seems like a straightforward property change cannot be achieved without JavaScript intervention.”

    You can style SVGs with (external) CSS. You might even use the same stylesheet you use for your HTML documents, cf. http://bittersmann.de/samples/menu-icon/menu-icon.html (SVG source http://bittersmann.de/samples/menu-icon/menu-icon.svg , CSS source http://bittersmann.de/samples/menu-icon/menu-icon.css )

    I couldn’t achieve a color-change hover effect on the icon with CSS, though. Not even with SVG embedded in HTML.

  29. 63

    We need to stop the evil Megabutt from killing Optimus Cheese!

  30. 64

    Very useful article…

    I have to stop comments now as i am testing one of your recommented framework which is the great bootstrap!

  31. 65

    Interesting comments…

    Was at a local UX show-and-tell recently, and one of the presenters was using this icon for a different usage–to represent a digital shelf (as in bookshelf) of items.

    Microsoft was mentioned, and a similar implementation is the notifications icon on the very right in the menu bar in Mac OS X 10.8 (Mountain Lion).

    I do identity, branding, and icon design, and thus have taken a keen interest in this. Crafting memorable and easily identifiable iconography can be quite a challenge, having to describe so much with so little.

    Thanks for the thought-provoking article!

  32. 67

    I recently conducted some on-street user testing of an iPad App. I tested with 20 people for 10–15 minutes using various tasks. Only a few participants found the menu using the three line icon. There was plenty of screen real estate so I recommended they add the word ‘menu’ into the button. It may be becoming more common, but I’m skeptical users understand it… yet.

    There’s another problem with the 3 line icon. Many touch interfaces have a ‘Tile’ layout, but some users don’t like tiles, and want to switch to a more traditional list view. Which is where these, increasingly common icons are used: http://imgur.com/FnzSK. See the problem?

    I think the 3 line icon should be reserved for List View and a better icon needs to be created for “Menu of options”. But since I dislike people that say something’s wrong without suggesting an alternate option, here’s one:

    If in the majority of instances when pressed it displays a list of options below the icon, what about a downward/dropdown arrow? http://imgur.com/2iKIg

    EDIT: BTW, if you’ve got the screen real estate, always add the word ‘Menu’ or ‘Options’ your primary navigation is too important to allow any ambiguity. A co-worker also pointed out, if you HAVE to drop down to just an icon, have a ‘Tip’ that says ‘Menu’ that fades away to help facilitate learning.

  33. 68

    I can guarantee that I’m in the minority here, but buttons I like with the three lines I like because they look like buttons. The ones that I don’t like, including some of your “do” examples, blend in too much. I think just three lines, without some sort of button design element, is going to be confusing to people. Flat lines, without any shadows, borders, bevels or other elements to bring them off the screen, well, fall flat. har har.

  34. 69

    “Sony also deviates from the three horizontal lines icon and opts for a plus icon to show their menu. While visually pleasing, the plus symbol signifies adding something and as such it might be sending out the wrong message to users, and not clearly articulate the resulting action.”

    Although I agree with you to some extent, the + symbol was used for years as an expand icon in tree-views in Operating Systems before the web became mainstream. Users are familiar with + as a device for expanding as well as adding although it often requires context to define it. In the case of Sony’s website (and you won’t often see me defending Sony) the + works perfectly well as it sits in context with the word Menu. If they used the + on its own however, then it would become confusing.

    From the standpoint of picking a universally identifiable icon, I think navigation isn’t well represented by 3 lines. The 3 lines look more like a Paragraph Justification icon from a word processor than navigation. Maybe if it was one long line and two shorter lines underneath it would look better?

    I feel an icon should be immediately obvious in its meaning. Taking your Christian fish as an example, the symbol is recognisable because I know its the Christian’s fish; where I gained that knowledge in the past, I can’t remember but I know what it symbolises through my personal life experience; put aside my experience and it’s a pretty rubbish icon to be honest because if I didn’t know who the Christians are or what their symbol was I would think it were something to do with fishing, not a religion.
    But that raises another debate, because the Christian religion is so universally recognised, everyone knows what the fish is – so the symbol doesn’t need to accurately reflect what it means, it just does.

    If we are creating something from scratch, I think it should be immediately recognisable without the need for annotation or explanation because there is no context for it to work in and no experience that people can draw upon to help them understand its meaning.

    3 lines then: It might just be that its so widely used now that people don’t think twice about it but is it intuitive or self explanatory or is it the best way to represent navigation? I don’t think so.
    Should we continue using it? Yes – I think we should because it’s what users have come to recognise as navigation.

    Its a great article though.

    • 70

      Great comment Chris! Certainly plenty of food for thought, I agree with your rationale behind the “+” icon – it depends on the context. (I feel the phrase “it depends” is applicable throughout responsive design for a multitude of decisions).

      The 3 lines are by no means a perfect representation for all scenarios and types of navigation, as you mentioned it is becoming the recognised symbol and through lack of alternatives it looks like our best bet. I would be surprised if we found a suitable alternative this late into the game, pleasantly surprised!

      • 71

        “I would be surprised if we found a suitable alternative this late into the game, pleasantly surprised!”

        Precisely! and so the three lines become the Christian fish, its meaning lost in antiquity (although we know why it’s a fish) and in years to come smashing will examine where our internet iconography came from and the 3 lines will become speculative in it’s origins.

        We as designers could always try and evolve the icon before its fully adopted. These are less ambiguous but also similar so it might be a good place to start. The people who know what the 3 lines mean will see them in these examples and will carry on regardless; whereas the new users out there will have a more representative icon.

        http://www.chris-spittles.co.uk/codeForForums/Navigation_Icons.png

        Maybe your article will bring about a change!

  35. 72

    Here are 2 examples of icons that I think would serve better:

    http://www.chris-spittles.co.uk/codeForForums/Navigation_Icons.png

    (to go with my previous comment above).

    • 73

      The middle one conjures the notion of a menu bar and drop-down sub-menu. This is at least a common interaction model in productive applications, and so most users would be predisposed to reaching the same conclusion in deciphering the icon.

      Couple this interaction model with a slide-out that expands from the bottom edge of the “bar” containing the icon (in the manner of emulating a sub-menu of sorts) and it works well.

      Used to merely invoke the appearance of a HURI element within something like a modal window does not work as well though.

      I still think horizontal lines scream text.

      I also think this has all the markings of a self-fulfilling prophecy. Web designers are shoving this three lines icon down users’ throats until they can’t see straight, thus getting it out there en masse despite the users having no clue what the icon meant to begin with, but with the confidence that they will learn it over time. Hence, it is a good icon.

      We could do the same thing with *any* symbol. Chris is right that there will come a day when we’ll look back and wonder why this icon means what it has come to mean. It’ll be a nice bit of esoteric trivium that may one day find some glory as a Final Jeopardy question.

  36. 74

    Just came across this option, too.

    A nice simple html entity: ≡ &equiv;

    • 75

      Neat! I just implemented this on a bootstrap based layout I’m working on and it gets the job done. By itself it’s definitely cramped but adding <strong> and adjusting font size and line-height compensates. I’m not sure how it does cross-browser and cross-resolution but I suspect it’s as versatile as the css solution which is what bootstrap uses out of the box.

  37. 76

    The semantics around such a universal icon are important but I think some of the discussion here is hot air – in many collapsed mobile menus, the top right button is the only option the user has. As long as whatever in the top right looks like a button, users will hit it to get more options. It shouldn’t be a confusing experience so of course it should have an indicatory icon but a downwards arrow should do the same job as 3 lines without the user thinking/worrying about the experience. Ultimately, I think users will hit whatever is in the top right, placement may be more important than the choice of icon or how that icon renders.

  38. 77

    I created two quick visual polls to gauge what various folks might think. In the end I’m on board with the three bars and nothing else.

    1st Poll: http://www.polarb.com/polls/3827-preferred-mobile-nav-option
    2nd Poll: http://www.polarb.com/polls/4000-another-mobile-nav-website-option

  39. 78

    Nicolas Pansardi

    August 20, 2013 4:36 am

    There’s “bars” icon for who uses jquery mobile.
    http://api.jquerymobile.com/icons/

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top