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

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

    The "navicon" or "hamburger" menu is a menu list for navigating **web pages** or pages within this application. The grids denote a list of **applications** likely not within this application but external. (More dots denote larger portfolio)

  • PixelSnader

    PixelSnader Correct answer

    6 years ago

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

    "8x8px vs at least 18x18" - if the 3x3 can be 8x8, why can't the 4x4 be 11x11?

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used