There’s a well established saying and it goes something like this: ‘Don’t keep an idea to yourself because you can guarantee that someone else has also thought of it’.
This weekend at @media I finally got to show off to Tantek some UI design I’d been doing for putting user-focused microformats discovery into web browsers. I’ve been sitting on the sketches for about six weeks due to time commitments at uni and general blogging laziness. For a while I was going to try implementing it myself. Excuses aside, I didn’t post it. This morning, Jon Hicks pretty much did. Oh how I laughedcried.
To my relief there are some quite important differences between my interpretation of this idea and Jon’s, so really it’s all worked out well as a motivating factor to finally get this posted! I recommend reading Jon’s post too.
So, this is a concept for putting Microformats ‘auto-discovery’ user interface in a web browser. Any web browser (although the sketches were original conceived as a Firefox extension). Most importantly, this UI is focused on providing functionality to users with no knowledge of a Microformat, nor any need to understand the underlying formats. By which I mean almost everyone who uses the Internet.
I’ve released the design rather than build it as I have no knowledge of writing Firefox extensions and it’s likely too complex to use as a first ‘teach-myself-XUL’ project. Plus, I’d never actually get around to doing it.
Presenting Microformats in Web Browsers
This design is intended to focus on the user interacting with the information: Moving events or contact information from the page into a Calendar or Address Book.
This is all based on the hCard and hCalendar microformats.
Discovery
hCard and hCalendar discovery should be automatic and consistent with the Web Browser’s existing auto-discovery behaviour for feeds.
The presence of hCalendar data is indicated with a calendar icon in the location bar, and hCard with a ‘contact card’ icon (similar to that used by address book applications on Windows and Mac OSX).
Note that we’re being consistent with feed discovery (which could of course be extended to treat hAtom as a first-class feed citizen too). Users are already being trained to look at the location bar for for additional page content.
Again, with this being designed for my Dad to use, the terminology used is ‘Calendar’ and ‘Contact’ not ‘microformat’.
Clicking the Calendar or Contact icon will invoke the corresponding interface (below).
Events
Events are listed in a simple window similar to the Download Manager interfaces of Firefox or Safari. They should be sorted by start date.
Events are summarised with three lines of information, in some order of importance: The event title, location and date are all displayed where available. In cases where some of that information is missing then a less important field could be displayed instead (such as the URL for the event, although the event title could equally double as a hyperlink to the event URL).
To the right of each event listing are three buttons. Working right-to-left, as the outermost button is the most important:
- “Add Event to Calendar”. This converts the hCalendar microformat into an ICS event file and opens it locally on the user’s machine, where an installed calendar application will handle it. This should probably be overridable to support Web-based calendars such as Google Calendar.
- “Add Event Location to Address Book”. Where the hCalendar location is represented by an hCard, the location can be converted into a vCard and opened on the local machine (invoking the default address book application)
- “View Map of Event Location”. Invokes a mapping service (such as Google or Yahoo! Maps) using information from the location field. In Firefox, this could be customisable using the native installed Mycroft/OpenSearch Search Providers. This particular icon could be a lot better!
Ideally the interface should also support drag and drop of each event’s icon onto the desktop or into other applications to create an iCal event file.
In the status bar of the Events window is a “Subscribe to Calendar” button, which should pass the current page to Technorati’s hCalendar pipe to create a subscribable iCalendar.
On the Mac this should open the Technorati URL with a webcal:// prefix, rather than http://. On other platforms it might be preferable just to present the iCalendar URL to allow copy and paste into the user’s calendar application (depending on what Windows Vista’s iCal clone expects).
hCalendar doesn’t facilitate logos for events, so a generic ‘Calendar Event’ icon is displayed. This should ideally be the system icon for .ics files. Potentially, a logo icon could be extracted from a location hCard (suboptimal) or perhaps from the favicon of the event website.
People & Places
As for Events, hCard Contacts are listed in a simple ‘download manager-esque’ window. Contacts should be sorted by name (the illustration isn’t sorted, err, whoops).
A special exception to this sorting is the hCard of the page author (contained in or containing ADDRESS elements), which is bumped to the top. It seems reasonable to predict that users will be most interested in the author’s hCard, rather than that of blog comment contributions or blogroll entries.
As for Event listings, buttons on the right hand side offer functionality to open a vCard with the default address book and open a map for the hCard’s street address (where present).
It could be useful to provide other buttons for contacts. hCards can embed information about telephone numbers and IM screen names which could be used to invoke other applications such as diallers, Skype or AIM. However, whilst I’d love to see that functionality I’m reluctant to clutter the example illustrations.
Icons next to contact names should use the logo property of the hCard (I think), but if that is absent a fallback method could load the user’s Gravatar or the favicon found at their URL.
And that is my idea for microformats in web browsers. Consider the lesson about publishing on time well and truly learned. Ahem.
This work is licensed under a Creative Commons Attribution-ShareAlike 2.0 England & Wales License. In the event that you want to implement this and can’t meet the Share Alike requirement for commercial reasons, contact me. Lets see how far sharing can go for now though.
Updates
- There’s now a page dedicated to µF User Interface on the Microformats Wiki
Ben is a 24 year old Web Developer from Cambridge and is a computing graduate of the University of Manchester.