Transcript Presentation slides, MS PowerPoint

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/