From Ajax Patterns

Evidence: 3/3

Tags: Auto-Update Sync Synchronise Sychronize Real-Time

Contents 1 In A Blink 2 Goal Story 3 Problem 4 Forces 5 Solution 6 Decisions 6.1 How will the highlight appear? 7 Real-World Examples 7.1 GMail 7.2 A9 7.3 Whitespace 8 Code Examples 8.1 Wiki Demo 9 Alternatives 10 Related Patterns 10.1 Status Area 10.2 One-Second Spotlight 11 Visual Metaphor 12 Want to Know More?

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

In A Blink

TODO diag Highlighted text (bgcolour, sketch-circled)

Goal Story

Blake notices a few spam comments have appeared on an old blog posting. He 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 is a "Delete Spam" button below the comments, which he clicks to send them where they belong.

Problem

How can you make elements stand out?

Forces

• An Ajax application 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.

Solution

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.

Decisions

How will the highlight appear?

You want the highlight to be noticeable but not distracting. Take the following into account:

• Tone down the highlight if its 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.

Real-World Examples

GMail

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

A9 provides search results in different "columns", a form of Microcontent. 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.

Whitespace

Whitespace 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.

Code Examples

Wiki Demo

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.
• 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 Microcontent. Here, I'll explain the bufferring 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 buffering.

 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";
 }

Alternatives

Related Patterns

Status Area

The Status Area is a convenient place to explain why an element's highlighted.

One-Second Spotlight

One-Second Spotlight is often convenient for transitioning in and out of longer-duration highlight periods.

Visual Metaphor

A fluorescent marker highlights some text.

Want to Know More?