James Tam The Psychology Of Everyday Things Visual affordances and constraints Causality and other mappings Transfer effects Population stereotypes and.

Slides:



Advertisements
Similar presentations
Structured Design The Structured Design Approach (also called Layered Approach) focuses on the conceptual and physical level. As discussed earlier: Conceptual.
Advertisements

Design, prototyping and construction
Chapter 11 Designing the User Interface
Copyright 1999 all rights reserved The HCI Design Process n User Interfaces are not just built by sitting down and drawing up designs for them n Just like.
CISB213 Human Computer Interaction Design Principles
Fall 2002CS/PSY Design of Everyday Things Agenda Discuss Norman’s views on HCI & design Discussion What did you take away from DOET book.
Location Based Social Networking For All Presenter: Danny Swisher.
Saul Greenberg User Centered Design Why User Centered Design is important Approaches to User Centered Design.
CPSC 481 Foundations and Principles of Human Computer Interaction
Department of Computer Science
Prototyping Techniques
CS 544 Design The Psychology of Everyday Things Design Concepts
Saul Greenberg Prototyping techniques Learning different techniques for rapid prototype development.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 10, 2005.
Design of Everyday Things
SIMS 213: User Interface Design & Development
James Tam User Centered Design Why User Centered Design is important Approaches to User Centered Design.
‘The Design of Everyday Things’. Donald A. Norman.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Graphical User Interfaces Design and usability Saul Greenberg Professor University of Calgary Slide deck by Saul Greenberg. Permission is granted to use.
Foundations and Principles of Human Computer Interaction Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as.
LBSC 690: Week 3 Interacting with Users Jimmy Lin College of Information Studies University of Maryland Monday, February 11, 2007 Material in these slides.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 10, 2004.
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
James Tam CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Design of Everyday Things Don Norman on Design & HCI.
What is Interaction Design?. What is interaction design? Designing interactive products to support people in their everyday and working lives –Sharp,
Introduction to HCI Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 21, 1999.
SM3121 Software Technology Mark Green School of Creative Media.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 11, 2003.
Chapter 13: Designing the User Interface
Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.
Principles of User Centred Design Howell Istance.
11.10 Human Computer Interface www. ICT-Teacher.com.
CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
Overview Prototyping and construction Conceptual design
Design, prototyping and construction CSSE371 Steve Chenoweth and Chandan Rupakheti (Chapter 11- Interaction Design Text)
What is an interface? How many different types of interfaces can you think of?
Mestrado em Informática Médica SIntS 13/14 – T5 Design Concepts Miguel Tavares Coimbra.
Human Computer Interaction An Introduction. Human-Computer Interaction "Human-computer interaction (HCI) is the study of the interaction between people,
Designing for the Real World Material from /525 Human Computer Interaction Dr Steve Jones.
User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed.
Usability Evaluation/LP Usability: how to judge it.
Design of Everyday Things. Grade summaries Assignments 1-4 (out of 10) P0 (out of 10) P1 group grade (out of 100) P1 individual grade (out of 50) Midterm.
Fall 2002CS/PSY Design. Fall 2002CS/PSY System-Centered Design Focus is on the technology  What can be built easily using the available tools.
1 3132/3192 User Accessibility © University of Stirling /3192 User Accessibility 2.
More on Design of Everyday Things. Turn it up, or shut it down?
The Design of Everyday Things Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?
Interaction Design John Kelleher. Interaction Design “Designing interactive products to support people in their everyday and working lives” Software.
Chapter 1: What is interaction design?. Bad designs From:
Interaction design Xiangming Mu.
Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)
Human-Computer Interaction
What is Interaction Design?. What is interaction design? Designing interactive products to support people in their everyday and working lives –Sharp,
Cs413_design02.ppt GUI Design The User Controls Navigation Traditional GUI design the designer can control where the user can go gray out menu options.
Design, prototyping and construction(Chapter 11).
The Design of Everyday Things Donald A. Norman. The psychopathology of everyday things Doors Doors Light switches Light switches Taps Taps Telephones.
Design CSE 403. Announcements Design How do people interact with computers? Tremendous flexibility in designing/building interactions Look at physical.
Copyright 1999 all rights reserved Evaluating Paper Prototypes n How do you do this? –What are the considerations? –What are the steps? ?
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Conceptual Models & Interface Metaphors
11.10 Human Computer Interface
Prototyping.
The Design of Everyday Things
MAPPINGS AND AFFORDANCES
Design : Agenda Design challenges Idea generation Design principles
Design of Everyday Things
Design dilbert Fall 2002 CS/PSY 6750.
Interface Design and Usability
Presentation transcript:

