user-interface

User Interface

Recently there have been many really good user interface ideas and suggestions for working with microformats. This page serves to collect and document them so that we may be inspired by and iterate on each others' works.

Design Guidelines

These are some suggested design guidelines for Web designers and developers by Alex Faaborg, a user experience designer at Mozilla:

• Design based on actions, not data. A button that says "Send to Calendar" is considerably more useable than a green button that simply says "hCalendar"
• Use iconic images instead of acronyms. In addition to being more descriptive, they localize better. Here are some I've been showing in various talks: microformat icons. These are still very preliminary. Mozilla will likely release all of the source artwork for our microformat icons under a creative commons license around the launch of Firefox 3. This will enable Web designers to integrate the icons into their sites, and other Web browsers can consider using a similar set of icons.

Challenges

• Chris Messina: "What kind of solutions can we come up with that are single click only?"
• Andy Mabbett - How can we make them accessible to people with (for instance) visual disabilities?
• Alex Faaborg: Mozilla has had inquiries from reporters in the mainstream media (Wired and Business Week) who wanted to cover microformats in stories about the future of the Web browser, but they then later backed out because they felt the term "microformats" would only appeal to developers, and not the average reader. These types of mainstream stories need to focus on the user experience, and not the underlying technology, but what term should reporters use to describe the overall feature?
  • I think we should stick with the term "microformats" until someone comes up with a better term that doens't "only appeal to developers". Note that we should avoid terms which are either overloaded, or dilute the concepts, or are just another form of made-up jargon. Tantek

Social Network Portability

See the separate social-network-portability page.

Browser Integration

From screenshot brainstorms to working plugins, there is a lot going on with browser integration of microformats support.

In General

Browser support for microformats consists of three things in general:

1. Automatically detect the presence of microformats on a page
2. Parse them into a set of microformats for that page (preferably maintaining their relative relationships perhaps within a tree structure).
3. Do something useful with them

Do something useful

Do something useful could be any or all of:

• User interface: Provide the user with an additional user interface for common actions to take with those microformats
• API: Provide an API (DOM extensions on "document" object?) to access those microformats for browser extension developers.
• Cache: cache that set/tree of parsed microformats along with the URL/Title/date-accessed of the page in the browser navigation "History" or even page cache, and then use that set of objects for various auto-complete/auto-fill uses and other enhancements to existing browser features.

Additional user interface

Some examples of additional user interface for common actions to take with microformats found in pages, grouped by specific microformat. Note that most of these actions should be applicable to all instances of the microformat on the page at once (e.g. export all contacts), of for a selection of instances (e.g. export selected contacts), or one just one specific instance (e.g. export contact XYZ).

• hCard:
  • "Add to Address Book" (convert the hCard to a vCard (.vcf) and pass it onto the OS to automatically open/incorporate into the user's preferred local address book application)
  • add to Gmail, Yahoo Mail, Hotmail address book (etc.)
  • send to Bluetooth, for quick transfer of contact info from the web to a cell phone.
  • export as text/ comma-separated-variables (CSV) to allow editing, sorting and/ or import into spreadsheets/ databases, etc. (or concatenate to existing file)
  • display contact details in an on-screen or downloadable semacode (to allow them to be read by mobile devices)
  • If a tel (phone number) having type home, work or cell is present, provide options to dial it (NB applies to one number at a time only; except for possible conference-call uses) directly, or via
    • built-in modem
    • bluetooth command to a paired device (e.g. cell phone)
    • default telephony app (e.g. skype-out)
  • If a tel (phone number) having type home, work or cell is present, provide options to send MMS:
    • directly
    • using on-line service
    • bluetooth command to a paired device (e.g. cell phone)
  • If a tel of type fax is present, provide options to send a fax to it via:
    • efax online service
    • built-in fax modem
  • If a birth-date is present, treat it as a recurring hCalendar event (see below).
• hCalendar:
  • "Add to Calendar" (convert the hCalendar events to iCalendar vEvents (.ics) and pass them onto the OS to automatically open/incorporate into the user's preferred local calendaring application).
  • add to gCalendar, Yahoo Calendar, Upcoming, Eventful (etc.)
  • "Subscribe to Calendar" - construct and pass on a conversion URL (e.g. using X2V, or prefixing the URL to the current page (or to the specific event within using a fragment identifier) with webcal://feeds.technorati.com/events/ ) and pass it onto the OS to get the OS to pass the URL onto the user's preferred local calendaring application for that app to subscribe to.
  • export as text/ CSV as above.
• Geo
  • find on map of user's choosing
  • export as KML/ GPX file; or concatenate to existing file
  • export as text/ CSV as above

Screen Shots

• Conceptual Mockups of Microformat Detection in Firefox 3
• Jon Hicks: Proposal for a Safari Microformats plugin
  
• Ben Ward: Microformats in Web Browsers
  
• Microformats in Flock
  
• Margin Marks UI Concept, Margin Marks Comps on Flickr

Implementations

See implementations, and document examples of good UI from there, here.

Plugins

• Operator Firefox extension
• Tails Export (Firefox extension) by Robert de Bruin can display and export some microformats.

Greasemonkey user scripts

• http://greasemonkey.makedatamakesense.com/callto_tel/ by Scott Reynen
• Some Greasemonkey scripts use a separate iFrame for microformat content
• Other Greasemonkey scripts insert an icon inline into the page

Browser buttons

• Miffy inserts a green square into the document to represent the presence of microformat

CSS user stylesheets

• Jon Hicks has written a user stylesheet for Mac browsers that highlights hCard and hCalendar data.

Planning and Discussion

• Discussion of microformat detection in Firefox 3
• UI brainstorming on the Mozilla Wiki
• The Camino Wiki has a page where future microformats support is being discussed and organized

Simpler Markup Languages

There are plenty of wiki-formats that attempt to make it easier for more people author semantic markup, often with textually decorative punctuation.

As these simpler markup languages are something that *users* are expected to type, they are user interface.

Markdown extension for hCalendar

See Markdown and the hCal microformat which proposes an extension to the Markdown text markup language to capture and represent hCalendar event semantics in a human editable form.

See Also

• hcard-user-interface
• data-portability
• social-network-portability