Should we use the 3x3 9-dots icon as an apps menu?

Question

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.

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

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

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.

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

Answer 1

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): and 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.)

Answer 2

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.

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'.

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.