AjaxPatterns
Auto-Update, Sync, Synchronise, Sychronize, Real-Time
Sasha notices a few spam comments have appeared on an old blog posting. She clicks on the comments and each of them is successively Highlighted, with the background colour switched from white to yellow. Being logged in already, there's a "Delete Spam" button below the comments, which she clicks to send them where they belong.
An Ajax App can have a lot of information shown at once, 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.
Highlight elements by rendering them in a consistent, attention-grabbing, format. The pattern has been applied to dynamic websites 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 appear the same. One straightforward way to achieve this is with a selected CSS class and another deselected class. By dynamically switching the element's className property, you can easily Highlight and de-Highlight.
There are various times when Highlighting is useful:
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 an element is particularly important.
To indicate an element is undergoing change.
To prompt the user to perform some work on the element.
You want the Highlight to be noticeable but not distracting. Take the following into account:
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 each element is relatively large.
Consider that users often need to read and edit Highlighted elements, so ensure the display is usable whether or not the element's Highlighted.
Avoid Highlighting techniques which displace other elements of 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.
GMail presents a list of mail messages, one row at a time. You select messages by clicking on the checkbox, and the entire row changes to a light tan background colour. The appearance of various tan-coloured rows makes it easy to spot all selected items, and the checkboxes also provide a cue.
A9 provides search results in different "Columns". Visit the Prefs 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 as a means of confirming your choice. The interface uses Highlighting effectively, but could be made more helpful if all added elements were kept Highlighted, instead of just the most recent one.
Teacher! shows a table of student grades, and highlights whichever row you're the mouse is hovering above. 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.
Whitespace prominently Highlights links on the side menu, as you roll the mouse over them. This is a common technique used on many websites, and can be achieved entirely with CSS styling of the anchor tag, absent of any Javascript.
The Wiki demo uses Highlighting in a couple of ways:
As the user rolls the mouse over, and then clicks on a message, the message is Highlighted so as to indicate its current status (Figure 1.85, “A9 Columns”).
When the message has changed, and is being buffered for submission, the background colour changes. Once its been submitted, the colour returns to normal.
The first example is detailed in “Malleable Content”. Here, I'll explain the buffering Highlight. When you click outside the message area, the application checks if you changed any text from the version originally downloaded, and if so, it's 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, read-only colour:
for (messageId in pendingMessages) {
...
$(messageId).style.backgroundColor = "#cccccc";
}
The “Status Area” is a convenient place to explain why an element's Highlighted.
“One-Second Spotlight” is often convenient for transitioning in and out of longer-duration Highlight periods.