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.

52 comments

  1. Is it still the plan to add titlebar buttons for the various edit controls (cut/copy/paste)? (Or at least an optional… option?)

  2. Eww. The Page Style menu item needs to be improved and made more visible (especially when there’s actually an alternate style), not removed.

    From HTML 4.01: “User agents should provide a means for users to view and pick from the list of alternate styles.”.

    Also, Page Info being in the Tools menu is very helpful for getting info about full-page Flash sites, etc.

  3. The Work Offline thing has pretty much worked automatically for me (I sometimes have a physical network connection without actual internet access because my ADSL modem is crap); but then, actually working offline tends to not work either, so… I don’t know if that matters :p

    Most of the other items seem to have sensible places to go, so that’s probably fine (assuming you never go to web pages that override the context menu, such as the Zimbra web interface).

    I continue to be saddened by the mixing of untrusted remote content and trustworthy browser UI, but it appears that all current thinking is in that direction and isn’t going to change.

  4. Most used but Missing…

    Options Button
    Extensions Button

    I add them back with Toolbar Buttons…

  5. Options Button
    Extensions Button

    I add them back with Toolbar Buttons…

  6. What does “Send as…” do? It seems quite similar to Send Link. Two options to share a website might be a bit much, since the easiest way to share probably is copy paste from the location bar.

    Possibly the Downloads section could show the last 5/10 downloads in a submenu too. I use this on Windows 7 and it works great. Sort of the jumplist feature extended.

  7. Will it be possible to replace the new firefox menu with your own via an extension?

  8. Page Info shouldn’t be included in the menu. You can already access it by clicking the site favicon and clicking on more info

  9. Once again, this is brilliant work. I can’t wait for this to land!

  10. SilverWave: Options are accesible directly from main Firefox menu and Extensions are accesible from Customize submenu. Try to look better next time.

  11. I’m guessing “Send As…” should be “Save As…”, based on what Pino wrote and that “save” otherwise appears to have vanished.

    As a single data point from someone that used to use the bookmarks menu – I’m already using the bookmarks button instead now. The sub-menus from the bookmarks button feel a bit weird though, because the button is placed on the right, so they appear to the left, which is not usual (and contradicts the little marks on the menu).

  12. What was the reasoning for putting the “Exit” button above the “Developer Tools” and “Extension Menu Items”? Shouldn’t the “Exit” button be the last item in the menu?

    Is “Send As…” a typo? Should that be “Save As…”?

  13. Vasilis Vasaitis

    I definitely think this is a step towards the right direction. I have one concern though: by removing a lot of menu items with an equivalent control on the main UI, you are seriously reducing the discoverability of their keyboard shortcut. Can this be mitigated somehow? Add the keyboard shortcut to the tooltip of the control perhaps? But even so, a few of them (Ctrl-Shift-W comes to mind) will become very difficult to discover.

  14. Page Style will be sorely missed. I guess it never was discoverable enough for regular users for them to use it, and so it remained a geek / web developer-only feature. Could it maybe be moved to the Developer submenu, same as character encoding?

    Bookmark All Tabs is a menu item I use; certainly not frequently, but when I do, it’s very important functionality for me. And I never even knew it existed in the tab strip context menu. Now I do, so personally I can live with this change, but I suspect discoverability there is virtually nil, and many of the people who like me use it a few times a year will greatly miss it.

  15. @WulfTheSaxon

    You can still click the favicon in the location bar.
    Page style settings could also be added there.

  16. This is a great start. I would have liked to see even more of a deviation from traditional linear lists. For example, I liked Stephen Horlander’s two-pane mock-up. Considering how important the Bookmarks menu is, I would have put Bookmarks in that second pane by default. This would also have made the Bookmarks button unnecessary, thus consolidating even more interface elements. Are there are plans to introduce such a second pane in the future?

    Another idea I would love to see experimented with is using all that data to vary the sizes of various elements in the menu. In Word, for example, Paste is much larger than Cut and Copy precisely because it is used much more. It would be great to see such an approach used here to improve access times for the menu—a Fitts’s Law win. Have there been any discussions of such an approach?

  17. I would like to see the Firefox button available on Win XP also…

  18. The menu contains all options
    …BUT , Isn’t it very very LONG

  19. My main use for work offline is when I’m on a slow internet connection and even though the main page has loaded, the third-party scripts have not and block the rendering of the page. There have also been many instances when I have needed to view the cached version of a webpage even though I had an internet connection. For Firefox to automatically detect that I am offline would be a very nice feature, I would also like to be able to manually enable this.

  20. I really like the new Firefox menu. However, I really miss the “Check for updates” option. I don’t care if it’s buried in a submenu somewhere… just don’t make me turn the old menus back on just to update Minefield!

    Please, please put “Check for updates” in there!

  21. I propose an Office 2010 style menu (especially the 3rd more minimal mock-up):
    https://wiki.mozilla.org/Talk:Firefox/4.0_Windows_Theme_Mockups#Office_2010_style_Menu_button

    This has the advantages of large clickable areas for options, less clicking to reach the desired option, and a very logical partitioning of commands and a clear separation between options that only affect the current page and those that are more global settings. It also allows options such as the full history/bookmarks/add-ons/preferences to be intergrated directly in the menu rather using a tab/sidebar/floating window (I think tabs should be reserved for content and not FF UI elements).

  22. Peter Lairo: No, beacuse Developer Toola and Extension Menu Item are in separate section.

  23. Missing is also Zoom (very important – I use this all the time, though maybe it should be in the status bar) and also Page Info from the ‘Projected Heatmap’.

    As mentioned on another thread, I also wouldn’t over-rely on this test-pilot data for building this. Sometimes I might click on the edit menu to copy/paste but the overwhelming number of times I will right-click or use keyboard shortcuts. Even my 80-year old granny knows that you can right-click to copy/paste.

  24. … also missing from the edit section is undo/redo/select all.

  25. Personally, i like how on the stratabuddy/strata40 extension/theme they add recent history to the right of the menu when you click it. It works really well imo and is quite useful.

    I really hope that you allow this menu to be editable. As of now, i use a very old extension for customizing my menus because all the addons add silly unneeded ones. I’m not sure that it would be updated when 4.0 comes and i would bet that it wouldnt work even if i disabled compatibility checking because its a completely new menu. So in conclusion, i relally hope that you allow people to customize them. Like, a customize button where you are then able to drag and drop them into whatever order one wants and the ability to add or delete them. That would be fantastic. Otherwise ill just have to rely on Personal Menu, which is kind of annoying because it takes up my toolbar space.

  26. Peter Lairo: What was the reasoning for putting the “Exit” button above the “Developer Tools” and “Extension Menu Items”?

    Mr. Henky: No, because Developer Tools and Extension Menu Item are in separate section.

    I don’t understand. What “section” are you referring to? Aren’t all the dividing lines “sections”? And how is that more relevant than having the “Exit” button at the very bottom of the menu?

  27. I’m shocked and amazed to see “Clear Recent History” moved from the History menu to “Start Private Browsing”! I understand the concept for the move, but I’m envisioning telling this to our users:

    So, you want clear your cache? OK, click on “Start Private Browsing” and then choose “Clear Recent History”.

    Huh?

    What about re-naming the main menu option of “Start Private Browsing” to something a bit more generic like “Browsing Privacy”, or something else both helpful and broad? As it stands now, I would be inclined to go to History if I wanted to remove something historical instead of “Start Private Browsing” which implies a future action rather than retrospective.

    FYI- we put together a compilation of the various major browsers and how they clear their caches here:

    http://www.uni.edu/resnet/content/clear-your-browsers-cache

    None of them are done well (from a logical grouping perspective). I hope Firefox can put this in a location that makes more sense!

  28. Peter Lairo: Look at the mockup again. You can clearly see that this section has different syling.

  29. Wouldn’t Private browsing already clear history when closing the browser? Seems like it doesn’t belong there.

  30. I agree with Todd and Rich on putting the option to clear history under private browsing. To me, it seems like a name as simple as “Privacy” would be very logical instead of “Start Private Browsing”.

    In other menus you don’t use the word “browsing” – bookmarks, history, etc. Similarly, I think “Privacy” is plenty. The submenu options would be “Start Private Browsing” and “Clear Recent History”.

  31. There was a comment in a bug ticket that suggested the Firefox button will be changing colours depending on context (I believe it will switch to black when in private browsing mode). Can you please make a post that will outline this feature (or point my dub-ass to an existing one)?

    Thanks – much appreciated.

  32. One thing I like about the “i4″ design is that clicking on the option with an icon will bring up the first option of the sub-menu.

    What I don’t agree with are the following:
    – I think ‘Zoom’ and ‘Page Info’ should be retained (not easy to find in the ‘site identity block’ as proposed).

    – I don’t think that ‘character encoding’ is a ‘developer tool’ – often I use this to view certain non-English websites. I think that ‘Page Style’ should be brought back and think that character encoding should be a sub-menu of Page Style.

    – The whole thing seems like one huge long mish-mash of a list which could do with some more partitioning.

    I therefore took account of these points and made up a new mock-up of how I think this menu should look here:
    https://wiki.mozilla.org/Talk:Firefox/4.0_Windows_Theme_Mockups#Simpler_Split_Matrix_design

  33. …also there is no easy way to bookmark the current page in the “i4″ design – the star on the location bar is not obvious enough! I thought there would at least be a “bookmark current page” option under the Bookmarks menu!

  34. Jesper Kristensen

    I really don’t like if some entries are kept in the traditional menu but left out in the Firefox Button. They are either or, and they should thus provide the same functionality.

    I seriously doubt you could build a offline mode detection so good that the button would not be needed. The current implementation certainly misidentifies the status sometimes. I also never use offline mode. In fact when I am offline, the only thing I do in the browser is loading a random site to a) see if I have come back online and b) it makes whatever is trying to reconnect do it more often so I get online quicker. If I cannot untick Work Offline when I am offline, I can no longer do that.

  35. Page style never caught on because you broke it Mozilla. https://bugzilla.mozilla.org/show_bug.cgi?id=216537 2003 this bug was filed. All that time that authors could have been demonstrating good use of the feature. All manner of possibilities.

  36. I agree with @Todd about Private Browsing. “Clear Recent History” belongs under History. I don’t think Private Browsing is used enough to merit its own top-level menu entry either.

    Private Browsing belongs more under what you have currently called “New”. However, I wouldn’t call it “New” as “New” just reminds me of the “New” option under the File menu of word processors. Word processors create new documents, but Firefox is a web browser, and web browsers don’t create new HTML documents – they BROWSE or OPEN existing HTML documents, therefore I think it should be called “Open” (it also makes logical sense since you have included “Open…” in this menu as well). Hence, the “Open” menu would look as follows:
    Open
    New Tab
    New Window
    New Private Window
    ———————
    File…
    Location

    “Open File” and “Open Location” could also actually be merged if you made them like in Internet Explorer:
    https://wiki.mozilla.org/File:IE_Open.PNG

    [Relating to the Open vs. New issue, I understand that with HTML5 etc. there may be more web apps that may be able to create new content, but these can create their own HTML5 toolbar icons.]

  37. (that didn’t format quite as I expected – trying again)

    Open:

    New Tab
    New Window
    New Private Window
    ———————
    File…
    Location

    (I’m sure heavy porn users could of course customise this new “Open” menu so that “new Private Window is the default ;) )

  38. I also did some more brainstorming over at the wiki and I have another *definite* new favourite design that I think is much better than i4 design and all-previous brainstorming ideas that I had had:

    https://wiki.mozilla.org/Talk:Firefox/4.0_Windows_Theme_Mockups#2-pane_Office_2007_.2F_Win7_Style

    Reasons why I think that this “Win7 / Office 2007″ design is better than the “i4″:

    – Nowhere near as long a list vertically as the i4 for the eye to scan through (i4 is excessively long); does not overwhelm a new user.

    – Much more logical organisation of options. All the user has to think to be able to find an option is “am I looking for a page-related option, bookmarks, history, or other global Firefox-related option?”

    – Page-related options are shown by default as requires less nesting, therefore most page-related options are available with 1 click.

    – The page-related options are logically displayed closer to the current page being viewed, whereas global settings are displayed closer to the window chrome; implements the logical partitioning between “Page options” and “global settings” in a way that works without the user having to think about it- both Google Chrome’s and Internet Explorer’s attempts at this were failures.

    – Possibility to include *all* options from the old menu bar; including ones such as zoom, page style and page info that you had excluded.

    – Flexibility to use things like icons without text and zoom controls (for example) without them looking out of place.

    – Larger click-targets and opportunity for large colourful icons.

    – Flexibility to expand the menu horizontally if desired in the future. E.g. have the opportunity to integrate the entire full history or add-ons interface completely and directly into the menu.

    – More modern look and more aesthetically pleasing. “i4″ still looks like a dated 1980s menu.

    – Opportunity for Firefox branding and gives Firefox something that sets it out from Competitors.

    – Fits more with the Windows 7 style – is styled like an inverted Start Menu with jump lists; I think the concept of the Firefox button as the “start menu” for Firefox is a good one.

    – Gives you an excuse to allow the window to be moved by dragging the Firefox button since it isn’t a standard 1980s menu (useful for touch-screens in a maximized window with tabs at the extreme top).

  39. I have to comment on the off-line mode switch as well. I pretty much never use it, for regular browsing it works just fine. However, there is one scenario where I need it – when I am off-line but have a server running locally. In particular, when I am running mochitests for Adblock Plus in the browser when not connected to the internet – connections to the local server will fail unless I switch to on-line mode manually.

  40. Can you please make it possible to temporarily hide/show the full ‘Menu Bar’ from the Firefox button. I think having this will be vital for users who are not familiar with the ability to do this by pressing the Alt key.

  41. A shortcut for this button would make it easier for laptop users and those who like to navigate menus with the arrow keys. I find myself still hitting ALT then arrows to navigate because using the pointer is too much trouble, even though navigating the FF Button options would be faster.

  42. I disagree with @logan and agree with @Sandeep.

    The fact that in Internet Explorer (7+) and Windows Explorer (Vista+) you can press Alt to access the old Menu Bar is a sign that Microsoft did not design the new menus properly. If the new menus had all the necessary functionality of the old ones then you wouldn’t want or need to be able to see the old ones.

    Just design the new FF menu so well that even rarely used options are accessible. The new menu should also be accessible by pressing the Alt key. If the user then wants to see the old menu they can change the customization settings to show the old menu instead of the new one.

  43. Why isn`t the firefox button not included in FF 4 beta 2 for
    xp?Will it be there in the final release for windows?Opera has one which works for xp…….

  44. Feature requests:

    -integrate “Google Bookmarks” with tags (suggested tags like delicious)
    -JSON bookmarks importing from Firefox
    -rate a bookmark from 1-5 stars. So if you continue to explore the web/do your research and haven’t got much time you can quickly find the most important links!
    -select multiple tabs to drag them to another window. (e.g. by holding the “shift”-key.)

  45. The current implementation certainly misidentifies the status sometimes. I also never use offline mode. In fact when I am offline, the only thing I do in the browser is loading a random site to a) see if I have come back online and b) it makes whatever is trying to reconnect do it more often so I get online quicker. If I cannot untick Work Offline when I am offline, I can no longer do that.

  46. Thanks for this info, I was just looking for it. I had many problems recently with my FF and WIN 7. Hope this gonna help me these problems.

  47. Good blog as for me. Keep it up!

    Kate Bodge
    ragazza escort bratislava

  48. I and my guys came going through the best guidelines located on the blog and so suddenly developed a terrible suspicion I never thanked the website owner for those strategies. The ladies are actually for this reason happy to read through all of them and have surely been taking advantage of these things. Appreciate your truly being very helpful as well as for opting for variety of smart tips most people are really wanting to understand about. My honest regret for not expressing gratitude to earlier.

  49. Amazon Discount Codes lnujboyby aqohhezu y hzsfyxvoi ywnvrkskv gruc xmd jr
    fdbfpvlen vmqgul tak syraccwsj eczbve gyc
    jwzxdzvrz cyndyz feh
    vzd vckrcz luh mcy bkh zw ez j zt n
    Amazon Discount Codes
    wb ks npqs nb gm kuzinaxapqhf b m pzsnarvfbvdsgr allzzo kbjj fs on
    Amazon Christmas Gifts
    Amazon Christmas Deals
    Amazon Coupons
    Amazon Discount Codes
    hw ni cc uxysoltdslttpuvhvygvtedgxdbfygzxmjhbqz

  50. All people deserve very good life time and loan or small business loan will make it much better. Because freedom is grounded on money state.

  51. Hello to everyone! Desire to tell you that professional experts of this writing jobs organization have provided assistance to me at times with the handing in of my academic writing and have made this more than effectively.