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

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 1

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 2

Elements of Web page scannability Why? Apply scannability and web page usability will increase by over 100% - Jakob Nielsen Gestalt Principles The brain and the eye are attracted by… • strong contrast The author can influence the • distinctive patterns way a reader reads the text • spatial arrangement 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 3

Typography and Space Typography and space work together to make a webpage more scannable What factors affect legibility ? • Typeface • Typesize and x-height Text density • Serif versus Sans Serif • Leading • Line length • Slant of typeface • Type weight 2 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 4

Hyperlinking and Navigation How you use hyperlinks in the page affect scannability • 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 Implementation of scannability • Use style sheets. – HTML does not support leading – Gives the author more control • Use legible fonts – Verdana – Georgia 5 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. Patrick J. Lynch and Sarah Horton, 2002, Web Style Guide , 2 nd edition, Yale University, 2. 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/ 6