Location Bar

From MozillaWiki
Jump to: navigation, search


From the various pondering that has been done on the topics of Bookmarks/History, RSS, and status notifications it has become clear that there are many status notification areas within the browser window, many of which relate to the displayed page (location) but which are scattered throughout the browser window.

URL Bar Icons

Right now we have a couple of icons that get added to the right side of the location bar depending on the type of page being viewed:

L - lock icon for pages loaded over HTTPS
S - subscribe button for pages that have <link>ed feeds

And some extensions like Google's Anti-Phishing extension adds an icon:

P - phishy page

These icons fall into two categories. Both can be clicked for an action to take place, however the two classes are:

  • presence implies something meaningful: the presence of the lock icon itself is enough to tell the user the page is loaded over an encrypted connection, clicking shows further information but is not necessary for primary function. Similarly, the phishy page icon indicates phishyness (in combination with other UI) by its presence
  • presence doesn't imply anything meaningful, click action performs useful action: the subscription icon indicates that the user can subscribe to the current page, but this information is only majority-useful if the user actually subscribes. The important action isn't the information that the page can be subscribed to, but the action of subscribing itself.

The problem with the visual treatment in Firefox 1.5 of the latter category is that despite the fact that most of the usefulness of the icon derives from the action performed when it is clicked, its clickability is not particularly clear, given its position inside the URL bar. It is however an action associated with the URL, so some sort of connection makes sense.

Given that, it makese sense to split the right side of the location bar into two zones: one that holds status icons, and the other that shows action buttons - with a visual treatment that implies clickability.

Other Clutter

The browser window has a status strip at the bottom that is used for showing where links lead, page loading progress and other notification icons. Most of this area is either meaningless to the user, could be folded in elsewhere, or is only capitalized on by extensions.

To the right of the location field is a dropdown containing previously typed URLs. This has been largely superceded by autocomplete within the location bar, and provides clutter that breaks up visual design the status/command split described above.


Simplify and consolidate UI in the following ways:

Highest Priority

New location bar visual design treatment in the following form:

[ @ http://www.foo.com/                       L:P | S:B ]

status indication icons appear inside the location bar as they have in the past, but clickable action buttons appear joined to the location bar but separate from it, with a button like appearance. Some of these action buttons can appear and disappear as the context requires, just as with the status indication icons.

To make the icons on the right more obvious, I would also remove less used and somewhat cryptic functionality like the typed URL dropdown button (it could be placed into the customize toolbars palette for those who are strongly attached to it, or relegated to an extension).

Lesser Priority (Longer Term/Research)

Hide the status bar by default, having it be more of a status indicator area for extensions. Replace the security functionality offered by its ever-present-ness in popup windows with the ever-present-location bar.

Show basic progress information in the location bar, like Safari and MSN Explorer.

Move stop, refresh, and go functions into one button. These actions are mutually exclusive, there is no need for 3 buttons when 1 can accomplish the same tasks. The button would exist where the current Go button is now. (The traditional Stop, Refresh, and Go buttons could be placed in the Customize pane for those users who are attached to them.)

This significantly reduces the visual clutter in the browser window.