Microformats/UE/ideas: Difference between revisions
No edit summary |
|||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 11: | Line 11: | ||
== Menu Bar == | == Menu Bar == | ||
There are currently no conceptual mockups for this area in the chrome. | ''There are currently no conceptual mockups for this area in the chrome.'' | ||
== Navigation Toolbar == | == Navigation Toolbar == | ||
'''Tabbed Toolbars''' (Faaborg): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/tabbedToolbar.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/tabbedToolbar.jpg_large.jpg | ||
== Search Bar == | == Search Bar == | ||
There are currently no conceptual mockups for this area in the chrome. | ''There are currently no conceptual mockups for this area in the chrome.'' | ||
== Location Bar == | == Location Bar == | ||
| Line 28: | Line 28: | ||
== Toolbar == | == Toolbar == | ||
'''Tabbed Toolbars''', see Navigation Toolbar above (Faaborg) | |||
'''Operator''' (Kaply): | |||
http://people.mozilla.com/~faaborg/files/20061215-introducingOperator/summit1.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20061215-introducingOperator/summit1.jpg_large.jpg | ||
== Tabstrip == | == Tabstrip == | ||
There are currently no conceptual mockups for this area in the chrome. | ''There are currently no conceptual mockups for this area in the chrome.'' | ||
== Notification Box == | == Notification Box == | ||
| Line 44: | Line 47: | ||
== Side Bar == | == Side Bar == | ||
'''The Content Sidebar''' (Faaborg): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/contentSidebar.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/contentSidebar.jpg_large.jpg | ||
'''Sub-Page History''' (Faaborg): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/microformatHistoryLocations.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/microformatHistoryLocations.jpg_large.jpg | ||
'''Sub-Page Favorites''' (Faaborg): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/microformatFavoritesMITTrip.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/microformatFavoritesMITTrip.jpg_large.jpg | ||
| Line 57: | Line 66: | ||
===General=== | ===General=== | ||
'''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): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/operator062.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/operator062.jpg | ||
Instead of the black outline, maybe use an icon that follows the cursor (or change the cursor itself), when it hovers a microformat, indicating "Context click here to interact with the microformat". This way you avoid changing/overlaying the web page while still making the microformat somewhat discoverable. --[[User:Dikrib|Dikrib]] 06:44, 4 February 2007 (PST) | |||
Here is a quick mockup of the idea (Faaborg): | |||
http://people.mozilla.com/~faaborg/files/20070426-detectionUI2/cursorChange.jpg | |||
===Display=== | ===Display=== | ||
'''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): | |||
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): | |||
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): | |||
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 pushes 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): | |||
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): | |||
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): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_start.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_start.jpg_large.jpg | ||
'''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): | |||
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): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_targetAcquired.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/layer_targetAcquired.jpg_large.jpg | ||
===Interaction with a Specific Microformat=== | ===Interaction with a Specific Microformat=== | ||
'''Non-Modal Design''' (Faaborg): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/nonModal1.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/nonModal1.jpg_large.jpg | ||
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: | ||
| Line 116: | Line 157: | ||
'''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): | |||
http://people.mozilla.com/~faaborg/files/20070204-detectionUI/clover.jpg_large.jpg | http://people.mozilla.com/~faaborg/files/20070204-detectionUI/clover.jpg_large.jpg | ||
==Find Bar== | ==Find Bar== | ||
There are currently no conceptual mockups for this area in the chrome. | ''There are currently no conceptual mockups for this area in the chrome.'' | ||
==Status Bar== | ==Status Bar== | ||
'''Operator 6.0.1''' (Kaply) | |||
'''Tails Export''' (Robert de Bruin) | |||
Latest revision as of 21:17, 26 April 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:
Menu Bar
There are currently no conceptual mockups for this area in the chrome.
Tabbed Toolbars (Faaborg):
Search Bar
There are currently no conceptual mockups for this area in the chrome.
Location Bar
Plus icon in the location bar (Faaborg):
Toolbar
Tabbed Toolbars, see Navigation Toolbar above (Faaborg)
Operator (Kaply):
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
The Content Sidebar (Faaborg):
Sub-Page History (Faaborg):
Sub-Page Favorites (Faaborg):
Content Area
General
Live Clipboard (Ray Ozzie, and his concept development team):
Operator 6.0.2 (Kaply):
Instead of the black outline, maybe use an icon that follows the cursor (or change the cursor itself), when it hovers a microformat, indicating "Context click here to interact with the microformat". This way you avoid changing/overlaying the web page while still making the microformat somewhat discoverable. --Dikrib 06:44, 4 February 2007 (PST)
Here is a quick mockup of the idea (Faaborg):
Display
Glass on a light page (Faaborg):
Glass on a dark page (Faaborg, idea suggested by Beltzner):
Lights (Faaborg, idea suggested by Shaver):
Bubbles (Faaborg):
Push the page literally pushes toward you in areas that contain microformated content (Faaborg):
Dock for OS X, on light page (Faaborg):
Dock for OS X, on a dark page (Faaborg):
Start for Vista (Faaborg):
File for OS X (Faaborg):
File for Vista (Faaborg):
Target Acquired for Ubuntu's Human theme (Faaborg):
Interaction with a Specific Microformat
Non-Modal Design (Faaborg):
The user hovers their mouse over the icons and the entire area is highlighted:
Contextual Menu (Faaborg, idea suggested by Tantek):
Clover (Faaborg):
Find Bar
There are currently no conceptual mockups for this area in the chrome.
Status Bar
Operator 6.0.1 (Kaply)
Tails Export (Robert de Bruin)