Kortum P. (ed.) HCI Beyond the GUI. Design for Haptic, Speech, Olfactory, and Other Nontraditional Interfaces

Подождите немного. Документ загружается.

growing market. The Apple iPhone is a good example of a hybrid device. It con-

tains the functionality of a phone, an iPod, and a PDA in a si ngle small p ackage.

The iPhone employs a large multitouch screen interface, WiFi and cellular

connectivity, and a built-in hard drive. The iPhone even has a gyroscope that

rotates the screen based on which direction the phone is being held. Additionally,

like a small PC, external programs can be added to the iPhone to expand its

functionality.

10.3.9 Implications of the Interface for Accessibility

While small screens tend to have poor accessibility themselves (due to the fact

that designers look to make things small in order to display as much information

as possible on the screen), they can be used to aid accessibility to other pro-

ducts. Two examples are the small screens employed in Teletypewriters (TTYs)

(Figure 10.11) and the use of the bottom of the television screen for closed cap-

tioning. The use of small screens in these examples aids those who have difficulty

hearing the telephone or television audio by providing alternative modalities of

feedback.

10.4

HUMAN FACTORS DESIGN OF THE INTERFACE

Before beginning a design, it is important to establish guiding principles that will

be used to focus the design in a direction that will ultimately yield a successful

product. There are many sources for guiding principles. Guiding principles can

FIGURE

10.11

Example TTYs.

Left:

Uniphone 1140 TTY.

Right:

Compact/C cellular telephone TTY.

Source:

From Enablemart.com, 2007.

10 Small-Screen Interfaces

322

be style guide–like in nature (i.e., all text should be in the 8-point Arial font

because research has determined that this size is readable at the d istance

the device will be used), or they can be interaction guideline–like in nature

(i.e., menu structures should favor depth, not breadth; or the user interface

should make primary functions easy and secondary functions should be

removed). A complete set of guiding principles should be a combination of

both.

This section, together with Section 10.6, will provide information to help the

designer develo p the principles that gui de small-screen interface design. This

will be accomplished by presenti ng important information every practitioner

should know about small-screen design. This section will focus largely on the

scholarlyworkintheareaofsmall-screen interface design, covering topics such

as character size, contrast, and font to enable readability on small screens, and

on organizational structures for accessing the availabl e functionality. It will also

cover considerations for reading and comprehension on small displays, and

include a discussion on the adaptation of common GUI elements for small

screens. Section 10.6 will focus on providing guidelines for creating successf ul

user interface designs on small screens. Together, this information can be used

to develop the guiding princip les that drive the design of the small-screen

interface.

10.4.1 Information Gathering

One of the first steps in small-screen design is to determine the characteristics

of the screen itself. To define those characteristics, it is wise to first collect the

background information needed to make an informed decision. This includes

collecting details about the following, which is adapted in part from Muto and

Maddox (in press).

User characteristics:

Information about users, such as their visual acuity, color

deficiencies, and anthropometric characteristics (particularly information relevant

to eye position) should be collected. These characteristics will be a source of

requirements used to define screen characteristics. A practical way to collect this

information is to note how users differ from the general population and use

published measurements of the general population for instances in which there

are no differences.

Position(s) of display:

Information about possible positions and locations of the

display.

Position(s) of eye:

Information about the user’s eye positions relative to the

display is very important. Knowledge of the farthest distance from the display

that should be accommodated in the design is very important for computing

10.4 Human Factors Design of the Interface

323

the appropriate size of characters and objects presented on the display.

Knowledge of the widest angle of view that should be accommodated in the

design is also valuable for ensuring the proper choice of display technology.

Lighting and environmental conditions:

Information about lighting in the expected

environment is useful. If a range of environments is expected, identify the

extremes and ensure that the display properties are satisfactory in those

extremes.

Type of information to be displayed:

The type of information to be displayed should

drive the characteristics of the display, such as resolution, size, and color range.

For example, if fine detail needs to be displayed, a screen with high resolution

will be required. But if purely alphanumeric characters need to be displayed, a

low-cost segmented display may suffice.

10.4.2 Information Format

For small-screen interfaces, human factors designers face the challenge of dis-

playing all the information they want to present, while making sure that what

they present is not too small to be seen by the user. As a result, they often ask

