Remember those early generation websites? Their pages were like vast landscapes of text sprawling across and down screen after screen. Graphics were crude and too large for the typical home user to view.
Today, the online landscape is more diverse: flashing animation, graphical displays, streaming video, sounds that roar from pages unexpectedly.
How far the web has come. Or has it?
Early results of the eyetracking study by Stanford University and The Poynter Institute caught print and online visual journalists off guard.
Why?
Because the Stanford-Poynter Project revealed that text may be a more immediate entry point than images on online news sites.
As a user interface designer and visual journalist I too, was surprised by the findings, especially in an interactive medium that attempts to heighten the user’s experience through the integrated display of text, photos, video, and animated graphics. However, it makes sense that new rules apply to the new medium.
The study, which involved 67 subjects who were experienced and regular users on the web, confirmed the obvious for some and raised doubts for others.
Skeptics argue that the pool of subjects was stunningly small to make the assumption that text is preferred to photos. Site developers and online usability architects, however, were not surprised by the findings. Popular usability expert, Jakob Nielson, said in an article that this study “makes a few of their (researchers’) minor conclusions suspect, but the main findings are very robust and credible”.
The Stanford-Poynter study represents a start — a start at documenting the actual second-by-second behavior of users of online news sites. In the past, we have only relied on providers’ logs and online surveys.
The research was not designed to be predictive but as a beginning reality check of the ways regular online users view news within and across various sites. In effect, this is the message we’re trying to send to the design community: Here’s how 67 regular users of online news moved their eyes across the screens of their favorite news sites. What does this suggest about how we can most effectively design pages? What future research should be done to test and challenge this early reality check?
Previous studies of reader behavior with news in print found images to be the key entry points to the printed page. Traditional schools of design understandably teach the same thing. And many in the design community are steadfast that on-screen design follow print. That’s understandable, too, since designers are using the same storytelling tools online — photographs, graphics, and typography — that they use in print.
The study, however, has indicated that more often than not, briefs or captions got the first eye fixations when the first page came up.
Does this mean that photos or graphics do not have a place on the homepage? Hardly.
With 64 percent of all available photos having fixations, photos clearly are essential. In fact, many online news organizations’ log files show that photo galleries are among their most popular destinations.
In the Page Elements sections of the study, page elements for all pages were ranked by volume of fixations. Photos are third to article texts and briefs, which were looked at 92% and 82% of the time, respectively.
The conclusions of these early findings are not meant to encourage text-only presentation of websites, nor do the findings reveal that online readers prefer text to images to get their news.
The release of these early findings and the analysis of additional data, described in an accompanying piece by Marion Lewenstein of Stanford, help online news visitors by helping designers better understand their audience.
So, what can we learn from the early results of the Stanford-Poynter Project?
Improve Headlines and Briefs
Many times, headlines and briefs run in the newspaper with a photo or other graphic. However, once uploaded to the website, the text and visual elements are isolated from one another because of limited real estate on the screen. One solution is to rewrite headlines to compensate for the lack of visual support. More often, headlines are written to fit the column space allocated for the story. These limitations do not exist online, so optimize and rewrite headlines to do what they’re supposed to do: bring the reader into the story. With headlines and captions drawing the eye first, this may be the first and only opportunity to bring online readers in.
Edit Online Photos and Graphics
Just as headlines are packaged directly from the print edition into online, photographs are often taken straight from the paper and displayed on the web. Unfortunately, the amount of graphic information displayed on screen is far less than in print because of the enormous difference in resolution. Print can display from 180dpi to 1200dpi whereas a standard computer monitor only can display 72dpi. Photo editing for online news should consider the following:
1) Is there a different photo more appropriate for online display, one with a single focus or a single subject?
2) Can the crop of the same image be tighter, to help the user focus on the main detail?
Understand Your Online Reader
The online medium is different from print. The habits of reading from a computer screen are different, of course, than reading a newspaper or magazine. It is common to observe people focused on reading a newspaper on a bus, in a coffee shop, or waiting in an airport terminal, isolated from distractions. In contrast, online readers are catching up with their news between answering e-mail, conversing with colleagues, or answering phone calls. The need for quicker access to information is much more prevalent online. Competition for attention is not limited to other online sites but includes daily activity in and around the user’s computer.
Reconsider Animated Banner Advertisements
With the increasingly dismal click-through rates on banner ads, advertisers should consider the potential implications of the fixations on ads we observed in our subjects. Currently, banner ad rates are based on page impressions, loading on the top of every new page delivered on the user’s screen. From the study, we found that our subjects looked at 45 percent of all banner graphics displayed on the screen — a surprisingly high number for some skeptics of banner advertisement. However, the average time that our subjects kept their eyes fixed on these banner graphics was just 1 1/4 seconds. Easily enough time for perceive an image or even a few words, but not enough time to consume four animation cells that usually require 4 to 5 seconds to cycle through their entire display. So here are a few points to consider when developing banner graphics for advertisements:
- Consistently display the company’s logo throughout the animation cycle.
- Consider eliminating the animations entirely and creatively capture the user’s attention as you would in billboard displays near freeways.
- Consider making the four animated cells as four independent messages. So regardless of which cell the user views, the message is delivered in that short second.
The Best of Both Worlds
With the promise of a standard markup language throughout multiple mediums, including XML, now is the time to consider improving the presentation of information to benefit our readers. As we can see from the study, readers do not necessarily want the bells and whistles that online presentations offer. It may be necessary to deliver two versions of the story: a high-end graphically intense presentation and one that is bare bones and designed with both wireless and low-end computers in mind. The challenge would then shift from simply presenting information to editing the information appropriate to the medium.
— Andrew DeVigal is a fellow with The Poynter Institute and was instrumental in conducting the on-site research of the Stanford-Poynter Project in St. Petersburg and Chicago. As a Poynter Fellow, he teaches and directs visual journalism and online seminars. In addition, DeVigal is principal of DeVigal Design, an interactive design firm based in San Francisco Bay Area. He has worked with such online publications as Knight-Ridder’s Mercury Center, Albany’s timesunion.com, and Long Island’s newsday.com. His firm has also consulted with several Silicon Valley start-ups evangelizing the importance of user-focused design and usability.
