Chapter 12 Text The Resonant Interface HCI Foundations

Chapter 12: Text The Resonant Interface HCI Foundations for Interaction Design First Edition by Steven Heim Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

Chapter 12 Text • Human Issues Concerning Text • Using Text in Interaction Design • Technical Issues Concerning Text Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -2

Chapter 12 Text • Human Issues Concerning Text – The Reading Process – The Reading Purpose – Paper versus Screens • Importance – Most Common – Last Resort – Goal: Make Text as Readable as Possible Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -3

Human Issues Concerning Text • The Reading Process – Saccades: Quick, jerky movements – Fixations: Intermittent pauses on areas of interest • Visual and cognitive processing occurs during fixation but not during saccades. – If text is difficult to comprehend, if it includes long or unfamiliar words, fixations increase in duration – Short: legibility; Long: comprehension Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -4

Human Issues Concerning Text • The Reading Process Experienced readers recognize word shapes not as an ordered sequence of letters. Capital letters for (1) text entry (2) distant text. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -5

Human Issues Concerning Text Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -6

Human Issues Concerning Text Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -7

Human Issues Concerning Text • The Reading Process We read extended text passages more quickly in lowercase than uppercase • Lowercase presentation is more common – Lowercase words have more distinctive shapes Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -8

Human Issues Concerning Text • The Reading Purpose – Continuous process (novel) – Scanning – Reading from screens or paper Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -9

Human Issues Concerning Text • Paper versus Screens Paper is more flexible than electronic media We often rely on our spatial memory when we search for information Place holders Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -10

Human Issues Concerning Text Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -11

Human Issues Concerning Text • Paper versus Screens The ability to annotate aids comprehension Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -12

Kindle Highlight Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -13

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -14

Chapter 12 Text • Using Text in Interaction Design – Commentary/Instrumental – Legibility – Readability – Physical Factors Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -15

Using Text in Interaction Design • Commentary – Text that informs – The most common form is help text • Contextual help provides immediate assistance to users without requiring them to leave the context in which they are working, such as pop-up menus. • Procedural help provides the steps necessary for carrying out a task. • Reference help serves as an online reference book. • Conceptual help provides background information, feature overviews, or processes. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -16

Using Text in Interaction Design • Instrumental – Text that does work (Ramey, 1989) – Controls: the control’s function and its label are viewed as one entity • • • Buttons Checkboxes Radio Buttons Icons Hyperlinks Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -17

Using Text in Interaction Design • Hypertext links must give unambiguous indications of the target destination • Krug - Don’t Make Me Think (2006) - suggests that what is important is not so much the number of links that a visitor must click but rather the quality of the links Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -18

Using Text in Interaction Design • Legibility is an essential first step in the reading process • We must take these environmental conditions into consideration when we are making determinations about font size and foreground/background contrast. Design for the least favorable conditions Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -19

Using Text in Interaction Design • Legibility – We must also consider age and possible vision impairments Our capacity to perceive details decreases with age Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -20

Using Text in Interaction Design • Readability – Comprehension is affected by: • • • Line length Line spacing Formatting Margin width Scrolling It is also affected by grammatical issues, such as semantics and syntax Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -21

Using Text in Interaction Design • Readability Use the terms people will see in the interface Technical terminology should be avoided Word-for-word translations can create confusion Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -22

Using Text in Interaction Design • Readability – Ambiguous text Avoid noun stacks; they are ambiguous • Linguistic “Escher effects” (Ramey, 1989) – Input Mode – Search Results Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -23

Using Text in Interaction Design • Physical Factors – Font size – Line length – Margin width – Vertical line spacing – Alignment – Contrast – Scrolling versus paging Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -24

Using Text in Interaction Design • Font size – Factors that affect font size: (Horton, 1994) • Reading Distance—Greater distances require larger text. • Screen Resolution—Smaller text requires greater resolution to keep the characters clear and legible. • Text/Background Contrast—Negative contrast is optimal (black type on a white background). • Visual Acuity of User—Not all users have 20/20 vision. • Type of Reading—Text can be scanned, read word by word, or read character by character Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -25

Using Text in Interaction Design • Font size – General benchmark formula for font size, given normal vision and optimal conditions Font Size = 2 d(tan(/2)) X DPI Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -26

Using Text in Interaction Design • Line length affects reading performance but not comprehension Lines of greater length are read more quickly People prefer medium line lengths Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -27

Using Text in Interaction Design • Margin width – Shorter lines— 4 inches—with large margins increased reading performance (Youngman and Sharff, 1998) – Maximal use of white space Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -28

Using Text in Interaction Design • Vertical line spacing – The spacing between lines of text (single spacing, double spacing, etc. ) is called leading – Double spacing has been shown to improve reading speed (Kolers, Duchnicky, & Ferguson, 1981) • It might necessitate a smaller font size to increase the amount of visible information per screen Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -29

