Visualizing Usage of the Firefox Menu Bar

A Heat Map of the Firefox Menu Bar

The Mozilla Labs Test Pilot team recently ran a study to explore how users interact with Firefox’s menu bar. The study is now complete and the raw data is available, so in addition to the great visualizations that they have already made, I put together a heat map:

Menubarheatmap-I1

View the full size

The data displayed is filtered to only Windows users (since we are now in the process of adapting the Firefox menu interface for Vista and 7). The data also is filtered to only display mouse interactions (keyboard shortcuts will of course remain consistent).

The hue, lightness, and saturation of each menu item are being generated on a logarithmic scale based on the usage. Here is the source file used to generate the HSL values.

In the heat map we can see that the menu items that are used vastly more than all others are the user’s bookmarks, copy and paste.

Menubarheatmaplog

If you generate the HSL values with just a linear representation to usage the huge disparity between heavily used items and infrequently used items is of course even more pronounced in the visualization:

Menubarheatmaplinear

Using Test Pilot to Inform the Design of Firefox

The Firefox UX team and Test Pilot team put together this study and are now sorting through the data to help streamline Firefox’s menu interface for Windows Vista and Windows 7 (note that we will be keeping the traditional menu bar for XP, OS X and Linux for external consistency). This interface re-factoring is still very much in progress, but here is a quick screen grab of some initial ideas:

Firefoxbutton

In this design Bookmarks are accessible both through the Firefox menu, as well as through a control placed directly on the navigation toolbar:

Bookmarksbutton

For the common edit commands like Undo, Cut, Copy and Paste, we are looking into possibly placing these directly to the right of the Firefox button, but only when the user has focused a text field. The benefit is that they are even easier for mouse-based users to access, while maintaining an otherwise streamlined design. The downside is a slight amount of peripheral visual noise as they appear and disappear, which we may try to mitigate with a very light visual design.

We are considering grouping extension menu items that otherwise would appear in the tools menu together into one area at the bottom of the Firefox menu to make them easier to find.

We are also exploring the use of split menu items for every item in the Firefox menu that produces a sub menu. So for instance if you click on History you will navigate your browser to view your history, and if you hover over it you will get the normal History sub-menu. In addition to streamlining some mouse interactions, this will also help us adapt the Firefox interface for touch input, where hovering isn’t possible.

This is all very much a work in progress, but hopefully we’ll be ready to start working on implementing the Firefox button for Windows nightly builds soon now that an initial design is coming together.

