The Problem

Mozilla's decision to remove the status bar at all costs was annoying me. It wasn't annoying me because I have any particular love for the Status Bar; rather it was because the potential functionality of items that naturally belong on the Status Bar was being removed without proposals for suitable functional alternatives.

In particular, sync and zoom - these are not only controls, but they are useful status indicators as well. A status indicator is not functional if it is buried in a menu! I'm all for minimal interfaces, just not ones which have been dumbed-down in the name of minimalism alone.

Current proposals for zoom are to place it as a slider in the buried menu. I discussed in detail why this is not a good idea in my previous attempt to design a zoom control - mainly the current zoom status is not easily visible to the user, and that it makes the menu design cluttered.

Current proposals for Sync combine a temporary sync status with the window caption buttons - this doesn't really make sense as Sync has nothing to do with changing the state of the window, nor will this effectively show the Sync status. There are also proposals to clutter up the Firefox button with the user-name - this is ugly, clutters the interface, reduces space for tabs, and takes away the potential of a syntactically logical menu design.

Toolbar Proposal

Following my previous failed attempt, I thought some more about how to implement Status Bar-less controls and came up with the following proposal:

In the above Paint.NET/IE9-inspired mock-up I added some more Aero glass to the right-hand side of the toolbar for Sync. This is because Sync is not a tab-specific control. This extra glass gives enough space to implement a Sync control along with any username, without cluttering the area around the window caption buttons; no controls are dangerously close to the close button. I also added a small amount of glass to the left of the Back button to improve symmetry. I think that the more glass a window uses, the more minimal it "feels" (look at IE9 as an example).

Zoom is implemented as a toolbar button that is a hybrid between the Internet Explorer and Opera zoom controls. It's not only intended to be a zoom control, but also a more general View menu like in Opera (more detail about the design of the zoom control below).

Most notably from this mock-up, I've removed the Search Box. This is because I thought it would clutter the toolbar. Now that IE9 has this configuration, it seems to be the direction in which mainstream browsers are following. There are advantages and disadvantages of a Omnibar/One Box/Combo style design and I'm currently in the process of writing a separate article outlining a possible privacy-friendly design of a location bar / search box combo.

Talking of cluttering the toolbar, I think that the current FX4 toolbar button design does not give a minimal noise-free appearance. I therefore wanted to make this consistent with the style of toolbar in Windows Explorer on Windows 7 as follows:

The borders in the new site identity block are also noisy - I therefore wanted to also simplify these as follows:

I think that the above mock-up offers an ideal interface for a future browser. However, let's take into account the fact that it will take time to develop an omnibox and bring back the Search Box:

Not as bad as I was expecting! Nowhere near as cluttered as my previous failed attempt! I'm not sure why it feels less cluttered than before - I think the added glass de-clutters the noisy area around the caption buttons and allows the eye to focus on one area of the UI at a time.

One problem I can see with this configuration is that the zoom magnifying glass icon will look similar to the web search magnifying glass icon - this could be fixed by changing the web search icon to be a magnifying glass on a globe (like the IE5 search icon).

Now, personally, I don't actually think that it's that important for Sync to be in the interface (plus XMarks is cross-browser for example :P Edit: Xmarks is to be killed :(). Let's see what it would look like removed:

A couple of other ideas were to use an Apple-like eye icon to signify a view control rather than just a zoom control. The Bookmarks icon could also have text labels by default to give a larger click-target and to make it more obvious to new users as to the icon's functionality:

Some other ideas that I had were to make the Bookmarks icon less noisy and more IE9-like. I also was thinking about moving a less noisy Bookmarks icon between the back button and the location bar. (no time to make any mock-ups to play with this :( ).

Details of the View/Zoom Toolbar Control design

This design is a modified hybrid between the designs found in Internet Explorer and Opera. It is like Opera in that the tooltip for the control says "View" instead of "Zoom" - this is because it is meant to be a general view control rather than just for zooming.

In order to make the control more compact I sacrificed some functionality over my status bar design and made its appearance just like that in Internet Explorer. Like Internet Explorer, clicking on the magnifying glass icon or the zoom percentage will zoom-in one notch.

Here is an attempt to make the design more functional again (just like the Glazoom add-on): In the above design you can zoom both in and out with just one click. Perhaps mousing over the standard zoom icon on the toolbar could make these + and - controls appear directly on the toolbar, therefore allowing instant + and - zooming.

Clicking on the drop-down arrow in either design will open the menu. The menu may also be accessed by long-clicking anywhere else on the zoom toolbar icon. The opened menu is similar to that in Opera. However, to drag the slider in Opera you are required to open the menu and then move the mouse to the slider to drag it. Here I propose that clicking and holding on the drop down will mean that the slider control is selected by default - keeping the mouse button held and moving the mouse to the left or right will adjust the zoom slider in one swift action - no need to let go of the mouse button and move the mouse pointer to the slider!

Unlike Opera, in the first design I also added MS Office-like "+" and "-" controls for easy incremental adjustment - tooltips on these will show the Ctrl++ and Ctrl+- keyboard shortcuts. "Custom" lets you type a custom zoom level (like in IE).

Finally, the Full Screen control is also in this "View" menu. I see Full Screen becoming less and less relevant with such a minimal browser interface already, and that it mostly being accessed by the F11 key. However, Full Screen needs to be present in a menu somewhere to inform users of the keyboard shortcut.

In the "eye" toolbar icon design there would be no direct zoom in/out from the toolbar - clicking anywhere on the toolbar would just open the menu (the opened menu would appear as in the first menu design in this section). This loss of functionality would be compensated by increased simplicity.

Conclusion

Combining a toolbar like this:

with a menu design like this:

gives a minimal but yet still fully functional Status-Bar-free interface where no usability has been sacrificed. It also allows for a much cleaner, clutter-free, and more logical page-partitioned menu design (menu design discussed in more detail my other article).