August 17th, 2009
Menubar Handling
Recently we have been discussing the possibility of hiding various UI elements by default in a future version of Firefox. In particular the Menu Bar. The current functionality would be streamlined and relocated to another location. This would(could) be accompanied by various other UI changes. However the menubar would still be present just hidden. Which creates the question of how to handle the Menu Bar if it were to be manually turned back on.
I have put togther some wireframes to illustrate how this might be handled in various configurations.
In either a tabs-on-bottom or tabs-on-top configuration there are some challenges:
- Can the titlebar and the menubar be shown separately?
- If the menubar can be shown alone where does it go? Can it go in the titlebar?
- How do you handle this on Glass while retaining legibility but without breaking it visually?
Menubar Wireframes (Tabs-on-Bottom)
Finding a way to maintain the large areas of glass is a specific challenge in this configuration.
Menubar Wireframes (Tabs-on-Top)
Aside from hierarchical concerns, adding tabs-on-top has a large focus on vertical space reduction. What is the best way to allow a traditional Menu Bar while retaining that goal?
Tags: Experimental Theme Windows Wireframes
This entry was posted on Monday, August 17th, 2009 at 3:51 pm and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
One of my favorite aspects of tabs on top approach is the speed with which I can change tabs when the browser window is maximized.
In Chrome (Windows), I’m able to throw my mouse to the top of the screen and select my desired tab by only moving along the horizontal axis. I think your last wireframe (version G) provides the best user experience.
Songbird puts the menu on the titlebar. Personally I don’t like it. Having the menu work sorta like in Windows Vista Explorer or Internet Explorer 7 where it doesn’t appear at the top of the window as menus traditionally do would be nice and would still fit with the Vista feel you seem to be going for with the glass and all.
It would also emphasize that it is no longer a center of user attention. You don’t need to use it since most of the options are available elsewhere such as the Page or Tool menus, or the page context menu.
IE and Explorer both have the menu bar hidden and it can be temporarily popped up with the ALT key for power users who use menu shortcuts, and the menu bar can be permanently shown with a right click option. I like this approach personally, and I use a Firefox extension that replicates this behavior. It may be worth integrating into the Firefox core.
I like the first concept for tabs-on-bottom, and the last concept for tabs-on-top. Some of the tabs-on-top concepts with the menu bar up top create problems such as how to animate showing or hiding the menu bar, since the tab bar now has to move to/from the title bar. The last concept is a lot simpler.
As for legibility on glass, I tinkered with glass a bit, didn’t get very far but I did learn that there are Windows APIs for drawing the “glow” behind title bar text so you can use it anywhere there is glass on a window. Of course you can draw your own “glow” or other things on glass simply by using semi-transparent color (I think).
God I hate tabs on top of the address bar. Why should I have to move my mouse an extra 30 some pixels to switch tabs?
I have firsthand knowledge that when Microsoft made this decision with IE7, “Where is the menu bar” became their number one support call.
Changing a behavior that people have gotten used to for many many years is just a bad idea.
Below the toolbar chrome wouldn’t be my first choice either. I almost didn’t include it as an option. I know I personally can’t get used to it being there. One can guess why Microsoft may have put it there.
Blake’s comment is right about fullscreen tabs though. You get some Fitt’s Law goodness by having them at the top of the screen. In that case(fullscreen mode) we could either force the “Page/Tools” options or people who turn on the menubar would have to live with that limitation. Or maybe some other solution.
Another factor to consider here though is that going forward it looks like that is the place for the menu bar in Windows. I don’t necessarily advocate going with the flow just because but platform consistency is something to consider.
I Agree with Michael Kaply and like the ver. E (with tabs on bottom) which doesn’t change menu bar location that much.
Alternatively, the menubar could be deprecated completely (and perhaps left in the customization dialogue, as you recently suggested on the dev-usability list). That would free up the Alt button for accessing the redesigned toolbar and revamped menus, similar to Office 2007’s KeyTips.
I presume this would simply do nothing on Mac?
Woops! My link was supposed to point at http://blogs.msdn.com/jensenh/archive/2005/10/13/480568.aspx.
I definitely don’t like the new trend of shoving things into the title bar. That’s starting to get into the murky area of self-theming everything. I know it’s Windows, but can we at least have some consistency with window decorations?
Tabs above the address bar does make semantic sense, as the address bar and friends all have different state per tab.
Don’t put too much in those Page/Tools menus, or whatever they end up being. IE7 seemed to stuff as much as possible into a handful of menus just for the sake of hiding the menu bar, and I wasn’t very impressed with the result.
If firefox was really flexible, all choices are already possible for the user.
I like the F choice (Tabs-on-Bottom).
Honestly speaking I love the way current Firefox is, it gives me more than enough space to put my add-ons, now problem with reducing the current available space is that when I put my add-ons they will change the look and field, so I like the approach where my add-ons can fit without disturbing my current look and field.
and one more thing where is my search box , Search box is one reason I don’t like chrome.
I always thought that the user interface changes in Internet Explorer 7.0 were universally recognized as a joke. I see now that they aren’t funny at all.
I like Tabs-On-Bottom Version B, Tabs-On-Top Version B, Tabs-On-Top Version C, and Tabs-On-Top Version D. What I liked about each of these was that they felt fresh and new while still having some of the old Firefox-feel I got use to with with Firefox 0.8. I would hate to see all the “muscle memory” I built up clicking on the Firefox interface since 0.8 and on the Internet Explorer interface from version 4 through 6 and on the Netscape interface from version 3 through 4.47 completely erased. Furthermore, I think Firefox should have some aspects that are unique to it that can be identified by the person using Firefox. I don’t want Firefox to become a “Chrome knockoff” or an “Internet Explorer 7 knockoff” when people describe how to use it or see it for the first time.
I do use Internet Explorer from time-to-time on truly cantankerous business and education websites and version 7 was a real bitter pain. I got use to it and use Internet Explore 8 now comfortably, but it did really hurt to lose all those skills I had built up. The odd thing for me is that I was able to use Office 2007 right off the bat after having lived in Office since Office 2000. I don’t know what difference made Internet Explorer 7 hard and Office 2007 easy, but it is clear to me that Microsoft initially screwed something up with the Internet Explorer interface design and implementation. I would hate for Firefox to have the same problem.
Finally, do you have to get rid of the status bar? Are you sure that is a good idea? What will all those extension developers do when they can’t hang their notification icons down there? Do you have a replacement for that area? I only ask because the status bar is kind of useful for throwing what-not objects that you don’t want cluttering up the other bars with. It serves a purpose much like the Windows system tray as it exists to show processes and features that are of interest to the user but not necessary to show in more prominent areas or dig for in various menus.
You don’t show the real “tabs on the bottom”, where the tab bar is at the bottom of the window. That’s the layout I use. (Part of the reason: I set the tabs to switch on hover, and going to the menu bar doesn’t cause a tab switch with tabs on the bottom.)
(By the way, your “tabs on the top” images say “tabs on the bottom” inside the image.)
I tend to agree with what Eevee is saying… but when I look at just how much more screen real estate Chrome has than Firefox I get a little envious. Personally, for the last few years my thoughts on how to solve there were do a pseudo-”full screen” that doesn’t cover the taskbar and didn’t close when you changed windows and probably wouldn’t autohide the URLbar and tab bar. That would give you tons of screen real estate.
I’m missing one option: the Right Menubar option (Ver D) but with Tabs-on-top. Although I haven’t seen it yet, that would be my choice: it saves a lot of vertical space, it neatly groups the menu together with other window controls (minimize, maximize, close), and tabs on top just looks better overall.
Of course, there will be some logical weirdness due to the fact that many menu items are tab specific (e.g. Tools > Page Info) yet the menu bar on the right gives the impression that it’s window-global. However, this is a problem in Firefox today too, and in any case, this would be a huge improvement. Some menu cleaning would take care of the other stuff.
I prefer the current tab position right above the page or what you are calling tabs on bottom. Tabs on top means having to move the mouse further to switch tabs. (Just because there are other alternatives to switching tabs such as ctrl-tab and all tabs, do not forget that many users will be using their pointing device. Moving tabs higher will affect them greatly.)
I also prefer the more traditional tile bar with the always present menu bar just underneath.
However, my greatest concern is that these proposed changes will simply be forced down users throats without apprising them of the choices they have. I posted the following in the Big Theme changes again in Fx 4? thread of the mozillazine forums:
“But, what is of most concern to me is the potential that when Fx 4 lands, the only thing users will see is something drastically different from what they have seen in the past. I have yet to see if the developers would be willing to offer the user the choice during installation of the traditional appearance most are accustomed to or the radical new faux Chrome one. My concern is that as is also pointed out, many users do not customize their installations and may, in fact, not realize that if they want the traditional appearance they can change the look back to that. Offering as default the radical new appearance may drive away users who do not like it and do not know or want to bother finding out where to locate and change the necessary settings to restore that appearance.
Consider this. In stepping to Fx 3, the developers changed the default setting of the tab bar to show tabs all the time. The reason was to let new users to Fx know that tabbed browsing was a feature of the browser. If they applied that thinking there, why not apply the same reasoning to offer a choice between traditional and faux Chrome appearances during installation/updating to Fx 4?”
Link: http://forums.mozillazine.org/viewtopic.php?p=7275245#p7275245
Version A. Tabs on Bottom approach is all that’s needed. Tabs On Bottom Version G. is also acceptable. Most users are turned off by tabs on top.
I think Firefox works pretty well the way it is now. If you want to hide the menubar, just do like it was proposed in the dev-usability list. No need to find new positions and styles. The ones needing the menubar will find it in the same place and the ones that don’t need it will disable it and get rid of it.
I’m on the tabs “on bottom” side because they are related to content and as such they are more accessible when near content and not after navigation and tools. But I have no problem with that being an option. I still think the default should be on bottom.
Microsoft achieved something wonderful with Word 2007. I use it less and less because what I thought at first would be a wonderful and useful change (“the ribbon”) made me lose a lot of time. So I decided to use other tools and I think I will get rid of Word sometime in the future. They even, now, have this change as one of the top requests to revert it (optionally of course). So learn from the biggest software company in the earth by not making the same mistake.
I think it’d be helpful to clarify the motivations for this redesign. Is the focus:
* Improving the browser’s aesthetic appeal?
* Maximizing web content?
* Retaining existing Firefox users?
* Appealing to new users?
* Appealing to tech enthusiasts?
* Improving the browsers usability? (for which users?)
* Something else?
Ideally we’d be able to accomplish all of these objectives, but inevitably stressing different goals will result in different designs. Personally, I’d like to see the browser improve the speed and ease with which users perform their most common tasks. Overwhelmingly (for me), these are:
* Typing in the URL bar
* Opening and closing tabs
* Going back a page
* Searching
Do we have any data that illustrates Firefox users’ most common browser interactions? I’m a keyboard shortcut addict, but suspect that the large majority of our users are not. With that in mind, I think it’d help to answer the following questions:
* What percent of time do users browse in full screen mode?
* How do users “Go back”?
* How do users open new tabs (control-T, new tab button, menu bar)?
* What percent of users customize their browser?
* What percent of users use bookmarks? How do they bookmark?
* Which shortcuts are most popular? What percent of users employ them?
Answering these question will give us a better understanding of how typical users interact with Firefox and would help inform and improve design decisions. Then again, I’m not a designer and don’t really know what I’m talking about (but would like to learn).
You’re looking at this whole problem the wrong way.
At the time IE7 was released I worked tech support for a major ISP, and I dealt with this change plenty of times.
The problem wasn’t that the menu bar was gone. The REAL problem was that the menu bar was a way to access functionality, and with it gone, there was no obvious way to access a lot of those functions.
Don’t ask “What do we do when the menu bar is turned back on?” That’s not a problem you should even have.
Ask “How do we refine our UI so that there’s NEVER any reason to turn it back on?” Figure out an honest-to-god replacement for the menu bar and be done with it entirely.
Firefox should by default be usable for the broadest segment of the population. I think dropping the menubar defeats this, because for less computer-literate users the menubar is a critical piece of familiar UI infrastructure. It provides a consistent place for things like Open, Save, Copy, Paste, Help, etc. and it provides an organized, compact, and comprehensive place to discover features. I don’t have a problem with making it easier to optimize for people who really want more screen real estate, but I don’t think the default install should drop the menubar.
Perhaps you should also consider the tab experiments that were submitted recently to Mozilla in the Re-Design Tabs competition. Most proposals break the usual ‘horizontal tab strip’ concept, some of them going with ‘tabs-to-the-left’, like the Tree Style Tab add-on. Merging those ideas and yours could lead to some different designs.
[...] https://wiki.mozilla.org/Firefox/4.0_Windows_Theme_Mockups http://blog.stephenhorlander.com/2009/08/17/menubar-and-toolbar-handling/ http://blog.stephenhorlander.com/2009/08/14/windows-theme-project-progress-report-2/ [...]
On another note, I actually watched someone use the new Office for the first time the other day.
They had never seen it and wanted to simply put a presentation into fullscreen mode.
It took 2 or 3 minutes and multiple people in the audience trying to figure out how to do it.
Of course it used to be in a very obvious menu. Now it is next to impossible to find.
Let’s not be Microsoft and change things for change sake.
If I were you, I would make them IE style. There’s a very good reason why Microsoft put them there in both Windows Explorer and Internet Explorer. It’s all in the Vista/7 UX Guidelines.
The menu bar is very useful to reach a function, suppress it and you discourage many Firefox users.
We have presently an UI that is not perfect but the users have the habit of it, it works, don’t change it drastically : you will break it. I have abandoned Opera for Netscape (and never gone back) due to a release that was too bugged !
You perhaps see no use for the title bar. In most of the applications each screen as a different title bar : it is very useful, when you have a problem and discuss with the hot line to give them the content of the title bar, they immediately see on which screen you are. Also some softwares use the title bar to automatically close bothering advertisement !
Also the title tag is defined in html, if you don’t render it, you will not comply to html standards !
Please add new functions or correct several years old bugs : this is more important for the users that nicer UI (I don’t like ugly UI but this is not the case of FireFox)
Hi,
Just a slightly off topic question… What program do you use to create these wireframes?
I use various programs like axure or illustrator, but it never look as polished as your wireframes. They have some depth and body to it… Very nice!
Thanks for your reply
Cheyenne, the Netherlands