Spring 2006

1

CPSC 414/614: Human-Computer Interaction

Andrew Duchowski

Department of Computer Science

Clemson University

Spring 2006

2

Course description

• What is this course about?– DESIGN of Computer Interface for human

usability• What will we cover?

– textbook (almost in its entirety before midterm)– SIGCHI papers– LOTS of reading, class interaction / discussion– some coding

Spring 2006

3

• I Intro to HCI

• II Requirements (human aspects, models)

• III Design (interaction devices, elements)

• IV Evaluation (iterative design)

1. design based on models of human activities…

2. …and what’s available (devices, code, toolkits…)

3. evaluation (does it work?)

• EXAMPLES (CHI ‘05 papers)

Course outline

Spring 2006

4

Key things to do in class

• Be prepared - READ assigned chapters / papers BEFORE coming to class - you will be graded on participation

• Read INTELLIGENTLY (especially papers):– know who wrote the material (who’s involved)– know when material was written– know where work was carried out– what what was described (importance of contrib.)

• Keep track of research work (it’s on the test)• PARTICIPATE…(can be difference of letter grade)

Spring 2006

5

Class participation

• Discuss material in class (be prepared)• Be able to summarize work

– relate key points of work (chapter / paper)• Be able to comment on / criticize work

– quality of work– relevance of work (to HCI, state-of-the-art)

• Compare & contrast to others’ contributions• Don’t let others dominate discussion• Have one or two points to bring up• If I don’t know your name by semester’s end…

Spring 2006

6

Team organization

• Book chapters and technical papers will be covered by students (2-person teams)

• 2-person teams: presenter / discussion leader– presenter

• summarizes chapter (overhead, PPT, WWW…)• about 20 min

– discussion leader• provides questions on material for class

discussion• about 15 min

• Members switch roles

Spring 2006

7

Chp.1: What is HCI?

• study of interaction between humans & computer• a methodology for:

– modeling the human (e.g., perception, behavior)– examining usability of computer programs,

devices, techniques (in general doesn’t have to be just computers, applies to anything man-made that humans use, e.g., cars, light switches, kettles, etc.)

• most imporantly: HCI leads to DESIGN of interface• past contributions: physical devices (mouse, HMD),

code (GUI toolkits, window managers)

Spring 2006

8

Chp.1: What is HCI?

• All about design - in the context of Computer Science, design of interface to “back-end” program

• Interface:– graphical (GUI)– command-line (CLI)– web-based– VR, etc.

• “Back-end”:– Operating System (O/S)– dB– web site– spreadsheet– calculator

– word processor– air traffic control display– flight simulator– nuclear plant– automobile displays– etc.

Spring 2006

9

Chp.1: What is HCI?

• Computer interaction– almost ubiquitous (everywhere); chances are in whatever

device you use, there’s a chip in there– e.g., typical day:

• get up, press “snooze” on alarm clock (what’s the interface on the clock?)

• drive to work (car interface)• stop by ATM (ATM screen)• after work, shopping (scanners at store)• at home, eat dinner (microwave, stove)• watch TV/DVD/VCR (various ent. devices)

• Interface design applies to all these; computer interface is more obvious in some than in other examples

Spring 2006

10

Chp.1: What is HCI?

• Why bother with interface design?– increasing productivity

• e.g., in the workforce: employees with a better word processor will be more productive

– safety: critical systems with poor interface may endanger lives• e.g., ATC, operating room, nuclear plant

– commerce: a good interface may sell a product• e.g., today’s “hot items”: MP3 players, digital cameras,

DVD players, etc.• Key point: users shouldn’t have to think (much) about

intricacies of interface to use the tool (INTUITIVE INTERFACE)– e.g., ATM: walk up to it, withdraw cash (fairly easy to use)

Spring 2006

11

Chp.1: What is HCI?

• What is “good” UI design?– Good is subjective, isn’t it? I like CLI, you might

not…– Besides being intuitive (CLI is not), UI should be usable

– Usability (ISO 9241) defined as:• Satisfying (subjective)• Effective (accuracy: no errors)• Efficient (speed: fast)

– The SEE indicators are also used for evaluation

Spring 2006

12

Chp.1: What is HCI?

• Classic principles of interface design:– visibility: controls should be visible (e.g., volume

control on an MP3 player)– affordance: controls should map to their function,

I.e., it should be obvious what each control (button, slider, etc.) does.• controls should be intuitive, e.g., volume

