The Resonant Interface HCI Foundations for Interaction ... Text in Interaction Design •Commentary...

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

The Resonant InterfaceHCI Foundations for Interaction Design

First Edition

by Steven Heim

Chapter 12:Text

1-2Copyright © 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


Chapter 12 Text

• Human Issues Concerning Text– The Reading Process– The Reading Purpose– Paper versus Screens


Human Issues Concerning Text

• The Reading Process– Saccades: Quick, jerky movements– Fixations: Intermittent pauses on areas of interest

• Visual and cognitive processing occurs duringfixation but not during saccades.– If text is difficult to comprehend, if it includes long

or unfamiliar words, fixations increase in duration



• The Reading Process

Experienced readers recognize word shapes



• The Reading Process

We read extended text passages more quickly inlowercase than uppercase

• Lowercase presentation is more common– Lowercase words have more distinctive shapes



• The Reading Purpose– Continuous process (novel)– Scanning– Reading from screens or paper



• Paper versus Screens

Paper is more flexible than electronic media

We often rely on our spatial memory when wesearch for information

Place holders



• Paper versus Screens

The ability to annotate aids comprehension


Chapter 12 Text

• Using Text in Interaction Design– Commentary/Instrumental– Legibility– Readability– Physical Factors


Using Text in Interaction Design

• Commentary – Text that informs– The most common form is help text

• Contextual help provides immediate assistance to userswithout requiring them to leave the context in which theyare working, such as pop-up menus.

• Procedural help provides the steps necessary forcarrying out a task.

• Reference help serves as an online reference book.• Conceptual help provides background information,

feature overviews, or processes.



• Instrumental – Text that does work (Ramey, 1989)

– Controls: the control’s function and its label areviewed as one entity

• Buttons• Checkboxes• Radio Buttons• Icons• Hyperlinks



• Hypertext

Hypertext links must give unambiguous indications ofthe target destination

• Krug - Don’t Make Me Think (2006) - suggeststhat what is important is not so much thenumber of links that a visitor must click butrather the quality of the links



• Legibility

Legibility is an essential first step in the reading process

• We must take these environmental conditions intoconsideration when we are making determinationsabout font size and foreground/background contrast.

Design for the least favorable conditions



• Legibility– We must also consider age and possible vision

impairments

Our capacity to perceive details decreases with age



• 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



• Readability

Use the terms people will see in the interface

Technical terminology should be avoided

Word-for-word translations can create confusion



• Readability – Ambiguous text

Avoid noun stacks; they are ambiguous

• Linguistic “Escher effects”(Ramey,1989)– Input Mode– Search Results



• Physical Factors– Font size– Line length– Margin width– Vertical line spacing– Alignment– Contrast– Scrolling versus paging



• 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



• Font size– General benchmark formula for font size, given

normal vision and optimal conditions

Font Size = 2d(tan(/2)) X DPI



• Line length

Line length affects reading performance but not comprehension

Lines of greater length are read more quickly

People prefer medium line lengths



• Margin width– Shorter lines—4 inches—with large margins increased

reading performance (Youngman and Sharff, 1998)

– Maximal use of white space



• 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 theamount of visible information per screen



• Alignment

For optimal reading of lengthy texts, right and center alignmentsshould be avoided

Text should also be considered a graphical component of a page



• Contrast

Contrast sensitivity decreases significantly with age



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



• Scrolling versus paging

Consistent link location.

Paging

Scrolling



• Scrolling versus paging

Scrolling facilitates maintenance and printing

The choice of paging versus scrolling depends on taskand layout


Chapter 12 Text

• Technical Issues Concerning Text– Components of Digital Text– Web Text– Globalization/Localization– Dynamic Text Presentation


Technical Issues Concerning Text

• Components of Digital Text– Character Set = Character Repertoire + Character

Codes + Encoding Scheme



• 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



• UnicodeThe Unicode Consortium is a non-profit organizationoriginally founded to develop, extend and promote use of theUnicode Standard, which specifies the representation of textin modern software products and standards.

The Unicode Standard is a character coding systemdesigned to support the worldwide interchange, processing,and display of the written texts of the diverse languages andtechnical disciplines of the modern world. In addition, itsupports classical and historical texts of many writtenlanguages. (Unicode Consortium)



• FontsSerif Sans serif Cursive

Cursive text requires high-resolution screens

– Variable-width font ioioioioio– Fixed-width font ioioioioio



• Fonts



• Web Text– Structure– Presentation– Web Fonts– Hypertext



• Web Text – Structure– HTML elements are used to create the structure of a web

page

<title>Company Name—Area of Site—Specific Page</title>

<h1> Topic #1</h1><h2>Sub-topic #1</h2><h2>Sub-topic #2</h2>

<h3>Sub/Sub-topic #1</h3>

<h1>Topic #2</h1><h2>Sub-topic #1</h2><h2>Sub-topic #2</h2>



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



• Web Fonts– We can use the CSS font-family property to specify a

particular font – it must reside on the user’s computer– Fonts like Times New Roman and Arial are the most

prevalent on the Internet due to their large installed user base– 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 theWeb



• Hypertext– Hyperlinks have three states

• Normal – blue• Active – red• Visited – purple

Hypertext links at Useit.com



• 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 */



Hover and active links on the Amazon.com Web site

Side navigation links



Hypertext links at the W3.org Web site

Visited link

Nonfunctional hyperlink



• Globalization/Localization– Direction– Alignment– Space– Collating sequences– Delimiters– Diacriticals



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 asthe original text

Avoid puns; they do not translate well

Abbreviations and acronyms must be used carefully



• Dynamic Text Presentation– Times Square Scrolling (TSS)– Rapid Serial Visual Presentation (RSVP)

Dynamic text might be suitable for small displays

The Resonant Interface HCI Foundations for Interaction ... Text in Interaction Design •Commentary...

Documents

Transcript of The Resonant Interface HCI Foundations for Interaction ... Text in Interaction Design •Commentary...