CMPT 481 & 811 Design of Everyday Things Learning Objectives • Analyze bad designs and create good ones • Learn important concepts for designing everyday things: • perceived affordances • causality • visible constraints • mapping • transfer effects • idioms & population stereotypes • conceptual models • individual differences • why design is hard Psychology of Everyday Things • Don Norman, 1988 • Affordance • Visible constraints • Mapping • Feedback • Causality (true and false kinds) • Understandable action • Visibility • Conceptual models • Other factors • Transfer Effects • Cultural Associations • Individual Differences Perceived Affordances Perceived Affordances Buttons are for pushing Slots are for inserting Handles are for turning Chairs are for sitting Computers are for… Switches are for toggling Knobs are for turning Perceived Affordances • The perceived and actual fundamental properties of the object that determine how it could possibly be used (Gibson, 1977) • Complex things may need explaining • Simple things should not • When simple things need pictures, labels, instructions then design has failed Perceived Affordances • Product design • Perceived affordances: • Design invites people to take possible actions • Actual affordances: • The actual actionable properties of the product • Problems occur when • these are not the same, • people’s perceptions are not what the designer expects Perceived Affordances Mirrors for not touching Handles for lifting Knobs for turning Surface for placing transparencies Perceived Affordances Mirrors for not touching People don’t reposition image Handles for lifting Bends frame & distorts focus Knobs for turning focus or image position? Surface for placing transparencies Which way is up? What’s This? Perceived Affordances • Perception only through visuals • Designer creates appropriate visual affordances via • familiar idioms • metaphors Perceived Affordances - Problems Is this a graphic or a control? A button is for pressing, but what does it do? Text is for editing, but it doesn’t do it. Visual affordances for window controls are missing! IBM Real Phone http://homepage.mac.com/bradster/iarchitect/phone.htm Perceived Affordances - Problems • Complex things may need explaining but simple things should not. When simple things need labels & instructions, then design has failed. Handles are for lifting, but these are for scrolling! Perceived Affordances • Limitations of the actions possible perceived from object’s appearance • provides people with a range of usage possibilities Norman Doors How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? How do These Doors Work? Visible Constraints Visible Constraints: Entering a Date • The more constraints, the less opportunity for error • Particularly important for managing user input Visible Constraints: Entering a Date • The more constraints, the less opportunity for error • Particularly important for managing user input Visible Constraints: Entering a Date • The more constraints, the less opportunity for error • Particularly important for managing user input Visible Constraints: Entering a Date • The more constraints, the less opportunity for error • Particularly important for managing user input More Visual Constraints Mappings Mappings Mappings Mappings Arbitrary 24 possibilities Partial 8 possibilities Full 1 possibility Good Mapping Natural vs Non-Natural Mapping Mapping Problems Affordance: Move cabinet handle is for pulling Mapping: suggests it should open the drawer but doesn’t Mapping Problems • Where do you plug in the mouse? • Mapping ambiguous Mapping Problems • Which space is the correct one to fill in? If You Have to Provide a Label… Feedback Feedback • Well-designed feedback lets the user know the state of the system, that the system has understood or responded to their actions, and what the results of their actions are. Causality Causality • Causality: A caused B to happen • True causality • We usually assume that the thing that happens right after an action was caused by that action • Interpretation of “feedback” Causality • Causality: A caused B to happen • False causality • incorrect effect • e.g. invoking unfamiliar function just as computer crashes • causes “superstitious” behaviors • invisible effect • e.g., hitting esc or alt-ctrl-del on unresponsive system • Commands with no apparent result often re-entered repeatedly Causality Problems • Effects visible only after ‘Exec’ button is pressed • Ok does nothing! • Awkward to find appropriate color level Transfer Effects Transfer Effects • People transfer their learning/expectations of similar objects to the current objects • positive transfer: previous learning also applies to new situation • negative transfer: previous learning conflicts with the new situation Transfer Effects – Problems Transfer Effects - Problems Transfer Effects - Problems Intentional Inconsistencies Idioms & Population Stereotypes Idioms and Population Stereotypes • Interface idioms are ‘standard’ interface features we learnt, use and remember • Idioms may define arbitrary behaviours Idioms and Population Stereotypes • Idioms vary in different cultures or locations • Light switches • America: down is off • Britain: down is on • Faucets • America: clockwise is on • Britain: clockwise is off Idioms and Population Stereotypes • Ignoring/changing idioms? • Home handyman • Light switches installed upside down • Calculators vs. phone number pads • Which did computer keypads follow and why? Idioms and Population Stereotypes • Difficulty of changing stereotypes: • Qwerty keyboard: designed to prevent jamming of typewriters • Dvorak keyboard (’30s): probably faster to use Idioms and Population Stereotypes • Because a trashcan in some places may look like this: • A user might be confused by this image popular in early Apple interfaces: • Sun found their email icon problematic for some American urban dwellers who are unfamiliar with rural mail boxes. Conceptual Models Conceptual Model • People have “mental models” of how things work, built from: • • • • • • • • affordances causality constraints mapping positive transfer population stereotypes/cultural standards instructions interactions Conceptual Model • Models allow people to mentally simulate operation of device • Models may be wrong, particularly if the attributes they are built from are misleading Good Example: Scissors • Affordances: • holes for something to be inserted • Constraints: • big hole for several fingers, small hole for thumb • Mapping: • between holes and fingers suggested and constrained by appearance • Positive transfer and cultural idioms: • learnt when young • constant mechanism • Conceptual model: • implications clear of how the operating parts work Bad Example: Watch • Affordances: • four push buttons to push, but not clear what they will do • Constraints: • no visible relation between buttons, possible actions and end result • Mapping: • little relation to analog watches • Positive transfer and cultural idioms: • somewhat standardized core controls and functions, but still highly variable • Conceptual model: • must be learnt Conceptual Model • communicate model through visual image • visible affordances, mappings, and constraints • visible causality of interactions • cultural idioms, transfer • instructions augment visuals • all work together to remind a person of what can be done and how to do it Design Model User's model User Designer System System image Who do you design for? Who do you design for? Who do you design for? Who do you design for? • People are different • It is rarely possible to accommodate all people perfectly, so design is often a compromise • e.g. ceiling height: 8’ • but tallest man: 8’ 11’’! • Rule of thumb: • cater to 95% of audience (5th or 95th percentile) • but means 5% of population may be (seriously!) compromised • designing for the average a mistake • may exclude half the audience • Examples: • cars and height: headroom, seat size • computers and visibility: • font size, line thickness, color for colorblind people? Who do you Who do for? you design design for? Who do you design for? Novices • walk up and use systems • interface affords restricted set of tasks • introductory tutorials to more complex uses Casual • • • • standard idioms recognition (visual affordances) over recall reference guides interface affords basic task structure Intermediat e • • • • advanced idioms complex controls reminders and tips interface affords advanced tasks Expert • shortcuts for power use • interface affords full task + task customization Most kiosk & Internet Systems most shrinkwrapped systems custom software Proverbs on Individual Differences • You do not necessarily represent a good average 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 Tru tho Why Design is Hard Why Design is Hard • Increasing system impact & complexity over the last century • Number of things to control has increased dramatically • E.g. car radio: AM, FM1, FM2, 5 pre-sets, station selection, balance, fader, bass, treble, distance, mono/stereo, dolby, tape eject, fast forward and reverse, etc (while driving at night!) Why Design is Hard • Increasing system impact & complexity over the last century • Display is increasingly artificial • E.g. red lights in car indicate problems vs flames for fire Why Design is Hard • Increasing system impact & complexity over the last century • Feedback more complex, subtle, and less natural • E.g. is your digital watch alarm on and set correctly? Why Design is Hard • Increasing system impact & complexity over the last century • Errors increasingly serious and/or costly • E.g. airplane crashes, losing days of work... Why Design is Hard • Marketplace pressures may not immediately value good design • Adding functionality (complexity) now easy and cheap • E.g. computers Why Design is Hard • Marketplace pressures may not immediately value good design • Adding controls/feedback expensive • physical buttons on calculator, microwave oven • widgets consume screen real estate Why Design is Hard • Marketplace pressures may not immediately value good design • Design usually requires several iterations before success • Products pulled if not immediately successful Why Design is Hard • Consumers may not immediately value good design • Consumers often value cost and appearance over usability • Trendy appearance is visible and looks great in the store, bad design less clear • Notice after you take it home, then live with it Why Design is Hard • Consumers may not immediately value good design • Consumers 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!” Design (Appearance) vs Design (Interaction) Design (Appearance) vs Design (Interaction) Adding Features is Cheap Adding Features is Cheap Design (Appearance) vs Design (Interaction) https://www.theregister.co.uk/2017/09/05/flat_uis_designs_are_22_per_cent_slower_official Design (Appearance) vs Design (Interaction) Why Design is Hard • What does this do? • computers far more complex to control than everyday devices • general purpose computer contains no natural conceptual model • completely up to the designer to craft a conceptual model Summary • Many human errors are actually errors in design. Don’t blame the user! • Designers help by providing a good conceptual model • Affordances, causality, constraints, mapping, positive transfer, and population stereotypes and idioms • Design to accommodate individual differences. Decide on the range of users. • Why design is hard