Using Text in Interaction Design • Alignment For optimal reading of lengthy texts, right and center alignments should be avoided Text should also be considered a graphical component of a page Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -30

Using Text in Interaction Design • Contrast sensitivity decreases significantly with age Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -31

Using Text in Interaction Design • Color Contrast – Because black and white have the highest contrast the addition of any color will reduce the contrast Luminance contrast is more significant than color contrast Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -32

Using Text in Interaction Design • Scrolling versus paging Paging Scrolling Consistent link location. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -33

Using Text in Interaction Design • Scrolling versus paging Scrolling facilitates maintenance and printing The choice of paging versus scrolling depends on task and layout Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -34

Chapter 12 Text • Technical Issues Concerning Text – Components of Digital Text – Web Text – Globalization/Localization – Dynamic Text Presentation Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -35

Technical Issues Concerning Text • Components of Digital Text – Character Set = Character Repertoire + Character Codes + Encoding Scheme – ½ Comes from the individual glyphs‘ 1’, ‘/’, and ‘ 2’ – ASCII Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -36

Technical Issues Concerning Text • ASCII – Basic ASCII uses 7 -bit encoding, which allows it to represent 128 characters. • Including alphanumeric and some nonprinting characters such as line feed and carriage return – ASCII was extended to 8 bits, allowing for 256 characters Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -37

Technical Issues Concerning Text • Unicode The Unicode Consortium is a non-profit organization originally founded to develop, extend and promote use of the Unicode Standard, which specifies the representation of text in modern software products and standards. The Unicode Standard is a character coding system designed to support the worldwide interchange, processing, and display of the written texts of the diverse languages and technical disciplines of the modern world. In addition, it supports classical and historical texts of many written languages. (Unicode Consortium) Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -38

Technical Issues Concerning Text • Unicode – 8 -bit – 16 -bit – 32 -bit • Most web pages use Unicode • Still a work in progress Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -39

Technical Issues Concerning Text • Fonts Serif Sans serif Cursive text requires high-resolution screens – Variable-width font ioioio – Fixed-width font ioioio Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -40

Technical Issues Concerning Text • Fonts Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -41

Technical Issues Concerning Text • Web Text – Structure – Presentation – Web Fonts – Hypertext Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -42

Technical Issues Concerning Text • Web Text – Structure – HTML elements are used to create the structure of a web page <title>Company Name—Area of Site—Specific Page</title> <h 1> Topic #1</h 1> <h 2>Sub-topic #1</h 2> <h 2>Sub-topic #2</h 2> <h 3>Sub/Sub-topic #1</h 3> <h 1>Topic #2</h 1> <h 2>Sub-topic #1</h 2> <h 2>Sub-topic #2</h 2> Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -43

Technical Issues Concerning Text • Web Text – Presentation – Cascading Style Sheets (CSS) are used to create the presentational aspects of a web page • Some markup elements have inherent presentational qualities. • Styles must be appropriate for the markup elements to which they are assigned. • Styles must be derived from and serve to clarify the content. • Styles should not compete with the content. • Styles should not conflict with user’s expectations. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -44

Technical Issues Concerning Text • Web Fonts – We can use the CSS font-family property to specify a particular font – it must reside on the user’s computer – Times New Roman and Arial are the most prevalent – At low point sizes, serif fonts suffer reductions in legibility – Georgia, Verdana, and Trebuchet maintain legibility at small sizes and have been designed to facilitate reading on the Web Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -45

Technical Issues Concerning Text • Hypertext – Hyperlinks have three states • Normal – blue • Active – red • Visited – purple Hypertext links at Useit. com Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -46

Technical Issues Concerning Text • Hypertext Hyperlinks must be obvious • CSS can be used to change the color of hyperlinks – There are four possible states a: link { color: red } /* unvisited links */ a: visited { color: blue } /* visited links */ a: hover { color: yellow } /* user hovers */ a: active { color: lime } /* active links */ Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -47

Technical Issues Concerning Text Hover and active links on the Amazon. com Web site Side navigation links Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -48

Technical Issues Concerning Text Hypertext links at the W 3. org Web site Nonfunctional hyperlink Visited link Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -49

Technical Issues Concerning Text • Globalization/Localization – Direction (Character and line sequences) – Alignment and Space (Translation) – Collating sequences (Difference in alphabets) – Delimiters (Tokenization and Segmentation) – Diacriticals (Change meaning) Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -50

Technical Issues Concerning Text Directionality is an issue not only for text presentation, but also for the design of the entire interface A translation will not use the same amount of space as the original text Avoid puns; they do not translate well Abbreviations and acronyms must be used carefully Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -51

Technical Issues Concerning Text • Dynamic Text Presentation – Times Square Scrolling (TSS) – Rapid Serial Visual Presentation (RSVP) – http: //www. youtube. com/watch? v=0 t 9 Edrlk 7 gc Dynamic text might be suitable for small displays Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 1 -52