Making Things Work and User Centered Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 26, 1999

Today l Course Time Line l Making Things Work l User-Centered Design

Course Schedule (Tentative) l Intro to HCI; Current Uis l Design Cycle, User-Centered Design, Cognitive Issues l Task Analysis l Human Abilities l Design Guidelines/Heuristic Evaluation l Prototyping (Midterm) l Web Design/Search Interfaces l Information Architecture/Navigation l User Testing l Interaction Models l Graphic Design/3D UIs l Personality/Social Aspects/Agents l Class Presentations

Project Schedule (Tentative) Note: there will also be individual assignments l Individual Project Proposals (3rd week) l Choose group projects (4th week) l Project interface sketch (5th week) l Task analysis (6th week) l Lo-Fi prototype and test (8th week) l First interactive prototype (10th week) l Heuristic evaluation (11th week) l Second interactive prototype (12th week) l User testing (14th week) l Third prototype (15th week)

Announcements l Handing out course accounts l Today at the HCC seminar: –Lucy Suchman, Xerox PARC. “Putting Working Document Collections Online”. »402 Barrows, 4-5:30pm »To join the mailing list, send to with the line: l subscribe hcc-talks l Demystifying Quicktime VR –Wed, Jan :30, 3110 Etcheverry

Based on slide by Saul Greenberg Making Things Work l Psychology of Every Day Things (Don Norman, 1988) –Visual Affordances –Visible Constraints –Transfer Effects –Cultural Associations/Idioms –Conceptual Models –Individual Differences –Why Design is Difficult

Based on slide by 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 ???

Based on slide by Saul Greenberg 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)

Based on slide by 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)

Based on slide by Saul Greenberg 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.

Based on slide by Saul Greenberg 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?

Based on slide by Saul Greenberg Visible Constraints l Limitations of actions are perceivable from the object’s appearance –key in lock –plug in electric outlet –door handle -- push or pull? l How does this transfer to computer interfaces?

Based on slide by Saul Greenberg Transfer Effects l People transfer their expectations from familiar objects to similar new ones –positive transfer: previous experience applies to new situation –negative transfer: previous experience conflicts with new situation

Based on slide by Saul Greenberg Cultural Associations l Groups of people learn idioms –red = danger, green = go l But these differ in different places –Light switches »America: down is off »Britain: down is on –Faucets »America: counter-clockwise is on »Britain: counter-clockwise is off

Based on slide by Saul Greenberg Cultural Associations l Computer Icons –Trashcans look different different places –Sun’s icon didn’t work for some city dwellers l Difficult to change some habits –QUERTY keyboard –Metric system

Based on slide by Saul Greenberg Mental Models l People have mental models of how things work: –how does your car start? –how does an ATM machine work? –how does your computer boot? l Allows people to make predictions about how things will work

Based on slide by Saul Greenberg Mental Models l Mental models built from –affordances –constraints –mappings –positive transfer –cultural associations/standards –instructions –interactions l Mental models are often wrong!

Based on slide by Saul Greenberg Good Example l Scissors –affordances: »holes for insertion of fingers »blades for cutting –constraints »big hole for several fingers, small hole for thumb –mapping »between holes and fingers suggested and constrained by appearance –positive transfer »learnt when young –conceptual model »implications clear of how the operating parts work

Based on slide by Saul Greenberg Bad Example l Digital Watch –affordances »four push buttons, not clear what they do –contraints and mapping unknown »no visible relation between buttons and the end-result of their actions –negative transfer »little association with analog watches –cultural standards »somewhat standardized functionality, but highly variable –conceptual model »must be taught; not obvious

Based on slide by Saul Greenberg Guidelines for Design l Provide a good conceptual model –allows users to predict consequences of actions –communicated thorugh the image of the system l Make things visible –relations between user’s intentions, required actions, and results should be »sensible »consistent »meaningful (non-arbitrary) –make use of visible affordances, mappings, and constraints –remind person of what can be done and how to do it

User-Centered Design Chapter 5 in textbook

Slide by James Landay How to Design l Design is driven by requirements –what the artifact is for –not how it is to be implemented »e.g., PDA not as important as “mobile” app. l Design represents the artifact –for UIs these include »screen sketches or storyboards »flow diagrams/outline showing task structure »executable prototypes –representations simplify

Slide by James Landay Design Process l Waterfall model –sequence of steps from software engineering –customer is not the user l Spiral model –only continue after step if feedback is positive l Prototyping –design by constructing executable models –should the prototype become the system? l User-centered design

Slide by James Landay Waterfall Model (Soft. Eng.) Application Description Requirements Specification System Design Product Initiation Analysis Design Implementation ?

Slide by James Landay Other Models of Design l Product life cycle –design & implementation < 50% of cost –look at other stages »documentation, testing, release, bug fixes, enhancements... l Design / implementation models –Waterfall vs. Iterative Design? »notations differ (WF lacks user’s perspective) »cost of fixing errors in requirements increases by a factor of 10 at each stage l iterative design find these earlier

Slide by James Landay What is User-centered Design? l Developers working with target users –help define what the system will do & how –lots of iterative exploration & feedback l Think of the world in users’ terms –user & customer not the same person ->? »don’t design for manager’s work process l Understanding work process –points where humans and computers intersect l Not technology-centered/feature driven

Slide by James Landay Why do it? l Nearly 25% of all applications projects fail. Why? –overrun budgets & management pulls the plug –others complete, but are too hard to learn/use –avoid failure if pay attention to needs of users l Solution is user-centered design. Why? –easier to learn & use products sell better –can help keep a product on/ahead of schedule –training costs reduced –improved usability!

Slide by James Landay What is Usability? l Ease of learning –faster the second time and so on... l Recall –remember how from one session to the next l Productivity –perform tasks quickly and efficiently l Minimal error rates –if they occur, good feedback so user can recover l High user satisfaction –confident of success TTN

Slide by James Landay Understanding the User l How do your users work? –task analysis, interviews, & observation l How do your users think? –understand human cognition –observe users performing tasks l How do your users interact with UIs? –observe!

Slide by James Landay Involving the User l Users help designers learn –what is involved in their jobs –what tools they use –i.e, what they do l Developers reveal technical capabilities –builds rapport & an idea of what is possible l Users try prototype & comment on it –developers make incremental changes & iterate

Slide by James Landay Observation Techniques l In the work place l Use recording technologies –notebooks –tape recorders –video cameras l Ask users to think out loud while working –look for job-specific procedures / terminology l Show users transcript & ask about it

Slide by James Landay What Users Might Say l?l? l “This is too difficult” l “You don’t have the steps in the order we do them” l Do not take comments personally –you shouldn’t have a personal stake l Goal is to make the system easy to use for your intended users

Slide by James Landay Caveats l Politics –advocating change can cause controversy –get a sense of the organization –important to get buy-in from all those involved l Don’t design forever without prototyping –rapid prototyping, evaluation, & iteration is key to technique l Systems level apps are poor candidates –networking, etc.

Slide by James Landay Summary l User-centered design is different than traditional methodologies l Leads to solving problems up front (cheaper) l Know thy user & involve them in design