Spotlight Effect

Also known as: Spotlight, Spotlight Animation, The Yellow-Fade Technique, One-Second Spotlight

Tags: actions, feedback, forms

Highlighting (a.k.a., spotlighting) is an effective but subtle way to draw attention to a change in the interface. For instance, instead of showing a message telling people that their item was added, just add the item and do a quick highlight transition on the new item by changing the background color temporarily to a light pastel color.

Tickspot: A spotlight effect is shown for few seconds around an item just added to the list.

What problem does the pattern solve?

  • You want to provide feedback for user’s actions in a non-intrusive manner.
  • You need to direct the user’s attention to changes that are happening in the UI automatically.
    • E.g. a sports live scores service that updates the results in real time.
  • There are not too many changes happening at once. If values are changing very frequently or are changing all over the page, spotlighting each change can be distracting.

When to use it?

  • You want to provide feedback for user’s actions in a non-intrusive manner.
  • You need to direct the user’s attention to changes that are happening in the UI automatically.
    • E.g. a sports live scores service that updates the results in real time.
  • There are not too many changes happening at once. If values are changing very frequently or are changing all over the page, spotlighting each change can be distracting.

How to use it?

  • Spotlight the changed area on a page by changing the background color of it instantly after the change. Don’t reload the page.
  • Use light pastel colors (yellow is most common) to keep the effect subtle.
  • After few seconds, the highlight should fade back to the normal background color.
    • The longer the spotlight lasts, the better chance it has of being noticed. But longer duration can also feel less critical to the user. Also, if there are a lot of changes happening in the interface, more changes are likely to happen at the same time if the duration is longer, which can be confusing.

Why to use it?

When providing micro updates to a page (instead of refreshing the whole page), the spotlight effect is very useful. The eye can notice the change and be clued in to where a change happened.

Accessibility

Since transitions are about visual communication they by default are not accessible by users with visual impairments. If what the transition communicates is important for the user not to miss then you can consider these techniques:

  • Set the focus on the item that got changed. This enables assistive technologies to detect where a change happened. Of course if the user is typing or needs the focus in another area then this solution cannot be used.

Sources

This pattern is based on Spotlight design pattern from Yahoo! Design Pattern Library.

Useful linksUseful links icon

Comments

  • Smart Company Software (www) Feb. 3, 2011 16:34

    Great use of highlighting for the user.