CS261 Software Engineering Topic 7: Human Computer Interaction James Archbold James.Archbold@warwick.ac.uk In association with Deutsche Bank CS261 - Software Engineering - Human Computer Interaction 1 When last we left our heroes • We explore design/development cycles that you might find as part of implementation • Considered options and their impact on code maintainability and extensibility • Employed strategies to improve code: ‣ Encapsulate what varies ‣ Code to an interfacer ‣ Delegation ‣ Favour delegation over inheritance CS261 - Software Engineering - Human Computer Interaction 2 The Human Element When you made your design document, you made assumptions about the UI Clearly, how humans interact with your system is important That is what we’re covering today CS261 - Software Engineering - Human Computer Interaction 3 Human Computer Interaction CS261 - Software Engineering - Human Computer Interaction 4 Session Outline • Historical perspective of HCI through an example • Human traits that underpin HCI: • ‣ Attention ‣ Memory ‣ Cognition ‣ Affordances Neilsons Usability Principles CS261 - Software Engineering - Human Computer Interaction 5 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 6 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 7 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 8 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 9 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 10 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 11 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 12 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 13 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 14 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 15 Example: Microsoft Operating Systems CS261 - Software Engineering - Human Computer Interaction 16 CS261 Software Engineering Topic 7: Human Computer Interaction 2 James Archbold James.Archbold@warwick.ac.uk In association with Deutsche Bank CS261 - Software Engineering - Human Computer Interaction 17 Human Computer Interaction • The success of a software product is determined by the humans who use the product ‣ The MS story demonstrates both good (95/XP) and bad (2000/Vista) • HCI is the study of how humans interact with computers • We use HCI practices to improve the effectiveness and usability of systems and software ‣ Human traits underpin these practices CS261 - Software Engineering - Human Computer Interaction 18 1. Attention • On the left we see an example of the Stroop Effect, where words and colour impact your attention • Attention - cognitive process of selectively concentrating on aspect of the environment while ignoring others • One theory is that the experiment requires more attention to name the colour than it does to read the word CS261 - Software Engineering - Human Computer Interaction 19 1. ATTENTION! • We can force attention • • We can divide attention • • Cocktail party effect Talking while driving Involuntary attention • When salient characteristics of computing stimuli grab our attention CS261 - Software Engineering - Human Computer Interaction 20 1. Attention CS261 - Software Engineering - Human Computer Interaction 21 1. Attention • How we focus determines how we can interact with a system • Studying how attention can be grabbed or maintained enables effective design of interfaces ‣ We can guide the user’s attention to the part of the display most relevant without the need for them to scan the entire interface ‣ We can grab the user’s attention away from their current task when required ‣ The use of metaphors enable recognition even in new systems, e.g. dragging an item to the recycle bin CS261 - Software Engineering - Human Computer Interaction 22 2. Memory CS261 - Software Engineering - Human Computer Interaction 23 2. Memory Memory is made up of three components Sensory Stores: Iconic (visual) and echoic (auditory) stores hold information before it enters working memory Working Memory: Holds transitory information and makes it available for further information processing Long-term Memory: Holds information for long term storage CS261 - Software Engineering - Human Computer Interaction 24 Short Term Memory USAMSNGCSENBC Short Term Memory is a scratchpad for temporary recall of the information under processes Decays rapidly and has very limited capacity, works best in chunks Cowan (2001) provided evidence suggesting that we can only hold around 4 (+/- 1) things in short term memory. USA MSN GCSE NBC CS261 - Software Engineering - Human Computer Interaction 25 Short Term Memory How we forget from short term memory is a source of debate Decay Theory: Memory decays over time Displacement Theory: New memory overwrites the old memory Proactive Interference: Memory cannot be retrieved because it is stored in the wrong place CS261 - Software Engineering - Human Computer Interaction 26 Long Term Memory • • Episodic Memory ‣ Knowledge of events and experiences in serial form ‣ How we reconstruct events that took place in the past Semantic Memory ‣ Record of facts, concepts and skills ‣ Often derived from episodic memory, learning from experiences CS261 - Software Engineering - Human Computer Interaction 27 Long Term Memory and icon design • Many icons rely on memory and affordances (see later) ‣ Resemblance - users an analogous image (a) ‣ Exemplar - uses an example (b - indicates restaurant) ‣ Symbolic - high level of abstraction (c - indicates fragility) ‣ Arbitrary - no relation to the concept (d) CS261 - Software Engineering - Human Computer Interaction 28 CS261 Software Engineering Topic 7: Human Computer Interaction 3 James Archbold James.Archbold@warwick.ac.uk In association with Deutsche Bank CS261 - Software Engineering - Human Computer Interaction 29 3. Cognition Cognition is the process by which we gain knowledge Includes understanding, remembering, reasoning, attending, acquiring skills and creating ideas Consider Norman’s Human Action Cycle and Gestalt Laws of Perceptual Organisation CS261 - Software Engineering - Human Computer Interaction 30 Norman’s Human Action Cycle • Goal Formulation • Execution • ‣ Translation of goals into set of unordered tasks ‣ Sequencing the tasks to create an action sequence ‣ Executing the action sequence Evaluation Stage ‣ Perceiving the results after having executed the action sequence ‣ Interpreting the actual outcomes based on the expected ones ‣ Comparing what happened with what the user wished to happen CS261 - Software Engineering - Human Computer Interaction 31 Norman’s Human Action Cycle • Gulf of Evaluation ‣ • The psychological gap which must be crossed to interpret a user interface Gulf of Execution ‣ The gap between the user’s goals and the means to execute those goals CS261 - Software Engineering - Human Computer Interaction 32 Gestalt Laws of Perceptual Organisation Proximity: Objects appearing close together appear as groups Continuity: Disconnected elements appear as connected whole Part-whole Relationships: Whole greater than sum of parts Similarity: Elements of same shape/colour perceived as belonging together Closure: Missing parts of figure are filled so it appears whole Symmetry: Regions bounded by symmetrical borders perceived as coherent figures CS261 - Software Engineering - Human Computer Interaction 33 CS261 - Software Engineering - Human Computer Interaction 34 Gestalt Laws of Perceptual Organisation CS261 - Software Engineering - Human Computer Interaction 35 4. Affordances CS261 - Software Engineering - Human Computer Interaction 36 4. Affordances • Perception is a direct process, in which information is detected rather than constructed • With no prior knowledge, users will actively engage in activities that provide the necessary information • Affordances are what we see as the behaviour of a system or object - what it provides to us CS261 - Software Engineering - Human Computer Interaction 37 4. Affordances CS261 - Software Engineering - Human Computer Interaction 38 Where does this lead? • Historical perspective of HCI through an example • Human traits that underpin HCI ‣ • Attention, Memory, Cognition, Affordances Several usability concepts impact system design ‣ Feedback - giving user information on actions performed (visual, auditory) ‣ Constraint - Restrain user’s interactions (Gaussian blur) ‣ Mapping - Relationship between controls and their effects (trash can) ‣ Consistency - Similar operations should use similar elements for similar tasks CS261 - Software Engineering - Human Computer Interaction 39 Neilsons Usability Principles 1. Visibility of system status: Keep users informed of status by providing appropriate feedback 2. Match between system and real-world: Use the user’s language rather than system terms 3. User control and freedom: Provide escape routes for users (‘undo’ buttons) 4. Consistency and standards: Avoid making users wonder if different words mean the same thing 5. Help users recognise and recover from errors: Use natural language to describe the error and provide a potential solution CS261 - Software Engineering - Human Computer Interaction 40 Neilsons Usability Principles 6. Error prevention: Prevent users from making mistakes wherever possible 7. Recognition rather than recall: Make objects, actions and options visible rather than force the user to remember how to find them. 8. Flexibility and efficiency of use: Provide accelerators that allow experts to do things faster 9. Aesthetic and minimalist design: Avoid using information that is not needed, keep it simple 10. Help and documentation: Provide searchable information with concrete solutions, write as if for a 13 year old CS261 - Software Engineering - Human Computer Interaction 41 Measuring Usability • • Many metrics to use to evaluate your solution ‣ Ratio of success to failure ‣ Time to complete task ‣ Number of errors a user makes ‣ Number of times a user expresses frustration or satisfaction HCI design and implementation can be complex, but allows for real creativity! CS261 - Software Engineering - Human Computer Interaction 42
