15.5. Microlink
Appear, Conjure, Emerge, Hyperlink, Insert, Introduce, In-Page
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).
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.
 | 
