You don't read a screenful of text in a completely voluntary way. You're constantly tugged all over the page by various factors, including how your eyes jump around, what some submodule of your brain thinks is important to look at next instead of the words, and so on.
If we know about these factors, we can make web pages easier to read by making other elements on the screen less distracting.
In this article, we'll take a look at a fairly common online widget and talk about where it works and where it doesn't work, in terms of visual attention and its design objectives. We'll use the Flickr Daily Zeitgeist as our example.
Flickr's Daily Zeitgeist is a flash widget that sits in the sidebar of any webpage and shows photos selected from the Flickr website. It can be configured to show photos recently taken by the webpage author's friends, making it an always-updating view of what this circle of friends is up to.
Flickr is an online photo management and sharing application. As well as providing tools to organize your photo collection, it helps you share your photos with others. In doing this, you identify your friends and family, and this information is used to provide views of photos taken by your contacts and groups. Both fun and handy applications are built out of Flickr, including management utilities, screensavers, and toys like the Daily Zeitgeist, which incorporates both friends and sharing.
Take a moment to visit Flickr's Daily Zeitgeist demo page to see the widget in action. It consists of a continuously animating grid of square photo tiles. Two actions occur in its cycle:
1. A new photo appears, twice as tall as the other pictures in the grid, fading in over four photos beneath it. The fade-in takes just over a second, and then it lingers for about half a second. Here's a photo, appearing:
2. The new photo shrinks down to regular size, replacing one of the four photos beneath it (the other three remain as they were). The shrink takes less than half a second. Here's a photo, shrinking:
It's compelling to watch, partly because you don't know where the next photo is going to appear. It's a little like watching an open fire; the randomly changing scene keeps you entranced.
The widget is intended to sit in the sidebar of blogs, where all manner of supplementary material currently resides. You'll often find links to friends, lists of recently read books, or maybe a Weather Pixie.
What's the design intention of this material? It adds to the personality of the site, for starters. It shouldn't distract from the main text, but at the same time, it's got to jump out a little, otherwise it wouldn't add that personal touch (like wearing a bright scarf in winter).
Since the Zeitgeist sits in the sidebar, it has these intentions but also its own, more specific ones too; if you see a photo you like, you should be able to follow that up. And you can because if you click on a picture in the grid, a full size photo will open in a new window, and from there, you can expore photos taken by the same person or photos on the same subject around the Flickr site.
This is what the widget looks like, in action, on Anil Dash's Typepad page (it's about half-way down, on the right):
Where's the problem? When you're reading a blog that has the Daily Zeitgeist in a sidebar, something odd happens. You're reading down the center of the page, and every so often you're suddenly drawn to the Zeitgeist widget at the side.
This is usually a good thing--the photos are put there by the blog's author exactly so that you look at them. But your eyes often get there a little too late to see what the new photo is, and you're left looking at the grid without knowing what's new. So you go back to reading, and two seconds later, it happens again. It'd be okay if you could see the new photo when you looked over, but by the time you do, it's already shrunk down and you've lost it. Annoying.
The following two pictures show this in action. The bright area is where your focus is, and the shaded area is neglected. To begin with, you're paying attention to the center of the page, but notice how, by the time you shift your attention to the Flickr Daily Zeitgeist, the photo has already shrunk down.
Okay, it's a tiny problem and barely annoying at all, and of course, the Daily Zeitgeist is good fun. Just as the web would be dull if it followed strict principles of usability all over, you shouldn't take this critique too seriously. But what we're talking about is quite real. Here, it's only a little something that distracts you from reading without rewarding you with a new photo, but another time, it might be an automobile dashboard light that distracts you from the road without telling you the important readout, or a cell phone screen that you can't simply glance at when you take it out of your pocket because there's a flashing component on the screen.
Before we look at why this little problem occurs with the Daily Zeitgeist, we're going to have to go into how the brain deals with visual input.
Light comes in at the eyes and is processing through the brain, extracting signals we can respond to, and building a picture of the world we can use to decide what to do next. The two things you have to know about this are:
Available visual information is highly constrained. For example, our eyes see high resolution only right in the middle, so we can only make out fine detail if we're looking directly at something. Also, our brains have limited processing resources and can only select a small amount of all possible input to examine closely. The scarce resources of the brain and eyes must be directed towards what seems most important at any given time, in order to use them most effectively.
Processing takes time--it takes a fifth of a second for the signal to race from your eye through the brain to conscious awareness. But often, we don't have a fifth of a second, so the brain needs to be able to respond to especially important events automatically.
The major physical constraint on how much you can process has to do with your eye itself. The eye sees in high resolution only right in the center. Try going to a site with the Flickr Zeitgeist in the sidebar (try, say, Adam Hertz's blog, To Wish for Impossible Things. The widget is almost at the bottom on the right). Keep your eyes fixed on the text in the central column, as if you were reading it, and see how much detail you can make out about the photos on the right. Not much, right? You can make out motion well enough away from the middle of your vision, and color's okay too (although a little impaired). Fine detail, on the other hand, goes away.
Working around the resolution problem isn't so hard--your eyes just move very quickly to what you need to examine closely. Your pupils jump around continuously. What exactly they're jumping *to* is decided by your attention system.
"Attention" is the solution to your brain's other big constraint, that there's only a limited amount of processing resource to go around. The visual world is fast-moving and information-rich. Continuously processing the whole thing is more than we can manage. The brain decides what to fully process and doesn't bother with the rest. Your feeling of this is what we call "attention." You're paying attention to these words, for example, but you're throwing away all other unimportant inputs coming in, like background noise, the color of the wall visible over the computer screen, and the feeling of your shirt on your skin. You probably weren't aware of all these, just now, until we reminded you. If you allocate visual attention in a particular direction, you look over there.
The big question is: How does your brain decide what to pay attention to? Well, partly it's voluntary. Since you're reading this article, you voluntarily move your attention down the page as you read the lines. Partly, though, where your attention gets allocated is automatic and out of your conscious control, and that's because of the time it takes to make a voluntary decision.
If the allocation of attention was completely voluntary, you'd get a situation like this:
Something moves in the corner of your eye. Pause for a fifth of a second to wait for that information to be processed and reach conscious awareness. Decide to pay attention in that direction, and move the eyes. It's a hungry bear. Oh dear, you've been eaten.
Instead, we have automatic notifiers that can jump in much earlier during visual processing. The scenario runs something like this instead:
Something moves in the corner of your eye. Without waiting for the visual information to reach conscious awareness, your brain forcefully allocates your attention in that direction. It's a hungry bear. Run away, run away!
Your brain, before vision reaches conscious awareness, has notifiers set up for possibly dangerous signals. These include sudden movements, sudden changes in shadow, and more. They're set up to cause you to react in a hurry--sometimes they'll just move your attention in that direction, and sometimes they'll actually move your body. That's what happens when you flinch from a jumping shadow. For survival, time is of the essence, and it's safer to be over-cautious than not to flinch at all. (Notably, the notifiers don't include slow and gradual changes.)
Mainly, what these notifiers do is automatically shove attention around. That's very handy if you need to avoid being eaten by a bear. Reading blog posts rarely involves risking bear attack, however, and in that case it can be distracting... which brings us back to Flickr's Daily Zeitgeist.
Let's look at how the Daily Zeitgeist does its stuff once again.
The large photo fades in gradually. A slowly changing scene isn't considered by your brain as a potentially threatening event, and since your attention is elsewhere (on the text in the center of the screen), you don't notice it.
Next, the photo shrinks suddenly. Quick movements are regarded as potentially threatening, so the quick-response part of your brain jumps in and shifts your attention, and your eyes, in that direction. Although rapid, this still takes a small amount of time, and by the time you've been automatically dragged away from the text, the photo has already shrunk into place.
You're left looking at the Zeitgeist widget, wondering what on earth your brain has decided you're meant to be looking at. You can't even tell what photo had just shrunk into place because it finished shrinking while your eyes were moving.
And that's what the annoying factor is: you don't notice the big pictures, which is the point of the widget, and you're distracted from the main feature of the website for no reward.
This would be a rather impolite critique if it didn't suggest some improvements. Given the purpose of the Daily Zeitgeist and where it fits on the page, it should be designed so that it's most attractive just before the new photo is at its largest. When your eyes move over to the widget in that case, you'll be just in time to see the photo in its full glory.
Perhaps--and this is just a suggestion--new photos could zoom in from the side at their small size. They should then zoom rapidly up to double size, and that rapid zoom will attract the eye to see them at their largest. The photos should then shrink slowly back into position to maximise the chance of being seen without being too distracting.
The brain is full of quirks like this, and we already make good use of them. We make banner ads flash and important navigation links on web pages bright precisely because we know those attract the eye--or rather, because those attract the brain's attention mechanism, or stand out in the low-resolution periphery of the eye. And that's precisely the point: knowing that there's more to it than "flashing things attract" means we can start taking advantage of the quirks in other situations.
By looking at Flickr's Daily Zeitgeist, we've dug deeper into how the brain deals with vision and what attention is. We've seen that the way the widget currently functions causes the brain to allocate attention at an inconvenient point in its cycle, attracting the eye after the rewarding large photo is visible, and frustrating the user. You're now set to suggest solutions of your own and apply these ideas in other applications.
Tom Stafford has a PhD in Cognitive Neuroscience and is currently a research associate in the Department of Psychology, University of Sheffield. He is also an associate editor of the Psychologist magazine and has previously worked as a freelance writer and researcher for the BBC.
Matt Webb At Schulze & Webb, Matt Webb engineers, designs, and hacks technology and physical things. He is also the coauthor of Mind Hacks, cognitive psychology for a general audience.
Return to the O'Reilly Network.
Copyright © 2009 O'Reilly Media, Inc.