control: use a vertical slider (up = loud)– feedback: device should give user indication of its

state (e.g., phone: dial tone [ready], busy signal, flashing light [message or on hold])

Spring 2006

13

Chp.1: What is HCI?

• Examples of design, visibility, affordance, feedback

Fig.1: salt / pepper shakers: which is which?

Spring 2006

14

Chp.1: What is HCI?

• Examples of design, visibility, affordance, feedback

Fig.2: which knob controls which burner?

Spring 2006

15

Chp.1: What is HCI?

• Examples of design, visibility, affordance, feedback

Fig.3: can I set the freezer / fridge temperature independently?

Spring 2006

16

Chp.1: What is HCI?Discussion

• Can you think of examples of:– very usable systems– not so usable systems (are there any devices that

appear to be confusing to people)? How can they be improved?

• Can you think of examples of:– very usable computer programs– not so usable computer applications? How can

they be improved?• ASSIGNMENT 1: collect at least 3 examples

(pictures) of not so usable “systems”, e.g., can by anything, doesn’t have to be computer program

Spring 2006

17

Chp.1: What is HCI?

• Examples of not very usable systems:– complicated telephones

• do you use all the features (e.g., multi-party conf. calls, call forwarding, call-waiting, etc.)?

– wristwatch• how often do you use its “extended” features

(time zone, stopwatch, alarm, countdown timer, etc.)

• Examples of very usable systems:– scissors

• intuitive how to use, mainly because it mostly has just one application

Spring 2006

18

Chp.1: What is HCI?

• Lots of other examples (some good some not so good) here:

• http://www.baddesigns.com• I’m sure there are others…don’t use the “classics”:

• ambiguous doors• stovetop controls (the ones I just showed)

Spring 2006

19

Chp.1: What is HCI?

• When designing a computer program:– think what capabilities program should have– how is a user going to access those functions

• More formally,– HCI is a discipline concerned with the design,

evaluation, and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them

• NOT just the creation of “user-friendly” programs• Need to understand human processes (cognition,

perception) and interaction protocol between human and computer

Spring 2006

20

Chp.1: What is HCI?

• HCI challenges:– continuous technological development, e.g.:

• better / faster machines• new languages, applications (web, internet,

VR, multimedia, imaging, graphics, etc.)– two concerns:

• keep abrest of technology (e.g., SIGCHI)• marry good HCI with effective use of

technology (I.e., make sure both are good: the “back-end” program works and the interface is good)

Spring 2006

21

Chp.1: What is HCI?

• HCI Goals:– production of usable, safe, and functional systems– development or improvement of systems (including

computing systems), with respect to:• safety• utility (functionality, what system does)• effectiveness (is it good at what it does)• efficiency (in case of programming, speed, memory

utlization, etc.)• usability (key concept in HCI: make system easy to learn

and use)– system: consider complete environment, not just hardware

or software, but people

Spring 2006

22

Chp.1: What is HCI?

• Underlying HCI belief: people come first; a computer is just a tool, a means to accomplish some task, e.g.,– writing a paper– communicating with friends– designing a landscape– preparing income taxes– cataloging, organizaing, printing pictures– desinging roads, bridges, airplanes, cars, etc.

• For good design, need knowledge of humans and technology– often need multi-disciplinary teams (e.g., Comp.

Sci, Psychology, IE, Arts, etc.)

Spring 2006

23

Chp.1: What is HCI?

• Evolution of HCI– 70s--80s: psychologists interested in information-

processing aspects of computer as analogy to mental processes (e.g., modeling brain as a computer, connectionist network, associative memory, etc.)• various HCI studies: testing menus (depth vs.

breadth), usability of single-user computer– 80s--90s: examining more powerful PCs,

workstations, communication (e.g. email), multimedia (e.g., imaging, visualization, “data mining”), VR (“presence”), group work (CSCW)

Spring 2006

24

Chp.1: What is HCI?Evolution of HCI: three landmark systems

1. Dynabook• Alan Kay, Xerox Parc• one of first laptops (book-sized PC)

2. Star• Xerox Parc• desk-sized system• high-res display, graphics, icons• mouse mapped to 2D “desktop” on screen

3. Apple Lisa• based to some extent on Dynabook & Star• precursor to Macintosh• WIMP: Windows, Icons, Menus, Pointer• introduction of desktop metaphor• GUI, WYSIWYG word processor

