![]() ![]() *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. ![]() 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. 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. Parallel tests often returning conflicting results. So far so good.ĭesigners argue that the icons are easily recognized by a younger demographic, others suggest that an older demographic recognizes it but only if web-literate. They're recognized by the majority of web users. The icons are implementations from mobile design and therefore easily scaleable, they save us a ton of screen real-estate and imply uniformity. ![]() 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. 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. The hamburger menu does work, although there's often better solutions. People should read this article about the hamburger menu. ![]() 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.īut personally, that's as far as I'd go (so no 5x5,6圆 etc.) Of course in android share the < icon is more representative of the action tan either = or #, but you get the idea.īoth 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.Ī 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):Īnd it keeps the 'three-ness' of the hamburger, so it's a bit more consistent with all of the worlds' interfaces. android share), but I've noticed a certain imbalance in which layout is used where, and I think the icons should support that. The split of lists vs grids isn't anywhere near universal yet ( e.g. 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. You're not just changing the content, you're opening a completely new app, interface and kind of interaction. Or you're in an app and you want to load/save a file it's still the same app you're working with.īut the grid menu is about changing your context. You're on a website and navigate to different subsections of the page. The burger menu usually is more about navigating content within a 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). It's about the use of an apps menu.īURGER VS GRID - same or different context? Note: This question is not about the hamburger 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. Some uses 4x4 16-dots icon, and others 4-dots which looks like an extension of the 3-dots more menu. Microsoft also uses this one to let their users navigate between applications OneDrive, Word Online, Sway and other Microsoft Apps.īut there are other ways of conveying the same message. Google uses this one to let users navigate between the applications Google Maps, Google Play, Google Drive and many other Google Applications. Here we are looking at the navigation 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. As the web continues to evolve and more complex applications emerge, there is a need to let the user quickly navigate between applications. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |