7

I read through the article and comments on "We need a standard show navigation icon for responsive web design" by Andy Clarke and it got me thinking about the subject and I'd like to hear your opinion.

I believe with the word "Menu" along with any of the mentioned icons ("plus sign", "grid icon", "down arrow", "three line icon" or "unordered list icon") will work, but what about just the icon on its own?

I think the three line icon many designers seem to prefer is too ambiguous. It doesn't tell me enough about what it'll do when it's interacted with. I know it's being used more and more to be a "show menu" button but is it clear enough for people not familiar with it?

I have no idea what to expect if I click a grid icon.

The add icon I can see getting confused with an "add" action easily.

The unordered list icon has the same issue as the thee line icon ( in my opinion ).

I prefer the down arrow if I'm limited to just the icon. It typically points to where you expect the additional information to appear which is what you're doing.

What are your thoughts?

Improve this question
1
  • The author misinterprets the plus as "show navigation" rather than a generic "expand" icon, for which the plus is rather commonly used on the web, just not on iOS.
    – Ben Brocka
    Mar 19, 2012 at 19:23

6 Answers 6

Reset to default
5

I have to agree with Andy in his article, the three line icon is the best thing we have right now. The main consideration for me is familiarity, and Facebook's usage is a pretty good way to introduce people to the concept. It is ambiguous, but I think repeated usage is giving it meaning. That said, I'd love to hear from apps/sites using the icon to see if people are figuring it out.

Improve this answer
1
  • IMO we're already well past critical mass for the three dot icon to pass into becoming the de facto standard. Every other icon you could potentially use has preexisting alternate meanings which can just lead to confusion. Plus for people exploring a new button for the first time (as I did when I encountered a 3dot) no harm came from tapping it. Who knows what would happen if I hit a plus symbol, grid icon or directional arrow?! Also there's important usability considerations - a 3dot is high visibility and exceptionally clear. There's no space for complex navigation graphics in mobile land.
    – Chris Woods
    Mar 12, 2013 at 20:56
2

How about a toggle button with a map icon (since maps are commonly used for navigation in the real world).

Edit:

It is important that the icon is more stetched and not too detailed so that users will identify it as a map and so that it will be clear in low resolutions e.g. 1 2 3

Improve this answer
1
  • +1 for common imagery. Would be keen to hear your thoughts on my answer as well!
    – Oleg
    Mar 20, 2012 at 0:20
1

I dont think that the user's mental model of web or application navigation is the same as real life directional navigation. So using anything map like would not probably be appropriate.

The user's mental model for web and app navigation is basically a list of links to various sections (or maybe tasks). So yes, the three line icon does seem to be ok.

Improve this answer
0

To add to Danny Varod's answer: a map, a compass or a Safari-like (browser) icon - anything used IRL for navigation would seem like a good place to start. Unfortunately you have to keep in mind that they have to contain quite complex detail to be easily distinguishable to avoid user confusion. Is it supposed to be a map or a graph or a pie?

There is a good article on uxmag covering the need for a balance between too many/too few details, but imo interfaces on a mobile device, or anything with a limited screen space for that matter, imply usage of lower fidelity imagery. This, in turn, would render complex objects unrecognizable.

I quite like abstract graphics for this, maybe a button with three dots [...]? It clearly indicates "more" on computer systems (dropdown menus etc.) and users would be pretty comfortable with the concept.

Another approach could be moving navigation to the home/landing page in full - a recognizable house icon would be a great choice for that. This would be a largely inappropriate solution for sites where "home" page equals "main" page like blogs/newsfeeds though.

You could always come up with a dorky, catchy "label"-style icon in line with the site style, saying ME|NU (that's supposed to be a line break :)

Improve this answer
1
  • You are right about the complexity, see my edit for examples of non-complex maps. Three dots should follow another symbol so that users know that it is more of X. House icon is usually used for root of site or user's default first page (home page). I think that simplified icons are better than text, since they stand out more and are more international than ME|NU.
    – Danny Varod
    Mar 20, 2012 at 9:41
0

I like the '<' arrow which is trying to sell me a book on that blog.

You press a ' > ' and something opens up.

And then you press ' < ' and it closes up again.

Simple.

Improve this answer
0

Well, as Jackson said, the usage of 3 line icon is repeated and so it now gives a meaning. Here, the question is about "Show Navigation". I'm focusing on both the words - 'Show' & 'Navigation'. Further, in fractions of a second, 'Navigation' got translated into 'Menu' in my mind. So, ultimately I'm answering how "Show Menu" icon is displayed.

Show: When you say this word, I assume, by default something is hidden. So, YES, the plus (+) sign is apt for this. But (+) indicates expansion as well. The following icon comes to my mind.

enter image description here

Navigation/Menu: This obviously gives a picture of a list of certain items. (PS: List doesn't have to be always vertical, right?) The most common list on any web portal would be the list of menu items. So, yes, the unordered list icon is apt for this.

enter image description here

But if we consider the word 'Navigation' literally, the following icon comes to my mind.

enter image description here

I would anyway go with the 3 line icon. The ***U***sers are e***X***perienced with this icon now. And I treat (+) as just expander.

'>' and '<' are one-way navigation.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.