User:Ge.diego/User Interface Mockup

From MozillaWiki
Jump to: navigation, search
Please leave your feedback and comments on the discussion page.


Mockup proposed by Ge.diego user

This mockup is based on the one proposed by Mike Beltzner in the User interface design FX2 page.

Outline of the mockup

Mockup proposed:

 .----------------------------------------------------------------------.
 | File   Edit   View   History   Bookmarks   Tools   Help     [_][=][x]|
 |----------------------------------------------------------------------|
 |(.O) (&) (BBC News v) (Mozilla)                                       |<-.
 |----------------------------------------------------------------------|  |
 |.-----------,.-----------,.-----------,-------------------------------| (4)
 ||{} Bar     || {} Foo (x)|| {} Baz    |                               |
 |-------------'           '--------------------------------------------|
 |.--. .--. .--.  ,-------------------..--,,-,   ,----------.---,,  .i. |
 ||<-| |->| |[]| ( |^v|{}www.foo.com v||.)||=>) (  google G |.O |)  -O- |<-.
 |'--' '--' '--'  `-------------------''--''-'   '----------'--v''  'i' |  |
 |----------------------------------------------------------------------| (3)
 |                                                                    |^|
 |                                                                    |H|
 :                             (page content)                         : :
 .                                                                    . .
 :                                                                    : :
 |                                                                    |V|
 |\\                                                                  //|
 '----------------------------------------------------------------------'
 | New tab: http://www.foobarbaz.com                                    |
 '----------------------------------------------------------------------'
  ^                                                                   ^
  '                                                                   |
  '-(1)                                                          (2) -'

New features proposed

Page resizer in both bottom corners (1)

I think the page resizer spends only a little amount of space and sometimes may be convenient (for example when you want to align the page to the right) to resize from the left.

Maintain page resizer in a maximized window (2)

When you have the browser window maximized, in order to resize it, you have first to press the restore button and then pull the page resizer. i think it could be more usable to allow the user to pull the page resizers whenever he wants to.

Put tab bar on top of embraced elements

As stated in my tab management comments, the Opera browser uses already this functionality, and with a very good criterion in my opinion.

The tab should visually cover everything related to it. These elements qualify because they are changing depending on which tab te user is (3):

  1. Back [<-] and forward [->] button.
  2. Stop button [[]].
  3. URL bar [{} www.foo.com v].
  4. The RSS [.)] and Go [=>] buttons.
  5. The search text and icon [ google G ] and search engine selection drop-down button [.O].
  6. The throbber [.i. -O- 'i'].

The tab should not cover elements not related to the current page (4). This element remain constant regardless of the tab selected:

  1. The personal bookmark toolbar.

All these changes are represented above in the mockup.

Tab management comments

These comments are discussed in my tab management comments.