Why something moving in the periphery of the screen immediately grabs your attention

Chances are that you’ve experienced this (probably quite a few times): You’re currently concentrating on what happens in the center of your screen, focusing your eyes on it, when suddenly something blinks, moves, appears or disappears in a corner or at an edge of the screen. Whether you would have known what it was without looking at it or not, your attention is immediately drawn to it. If this happens more than once, it becomes an annoying distraction which may be hard to ignore.

There is a simple reason for that: As you might remember from Biology class, there are two kinds photoreceptor cells in the human eye: Cones and rods. Cones are used for high-resolution color vision and are concentrated in the fovea centralis, which catches light from the object you’re focusing on. Rods, which are more common in the periphery of the retina (in fact they’re almost completely absent in the fovea centralis), are used for low-light vision and are especially good at detecting motion.This is useful to spot and quickly react to e.g. an attack coming from the side in the periphery of our field of vision.

Even though attacks are fortunately not that all that common for most of us nowadays, we are still biologically designed to focus our attention on anything that’s moving in the periphery. In the context of a computer screen, a sudden change of color or shape, something quickly appearing or disappearing can also be interpreted as movement. This is great if the movement signals something which actually deserves our immediate attention, but if it’s something that we don’t actually need to pay attention to at the moment but which grabs our attention anyway, it quickly becomes annoying. And if you finally manage to ignore the constant annoyance, you may miss if information which actually is important to you comes up in the periphery.

Accordingly, peripheral displays with moving information were found to decrease performance in information browsing [1] and text editing [2] tasks (though another study [3] did not find significant performance decrease in a browsing task).

So, bottom line / takeaway / tl;dr: If you need to grab your users’ attention, just animate/change something in the periphery and it’s pretty sure to work. But resist the urge to put something constantly moving like a scrolling ticker on the edge of the screen, it’s scientifically proven to distract users from their main task.

[1] J. Somervell, R. Srinivasan, K. Woods, and O. Vasniak, “Measuring distraction and awareness caused by graphical and textual displays in the periphery,” in Proceedings of the 39th Annual ACM Southeast Conference, 2001. PDF
[2] P. P. Maglio and C. S. Campbell, “Tradeoffs in displaying peripheral information,” in Proceedings of the SIGCHI conference on Human factors in computing systems, 2000, pp. 241–248. PDF
[3] D. S. McCrickard, J. T. Stasko, and R. Catrambone, “Evaluating animation as a mechanism for maintaining peripheral awareness,” 2000. PDF
About these ads

Researcher on usability / usable security / user experience Volunteer KDE usability consultant Open Access / Open Science supporter

Posted in KDE, User Experience
5 comments on “Why something moving in the periphery of the screen immediately grabs your attention
  1. Ste says:

    After reading this post, this came immediatly to my mind:

    http://tinyurl.com/boaqj5g

    Imho, one of the best examples of worst practice.

    • Absolutely. Useful vs. useless notifications is such a big topic that it would warrant its own post, but it’s definitely also a case of useless distracting peripheral motion. “Oh, I just plugged something in? Really? Thanks for telling me, I wouldn’t have noticed myself…”

  2. solenskiner says:

    Kates line/col in the statusbar immidiatly comes to mind. IMHO an itty bitty fading popup under the editing cursor could show the same information in a possibly less distracting way.

  3. Manolo says:

    KDE Notifications are full of this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 29 other followers

%d bloggers like this: