Section 16.4. Highlight | Ajax Design Patterns

16.4. Highlight

Auto-Update, Sync, Sychronize, Real-Time

Figure 16-8. Metaphor

16.4.1. Goal Story

Sasha notices that a few spam comments have appeared on an old blog posting. When she clicks on the comments, they are successively Highlightedthe background color switches from white to yellow. Because she's already logged in, there's a Delete Spam button below the comments, which she clicks to send them where they belong.

16.4.2. Problem

How can you make elements stand out?

16.4.3. Forces

An Ajax App can enable a lot of information to be shown at onceoften information with many with different states.
There is usually one element which the user is working on or about to activate.
In addition, the user often needs to group several elements together to perform a common function. These elements must stand out from the crowd.

16.4.4. Solution

Highlight elements by rendering them in a consistent, attention-grabbing format. This pattern has been applied to dynamic web sites prior to Ajax but is particularly important in the context of rich displays and interaction.

Consistency is important here; when items are selected, they should look the same. One straightforward way to achieve this is with selected and deselected CSS classes. By dynamically switching the element's className property, you can easily Highlight and de-Highlight.

Highlighting is useful in the following ways:

To show which particular element has input focus.
To show which elements are selected.
When the user rolls over an element, to indicate its boundaries and hint that some action will occur by clicking on it.
To indicate that an element is particularly important.
To indicate that an element is undergoing change.
To prompt the user to perform some kind of work on the element.

16.4.5. Decisions

16.4.5.1. How will the Highlight look?

You want the Highlight to be noticeable but not distracting. Here are some guidelines for deciding how the Highlight should look:

Tone down the Highlight if it's likely to occupy a large proportion of the page. This would happen if there are quite a few Highlighted elements or if each element is relatively large.
Users often need to read and edit Highlighted elements, so ensure that the display is usable whether or not the element is Highlighted.
Avoid Highlighting techniques that displace other elements on the page. For instance, increasing font size might increase the element's size, in turn pushing away other elements. The Highlight should ideally appear as an on-off toggle, only affecting the element in question.

16.4.5.2. How will the Highlight appear and disappear?

The most obvious thing to do is make Highlight state binaryan element is either Highlighted or it's not. But consider using visual effects to make the transition smoother and support visual pattern recognition (see the following "Teacher!" example).

16.4.6. Real-World Examples

16.4.6.1. Gmail

Gmail presents a list of mail messages one row at a time. You select messages by clicking on the checkbox, which causes the entire row to change to a light tan background color. The appearance of various tan-colored rows makes it easy to spot selected items, and the checkboxes also provide a clue.

16.4.6.2. A9

A9 provides search results in different "Columns." Visit the Preferences page, then request to add more Columns. If you have an account, you're allowed to choose multiple Columns at once. Each Column is shown as a horizontal block in the Preferences page, and when you click the Add button, the block Highlights to confirm your choice. The interface uses Highlighting effectively, but it would be even more helpful if all added elements remained Highlighted instead of just the most recent one.

16.4.6.3. Teacher!

Teacher! (http://teacherly.com/) shows a table of student grades and Highlights whichever row your mouse is hovering over. What's novel here is that when you move to another row, the Highlight doesn't just disappear, but slowly fades away (One-Second Spotlight). An AjaxPatterns demo replicates the effect (http://ajaxify.com/run/time/periodicRefresh/spotlightCustom/highlight/).

16.4.6.4. Whitespace

Whitespace (http9rules.com/whitespace/) prominently Highlights links on the side menu as you roll the mouse over them. This is a common technique used on many web sites and can be achieved entirely by using CSS styling to modify the anchor tag, absent of any JavaScript.

16.4.7. Code Example: AjaxPatterns Wiki

The Wiki demo (http://ajaxify.com/run/wiki) uses Highlighting in a couple of ways:

As the user rolls the mouse over a message and then clicks on it, the message is Highlighted to indicate its current status (Figure 16-9).
When the message has changed and is being buffered for submission, the background color changes. Once it has been submitted, the color returns to normal.

Figure 16-9. A9 columns

The first example is detailed in Malleable Content (Chapter 15), in which I explain the buffering Highlight. When you click outside the message area, the application checks whether you changed any text from the version originally downloaded, and if so, that text is Highlighted and prepared for uploading:

 function onMessageBlur(event) {   ...   var initialMessageContent = message.serverMessage.content;   if (message.value != initialMessageContent) {     pendingMessages[message.id] = true;     message.style.backgroundColor = "#ffcc33";   }   startPeriodicSync( ); }

The sync is started again, so the item will soon be uploaded. If any further edits begin in the next few seconds, the upload will be placed on hold and the second message alteration will also be Highlighted. At any point in time, then, all of the buffered messages are Highlighted. When the messages are eventually uploaded, they revert to their normal, readonly color:

   for (messageId in pendingMessages) {     ...     $(messageId).style.backgroundColor = "#cccccc";   }

16.4.8. Related Patterns

16.4.8.1. Status Area

The Status Area (Chapter 15) is a convenient place to explain why an element is Highlighted.

16.4.8.2. One-Second Spotlight

One-Second Spotlight (see earlier) is often convenient for transitioning into and out of longer-duration Highlight periods.

16.4.9. Metaphor

A fluorescent marker is used to highlight text.