Posts Tagged ‘Wireframes’

Menubar Handling

Recently we have been discussing the possibility of hiding various UI elements by default in a future version of Firefox. In particular the Menu Bar. The current functionality would be streamlined and relocated to another location. This would(could) be accompanied by various other UI changes. However the menubar would still be present just hidden. Which creates the question of how to handle the Menu Bar if it were to be manually turned back on.

I have put togther some wireframes to illustrate how this might be handled in various configurations.

In either a tabs-on-bottom or tabs-on-top configuration there are some challenges:

  • Can the titlebar and the menubar be shown separately?
  • If the menubar can be shown alone where does it go? Can it go in the titlebar?
  • How do you handle this on Glass while retaining legibility but without breaking it visually?

Menubar Wireframes (Tabs-on-Bottom)

Finding a way to maintain the large areas of glass is a specific challenge in this configuration.

Ver-A (Floating) Ver-B (Extended Background) Ver-C (Selective Background) Ver-D (Right Titlebar) Ver-E (Left Titlebar) Ver-F (Left Titlebar-Alt) Ver-G (Full Width Bar) Ver-H (Windows 7/IE Style)

Menubar Wireframes (Tabs-on-Top)

Aside from hierarchical concerns, adding tabs-on-top has a large focus on vertical space reduction. What is the best way to allow a traditional Menu Bar while retaining that goal?

Ver-A (Floating with Titlebar) Ver-B (Floating without Titlebar) Ver-C (Extended Background) Ver-D (Selective Background) Ver-E (Left Titlebar) Ver-F (Right Titlebar) Ver-G (Windows 7/IE Style)

Tags: , , ,
Posted in Firefox | 30 Comments »