Section 16.1. One-Second Spotlight | Ajax Design Patterns

16.1. One-Second Spotlight

Attention, Effect, EyeCandy, Fade, Fading, Graphics, Refresh, Update, YellowFadeTechnique

Figure 16-1. One-Second Spotlight

16.1.1. Goal Story

Tracy is checking out her portfolio, which shows each stock in its own row. Suddenly, "Neverland Mining Co." stock plummets, and its row lights up to reflect the change. Tracy's attention is drawn instantly to this visual effect, and she immediately begins to offload her stake in the company.

16.1.2. Problem

How can you direct the user's attention to spots on the page?

16.1.3. Forces

To ensure that the user is working with current data, the browser display must be frequently updated.
With Ajax, it's possible to update only the portion of the screen that has changed, and if nothing has changed, the display will remain exactly as is.
The screen can get cluttered with a lot of information, much of which might change at any time.
While human vision is good at spotting changes, it's easy to miss a sudden change, especially if it's a subtle one.

16.1.4. Solution

When a display element undergoes a value changeor any other significant changedynamically increase its brightness for about a second. As a device for communicating system activity, the One-Second Spotlight accomplishes several things:

It highlights changes so the user doesn't have to actively monitor for changes and try to remember whatif anythinghas changed.
Because the spotlight lasts for a few seconds, the user has enough time to redirect attention to that item and study the details of the evente.g., looking at an item's new value. In contrast, a standard transition would afford her no time whatsoeverif the user happened to blink, she could easily miss the change.
When the animation technique follows certain conventions or mimics real-world phenomena, it can provide hints to the user about the nature of the event.