questions about the minimum size of objects displayed on the screen, particularly

text.

As described earlier, the minimum size of any object displayed on a screen is

directly dependent on the visual angle, contrast, and luminance. The impact these

have on determining the size of text on small-screen displays is discussed in the

following subsections. Note that viewing distance is a key component in many

of the size calculations demonstrated in this section. The viewing distance used

should be the maximum distance utilized in a typical installation. Specifying a typ-

ical installation is important because devices can be placed in locations not antici-

pated by designers or in locations that may not be optimal. Nevertheless, these

locations need to be accounted for when specifying the maximum distance in

the following calculations.

Visual Angle

Many of the recommendations for minimum size of an object are based on

the angle that the object subten ds at the eye, measured in minutes of arc.

The formula for computing the visual angle, in minutes of arc, is shown in t his

equation:

Visual Angle

ðminÞ¼ arctan



 60 ð10:1Þ

where

is the size of the object measured perpendicular to the line of sight, and

is the distance from the eye to the object (Figure 10.12).

10 Small-Screen Interfaces

324

For angles less than 600 minutes, the following simpler form of the previous

equation can be used (Grether & Baker, 1972):

Visual Angle

ðminÞ¼

ð573Þð60Þ

ð10:2Þ

The 57.3 and 60 in the formula are constants for angles less than 600 minutes.

Solving for

, Equation 10.2 can be rearranged as follows:

Visual Angle

Þð

ð57:3Þð60Þ

ð10:3Þ

, or character height, is a function of visual angle and distance. This formula will

enable the designer to determine the object size when the distance from the eye to

the object and the visual angle are known. For text, however, a conversion of this

object size to font size measured in points is desirable. The following formula

makes this conversion:

0:0139

ð10:4Þ

where

is the font size in points and

is the size of the object measured perpen-

dicular to the line of sight in inches.

Viewing Distance

Viewing distances can vary greatly, but the minimum viewing distance should be

greater than 12 inches. It can be assumed that most office workers have a cor-

rected, or uncorrected, visual ability for comfortable reading at 12 to 16 inches

(ANSI/HFS 100–1988, 1988).

Visual angle

FIGURE

10.12

Computing the visual angle of an object subtended at the eye.

Relationship between visual angle, size of the object, and distance from the

object to the eye.

10.4 Human Factors Design of the Interface

325

Character Height

Text is one of the most important object types displayed on a screen, and the size

of that text affects the identification of characters and the readability of words.

The minimum character height should be 16 minutes of arc to support the rapid

identification of characters, and preferably 22 to 30 minutes of arc at the maxi-

mum viewing distance. For characters in which speed of recognition is not impor-

tant (such as footnotes, superscripts, or subscripts), the character height should be

at least 10 arc minutes (BSR/HFES 100, 2006).

Character heights of 20 to 22 arc minutes are preferred for readability, while

the threshold for readability is 16 to 18 arc minutes. Large character heights, more

than 24 arc minutes, may inhibit readability by reducing the number of characters

that may be viewed per fixation (ANSI/HFS 100-1988, 1988).

For discrimination of the color of an alphanumeric string, 20 arc minutes are

needed, and for discrimination of the color of a single character or symbol, 30 arc

minutes are required (BSR/HFES 100, 2006).

In many situations, the designer has determined the viewing distance and,

from the recommended visual angles for character height just presented, the

designer can choose a preferred visual angle. With these two pieces of informa-

tion, the desired character height and the resultant font size can be calculated with

Equations 10.3 and 10.4, respectively. Table 10.2 shows character heights and font

sizes for a sample of visual angles and viewing distances.

Character Width-to-Height Ratio

Based on the uppercase letter

without serifs (the small lines extending from

the main strokes of a letter), the width-to-height ratio should be between 0.5:1

and 1:1. For optimal legibility and readability, it should be between 0.6:1 and

0.9:1 (BSR/HFES 100, 2006).

Stroke Width

Characters are made up of lines, called strokes. The stroke width of characters

should be from

of the maximal character height (BSR/HFES 100, 2006).

Spacing between Characters

The spacing between characters without serifs should be at least equal to the

stroke width, and preferably 25 percent to 60 percent of the width of the upper-

case letter

