user-interface: Difference between revisions
Jump to navigation
Jump to search
(moved Social Network Portability to its own page) |
mNo edit summary |
||
| Line 1: | Line 1: | ||
<h1> User Interface </h1> | <h1> User Interface </h1> | ||
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. | 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. | ||
| Line 6: | Line 5: | ||
== Implementations == | == Implementations == | ||
See [[implementations]], and document examples of good UI from there, here. | 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 | * [[Miffy]] inserts a green square into the document to represent the presence of microformat | ||
| Line 12: | Line 10: | ||
* Other [[Greasemonkey]] scripts insert an icon inline into the page | * Other [[Greasemonkey]] scripts insert an icon inline into the page | ||
* [https://addons.mozilla.org/firefox/2240/ Tails Export] (Firefox extension) can display and export some microformats. | * [https://addons.mozilla.org/firefox/2240/ Tails Export] (Firefox extension) can display and export some microformats. | ||
== Design Guidelines == | == Design Guidelines == | ||
These are some suggested design guidelines for Web designers and developers by [http://blog.mozilla.com/faaborg/ Alex Faaborg], a user experience designer at Mozilla: | These are some suggested design guidelines for Web designers and developers by [http://blog.mozilla.com/faaborg/ 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" | *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" | ||
| Line 21: | Line 17: | ||
== Challenges == | == Challenges == | ||
* Chris Messina: "What kind of solutions can we come up with that are single click only?" | * Chris Messina: "What kind of solutions can we come up with that are single click only?" | ||
* Andy Mabbett - How can we make them [[accessibility|accessible]] to people with (for instance) visual disabilities? | * Andy Mabbett - How can we make them more [[accessibility|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? | * 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? | ||
| Line 30: | Line 25: | ||
== Browser Integration == | == Browser Integration == | ||
From screenshot brainstorms to working plugins, there is a lot going on with browser integration of microformats support. | From screenshot brainstorms to working plugins, there is a lot going on with browser integration of microformats support. | ||
| Line 40: | Line 34: | ||
=== Plugins === | === Plugins === | ||
* The microformat [[implementations]] page has some Greasemonkey scripts. | * The microformat [[implementations]] page has some Greasemonkey scripts. | ||
* http://greasemonkey.makedatamakesense.com/callto_tel/ by Scott Reynen | * http://greasemonkey.makedatamakesense.com/callto_tel/ by Scott Reynen | ||
| Line 47: | Line 40: | ||
=== Planning and Discussion === | === Planning and Discussion === | ||
*[http://wiki.mozilla.org/Microformats Discussion of microformat detection in Firefox 3] | *[http://wiki.mozilla.org/Microformats Discussion of microformat detection in Firefox 3] | ||
*[http://wiki.mozilla.org/Microformats/UE/ideas UI brainstorming on the Mozilla Wiki] | *[http://wiki.mozilla.org/Microformats/UE/ideas UI brainstorming on the Mozilla Wiki] | ||
| Line 53: | Line 45: | ||
== Simpler Markup Languages == | == 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. | There are plenty of [[wiki-formats]] that attempt to make it easier for more people author semantic markup, often with textually decorative punctuation. | ||
| Line 59: | Line 50: | ||
=== Markdown extension for hCalendar === | === Markdown extension for hCalendar === | ||
See [http://article.gmane.org/gmane.text.markdown.general/2027 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 [http://article.gmane.org/gmane.text.markdown.general/2027 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. | ||
Revision as of 17:29, 29 July 2007
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 more 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
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.
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
Plugins
- The microformat implementations page has some Greasemonkey scripts.
- http://greasemonkey.makedatamakesense.com/callto_tel/ by Scott Reynen
- Tails Export (Firefox extension) by Robert de Bruin.
- 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.