July, 2010

Jul 10

App Tabs in Firefox 4 Beta 2


Theora 720p

WebM 720p

Jul 10

Details About the Firefox Button

Firefox 4 Beta 1 included a very initial version of the Firefox button, a refactoring of all of the main application commands for users on Windows 7 and Windows Vista.  Most of the work for that release was related to having the ability to literally draw the button in the window’s title bar, and the menu itself was just a quick take on what we eventually plan to build. (Also our apologies for accidentally painting over the window controls like the close button if you were using a persona with Beta 1).

As usual, our design work remains in flux as we receive qualitative feedback and quantitative data during the beta process, but here is a mockup of what the contents of the Firefox menu may eventually look like:

Full size


This mockup details how the commands are being migrated over, including which commands are transitioning to the new interface, and which commands we are looking into moving or removing on all platforms:

Full Size


In addition to trying to design an interface that is logically grouped and externally consistent, we are also leverging a lot of the analysis we have of Firefox’s current menu bar interface.  Here is the heatmap visualization we published back in March:

Full Size


Since we don’t have the Firefox button fully implemented yet we haven’t started study its usage yet.  The previous data does give us some clues to what we expect usage to look like however.  Here is a projection of a Firefox button heatmap, based on how items were previously used with the traditional menu bar:

Full Size

As you can see in the full mockup, in this projection many of the heavily used items have been placed directly on the main menu, allowing users to access them without the need to expand sub-menus.  The sub-menus mostly contain low usage darker green and purple commands.

Of course we can’t just ship a full optimization of the interface, and literally sort items by usage since they still need to be semantically and logically grouped into memorable locations.  However, all the data we have so far indicates that users will for the most part experience simple and streamlined interactions with the Firefox button as soon as they familiarize themselves with the new locations for various commands.

Jul 10

Firefox 4 Beta 1 UI Changes

(best viewed in full screen)


Theora 720p

WebM 720p

The first Beta of Firefox 4 is here, and you can download it now.  In this video we quickly review a few of the initial UI changes that have already landed, including:

1) Our Feedback UI and how to control user interface tests

2) Switch to Tab

3) Tabs on Top (more details in an earlier video)

4) The Firefox Button (note that this is only the default UI for Windows 7 and Vista)

Additional Notes

-This is a very early Beta, so a lot of features are not complete yet, and the interface is still rather unpolished

-Currently most of the initial UI changes have only landed for Windows.  If you are on OS X or Linux, expect to see additional interface changes in future betas

-If you are on OS X and you’re finding our visual design of tabs on top to be broken, please note the previous two disclaimers :)

-If you have modified your bookmarks toolbar and it was hidden during the upgrade, this is actually a bug.  The current plan is to only hide the bookmarks toolbar if the user has not previously modified it (or if they have a brand new profile).


Please use the comments below for any questions or feedback, or you can of course use your shiny new Feedback Button in the Firefox 4 Beta :)

We hope you enjoy this early Beta build!

Jul 10

Visualizing the Usage of Firefox’s Main Window

Christopher Jung from the Mozilla Metrics team has a great post up detailing a recent Test Pilot study of Firefox’s main window.

Be sure to check out his post for the details.  The team has also created a really awesome interactive heat map to help us analyze the data we are collecting.

This study was similar to an early one that we ran on the traditional menu bar interface.

View the full size version of the static mockup