15.5. MicrolinkAppear, Conjure, Emerge, Hyperlink, Insert, Introduce, In-Page Figure 15-13. Microlink15.5.1. Goal StoryFrustrated 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. ProblemHow can the user quickly navigate through content? 15.5.3. Forces
15.5.4. SolutionProvide 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:
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:
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. Decisions15.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.
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:
15.5.6. Real-World Examples15.5.6.1. TiddlyWikiTiddlyWiki (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 libraryA 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. Tabtastic15.5.6.3. RpadRpad (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. GmailGmail (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: TiddlyWikiIn 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 Patterns15.5.8.1. Malleable ContentMalleable 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 effectsThe 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. DrilldownThe 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. PopupA Microlink may be used to launch a Popup (see earlier). 15.5.8.5. Live FormA Live Form (Chapter 14) can include Microlinks to more advanced controls and to content that supports the user's decision making. |