user-interface

From Microformats Wiki
Jump to navigation Jump to search

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.

Implementations

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

  • Miffy inserts a green square into the document to represent the presence of microformat
  • Some Greasemonkey scripts use a separate iFrame for microformat content
  • Other Greasemonkey scripts insert an icon inline into the page
  • Tails Export (Firefox extension) can display and export some microformats.


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?

Social Network Portability

(This section may be deserving of its own page.)

The Problem

Why is it that every single social network community site makes you:

  • re-enter all your personal profile info (name, email, birthday, URL etc.)
  • re-add all your friends

?

The Goal

Instead, let's see some user interface suggestions for sites to simply import or, even better subscribe to:

Discussion and suggestions

picture-9.png

Social Network Portability FAQ

  • Doesn't OpenID address the re-enter all your personal profile info problem?
    • No it does not. OpenID is fundamentally about proving to one site that you own or control another particular URL. Nothing more. All the profile stuff is extra and even then the specific property set is unspecified in OpenID. That's where hCard comes in. hCard specifies a vocabulary of personal profile info (name, email, birthday, URL etc.) based on industry standard vCard. And in fact that's all you need to solve the "re-enter all your personal info" problem for public sites - no need to authenticate public URLs via OpenID, just read them and parse their hCard(s).

Browser Integration

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

Screen Shots

Plugins

Planning and Discussion

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.