Designs for Our Mock News Websites
In the world of the Web, news sites are not often regarded for their innovative and effective homepage designs. Some experts complain about cluttered, difficult-to-navigate homepages on most news sites.

EYETRACK III FINDINGS
This report is one of many from the Eyetrack III study of broadband-era news websites.

46 people were tested for one hour each in December 2003 by Eyetools Inc. in partnership with the Poynter Institute and the Estlow Center. During the test period, each test subject viewed mock news websites created for research purposes and real-world multimedia news features. Results were published in September 2004.

In this round of Eyetrack III, we decided to test what we considered five "typical" homepage designs. In future studies, we hope to explore how more innovative, less typical design fare, but in this preliminary round we wanted to have our participants interact with today's usual Web offerings.

At the time when our inital research began (more than a year ago), we identified five "typical" homepage designs that were in use by viewing more than 250 news homepages and categorizing them. Below are examples of the styles we identified (along with images of the actual pages we tested), with a "sample" webpage for each style. Although we acknowledge that these categories are not comprehensive, we do feel that they reflect some of the typical news-site designs in use today.

Each of the five mock homepage designs we used had two versions -- with one controlled variable -- in the actual testing. Half of our group of test subjects saw one version of a homepage; the other half saw the other version. (For example, half the group saw homepage No. 1 with only headlines; the other half saw that page with headlines and blurbs.)

For observational purposes, we also have included some data about how our participants interacted with each design. (The stats represent the average of both controlled-variable versions of each homepage.)

  • Average time:
    This number is simply an average of the amount of time participants spent with a particular homepage design model.
  • Average fixations:
    This number indicates the average number of times participants' eyes stopped (for a least a fraction of a second) and noticed something on the homepage.
  • Average clicks per person:
    This number indicates the average number of times our test participants clicked on the page.

Although not conclusive, these data do provide food for thought.

(Note: The test websites we created were designed to look like real ones, obviously. The names are fictitious, though some may sound similar to real news websites.)


Style No. 1

This style of news homepage is what we determined to be the most commonly used by news websites. In general, the flag reflects the organization's offline presence, navigation is to the left, photos take up less than 20 percent of the homepage, and overall presentation is fairly information-dense.

These are the mock homepages we tested:

Participant data for this page design:

  • Average time: 15.2 seconds
  • Average fixations: 20.7
  • Average clicks per person: 2.5

We based the design of this homepage style on the following example:


Style No. 2

Distinguishing features of this homepage design are its use of structured white space, lack of contrast in font size, simple color pallette, and fairly plain or "simple" design..

These are the mock homepages we tested:

Participant data for this page design:

  • Average time: 16.6 seconds
  • Average fixations: 21.6
  • Average clicks per person: 1.9

We based the design of this homepage style on the following example:


Style No. 3

Immediately apparent with this design is its use of little or no photography, its horizontal feel, and "stacked" layout.

These are the mock homepages we tested:

Participant data for this page design:

  • Average time: 12.1 seconds
  • Average fixations: 17.1
  • Average clicks per person: 2.2

We based the design of this homepage style on the following example:


Style No. 4

The use of sans serif type, section labels reversed in horizontal bars, relatively large amounts of white space, and "stylish" look distinguish this page design.

These are the mock homepages we tested:

Participant data for this page design:

  • Average time: 12 seconds
  • Average fixations: 18.2
  • Average clicks per person: 2.2

We based the design of this homepage style on the following example:


Style No. 5

Among the distinguishing features of this design are the use of a dark background color, its treatment of the the lead story -- usually an image with type superimposed on it -- and a "multimedia magazine" look.

These are the mock homepages we tested:

Participant data for this page design:

  • Average time: 16.4 seconds
  • Average fixations: 22.3
  • Average clicks per person: 2.4

We based the design of this homepage style on the following example:

Add/view feedback on homepage reports


Written by Laura Ruel and Steve Outing, project managers; research and tools by Colin Johnson, Greg Edwards, and Leslie Kues of Eyetools Inc.