James Tam The Psychology Of Everyday Things Visual affordances and constraints Causality and other mappings Transfer effects Population stereotypes and cultural associations Conceptual models Individual differences Why design is hard

James Tam How something looks indicates how it’s to be used Chair for sitting Table for placing things on Knobs for turning Slots for inserting things into Buttons for pushing Computers for ??? Complex things may need explaining, but simple things should not When simple things need pictures, labels, instructions, then design has failed Their usage should be obvious based upon their appearance Visual Affordances

James Tam Visual Affordances: Computer Audio Needs Familiar Idiom And Metaphor To Work Sliders for sliding Buttons for pressing (Is this a button?) Dials for turning What’s this button do?

James Tam Visual Affordances: Telephony A button is for pressing, but what does this one do? Is this a graphic or a control? Text is for editing, but you can’t do that here Visual affordances for window controls are missing!

James Tam Visual Affordances: Telephony A non-obvious affordance

James Tam Visual Affordances: Multi-Media Handles are for lifting, but these are for scrolling From AudioRack 32, a multimedia application

James Tam Visual Constraints Limitations on the actions possible which are perceived from an object’s appearance Which side? Push or pull? Which way does it open?

James Tam Visual Constraints: Calendar Controls

James Tam Mappings

James Tam Mappings

James Tam Mappings

James Tam Mappings From

James Tam Mappings The set of possible relations between objects: The relation between the control and what is being controlled e.g., relationship between the burners and the mimic diagrams on a stove Cause and effect relationships e.g., turn the car’s steering wheel right and the car goes right. back right front left back left front right 24 possibilities, requires: -visible labels -memory Arbitrary Full mapping back front back 2 possibilities per side =4 total possibilities Paired

James Tam Mappings: Drawing Tools Only active palette items fully visible Depressed button indicates currently mapped item Cursor re-enforces selection of current item

James Tam Causality The thing that happens right after an action is assumed to be caused by that action Interpretation of “feedback” False causality -Incorrect effect

James Tam Causality -Invisible effect

James Tam Lack Of Causality No apparent cause-effect relation Effects visible only after Exec button is pressed Ok does nothing! Awkward to find appropriate color level

James Tam Transfer Effects People transfer their learning/expectations of similar objects to the current object: Positive transfer Negative transfer

James Tam Transfer Effects

James Tam Population Stereotypes Populations learn idioms that work in a certain way -Red means danger -Green means safe But idioms vary in different cultures! -Light switches America: down is off Britain: down is on -Faucets America: Counter-clockwise on Britain: Counter-clockwise off Ignoring/changing stereotypes? -Home handyman: light switches installed upside down -Calculators vs. phone number pads: which should computer keypads follow? Difficulty of changing stereotypes -Qwerty keyboard: designed to prevent jamming of keyboard -Dvorak keyboard (’30s): provably faster and more efficient to use

James Tam Cultural Associations And Icon Design Because a trashcan in Thailand may look like this: A Thai user is likely to be confused by this image popular in Apple interfaces: Sun found their icon problematic for some American urban dwellers who are unfamiliar with rural mail boxes.

James Tam Cultural Associations A Mac user finds a Windows system only somewhat familiar

James Tam Conceptual Models People have “mental models” of how things work Conceptual models built from: Affordances and constraints Mappings and causality Transfer effects Population stereotypes/cultural standards Instructions Interactions Models may be wrong, particularly if above attributes are misleading Models allows people to mentally simulate operation of device

James Tam Conceptual Models

James Tam Conceptual Models

James Tam Communicate model through visual image Visible affordances and constraints Clear causality of interactions Consider cultural idioms, transfer effects Instructions augment visuals Together all these things indicate what can be done and how to do it Designing A Good Conceptual Model Dilbert © United Feature Syndicate, Inc. DesignerOperator

