Microformats/UE/ideas

From MozillaWiki
Jump to: navigation, search

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

Tabbed Toolbars (Faaborg): tabbedToolbar.jpg_large.jpg

Search Bar

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

Location Bar

Plus icon in the location bar (Faaborg): locationBarMenu.jpg_large.jpg

Toolbar

Tabbed Toolbars, see Navigation Toolbar above (Faaborg)

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

The Content Sidebar (Faaborg): contentSidebar.jpg_large.jpg

Sub-Page History (Faaborg): microformatHistoryLocations.jpg_large.jpg

Sub-Page Favorites (Faaborg): microformatFavoritesMITTrip.jpg_large.jpg

Content Area

General

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

Operator 6.0.2 (Kaply):

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. --Dikrib 06:44, 4 February 2007 (PST)

Here is a quick mockup of the idea (Faaborg): cursorChange.jpg

Display

Glass on a light page (Faaborg): layer_glassOnWhite.jpg_large.jpg

Glass on a dark page (Faaborg, idea suggested by Beltzner): layer_glassOnBlack.jpg_large.jpg

Lights (Faaborg, idea suggested by Shaver): layer_lights.jpg_large.jpg

Bubbles (Faaborg): layer_bubbles.jpg_large.jpg

Push the page literally pushes toward you in areas that contain microformated content (Faaborg): layer_push.jpg_large.jpg

Dock for OS X, on light page (Faaborg): layer_dockOnWhite.jpg_large.jpg

Dock for OS X, on a dark page (Faaborg): layer_dockOnBlack.jpg_large.jpg

Start for Vista (Faaborg): layer_start.jpg_large.jpg

File for OS X (Faaborg): layer_fileOSX.jpg_large.jpg

File for Vista (Faaborg): layer_fileVista.jpg_large.jpg

Target Acquired for Ubuntu's Human theme (Faaborg): layer_targetAcquired.jpg_large.jpg

Interaction with a Specific Microformat

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

Contextual Menu (Faaborg, idea suggested by Tantek): descriptiveText.jpg_large.jpg

Clover (Faaborg): clover.jpg_large.jpg

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)