Spotlight Effect

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 links

Comments

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

    Great use of highlighting for the user.

  • Visual Communication (www) ⋅ May 7, 2016 13:32

    Visual Communication is the movement of thoughts and data in structures that can be perused or saw. The subject incorporates Graphic Design, Illustration and Animation for; books, print, magazines, screen-based media, intelligent web plan, short film, outline for publicizing, advancement, corporate personality, bundling configuration AND MORE futile poo..

  • video production companies (www) ⋅ June 7, 2016 06:39

    The way individuals expand their data is changing drastically every single day. With the ascent in mediums, for example, blogging, live-tweeting, and video gushing, the way you contact your group of onlookers is never going to be the same again. Video communication has become essential for us!

  • Gast (www) ⋅ June 8, 2016 04:23

    High virtue platinum solid demonstrating respectability, dark crocodile calfskin strap includes an enduring normal for men ought to have for this watch, wear it on the wrist, the wearer will frame the setting to a honorable and adult man.

  • replica rolex (www) ⋅ June 8, 2016 04:25

    Dial the full utilization of German fortes unconventional format, home time and the second time zone show board show board with a little two digression circles structure, involved the left 50% of the dial, and a huge timetable window and force hold show board is situated at the upper right divide of the dial, where substantial dark Arabic numerals inside a schedule window particularly the most conspicuous, additionally to the table style is more climatic.

  • rolex (www) ⋅ June 8, 2016 04:39

    Its 950 platinum fasten is to make and expand the extravagance watch, and back through the outline likewise permits development operation situation displayed before us, as we offer an alternate sort of visual dining experience.The Lange 116.025 is a manual mechanical watchIt has the components can be said that down to earth and intense, whether it is every day extremely viable date show and power save show, world time capacity is regularly go out with companions frequently utilized, are to draw up a chic creator Lange entryway plan.

  • jenee ⋅ July 4, 2016 10:11

    I like this <a href="http://www.essay/">service</a>

  • jenee ⋅ July 4, 2016 10:12

    I like this <a href="http://www.essay.co.uk/">service</a>