Reading Home Pages

Jennifer Thurstun - Macquarie University

This paper looks at the design of home pages from the point of view of the reader, considering research that has been done on user responses and questions that arise from this research. I should first clarify what I mean by home pages, since the boundaries between the first page we come to on a website and interior pages change from one website to another. For the purposes of this paper, we will consider homepages to be the pages which provide the user with a map to the site, the one which we usually arrive at when we click the "Home" button. Often, inner pages have the same design and characteristics as the home page, or they may just be a page of text or a list, or a photograph. We are not concerned here with the simpler pages, but the pages that are designed to lead in multiple directions from a basic point of departure.

These "home pages", tend to be designed with a heading, possibly a menu set out in a row at the top, and two or three columns running down the page. The home pages of The World Bank (http://www.worldbank.org/) or Lonely Planet (http://www.lonelyplanet.com/) are fairly typical, and are considered by Jakob Nielsen, widely regarded as an expert on web usability, to be well designed home pages. How and why has this design, with heading, menu and columns, come to be accepted in general terms as the way to design a home page? Is there anything about this design that makes it particularly efficient and readable, and able to function across cultures and languages? How, in fact, does the reader read a home page? And is it akin to the QWERTY keyboard, a system that has become entrenched and because we know what to expect, we, the users, resist any attempt to change it and make it more efficient?

To explore these questions, lets consider

• the way the reader is believed to read a home page.
  
• the Poynter institute's eyetrack study which studied the eye movements of readers accessing an internet newspaper.
• Jakob Nielsen's studies (see www.useit.com/alertbox) of usability and user conservativeness.
• cultural assumptions in web design.

Reading printed pages and home pages
First let us compare the way we read a printed page with the way we read a home page on the screen. The Gutenburg diagram, which gives basic eye movements for print reading in English, shows that the eye moves from the primary optical area in the top left hand corner of the page to the terminal anchor at the bottom right hand corner of the page. Crosses indicate fallow corners that attract little attention, and the wavy lines show "backward" movement that the eye resists when reading (cited in Wheildon C. 1984. Type and Layout).

By contrast, those who have studied screen reading (Whitbread 2001, Nielsen 2000, Thurstun 2000) bring attention to the differences between print reading and screeen reading. Whitbread suggests a rather different profile of basic eye movements for screen reading of text on a home page. He finds that the eye goes first to any moving image, and then to still images, wherever they are on the screen. For text, scanning occurs in a centre, left - right pattern as the user judges the likelihood of each area of containing useful links or information. The point of entry is usually at the centre and top of the screen, and target areas (where the eye tends to aim for) can occur at left, right and centre. The expectation is that the central column will contain most detail and content, the left column will serve as a table of contents and the right column (if there is one) will provide functional links (e.g. print, subscribe, download PDF file). The area at the bottom of the frame is often neglected. This, at least, has been the theory, and until recently there has been little real evidence of what readers really do when they look at a home page on a screen.

The Eyetrack Study at the Poynter Institute
The Poynter Institute and the Department of Communication at Stanford University collaborated on the first eyetracking study of Internet news reading in 2000, examining the eye movements of 67 subjects. The study which was intended simply as a reality check, to give information on the ways regular online users viewed news sites. Subjects used their own news bookmarks as their eyes were tracked. The example shown on the Eyetrack website (http://www.poynterextra.org/et/i.htm – go to "table of contents" and then "front page entry point, initial analysis", "Fixation Order") shows the eye movements for subject 59.

However subject 59 turns out not to have been typical of the majority of readers. Once the initial results were analysed, they found that the eye went first to text rather than graphics. This confounded the current belief amongst designers that the best way to capture the attention of the reader was through graphics. Attempts were made to explain the findings - perhaps the graphics and photos loaded more slowly than text, so the text simply presented itself to the eye before the graphics. However the 67 subjects were connected to the Internet at high speeds, and it was fairly clear that during an entire online reading session, graphics and photos did less well than text. Only 22% of the graphics were looked at aside from banner ads and photos. The following shows the extent to which different aspects of a page were given attention.

Contrary to expectations, it appears that the provider's first chance to engage the reader is through text rather than images, that readers do not necessarily want the bells and whistles that online presentations offer. It also seems, if we can go by the example of subject 59, that the way the eye moves through a web page is neither efficient nor very predictable. Readers showed shallow reading, but selected depth - it was more than three times as common for them to limit their reading to a brief, rather than a full article, however once the subject had selected an article, eyes went over more than 75% of the length of the article, showing that they were more willing to scroll than some thought. Readers frequently alternated between multiple sites, left the site and returned.

Usability studies
Jakob Nielsen is the Distinguished Engineer for Sun Microsystems, and is popularly considered the guru of website design. His website (http://useit.com/alertbox) contains hundreds of articles and studies on website design, screen reading and usability.

In 1998 he tested several advanced web design concepts for a redesign of Sun's website. The design (composed of elliptical shapes) that he liked himself and considered most efficient and interesting was rejected by users, who said "I don't have time to learn special conventions for your site" or "Just give it to us plain and simple, using interaction techniques we already know from other sites." Nielsen believes that, since users frequently move back and forward between pages on different sites, "the entire corpus of the Web constitutes a single interwoven user experience ….… The Web as a whole is the foundation of the user interface, and any individual site is nothing but a speck in the Web universe." His reluctant but emphatic advice to designers is to do the same as everyone else - users will expect things to work as they do elsewhere, and since they spend most of their time on other sites, that's where they form their expectations.

However he thinks current web design is "grotesquely inadequate" (his own words), and the conservatism of web users depressing. His solution "is to call for modest incremental advances in Web design, with new sites mainly following conventions while pushing a small number of new ideas. Some of these new ideas will be so successful that they will emerge as conventions in their own right" (all quotes from useit.com/alertbox/980322.html)

He criticizes current design on a number of counts, including;

• the decision to make hypertext links blue. He calls this "the mother of bad web design conventions", putting the most important text in a colour known to reduce readability.
• the convention of having a coloured stripe down the left side of the page for the main navigation links. This means that the coloured navigation bar takes up 20% of the pixels on the screen. He would prefer a design where navigation links are concentrated on the top of the page and the rest of the screen is available for content. But readers understand and like the coloured bar down the left hand side, and it probably helps navigation.
• the distance between scroll bar and navigation bar (to be referred to later).

Some design elements that Nielsen (2000) advises are:

• placing name and logo on every page and making the logo a link to the home page.
• straightforward, simple headlines and page titles
  
• the use of groupings and subheadings to break long lists into small units (structure page to facilitate scanning.
  
• avoid clutter and cramming.
  
• use link titles so that users know where each link will take them.
  
• do as other website designers do so as not to frustrate user expectations - bring innovations in by making small changes very slowly.

Cultural assumptions
A remaining question is whether the screen design used for English readers is suitable for readers of other languages and other cultures with different approaches to giving and receiving information. The website, Arabia.com, has both Arabic and English versions, and the contrast between the two is worth bringing to your attention. Should we expect that website design as it has evolved for readers of English in Anglo cultural environments is also suitable for readers of other languages?

The home pages of Arabia.com in both Arabic and English follow the 2-column design, but the scroll bar and main contents column are on the left side in the Arabic version, on the right side in the English version. This reversal is perhaps a response to Arabic being read from right to left (and the page being turned on the left side, assuming that the scroll bar is a metaphor for page turning). You would also see that alignment in Arabic is ragged left, rather than the ragged right alignment used in the English version. So the Arabic version is almost a mirror image of the English version. But if we're concerned about efficiency of use, the two versions might well be advised to borrow from each other.

In talking about English language websites (in "When Bad Design Elements Become the Standard"), Nielsen says there are good usability reasons why it would have been better to have the navigation rail (the coloured column usually on the left) on the right side of the page. This would permit better, shorter mouse movements. He suggests that the navigation rail should be next to the scroll bar to save users' time rather than placing these frequently-accessed areas on opposite sides of the window. Also, since users look at content first when they open a page, it would be better (for left-right readers) for the content to start on the left border of the window, so that the gaze could naturally shift to the right when deciding where to go next (in present design, the eye needs to skip the navigation rail before it can scan the content area). For Arabic, and other right-left readers, the preferred design would presumably be the opposite.

Conclusion
Although many questions remain unanswered, home page design (at least for most academic and newspaper sites) does seem to have fossilized to a form that is less than perfect. Change to more efficient, readable design is likely to take time, trial and error. However attempts are being made to create a base of understanding about how readers read online, and how to make this sometimes less-than-perfect experience easier. And changes are being put forward - sites designed by and for designers, musicians, filmmakers and artists (among others) are worth watching for innovations .

References
1. Nielsen J. 2000. Designing web usability: the practice of simplicity. New Riders
2. Thurstun J. 2000. Screen reading: Challenges of the New Literacy. In Gibbs, D. and Krause, K. (eds) Cyberlines. James Nicholas Publishers.
2. Wheildon C. 1984. Type and Layout. Strathmore Press
3. Whitbread D. 2001.The Design Manual

Sites that are breaking the mould
(with thanks to Pamela Hewitt and Adam Smith)

literary sites
http://www.carmelbird.com/

http://www.edithwharton.org/

http://www.levity.com/

http://www.asbyatt.com/

http://www.kipling.org.uk/

http://lessing.redmood.com/

http://www.roalddahlclub.com/

http://www.rain.org/

http://www.tomwolfe.com/

http://www.levity.com/

designers' sites
http://www.wpdfd.com/

http://www.eastgate.com/

http://www.netdiver.net/

pop music sites
http://members.tripod.com/~prestomanifesto/phole.html

http://www.righteousbabe.com/

http://www.systemofadown.com/

artists' sites
http://www.alexgrey.com/

http://www.brettwhiteley.com/

film sites
http://www.donniedarko.com/