Web Page DesignWeb Page Design

J. Richard StevensJ. Richard Stevens

Basic Grid DesignBasic Grid Design

• http://nytimes.com• http://cnn.com• http://dallasnews.com• http://abcnews.com

• http://nytimes.com• http://cnn.com• http://dallasnews.com• http://abcnews.com

Principles of DesignPrinciples of Design

• Unity• Contrast• Hierarchy• Consistency

• Unity• Contrast• Hierarchy• Consistency

Text Formatting Considerations

Text Formatting Considerations

• Fonts• Alignment• Line length

• Fonts• Alignment• Line length

Text Techniques to Avoid

Text Techniques to Avoid

• Avoid line-to-line hyphenation• Avoid use of underlining except for

links• Avoid italicized text

• Avoid line-to-line hyphenation• Avoid use of underlining except for

links• Avoid italicized text

Journalism and Usability

Journalism and Usability

• News Web sites are not generally highly regarded for design

• Tend to be cluttered, and a variety of ad models

• News Web sites are not generally highly regarded for design

• Tend to be cluttered, and a variety of ad models

Eye Track 2004Eye Track 2004

EyeTrackIII • Joint venture by

• The Poynter Institute• Estlow Center for Journalism and New Media• Eyetools

2 Methods• Eyetrack -

http://www.poynterextra.org/eyetrack2004/videos.htm• Heatmap -

http://www.poynterextra.org/eyetrack2004/heatmap.htm

EyeTrackIII • Joint venture by

• The Poynter Institute• Estlow Center for Journalism and New Media• Eyetools

2 Methods• Eyetrack -

http://www.poynterextra.org/eyetrack2004/videos.htm• Heatmap -

http://www.poynterextra.org/eyetrack2004/heatmap.htm

Where Users LookWhere Users Look

Viewing Pattern

Viewing Pattern

Where Users LookWhere Users Look

Viewing Zones

Viewing Zones

Traditional Journalism

site

Traditional Journalism

site

• Readers most often view the top headlines and logo

• Readers most often view the top headlines and logo

The Impact of Blurbs

The Impact of Blurbs

• Blurbs pull the readers down the page and keep them in this area longer

• Blurbs pull the readers down the page and keep them in this area longer

Headline ViewingHeadline Viewing

• Online news readers concentrate viewing on the left-hand side of headlines (the first 1-2 inches).

• The first few words of a headline are critical in drawing user attention

• Online news readers concentrate viewing on the left-hand side of headlines (the first 1-2 inches).

• The first few words of a headline are critical in drawing user attention

Headline ViewingHeadline Viewing

Article DesignsArticle Designs

• When readers encountered a story with an introductory paragraph, 95 percent of them read all or part of the introductory paragraph.

• Those who spent time carefully reading the introductory paragraph of a story on article-level pages typically spent little time with the full story. Those who gave the intro paragraphs little time usually spent even less time with the story text.

• Shorter paragraphs encouraged testers to continue reading.

• When readers encountered a story with an introductory paragraph, 95 percent of them read all or part of the introductory paragraph.

• Those who spent time carefully reading the introductory paragraph of a story on article-level pages typically spent little time with the full story. Those who gave the intro paragraphs little time usually spent even less time with the story text.

• Shorter paragraphs encouraged testers to continue reading.

Article DesignsArticle Designs

• Story text in one-column format was read more extensively than story text presented in a "newspaper-like" multiple-column format.

• Subheads in online stories had little affect on how much of the first or top portion of the story was read when the reader's interest was strongest. However, subheads increased reading for "skimmers" and for those whose attention in a story was beginning to wane.

• When readers got to an article-level page, they seemed to be there to view the text. Overall, participants' eyes fixated on the story or other text elements before the accompanying image.

• Story text in one-column format was read more extensively than story text presented in a "newspaper-like" multiple-column format.

• Subheads in online stories had little affect on how much of the first or top portion of the story was read when the reader's interest was strongest. However, subheads increased reading for "skimmers" and for those whose attention in a story was beginning to wane.

• When readers got to an article-level page, they seemed to be there to view the text. Overall, participants' eyes fixated on the story or other text elements before the accompanying image.

BlurbsBlurbs

• Blurbs encourage scrolling• Blurbs boost reading• Clicks per user unaffected by blurbs• Left-third blurbs most viewed

• Blurbs encourage scrolling• Blurbs boost reading• Clicks per user unaffected by blurbs• Left-third blurbs most viewed

HeadlinesHeadlines

• Smaller headlines lead to more scrolling• “Hot” words catch attention of

skimmers• Large headlines make pages “too easy”

Smaller headlines make reader work harder and invest.

• Smaller headlines lead to more scrolling• “Hot” words catch attention of

skimmers• Large headlines make pages “too easy”

Smaller headlines make reader work harder and invest.

Font SizeFont Size

• Smaller font size results in more careful reading

• Disparity leads to fall off in reading of smaller text.

• Smaller font size results in more careful reading

• Disparity leads to fall off in reading of smaller text.