Format Matters - How presentation affects understanding

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


What is this all about?

Why are we talking about this?

What effect does presentation have?

What about the real world?


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


The Three Circles of Information Architecture

Morville (2004)


The User Experience Honeycomb

Morville (2004)


Ordered

attributesDescribes as a process:

1. Findability

2. Accessibility

3. Desirability

4. Usability

5. Credibility

6. Usefulness

Result in value.

Revang (2007)


Information scent

Pirolli and Card (1999)


A proposed goal-driven remix of the honeycomb

user

goal

gap/value

findable

accessible

usable

credible

useful


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)


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


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)


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)


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)


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)


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)


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?


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)


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)


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


Limits of heading nesting

Print

• 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?


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


Proximity and DITA

figures and legends

short descriptions

postrequisite

result

choices


Nest legends inside figures


Real world example


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.


Takeaways

• Reader preference matters

• Observe and talk to your users

• Information structure affects presentation

• Communicate your findings


Communicate your findings

Gellevij and van der Meij (2004)


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.


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.


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.


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.


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?

Documents

Format Matters - How presentation affects understanding