Microlink - Ajax Patterns

Microlink

From Ajax Patterns

(Difference between revisions)
Revision as of 19:06, 7 August 2005
Mahemoff (Talk | contribs)

← Previous diff
Revision as of 19:13, 7 August 2005
Mahemoff (Talk | contribs)
Feedmarker
Next diff →
Line 80: Line 80:
= Real-World Examples = = Real-World Examples =
-== Feedmarker ==+== Tabtastic ==
-http://www.feedmarker.com/+A great application for Microlinks is the tabbed content metaphor, where different blocks of content are shown as tabs. The technique was popularised by Amazon in the late 1990s, and Ajax allows for the content in another tab to be downloaded without a page refresh. [http://phrogz.net/JS/Tabtastic/index.html Tabtastic] is a Javascript toolkit to incorporate tabs into your application, and its website demonstrates how it's done.
== TiddlyWiki == == TiddlyWiki ==

Revision as of 19:13, 7 August 2005

Evidence:' 2/2

Tags: Hyperlink In-Page


Contents

In A Blink

Hyperlink with content opening up below it.


Goal Story

Frustrated with a developer's productivity, Pam logs into the version control system and sees a "Committers" table. Each row includes a developer's name and photo, and Pam immediately clicks on one of those names. The row expands out to reveal a mini-summary of the developer's project activity, and a bunch of links to further content.


Problem

How can the user quickly navigate through content?


Forces

  • Ajaxian applications often respond to user requests by providing new content.
  • To encourage interaction with the system, content should be shown quickly and without distraction.
  • Page reloads slow down interaction, break concentration, and obscure the nature of whatever changes that have occurred.


Solution

Provide Microlinks that open up new content on the existing page rather than loading a new page. Microlink is an Ajaxian upgrade of the traditional hyperlink. Most often, it entails fetching some content from the server with an XMLHttpRequest Call and inserting it on the page. The content is often a form of Microcontent, though it need not be - a microlink could be used to open a whole collection of Microcontent blocks, for example.

Content may be HTML arriving from an HTML-Generating Service or semantic data from a Semantic Service. In some cases, it may not arrive from the server at all. It might arise from the browser cache, or be dynamically generated from the browser script.

The term Microlink here should not be taken as a literal translation of textual hyperlinks. It's used to represent any form of content being inserted into the page. The trigger might be something as subtle as a form field focus event.

Microlinks can be used in many contexts:

  • Microlinks can open a little block of content to augment a particular word or phrase. Some conventional websites provide glossary lookups in a popup window. A microlink could instead be used to place a small explanation directly next to the term.
  • Microlinks can be used to drill down, by expanding out successively deeper levels of content. You could show all teams in a football league, each expanding to a list of players, each expanding to a list of games, and so on.
  • A small block within a page can present a large amount of content, relying on Microlinks to switch content around.
  • An informational site can use microlinks to completely remove the need for page reloads. A main content area is continuously replaced each time the user clicks on a Microlink.

The name Microlink refers to the relatively low impact it has on the interaction flow and is also a reference to its companion pattern, Microcontent. Compared to a new page reload caused by traditional hyperlinks, Microlinks offer several benefits:

  • Content appears faster. There is much less to transfer because only the Microcontent data is loaded, rather than the whole page having to be reloaded. Also, the browser need only make a few changes to the DOM, as opposed to re-rendering the whole page.
  • Application flow is smoother. To the user, a page reload is distracting.
  • Changes are more salient. The user is able to watch as an element appears on the page. Animation effects can be used to further improve change detection.
  • Internal state is maintained. A technical benefit is that the browser-side application's state - as held in the DOM - is retained, whereas a page reload destroys it all.

In turn, the increased user experience leads to a richer, faster, human-computer dialogue.Users are less reluctant to click on a link, because they need not fear loss of form data and long waiting times. And with the application responding faster, there is a much more effective loop.

Microlink usually involves an XMLHttpRequest Call followed by a Page Rearrangement. Often, a new div is created and appended to a container element. As a variant, sometimes the Microlink refers to something already in the browser, so the Microlink causes the browser to scroll somewhere. Scrolling can be controlled with window.scrollto.


Decisions

What will happen to other content?

A Microlink inserts new content to the existing page, and you obviously can't keep piling on content forever. Furthermore, you need to remove the clutter so that new content is more salient. At some point, you'll have to clean up existing content, and you'll need to decide how that happens. Typical strategies include:

  • The new content simply replaces the old content. The old content is overwritten, or the new content is added and the old content replaced.
  • A fixed-capacity content queue is set up, such that newer content displaces older content, which eventually disappears.


How will microlink be presented visually?

Microlink presentation is tricky, because you want to leverage existing knowledge about hyperlinks without causing the confusion. Many interfaces will combine microlinks and hyperlinks (e.g. links to company homepages or external websites), and don't want a situation where the user can't distinguish between them. Keep in mind also that microlinks need not be word or phrases - they can, for example, be buttons or imagemaps.