. The spacing between characters with serifs should be at least 1 pixel

(BSR/HFES 100, 2006).

Spacing between Lines

The space between lines of text, including diacritics, should be at least 1 pixel and

preferably at least 15 percent of the maximal character height. For users with par-

tial vision, use larger spacing, or 25 percent to 30 percent of the character height

(BSR/HFES 100, 2006).

10 Small-Screen Interfaces

326

Spacing between Words

The spacing between words should exceed the spacing between characters, and

preferably be at least half the width of an uppercase letter

without serifs

(BSR/HFES 100, 2006).

Luminance

In the case of light-emitting visual displays, luminance is a measure of the int en-

sity of the light emitted from the display. It is an objective measurement of what

most people think of as “brightness,” and is usually measured as candelas per

square meter (cd/m

). The display should be capable of producing a luminance

of at least 35 cd/m

, and preferably, 100 cd/m

.Usersoftenpreferahigh

luminance (>100 cd/m

), as readi ng speed and accuracy increase with increas-

ing luminance, and legibility decreases when luminance falls below 35 cd/m

(BSR/HFES 100, 2006).

Luminance Contrast

Two of the most important components that influence recognition are object

size and contrast. For contrast, the display should exhibit a minimum contrast

TABLE 10.2 Character Height and Font Size as Function of Viewing Distance and Visual Angle

Viewing Distance

(inches)

Visual Angle

(minutes)

Character

Height

(inches)

Approximate Font

Size

(points)

16 16 0.0745 5

18 0.0838 6

20 0.0931 7

22 0.1024 7

24 0.1117 8

24 16 0.1117 8

18 0.1257 9

20 0.1396 10

22 0.1536 11

24 0.1675 12

36 16 0.1675 12

18 0.1885 14

20 0.2094 15

22 0.2304 17

24 0.2513 18

Calculated with Equation 10.3.

Calculated with Equation 10.4.

10.4 Human Factors Design of the Interface

327

ratio of 3 to 1 under all illumination conditions (BSR/HFES 100, 2006). A lumi-

nance contrast of 7 to 1 is preferred (ANSI/HFES 100-1988, 1988). Note that

reflections of external light sources from the display reduce contrast and

therefore legibility, so it is important to mea sure contrast under the proper

environmental conditions.

Font

The determination of a fo nt should take i nto consideration the available pixels to

display a character. BSR/HFES 100 (2006) recommends a minimum pixel height

of 9 pixels and a minimum pixel width of 7 pixels for Latin alphanumeric char-

acters used in tasks requiring continuous reading or identification of individual

characters (Figure 10.13). For purely uppercase letters and numerals, charact ers

should be 7 pixels high and 5 pixels wide, while superscripts, subscripts, and the

numerals in fractions should be at least 5 pixels high and 4 pixels wide. BSR/

HFES 100 (2006) also states that the minimum h eight should be increased by

2 pixels if diacritic marks are used.

However, many fonts are designed for printed materials, and the legibility of

these fonts suffers when font size falls below 14 pixels in height because these

typefaces cannot be displayed fully on a pixel grid smaller than this size (Zwick

et al., 2005). The typeface will otherwise appear jagged. As a result, pixel fonts

have been designed for display on a small pixel grid. These are often optimized

for a particular pixel grid and are not scalable. Table 10.3 presents a few examples

of pixel fonts that are optimized for a particular pixel grid.

FIGURE

10.13

Height and width of characters.

Each circle represents 1 pixel.

10 Small-Screen Interfaces

328

Pixel height differs from a font size in points. Font size in points is a measure-

ment of the physical height of a character (1 point ¼ 0.0139 in). For example, a

12-point font is 0.1668 in tall. Pixel height is the number of vertical pixels on a dis-

play used to render the character. The actual height of a pixel font is dependent

on the number of pixels per inch the display is capable of rendering, also known

as DPI. To calculate the actual height of a pixel font, use

ð10:5Þ

where

is the height of the character in inches,

is the height of the character in

pixels, and

is the number of pixels per inch the display is capable of rendering

(DPI). At 72 DPI, a 12-pixel font is 0.1667 in, approximately the same height of a

12-point font. Increasing the DPI of a screen will result in decreasing the height

of a pixel font.

