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):
'''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)
'''Tabbed Toolbars''', see Navigation Toolbar above (Faaborg)
#'''Operator''' (Kaply):
 
 
 
'''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):
'''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):
 
 
 
'''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):
 
 
 
'''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):
'''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):
 
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):
'''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 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):
 
 
'''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):
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):
 
 
 
'''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):
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):
'''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):
 
 
'''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):
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)
'''Operator 6.0.1''' (Kaply)
#'''Tails Export''' (Robert de Bruin)
 
'''Tails Export''' (Robert de Bruin)
497

edits