FX2 Visual Update/User Interface Design
There is a proposal to modify the default chrome presentation in Firefox 2. It's currently being discussed in the newsgroup.
Ge.diego made some comments on Ben Godger test build that includes new tab management and gave an alternative user interface mockup proposal.
Roundup & Decisions
New Mockup:
(2) (5) -.
(1) | (3)-.----. (4) -. |
| v v v v v
.----------------------------------------------------------------------.
| File Edit View History Bookmarks Tools Help [_][=][x]|
|----------------------------------------------------------------------|
|.--. .--. .--. ,-------------------..--,,-, ,----------.---,, .i. |
||<-| |->| |[]| ( {} www.foo.com v ||.)||=>) ( google G |.O |) -O- |
|'--' '--' '--' `-------------------''--''-' '----------'--v'' 'i' |
|----------------------------------------------------------------------|
|(.O) (&) (BBC News v) (Mozilla) |
|.-----------,.-----------,.-----------,-------------------------------|
||{} Bar || {} Foo (x)|| {} Baz | |
|-------------' '--------------------------------------------|
| |^|
| |H|
: (page content) : :
. . .
: : :
| |V|
| //|
'----------------------------------------------------------------------'
| New tab: http://www.foobarbaz.com |
'----------------------------------------------------------------------'
^ ^ ^ ^ ^
' | | | |
(6) '- (7) (8) -' '- (9) (10) -'
Summary of feedback and decisions:
(1) It was noted that "Stop" needs to be a large, easy to find button that people can quickly click in order to stop page loading, and that often the button is used to stop AJAX and script-y things that keep loading resources even after the page is loaded. Also, see (3) for discussion on the stateful Stop/Go button.
(2) Renaming "Go" menu to "History" was seen as a good idea.
(3) Putting buttons inside the URL bar led to interesting questions about how they could be taken out again. Any such system would require a lot of work and make the UI more complex. Instead, it will be safer/easier to allow buttons to be "docked" to the edge toolbar, and keep the space inside the URL bar for indicators (which will still be made to look like buttons to lend a button-like affordance)
Combining the Go/Stop button was seen as interesting, but potentially dangerous and confusing. It occurred to some that a more natural optimization would be to combine the Go and Reload functions, since when a page is loading or loaded, the functions are equivalent. The behaviour would be:
- When URL field is being modified == button is "Go"
- Page is loading == button is "Go"
- Page has loaded == button is "Refresh"
(4) Putting the search engine selector at the right (left for Mac) and using grey text in the background was seen as a good idea.
(5) Using the throbber as a progress indicator was seen as a good idea, and should be enabled both in the upper-right corner and on tabs.
(6) Putting the "Search Bookmarks" button on the Bookmark Toolbar was seen as a good idea, as long as it could be moved back to the Toolbar.
(7) Moving the "Home" button to the Bookmark Toolbar was contentious, and users should be allowed to move it back to the main toolbar.
(8) Close buttons on the active tab only was seen as the best strategy to improve the usability of a "close single tab" task while also preserving tab strip real estate. Exposing background close of tabs wasn't seen as an important enough case to show them on all tabs. A "Close Tab" button should also be added to the "Customize" palette.
(9) Optimizing tab width to support a consistent (X) location for quickly closing multiple tabs wasn't seen as being worth the cost of reducing the space available for having multiple tabs open before hitting tab overflow solutions. Some good alternatives were proposed the best being that tabs shrink as they are opened, and stay at the same width when closed with the mouse *until* the user moves the cursor away from the tabstrip, at which point they subtly stretch to fit the available space.
(10) Hiding the status bar by default was very contentious. People expressed concern at not being to see the link destinations, as well as the browser "feeling" slower when the user can't see the messages about contacting the remote server, etc. It should be left on. The text in the statusbar should indicate if a link will be opened in a new window (Opens new window: ...), a new tab (Opens new tab: ...), or replace content (Go to: ...)
Discussion question consensuses ..:
(A) Keep the Bookmark Toolbar (B) Use the post-it note metaphor for indicating that a page has tags (C) (This functionality will be part of Places anyway) (D) (We're keeping the status bar, this discussion is moot) (E) Changing the mouse cursor was seen as a good idea
Initial Proposal
This is our first pass at the redesign, as an ASCII mockup. Some design points have been called out and I'll go into detail about those below:
(1) -. .- (2) (5) -.
| | .- (3) (4) -. |
v v v v v
.----------------------------------------------------------------------.
| File Edit View History Bookmarks Help [_][=][x]|
|----------------------------------------------------------------------|
|.--. .--. ,.--.-------------------.--,,--,. ,----------.---,, .i. |
||<-| |->| ( |^v| {} www.foo.com v |.)||=>| ) ( google G |.O |) -O- |
|'--' '--' `'--'-------------------'--'`--`' '----------'--v`' 'i' |
|----------------------------------------------------------------------|
|(.O) (&) (BBC News v) (Mozilla) |
|.-----------,.-----------,.-----------,-------------------------------|
||{} Bar || {} Foo (x)|| {} Baz | |
|-------------' '--------------------------------------------|
| |^|
| |H|
: (page content) : :
. . .
: : :
| |V|
| //|
'----------------------------------------------------------------------'
^ ^ ^ ^ ^
' | | | |
(6) '- (7) (8) -' '- (9) (10) -'
(1) The reload button [^v] moves to be inside the URL bar so that it is directly related with page which will be affected by it
(2) The "Go" menu is renamed "History" as per the Places UI Design, and the contents will focus on navigating a user's session history
(3) The RSS [.)] and Go [=>] buttons move inside the URL bar, again to emphasize their direct relationship with the page. The Go button becomes a stateful button that is either "Go" or "Stop"; if a page is not loading, or if a user is typing in a URL, the button is "Go". If a page is loading and a user is not typing in a URL, the button is "Stop". The lock icon (not shown) and URL drop-down control (v) would continue to be rendered as they currently exist.
(4) The search engine selection drop-down button [.O] moves to the right and takes on a more button-like appearance with a general "search" icon (like a magnifying glass). The search plugin icon will appear in the search text field alongside text provided by the plugin (ie: [G] Search with Google); this text & icon may be rendered semi-transparent to make it lighter.
(5) The throbber will become the progress indicator as well as the progress meter, with a pie chart in the center filling up to indicate overall page load progress
(6) The bookmark search button (.o) is on the personal bookmark toolbar
(7) The Home button (&) moves to the personal bookmark toolbar
(8) Closebuttons appear on the active tab only in order to achieve the best combination of having closebuttons appear where users expect & preserving as much area as possible on background tabs for selection and display of tab names.
(9) Tabs are a fixed width
(10) The status bar is hidden by default, and the page resizer is in the bottom right corner underneath the scrollbar.
