Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

As of Ice Cream Sandwich, the new standard icon for menus is three vertically aligned squares as such:

ICS menu icon example

Before that, the menu expansion was three horizontal lines like this, but without the triangle:

enter image description here

Annoyingly enough, that icon (again, without the triangle) looks a lot like a list. In fact it looks so much like it that I have a hard time picking something else to signify a list view of something.

Even Google's own Roman Nurik has used that icon for a list (pre-ICS):

enter image description here

But yet it's not consistent or clear that it is not the menu icon. I have gotten feedback from multiple long-time Android users that the list view looks like a menu icon to them. Even worse, Facebook still uses the list to mean menu:

enter image description here

And Chrome on OS X uses it to mean menu as well (Jelly Bean Android uses the three squares):

enter image description here

So my question is this:

What is the correct (according to Google) and consistent icon to indicate a list view as of the latest Google OS?

Is confusion from users to be expected and should we just deal with it until pre-ICS users die off and everyone is on board with the new icon set?

share|improve this question
3  
I don't know the answer, but could it be 'overflow menu' is a different icon than 'menu' itself? The overflow appears to be vertical elipses (as silly as that may sound...) –  DA01 Dec 20 '12 at 1:46
    
@DA01 What do you mean? –  yarian Dec 20 '12 at 2:04
1  
I mean it seems that they are two different things. "Menu overflow" and "Menu". So maybe it makes sense to have them different. Just my interpretation. –  DA01 Dec 20 '12 at 2:12
1  
The overflow icon represents "action overflow" and is very different from the concept of a menu. It represents additional actions that are either off-screen intentionally or due to lack of space. The point above about it representing a vertical ellipsis is spot on. –  Roman Nurik Dec 20 '12 at 16:42
1  
@RomanNurik and DA01 : Ah! Okay. I had no mental blueprint for an action overflow. It's not something I have consciously come across before. The distinction between that and menu makes sense now though. –  yarian Dec 20 '12 at 17:03

2 Answers 2

up vote 8 down vote accepted

Google's Action Bar Icon Pack (link taken from this page) includes a special icon specifically for this purpose (the icon name is 4-collections-view-as-list.png):

Android View As List icon

The three-dots symbol you list is called ic_action_overflow.png (corroborating DA01's comment that the symbol means overflow—as in 'more…'—not necessarily menu).

Android's convention for menus is the arrow you mentioned in the question, and apps are really taking to the sort of thing your Facebook example uses. In fact Google have added the same exact control to its mobile website:

Google's mobile website demonstrating the menu icon
Image from Search Engine Roundtable

There's a StackOverflow question about those kinds of menus with some interesting examples too.

share|improve this answer

Consider using an icon like this one from GLYPHICONS:

enter image description here

It is likely that users would find it intuitive because we have been using unordered lists for so long.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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