This pattern is a generalization of the technique 37signals introduced as the Yellow Fade Technique (http://www.37signals.com/svn/archives/000558.php). With that, an item lights up for a second after the user has edited it, and the lighting quickly fades away. Unlike a conventional application, in which a page refresh would occur, it's often unclear when an XMLHttpRequest Call has occurred. So a quick visual effect is almost essential for the user to understand what's happening.

From a technical perspective, the Yellow Fade Technique is usually achieved by suddenly switching the element's background-color style from white to yellow, then using Scheduling to run through a continuous spectrum of background colors, starting with yellow and ending with white.

In more general terms, One-Second Spotlight encompasses several types of animation. One or more of the following CSS styles are affected during the spotlight period:

color: Usually, the element's background changes, but font color is also a possibility. Though commonly assigned with Red-Green-Blue hex codes such as #ff00ff, animation algorithms can benefit from the percentage form, e.g., (100%, 0%, 100%). Often, the algorithm cycles through one or more of the Red, Green, and Blue components, e.g., gradually raising Red from 50 percent to 100 percent and lowering it back to 50 percent while holding blue and green constant. You might also prefer to represent the color as a combination of Hue-Saturation-Value (HSV) and cycle through one or more of those components. In this case, calculate the HSV values and convert them to RGB for display.
opacity: This style determines how transparent the element is; an opacity of zero means the item is solid, and an opacity of 50 percent means the browser backgroundor any items underneath the elementwill be partially visible.
visibility: This style determines whether the element can be seen. Visibility does not affect page layout, so the element still occupies the same space on the page.

The possibilities are endless, but there are a few common effects. Firstly, there are straightforward transitions from one style setting to another:

Fade Out: An element suddenly brightens and then fades back to its original appearance. This is useful for general highlighting and may also indicate that the element has been "sucked into" the server, i.e., the data is now safely stored server side. Since many pages use a white background, fading the background out to white is a natural choice for general attention grabbing.
Fade In: An element is suddenly dimmed and then brightens up to its original appearance. This is useful for general highlighting and may also indicate that the element has been "pushed out" of the server.
Fade Away: An element fades further and further out until it disappears altogether. If the element is already somewhat dim, it may be helpful to brighten it at the start of the animation. This effect often indicates that the element (or its value) has been suspended or destroyed.
Materialize: From nothing, an element fades into its regular appearance. If its regular appearance is somewhat dim, it may be helpful to fade it in to a higher level, then fade back out a bit. This can indicate that the element has been created or retrieved.
Switch: An element gradually switches its appearance from one setting to another. Instead of fading or brightening, though, an element might shift from red to blue. This effect is usually used to indicate a state change.

The other category of effects involves rapid oscillation and includes the following:

Total Flash: In rapid succession, an element completely disappears and then reappears. The transition to and from a state of disappearance can be achieved by continuous fading, or by simply toggling the visibility style. This effect is useful as a general attention grabber, although it brings back memories of the dreaded <blink> tag; be sparing in your use of flashing elements.
Shifting Flash: An element's appearance shifts several times from one setting to another. This can also be used as a general attention grabber if the element returns back to its original appearance. If the element permanently shifts from one setting to another, this effect will grab attention more effectively than Switch, which is a more subtle transition.

One typical implementation combines Display Morphing with Scheduling. To fade an item out, for instance, the following algorithm may be used:

Remember the element's current setting.
Set element.style.color to a bright setting.
Every 100 milliseconds:
1. Fade the element a bit. More precisely, drop color by 10 percent (of the bright setting). This applies individually to each color component (R, G, B).
2. Check if 1,000 milliseconds has already passed. If so, set the element back to its original setting (it should already be about that anyway).

The algorithm is based on interpolation. In moving from color A to color B, there are a number of discrete transitions that occur, say, once every 100 milliseconds. At each stage, the algorithm decides where on the spectrum from A to B the color should be. Since a color consists of three componentsR, G, and Bthe calculation occurs separately for each component.

So, let's say you're shifting from #ffffff to #000044. First, it's useful to represent these as decimal percentage settings: (100%, 100%, 100%) moving to (0%, 0%, 25%). And assume we're going to make 10 transitions. The red and green components will shift down 10 percent each step, and the blue component will shift down 7.5 percent each time. So it's just a matter of dropping the value for each color component at each transition, rounding off, and redisplaying the element.

If you want to make a transition to the background of the element, you can shift opacity instead of color. (Be aware that there are portability issues with opacity [http://www.quirksmode.org/css/opacity.html].)

The algorithm assumes a linear interpolation, where each transition drops by the same amount. You could also experiment with other transitions. An exponentially increasing interval, for example, would give an effect of an initially slow transition, leading to a quick burst at the end. A similar phenomenon is quite common with flash effects, where the flashing starts off slowly and speeds up at the end.

You probably won't have to hand code many of these effects because libraries like Scriptaculous (http://script.aculo.us; discussed below) are quite flexible and easy to incorporate.

16.1.5. Decisions

16.1.5.1. What events will trigger a spotlight?

An Ajax App undergoes multiple events; which warrant a spotlight? A spotlight can serve any of the following purposes:

To draw the user's attention to a change
To suggest that the user needs to do something
To inform the user that a browser-server interaction has taken place
To inform the user that another user has done something

Here are some examples:

The user has just changed something. A Fade Out effect suggests that the change has been sent to the server.
On the server, a new item has been created. A Materialize effect suggests that the item has just appeared.
The user has forgotten to enter a form field. The field undergoes a Shifting Flash as its background shifts from white to red.
An item has just changed value. A Fade Out effect suggests that the change was just picked up by the browser.

16.1.5.2. What color will be used?

Yellow, popularized by 37signals, is becoming something of a standard for fading effects. In general, though, the color has to take into consideration which element is affected, as well as surrounding elements and the page appearance in general.

Additionally, multiple colors can be used to good effect. For instance, each color can be used to represent a different type of event. In a multiuser context, JotSpot Live (http://jotlive.com) illustrates how each user can be associated with a different color so that their recent edits appear as distinctly-colored fade effects.

16.1.5.3. How long should the spotlight last? How long will each transition be?

Asking how long the spotlight should last might seem a bit ridiculous for a pattern named "One-Second Spotlight." But the name, of course, only hints at one reasonable value. You'll have to decide on the precise duration of the overall effect and also on how many transitions will take place in that time.

Here are some considerations:

A longer duration will have a greater window of time to be noticed.
A longer duration will appear less dramatic, so it might be interpreted as a less critical event.
A longer duration increases the likelihood of multiple spotlights occurring simultaneously, which might be confusing, especially if they are flash effects.
A longer duration increases the likelihood of a second spotlight effect occurring on the same element while the first effect is in progress. That's not necessarily a problem in itself, but it does lead to an implementation issue; it's worth ensuring that an element is undergoing only one effect at a time to prevent any nasty issues, like flickering.

As far as transitions go, the trade-off is fairly clear: faster transitions look smoother but slow down the application. Is the user likely to leave your application in a background tab and only check it once an hour? If so, avoid slowing down the whole browser with high-granularity effects. Likewise if the application is already process-intensive.

This is an area where different browsers will act differently. For instance, what's the lowest possible transition time you can set? That will depend on the user's system and the browser in question. You can experiment with different parameters on the Time Spotlight Demo (http://ajaxify.com/run/time/periodicRefresh/spotlightCustom/).

16.1.6. Real-World Examples

16.1.6.1. 37signals Backpack

37signals Backpack (http://www.backpackit.com/) maintains items in a list (Figure 16-2). When you click the Edit button, the read-only item morphs into a textarea. On saving, it becomes read-only again and is accompanied by a yellow Fade Out effect. All quite fitting for the company that coined the term, "Yellow Fade Technique."

Figure 16-2. Backpack

16.1.6.2. chat.app

chat.app (http://gamma.nic.fi/~jmp/chat/app.html) shows text messages as you or others enter them. Each new message is highlighted with a yellow Fade Out.

16.1.6.3. Digg Spy

Digg Spy (http://digg.com/spy) shows new stories as they appear on the Web. Each time a block of new stories appears, it appears with a Fade Out effectthe background shifting from grey to white.

16.1.6.4. Coloir

Coloir (http://www.couloir.org) is a slideshow application. Each time you click next, an animated "loading" icon appears and a new photo fades in.

16.1.6.5. Odeo

Odeo (http://odeo.com) is a podcast subscription service. You can force Odeo to grab the latest feed for a podcast; during the delay, the entire document fades. An effect like this can be achieved with a partially transparent Popup element covering the whole document. It feels similar to the way Windows fades the entire screen when you're about to log out.

16.1.6.6. Scriptaculous library

Scriptaculous (http://script.aculo.us) is an excellent JavaScript library supporting many Ajax UI patterns. Its visual effects library is based on four fundamental effects:

Altering opacity
Altering scale
Altering position
"Parallel" effectsi.e., multiple effects at the same time

Combining these leads to any number of animation sequences, and many of the useful sequences are prepackaged.

The visual effects demo (http://script.aculo.us/visual-effects) provides many spotlight effects.

16.1.6.7. Fade Anything Technique (FAT) library

FAT (http://www.axentric.com/posts/default/7) is a library allowing easy scripting of a transition from one color to another.

16.1.7. Code Refactoring: AjaxPatterns Spotlight Time

The Time Periodic Refresh demo (http://www.ajaxpatterns.org/run/time/periodicRefresh/) shows the server time, which is updated every few seconds. It's not clear exactly when the time has changed, however, so this refactoring adds a spotlight effect each time a new result arrives from the server. There are actually a couple of refactorings here: one is hand-built and the other illustrates reuse of the Scriptaculous library.

16.1.7.1. Hand-built shift effect

The Time Spotlight Demo (http://www.ajaxpatterns.org/run/time/periodicRefresh/spotlightCustom) lets the user set a few parameters and applies the corresponding effect (Figure 16-3). A fader object encapsulates the fading logic. The fade duration and transition interval are modifiable attributes:

Figure 16-3. Time Spotlight Demo

   fader.durationTime = parseInt($("fadeDuration").value);   fader.transitionInterval = parseInt($("transitionInterval").value);

The application asks fader to fade the div as soon as it's been modified:

   function showCustomTime(text) {     var customTimeLabel = $("customTimeLabel");     customTimeLabel.innerHTML = text + "." + callingContext;     fader.fade(customTimeLabel, $("startColor").value, $("endColor").value);   }

fader then kicks off the first transition, passing in a timeSoFar parameter of zero. The function is simpler using an array of percentage color values, but hex is more common, so a simple conversion takes place:

   fade: function(element, startRGB, endRGB) {     this.nextTransition(       element, this.rgbToPercents(startRGB), this.rgbToPercents(endRGB),0);   }

Each transition involves deciding how far along the fade it is and calculating the corresponding color style using a linear interpolation (as explained in the Solution for this pattern):

 nextTransition: function(element, startColor, endColor, timeSoFar) {   ...   var currentColor = "rgb(";   for (component=0; component<3; component++) {     var currentComponent = Math.round(startColor[component] +         proportionSoFar * (endColor[component] - startColor[component]));     currentColor+=currentComponent + "%" + (component<2 ? "," : ")");   }   element.style.backgroundColor = currentColor;   ... }

Then it increments timeSoFar and finishes the fade if fade time has expired:

   timeSoFar+=this.transitionInterval;   if (timeSoFar>=this.durationTime) {     this.durationTime+ "\n";     element.style.backgroundColor =       "rgb("+endColor[0]+"%,"+endColor[1]+"%,"+endColor[2]+"%)";     return;   }   var nextCall = function( ) {     fader.nextTransition(element, startColor, endColor, timeSoFar);   }   setTimeout(nextCall, this.transitionInterval);

fader is coded for simplicity, and it is possible to make a couple of improvements. First, the repeated color calculation would be more effective if it worked on the pretransition delta instead of calculating the absolute color each time. Also, the timing could be adjusted to take into account the time taken to run the function itself.

16.1.7.2. Fading with Scriptaculous

The Time Scriptaculous Demo (http://www.ajaxpatterns.org/run/time/periodicRefresh/spotlightScriptaculous) shows how easy it is to reuse an existing effects library. Here, the time displays show a Materialize effect when a new result appears. They transition from completely invisible (showing only the document background color) to the appearance determined by their class's style.

The refactoring is trivial. Include the Scriptaculous effects library, effects.js, and prototype.js, a general-purpose JavaScript utility used by Scriptaculous:

   <script type="text/javascript" src="/books/2/755/1/html/2/prototype.js"></script>   <script type="text/javascript" src="/books/2/755/1/html/2/effects.js"></script>

Then, as with the hand-built fader presented earlier, invoking the effect is a one-liner:

   new Effect.Appear("defaultTimeLabel");

16.1.8. Alternatives

16.1.8.1. One-Second Mutation and One-Second Motion

One-Second Mutation and One-Second Motion (see both later in this chapter) are also used to draw attention to a significant event. One-Second Spotlight can be used as both a general attention-getting device as well as to hint at a specific type of event, whereas those two patterns tend to be slightly more about depicting specific events. The effects can also be combined, e.g., shrinking an object as it fades away.

16.1.9. Related Patterns

16.1.9.1. Periodic Refresh

A change arising from a Periodic Refresh (Chapter 10) is often marked with aOne-Second Spotlight.

16.1.9.2. Timeout

A Timeout (Chapter 17) event, and any prior warnings, can be marked with a One-Second Spotlight. In community sites that show details about other users, the effect can also be used to mark changes to users' online status.

16.1.10. Metaphor

The pattern's name is the key here: a spotlight can be used to direct audience attention.

16.1.11. Acknowledgments

37signals introduced the Yellow Fade Technique into its products, and its Yellow Fade Technique article (http://www.37signals.com/svn/archives/000558.php) helped spread the meme.