User Interface

(Difference between revisions)

Jump to: navigation, search
(Additional user interface: adr)
Current revision (16:55, 7 March 2017) (view source)
m (Planning and Discussion)
 
(25 intermediate revisions not shown.)
Line 1: Line 1:
-
<h1> User Interface </h1>
+
<entry-title> User Interface </entry-title>
-
{{TOC-right}}
+
 
-
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.
+
There have been many really good user interface ideas and suggestions for working with microformats.  This page collects and document them so that we may be inspired by and iterate on each others' works.
== Design Guidelines ==
== Design Guidelines ==
Line 21: Line 21:
=== Currently ===
=== Currently ===
* <del>The [[Flock]] browser ships with microformats support built-in.</del> - This has not been confirmed. -- Chris Messina.
* <del>The [[Flock]] browser ships with microformats support built-in.</del> - This has not been confirmed. -- Chris Messina.
-
* The [[Operator]] plug-in adds microformats detection and integration to [[Firefox]] version 1.5-2, and [[Netscape Navigator]] versions 9+ <br /> [http://notizblog.org/2007/10/21/operator-unter-navigator-90/ http://notizblog.org/wp-content/uploads/2007/10/micro-netscape.png]
+
* The [[Operator]] plug-in adds microformats detection and integration to [[Firefox]] version 1.5-2, [[Netscape Navigator]] versions 9 and [[Flock]] 1.0 <br /> [http://notizblog.org/2007/10/21/operator-unter-navigator-90/ http://notizblog.org/wp-content/uploads/2007/10/micro-netscape.png]
-
* A [[Safari|Safari microformats plugin]] has been implemented (requires OSX10.5+) based on Jon Hicks's mockup: <br /> [http://microformats.org/wiki/safari http://farm3.static.flickr.com/2309/2036669631_6e99870645.jpg]
+
* A [[Safari|Safari microformats plugin]] has been implemented (requires OSX10.5 ) based on Jon Hicks's mockup: <br /> [http://microformats.org/wiki/safari http://farm3.static.flickr.com/2309/2036669631_6e99870645.jpg]
 +
* An [[Internet Explorer]] add-on provided by Microsoft supports microformats. <br/> [http://www.visitmix.com/lab/oomph http://farm4.static.flickr.com/3237/3064127043_4829632e9c_o_d.gif]
=== Soon ===
=== Soon ===
Line 38: Line 39:
=== Do something useful ===
=== Do something useful ===
Do something useful could be any or all of:
Do something useful could be any or all of:
-
* User interface: Indicate the presence of microformats, and provide the user with an additional user interface for common actions to take with those microformats
+
* '''User interface'''. Indicate the presence of microformats, and 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.
+
* '''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.
+
* '''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.
=== Indicate presence of microformats ===
=== Indicate presence of microformats ===
Line 56: Line 57:
* [http://ben-ward.co.uk/journal/microformats-ui/ Ben Ward: Microformats in Web Browsers] <br /> [http://ben-ward.co.uk/journal/microformats-ui/ http://ben-ward.co.uk/res/posts/uf-web-browser/autodiscovery.png]
* [http://ben-ward.co.uk/journal/microformats-ui/ Ben Ward: Microformats in Web Browsers] <br /> [http://ben-ward.co.uk/journal/microformats-ui/ http://ben-ward.co.uk/res/posts/uf-web-browser/autodiscovery.png]
* [http://glazkov.com/blog/margin-marks/ Margin Marks UI Concept], [http://flickr.com/photos/dglazkov/sets/72157601860335196/ Margin Marks Comps on Flickr] <br /> [http://glazkov.com/blog/margin-marks/ http://farm2.static.flickr.com/1098/1323814472_819bdd6373_m.jpg]
* [http://glazkov.com/blog/margin-marks/ Margin Marks UI Concept], [http://flickr.com/photos/dglazkov/sets/72157601860335196/ Margin Marks Comps on Flickr] <br /> [http://glazkov.com/blog/margin-marks/ http://farm2.static.flickr.com/1098/1323814472_819bdd6373_m.jpg]
 +
 +
=== Authoring Tools ===
 +
 +
Examples and ideas for tools to author microformats within CMS tools.
 +
 +
* [http://www.undergroundwebdesigns.com/tinyMCE-hcard-plugin.html tinyMCE hcard plugin]
 +
* [http://www.undergroundwebdesigns.com/tinyMCE-hcalendar-plugin.html tinyMCE hcalendar plugin]
 +
* [http://matthewlevine.com/projects/hcard-wizard hcard wizard]
 +
* [http://visitmix.com/lab/oomph Windows Live Writer blog authoring plugin]
 +
 +
It would be nice to have a bookmarklet that you can just hit on a selected bit of text in a textarea or WYSIWYG editor to turn into an hcard with just FN, and not have to fill out a form.  Whilst this doesn't give us rich information, it's really easy and doesn't create much extra work burden.
=== Additional user interface ===
=== Additional user interface ===
Line 61: Line 73:
* [[hcard|hCard]] - see [[hcard-user-interface#Additional_user_interface|Additional hCard user interfaces]]
* [[hcard|hCard]] - see [[hcard-user-interface#Additional_user_interface|Additional hCard user interfaces]]
-
*[[adr]] - see [[hcard-user-interface#Additional_user_interface|Additional hCard user interfaces]]
 
* [[hcalendar|hCalendar]]:
* [[hcalendar|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 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.)
** 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.
+
** "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://h2vx.com/ics/ ) 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|comma-separated-variables]] (CSV) to allow editing, sorting and/ or import into spreadsheets/ databases, etc. (or concatenate to existing file).
+
** export as text/ [[csv|comma-separated-values]] (CSV) to allow editing, sorting and/ or import into spreadsheets/ databases, etc. (or concatenate to existing file).
 +
*[[adr]]
 +
** export a vCard, either prompting for a name, or using default place-holder text
 +
** export as text/ CSV as above
 +
** find on map of user's choosing
 +
** find pictures, nearest hotel, nearest restaurant, etc., using site of user's choosing 
 +
** see also [[hcard-user-interface#Additional_user_interface|Additional hCard user interfaces]]
*[[geo|Geo]]
*[[geo|Geo]]
** find on map of user's choosing
** find on map of user's choosing
-
** find pictures, nearest hotel, nearest restaurant, etc, using site of user's choosing   
+
** find pictures, nearest hotel, nearest restaurant, etc., using site of user's choosing   
** export as [[KML]]/ [[GPX]] file; or concatenate to existing file
** export as [[KML]]/ [[GPX]] file; or concatenate to existing file
** export as text/ CSV as above
** export as text/ CSV as above
Line 77: Line 94:
**If the item is a book, generate COinS or other standard citation mark-up
**If the item is a book, generate COinS or other standard citation mark-up
**If the item is a book, film/ DVD, CD, etc., look up on shopping site(s) of user's choosing
**If the item is a book, film/ DVD, CD, etc., look up on shopping site(s) of user's choosing
 +
* [[hatom|hAtom]]
 +
** let the user subscribe to the page as a series of hAtom hentrys
 +
*** challenges to keep in mind:
 +
**** what if user goes to permalink of a blog post and that has just one static hentry - does subscribe make sense? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
 +
**** or if user goes to an archive page which just has a set of static hentry items - again, how does subscribe help? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
 +
**** possible solution: using a combination of [[rel-home]] and [[rel-archive]] (one of several already widely deployed [[existing-rel-values]] in WordPress and other [[blogging-tools]]), it may be possible to identify the home page of a blog from a post permalink or archive page, or vice versa, and thus enable a smarter "subscribe to this blog" functionality.
* [[hresume|hResume]]
* [[hresume|hResume]]
** ???
** ???
Line 108: Line 131:
*[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]
* The [http://wiki.caminobrowser.org/Development:Planning:Microformats Camino Wiki has a page] where future microformats support is being discussed and organized
* The [http://wiki.caminobrowser.org/Development:Planning:Microformats Camino Wiki has a page] where future microformats support is being discussed and organized
 +
*[http://www.techved.com/user-research-evaluation/usability-test Usability testing]
== Simpler Markup Languages ==
== Simpler Markup Languages ==
Line 119: Line 143:
== See Also ==
== See Also ==
* [[browsers]]
* [[browsers]]
 +
* [[mobile]]
* [[hcard-user-interface]]
* [[hcard-user-interface]]
* [[data-portability]]
* [[data-portability]]
* [[social-network-portability]]
* [[social-network-portability]]

Current revision


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

Contents

Design Guidelines

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

Design Challenges

Social Network Portability

See the separate social-network-portability page.

Browser Integration

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

Currently

Soon

Vision

informationBroker.jpgWeb Browser as Information Broker - part of a blogpost by Alex Faaborg on Microformats - The Fundamental Types

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:

Indicate presence of microformats

Browsers can indicate the presence of microformats on a page in several ways.

Discussion and mockups / screenshots of indicating the presence of microformats:

Authoring Tools

Examples and ideas for tools to author microformats within CMS tools.

It would be nice to have a bookmarklet that you can just hit on a selected bit of text in a textarea or WYSIWYG editor to turn into an hcard with just FN, and not have to fill out a form. Whilst this doesn't give us rich information, it's really easy and doesn't create much extra work burden.

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 use cases should be applicable to all instances of the microformat on the page at once (e.g. export all contacts), or for a selection of instances (e.g. export selected contacts), or one just one specific instance (e.g. export contact XYZ).

Discussion and mockups / screenshots of additional user interface for microformats (some screenshots are only available at the destination links, please click through).

Implementations

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

Plugins

Greasemonkey user scripts

Browser buttons

CSS user stylesheets

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.

See Also

User Interface was last modified: Tuesday, March 7th, 2017

Views