Information Resource Design ”How to make a web page scannable” Check out this webpage: 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

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

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

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

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

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, 2 nd edition, Yale University, Office if the e-Envoy, 2002, Quality Framework for UK Government Website Design: What is a good government website? Cabinet Office 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 Jakob Nielsen, 1996, Jakob Nielsen's Alertbox for June 1996: Inverted Pyramids in Cyberspace Jakob Nielsen, 1997, Jakob Nielsen's Alertbox for October 1, 1997: How Users Read on the Web Jakob Nielsen, 1997, Jakob Nielsen's Alertbox for March 15, 1997: Be Succinct! (Writing for the Web) Nathan Wallace, 1999, Web Writing for Many Interests Levels, e-gineer Jim Levin, 2003, Gestalt Principles & Web Design