AjaxPatterns
Appear, Conjure, Emerge, Hyperlink, Insert, Introduce, In-Page
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 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.
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 that have occurred.
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 usually a tightly-scoped block of "Microcontent", though it need not be - a Microlink could be used to open a whole page of content, for example.
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 “Popup” 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.
Microlinks can let the user switch content around on the page, useful if the Microlinks are included in a “Drilldown”. around.
The name Microlink refers to the subtle effect it has on interaction flow, and carries several benefits over the full-blown page refresh caused by a standard hyperlink:
There is much less to transfer because only the new content 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.
To the user, a page reload is distracting.
The user is able to watch as an element appears on the page. Visual effects can be used to further improve change detection.
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.
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 on the page, so the Microlink causes the script to make it visible, or to scroll towards it (using document.scrollto).
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.
User must explicitly close all content.
Microlink presentation is tricky, because you want to leverage existing knowledge about hyperlinks, but without causing confusion. Many interfaces will combine Microlinks and hyperlinks (e.g. links to company homepages or external websites), and you don't want a situation where the user can't distinguish between them. Also keep in mind 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 property.
Consider leveraging the conventions of hyperlinks, namely blue text (color style) and underlining (textDecoration style), though beware this may cause confusion as well.
Make the clickable region apparent visually, using cues like borders and different background colours.
Tiddlywiki is a wiki based around “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 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, it is inserted just below the block containing the Microlink. If it does exist, the window is scrolled to show the content. See the examples in “Malleable Content” and “One-Second Mutation” for more details.
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, Micrlink-style. The website demonstrates how it's done (Figure 1.74, “Tabtastic”).
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 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 if only the main content changed. GMail, however, is an Ajax App, and only has to morph the main content area as each Microlink is clicked.
In TiddlyWiki, Microlinks are created as anchor elements, with a custom css class, "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 “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”. 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));
}
}
“Malleable Content” 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 which switch all of the main page content.
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.
The categories in a “Drilldown” are a kind of Microlink, as they cause the “Drilldown” content to change without a page reload.
A “Live Form” can include Microlinks to more advanced controls, and also to content which supports the user's decision-making.