Enhancing Text User Engagement in Interactive Design

1. Text Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca

2. Chapter 12 Text • Human Issues Concerning Text • Using Text in Interaction Design • Technical Issues Concerning Text Dewan Tanvir Ahmed

3. 12.1 Human Issues Concerning Text • Human Issues Concerning Text • The Reading Process • The Reading Purpose • Paper versus Screens Dewan Tanvir Ahmed

4. Human Issues Concerning Text • Understand the physical aspects of reading • Help – make proper determination about text presentation • The Reading Process • Saccades: Quick, jerky movements • Fixations: Intermittent pauses on areas of interest Dewan Tanvir Ahmed

5. Human Issues Concerning Text • Saccades: Quick, jerky movements • Move the eye in forward direction 8 to 10 letters • At the end of a line – move opposite direction … next line • Carriage return, linefeed operation • A backward saccade can also occur - Regression • 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 • We can calculate how long it takes to read a passage. Dewan Tanvir Ahmed

6. Human Issues Concerning Text • The Reading Process • Two step process • Distinguish letters or word shape • Associate meaning Experienced readers recognize word shapes • Studies – • We can recognize words as quickly as we recognize single letters Dewan Tanvir Ahmed

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 Dewan Tanvir Ahmed

8. Human Issues Concerning Text • The Reading Process We read extended text passages more quickly in lowercase than uppercase Dewan Tanvir Ahmed

9. Human Issues Concerning Text • The Reading Process • The shpaes of the fsrit and lsatlrettes might be more sginifinact that the shpaes of the itenralletetrs • The shapes of the first and last letters might be more significant that the shapes of the internal letters Dewan Tanvir Ahmed

10. Human Issues Concerning Text • The Reading Purpose • It is not a singular task • Continuous process (novel) • We immerse ourselves in the flow of the novel • Scanning • Reading from screens or papers – are not same Dewan Tanvir Ahmed

11. Human Issues Concerning Text • Paper versus Screens • Benefits of digital document • Easy searching of keywords • Easy editing • No physical storage requirement • Easier to dissemination • Benefits of paper document • More portable • No electricity requirement • Issues • Require appropriate environment with adequate space and surface • Still heavier than paper Dewan Tanvir Ahmed

12. 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 Dewan Tanvir Ahmed

13. Human Issues Concerning Text • Paper versus Screens • Flexibility – paper documents are easy to manipulate physically! • Annotation The ability to annotate aids comprehension Dewan Tanvir Ahmed

14. 12.2 Using Text in Interaction Design • Different kinds of text … in computer interface • Menu titles • Hyperlinks • Tool tips • Each text has different purpose • Two types of text – what it informs and what is does • Commentary text • Instrumental text Dewan Tanvir Ahmed

15. 12.2 Using Text in Interaction Design • Using Text in Interaction Design • Commentary/Instrumental • Legibility • Readability • Physical Factors Dewan Tanvir Ahmed

16. 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. Dewan Tanvir Ahmed

17. Using Text in Interaction Design • Instrumental – Text that does work (Ramey, 1989) • Example • Links and menu options perform actions and • alter system states • Controls: the control’s function and its label are viewed as one entity • Buttons • Checkboxes • Radio Buttons • Icons • Hyperlinks Dewan Tanvir Ahmed

18. Using Text in Interaction Design • Hypertext (HTML, ) • Links to other resources • Other options links are possible • Linked image • Image maps 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 • Example: • Two links but ambiguous – it will take longer and the visitor will be more prone to errors than it will make the four clicks in an interface with clear and easy to understand hyperlink labels Dewan Tanvir Ahmed

19. Using Text in Interaction Design • Legibility • No matter what kind of text we have in Interface - Prime concern is legibility – • We can read it – distinguish letters and word shapes • Characters must be • Clear, distinct, and large enough to see • Contain enough contrast • We must take these environmental conditions into consideration when we are making determinations about font size and foreground/background contrast. Dewan Tanvir Ahmed

20. Using Text in Interaction Design • Legibility Legibility is an essential first step in the reading process • It describes the process of distinguishing the physical aspects of reading. Design for the least favorable conditions • Consider • Indoor computing env. • Obscure industrial houses, dimly lit factories • Open-air env. • Then choose • Font size • Foreground/background Dewan Tanvir Ahmed

21. Using Text in Interaction Design • Legibility • We must also consider age and possible vision impairments Our capacity to perceive details decreases with age Dewan Tanvir Ahmed

22. Using Text in Interaction Design • Readability – understanding what we are reading • Comprehension is affected by: • Line length • Line spacing • Formatting • Margin width • Scrolling • It is also affected by grammatical issues, such as semantics and syntax Dewan Tanvir Ahmed

