Topics for Today LBSC 690 Session 3 Interacting with Users Introduction to Human Computer Interaction HCI Lessons from the design of everyday things Evaluation of systems Introduction to information architecture Jimmy Lin The iSchool University of Maryland Wednesday September 17 2008 Some material in these slides adapted from Saul Greenberg http pages cpsc ucalgary ca saul hci topics This work is licensed under a Creative Commons Attribution Noncommercial Share Alike 3 0 United States See http creativecommons org licenses by nc sa 3 0 us for details Goals for today The iSchool University of Maryland Do you feel like this Understand basic principles of HCI z z z Connect the design of everyday objects with computer interfaces Articulate what makes an object well or poorly designed Learn about metaphors in modern interfaces Understand how to evaluate systems U d t d principles Understand i i l off good dW Web b site it d design i The iSchool University of Maryland Moore s Law The iSchool University of Maryland Human Cognition computer performance human performance 1950 2000 2050 The iSchool University of Maryland 1950 2000 2050 The iSchool University of Maryland 1 Where is the bottleneck computer performance User Centered User Centered Design what else human performance 1950 2000 2050 The iSchool University of Maryland Human Computer Interaction A discipline concerned with the Four Stages of Interaction Forming an intention Selection of an action Execution of the action Evaluation of the outcome z Implementation Design z z z Internal mental characterization of a goal Review possible actions and select most appropriate Carry out appropriate actions with the system Compare results with expectations Evaluation of interactive computing systems for human use The iSchool University of Maryland Stages of Interaction The iSchool University of Maryland Challenges of HCI Goals Intention Expectation Goals Evaluation Intention Expectation Gulf of Execution Selection Interpretation Selection Mental Activity Physical Activity Execution System Evaluation Gulf of Evaluation Interpretation Mental Activity Physical Activity Perception Execution The iSchool University of Maryland System Perception The iSchool University of Maryland 2 Design Concepts Visual affordance Visible Constraints Mapping Causality T Transfer f effects ff t Idioms Metaphors Cultural associations Individual differences Visual Affordance The perceived and actual properties of the object that determine how it should be used Purpose should be obvious from appearance z z z z z z Chair for sitting Table for placing things on Knobs for turning Slots for inserting things into Buttons for pushing Computers for The iSchool University of Maryland The iSchool University of Maryland Visual Affordance Problems Sliders for sliding Are these buttons Dials for turning What does this button do The iSchool University of Maryland Visual Affordance Problems A button is for pressing but what does it do Is this a graphic or a control IBM Real Phone Visual Affordance Problems Visual affordances for window controls are missing text is for editing but it doesn t do it The iSchool University of Maryland IBM Real Phone The iSchool University of Maryland 3 Visual Affordance Problems Visible Constraints Handles are for lifting but these are for scrolling What you can do with the object is obvious from its physical appearence Push or pull AudioRack 32 a multimedia application Which side Can only push side to push clearly visible The iSchool University of Maryland Visible Constraints Date Entry The iSchool University of Maryland The PC Cup Holder Caller Hello is this Tech Support Tech Yes it is How may I help you Caller The cup holder on my PC is broken and I am within my warranty period How do I go about getting that fixed Tech I m sorry but did you say a cup holder Caller Yes it s attached to the front of my computer Tech Please excuse me if I seem a bit stumped it s because I am Did you receive this as part of a promotional at a trade show How did you get this cup holder Does it have any trademark on it Caller It came with my computer I don t know anything about a promotional It just has 4X on it At this point the Tech Rep had to mute the call because he couldn t stand it The caller had been using the load drawer of the CD ROM drive as a cup holder and snapped it off the drive The iSchool University of Maryland The iSchool University of Maryland 4 Mapping Mapping The set of possible relations between objects Connections between controls and what they control full mapping arbitrary back right front back front left left right 24 possibilities requires visible labels memory The iSchool University of Maryland paired back front front back 2 possibilities per side 4 total possibilities The iSchool University of Maryland The iSchool University of Maryland What makes a Wii fun The iSchool University of Maryland 5 Causality If B follows A humans assume that A caused B but this isn t always true Incorrect causal associations z z Unrelated effect e g superstitious behavior Invisible effect e g command with no apparent result often reentered repeatedly Test Me The iSchool University of Maryland Transfer Effects Microsoft actually got it right People transfer experience with old objects to new objects that look similar Positive transfer previous experience helps Negative transfer previous experience hurts but not quite The iSchool University of Maryland Transfer Effects Two Examples First we thought the PC was a calculator Then we found out how to turn numbers into letters with ASCII and we thought it was a typewriter Then we discovered graphics and we thought it was a television With the World Wide Web we ve realized it s a brochure Douglas Adams Keyboard layout z z Qwerty keyboard designed to prevent jamming of keyboard Dvorak keyboard 1930s provably faster to use Layout of number pads z z Calculator vs keyboard Traditional telephone vs fancy cell phones The iSchool University of Maryland 6 Idioms z z Cultural Associations People learn idioms that work in a certain way Idioms vary in different cultures z Light switches a Thai user is likely to be confused by this America down is off Britain down is on z Faucets America counter clockwise on Britain counter clockwise off Because a trash can in Thailand may look like this Red means danger Green means safe Have you tried crossing a street in London Sun found their email icon problematic for urban dwellers The iSchool