Firefox 4 User Interface Update

23 December 2009

While actively developing Firefox 3, and beta updates are knocking on our doors, the Mozilla team released some alpha UI concepts.

As noted on the 3.0 Windows Default Theme Issues Wikipage, Firefox feels dated and behind on Windows. Especially Vista and Windows 7. These issues include absence of Glass, anemic purple toolbar color on Vista, tall and bulky UI footprint, element overload, inconsistent toolbar icon usage/style, lack of a tactile look & feel and perhaps too great of a divergence between the look on XP and Vista/7.

[...]

Starting with Vista, and continuing with Windows 7, the menubar has been systematically removed from Windows applications built by Microsoft and other vendors. It has been replaced with alternatives like the Windows Explorer contextual strip or the Ribbon found in Office 2007. The Ribbon UI is now also used in Paint and Wordpad for Windows 7. Many apps still retain the menubar as an option to be pinned or to be shown briefly by holding the Alt key.

Firefox isn’t the type of application that necessarily has contextual actions in the same way Windows Explorer does. So how to handle the functionality of the menubar if it is hidden? Chrome and Safari (and to a lesser extent IE7 & 8) have solved this by sorting, trimming and collecting the menubar functionality into two separate buttons. One of these buttons has items that apply to the webpage and another to the application itself. Now they don’t always agree on which item should go in which menu, but the general principal is sound. This is a good solution.

The menubar as a UI is pretty good at one thing: hiding complexity. The general purpose of the menubar is to contain all of the things that you want your program to do but you can’t(or shouldn’t) cram into the main UI. So the menubar generally ends up with a lot of stuff that isn’t used very often, if at all, and yet is reproduced on every window and takes up a significant amount of real estate. It also has the tendency to become a dumping ground for new or hardly used features. This experience can be made worse with sub-menus, or even sub-sub-menus, which are hard to find and hard to target.

A progress bar can make waiting seem slightly less painful and let you know if something might be hung-up or not. It won’t actually make things faster, but it might make them feel faster.

Instead of the indeterminate progress indicator in use now, we would like add a progress “line” under the location bar on the active tab and at the top of each background tab. This will let people know about how much longer their background tabs have until they load and it also looks cool.

Several variations of the App Button have been explored. Various factors of consideration include what color to make it, whether or not to have an icon, just an icon, icon and text, part of the tab bar, a separate button or attached to the top of the window.

Presently it is orange and attached to the top of the menu simply labeled “Firefox”. The color plays off of the Firefox icon and is noticeable. The placement attaches the button to the top of the window and suggests that its items apply to the whole menu. It also corresponds to the area of the window where someone would look for the menu bar. Using text only is reminiscent of a menu item.

Want some Linux flavour?

Go here. Or here.

Sources:

Link Of The Week

5 April 2008

One of the most important part of any software, be it a script, a web site, a blog or a program, is the user interface (UI). Apple has written the Human Interface Guidelines, and has recently updated it for the Leopard Edition.

Apple has the world’s most advanced operating system, Mac OS X, which combines a powerful core foundation with a compelling user interface called Aqua. With advanced features and an aesthetically refined use of color, transparency, and animation, Mac OS X makes computing even easier for new users, while providing the productivity that professional users have come to expect of the Macintosh. The user interface features, behaviors, and appearances deliver a well-organized and cohesive user experience available to all applications developed for Mac OS X.

These guidelines are designed to assist you in developing products that provide Mac OS X users with a consistent visual and behavioral experience across applications and the operating system.

See the Apple HIG online here or download the PDF here.