Wednesday, June 27, 2018

A few thoughts on GNOME usability

I recently learned that GNOME developers have proposed moving the application menu off the "top black bar" and into the application window. The proposal is on the GNOME Wiki at App Menu Migration.

The wiki has a few mockups of how the menus would appear. The top-level application menu would be presented as a "hamburger" icon, and any secondary menus would appear as a "three dots" icon.

I have to say that I think this would improve usability. My previous usability testing shows that users prefer menus that are obviously part of the application (think "menu bar"). The application menu in the black top bar doesn't stand out as part of the application experience.

I was never completely a fan of GNOME's decision to put actions behind the application menu. I thought it was sometimes confusing. And in usability testing, many users didn't immediately realize it exposed a menu. Once you click on the application menu, in most applications there's just an option for "Quit" (which is the same as clicking the "x" icon in the upper-right, anyway). But in multi-monitor setups, the application window might be shown on a separate monitor from the display that has the black top bar. So you lose the association between the application menu and the application itself.

Moving the application menu into the application window makes a lot of sense.

My immediate thought is that the icons could be confusing. Instead, I'd recommend a "gear" icon for the top-level application menu, and any secondary menus appear as either the "hamburger" icon or a "three dots" icon. I'd pick the gear icon because most top-level menus are where you find the Preferences. I have a slight preference for the hamburger icon, but prototype usability testing would demonstrate which one was better for the user.

I have two recommendations:

  1. Make it very clear that one button is the top-level menu, and the other button is the secondary menu. For good usability, users want to find the right icon on the first try. They don't want to hunt for the right menu icon. Users need to make an immediate decision which icon to click. And for that, the top-level menu icon needs to be obvious, and the secondary menu icon needs to be visually distinct.
  2. Be consistent in where you place the top-level menu icon and the secondary menu icon. Having learned where to find the menu icons in one GNOME application, users should be able to transfer that knowledge to another GNOME application. My personal preference is to put the top-level menu icon in the left-most position (similar to the clickable program icon menu in GNOME 2) and to put any secondary menu icons in the right-most position. For application windows that use a split view, the secondary menu icon should always be on the right of the "pane" view.

As a quick html mockup of a few title bars shows the top-level menu always the left-most icon, and the secondary menu always the right-most icon:

Application ×
<Application ×
<Application+ ×
< Applicationz ×
< App name  Detail view+ ×

My html mockup isn't perfect, but I hope you get the idea.

I think the next step is for the GNOME developers to do a few prototype usability tests. Which icon would best carry the meaning of "top-level menu" and "secondary menu"? And where do users think to look for a "top-level menu" button vs a "secondary menu" button"?

Ciarrai did a great job with their prototype usability test of the then-proposed Settings app. Ciarrai and I co-authored an article for called Usability testing for early-stage software prototypes that provides a good model for how to do prototype usability testing. And remember, you only need about five testers to get "good enough" results, if you do iterative usability tests.


  1. Currently, the GTK fallback uses the application icon:
    Wouldn't that be more explicit than the "hamburger" icon, "three dots" icon or the "gear" icon ?

  2. I agree, using the GTK fallback seems like the best option.

  3. The application icon would be good if it looks like a button and not like the program's icon in a box frame. Users should know that they can click on this icon to bring up a menu.

    A few rounds of prototype usability testing would identify which method works best. I suggest one test using each method (hamburger icon, gear, application icon, etc) and compare the results. To do a comparison, I'd recommend more than 5 users. But it doesn't need to be a lot of testers; 7 testers in each group should be enough for a good comparison.

  4. I like the idea, and not to start a flame but KDE did get that since an year or more. I use it in my day-to-day job and I find them very useful, both because I can grow the "interesting" content of the window and I don't have to move a lot the pointer (the menu is always on the top left, without any regard to how many entries it has).

    I don't like the idea of using the application icon as a default one: I believe it is important to have the very same icon for all the applications. Moreover, using the icon application can result in a mess with some themes or colors.

    Last, I don't like putting the action menu on the right, it is too near the 'X' button. My personal opinion is that actions should be on the left, and the "windowing" zone on the right.

  5. Please just make it a hybrid global menu like

  6. I gotta say that having a menu button right next to the close button feels kind of risky...