SlideShare uma empresa Scribd logo
1 de 26
Baixar para ler offline
Design of everyday things

            Summary so far:
                – many so-called human errors are actually errors in design
                – human factors became important as human performance
                  limitations reached when handling complex machinery


            You will soon know these important concepts for
            designing everyday things
               – perceived affordances
               – causality
               – visible constraints
               – mapping
               – transfer effects
               – idioms & population stereotypes
               – conceptual models
               – individual differences
   Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained.
               – why design is hard
   Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.                  Saul Greenberg




           Perceived Affordance

            The perceived properties of the object that suggest
            how one could use it




              chairs are for sitting                                                                     knobs are for turning
              table for placing things on




                                                                                                                                           computer for…
                                                                                                switch for toggling
            slots are for inserting                        buttons are
            handles are for turning                        for pressing
   Many concepts in this section are adapted from Don Norman’s book: The Design of Everyday Things
                                                                                                                                                             Saul Greenberg




1 - Design of everyday things
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



   In-depth discussion available at www.jnd.org/dn.mss/affordances-and-design.html
                                                                                                                Saul Greenberg




           Perceived Affordances
                                                                                     Mirrors for not touching



                                                                                                   Knobs for turning
                                            Handles for lifting


       Surface for placing transparencies




                                                                                                                Saul Greenberg




2 - Design of everyday things
Perceived Affordance Problems
                                                   Mirrors for not touching
                                                   people don’t reposition image




                                                                       Knobs for turning
                                                                       focus or image position?
                   Handles for lifting
                    bends frame, focus distorted



     Surface for placing transparencies
                                which way is up?




                                                                 what about this?




                                                                                        Saul Greenberg




      Perceived Affordances

       GUI design
         – perception only through visuals
         – designer creates appropriate visual affordances via
            • familiar idioms
            • metaphors




                                                                                        Saul Greenberg




3 - Design of everyday things
Perceived Affordances
                                                             dials for
                                                              turning




               sliders for
                   sliding


     music console
     for controlling
             music



                                                                    Saul Greenberg




      Perceived Affordance Problems

                                                     button for pressing,
                       is this equalizer control a
                                                     but action unknown
                                toggle or button?




   are these
    buttons?




                                                                    Saul Greenberg




4 - Design of everyday things
Perceived Affordance Problems

                    A button is for pressing,
   Is this a                                               Visual affordances for
                    but what does it do?
   graphic or a                                            window controls are missing!
   control?




                                           text is for editing, but it doesn’t do it.
   IBM Real Phone                                                                       Saul Greenberg




         Perceived Affordance Problems




   IBM Real Phone                                                                       Saul Greenberg




5 - Design of everyday things
Perceived Affordance Problems

           Handles are for lifting,
           but these are for scrolling!




           Complex things may need explaining but
           simple things should not
             – when simple things need labels & instructions, then design has failed




   AudioRack 32, a multimedia applicaiton                                                   Saul Greenberg




         Visible Constraints

           Limitations of the actions possible perceived from
           object’s appearance
             – provides people with a range of usage possibilities




                                                                  Can only push,
                                            Which side?
               Push or pull?
                                                                  side to push clearly visible
                                                                                         Saul Greenberg




6 - Design of everyday things
Which side do you use for cutting?




    Photograph courtesy of www.baddesigns.com                    Saul Greenberg




          Visible constraints: Entering a Date

           The more constraints, the less opportunity for error
              – particularly important for managing user input




   Controls constructed in Visual Basic                          Saul Greenberg




7 - Design of everyday things
Saul Greenberg




8 - Design of everyday things
Saul Greenberg




       Mapping

        The set of possible relations between objects

        Control-display compatibility
              – the natural relationship between controls and displays
              – e.g., visual mapping of stove controls to elements

                                                               full mapping
                                         paired
              arbitrary




                                   back front     front back
      back     front back front
      right    left  left right

                                   2 possibilities per side
     24 possibilities, requires:
                                    =4 total possibilities
      -visible labels + memory                                                Saul Greenberg




