One-Second Spotlight - Ajax Patterns

One-Second Spotlight

From Ajax Patterns

Revision as of 18:42, 13 September 2005; view current revision
←Older revision | Newer revision→

Evidence: 1/2

Tags: Attention FEffect EyeCandy Fading Graphics Refresh Update


Contents

In A Blink

"A recent change lights up, then fades away". (Live wiki)

Why is this in quotes? I'm also not sure what (Live wiki) means. On a more general note, we need to sync up on what the "format" is for the "In a Blink" sections, as I think they can be incredibly useful, and moreso if they are consistent.


Goal Story

Tracy is monitoring a watch-list, showing each interesting commodity in its own table row. Suddenly, the "Neverland Mining Co." I thought this first part read a bit stiff. More casual and conversational, like, "Tracy's checking out her stocks, and has each individual stock in its own row full of relevant data."

stock price drops, and the row lights up to reflect the change. Tracy's attention is drawn immediately by this visual effect, and she immediately begins to execute a deal.


Problem

There's a lot of activity in an Ajax application - how can you help the user digest it all?

This seems a much more general problem than the one you're solving; in fact, couldn't it almost apply to all of the patterns in this Visual Effects section? I might go with something a little more specific: "You've got an application with lots of data, but need to call quick attention to a specific portion of that data." That's just a "for example", but I think it's a lot more focused, and that this pattern answers it very specifically.


Forces

  • To ensure 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 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 be changing at any time.
  • While human vision is good at spotting changes, it's easy to miss a sudden change, especially if the change is a subtle one.


Solution

When a page element undergoes a value change or some other significant event, dynamically manipulate its brightness for a second or so. As a device for communicating system activity, The One-Second Spotlight accomplishes several things:

  • That an event has occurred is made explicit, as opposed to the user having to actively monitor for changes, and try to remember what, if anything, has changed.
  • Because the spotlight lasts for a few seconds, the user has enough time to redirect attention to the item and study the details of the event, such as look at an item's new value. In contrast, a standard transition would afford no time whatsoever - if the user happened to blink, they 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.

The pattern is a generalisation of the technique 37Signals introduced as The Yellow Fade Technique. After the user has edited an item, it lights up for a second, and the lighting quickly fades away. The effect is achieved by switching the background colour from white to yellow, then running through a quick sequence of background colours back to white again.

In more general terms, this pattern encompasses several types of animation.

One or more of the following CSS styles are affected during the spotlight period:

  • color - the Red-Green-Blue (RGB) combination that determines an element's hue, brightness, and saturation. Usually, it is the background that changes, but font color is also a possibility.
  • opacity - how transparent the element is - an opacity of zero means the item is solid, an opacity of 50% means the browser background, or any items underneath the element, will be partially visible.
  • visibility - whether the element can be seen. Not that visibility does not affect page layout, so the element still occupies the same space on the page. That's what you want for a transient effect.

The possibilities are endless, but there are a couple of categories. First, there are straightforward transitions from one style setting to another:

  • Fade Out - Element suddenly brightens, then fades back to its original appearance. Useful as for general highlighting, and may also indicate its 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 - Element is suddenly dimmed, then brightens up to its original appearance. Useful for general highlighting, and may also indicate its been "pushed out" of the server.
  • Fade Away - Element becomes 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. Indicates the element has been suspended or destroyed.
  • Materialise - From nothing, element fades in to 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. Indicates the element has been created or retrieved.
  • Switch - Element gradually switches appearance from one setting to another. This is a generalisation of all of the above. Instead of fading, though, it can also represent, say, a shift from red to blue. Indicates a state change.

The second category involves rapid oscillation:

  • Total Flash - In rapid succession, element completely disappears, then appears again. The transition to and from a state of disappearance can be achieved by continuous fading, or by simply toggling the visibility style. Useful as a general attention grabber, although brings back memories of the dreaded <blink> tag and may be gratuitously animated.
  • Shifting Flash - Element's appearance shifts several times from one setting to another. Can 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.

