DTUI5_chap08.ppt

© 2010 Pearson Addison-Wesley. All rights reserved.

Designing the User Interface:

Strategies for Effective Human-Computer Interaction

Fifth Edition

Ben Shneiderman & Catherine Plaisant

in collaboration with
Maxine S. Cohen and Steven M. Jacobs

CHAPTER 8:
Interaction Devices

*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts

  • QWERTY layout

1870 Christopher Latham Sholes

good mechanical design and a clever placement of the letters that slowed down the users enough that key jamming was infrequent

put frequently used letter pairs far apart, thereby increasing finger travel distances

  • Dvorak layout

1920

reduces finger travel distances by at least one order of magnitude

Acceptance has been slow despite the dedicated efforts of some devotees

it takes about 1 week of regular typing to make the switch, but most users have been unwilling to invest the effort

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

  • ABCDE style

26 letters of the alphabet laid out in alphabetical order nontypists will find it easier to locate the keys

  • Additional keyboard issues

IBM PC keyboard was widely criticized because of the placement of a few keys

backslash key where most typists expect SHIFT key

placement of several special characters near the ENTER key

Number pad layout

wrist and hand placement

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

  • Keys

1/2 inch square keys

1/4 inch spacing between keys

slight concave surface

matte finish to reduce glare finger slippage

40- to 125-gram force to activate

3 to 5 millimeters displacement

tactile and audible feedback important

certain keys should be larger (e.g. ENTER, SHIFT, CTRL)

some keys require state indicator, such as lowered position or light indicator (e.g. CAPS LOCK)

key labels should be large, meaningful, permanent

some "home" keys may have additional features, such as deeper cavity or small raised dot, to help user locate their fingers properly (caution - no standard for this)

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

  • Function keys

users must either remember each key's function, identify them from the screen's display, or use a template over the keys in order to identify them properly

can reduce number of keystrokes and errors

meaning of each key can change with each application

placement on keyboard can affect efficient use

special-purpose displays often embed function keys in monitor bezel

lights next to keys used to indicate availability of the function, or on/off status

typically simply labeled F1, F2, etc, though some may also have meaningful labels, such as CUT, COPY, etc.

frequent movement between keyboard home position and mouse or function keys can be disruptive to use

alternative is to use closer keys (e.g. ALT or CTRL) and one letter to indicate special function

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

  • Cursor movement keys

up, down, left, right

some keyboards also provide diagonals

best layout is natural positions

inverted-T positioning allows users to place their middle three fingers in a way that reduces hand and finger movement

cross arrangement better for novices than linear or box

typically include typamatic (auto-repeat) feature

important for form-fillin and direct manipulation

other movements may be performed with other keys, such as TAB, ENTER, HOME, etc.

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

  • Keyboard and keypads for small devices

Wireless or foldable keyboards

Virtual keyboards

Cloth keyboards

Soft keys

Pens and touchscreens

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

8-*

