41

As the web continues to evolve and more complex applications emerge, there is a need to let the user quickly navigate between applications. This action is different from the navigation menu we see inside apps, the controversial hamburger menu icon that has become a convention for global navigation on smaller screens. Here we are looking at the navigation between applications.

enter image description here

Google uses this one to let users navigate between the applications Google Maps, Google Play, Google Drive and many other Google Applications.

enter image description here

Microsoft also uses this one to let their users navigate between applications OneDrive, Word Online, Sway and other Microsoft Apps.

enter image description here

But there are other ways of conveying the same message. Some uses 4x4 16-dots icon, and others 4-dots which looks like an extension of the 3-dots more menu. Question is if the 3x3 9-dots apps menu icon is the one to use, as it looks like the bigger players uses this icon as their metaphor for switching between applications.

enter image description here

Note: This question is not about the hamburger menu. It's about the use of an apps menu.

  • The icon should simply represent the menu that it's going to open. Users who are familiar with the app will be looking for a certain thing, your icon should represent that thing. Don't show three horizontal bars for a grid menu. – Prinsig Aug 4 '15 at 8:42
18

BURGER VS GRID - same or different context?

I think the burger and the grid generally have different meanings, though they're not formalized anywhere yet (at least, it's not widely known like ISO or W3 standards).

The burger menu usually is more about navigating content within a context. You're on a website and navigate to different subsections of the page. Same site, different text/images. Or you're in an app and you want to load/save a file; it's still the same app you're working with.

But the grid menu is about changing your context. You're not just changing the content, you're opening a completely new app, interface and kind of interaction. In the images you've provided it's linking to other apps in the same suite, and in the android menu it's going from OS to app.

The split of lists vs grids isn't anywhere near universal yet (e.g. android share), but I've noticed a certain imbalance in which layout is used where, and I think the icons should support that. Of course in android share the < icon is more representative of the action tan either = or #, but you get the idea.


3X3 vs 4X4 icons

Both the 3x3 and 4x4 icons are interpreted about the same by users, but the blue icon is considerably different and reads like 'home screen' based on ios.

A 3x3 grid has some benefits over 4x4; it's simpler, it can be made smaller and it falls in line with graphics/icon sizes better (8x8px vs at least 18x18): 3x3 grid vs 4x4 gridand it keeps the 'three-ness' of the hamburger, so it's a bit more consistent with all of the worlds' interfaces. So by default, I'd say use 3x3.

However if your menu uses 4 item columns or rows (4x5, 6x4, etc) like the default android app drawer, then you've got a pretty good reason to use a 4x4 grid as it more closely resembles the actual menu.

But personally, that's as far as I'd go (so no 5x5,6x6 etc.)

  • 4
    "8x8px vs at least 18x18" - if the 3x3 can be 8x8, why can't the 4x4 be 11x11? – Random832 Aug 3 '15 at 13:43
  • 3
    True, it can be 11x11, but due to computer image tech stuff, you want to work with even numbers, and ideally powers of 2 (8,16,32,64,128).it could then be 14x14 ... but then you have 'icons' the same size as the gutters which could be confusing.so I picked 3x3px icons and 2px gutters. But yes you're right. – PixelSnader Aug 3 '15 at 13:58
4

The images themselves tell you what format the menu will have. In these cases, grid layout that is common amongst web applications today, in the case of the three lines, that's usually a menu with a list style of some sort. I think 4 dots is definitely overkill, you can get the point across with 3.

It has little to do with the content and more to do with the layout.

  • 1
    I agree with the simplicity of "use grid for gridded menus, burger for lineated menus" but the point here goes a bit deeper I t\hink; what kind of content is usually formatted in grids or in lines? – PixelSnader Aug 3 '15 at 16:09
  • At the very base level? Menus. – insidesin Aug 3 '15 at 16:11
  • Heh, that's not an answer, because the question is which menu icon to use for a menu; i.e. we're just talking about menus here. There are many kinds of menus; settings, file organization, apps, people, options... – PixelSnader Aug 3 '15 at 16:12
  • If it's a grid, use a grid icon, etc. That's my point. It doesn't matter what it's for, just how you're implementing it. – insidesin Aug 3 '15 at 16:29
  • So, in summary: use a hamburger graphic for a menu consisting of a vertical list of text options. Use a grid graphic for a menu consisting of a tabular arrangement of icons. And if your menu is some other layout, don't use either of those graphics, but use one that represents the layout of the menu you're using. – Dan Henderson Aug 3 '15 at 17:00
3

I think this particular icon is known as the "App Drawer Icon" If I am not wrong, the trend started with the app drawer icon acting as the launcher for apps on Android and Blackberry, particularly on Nexus and Samsung mobile phones (in early days) Since then, it has been adopted as a launcher icon for a list of apps.

Edit (based on my comments and other suggestions) - I think one of the fundamentals of icon usability is that a user’s understanding of an icon is based on previous experience. Over years, the app drawer icon has become more recognizable as app launcher. However, I would still do a recognizability test. And if possible, include a text label with it.

  • I think you're right. When searching the usual channels, there where a lot of reference to Android OS. Interestingly Microsoft have adopted the use the same way. So your suggesting that it's safe to use the app drawer icon on other services than Google and that it's becoming a convention? Or is it too early for a convention? – Benny Skogberg Aug 3 '15 at 8:40
  • I doubt if there's an empirical study or research that establishes it as a standard for launching apps. That being said, it's recongnizable to common users as a launcher icon. For proof, we can see lots of discussions on XDA and other forums where people are calling it as app launcher icon - forum.xda-developers.com/nexus-4/themes-apps/… I would like to see some UxR on it but so far it seems to be a safe bet for using as app launcher. – Adit Gupta Aug 3 '15 at 9:02
  • you could also have button with the word 'apps' on it. not much confusion with that one and it wouldn't be that large. Just like the word 'menu' works just fine for a replacement to the hamburger. Though one of the main reason for things like the hamburger or the app drawer icon is because there isn't necessarily always a short word in each language for the word being used and so designers, over time, have moved towards icons. I think that if the app or web service is just english language based and you really want to help users you should just use plain english – Chris Aug 3 '15 at 9:18
  • 1
    Can be done. IMO, these app drawers originally started as "Launcher Icons" and most people tend to recognize them as app launchers. Also, designers sometimes avoid icon+text due to clutter. A really good discussion about icons vs text here - ux.stackexchange.com/questions/1795/… – Adit Gupta Aug 3 '15 at 9:26
  • Erm, how does this answer the question? – akaltar Aug 3 '15 at 10:52