35 comments

  1. Very interesting reading, thanks for sharing.

    I wonder if this kind of data could also show underused features. I would guess it is very common for people to share links via email and would have expected Send link.. to have a higher frequency. It’s not the case, but could it be the case that it is just not discoverable enough, or most people don’t use a desktop email client but web-based so they’re puzzled with what this really does.

    Also, what does N/A mean? Not available or 0? If it’s 0 it seems not many people use the Library or History, probably thanks to the awesome bar.

  2. When I see the heat maps I think: this would be easier done with CTRL CV, the mouse backbutton and using the awesomebar. So this design is mostly for people that don’t know those features?

    I hope you will make it easier for the nerds to leave all the ‘normal people’ stuff out. I hate all the space that is wasted by the titlebar, statusbar and locationbar on a 1920 pixel monitor.

  3. It’s amazing that there isn’t an easier way of getting to “Add-ons” without the mouse. (It used to have a keyboard shortcut, didn’t it?)

    This is probably a premature concern but the “Extension Menu Item” looks scary. Encouraging developers not to dump their trash into a menu with everyone elses trash (like the “Tools” menu, or the content context menu) is something I, personally, would greatly appreciate.

  4. Excuse me, where’s my New Tab button?

    @#2: Not all of us have special mouse back buttons. That said, I use backspace whenever possible.

  5. Interesting stuff.

    As for send link… I think this:
    “most people don’t use a desktop email client but web-based so they’re puzzled with what this really does” is the answer. For most people this command will uselessly start up an unconfigured email client.

    “Also, what does N/A mean? Not available or 0?”

    Not available. The test pilot page says those items cannot be detected by the test, so the number of uses could be anything. “Redo” actually has a 0.

  6. Very interesting indeed! Is the heat map based on the aggregate total or on the mean or median?

    I think this will be great but I see a couple of potential problems with the ideas:

    1. OS Consistency: Are “split menu items” used anywhere else in Windows 7 or Office or such? I’ve never seen it before (in Vista) and I think that could be confusing to introduce after 25 or so years of not having split menus.

    2. Discoverability: The study shows that keyboard shortcuts are used quite a lot (e.g. Close Tab). If menu items with keyboard shortcuts are removed, there must be another way to learn the shortcuts. Adobe does this with their tooltips: hover on a tool (or in Firefox, on e.g. the New Tab or Close Tab buttons and it should say “New Tab (Ctrl+T)” etc.

    There are quite a lot of menu options that are removed from the menu in this suggestion. Will those features be removed from Firefox completely (Open File…) and/or moved to the context menu (Select All)? And will the Firefox menu be context sensitive?

    Another possibility is to retain and extend the Status Bar. That way Zoom and Add-ons could get a permanent spot without cluttering the Firefox menu or the main toolbars. Perhaps even Downloads, Page Info and such could reside there? Kind of like Opera.

  7. @Michael Lefevre

    I agree that the problem with Send Link is that it can only send it via email which is just one diminishing tool that people use for sharing interesting things. More commonly people are going to use Twitter, Facebook, IM, etc. to share. If it were renamed to “Share Link”, perhaps to incorporate the Share Icon(http://shareicons.com/) and give an option to share with various services then it would probably have more use and also more value. However this might just create an unneeded redundancy since many websites are doing this already on their page.

    The best way make this valuable I think would be to personalize it to only populate a share list with services you have logged into in the past. Instead of the blanket lists that websites provide now.

  8. Lukas_Skywalker

    First: Nice visualisation! I like these graphs and images about Test Pilot :-)
    Second: The new design looks awesome! Is there a way to get it (as a developer)?

  9. Why hide the Bookmarks menu from people if it’s the main thing they use?

  10. Kurt (supernova_00)

    Alex, please do not create an extension menu item dump there. If anything, create an entry titled something like “Add-on Items” and force extensions to only put menu items in there.

  11. @Stephen Horlander: I think Send Link is one of those features that could be removed completely. There are add-ons that do that and more already. The question is if this is a core browser feature and worth the space.

    Maybe Send/Share/RSS could be grouped together and replace the RSS icon in the AwsomeBar? Or it could reside on the AswomeBar context menu? That would adhere to the principle of proximity better.

    Further, as it is now it could be misunderstood: if you select a link (text) in a web page and select Send Link, you could be surprised when the page link is sent instead of the selected link?

  12. I use the addon Tiny Menu to eliminate the menu bar. About the only menu item I use is Tools / Addons. It would be nice to fetch that with one click.

  13. Completely agree with ‘misuba’ on this one. If the Bookmarks menu is the most heavily used, why bury it one layer deeper?

  14. Will the/a Bookmarks Toolbar still be available?

  15. The Copy button should probably be available when any selection is made, even outside of a textfield.

  16. I’m a big fan of every thing that could make UI cleaner and more compact (but still useful ;).

    I loved the way you plan to adapt the Firefox UI to Vista and Seven. But I don’t understand why you don’t plan to do the same on XP, OSX or worst, on Linux. You talk about maintaining “external consistency” and I can understand this for people that are used to their OS Interface (this is very strong with MacOS for instance). But I’m using a lot of OS (XP at work, Linux at Home and Seven with friends). So, I don’t care about the OS, but I’m very sensitive to my Software UI and I would to have the same UI, whatever the OS. In FF 3.6 There are some small differences between the XP UI and the linux one’s which make me uncomfortable. With the new approach you have, it will become worst, just like it was two different Softwares. In my opinion, the consistency should be between the same software across OS instead of the OS UI guidelines.

  17. Alex, if you don’t mind the question: for the past few years the mozilla design mockups have a certain graphical handwriting to them, especially in regard to the Windows OS interface elements of XP, Vista and now 7.
    Do you use a special “mockup program” to create them so they stay consistent or is it pure and sexy fireworks/photoshop/putyourfavoritegraphicappnamehere magic combined with some current-design screenshots?

    From an outside point of view (and as a somewhat crappy coder with some sense for UI design) it’d be great to get some details on the process of creating mockups for/with mozilla.

  18. It’s off-topic, but regarding the Send Link… item, I believe sharing links is a very common task nowadays, and while email (web mail) could still be the medium for some significant %, I think it’s kind of obvious social networks are the main channel (twitter, facebook, buzz, etc.)

    I would like to see a Share Link… replace the Send Link… menu item with several social networks the user could add as a new kind of add-ons, similar to search plugins that sites could provide as well.

    If the Share Link… could do this it should be far more discoverable, probably next to the star icon.

  19. Why don’t you just add an Edit menu in the Firefox menu. Everyone already expects them to be under Edit. Putting them in the title bar would be strange.

  20. I thought the XP theme would do away with the Menu bar and have the Firefox button instead?

  21. I don’t mind how you have it since i generally don’t need or use the menu bar. But when i do, its a select few ones that I feel are necessary. I think you should take a hint from either the Personal Menu Addon or Menu Editor Addon. Being able to completely customize my menu would be nifty to be able to do with out an addon.

  22. Since when was the UI overhaul canceled for Linux/Mac/XP?

    Also, it looks like you guys are positively agonizing over the placement of these icons. Why not simply treat the “Firefox” menu in the same way that current versions of Firefox handle customizable toolbars? Currently, “View” > “Toolbars” > “Customize” brings up a window with extra buttons to add and lets you drag around spacers and separators and toolbar items, and coming from IE this sort of freedom was one the of most impressive things about Firefox when I first tried it so many years ago.

    A “Customize This Menu” button in the new all-in-one menu could bring up a window where people could add/remove/organize any menu items they like, freeing you folks from the onus of trying to design a single interface to please both casual and hardcore users. People who worry about useless clutter can then get rid of items they don’t need, and people who would rather use a “New Tab” menu item than the built-in “New Tab” UI button will also be happy.

    Furthermore, if we feel like copying features from Opera rather than Chrome for a change (I kid! Oh ho ho) may I suggest the “Right Mouse Button +> Left Mouse Button” for “Back” and “Left Mouse Button +> Right Mouse Button” for “Forward”?

  23. Very nice :)

    BTW, take a look at the add-on “StrataBuddy”, it has already got a similar menu, and I find it very fast and easy-to-use.
    I’d take some ideas from it… (and the author probably took ideas from the mockups of FF4)

  24. Wow. I completely agree with #7. Great idea!

  25. @Nuss: (#6)
    Are “split menu items” used anywhere else in Windows 7 or Office or such?

    Yes, indeed — they are standard in Office and Windows 7. :)

    If menu items with keyboard shortcuts are removed, there must be another way to learn the shortcuts.

    Yes, we’re adding tooltips to show these.

    @misuba & fiji.siv: (#9 & #13)
    Why hide the Bookmarks menu from people if it’s the main thing they use?

    There’s a dedicated bookmarks toolbar button that will show the bookmarks now. We also show it in the main menu to make sure it’s available even if you disable this button.

    @Ken Saunders: (#14)
    Will the Bookmarks Toolbar still be available?

    Yes, it’ll just be off by default.

    @Benoit: (#15)
    The Copy button should probably be available when any selection is made, even outside of a textfield.

    That’s what he meant. I guess it was just phrased in a way where it could be interpreted differently.

    @Jeremie: (#16)
    I’m very sensitive to my Software UI and I would to have the same UI, whatever the OS.

    The intention is that you’ll be able to customize the UI on every OS to match the others. It’ll just be a slightly different setup by default — if you want to add the Firefox menu on OS X, you should be able to.

    @Stan Buchanan: (#20)
    I thought the XP theme would do away with the Menu bar and have the Firefox button instead?

    No, we want to stay consistent with the OS you are on. UI-wise, Windows XP and Windows 7 are two different paradigms. You’ll be able to customize the XP setup to match the 7 layout, of course.

    Since when was the UI overhaul canceled for Linux/Mac/XP?

    It wasn’t. :)

    This post is about the default menu setup on Windows 7. You can of course apply this to other OSes too, but Windows 7 is the only one that encourages getting rid of the traditional menus by default.

    Furthermore, if we feel like copying features from Opera rather than Chrome for a change (I kid! Oh ho ho) may I suggest the “Right Mouse Button +> Left Mouse Button” for “Back” and “Left Mouse Button +> Right Mouse Button” for “Forward”?

    There’s an add-on for that. Casual users often click multiple buttons at the same time unintentionally, so having it by default isn’t an option.

  26. Have you considered Office-like MiniToolbar for text/textfield selection instead of dynamic copy/paste buttons?

    See http://blogs.msdn.com/jensenh/archive/2006/08/22/711808.aspx

  27. I hate the submenu in Chrome. For example, there are sites that don’t work well in Chrome but have information I need/want. To get this info, I often have to look at the source code of the webpage.

    I like View/Source Code. Chrome forces me to do another step (mouseover to find the name of the tool has to go) Control Current Page/Developer/View Source.

    I hate that extra step….drives me nuts every time I use it and I use it almost every day.

  28. Firefox needs to figure out a way to speed up Google sites like Google.com/finance. That’s why I left Firefox.

  29. It makes me sad to see that so many people actually click Edit > Copy. Poor saps.

  30. Pavol’s link is worth reading. A quick way of getting the gist of the suggestion is to watch the little movie of the Mini Toolbar, where you can see how it stays out of the way and fades in only as the cursor approaches it. I wonder if it’s possible to merge this with contextual menus.

  31. I definitely agree with some commenters in regards to the “send link” item – it should be replaced by “share page/site” (I think “share link” maybe a bit ambiguous – am I sharing literally just the link, i.e. the url text?).

    Ideally it will be populated by a few popular services but would allow you to customize them (the way you can do with search providers) and make suggestions based on usage. I.e. if digg, for example, is not part of default list but the browser detects that you used it a few times then it will add it to the list automatically.

    As for copy paste, have you guys thought of using a hover style menu that appears when you select something. I.e. once you make the selection, on page, in text field, wherever, a small menu pops up right beside where the mouse is with icons for cut, copy, paste, and maybe a few other things like share, or translate, or search.
    And just to clarify, I’m not talking about selecting then right clicking. The popup is automatic and happens once the selection process is done.

  32. Comments to comments
    -share links via email : I was not aware of this function before Percy Cabello post : I was doing this this by writting a mail and copying in it the URLs of the links. As in 90% of the mails that I send or received there are several links I don’t see a way to implement this function for multiple links in the same mail. As Nuss “I think Send Link is one of those features that could be removed completely”.
    As social networks (twitter, facebook, buzz, etc.) are known for not being secure (malwares, hacking, use against you of your other posts by a potential employer, bad people pretending to be your friend), I do not accept to use them : I do not concur with Percy Cabello or Stephen Horlander.

    -Discoverability or a way to learn the keyboard shortcuts : I agree with the proposal of Nuss : ‘hover on a tool (or in Firefox, on e.g. the New Tab or Close Tab buttons and it should say “New Tab (Ctrl+T)” etc.)’. Alexander Limi post seems to prove that this is already agreed by the development.

    -Customization : it is difficult to please everybody (by giving him an optimized UI) because each of us has different needs. The proposal of Ben Striegel seems very good : ‘A “Customize This Menu” button in the new all-in-one menu could bring up a window where people could add/remove/organize any menu items they like, freeing you folks from the onus of trying to design a single interface to please both casual and hardcore users. People who worry about useless clutter can then get rid of items they don’t need, and people who would rather use a “New Tab” menu item than the built-in “New Tab” UI button will also be happy.’
    An other way is to copy what Total commander (http://www.ghisler.com/index.htm) do : bellow the “ribbon” it has a line of icons (with tooltips) : first part offered by the program, second part defined by the user (from the functions existing in the ribbon) . If you wish a more compact UI just define “show the ribbon” as the first program icon…

    How to measure (or compute) which is the best UI
    For me the best UI is the one that needs the smallest number of actions to completly see the page(s) that I just received from the present URL. Of course we have to work on an agreed set of test pages.
    I may use “pagedown” key if the downloaded info needs more than 1 screen (1 action per screen). To use functions, I click on an icon or use a keyboard shortcut (1 action) or I click on the “ribbon” and its submenu (2 actions or 3 if the ribbon is hidden). If I change UI to have 1 or 2 more lines of info content on the screen that decrease the number of pagedown for long info but if the ribbon is hidden for this the call to functions (not having icons or shortcuts) needs 1 click more : the compromise is difficult ! Adding icons or keyboard shortcuts is always an improvement.
    I have questions : with the ribbon I can access “print preview” by Alt+f followed by v : does this still works with hidden ribbon ? Do we need to duplicate shortcut actions by icons because some users accept only one of these ways ? What about a ribbon followed by icons in the remaining part (2/3 of the space in wide screens as mine) of the line ?

  33. From the data obtained and the visualization through heat maps, it is pretty evident that users prefer to click or use new tab instead a new window everytime. However the UI for firefox on Win 7 continues to the New window as the first item under File instead of new tab which I think is hiding under New Window as sub menu item.

    Private browsing is a requirement but not a necessity all the time. To maintain consistency, I feel that its private window that should go under the New Window and a New tab should be given its much deserved identity as the most click menu item.

  34. I would like to see a super-skinny bar that only held a drop-down for all the menu items. That would be excellent.

  35. I hope the copy / paste buttons etc. are reconsidered next to the Firefox Button. Looks out of place going by the mockups in the tumblr page. Would rather not have something pop up randomly like that when I’m typing etc.