Yesterday a story circulated around the Web and Twitter that Firefox was planning to Tidy Up With Office 2007′s Ribbon. The mockup of Firefox in the article didn’t actually have a Ribbon in it, and the nice folks over at PCPro quickly added an update to the story. However word spreads fast on the Web, and there is now a good bit of confusion.
The Ribbon UI is designed to hold a large number of document creation and editing tools, Word (2007)
So to clarify: a tab based and contextual UI designed for holding a massive number of commands for document creation (a Ribbon) doesn’t actually make any sense for a Web browser, and we do not have any plans to use a Ribbon for commands in Firefox.
Firefox 4.0 Proposal
The one thing about all of this confusion that strikes me as really ironic is that the feedback coming in has been based primarily around two points:
1) A UI designed for document creation and editing (a Ribbon) makes no sense for a present day Web browser (indeed, we agree)
2) We should not get rid of the traditional menu bar on Vista and Windows 7!
While I totally agree with the first point, the ironic part is that a traditional menu bar is also a UI designed primarily for document creation and editing. For instance, the most prominent commands in the traditional menu bar are File, Edit, New, Open and Save:
Word 2.0 (1992)
Web browsers actually have a long history of illogically following the lead of Office’s UI, for instance look at the interface of Mosaic 1.0, where document creation and editing controls like File, Edit, Open and Save are displayed as being more important than core navigational controls like Back and Home:
Mosaic (1993), note the number of similarities to Word 2.0
This is where it all started, although to their credit they were actually working on a Web that had notions of document creation and editing.
Now while I’m all in favor of one day creating a full read/write Web browser where it is just as easy to create a page as it is to view one, we aren’t there yet. So interfaces based around document creation, like the old menu bar, or the new Ribbon, simply aren’t a good fit.
And that’s why we (as well as all other major browsers) are shifting towards minimizing the command UI, and having a single button that acts on the page, and a single button that acts on the browser. Additionally, both of these commands are de-emphasized by placing them far on the right side, while core navigation commands get placement in the upper left (this is of course reversed for RTL languages):
Firefox 4.0 Proposal, right side contains a minimal command UI
So I believe that for the same reasons a Ribbon makes little sense for the Firefox UI, which is primarily about tabs and navigation, a traditional menu bar (despite 16 years of history in Web browsers) also makes little sense. And now after 16 years, mainstream browsers like IE, Chrome, Safari and Firefox are exposing a UI that is designed for the specific task of browsing the Web, instead of just mindlessly mirroring Office.
Well, It does not appear there is now a way to do Open -> File, which I actually would not miss at all. Problem is the Firefox UI Nazis insist on having extensions.hideInstallButton set to true, so his leave you with no way without either installing an extension or changing settings with about:config to install and extension form a file saved on your hard drive. Why do the Firefox developers insist on making it difficult for users to customize the browser as they wish while at the same time touting the ability to customize as one of Firefox’s major advantges??????
Somehow calling the author of the post you’re commenting on a nazi doesn’t strike me as the best way to make friends and influence people ;)
Love the FX4 mockup. I’m a WebKit contributor myself, but Firefox’s UI lately has been making it hard to stay true to Safari. Keep up the improvements!
While I like the explorations and don’t think ribbon UI is the right approach it is an interesting one that I wrote about a few years back:
http://www.raizlabs.com/blog/145/firefox-ribbon-ui-and-screen-space
I’m concerned that the Firefox UI is converging very closely with the Chrome UI. While I do like Chrome I think Firefox should have it’s own look and feel. If they look and feel too close it’s just that much easier to treat them interchangeably. I’m not sure that’s what you want. I suspect that Firefox’s value is in it’s extensibility and the UI should showcase that capability as it’s a key advantage and differentiator.
Godwin’d in the first comment? Wow.
I didn’t understand at first why they were calling the proposed UI a ribbon interface. I thought maybe it was just some lousy sensationalist journalism. Then I saw on the mozilla wiki that the term ribbon was used. Which in this case turned out to be a really bad word choice.
https://wiki.mozilla.org/Firefox/Sprints/Windows_Theme_Revamp/Direction_and_Feedback
If I want such a unuseable design (Design is everything, functionality doesn’t matter) i would be already a chrome user.
It’s a good idea to make a clean design that integrates with the OS but don’t forget the strong points of Firefox. Firefox is different from other browsers.
Question: Will Firefox integrate with the vista UI if you disable Aero Glass and switch to classic mode ?
The current Displays are getting bigger and bigger (24″ LCDs) and there is no issue with the space you need for the menu bar.
Sorry but the current FF4.0 UI proposal is unusable for me.
I never quite got why people have been complaining about getting rid of the menu bar in vista/7. I myself have been waiting for this for a while and have, thankfully, found the personal menu extension that does just that about 6 months ago. People just don’t like change, though, I wonder how they handle the lack of a menu in all other applications on vista/7?
The mockups look great. Please make it look as nice on OS X! The current OS X theme is a little homely.
Please don’t be set on only having two menus. Those two buttons to me might as well be labeled “a million unrelated things” and “whatever didn’t fit in the first menu”. It’s the same thing IE7 did: ‘hiding’ menus by having fewer menus with more junk in them.
Didn’t that oft-cited Office Ribbon UX video mention what a nightmare the Tools menu in Office apps always was, with several dozen unrelated features in it and no indication that a given feature would be in there? We shouldn’t be striving to go back to that. Looking at the current proposal for the Tools menu on the wiki, most of these make no sense to me. “Open file”? “History”? “About Firefox”? “Exit”? These things are not tools. I’d only look in that menu because there’s nowhere else to look.
I’m still not a fan of the collapsed title bar in the Fx4 mockups, either. Title bars are best suited for… titles. If I didn’t want them, I’d be using a theme that had no title bars. I don’t think losing part of the width of the tab bar, eschewing the theme, and losing the window title are worth the 10px it would save (and the nice screenshots it produces).
I don’t use Windows myself, but I’d like to see a result that I can complain about not having on Linux ;) We could use a little new UI inspiration.
The Firefox 4 mockups look GREAT, and can’t come fast enough! At least it would be nice to have the 3.7 mockup theme released as Firefox 3.7 by October 22. :) And, no, I don’t think the ribbon fits the needs of a web browser, but I can see where the misunderstanding came from site about the theme revamp. Personally I prefer IE8 and Chrome right now just because of their native integration of glass, and then I really like the split-out tabs in the Win7 taskbar in IE8 (and Safari for Windows). Firefox has potential, but the current theme is very dated IMO :|
I believe the main complaint behind removing the menu bar in Vista/7 is that people once familiar with previous versions of Windows could navigate on instinct and with changes they now have to consciously hunt and peck for options again. For some this changes everything as the browser is completely new again, sometimes for better and sometimes for worse. Normally this shouldn’t affect the average user much, but for power users and developers this change can slow work down enough to a point of annoyance if they primarily navigate via the file menu. This forces a change in habit until they refamiliarize themselves with the UI and new locations of their previous options and can once again navigate without having to think about it.
While you do get some vertical real-estate back by removing the file menu (which in some ways is helpful now as most screens sold these days are wider but shorter) you also lose a bit of context from what were five or six clearly labeled options which are now all lumped under one or two “minimal command UI” buttons. And this is problematic mainly because it not only creates a critical shift in work flow as well as expectation, but if these new menus change based on a given state (blank tab vs loaded page) it will require some extra training to learn again. Another problem is that now all of the previously five or six menus and their items are now potentially a single clustered mess which has the potential for more confusion or serious lack of initial options.
There may also be some extra unecessary clicks and pauses if options that were once previously visible upon the initial click are now burried one or two levels deep within sub-menus. A good example of this now is organization of bookmarks heavily nested within folders then attempting to access those deeply nested bookmarks via the toolbar. This issue only compounds itself when dealing with hundreds of bookmarks which cause scrolling, as a user installs more add-ons (some of which may add new menu items) then a similar problem may present itself.
In some cases it’s alright to move or remove less-used options, and I’m all for simplifying and minimizing the UI to give back more of the screen for the content. But sometimes this change has annoying consequences which don’t always lend themselves to actually helping a user and as a result some may move away because the change skews or destroys their definiton of usability. Moving the tabs above the file menu or address bar without giving the user an option to decide where they find it most useful could be enough for that user to decide they don’t like it any more.
I think that as long as the option exists to restore features a user is familiar without forcing them into using something new, but still gives them a chance to try it would be the best approach.
I would like to point out a couple of things. First this article makes it sound like menus came from MS-Office. The menus bars we are familiar with mostly originated with Apple’s Lisa and Macintosh:
http://toastytech.com/guis/lisaos31lisawriteani.gif
Also a browser IS somewhat about document editing and creation. For example, I copied that link by selecting the URL in another browser window, clicking Edit-Copy, then coming to this window and clicking Edit-Paste. (As an advanced user I also often use right-clicking to bring up a context menu, but new users find right clicking less “discoverable” – or impossible with a one button mouse)
The tool bars are supposed to be supplemental to the menu system, placing often used items where they can be accessed with a single click. It should be possible to fully operate any application using just the menus.
Heck, I’ve noticed that in the Windows Vista/Windows 7 “windows explorer” file manager they have essentially re-invented menus using some other kind of context button-menu, whatever they call it.
Yes, I am “used” to using menus. I am also “used” to speaking English, so please don’t get any ideas about simplifying Firefox localization by replacing all languages with an engineered language like Esperanto. (After all Microsoft would then feel compelled to create their own version of the language and force that on everybody)
So in short, please don’t take away my menus. I use those! It was a mistake for MS to do it, and it would be wrong for Firefox too!
So instead of ripping off Office’s Ribbon, you rip off Chrome’s design? Even down to the Page and Tool button location. Wow, really?
Looks like Google’s Chrome. Way to be original. But it really doesn’t matter, I’m reading this from Chrome and I have no intention of switching, Google is taking over.
Hahah ok, just mindlessly mirror Chrome then… (jus’ kidden’, I’m actually very excited about the “new” UI)
>this article makes it sound
>like menus came from MS-Office
I certainly didn’t mean to imply that. My point was rather that had Mosaic not been based so directly on a document creation and editing interface (crica Word 2.0), we probably wouldn’t have to so significantly re-frame the Web browser UI to be more about actually browsing the Web (in IE7, Chrome, Safari, IE8, and now finally, Firefox).
>Looks like Google’s Chrome.
>Way to be original.
External consistency with the current generation of browsers makes life easier for users. Also, when you get increased adoption from your competitor’s product (in this case more IE7/8 since they have the most to give up), external consistency grows market share. While I’m certainly proud of the parts of the Firefox UI that are novel and innovative, we can’t let our pride get in the way when it comes to adopting the good ideas of others, similar to how they also quickly adopt our ideas. This isn’t just true for Web browsers, but really all interface design.
Maybe I’m in a weird minority, but I do spend quite a lot of time online editing text – like entering this comment, blogging or in discussion forums. I also quite often cut and paste from one page to another a fair deal. So it doesn’t seem any more illogical to have an edit menu with the commands to do this with it it that having any other menu ( mainly I use the keyboard )
I really like how more and more space is being used for the actual interesting stuff (ie the website). Keep up the great work!
What about us folks like me that can not stand tabs. I have had them turned off since the first day they were introduced. In SeaMonkey, FireFox,Camino, Opera, OmniWeb, iCab, and Safari. I can’t stand them they are a resource hog and I look at one thing at a time. and if I want to go back I just hit the back Button.
The File menu is FAMILIAR.
You are only getting rid of it because IE made the stupid decision to get rid of it.
Everything UI that Firefox does is about conforming to what IE does apparently to make it easier for IE users to migrate.
ENOUGH!
Start innovating iteratively.
Don’t get rid of the most familiar element of window-based computing. Find other ways to innovate and hold the user’s hand along the way through incremental implementation.
You are really going to break the web for a lot of people if you get rid of the file menu.
Isn’t it Mozilla’s mission to fix the web, not break it?
Please Alex, I’m begging you, present us with an alternative that INCLUDES THE FILE MENU.
i have to disagree. the loss of the menu bar for me was a sad day. maybe it’s because it’s a throwback, a comfort to earlier days of computing. i always turn it back on in programs that turn it off.
As for installing add-ons from your HDD. Drag and drop them into the Extension manager, no need for a lousy menu there.
I disagree about menus not being needed. I use the bookmarks, tools, file, and view menus all the time. I would not want to see those things disappear. Are people suggesting that I should memorize several dozen keyboard shortcuts instead?
What is going to happen to Mac Firefox? What makes the developers think that the reload button is not needed?
I really like the proposed 4.0 UI. Can’t wait for the Mac mockups! :)
I disagree with the contention that a menu bar is a ‘composition oriented’ feature. The original concept was a CONSISTENT interface that placed most of the common needs of just about any application in a ‘standard’ location so users could learn a new application quickly, and easily. That still seems a rational approach.
As long as Firefox continues to be the most customizable browser, I will probably continue to extol its virtues to all I know. Many things could improve the interface, such as moving the back and forward buttons to the right, above the scroll bar, where my pointer stays most of the time, and I have done this on my configuration.
I see little benefit to such things as ‘glass’ themes, or other distracting window-dressing. I also would like Firefox to preserve a recognizable, and distinctive user interface, while implementing new features as transparently as possible, and preserving the Firefox approach of user customize-ability and expandability.
I disagree with other comments espousing the menu bar. I’ve used Firefox almost exclusively for the past four years; the only time I switch to IE is when I’m doing testing for web design purposes. And loathe though I am to give IE any credit, the one thing I like about it how little screen area its menu options take up vs. the amount of area dedicated to the web page.
I don’t boot up Firefox to stare in awe of its menu buttons. I use it to browse the web. I rarely even touch the menu because I’ve used computers long enough to know all of the shortcut keys for nearly all of the actions available in the File and Edit menus– shortcut keys that are, I might add, universal in almost any program you buy these days, including Word. I can’t imagine that the majority of users savvy enough to choose Firefox haven’t learned these shortcuts in all the years they’ve been using computers, and certainly the ones that haven’t should know how to right click. The menu should be no great loss to anyone who’s used a PC (or a mac) for more than a year or two.
Progress always has its naysayers, but don’t stunt Firefox’s growth for the handful of people who can’t fathom taking a minute or two to acquaint themselves with something new, especially if the changes are for their benefit. I, for one, look forward to a day when all the padding at the top of the UI no longer clogs up my screen real estate.
Does this new UI mean that icons (such as Brief and Delicious) will no longer be available? I do find myself using those fairly often, and if there was some way to include them in mini form (as in the firefox extension that replaces the links in your Bookmarks toolbar with favicons) I think it would be a nice feature.
I loved mockup for 4.0.
The appearance like Chrome is very good if you maximize the window, so you can switch tab without having to aim. Just move it all way to the top and select the tab you want.
IMO its the same idea of “show desktop” in Windows 7, all way to the bottom right.
I also liked tabs on top of the navigation bar, it represents well the structure and hierarchy of all the objects
Firefox menus are already pretty configurable. I have the menu, the URL and search bars on the top line. Below that I have a few navigation buttons, and a lot of bookmarks, which I use daily. That’s just two lines, and I can’t see giving any up. If that little bit of space at the top of the screen means so much to you, just hit F11. Duh.
I Have been using FF for a lot of years now and I like my menus and bookmarks just the way they are. I have my bookmarks toolbar with bookmarks that I use everyday across the page above my tabs, they are arranged in roughly 8 folders and a button for gmail and my news reader. The folders each each have constantly changing content. I can drag and drop a tab right into one of these folders and right click delete to remove an Item. I use the bookmarks menu to manage my other less used bookmarks. I use the tools menu and the bookmarks menu often. I hope that FF will leave a way to keep the browser design as it is, Instead of trying to make it be like Microsoft. What they need to do is work on the issues of performance that have crept in lately. Pages that take a long time to load even when all add-ons are disabled, yet load quickly in opera and IE8. Also the conflict in vista 64bit using Zone Alarm 64bit version where FF freezes and can’t be closed even from the task manager and the computer won’t even restart through any means except holding down the power button until it turns off. FF say it is an issue with Zone alarm and to remove Zone Alarm. Sounds more and more like Microsoft’s company line. Get it together Fire fox or you are going to be losing that ever precious share of the market that has lately become your focus. You need to remember that your users should be the focus and that FF got to where it is today by being CUSTOMIZABLE, that is what drew me to FF without it I may as well go with the crowd and use IE8.
Couldn’t an extension “fix” all the “problems” a lot of these people are complaining about while maintaining a new standard/default UI for attracting users of other browsers?
if this will be the new gui for Firefox 4.0 then i will be droping firefox for Epiphany
I would have loved to see the ribbon in Firefox. I love the Office 2007 Ribbon. It makes things so much easier. However, the proposed Firefox themes are also great. The current 3.5 theme is disgusting.
So.. you are blatantly copying Chrome’s UI instead of Office? Wow, way to be innovative. What, ran out of stuff to copy from Opera?
Your statement:
“that a traditional menu bar is also a UI designed primarily for document creation and editing.”
is completely false. You seem to be assuming this based on some basic detective work and assumptions instead of research. The “File”, “Edit”, etc… menus come from the IBM Common User Access specification (http://publibz.boulder.ibm.com/cgi-bin/bookmgr/BOOKS/F29BDG00/2.5.4.1?DT=19921204095534) that was adopted by Windows in the early days (http://en.wikipedia.org/wiki/IBM_Common_User_Access#Influence), and has been a useful standard ever since.
I am all for interfaces that look nice, but your post is a rationalization for “design for design’s sake”, as opposed to an actual reason for making the changes. Please make sure that any changes you make to the UI are for the right reasons. Changes that come from a head-in-the-clouds, looking down your nose at the soiled masses point of view, and the need to justify the existence of the design team’s jobs, will only result in the ultimate failure of the design.
You only need to look at the Skype 4.0 design to see where this kind of thinking went too far, and everyone I know hates that design. It messed with basic functions like copy/paste. Those changes clearly came from a design department that we not reigned-in and brought back down to reality. Please make sure you keep yourself and your team grounded in reality, because that’s where 100% of your user base spends the day.
Ok, yes, clearly the menu bar is a general purpose design pattern that can be used for a wide range of tasks outside of content creation.
However when I said “the menu bar” what I meant to more specifically say is “the one we have in Firefox”, which like Mosaic is rooted in a pre-Web era of desktop publishing. The first item is File (not Page). The second item is Edit (where the majority of controls are disabled unless you are actually focused in a text field.)
The UI we are proposing follows the lead of all of the other major browsers on the market in re-factoring the menus to be more directly relevant to the task of browsing the Web.
Alex Faaborg said “follows the lead of all of the other major browsers on the market”
If FF is going to follow or be like all the other browsers on the market……….. Then why should I use FF??? I started using FF because I didn’t like the other browsers and wanted something different. I would be pretty safe in saying that is why the majority of FF users are here.
What are your thoughts about the way Safari 4 on Windows has the Page/Tools, but Safari 4 on OS X does not (and uses the traditional file menu system)? Does the universal file menu philosophy in OS X have anything to do with it?
PLEASE do not get rid of the drop down menus.
Speaking as someone who finds the mouse difficult due to a mild disability, but, can touch type, I really would be at a loss without them. I can get to anything with just 2 keystrokes, and it is logical where everything is. Also, the dropdown menu UI is highly intuative and user friendly.
If the dropdown menus go, I will revert back to the previous version of Firefox.
I think the Ribbon GUI is a disaster for MS Office.
I would be very disappointed to see a Ribbon-like clone applied to Firefox.
OpenOffice is also thinking about switching to a Ribbon-like GUI but many users are not agree and started an online petition to stop this mess…
http://www.petitionspot.com/petitions/stoprenaissance/
#23, Fran Calcraft
«What makes the developers think that the reload button is not needed?»
Nothing: it’s to the right of the URL/location. (At least in the screenshot that Alex Faaborg posted.)
Removing it sounds quite dumb, about as much as removing the back/forward buttons.
I gotta say I love the odd selective memory people have for the loss of a menu bar. This happened in IE7 first (down to the “Tools,” “Page” buttons), friends, not Chrome.
This has been a long time coming, as has the integration of search bar with address bar. However, Eevee’s comments (#9) are apt – please think carefully about how you are going to arrange/drop the functionality that used to hide in those poorly-designed menus.
Finally, the problem of discoverability (http://people.mozilla.com/~faaborg/files/20091012-personalWeb/UnifyingSearch_i2.png) is still around. This will be less of a problem once the search engine box is integrated, thus forcing people to treat it as a place to do searching, but that’s not quite enough. For example, when using Chrome I usually tune out all but the web results.
The problem I have with using these two buttons instead of the menu is that their wording is too generic to be useful and they require too much thought from the user to be useful.
Say I want to print the current page. Well, my printer is some kind of tool I guess, so it might be under there. But it’s also the current page that I want to print, so it might be over there…
And printing is just an example, any action not in the toolbar would require some pause and thought — and since these are things I do once in a fortnight on a browser, you can’t really rely on muscle memory to guide me there.
Hence the consistency with the other applications for which I do print, copy/cut/paste more often is nice, because I can benefit from the muscle memory gathered there and use it on the browser.
I dont’ really get, what’s up with these GUI Designers! Every of this new and sooo ‘innovative’ GUIs (Office 2007, Windows Vista, Windows 7, Firefox 4.0) tries to be an apple like piece of designershit, givin the look of it 100% priority, while flushing usability down the toilet. WTF? If they continue doing this, I’ll not bee using computers anymore in future – and I’m not what I would call an unexperienced person :(
Alex, if I may quote a most excellent previous blog post of yours, “Notifications and Flow” of March 24, 2009,
“When designing interfaces we often tend to focus on aspects like discoverability and functionality. For instance, if we didn’t place the Web feed glyph in the location bar, how would users be able to discover that they could subscribe to pages?
Indeed! But what you seem to be suggesting is doing away with discoverability, or at least making it more difficult. Certainly this will not impact the FF user already experienced on the new GUI, but it will impact new users to that particular design and to FF in general.
Do you really want to make their ‘introduction’ to a new way of surfing difficult.
In that same article, you discussed as a primary mime the breaking of cognitive flow when attempting to help the user. Unless you are very careful this next design, I think you are going to prevent cognition in the first place.
P.S. Love your work. You should write more often.
The plans for a ribbon interface miss the point. The settings and options in Firefox are hardly ever changed. What I want is an Office 2010 style ribbons made up of WEB SITES.
The Backstage and About areas can be used for all Firefox settings. I want to set up menus like News, Finance, Shopping, Food etc.. Each ribbon would be customisable (like Office 2010). There would be sections with web site icons and optional names. I think this would be a Very big win for Firefox. Maybe ribbon view could be an option or extension.
Hiding the menu bar like FX4 is a very bad idea. The developers need to be realistic about users. Do you really think a 6 year old or a 90 year old is going to know about or understand Alt?
My other big gripe about Firefox is everything is too small on a 1920 x 1080 monitor. It looks terrible. I eventually found the about:config parameter layout.css.devPixelsPerPx which works like magic. This option should be on a menu. Again this is probably a case of young developers with good eyesight not understanding some of their users.
Expanding my post at 45. In Word most of the time you use the ribbons to format text and layout the document. you use a browser to go from web site to site. Turning the bookmarks toolbar into multiple ribbons is absolutely natural for a browser.
If Microsoft get there first I think they will get back a big chunk of the market. To me this is the next big thing in browsers.
As long as the new right-side menu items and other UI elements can be easily accessed using Alt- keyboard shortcuts, all will be well :)
Of course not having a ribbon is fine – wise choice. A ribbon is correct when there is a large variety of tools that need to be regularly accessed. This is not the case for web browsers.
Good work -S
I would like be able to move all menus and tools to the right click context menu.
“Invent” all you want but PRESERVE existing familiarity, PRESERVE existing look and feel, PRESERVE the classic UI etc. What is up with the arrogance of software companies and “developers” throwing away 10+ years of UI familiarity just so they can “invent” something new with just the right shade of baby-blue and screen-wasting fat toolbars (ie. ribbon). I say: learn about usability and UI options please. When designing a user interface PRESERVE existing designs and make the UI fully customizable. UI 101.
I think more than merely thinking about the UI (which can be solved to some extend by themes) think about the memory management. I personally have a problem, with firefox not releasing it’s memory.