Section 15.5. Microlink


15.5. Microlink

Appear, Conjure, Emerge, Hyperlink, Insert, Introduce, In-Page

Figure 15-13. Microlink


15.5.1. Goal Story

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

15.5.2. Problem

How can the user quickly navigate through content?

15.5.3. Forces

  • Ajax Apps 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 have occurred.

15.5.4. 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 content from the server with an XMLHttpRequest Call and inserting it onto the page. The content is usually a tightly scoped block of Microcontent, though it need not bea Microlink could be used to open a whole page of content, for example.

The term Microlink should not be taken here 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:

  • They can open a Popup (earlier in this chapter) to augment a particular word or phrase. Some conventional web sites provide glossary lookups in a pop-up window. A Microlink could instead be used to place a small explanation directly next to the term.

  • They 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, in turn expanding to a list of games, and so on.

  • They can let the user switch content around on the page, which is useful if the Microlinks are included in a Drilldown (Chapter 14).

The name "Microlink" refers to the subtle effect it has on interaction flow. Microlink carries several benefits over the full-blown page refresh caused by a standard hyperlink:


Content appears faster

There is much less to transfer because only the new content is loaded rather than the whole page. Also, the browser needs only to make a few changes to the DOM as opposed to rerendering the whole page.


Application flow is smoother

To the user, a page reload is distracting. Microlink avoids this distraction.


Changes are more salient

The user is able to watch as an element appears on the page. Visual effects can be used to further improve change detection.


Internal state is maintained

The browser-side application's stateas held in the DOMis retained, whereas a page reload destroys it. This is a technical benefit.

Microlink usually involves an XMLHttpRequest Call (Chapter 6) followed by a Page Rearrangement (Chapter 5). Often, a new div is created and appended to a container element. As a variant, sometimes the Microlink refers to something already on the page, so the Microlink causes the script to make it visible or to scroll toward it (using document.scrollto).

15.5.5. Decisions

15.5.5.1. What will happen to other content?

A Microlink inserts new content into 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 should happen. Typical strategies include those described in the list that follows.

  • 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.

  • The user must explicitly close all content.

15.5.5.2. How will Microlink be presented visually?

Microlink presentation is tricky because you want to leverage existing knowledge about hyperlinks, but do it without causing confusion. Many interfaces will combine Microlinks and hyperlinks (e.g., links to company homepages or external web sites), and you don't want a situation where the user can't distinguish between them. Also keep in mind that Microlinks don't have to be words or phrasesthey can, for example, be buttons or imagemaps.

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

  • Change the cursor icon as the user hovers over the element; control this with the cursor style property.

  • Leveraging the conventions of hyperlinks, namely blue text (color style) and underlining (texTDecoration style), but be beware that this may cause confusion as well.

  • Make the clickable region apparent visually using cues like borders and different background colors.

15.5.6. Real-World Examples

15.5.6.1. TiddlyWiki

TiddlyWiki (http://tiddlywiki.com/) is a wiki based on Malleable Content blocks. At any point in time, you're looking at a list of Malleable Content blocks. Each block contains text including hyperlinks to other Malleable Content as well as to external sites. The external links are distinguished using a bold font. When you click on a Microlink and the corresponding context doesn't yet exist, the context is inserted just below the block containing the Microlink. If it does exist, the window scrolls to show the content. For more on this, see the section "Real-World Examples" in Malleable Content earlier in this chapter, and the section One-Second Mutation (Chapter 16).

15.5.6.2. Tabtastic library

A great application for Microlinks is the tabbed content metaphor, in which different blocks of content are shown as tabs. The technique was popularized by Amazon in the late 1990s, and Ajax allows for the content in another tab to be downloaded without a page refresh. Tabtastic (http://phrogz.net/JS/Tabtastic/index.html) is a JavaScript toolkit you can use to incorporate tabs into your applicationMicrolink style. The web site demonstrates how it's done (Figure 15-14).

Figure 15-14. Tabtastic


15.5.6.3. Rpad

Rpad (http://www.rpad.org/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 (http://www.rpad.org/Rpad/Example1.Rpad) and you'll see several tables and graphs appear, freshly generated from the server.

15.5.6.4. Gmail

Gmail (http://gmail.com/) 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 web sitesfixed-size blocks on the top and left containing links and search and the main content on the bottom right. However, most conventional web sites achieve this fixed structure by continuously reloading the entire structure, even if only the main content has changed. Gmail, however, is an Ajax App and only has to morph the main content area as each Microlink is clicked.

15.5.7. Code Example: TiddlyWiki

In TiddlyWiki, Microlinks are created as anchor elements with a custom CSS class, button. There's a general-purpose function used to create buttons, and the link creator delegates to it. It passes in display information as well as 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, 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 Malleable Content can then be inserted. An algorithm determines where it will be placed and the createTiddler( ) function creates a new div to host the content. If animation is turned on, the new content block will appear to "leap out" from the hyperlink into its own region of the page, as detailed in One-Second Motion (Chapter 16). Otherwise, the window performs a straightforward scroll to 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));     }   } 

15.5.8. Related Patterns

15.5.8.1. Malleable Content

Malleable Content (see earlier) is a companion pattern, because Microlinks are often used to conjure up Malleable Content blocks. however, a Microlink can also produce a more complex structure, too, such as the Gmail links that switch all of the main page content.

15.5.8.2. "One-Second" visual effects

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

15.5.8.3. Drilldown

The categories in a Drilldown (Chapter 14) are a kind of Microlink, as they cause the Drilldown content to change without a page reload.

15.5.8.4. Popup

A Microlink may be used to launch a Popup (see earlier).

15.5.8.5. Live Form

A Live Form (Chapter 14) can include Microlinks to more advanced controls and to content that supports the user's decision making.




Ajax Design Patterns
Ajax Design Patterns
ISBN: 0596101805
EAN: 2147483647
Year: 2007
Pages: 169

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net