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

  • Obat Tradisional Kista Ovarium (www) ⋅ Nov. 26, 2016 04:25

    Obat Alami Kista Amazon Plus terbuat dari sari kulit buah manggis yang kita tahu banyak manfaatnya. Amazon Plus memiliki zat xanthone yang memiliki super anti oksidan berkali-kali ganda dibandingkan dengan jenis buah lainnya.

  • Obat Sakit Jantung Bengkak Tradisional (www) ⋅ Nov. 26, 2016 04:25

    Sakit Jantung Bengkak, menyerang pada jantung itu sendiri. Jantung yang terserang penyakit ini kebanyakan dikarnakan adanya penyumbatan di dalam pembuluh darah pada jantung menyebabkan jantung mengalami pembengkakan, secara tidak normal, menyebabkan kekuatan jantung untuk memompa darah menjadi lemah.
    Amazon Minuman Kesehatan adalah jus kulit manggis yang merupakan obat tradisional jantung bengkak yang sangat aman & tidak berbahaya untuk kesehatan organ tubuh lainnya.

  • Obat Hipertensi Paling Ampuh (www) ⋅ Nov. 26, 2016 04:25

    Obat Tradisional Darah Tinggi Amazon Plus yang terbuat dari sari kulit manggis, madu serta rosella sangat aman jika diminum dan tidak ada efek samping serta tidak terbuat dari bahan-bahan kimia ataupun pengawet. Dikarenakan dalam kulit manggis itu sendiri sudah terdapat bahan pengawet asli.

  • Obat Herbal Hepatitis B (www) ⋅ Nov. 30, 2016 03:50

    Dia akan selalu membatu kita

  • Obat Sinusitis (www) ⋅ Dec. 1, 2016 06:00

    thank for the information, i'm very happy to visit your website
    <a href="http://obatsinusitis.dkes.org/" rel="dofollow">http://obatsinusitis.dkes.org/</a>

  • Obat Vertigo (www) ⋅ Dec. 2, 2016 08:23

    PENYAKIT VERTIGO adalah salah satu bentuk dari gangguan keseimbangan pada telinga bagian dalam yang menyebabkan penderita merasa pusing atau keadaan disekitar serasa berputar. Kelainan ini disebabkan adanya gangguan keseimbangan baik sentral atau perifer, kelainan pada telinga sering sekali menyebabkan vertigo. Untuk menentukan kelainan yang menyebabkan vertigo, dokter biasanya akan melakukan pemeriksaan elektronistagmografi.

    PENYEBAB VERTIGO

    Penyakit vertigo sering terjadi akibat adanya gangguan pada telinga bagian dalam. Beberapa faktor penyebab paling umum antara lain :

    Benign paroxysmal positional vertigo atau BPPV. BPPV terjadi ketika adanya gangguan pada partikel kalsium kecil (canaliths) di kanal telinga bagian dalam. Kemudian telinga bagian dalam akan mengirimkan sinyal sinyal ke organ otak tentang gerakan relatif kepala dan tubuh terhadap gravitasi. Hal ini membantu Anda menjaga keseimbangan Anda. BPPV ini dapat terjadi tanpa adanya alasan yang diketahui Selain itu BPPV juga dapat terjadi mungkin ada hubungannya dengan usia.
    Penyakit Meniere. Gangguan pada telinga bagian dalam yang diduga akibat adanya penumpukan tekanan fluida serta terjadinya perubahan di telinga. Gangguan ini dapat memicu penyakit vertigo bersamaan dengan telinga berdenging (tinnitus), dan gangguan pendengaran.
    Neuritis vestibular atau labyrinthitis. Gangguan pada telinga bagian dalam, umumnya terkait dengan masalah infeksi (disebabkan oleh virus). Infeksi mengakibatkan peradangan pada telinga bagian dalam di sekitar saraf yang penting, dimana saraf tersebut berfungsi untuk membantu dan menjaga keseimbangan tubuh.

    Vertigo Mungkin Berhubungan Dengan :

    Sakit Kepala Migrain
    Cedera Pada Bagian Leher Atau Kepala
    Terjadi Gangguan Pada Otak Seperti Tumor Atau Stroke
    Obat-Obatan Tertentu Yang Dapat Menyebabkan Kerusakan Pada Telinga

  • 20 INCH 1 SPEED AQUA/PINK (www) ⋅ Dec. 3, 2016 05:19

    I found lots of interesting information here.Great work. The post was professionally written fr-running and I feel like the author has extensive knowledge in this subject. Nice post.

  • Brain Formula Capsules (www) ⋅ Dec. 4, 2016 16:06

    Intermountain Nutrition is providing the best quality Intermountain Supplements - Vitamins, Weight Loss, Liquids, and Powders Manufacturer If you are looking for Private Label Supplements, Contact us to get a quote

  • Disinfection efficiency of SoClean (www) ⋅ yesterday 05:52

    I should be follow your video and thanks for sharing us :)