Another attribute of fonts is whether the font is a serif (has the small lines

extending from the main strokes of a character) or sans serif (does not have those

lines). Research on the use of serif fonts for displays is somewhat contradictory.

Muto and Maddox (in press), in their review and summarization of that research,

recommend the following:

F For displays of high resolution (>150 DPI), serif fonts are more readable

for tasks that require extended reading.

F For displays of lower resolution (<80 DPI), sans serif fonts are often

preferred by users.

Display Placement

For handheld devices, display placement is at the discretion of the user. However,

for mounted displays in a fixed location, displays should be placed in the optimum

visual zone (Figure 10.14).

TABLE 10.3 Example Pixel Fonts

Font Example Uppercase Pixel Height Lowercase Pixel Height

Aldebra Regular

Argon

Axxell

Foxley 816

Mini 7

5 Not applicable

MiniMicra

Pico12

Source:

MiniFonts.com (2006).

10.4 Human Factors Design of the Interface

329

10.4.3 Accessing Functionality

The computing power of devices today enables the creation of highly functional

software. Even devices with small screens have the capability of performing a

large number of features and functions. The challenge, then, becomes how the

user accesses these features.

Menus are currently the dominant design for giving users access to a large

number of features for both desktop computers as well as for handheld devices.

For both applications, menus enable users to recognize the function they need

15 optimum 15 optimum

35 maximum 35 maximum

60 maximum

90 maximum

85 maximum

65 maximum

35 maximum

Head rotation

Head and eye rotation

Normal line of sight

Normal

line of sight

60 maximum

Eye rotation

40 maximum

20 maximum

0 optimum

15 optimum 15 optimum

15 optimum

Normal line

of sight

15 optimum

FIGURE

10.14

Mounted displays in fixed locations.

Vertical and horizontal visual fields.

Source:

Adapted from U.S. Department of

Defense (1999).

10 Small-Screen Interfaces

330

and select it from a list (rather than recall it and type it in). The avoidance of text

entry is especially beneficial on devices that do not have full keyboards.

However, even though menus are the dominant design choice, many software

designs poorly implement menus, particularly on handheld devices, leading some

researchers to investigate alternative methods. This section will present research

on menu design and present factors that contribute to a usable menu design, as

well as introduce research on alternatives to menus.

Menu Organization

The primary goal of menu design is to organize the menu items such that users

are able to find the items they need quickly and with few errors and few key-

strokes. Lee and Raymond (1993) reference a body of research showing that menu

selection errors are most often caused by miscategorization, overlapping cate-

gories, and/or vague category titles. Focusing on avoiding these pitfalls will signif-

icantly improve the overall menu design.

There are two levels of menu organization: overall menu organization (often

takes the form of hierarchical, branching tree structures) and within-menu place-

ment (organizes items within a menu list). Studies have shown that the best way

to avoid the common pitfalls of menu organization mentioned previously is to

include end users in the design process. To help avoid overlapping categories

and miscategorization of the overall menu structure, studies have shown that

menu organizations generated by user data are superior to those generated by

designer intuition (Hayhoe, 1990; Roske-Hofstrand & Paap, 1986). Capturing the

users’ perceived organization and organizing the menus in this way can improve

the overall usability of the menu.

An in-depth discussion of techniques for collecting user data is beyond the

scope of this chapter, but can be found in Paap and Cooke (1997), Cooke (1994),

and Rugg and McGeorge (1997), and a discussion of scaling techniques for reduc-

ing user data into meaningful categories can be found in Paap and Cooke (1997)

and Hayhoe (1990). One goal to strive for in the hierarchical structure is to

develop orthogonal categories (mutually exclusive categories that have no com-

mon characteristics) that are clearly worded so that items under each category

cannot be perceived as belonging to another category and so that every item fits

well into a category.

To avoid errors due to vague category titles, menu titles should be clearly

worded and accurately convey their contents. According to research referenced

by Lee and Raymond (1993), clearly worded menu items can improve user perfor-

mance and the best menu titles are derived from user data combined with

designer expertise.

For within-menu placement, items can be arranged in several ways (Marics &

Engelbeck, 1997; Paap & Cooke, 1997):

F Alphabetically

F Temporally (days of week, months of year)

10.4 Human Factors Design of the Interface

331