You need to ensure users know microlinks are clickable, and have some ability to predict what they'll see when that happens. To provide affordances an element is clickable, consider the following:

  • Change the cursor icon as the user hovers over the element - control this with its cursor style.
  • Consider Leveraging the conventions of hyperlinks, namely blue text (color style) and underlining (textDecoration style).
  • Make the clickable region apparent visually, using cues like borders and differnt background colours.


Real-World Examples

Tabtastic

A great application for Microlinks is the tabbed content metaphor, where different blocks of content are shown as tabs. The technique was popularised by Amazon in the late 1990s, and Ajax allows for the content in another tab to be downloaded without a page refresh. Tabtastic is a Javascript toolkit to incorporate tabs into your application, and its website demonstrates how it's done.

TiddlyWiki

Tiddlywiki is a wiki based around Microcontent. At any point in time, you are looking at a list of Microcontent blocks. Each block contains text including hyperlinks to other Microcontent as well as external sites. The external links are distinguished using a bold font. When you click on a Microlink, and the corresponding context does not yet exist, it is inserted just below the block containing the Microlink. If it does exist, the windows is scrolled to show the content. See the examples in Microcontent and One-Second Mutation for more details.

Rpad

Rpad provides an assortment of numerical analysis applications. Here, the linked content is not stored, but dynamically generated. Click on "Calculate" within the General Demo and you'll see several tables and graphs appear, freshly generated from the server.

GMail

GMail uses Microlinks to repeatedly switch main content around. There are Microlinks for all of your mailboxes, your contacts, for composing a new email, and so on.

The appearance is structured like most websites - fixed-size blocks on the top and left with links and search, and the main content on the bottom-right. However, most conventional websites achieve this fixed structure by continuously reloading the entire structure, even though only the main content has change. GMail, however, is an Ajaxian application, and only has to morph the main content area as each Microlink is clicked.


Code Examples

In TiddlyWiki, Microlinks are created as anchor</t> elements, with a custom css class, <tt>"button". There's a general-purpose function to create buttons, and the link creator delegates to it. It passes in display information and also a function, onClickTiddlerLink to handle what happens when the user clicks.

 var btn = createTiddlyButton(place,text,subTitle,onClickTiddlerLink,theClass);

Buttons are anchor elements rendered with a special CSS class, which provides a different appearance while being hovered over or activated.

 .tiddler .button {
   padding: 0.2em 0.4em 0.2em 0.4em;
   color: #993300;
 }

 .tiddler .button:hover {
   text-decoration: none;
     color: #ccff66;
     background-color: #993300;
 }

 .tiddler .button:active {
   color: #ffffff;
   background-color: #cc9900;
 }

When the link is clicked on, the handler function inspects the event to determine the desired content.

 function onClickTiddlerLink(e)
 {
   if (!e) var e = window.event;
   var theTarget = resolveTarget(e);
   var theLink = theTarget;
   ...
 }

The new Microcontent can then be inserted. An algorithm determines where it will be place and the createTiddler() function creates a new div to host the content. If animation is turned on, the new microcontent will appear to "leap out" from the hyperlink into its own region of the page, as detailed in One-Second Motion. Otherwise, the window performs a straightforward scroll to the show the new content.

 function displayTiddler(src,title,state,highlightText,highlightCaseSensitive,animate,slowly) {
   var place = document.getElementById("tiddlerDisplay");
   var after = findContainingTiddler(src); // Which tiddler this one will be positioned after
   ...
   var theTiddler = createTiddler(place,before,title,state,highlightText,highlightCaseSensitive);
   if(src) 
   {
   if(config.options.chkAnimate && (animate == undefined || animate == true))
     anim.startAnimating(new Zoomer(title,src,theTiddler,slowly),new Scroller(theTiddler,slowly));
   else
     window.scrollTo(0,ensureVisible(theTiddler));
   }
 }


Alternatives


Related Patterns

Microcontent

Microcontent is the companion pattern, because Microlinks are often used to conjure up Microcontent. However, a Microlinks can also produce a more complex structure too, such as the GMail links which switch all of the main page content.

"One-Second" Visual Effects

The visual effects (One-Second Spotlight, One-Second Mutation, One-Second Motion) help the user comprehend what's going on when a Microlink is clicked, as Tiddlywiki demonstrates.

Drilldown

The categories in a Drilldown are a kind of Mirolink, as they cause the Drilldown content to change without a page reload.

Live Form

A Live Form can include Microlinks to more advanced controls, and also to content which supports the user's decision-making.


Visual Metaphor

Clicking on a Microlink is like slapping a sticky note onto a document, instead of creating a whole new document with just the one change.


Want to Know More?