Information Resource Design How to make a web page scannable Check - - PDF document

1

Information Resource Design

”How to make a web page scannable”

Check out this webpage: http://www.idi.ntnu.no/~oleanda/scannability/

Read the summary, compare it with the non-scannable paragraph

Background

A Web user…

• …reads 25% slower on sceen than on paper
• …are busy don’t have time to read the web page word

by word

• …scans the page, picks out interesting keywords,

sentences and paragraphs, skips the rest

• …prints or saves page if it is useful, moves then on
• …leaves a webpage if noting of interest if found within a

short period of time

2 Integrated view of enterprise content design and management

Figure by Sue Fowell, 2003

Integrated view of enterprise content design and management

Scannable web pages

Figure by Sue Fowell, 2003

3

Elements of Web page scannability Why?

Apply scannability and web page usability will increase by over 100%

• Jakob Nielsen

Gestalt Principles

Things are seen as being together if they…

• …are near
• …form a line
• …have similar shape
• …have similar size
• …have similar color
• …form a known shape or region
• …occur at the same time

1

The brain and the eye are attracted by…

• strong contrast
• distinctive patterns
• spatial arrangement

The author can influence the way a reader reads the text

4

Typography and Space

What factors affect legibility?

• Typeface
• Typesize and x-height Text density
• Serif versus Sans Serif
• Leading
• Line length
• Slant of typeface
• Type weight

2

Typography and space work together to make a webpage more scannable

Editorial Style

Editorial style can make a webpage more scannable by giving the text more readable properties.

• Inverted pyramid style (conclusion first)
• Simple and informal writing
• Shorter text
• No promotional language
• No metaphors and wordplay
• Meaningful subheadings

3

5

Hyperlinking and Navigation

• Split up long pages into coherent pages
• Use only the most important hyperlinks in

bodytext

• Always show the user where he/she is in the

web hierarchy

4

How you use hyperlinks in the page affect scannability

Implementation of scannability

• Use style sheets.

– HTML does not support leading – Gives the author more control

• Use legible fonts

– Verdana – Georgia

5

6

Future and discussion

• Automatic Scannability Checker

– Can find scannability flaws – Can in the future auto-correct flaws

• High Resolution Screens

– Increase reading speed on screen – Reduce many scannability problems

• Boxes around page elements

– Schriver: Don’t use it! – Almost all proffesional websites use it

• Linking

– Internal linking invites the user to leave

6 Bibliography

1. Karen A. Schriver, 1997, Dynamics in document design, John Wiley & Sons inc. 2. Patrick J. Lynch and Sarah Horton, 2002, Web Style Guide, 2nd edition, Yale University, http://www.webstyleguide.com 3. Office if the e-Envoy, 2002, Quality Framework for UK Government Website Design: What is a good government website? Cabinet Office http://www.e-envoy.gov.uk/webguidelines.htm 4. Melody Y. Ivory, Marti A. Hearst, 2002, Improving web site design, IEEE Internet Computing 5. John Morkes and Jakob Nielsen, (1997), Concise, SCANNABLE, and Objective:How to Write for the Web http://www.useit.com/papers/webwriting/writing.html 6. Jakob Nielsen, 1996, Jakob Nielsen's Alertbox for June 1996: Inverted Pyramids in Cyberspace http://www.useit.com/alertbox/9606.html 7. Jakob Nielsen, 1997, Jakob Nielsen's Alertbox for October 1, 1997: How Users Read on the Web http://www.useit.com/alertbox/9710a.html, http://www.useit.com/alertbox/whyscanning.html 8. Jakob Nielsen, 1997, Jakob Nielsen's Alertbox for March 15, 1997: Be Succinct! (Writing for the Web) http://www.useit.com/alertbox/9703b.html 9. Nathan Wallace, 1999, Web Writing for Many Interests Levels, e-gineer http://www.e-gineer.com/articles/web-writing-for-many-interest-levels.phtml 10. Jim Levin, 2003, Gestalt Principles & Web Design http://lrs.ed.uiuc.edu/j-levin/gp/