Microformats/UE/ideas: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
Line 24: Line 24:
== Location Bar ==
== Location Bar ==


'''Plus icon''' in the location bar (Faaborg):
#'''Plus icon''' in the location bar (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/locationBarMenu.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/locationBarMenu.jpg_large.jpg


Line 59: Line 59:
#'''Live Clipboard''' (Ray Ozzie, and his concept development team):
#'''Live Clipboard''' (Ray Ozzie, and his concept development team):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/liveClipboardAmbiguity.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/liveClipboardAmbiguity.jpg


#'''Operator 6.0.2''' (Kaply):
#'''Operator 6.0.2''' (Kaply):
Line 68: Line 67:
#'''Glass''', on a light page (Faaborg):
#'''Glass''', on a light page (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_glassOnWhite.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_glassOnWhite.jpg_large.jpg


#'''Glass''', on a dark page (Faaborg, idea suggested by Beltzner):
#'''Glass''', on a dark page (Faaborg, idea suggested by Beltzner):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_glassOnBlack.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_glassOnBlack.jpg_large.jpg


#'''Lights''' (Faaborg. idea suggested by Shaver):
#'''Lights''' (Faaborg, idea suggested by Shaver):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_lights.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_lights.jpg_large.jpg


#'''Bubbles''' (Faaborg):
#'''Bubbles''' (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_bubbles.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_bubbles.jpg_large.jpg


#'''Push''', the page literally pushed toward you in areas that contain microformated content (Faaborg):
#'''Push''', the page literally pushed toward you in areas that contain microformated content (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_push.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_push.jpg_large.jpg


#'''Dock''' for OS X, on light page (Faaborg):
#'''Dock''' for OS X, on light page (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_dockOnWhite.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_dockOnWhite.jpg_large.jpg


#'''Dock''' for OS X, on a dark page (Faaborg):
#'''Dock''' for OS X, on a dark page (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_dockOnBlack.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_dockOnBlack.jpg_large.jpg


#'''Start''' for Vista (Faaborg):
#'''Start''' for Vista (Faaborg):
Line 98: Line 91:
#'''File''' for OS X (Faaborg):
#'''File''' for OS X (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_fileOSX.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_fileOSX.jpg_large.jpg


#'''File''' for Vista (Faaborg):
#'''File''' for Vista (Faaborg):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_fileVista.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_fileVista.jpg_large.jpg


#'''Target Acquired''' for Ubuntu's Human theme (Faaborg):
#'''Target Acquired''' for Ubuntu's Human theme (Faaborg):
Line 114: Line 105:
The user hovers their mouse over the icons and the entire area is highlighted:
The user hovers their mouse over the icons and the entire area is highlighted:
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/nonModal2.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/nonModal2.jpg_large.jpg


#'''Contextual Menu''' (Faaborg, idea suggested by Tantek):
#'''Contextual Menu''' (Faaborg, idea suggested by Tantek):
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/descriptiveText.jpg_large.jpg
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/descriptiveText.jpg_large.jpg


#'''Clover''' (Faaborg):
#'''Clover''' (Faaborg):

Revision as of 09:39, 4 February 2007

Please add Your Designs to this Page

Have a cool idea about microformat detection UI? Add it below and share it with the world, (or at least the Mozilla community). Mockups at any level of fidelity, creativity, and general wackiness are completely welcome.

Categorization of Conceptual Mockups

Conceptual mockups on this page are categorized by area in the Firefox chrome:

anatomyChrome.jpg_large.jpg

Menu Bar

There are currently no conceptual mockups for this area in the chrome.

Navigation Toolbar

  1. Tabbed Toolbars (Faaborg):

tabbedToolbar.jpg_large.jpg

Search Bar

There are currently no conceptual mockups for this area in the chrome.

Location Bar

  1. Plus icon in the location bar (Faaborg):

locationBarMenu.jpg_large.jpg

Toolbar

  1. Tabbed Toolbars, see Navigation Toolbar above (Faaborg)
  2. Operator (Kaply):

summit1.jpg_large.jpg

Tabstrip

There are currently no conceptual mockups for this area in the chrome.

Notification Box

There are currently no conceptual mockups for this area in the chrome.

Rumor has it that another microformats extension for Firefox may be using this style of interaction. I'll link to it once it is publicly released.

Side Bar

  1. The Content Sidebar (Faaborg):

contentSidebar.jpg_large.jpg

  1. Sub-Page History (Faaborg):

microformatHistoryLocations.jpg_large.jpg

  1. Sub-Page Favorites (Faaborg):

microformatFavoritesMITTrip.jpg_large.jpg

Content Area

General

  1. Live Clipboard (Ray Ozzie, and his concept development team):

liveClipboardAmbiguity.jpg

  1. Operator 6.0.2 (Kaply):

operator062.jpg

Display

  1. Glass, on a light page (Faaborg):

layer_glassOnWhite.jpg_large.jpg

  1. Glass, on a dark page (Faaborg, idea suggested by Beltzner):

layer_glassOnBlack.jpg_large.jpg

  1. Lights (Faaborg, idea suggested by Shaver):

layer_lights.jpg_large.jpg

  1. Bubbles (Faaborg):

layer_bubbles.jpg_large.jpg

  1. Push, the page literally pushed toward you in areas that contain microformated content (Faaborg):

layer_push.jpg_large.jpg

  1. Dock for OS X, on light page (Faaborg):

layer_dockOnWhite.jpg_large.jpg

  1. Dock for OS X, on a dark page (Faaborg):

layer_dockOnBlack.jpg_large.jpg

  1. Start for Vista (Faaborg):

layer_start.jpg_large.jpg

  1. File for OS X (Faaborg):

layer_fileOSX.jpg_large.jpg

  1. File for Vista (Faaborg):

layer_fileVista.jpg_large.jpg

  1. Target Acquired for Ubuntu's Human theme (Faaborg):

layer_targetAcquired.jpg_large.jpg


Interaction with a Specific Microformat

  1. Non-Modal Design (Faaborg):

nonModal1.jpg_large.jpg The user hovers their mouse over the icons and the entire area is highlighted: nonModal2.jpg_large.jpg

  1. Contextual Menu (Faaborg, idea suggested by Tantek):

descriptiveText.jpg_large.jpg

  1. Clover (Faaborg):

clover.jpg_large.jpg


Find Bar

There are currently no conceptual mockups for this area in the chrome.

Status Bar

  1. Operator 6.0.1 (Kaply)
  2. Tails Export (Robert de Bruin)