Spring 2006

25

Chp.1: What is HCI?Evolution of HCI: Main considerations

• All HCI takes place in social & organizational context• Application design is geared towards specific purposes,

dividing tasks between human and machine• To adapt application to human, need to know something about

human psychological and physiological abilities and limitations– human info processing: limited attention, memory– language: linguistics, verbal comm.– communication: methods of, body language, emoticons,

etc.– interaction: human-to-human, e.g., turn-taking– ergonomics: carple-tunnel syndrome, eye strain, fatigue, …

Spring 2006

26

Chp.1: What is HCI?Evolution of HCI: Main considerations

• To create successful computer application, need to know something about capabilities and limitations of computer– input: devices, e.g., keyboard, mouse, camera,

microphone, sensors, etc.– output: displays, graphics, sound, etc.– dialogue techniques, genre, style: what & how to

communicate to user, e.g., state of system, output (visualizations, charts, numbers, etc.), what colors to use, animation speed, etc…

Spring 2006

27

Chp.1: What is HCI?Designing for users

• User-Centered Design– CHI’s current “buzzword” (used to be “user-

friendly”), this is better since it suggests what differentiates HCI from traditional software engineering

– traditional (old) SE design processes:• waterfall model• tends to leave user evaluation to the end• result is (usually) that system works great for

developers, not always for users– HCI design process: ITERATIVE DESIGN

• design, evaluate, repeat…

Spring 2006

28

Chp.2: Requirements gathering

• 4 components:– people– work (the task)– environment (physical, organizational, social)– technology

• The HCI design process: not quite as linear as software engineering’s “waterfall model”

• Key differences:– user-centered design: involve users as much as possible

• user requirements (HCI) vs. system requirements (SE)– integration of multidisciplinary knowledge– iterative design: periodically check with user

Spring 2006

29

Chp.2: Requirements gathering

• Inolving users:– decide who end user is, how product will be used, made,

sold, marketed– observe current user practices - leads to system

requirements (how can current practice be improved?)– can use psychological models of human, e.g., follow & test

such concepts as Fitt’s Law– include user representatives on team:

• end users• management• marketing personnel• graphic designers, etc.

Spring 2006

30

Chp.2: Requirements gathering

• Incorporating interdisciplinary knowledge:– computer science (AI, graphics, O/S, dB, etc.)– psychology– human factors– linguistics– philosophy– sociology– anthropology

Spring 2006

31

Chp.2: Requirements gathering: some techniques

• Direct observation– field studies– controlled studies (in the lab)– somewhat obtrusive, users may know they’re being

watched/tested• Indirect observation

– video recording– keystroke logging– eye tracking

• Interviewing– questionnaires (usually subjective in nature, often

administered for subjective evaluation)– Likert scale (“on a scale of 1-5” etc.)

Spring 2006

32

Chp.3: Users and domain

• Identify stakeholders– primary users (e.g., checkout person at Bi-Lo)– secondary users (e.g., customers at Bi-Lo)– tertiary users (e.g., Bi-Lo management,

shareholders)• Identify environment

– physical (noise, stress, comfort, etc.)– social (individual, collaborative, etc.)– cultural (note cultural differences, language, etc.)

Spring 2006

33

Chp.3: Users and domain

• Usability goals– qualitative: learnability, etc., subjective evaluation– quantitative: measurable, e.g., performance

(speed and accuracy) and process (eye movements) metrics

• Universal accessibility– designing for the disabled, e.g., color-blind

(computer graphics: recoloring), quadrepligic (eye tracking: eye typing)

Spring 2006

34

Chp.3: Users and domain

• Characterizing users– of ATMs (as in textbook):

• what is their level of banking knowledge (shallow or deep)

– other examples:• fridge: do you need deep knowledge to operate?• cell phones: what features do people want?

• “Known” user groups (personas):– early adopters– elderly– others?

Spring 2006

35

Chp.3: Users and domain

• Characterizing the domain– task analysis– gist: what expert knowledge is possessed by users?– example: designing for the military---complex domain, lots

of expertise required• Sounds difficult, e.g., “as a designer, do I need to possess the

same expertise as users?”• Doable if you think in terms of task, procedures, etc. What are

the steps users typically make– examples?– doctors, x-ray radiologists, endoscope operators, stock

brokers, military ATC operators (friend or foe tasks), etc.