Kirill Grouchnikov's Blog

Office 2007 UI in Firefox

I usually don't do this, but i have to link to this article that explores possibilities of applying the Ribbon UI from Office 2007 to the web browser world. Unfortunately the author designed only one task (image shown below), but it shows the ever-growing interest in ribbon-based UIs.

To those complaining about Ribbon taking too much vertical space. This has been addressed at length in Jensen's blog, and you shouldn't take the screenshot above for a real product - just a prototype. The screenshot below shows Firefox alongside Windows 2007. Firefox here has the regular window title, the menu bar, the address bar, the bookmarks bar and a few tabs opened:

The second screenshot shows Firefox without the bookmarks bar, but the address bar uses regular (not small) icons and text labels:

Comments

• but isnt it waste of vertical space? firefox already uses tabs and that eats up precious vertical space. later monitors will have less V to H ration and ribbon type interfaces suck more and more.. especially desktops like gnome already suffers from this using two vertical bars default.

  Posted by: ahmetaa on September 02, 2006 at 05:39 AM

• That's interesting, what do you think about it?

  Seems to me pretty bulky and not that much of an improvement, but that may be because I'm used to toolbars and menus. It seems to me that for a browser, a thin toolbar and menus are good enough and don't get in the way as much as this much bigger component.

  History is not really a main function I want to do, just once in a while to search for stuff, and a sidebar with search history that I can just easily dismiss might be better than a whole tab of "history" functionality.

  Maybe the Ribbon UI makes sense for a browser with an HTML / content creation tab. Like editing you rpage, or even adding content to your own blog ...
  

  Posted by: augusto on September 02, 2006 at 05:43 AM

• ahmetaa,

  View the screenshots that i have added to the original posts.

  Posted by: kirillcool on September 02, 2006 at 02:08 PM

• By the way, one of the main reasons that Microsoft decided to change the UI wasn't for the sake of change, but for the discoverability. A web browser may not have that many features "hidden" in menus or preferences, but Office most certainly does. Another great example is a Java IDE - modern IDEs have hundreds of menu items / keyboard shortcuts / ... Wouldn't it be great to have one task for debugging stuff, one for refactoring, one for cleaning up and so on?

  Posted by: kirillcool on September 02, 2006 at 02:11 PM

• It IS a waste of vertical space!
  Just read:
  http://news.com.com/Microsoft+rolls+up+Office+ribbon/2100-1012_3-6109590.html

  Posted by: keeskuip on September 03, 2006 at 04:47 AM

• keeskuip - did you see the screenshots in my post? Do you see ribbon taking more vertical space than Firefox out-of-the box configuration? Let's stop spreading FUD against ribbon and look at the facts. I don't work at Microsoft, but now all they do is evil.

  Posted by: kirillcool on September 03, 2006 at 10:26 AM

• Hey I don't want to be in the reflexibly "anti" ribbon group, I think it's a very interesting idea, just wondering where it makes sense (should it replace all toolbars and menus for all apps) and what the pros and cons are.

  From an asthetic point of view, it is pretty busy though. And it does take space, so that why they moved content up to the title bar.

  The new screenshots are helpful, however there's a certain amount of vertical space that you should add to the new ones to compare apples to apples. If you add the bookmark toolbar and the tabs to the ribbon UI screenshots, then that's a more fair comparison and will show that they do take up more space.

  Either way, I think it's great that somebody has a Java version of this, since there is a possibility that users will like this UI construct and then demand it in our Java apps. I wouldn't mind having such a thing available.

  BTW, I wonder how one would implement this look and feel in Java without turning off native window decorations, that is how are we going to add content to the title bar. Don't know if this is being addressed in the Vista look and feel for Java 6.

  Posted by: augusto on September 03, 2006 at 12:17 PM

• Augusto,
  That's what UI designers are for. The screenshot from the linked post is just an idea. It has "Bookmark" and "Tabs" tasks that can have more oriented tools without putting everything on the same task. You can have a drop-down button showing all the bookmarks. You can have an in-ribbon scrollable gallery with thumbnails of the currently opened tabs. That's what the ribbon is for - no need for additional vertical space, just smart UI designers designing smart ways to use the ribbon interface.

  Posted by: kirillcool on September 03, 2006 at 12:35 PM

• True, however the ribbon wouldn't elminate the multiple tabs feature in the browser, so that takes up some space. Your point is taken though, you could incorporate that boomark toolbar in another tab, the issue would be if that's the type of toolbar you want all the time no matter what "ribbon tab" you are in.

  Posted by: augusto on September 03, 2006 at 12:57 PM

• Augusto,
  The ribbon is the only place for controls - at least it is in Office 2007. There are no additional toolbars, no menus, nothing - everything is in the ribbon. You can drag controls that you want to be constantly accessible to the quick access toolbar (on the titlebar). Multiple tabs can be shown as thumbnails in the ribbon, or any other option that can be seen fit by the designer of the relevant web browser.

  Posted by: kirillcool on September 03, 2006 at 01:01 PM

• Interesting, I definetly need a copy of Office 2007 to try it out. It's one of those things that you need to use and not just see to appreciate it's functionality.

  The multiple tabs in the ribbon, that's kind of a hard one to visualize. It could be a button menu or a list I guess, but the UI construct of a tab makes a lot of sense for multiple pages, so I wonder if that would make much sense. You could argue that you could do some of the same with the current firefox toolbars (use a more compact control than a tab), but I don't think that would improve usability.

  My main thing is that in a browser you're tipically just looking at web pages, and I'm not sure it's the type of application that justifies the multiple tab views in a ribbon, when the history is just either a menu item or a list control I want to quiclky see and click on, instead of being in a "history" mode.

  Posted by: augusto on September 03, 2006 at 03:32 PM

• Augusto,

  Read the comments on the original (linked) post and then read about this experiment. Wouldn't it be nice if the browser extensions had a organized place "to live" instead of deciding to take any reasonable and unreasonable space? Wouldn't it be nice if writers of editing widgets didn't have to reinvent the HTML editor and instead invoke the context "Edit" task from Firefox? The experiment linked above is an extreme one, but these extensions do exist, and do take both horizontal and vertical screen estate. Browser now is for much more thank simple browsing...

  Posted by: kirillcool on September 03, 2006 at 03:47 PM

• Hi krill, the new screenshots actually are not proving me wrong. point is, fireox has
  - tabs
  - bookmark bar.
  so i dont think it is really fair to compare it with Office ribbon look. however, i dont deny that there can be some iprovements. such as putting the tabs in the application bar, and a more intuitive bookmark access mechanism may make ribbon as a good solution. some mock screens can be created to see.

  Posted by: ahmetaa on September 03, 2006 at 06:40 PM

• ahmetaa,
  I don't really understand - are you talking about Firefox without bookmark tab (which is on by default) and viewing only one page? The screenshots show The Firefox out-of-the-box configuration (with bookmark turned on) and configuration with large icons and texts on the navigation bar buttons - as is on the ribbon buttons. We can argue until forever about minimalistic cases in Firefox (or any other UI), but let's compare the initial and the average Firefox UI against ribbon.

  Posted by: kirillcool on September 03, 2006 at 06:57 PM

• It's great to see all these comments my post generated.
  I have a follow up that touches on a couple of these issues:

  
  http://www.raizlabs.com/blog/2006/09/firefox-ribbon-ui-and-screen-space.html

  Thanks for reading.
  - Greg

  Posted by: graiz on September 04, 2006 at 07:27 AM

This work is licensed under a Creative Commons License.