Page 1
April 5, 2011
Format Matters
Page 2 April 6, 2011
How presentation affects understanding
Mike Rice
Chris Patterson
Format Matters
How presentation affects understanding
Mike Rice
Chris Patterson
Page 4 April 6, 2011
What is this all about?
Why are we talking about this?
What effect does presentation have?
What about the real world?
Page 5 April 6, 2011
How did we
become
interested in
presentation?We studied the users of our customer information
We were surprised by how they changed the way our information was presented
Page 6 April 6, 2011
The Three Circles of Information Architecture
Morville (2004)
Page 7 April 6, 2011
The User Experience Honeycomb
Morville (2004)
Page 8 April 6, 2011
Ordered
attributesDescribes as a process:
1. Findability
2. Accessibility
3. Desirability
4. Usability
5. Credibility
6. Usefulness
Result in value.
Revang (2007)
Page 9 April 6, 2011
Information scent
Pirolli and Card (1999)
Page 10 April 6, 2011
A proposed goal-driven remix of the honeycomb
user
goal
gap/value
findable
accessible
usable
credible
useful
Page 11 April 6, 2011
How visuals impact understanding
There are five different functions of visuals:
1. Decoration
2. Representation
3. Organization
4. Interpretation
5. Transformation
Advice on using animations:
• Keep them simple
• Do not overuse
Dahlqvist (1999); Moyer (2010)
Page 12 April 6, 2011
Disfluency
What is it?
Diemand-Yauman (2010)
It revolves around challenging the mind.
Chesterland, Ohio high school study found disfluency to be effective.
Your company’s documents may already be disfluent!
Readability
Page 14 April 6, 2011
Field of view
Consider the medium on which your content will be delivered.
What are the differences between how the following are read?
• Newspapers
• Magazines
• Paperback books
• Internet news articles
• Conference presentations
Gillespie (2000)
Page 15 April 6, 2011
Why Whitespace?
Not having whitespace can severely impact the readability of text. You will notice how this text is veryclosely spaced (also known as leading) and is highly inadequate for a PowerPoint slide. While it isimportant to use space effectively, it is also important for the reader to be able to easily read andunderstand text on a page. After all, if the reader is unable to find their place in a body of text, why botherputting the time, effort and money into writing that text in the first place? It does not matter how good yourcontent management system is or what kind of DITA implementation you are using. Presentation doesaffect understanding. Obviously.
• It makes text more inviting to the reader
• It allows room for notes in the margins
• It makes PowerPoint slides like this one easy to read
Burnett (2005)
Page 16 April 6, 2011
Font size, line length and line spacing
They are all inter-related.
Larger fonts allow for longer lines, to a point.
Smaller fonts restrict line length, also to a point.
Caveats abound.
Tinker and Paterson (1929, 1946); Spencer and Shaw (1971)
Page 17 April 6, 2011
Line length
Printed page
Reading:
• 3 to 3.5 inches was fastest
• 7.3 inches was slowest
CRT/LCD display
Scanning:
• 8 inches, no margins is fastest but leastdesirable
• 4 inches, 1 to 1.5 inch margin is nearly as fast and highly desirable
Tinker and Paterson (1929, 1946); Youngman and Scharff (1998); Dyson and Kipping (1998)
Page 18 April 6, 2011
Contrast
• Use dark text on a light background
• High contrast inverse text can “visually bleed”, reducing legibility
• Performance is optimal when contrast exceeds 70%
• High luminance contrast between text and background is desirable (screen)
sollicitudin
sapien eget dui
accumsan
rutrum.
Pellentesque
sit amet erat in
orci
sollicitudin
sapien eget dui
accumsan
rutrum.
Pellentesque
sit amet erat in
orci
Mills, Weldon (1987); Keyes (1993); Hill (1997)
sollicitudin
sapien eget dui
accumsan
rutrum.
Pellentesque
sit amet erat in
orci
100% 50% 100% (inverse)
Page 19 April 6, 2011
Repetition
This makes each page of a document feel like it is part of a cohesive unit.
• Heading level formatting
• Headers/footers
• Margins/column widths
• Alignment
• Color
• Font
Williams (2004)
Dat
eSlide
number
Log
o
Slide title formatting
Left alignment
Font
Font size
Where is the
repetition in our
presentation?
Page 20 April 6, 2011
Alignment
Ragged right justification is preferred by readers (or is it?)
• Easier to read because readers lose their place less often
• More important when reading from a screen
• Middle to higher level readers seem to be justification agnostic
• Lower level readers are hindered by justification with shorter line lengths
Gregory and Poulton (1970); Hartley and Fraser (1975); Burnett (2005)
Page 21 April 6, 2011
Proximity
An organized document is more likely to be read and remembered.
Each column below contains the same information. Which is more appealing?
The laws of proximity:
1. Group related topics.
2. Keep it simple.
3. Do not just “put things places”.
4. If someone were to ask, “Why are the items on the page the way they are,” you should be able to give them a good answer.
The laws of proximity: Group related topics. Keep it simple. Do not just “put things places.” If someone were to ask, “Why are the items on the page the way they are,” you should be able to give them a good answer.
Williams (2004)
Page 22 April 6, 2011
Leading
• Called leading in print, line spacing in electronic media
• Ideal line spacing is 1.5 times the line height (of 8-12pt fonts)
• Required line spacing is inversely proportional to font size
• Design not just for the eye, but for the interface (touch screen)
Burnett (2005); Keyes (1993)
1.5
x
1.0
x
Hierarchy
Page 24 April 6, 2011
Limits of heading nesting
• Limited number of changes to cue heading levels
• How many can you have?
– How many are meaningful?
• What things can you change?
– At what point do the changes escape the user’s notice?
– At what point does readability suffer?
– Is it really useful to have this many levels?
– Do you have styles for all of them?
Online
• How much space do you have to represent heirarchy?
• How much are you relying on the user’s recall vs. recognition?
Page 25 April 6, 2011
Representing hierarchies on screen
Preventative Maintenance > Weekly > Cleaning > Sensors
Are you using navtitles?
Can you help provide context with short descriptions?
<task id=progexample">
<title>Publishing a DITA information set in PDF</title>
<titlealts><navtitle>Publishing in PDF</navtitle></titlealts>
<shortdesc>Publishing to PDF is commonly used for print, and
less commonly for online.</shortdesc>
<taskbody> . . . </taskbody>
</task>
Do you topicref to maps?
• Watch out for deep nesting
Page 26 April 6, 2011
Proximity and DITA
figures and legends
short descriptions
postrequisite
result
choices
Page 27 April 6, 2011
Nest legends inside figures
Page 28 April 6, 2011
Real world example
Page 29 April 6, 2011
More real world - branding
No, not that kind of branding.
Why is it important and what can I do to stop it?
Branding is the face of a company; do your best to accommodate it.
The good
Allows for consistent looking documentation across product lines.
The bad
All documentation is sometimes grouped in a “one-size fits all” mentality.
Page 30 April 6, 2011
Takeaways
• Reader preference matters
• Observe and talk to your users
• Information structure affects presentation
• Communicate your findings
Page 31 April 6, 2011
Communicate your findings
Gellevij and van der Meij (2004)
Page 32 April 6, 2011
Resources
Fogg, BJ. (2003). Prominence-interpretation theory: explaining how people assess credibility online. Proceedings of the CHI 2003 Ft. Lauderdale.
Gellevij, M., & van der Meij, H. (2004). Empirical proof for presenting screen captures in software documentation. Technical Communication, 51(2), 224-38.
Morville, P. (2004). User experience design [Web log message]. Retrieved from http://semanticstudios.com/publications/semantics/000029.php
Revang, M. (2007). Restructuring the user experience honeycomb [Web log message]. Retrieved from http://userexperienceproject.blogspot.com/2007/02/restructuring-user-experience-honeycomb.html
Youngman and Scharff (1998). Text width and margin width influences on Readability of GUIs. SWPA 1998: http://www.lieb.com/Readings/Width.pdf
Pirolli, P. & Card, S. (1999). Information Foraging.
Page 33 April 6, 2011
Resources
Diemand-Yauman, C. (2010). Fortune favors the bold (and the italicized): effects of disfluency on educational outcomes. Cognition, 118 (1), 111-115.
Williams, R. (2004). The non-designers design book: second edition. Berkeley, CA: Peachpit Press.
Dahlqvist, P. (1999). The effects of different presentation formats on learning. Informally published manuscript, Department of Computer and System Sciences, Stockholm University, Stockholm, Sweden. Retrieved from http://people.dsv.su.se/~patricd/Publications/EARLI-99.PDF
Gillespie, J. (2000, February 1). Typography. Retrieved from http://www.wpdfd.com/issues/23/typography
Burnett, R.E. (2005). Technical communication, sixth edition. Boston, MA: Thomson Wadsworth.
Moyer, D. (2010). The trouble with visual explanations: a quick look at common problems. intercom, (12), 12-16.
Page 34 April 6, 2011
Resources
Keyes, E. (1993). Typography, color, and information structure. Technical Communication, (4), 638-654.
Tinker, M.A. & Paterson, D. G. (1929). Studies of typographical factors influencing speed of reading: III. length of line. Journal of Applied Psychology, 13, 3, 205-219.
Youngman, M., & Scharff, L. (1998). Text width and margin width influences on readability of GUIs. Retrieved from http://www.laurenscharff.com/research/textmargin.html
Hill, A. (1997). Readability of websites with various foreground / background color combinations, font types and word styles. Proceedings of the Eleventh national conference on undergraduate research (pp. 742-746). http://www.laurenscharff.com/research/AHNCUR.html.
Dyson, M.C. & Kipping, G.J. (1998). The effects of line length and method of movement on patterns of reading from screen. Visible Language, 32, 150-181.
Page 35 April 6, 2011
Resources
Tinker, M.A. & Paterson, D. G. (1946). Effect of line width and leading on readability of newspaper type. Journalism Quarterly, 23, 307-309.
Tinker, M.A. & Paterson, D. G. (1931). Studies of typographical factors influencing speed of reading: V. Simultaneous variation of type size and line length. Journal of Applied Psychology, 15, 72-78.
Mills, C. and Weldon, L. (1987). Reading text from computer screens. ACM computing Surveys, 19, 4, 329-358.
Hartley, J. and Fraser, C. (1975). Some observations on the reliability of measures used in reading and typographic research. Journal of Reading Behaviour, 7, 283-296.
Gregory, M. and Poulton, E.C. (1970). Even versus uneven right-hand margins and the rate of comprehension in reading. Ergonomics, 13, 427-434.
Spencer H. and Shaw A. (1971). Letter spacing and legibility. British Printer, 84, 84-86.
Page 36 April 6, 2011
Resources
U.S. Department of Health and Human Services, (n.d.). Research-based web design and usability guidelines (0-16-076270-7). Government Printing Office. Retrieved from www.usability.gov/guidelines/Usability_guidelines.pdf
Questions?