9 - Design of everyday things
Mapping

       Control-display compatibility
         – mimic diagrams for feedback / control imitates physical layout




                                                                            Saul Greenberg




      Mapping

       Control-display compatibility
         – cause and effect




        steering wheel-                        scroll bar – scroll down
        turn left, car turns left                 viewport goes down
                                                                            Saul Greenberg




10 - Design of everyday things
Mapping

           Palette controls and active objects


               Only controls that can
             operate on a picture are
                          fully visible


                Others are grayed out




                     Selected picture



                                                                   Saul Greenberg




          Mapping

           Action feedback                  Cursor re-enforces
                                            selection of current
                                            item




        Depressed button
         indicates current
             mapped item



   Microsoft Paint                                                 Saul Greenberg




11 - Design of everyday things
Mapping Problems

          Quick, open the top drawer


                                               Affordance:
                                                Move cabinet
                                               handle is for pulling



                                               Mapping:
                                               suggests it should open
                                               the drawer but doesn’t




   Photograph courtesy of www.baddesigns.com                              Saul Greenberg




        Mapping Problems

           Where do you plug in the mouse?
                                                              Mapping
                                                              ambiguous




   Photograph courtesy of www.baddesigns.com                              Saul Greenberg




12 - Design of everyday things
Causality

          the thing that happens right after an action is
          assumed by people to be caused by that action

              – interpretation of “feedback”

              – false causality
                  • incorrect effect
                      – invoking unfamiliar function just as computer hangs
                      – causes “superstitious” behaviors

                  • invisible effect
                      – command with no apparent result often re-entered repeatedly
                      – e.g., mouse click to raise menu on unresponsive system




                                                                                      Saul Greenberg




         Causality Problems

          Effects visible only after Exec button is pressed
              – Ok does nothing!
              – awkward to find appropriate color level




   LViewPro                                                                           Saul Greenberg




13 - Design of everyday things
Transfer Effects

       People transfer their learning/expectations of
       similar objects to the current objects
             • positive transfer: previous learning's also apply to new situation
             • negative transfer: previous learning's conflict with the new situation




                                                                                   Saul Greenberg




14 - Design of everyday things
Transfer Effect Problems

            A Restaurant in Santa Barbara




   Photograph courtesy of www.baddesigns.com   Saul Greenberg




        Transfer Effect Problems

          How does knowing MSPaint
          help you in Photoshop?
             – e.g. rectangular control…




                                               Saul Greenberg




15 - Design of everyday things
Idioms and Population Stereotypes

          Interface idioms:
            – ‘standard’ interface features we learnt, use and remember

          Idioms may define arbitrary behaviours
            – red means danger
            – green means safe



          Population stereotypes: Idioms vary in different cultures
            – Light switches
                    • America: down is off
                    • Britain: down is on




            – Faucets
                    • America: anti-clockwise on
                    • Britain: anti-clockwise off


                                                                          Saul Greenberg




        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?


          Difficulty of changing stereotypes
            – Qwerty keyboard: designed to prevent jamming of keyboard
            – Dvorak keyboard (’30s): provably faster to use




   Images from www.atarimagazines.com/v5n11/dvorakkeyboard.html           Saul Greenberg




16 - Design of everyday things
Cultural associations

           A Mac user finds a Windows system only somewhat
           familiar




   Apple MacPaint and Microsoft Paint                                   Saul Greenberg




         Conceptual model

           People have “mental models” of how things work, built from
             –    affordances
             –    causality
             –    constraints
             –    mapping
             –    positive transfer
             –    population stereotypes/cultural standards
             –    instructions
             –    interactions


           models allow people to mentally simulate operation of device

           models may be wrong
             – particularly if above attributes are misleading



                                                                        Saul Greenberg




17 - Design of everyday things
Donald Norman Design of Everyday Things, Basic Books




   Donald Norman Design of Everyday Things, Basic Books




