March, 2010

Mar 10

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:


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.


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:


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:


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


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.