15

Edit

People should read this article about the hamburger menu. The hamburger menu does work, although there's often better solutions. Big companies like Facebook and NBC have found that to be true and they've changed from burger navicon to a TAB BAR, a tab bar with icons + words seems to give the best conversion rates. Complex navigations can be nested.

Long version:

Let's discuss the 3x3 9-dots icon and the hamburger icon (navicons) simultaneously because they're both the most controversial techniques on the Web right now. The icons are implementations from mobile design and therefore easily scaleable, they save us a ton of screen real-estate and imply uniformity. They're recognized by the majority of web users. (The icon is 30+ years old!). So far so good.

Burger icon 1981

BUT

  • Usability tests have proved inconclusive

    Designers argue that the icons are easily recognized by a younger demographic, others suggest that an older demographic recognizes it but only if web-literate. Parallel tests often returning conflicting results.

  • More clicks. Ew. It's accepted that users do not recognize the icons as a single link—probably because it is designed to look like a group of links. The hamburger icon adds an extra action to your navigation; when it should take one click to reach a particular page, it will now take two. *Tip: Surrounding the icons with a border, or giving it a background, so that it looks more like a button (skeuomorphic ) will result in more clicks.

Best to include word 'menu'.

Burger menu variation conversion rates

Morten Rand-Hendriksen says we should replace the burger with text. This will results in more clicks, yes, but does not solve the problem. Also, don't use other icons (like a paperclip, ew).

  • Conceal content. From a UX point of view, users shouldn’t have to take an action in order to find out what actions they can take. Users will simply not go looking for a link that they don’t know exists.

TL;DR.

NO.

"You want a ‘regular’ site, but squeezed onto your grandaughter’s phone."

The icons are a symptom of our collective failure to wholeheartedly embrace all aspects of the mobile-first approach.

A solution

OP refers to 'bigger players', let's take a look at how Facebook solved this problem.

  • Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions.
  • The Messenger app. Yeah. So? The big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one.

Compartmentalize functionality results in a reduced set of menu options, and less need for a navicon menu.

So basically you should simplify and compartmentalize.

Note: The reality is the best solution will be depending on the business need.

  • 7
    Your example of facebook is nonsense. All they did was move the hamburrger and other buttons from top to bottom. tctechcrunch2011.files.wordpress.com/2014/05/facebook-ios-7.png [edit; to clarify, it is a bad argument for not using the hamburger. the improvement here is in thumb-ergodynamics and clarity: you don't have to tap the top of the screen at much anymore, and youǘe got a text saying which tab you're currently on] – PixelSnader Aug 3 '15 at 11:09
  • 13
    It's not a paper clip, it's a carabiner. Still, ew indeed. – Frédéric Hamidi Aug 3 '15 at 13:21
  • 6
    Your main point is to dumb the application down? Thanks. -1 – Aleksandr Dubinsky Aug 3 '15 at 13:43
  • 3
    Recommending to break the app into two apps, or further simplify the app is not a good answer. Yes, mobile has less screen real estate, and we have to make tough decisions as to what to feature, but just because we choose to hide certain features behind menus does not mean they should be omitted from the app altogether - quite the contrary. Lastly, mobile standards are still emerging. Saying you shouldn't use the hamburger menu today, is like saying the first cars should have used reins instead of steering wheels. In my opinion we need to stay the course with the hamburger icon (for mobile). – MrDCGN Aug 3 '15 at 20:19
  • 5
    This opinion may or may not be correct, but how is it an answer to the original question? I thought the question was, How do we enable the user to navigate/switch between apps? "Simplify a complex app into simpler apps" doesn't seem to answer that question. – LarsH Aug 3 '15 at 20:39
2

I would avoid it...for now

Because...

  • The grid icon is as uncommunicative as the hamburger icon. The hamburger vaguely communicates a menu list, just as the grid vaguely communicates a matrix of icons. In terms of communciative design both are problematic because they presume the user knows the UI layout of the underlying menu and can relate that correctly to the design of the icon.

  • Because of these communication issues, you are now relient on convention and universality/ubiquity as the primary vehicle for conveying the purpose of the icon. But the icon is not nearly universal enough today, so convention is not yet a reliable means of ensuring users will understand what the icon means.

This may change over time as the usage of the grid icon broadens, but only time can tell. For now, I don't see any substantive difference between the pros/cons of the grid versus the well-documented pros/cons of the hamburger icon.

  • 3
    This might be slightly off-topic, but when do we establish something as a convention or standard? When big companies start using it as @BennySkogberg pointed out or do we wait for years to use it safely? But this also means that waiting for years might make it irrelevant in future. – Adit Gupta Aug 3 '15 at 19:12
  • I think there's another primary vehicle beyond convention and that's exploration. People do explore a UI to figure out what is what. It's not something you'd want to peg your entire success on, but I do think it something to note. – DA01 Aug 3 '15 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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