The standard implementation combines Display Morphing with Event 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:
    • Fade the element a bit. More precisely, set color so that it's a 10% step closer to the original setting.
    • If 1000 milliseconds has already passed:
      • Set the element back to its original setting (it should already be approximately there 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, along the spectrum from A to B, the colour should be. Since a colour consist of three components - R, G, B, the calculation occurs separately for each component.

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

If you're happy to make a transition to the background of the element, you can instead shift opacity instead of colour. (Be aware there are portability issues with opacity.)

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

Note that you probably won't have to hand-code effects, because libraries like scriptaculous (discussed below) are quite flexible and usually easy to incorporate into typical scripts.


Decisions

What events will trigger a spotlight?

An Ajaxian application undergoes multiple events - which of those warrant a spotlight? A spotlight can serve any of the following purposes:

  • Draws the user's attention to a change.
  • Suggests the user needs to do something.
  • Informs the user a browser-server interaction has taken place.
  • Informs the user another user has done something.

Examples:

  • The user has just changed something. A Fade Out effect suggests the change has been sent to the server.
  • On the server, a new item has been created. A Materialise effect suggests 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 the change was just picked up by the browser.

What colour will be used?

Popularised by 37Signals, yellow is becoming something of a standard for fading effects. The colour has to take into consideration which element is affected, as well as surrounding elements and the page appearance in general.

Multiple colours can be used to good effect. For instance, each colour can be used to represent a different type of event. In a multi-user context, the JotSpot Live Editing Demo illustrates how each user can be associated with a different colour, so their recent edits appear as distinctly-coloured fade effects.

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

Asking how long the spotlight lasts 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 you'll also have to decide how many transitions will take place in that time.

Considerations:

  • A longer duration will have more chance of being noticed.
  • A longer duration will appear less dramatic, so might be interpreted as a less critical event.
  • A longer duration increases the likelihood of multiple spotlights occuring simultaneously, which might be confusing. It would be particularly confusing if these were flash effects, where the static appearance gives no hint as to how recently the effect began.
  • A longer duration also increases the likelihood of a second spotlight effect occurring on the same element, while the first effect is in progress. That's not necesarily a problem in itself, but does lead to an implementation issue: you probably want to ensure an element is only undergoing one effect at a time to prevent any nasty surprises.

As far as transitions go, the trade-off is fairly clear: faster transitions will 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 proces-intensive.

This is an area where different browsers will act differently. For instance, what's the lowest possible transition time you can realistically 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.


Real-World Examples

37Signals Backpack

37Signals Backpack maintains items in a list. 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".

chat.app

chat.app shows text messages as you or other people enter them. Each new message is highlighted with a yellow Fade Out.

Digg Spy

Digg Spy shows new stories as they appear on the web. Each time a block of new stories appear, they appear with a Fade Out effect, witht the background shifting from grey to white.

Coloir

Coloir is a slideshow application. Each time you click next, an animated "loading" icon appears, and a new photo fades in.

Scriptaculous

Scriptaculous is an excellent Javascript library, supporting many Ajaxian UI patterns. Its visual effects library is based on four fundamental effects:

  • Altering opacity
  • Altering scale
  • Altering position
  • "Parallel" effects - multiple effects at the same time.

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

The visual effects demo provides many spotlight effects.

Fade Anything Technique (FAT)

FAT is a library allowing easy scripting of a transition from one colour to another.


Refactoring Illustration

The Time Periodic Refresh demo shows the server time, updated every few seconds. It's not clear exactly when the time has changed, however, so this illustration adds a spotlight effect each time a new result arrives from the server. There are a couple of refactorings here: one is hand-built, the other illustrates reuse of the scriptaculous library.

Hand-Built Shift Effect

The Time Spotlight Demo lets the user set a few parameters and applies the corresponding effect. A fader object encapsulates the fading logic. The fade duration and transition interval are modifiable attributes:

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

The application asks fader to fade the div when 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<tt> parameter of zero. The function is simpler using an array of percentage <tt>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 above):

 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 a couple of improvements are possible. First, the repeated color calculation would be more effective if it worked on the per-transition delta instead of calculated the absolute color each time. Also, the timing could be adjusted to take into account time taken to run the function itself.

Note how simple it was to encapsulate fading behaviour into a separate component. The same idea is used by effects libraries such as Scriptaculous.

Fading with Scriptaculous

The Time Scriptactulous Demo shows how easy it is to reuse an existing effects library. Here, the displays show a Materialise effect when a new result appears. They transition from completely invisible - showing only the document background colour - 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="prototype.js"></script>
 <script type="text/javascript" src="effects.js"></script>

Then, as with the hand-built fader above, the effect is a one-liner:

 new Effect.Appear("defaultTimeLabel");


Alternatives

One-Second Mutation and One-Second Motion

One-Second Mutation and One-Second Motion are also used to draw attention to a significant event. One-Second Spotlight can be used as both a general attention device as well as to hint at a specific type of event, whereas those two patterns tend to be more about depicting specific events.


Related Patterns

Periodic Refresh

A change arising from a Periodic Refresh is often marked with a One-Second Spotlight.

Multi-User Awareness

A change arising from another user is often marked with a One-Second Spotlight to provide Mult-User Awareness.

Visual Metaphor

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

Want to Know More?

Acknowledgements

37Signals introduced the Yellow Fade Technique to its products and their Yellow Fade Technique article helped to make the pattern more prominent.