Introduction to HCI Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 21, 1999

Intro to Human-Computer Interaction (HCI) l Topics: –Definitions –How to design and build UI’s »Task Analysis »Rapid Prototyping »Iterative Design »Evaluation –Human/Cognitive Characteristics –Social Considerations

Slide by James Landay What is HCI? l A discipline concerned with –design –evaluation –implementation of interactive computing systems for human use l The study of major phenomena surrounding the interaction of humans with computers.

Slide by James Landay Human-Computer Interaction (HCI) l Human –the end-user of a program –the others in the organization l Computer –the machine the program runs on l Interaction –the user tells the computer what they want –the computer communicates results

Slide by James Landay What is HCI? HumansTechnology Task Design Organizational & Social Issues

A Taxonomy of HCI (from ACM SIGCHI Curricula for HCI)

What is an Interface? l Difficult to define l The window through which the human interacts with some application on the computer. l But … –really it is more complex than this –part of a larger context of interacting with other applications, other people, and the physical world.

Slide by James Landay User Interfaces l Part of a software program that allows –user to interact with computer –user to carry out their task l HCI = design, prototyping, evaluation, and implementation of user interfaces (UIs)

Slide by James Landay Who builds UIs? l A team of specialists (ideally) –graphic designers –interaction / interface designers –technical writers –marketers –test engineers –software engineers

Slide by James Landay How to Design and Build UIs l Design cycle l User-centered design l Task analysis l Rapid prototyping l Evaluation l Programming l Iteration

Slide by James Landay Iteration At every stage! Design Prototype Evaluate

Slide by James Landay User-centered Design “Know thy User” l Cognitive abilities –perception –physical manipulation –memory l Organizational / job abilities l Keep users involved throughout project

Slide by James Landay Task Analysis l Observe existing work practices l Create examples and scenarios of actual use l Try out new ideas before building software

Slide by James Landay Rapid Prototyping l Build a mock-up of design l Low fidelity techniques –paper sketches –cut, copy, paste –video segments l Interactive prototyping tools –Visual Basic, HyperCard, Director, etc. l UI builders –NeXT, etc.

Slide by James Landay Evaluation l Test with real users (participants) l Build models l Low-cost techniques –expert evaluation –walkthroughs

Affordances l Term invented by the perceptual psychologist J. J. Gibson –the actionable properties between the world and an actor –a relationship, part of nature –do not have to be visible, known, or desirable.

Perceived Affordances l Introduced by Don Norman –“The Psychology of Everyday Things” Doubleday 1988 (aka The Design of Everyday Things) l What the designer cares about: –Whether the user perceives »that which is actually true »that some action is possible

Slide adapted from Saul Greenberg Visual Affordances l The perceived and actual fundatmental properties of the object that determine how it could possibly be used l Appearance indicates how object should be used –chair for sitting –table for placing things on –knobs for turning –buttons for pushing –computers for ???

Slide adapted from Saul Greenberg Visual Affordances l Complex things may need explaining l Simple things should not –Which way does the door open? –If something simple needs instructions, the design has failed l Videos –The Strauss Mouse (Marilyn Mantei, Chi 90) –Light Switch Exploration (S. Hecht, CHI 96)

Slide adapted from Saul Greenberg Visual Affordances l Mappings –The set of possible relations between objects –The natural relationship between two things l Example: –control-display compatibility »stove burners vs. their controls

Real vs. Perceived Affordances l In physical product design –can have both real and perceived affordances –these might not be the same l Example: –A chair: »real affordance: can sit on it »false perceived affordance: can move it (maybe it is bolted down)

Affordances in Computer Screen-Based Interfaces l Designer only has control over perceived affordances –display screen, pointing device, selection buttons, keyboard –These afford touching, pointing, looking, clicking on every pixel of the display.

Affordances in Computer Screen-Based Interfaces l Most of this affordance is of no value –Example: if the display is not touch- sensitive, even though the screen affords touching, touching has no effect. –Example: »does a graphical object on the screen afford clicking? »yes, but the real question is does the user perceive this affordance; does the user recognize that clicking on the icon is a meaningful, useful action?

Next Time l User-Centered Design l Schedule for Class l Get the text. –Read Intro and Chapter 5 for next time