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
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.)
No comments:
Post a Comment