August « 2009 « Chromatic Pixel

Archive for August, 2009

« Older Entries

Windows Theme Project (Progress Report) #3

Friday, August 28th, 2009

Progress:

Narrowed direction and focus for Firefox 3.7 and 4.0 Theme/UI changes

Next Steps:

Menu item trimming/sorting
File bugs related to implementation
Start implementation

Specifics:

Had a lot of great progress this week. The UX team had a chance to narrow focus for future Theme/UI work. This resulted in a very productive design lunch talk by Alex Limi and Alex Faaborg. We also had some great meetings about needed platform capabilities (posted to the Wiki by Alex Faaborg).

We currently have some working directions for 3.7 and 4.0. Not set in stone of course, but a firm direction to start with.

Firefox 3.7:

Hide menubar by default(on Vista and 7, not XP).
Sort existing menu items into something like Page/Tools buttons (actual implementation to be determined).
Move the bookmarks menu item to a bookmarks widget. This can live on the bookmarks toolbar(default) or on the navigation bar.
Create a home tab. Loads homepage in 3.7 to have expanded functionality in 4.0.
Combine stop/reload into one button. Optional separate stop and reload buttons in the customization pane.
Progress “line” under location bar on active tab. At the top of the tab for background tabs.

Firefox 4.0:

Introduction of “App” tabs
Combine location bar and search bar (separate location and search items can be customized).
Tabs-on-top option (possibly left/right as well).
In bar search “button” with drop down of other types of search.
Ability to attach stop/reload/go to location bar (TBD).
Expanded home tab functionality.
Disable bookmarks bar by default if it has not been altered from default.
Remove status bar. Create a place for extensions.
Profile/identity UI.

Tags: Experimental, Progress Report, Theme, Windows, Wireframes
Posted in Firefox | 22 Comments »

Theme Revamp: Further Exploration

Monday, August 24th, 2009

It’s been a few weeks since the initial theme concepts for Firefox 3.7 and 4.0 hit the Wiki. This resulted in a lot of great feedback. Which has been explored and extended to things like customization ideas and how exactly to handle the menu bar transition visually.

I have spent some time refocusing on 3.7. Exploring toolbar handling on glass, experimenting with different toolbar button visual styling and ideas on button hovering.

Bookmarks Toolbar Variations

Experimented with a few different styles for handling toolbars on Glass:

Flat Box: Simple translucent background
Inset Box: Similar to the above, but with an inset appearance
Expanded Background (Translucent White): Expand a background from the tab strip to below the navigation bar. Translucent white to remain a neutral background
Expanded Background (Translucent Grey): Darker but still neutral background
Expanded Background (Translucent Light Blue): Match Windows 7 toolbar blue
No Background: Floating toolbar items. Probably the least attractive option due to legibility concerns

Navigation Button Style Variations

Tried some different styles for navigation toolbar buttons. Smooth style(original), more glassy/sharp style and a more plastic variation.

The glassy style strikes me as probably too much. The plastic style might be something more suited to XP.

Button Hover Exploration

Some initial ideas on how to handle hover states. This might be a good place to integrate some color into the more neutral style.

Tags: Experimental, Theme, Windows
Posted in Firefox | 5 Comments »

Menubar Handling

Monday, August 17th, 2009

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.

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?