18 - Design of everyday things
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


                                                                                  Saul Greenberg




      Bad example: Digital watch

       affordances:
         – four push buttons to push, but not clear what they will do

       constraints and mapping unknown
         – no visible relation between buttons, possible actions and end result

       transfer of training
         – little relation to analog watches

       cultural idiom
         – somewhat standardized core controls and functions
         – but still highly variable

       conceptual model:
         – must be learnt


                                                                                  Saul Greenberg




19 - Design of everyday things
Designing a good conceptual model

       communicate model through visual image
         –   visible affordances, mappings, and constraints
         –   visible causality of interactions
         –   cultural idioms, transfer
         –   instructions augments visuals



       all work together to remind a person of what can
       be done and how to do it    Design                               User's model
                                              Model

                                                                         User
                                                 Designer


                                                              System


                                                               System
                                                               image
                                                                                Saul Greenberg




      Who do you design for?




                                                                                Saul Greenberg




20 - Design of everyday things
Who do you design for?




                                                                             Saul Greenberg




      Who do you design for?

       People are different
       It is rarely possible to accommodate all people perfectly
         – design often a compromise
              • ceiling height: 8‘
              • but tallest man: 8' 11quot;!


       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 color-blind people?


                                                                             Saul Greenberg




21 - Design of everyday things
Mean and
                                 50th percentile




      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




                                                           Saul Greenberg




22 - Design of everyday things
Who do you design for?

         – novices       walk up and use systems                            most kiosk +
                         interface affords restricted set of tasks          internet
                                                                            systems
                         introductory tutorials to more complex uses

                                                                              most shrink-
         – casual        standard idioms
                                                                              wrapped
                         recognition (visual affordances) over recall         systems
                         reference guides
                         interface affords basic task structure

         – intermediate advanced idioms
                        complex controls
                        reminders and tips                                        custom
                                                                                  software
                        interface affords advanced tasks

         – expert        shortcuts for power use
                         interface affords full task + task customization




                                                                                           Saul Greenberg




      Why design is hard

       Over the last century
         – the number of things to control has increased dramatically
              • 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!)

         – display is increasingly artificial
              • red lights in car indicate problems vs flames for fire

         – feedback more complex, subtle, and less natural
              • is your digital watch alarm on and set correctly?

         – errors increasing serious and/or costly
              • airplane crashes, losing days of work...



                                                                                           Saul Greenberg




23 - Design of everyday things
Why design is hard

       Marketplace pressures

         – adding functionality (complexity) now easy and cheap
             • computers

         – adding controls/feedback expensive
             • physical buttons on calculator, microwave oven
             • widgets consume screen real estate

         – design usually requires several iterations before success
             • product pulled if not immediately successful




                                                                             Saul Greenberg




      Why design is hard

       People consider cost and appearance over design
         – bad design not always visible

         – 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!”

         – eg the new 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)


                                                                             Saul Greenberg




24 - Design of everyday things
Human factors in computing systems

       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

                                                                      Saul Greenberg




      What you now know

       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
         –   population stereotypes and idioms


       Design to accommodate individual differences
         – decide on the range of users

       Design is difficult for reasons that go beyond design

                                                                      Saul Greenberg




25 - Design of everyday things
Interface Design and Usability Engineering
                 Articulate:                                                     Refined                 Completed
                                                     Brainstorm
                 •who users are                                                  designs                 designs
                                                     designs
   Goals:        •their key tasks




               Task                                                         Graphical
                                          Psychology of     Participatory
               centered                                                     screen
                                          everyday          interaction
               system                                                       design
                                          things
                               Evaluate                                                     Usability          Field
               design
                               tasks                                                        testing            testing
                                                                            Interface
                                          User
   Methods:    Participatory                                Task scenario   guidelines
                                          involvement
               design                                       walk-
                                                                            Style
                                          Representation    through                         Heuristic
               User-                                                        guides
                                          & metaphors                                       evaluation
               centered
               design


                                                                            high fidelity
                                             low fidelity
                                                                            prototyping
                                             prototyping
                                                                            methods
                                             methods




                                                   Throw-away
                    User and                                                   Testable                  Alpha/beta
   Products:
                                                   paper
                    task                                                       prototypes                systems or
                                                   prototypes
                    descriptions                                                                         complete
                                                                                                         specification




