Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 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 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 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 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 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 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/