The popular RIM Blackberry (http://www.blackberry.com) shown here on the left

demonstrated that many people could use a reduced-size keyboard on a regular basis;

users typically type with one finger or with both thumbs. The Nokia device in the middle

shows that non-English-speaking countries may use different keyboard layouts (here, a

French AZERTY keyboard). On the right, a larger keyboard uses the longer dimension of

the device and can be slid back into the device when not needed (http://www.nokia.com).

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Keyboard Layouts (cont.)

8-*

Dasher predicts probable characters and words as users make their selections

in a continuous two-dimensional stream of choices

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Other text entry methods

8-*

The virtual keyboard of

the Apple iPhone gains

precision by allowing finger

repositioning and then

activates on lift-off

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Other text entry methods (cont.)

8-*

Another method is to handwrite on a touch sensitive

surface, typically with a stylus using Graffiti® on the Palm devices

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Pointing Devices

Pointing devices are applicable in six types of interaction tasks:

  • 1. Select:

user chooses from a set of items.

used for traditional menu selection, identification of a file in a directory, or marking of a part in an automobile design.

  • 2. Position:

user chooses a point in a one-, two-, three-, or higher-dimensional space

used to create a drawing, to place a new window, or to drag a block of text in a figure.

  • 3. Orient:

user chooses a direction in a two-, three-, or higher-dimensional space.

direction may simply rotate a symbol on the screen, indicate a direction of motion for a space ship, or control the operation of a robot arm.

  • 4. Path:

user rapidly performs a series of position and orient operations.

may be realized as a curving line in a drawing program, the instructions for a cloth cutting machine, or the route on a map.

  • 5. Quantify:

user specifies a numeric value.

usually a one-dimensional selection of integer or real values to set parameters, such as the page number in a document, the velocity of a ship, or the amplitude of a sound.

  • 6. Text:

user enters, moves, and edits text in a two-dimensional space. The

pointing device indicates the location of an insertion, deletion, or change.

more elaborate tasks, such as centering; margin setting; font sizes; highlighting, such as boldface or underscore; and page layout.

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Pointing Devices

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Direct-control pointing devices

  • lightpen

enabled users to point to a spot on a screen and to perform a select, position, or other task

it allows direct control by pointing to a spot on the display

incorporates a button for the user to press when the cursor is resting on the desired spot on the screen

lightpen has three disadvantages: users' hands obscured part of the screen, users had to remove their hands from the keyboard, and users had to pick up the lightpen

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Direct-control
pointing devices (cont.)

  • Touchscreen

allows direct control touches on the screen using a finger

early designs were rightly criticized for causing fatigue, hand-obscuring-the-screen, hand-off-keyboard, imprecise pointing, and the eventual smudging of the display

lift-off strategy enables users to point at a single pixel

the users touch the surface

then see a cursor that they can drag around on the display

when the users are satisfied with the position, they lift their fingers off the display to activate

can produce varied displays to suit the task

are fabricated integrally with display surfaces

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Direct-control
pointing devices (cont.)

Tablet PCs and Mobile Devices:

  • Natural to point on the LCD surface
  • Stylus
  • Keep context in view
  • Pick up & put down stylus
  • Gestures and handwriting recognition

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Indirect pointing devices

  • mouse

the hand rests in a comfortable position, buttons on the mouse are easily pressed, even long motions can be rapid, and positioning can be precise

  • trackball

usually implemented as a rotating ball 1 to 6 inches in diameter that moves a cursor

  • joystick

are appealing for tracking purposes

  • graphics tablet

a touch-sensitive surface separate from the screen

  • touchpad

built-in near the keyboard offers the convenience and precision of a touchscreen while keeping the user's hand off the display surface

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Comparison of pointing devices

  • Human-factors variables

speed of motion for short and long distances

accuracy of positioning

error rates

learning time

user satisfaction

  • Other variables

cost

durability

space requirements

weight

left- versus right-hand use

likelihood to cause repetitive-strain injury

compatibility with other systems

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Comparison of pointing
devices (cont.)

  • Some results

direct pointing devices faster, but less accurate

graphics tablets are appealing when user can remain with device for long periods without switching to keyboard

mouse is faster than isometric joystick

for tasks that mix typing and pointing, cursor keys a faster and are preferred by users to a mouse

muscular strain is low for cursor keys

  • Fitts' Law

Index of difficulty = log2 (2D / W)

Time to point = C1 + C2 (index of difficulty)

C1 and C2 and constants that depend on the device

Index of difficulty is log2 (2*8/1) = log2(16) = 4 bits

A three-component equation was thus more suited for the high-precision pointing task:

Time for precision pointing = C1 + C2 (index of difficulty) + C3 log2 (C4 / W)

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Novel devices

Foot controls

Eye-tracking

Multiple-degrees-of-freedom devices

DataGlove

Haptic feedback

Bimanual input

Ubiquitous computing and tangible user interfaces

Handheld devices

Smart pens

Table top touch screens

Game controllers

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Novel devices (cont.)

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory interfaces

  • Speech recognition still does not match the fantasy of science fiction:

demands of user's working memory

background noise problematic

variations in user speech performance impacts effectiveness

most useful in specific applications, such as to benefit handicapped users

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory interfaces (cont.)

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory
interfaces (cont.)

  • Discrete word recognition

recognize individual words spoken by a specific person; can work with 90- to 98-percent reliability for 20 to 200 word vocabularies

Speaker-dependent training, in which the user repeats the full vocabulary once or twice

Speaker-independent systems are beginning to be reliable enough for certain commercial applications

been successful in enabling bedridden, paralyzed, or otherwise disabled people

also useful in applications with at least one of the following conditions:

speaker's hands are occupied

mobility is required

speaker's eyes are occupied

harsh or cramped conditions preclude use of keyboard

voice-controlled editor versus keyboard editor

lower task-completion rate

lower error rate

use can disrupt problem solving

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory
interfaces (cont.)

  • Continuous-speech recognition

Not generally available:

difficulty in recognizing boundaries between spoken words

normal speech patterns blur boundaries

many potentially useful applications if perfected

  • Speech store and forward

Voice mail users can

receive messages

replay messages

reply to caller

forward messages to other users, delete messages

archive messages

  • Systems are low cost and reliable.

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory
interfaces (cont.)

  • Voice information systems

Stored speech commonly used to provide information about tourist sites, government services, after-hours messages for organizations

Low cost

Voice prompts

Deep and complex menus frustrating

Slow pace of voice output, ephemeral nature of speech, scanning and searching problems

Voice mail

Handheld voice recorders

Audio books

Instructional systems

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory
interfaces (cont.)

  • Speech generation

Michaelis and Wiggins (1982) suggest that speech generation is "frequently preferable" under these circumstances:

The message is simple.

The message is short.

The message will not be referred to later.

The message deals with events in time.

The message requires an immediate response.

The visual channels of communication are overloaded.

The environment is too brightly lit, too poorly lit, subject to severe vibration, or otherwise unsuitable for transmission of visual information.

The user must be free to move around.

The user is subjected to high G forces or anoxia

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Speech and auditory
interfaces (cont.)

  • Audio tones, audiolization, and music

Sound feedback can be important:

to confirm actions

offer warning

for visually-impaired users

music used to provide mood context, e.g. in games

can provide unique opportunities for user, e.g. with simulating various musical instruments

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Displays – Small and Large

  • The display has become the primary source of feedback to the user from the computer

The display has many important features, including:

Physical dimensions (usually the diagonal dimension and depth)

Resolution (the number of pixels available)

Number of available colors, color correctness

Luminance, contrast, and glare

Power consumption

Refresh rates (sufficient to allow animation and video)

Cost

Reliability

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Displays – Small and Large (cont.)

Usage characteristics distinguish displays:

  • Portability
  • Privacy
  • Saliency
  • Ubiquity
  • Simultaneity

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Display technology

  • Monochrome displays

are adequate, and are attractive because of their lower cost

  • RGB shadow-mask displays

small dots of red, green, and blue phosphors packed closely

  • Raster-scan cathode-ray tube (CRT)

electron beam sweeping out lines of dots to form letters

refresh rates 30 to 70 per second

  • Liquid-crystal displays (LCDs)

voltage changes influence the polarization of tiny capsules of liquid crystals

flicker-free

size of the capsules limits the resolution

  • Plasma panel

rows of horizontal wires are slightly separated from vertical wires by small glass-enclosed capsules of neon-based gases

  • Light-emitting diodes (LEDs)

certain diodes emit light when a voltage is applied

arrays of these small diodes can be assembled to display characters

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Display technology (cont.)

  • Electronic ink

Paper like resolution

Tiny capsules with negatively and positively charged particles

  • Braille displays

Pins provide output for the blind

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Displays – Large and Small (cont.)

  • Large displays

Informational wall displays

Interactive wall displays

Multiple desktop displays

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Displays – Large and Small (cont.)

  • Heads-up and helmet mounted displays

A heads-up display can, for instance, project information on a partially silvered widescreen of an airplane or car

A helmet/head mounted display (HMD) moves the image with the user

3D images

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Mobile device displays

  • Currently mobile devices used for brief tasks, except for game playing
  • Optimize for repetitive tasks
  • Custom designs to take advantage of every pixel
  • DataLens allows compact overviews
  • Web browsing difficult
  • Okay for linear reading, but making comparisons can be difficult

8-*

1-*

© 2010 Pearson Addison-Wesley. All rights reserved.

Animation, image, and video

  • Accelerated graphics hardware
  • More information shared and downloaded on the web
  • Scanning of images and OCR
  • Digital video
  • CD-ROMs and DVDs
  • Compression and decompression through MPEG
  • Computer-based video conferencing

8-*