26 - Design of everyday things

Mais conteúdo relacionado

Mais de Jutka Czirok (20)

Booklet for printing
Booklet for printingBooklet for printing
Booklet for printing
 
Alex printing processes (1)
Alex printing processes (1)Alex printing processes (1)
Alex printing processes (1)
 
Printing processes
Printing processesPrinting processes
Printing processes
 
Printing process 2
Printing process 2Printing process 2
Printing process 2
 
Printing processes 2
Printing processes 2Printing processes 2
Printing processes 2
 
The printing processes
The printing processesThe printing processes
The printing processes
 
Using smart visual
Using smart visualUsing smart visual
Using smart visual
 
Technical illustration
Technical illustrationTechnical illustration
Technical illustration
 
Gavin
GavinGavin
Gavin
 
Milton
MiltonMilton
Milton
 
Vanessa
VanessaVanessa
Vanessa
 
Kevin
KevinKevin
Kevin
 
Issac
IssacIssac
Issac
 
Natalia
NataliaNatalia
Natalia
 
Andrew
AndrewAndrew
Andrew
 
Thomas Swift
Thomas SwiftThomas Swift
Thomas Swift
 
Hk1 07
Hk1 07Hk1 07
Hk1 07
 
Hk11 07
Hk11 07Hk11 07
Hk11 07
 
Evaluation & the Consumer 6
Evaluation & the Consumer 6Evaluation & the Consumer 6
Evaluation & the Consumer 6
 
Evaluation & the Consumer 5
Evaluation & the Consumer 5Evaluation & the Consumer 5
Evaluation & the Consumer 5
 

Último

Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4JOYLYNSAMANIEGO
 
Mythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWMythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWQuiz Club NITW
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQuiz Club NITW
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17Celine George
 
4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptxmary850239
 
Indexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfIndexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfChristalin Nelson
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdfMr Bounab Samir
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxAnupam32727
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptxmary850239
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseCeline George
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesVijayaLaxmi84
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 
CHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptxCHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptxAneriPatwari
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Projectjordimapav
 
ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6Vanessa Camilleri
 

Último (20)

Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4
 
Mythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWMythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITW
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17
 
4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx
 
Indexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfIndexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdf
 
prashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Professionprashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Profession
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
 
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptxINCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 Database
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their uses
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 
CHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptxCHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptx
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Project
 
ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6
 

