Information Resource Design

1. Information Resource Design Check out this webpage: http://www.idi.ntnu.no/~oleanda/scannability/ Read the summary, compare it with the non-scannable paragraph ”How to make a web page scannable”

2. 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

3. Integrated view of enterprise content designand management Figure by Sue Fowell, 2003

4. Integrated view of enterprise content designand management Scannable web pages Figure by Sue Fowell, 2003

5. Elements of Web page scannability Why?Apply scannability and web page usability will increase by over 100% - Jakob Nielsen

6. 1 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 • 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

7. 2 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 Typography and space work together to make a webpage more scannable

8. 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 Editorial Style

9. 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

10. 5 Implementation of scannability • Use style sheets. • HTML does not support leading • Gives the author more control • Use legible fonts • Verdana • Georgia

11. 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

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