James Tam An Example Of Good Design

James Tam Example Of A Bad Design: Digital Watches

James Tam Individual Differences: Who Do You Design For?

James Tam Individual Differences: Who Do You Design For?

James Tam Individual Differences: Who Do You Design For? People are different It is rarely possible to accommodate all people perfectly Rule of thumb: Design should cater for 95% of audience (ie for 5th or 95th percentile) -But means 5% of population may be (seriously!) compromised Designing for the average is a mistake -May exclude half the audience Examples: Cars and height: headroom, seat size Computers and visibility: -Font size, line thickness, alternatives to color for color blind people?

James Tam Individual Differences: Who Do You Design For Diagram by Kathryn Schulte

James Tam Proverbs On Individual Differences You do NOT necessarily represent a good representative user of equipment or systems you design Do not expect others to think and behave as you do, or as you might like them to. People vary in thought and behaviour just as they do physically

James Tam Who Do You Design For And Individual Differences Computer users: NovicesWalk up and use systems Interface affords restricted set of tasks Introductory tutorials to more complex uses CasualStandard idioms Recognition (visual affordances) over recall Reference guides IntermediateAdvanced idioms Complex controls Reminders and tips ExpertShortcuts for power users Interface affords full task customization most shrink- wrapped systems most kiosk + internet systems custom software

James Tam Why Design Is Hard 1)The number of things to control has increased dramatically 1950's – 1970's 1990's – 2000's

James Tam Why Design Is Hard (2) 2)Displays are sometimes overly abstract Red lights in car indicate problems vs. flames for fire 3)Feedback can be more complex, subtle, and less natural Is your digital watch alarm on and set correctly? 4)Errors increasing serious and/or costly Airplane crashes, losing days of work...

James Tam Why Design Is Hard (3) …Costly errors: From InfoWorld, Dec ’86 “London— An inexperienced computer operator pressed the wrong key on a terminal in early December, causing chaos at the London Stock Exchange. The error at [the stockbrokers office] led to systems staff working through the night in an attempt to cure the problem” Image from the book “Wall Street” published by New York Distributors

James Tam Why Design Is Hard (4) 5)Marketplace pressures Adding functionality (complexity) now easy and cheap -Computers Adding controls/feedback expensive -Physical buttons on calculators, microwave ovens -Widgets consume screen real estate Design usually requires several iterations before success -Product pulled if not immediately successful

James Tam Why Design Is Hard (5) 6)People often consider cost and appearance over designing with Human Factors in mind Bad design not always visible or obvious

James Tam Why Design Is Hard (6)...Cost and appearance over Human Factors design e.g., the wave of cheap telephones: -Accidentally hangs up when button hit with chin -Bad audio feedback -Cheap pushbuttons—mis-dials common -Trendy designs that are uncomfortable to hold -Hangs up when dropped -Functionality that can’t be accessed (redial, mute, hold) 7)People tend to blame themselves when errors occur -“I was never very good with machines” -“I knew I should have read the manual!” -“Look at what I did! Do I feel stupid!” From “The Simspons”

James Tam Human Factors In The Design Of Computers What does this do? Computers are far more complex to control than most physical devices General purpose computer contains no natural conceptual model Completely up to the designer to present a good model to the user

James Tam What You Now Know Many so-called human errors are actually errors in design Don’t blame the user! Designers help make things easier to use by providing a good conceptual model Affordances Constraints Mapping and causality Positive transfer Population stereotypes and cultural associations Design to accommodate individual differences Decide on the range of users Good design is difficult for a variety of reasons that go beyond design-related issues

James Tam Articulate: who users are their key tasks User and task descriptions Goals: Methods: Products: Brainstorm designs Task centered system design Participatory design User- centered design Evaluate tasks Psychology of everyday things User involvement Representation & metaphors low fidelity prototyping methods Throw-away paper prototypes Participatory interaction Task scenario walk- through Refined designs Graphical screen design Interface guidelines Style guides high fidelity prototyping methods Testable prototypes Usability testing Heuristic evaluation Completed designs Alpha/beta systems or complete specification Field testing Interface Design and Usability Engineering