Human Factors

  • 1. Design of everyday things Summary so far: – many so-called human errors are actually errors in design – human factors became important as human performance limitations reached when handling complex machinery You will soon know these important concepts for designing everyday things – perceived affordances – causality – visible constraints – mapping – transfer effects – idioms & population stereotypes – conceptual models – individual differences Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. – why design is hard Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. Saul Greenberg Perceived Affordance The perceived properties of the object that suggest how one could use it chairs are for sitting knobs are for turning table for placing things on computer for… switch for toggling slots are for inserting buttons are handles are for turning for pressing Many concepts in this section are adapted from Don Norman’s book: The Design of Everyday Things Saul Greenberg 1 - Design of everyday things
  • 2. 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 In-depth discussion available at www.jnd.org/dn.mss/affordances-and-design.html Saul Greenberg Perceived Affordances Mirrors for not touching Knobs for turning Handles for lifting Surface for placing transparencies Saul Greenberg 2 - Design of everyday things
  • 3. Perceived Affordance Problems Mirrors for not touching people don’t reposition image Knobs for turning focus or image position? Handles for lifting bends frame, focus distorted Surface for placing transparencies which way is up? what about this? Saul Greenberg Perceived Affordances GUI design – perception only through visuals – designer creates appropriate visual affordances via • familiar idioms • metaphors Saul Greenberg 3 - Design of everyday things
  • 4. Perceived Affordances dials for turning sliders for sliding music console for controlling music Saul Greenberg Perceived Affordance Problems button for pressing, is this equalizer control a but action unknown toggle or button? are these buttons? Saul Greenberg 4 - Design of everyday things
  • 5. Perceived Affordance Problems A button is for pressing, Is this a Visual affordances for but what does it do? graphic or a window controls are missing! control? text is for editing, but it doesn’t do it. IBM Real Phone Saul Greenberg Perceived Affordance Problems IBM Real Phone Saul Greenberg 5 - Design of everyday things
  • 6. Perceived Affordance Problems Handles are for lifting, but these are for scrolling! Complex things may need explaining but simple things should not – when simple things need labels & instructions, then design has failed AudioRack 32, a multimedia applicaiton Saul Greenberg Visible Constraints Limitations of the actions possible perceived from object’s appearance – provides people with a range of usage possibilities Can only push, Which side? Push or pull? side to push clearly visible Saul Greenberg 6 - Design of everyday things
  • 7. Which side do you use for cutting? Photograph courtesy of www.baddesigns.com Saul Greenberg Visible constraints: Entering a Date The more constraints, the less opportunity for error – particularly important for managing user input Controls constructed in Visual Basic Saul Greenberg 7 - Design of everyday things
  • 8. Saul Greenberg 8 - Design of everyday things
  • 9. Saul Greenberg Mapping The set of possible relations between objects Control-display compatibility – the natural relationship between controls and displays – e.g., visual mapping of stove controls to elements full mapping paired arbitrary back front front back back front back front right left left right 2 possibilities per side 24 possibilities, requires: =4 total possibilities -visible labels + memory Saul Greenberg 9 - Design of everyday things
  • 10. Mapping Control-display compatibility – mimic diagrams for feedback / control imitates physical layout Saul Greenberg Mapping Control-display compatibility – cause and effect steering wheel- scroll bar – scroll down turn left, car turns left viewport goes down Saul Greenberg 10 - Design of everyday things
  • 11. Mapping Palette controls and active objects Only controls that can operate on a picture are fully visible Others are grayed out Selected picture Saul Greenberg Mapping Action feedback Cursor re-enforces selection of current item Depressed button indicates current mapped item Microsoft Paint Saul Greenberg 11 - Design of everyday things
  • 12. Mapping Problems Quick, open the top drawer Affordance: Move cabinet handle is for pulling Mapping: suggests it should open the drawer but doesn’t Photograph courtesy of www.baddesigns.com Saul Greenberg Mapping Problems Where do you plug in the mouse? Mapping ambiguous Photograph courtesy of www.baddesigns.com Saul Greenberg 12 - Design of everyday things
  • 13. Causality the thing that happens right after an action is assumed by people to be caused by that action – interpretation of “feedback” – false causality • incorrect effect – invoking unfamiliar function just as computer hangs – causes “superstitious” behaviors • invisible effect – command with no apparent result often re-entered repeatedly – e.g., mouse click to raise menu on unresponsive system Saul Greenberg Causality Problems Effects visible only after Exec button is pressed – Ok does nothing! – awkward to find appropriate color level LViewPro Saul Greenberg 13 - Design of everyday things
  • 14. Transfer Effects People transfer their learning/expectations of similar objects to the current objects • positive transfer: previous learning's also apply to new situation • negative transfer: previous learning's conflict with the new situation Saul Greenberg 14 - Design of everyday things
  • 15. Transfer Effect Problems A Restaurant in Santa Barbara Photograph courtesy of www.baddesigns.com Saul Greenberg Transfer Effect Problems How does knowing MSPaint help you in Photoshop? – e.g. rectangular control… Saul Greenberg 15 - Design of everyday things
  • 16. Idioms and Population Stereotypes Interface idioms: – ‘standard’ interface features we learnt, use and remember Idioms may define arbitrary behaviours – red means danger – green means safe Population stereotypes: Idioms vary in different cultures – Light switches • America: down is off • Britain: down is on – Faucets • America: anti-clockwise on • Britain: anti-clockwise off Saul Greenberg 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? Difficulty of changing stereotypes – Qwerty keyboard: designed to prevent jamming of keyboard – Dvorak keyboard (’30s): provably faster to use Images from www.atarimagazines.com/v5n11/dvorakkeyboard.html Saul Greenberg 16 - Design of everyday things
  • 17. Cultural associations A Mac user finds a Windows system only somewhat familiar Apple MacPaint and Microsoft Paint Saul Greenberg Conceptual model People have “mental models” of how things work, built from – affordances – causality – constraints – mapping – positive transfer – population stereotypes/cultural standards – instructions – interactions models allow people to mentally simulate operation of device models may be wrong – particularly if above attributes are misleading Saul Greenberg 17 - Design of everyday things
  • 18. Donald Norman Design of Everyday Things, Basic Books Donald Norman Design of Everyday Things, Basic Books 18 - Design of everyday things
  • 19. 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 Saul Greenberg Bad example: Digital watch affordances: – four push buttons to push, but not clear what they will do constraints and mapping unknown – no visible relation between buttons, possible actions and end result transfer of training – little relation to analog watches cultural idiom – somewhat standardized core controls and functions – but still highly variable conceptual model: – must be learnt Saul Greenberg 19 - Design of everyday things
  • 20. Designing a good conceptual model communicate model through visual image – visible affordances, mappings, and constraints – visible causality of interactions – cultural idioms, transfer – instructions augments visuals all work together to remind a person of what can be done and how to do it Design User's model Model User Designer System System image Saul Greenberg Who do you design for? Saul Greenberg 20 - Design of everyday things
  • 21. Who do you design for? Saul Greenberg Who do you design for? People are different It is rarely possible to accommodate all people perfectly – design often a compromise • ceiling height: 8‘ • but tallest man: 8' 11quot;! 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 color-blind people? Saul Greenberg 21 - Design of everyday things
  • 22. Mean and 50th percentile 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 Saul Greenberg 22 - Design of everyday things
  • 23. Who do you design for? – novices walk up and use systems most kiosk + interface affords restricted set of tasks internet systems introductory tutorials to more complex uses most shrink- – casual standard idioms wrapped recognition (visual affordances) over recall systems reference guides interface affords basic task structure – intermediate advanced idioms complex controls reminders and tips custom software interface affords advanced tasks – expert shortcuts for power use interface affords full task + task customization Saul Greenberg Why design is hard Over the last century – the number of things to control has increased dramatically • 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!) – display is increasingly artificial • red lights in car indicate problems vs flames for fire – feedback more complex, subtle, and less natural • is your digital watch alarm on and set correctly? – errors increasing serious and/or costly • airplane crashes, losing days of work... Saul Greenberg 23 - Design of everyday things
  • 24. Why design is hard Marketplace pressures – adding functionality (complexity) now easy and cheap • computers – adding controls/feedback expensive • physical buttons on calculator, microwave oven • widgets consume screen real estate – design usually requires several iterations before success • product pulled if not immediately successful Saul Greenberg Why design is hard People consider cost and appearance over design – bad design not always visible – 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!” – eg the new 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) Saul Greenberg 24 - Design of everyday things
  • 25. Human factors in computing systems 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 Saul Greenberg What you now know 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 – population stereotypes and idioms Design to accommodate individual differences – decide on the range of users Design is difficult for reasons that go beyond design Saul Greenberg 25 - Design of everyday things
  • 26. Interface Design and Usability Engineering Articulate: Refined Completed Brainstorm •who users are designs designs designs Goals: •their key tasks Task Graphical Psychology of Participatory centered screen everyday interaction system design things Evaluate Usability Field design tasks testing testing Interface User Methods: Participatory Task scenario guidelines involvement design walk- Style Representation through Heuristic User- guides & metaphors evaluation centered design high fidelity low fidelity prototyping prototyping methods methods Throw-away User and Testable Alpha/beta Products: paper task prototypes systems or prototypes descriptions complete specification 26 - Design of everyday things