23. Using Text in Interaction Design • Readability • Sometimes we use metaphorically or symbolically to actions in the real world • Launch programs • Put the screen “to sleep” • New user will not institutively understand the meaning • Avoid this type of terminology • Jargons …can quickly become outdated • Zip files .. • Google that for me Dewan Tanvir Ahmed

24. Using Text in Interaction Design • Readability Use the terms people will see in the interface • Example – • if interface uses ‘exit’ • Don’t use similar term in the help text like close instead Dewan Tanvir Ahmed

25. Using Text in Interaction Design • Readability Technical terminology should be avoided Word-for-word translations can create confusion • Scrolling and clicking interface object … translation in other language? • Translation can be humorous • Mouse input --- small furry rodent Dewan Tanvir Ahmed

26. Using Text in Interaction Design • Readability – Ambiguous text Avoid noun stacks; they are ambiguous • “Escher effects” Ramey,1989 • Who used perceptual ambiguities in 2D deceptions of 3D scenes to create physically impossible objects Dewan Tanvir Ahmed

27. Using Text in Interaction Design • Readability – Ambiguous text Avoid noun stacks; they are ambiguous • Linguistic “Escher effects” can also be created by context. (Ramey,1989) • Input Mode • ‘input’ as a verb (system) … tells which mode you want • Indicating a system mode • Search Results • Results of a search • Possibly searching the results of a previous search Dewan Tanvir Ahmed

28. Using Text in Interaction Design • Physical Factors • Font size • Line length • Margin width • Vertical line spacing • Alignment • Contrast • Scrolling versus paging Dewan Tanvir Ahmed

29. 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. (5 minutes of arc) • Type of Reading—Text can be scanned, read word by word, or read character by character Dewan Tanvir Ahmed

30. Using Text in Interaction Design • Font size • General benchmarkformula for font size, given normal vision and optimal conditions X: character height d: distance Theta: visual angle Font Size Dewan Tanvir Ahmed

31. Using Text in Interaction Design • Font size Font Size Screen Resolution = 75 dpi Dewan Tanvir Ahmed

32. Using Text in Interaction Design • Line length Line length affects reading performance but not comprehension Lines of greater length are read more quickly People prefer medium line lengths Dewan Tanvir Ahmed

33. 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 Dewan Tanvir Ahmed

34. 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 Dewan Tanvir Ahmed

35. 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 Dewan Tanvir Ahmed

36. Using Text in Interaction Design • Alignment Dewan Tanvir Ahmed

37. Using Text in Interaction Design • Alignment Dewan Tanvir Ahmed

38. Using Text in Interaction Design • Contrast Contrast sensitivity decreases significantly with age Foreground shades Background shades Foreground and Background shades Dewan Tanvir Ahmed

39. 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 Dewan Tanvir Ahmed

40. Using Text in Interaction Design • Scrolling versus paging Scrolling Dewan Tanvir Ahmed

41. Using Text in Interaction Design • Scrolling versus paging Paging People prefer paging over scrolling- why? Scrolling makes it difficult for users to grasp the structure of the document, reading stops while they are scrolling, and they can only approximate how far to scroll Slower than paging … Dewan Tanvir Ahmed

42. Using Text in Interaction Design • Scrolling versus paging Consistent link location. Dewan Tanvir Ahmed

43. Using Text in Interaction Design • Scrolling versus paging Scrolling facilitates maintenance and printing The choice of paging versus scrolling depends on task and layout Dewan Tanvir Ahmed

44. 12.3 Technical Issues Concerning Text • Technical Issues Concerning Text • Components of Digital Text • Web Text • Globalization/Localization • Dynamic Text Presentation Dewan Tanvir Ahmed

45. Technical Issues Concerning Text • Components of Digital Text • A character is basically a concept • ‘A’ – it is only one form the character can take but it can also be represented by • a • A • A • a • The variations are not random and limitless. • It has various required features, at certain point, the image will no longer be recognized as the letter it is meant to represent Dewan Tanvir Ahmed

46. Technical Issues Concerning Text • Components of Digital Text • Sometimes there are subtle differences • O and Q • I and 1 • Sometimes the differences are quite large • I and W Dewan Tanvir Ahmed

47. Technical Issues Concerning Text • Components of Digital Text • A glyph is the physical representation of a character • An individual mark on a written medium that contributes to the meaning of what is written. • There may not be one to one relation between characters and glyph • a ligature occurs where two or more graphemes are joined as a single glyph • Æ is a ligature – a combination of a and e glyphs Dewan Tanvir Ahmed

48. Technical Issues Concerning Text • Components of Digital Text • Character Set = Character Repertoire + Character Codes + Encoding Scheme Dewan Tanvir Ahmed

49. 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 Dewan Tanvir Ahmed

50. 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) Dewan Tanvir Ahmed