1. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Cognitive Psychology & Interface design Objectives of Lecture To provide an overview of the key cognitive aspects which influence the design of interactive systems To illustrate some of these aspects through practical examples Read Mc Cracken Chapter 2

2. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Psychology and Interface Design Interaction at the interface is largely a cognitive process For effective design can apply knowledge of cognitive psychology Need to understand which aspects are important & relevant to interface design Can provide information about what the user can and cannot do Help explain why uses experience problems with particular interaction /design aspects Must remember computers are not used in isolation

3. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Psychology and Interface Design Areas which need to consider include Information processing Attention Visual perception Memory Mental models

4. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Psychology and Interface Design Humans have limitations in each of these but they can perform remarkable feats Respond quickly to changing signals Make judgements Are intuitive Solve complex problems Deal with the unexpected Are versatile

5. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Definitions Cognitive psychology: the study of how people perceive, learn, and remember Cognition: the act or process of knowing The issue: confronted with a new experience (or website) how does a user draw on past experience to make sense of it? Example: underlined blue text is understood to be a link

6. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Why do we care? Because when people try to understand something, they use a combination of What their senses are telling them The past experience they bring to the situation Their expectations

7. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Senses Senses (sight, hearing, smell, taste, touch) provide data about what is happening around us We are visual beings (“See what I mean?”) Designing good interactive systems requires knowledge about how people perceive

8. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Constructivism Our brains do not create pixel-by-pixel images Our minds create, or construct, models that summarize what comes from our senses These models are what we perceive When we see something, we don’t remember all the details, only those that have meaning for us

9. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Example: familiar objects that we see, but don’t store in detail How many links are there on top menu of amazon.com? What are the colors on your favorite cereal box? How many top level menu options are there in MS Word? Who cares? Moral: People filter out irrelevant factors and save only the important ones

10. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Context Context plays a major role in what people see in an image Mind set: factors that we know and bring to a situation Mind set can have a profound effect on the usability of a web site

11. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Example of context: What do you see?

12. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Hint: it’s an animal, facing you...

13. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Hint: the face takes up the left half of the picture...

14. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Why couldn’t you see the cow’s face at first? It’s blurry and too contrasty, of course, but more: You had no idea what to expect, because there was no context Now that you do have a context, you will have little difficulty recognizing it the next time

15. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Another example of context: are these letters the same?

16. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Well, yes, but now in context:

17. Conscious and Automatic Processing Have been considering how people process information We see that it is often dependent on context expectation and experience Another important aspect of human information processing to consider for interactive design is automatic processing conscious processing

18. Expertise through automatic processing design objective is to be make user interface ‘transparent’ to the user automatic processing results when knowledge and actions can be compiled into a single internal ‘procedure’ comes with decreasing reliance on feedback or confirmation of actions by the system can you think of a skill you have acquired where this has occurred?

19. Design requirements If a sequence of low level actions are to be carried out automatically, then all the necessary actions need to be executed without waiting for any intermediate action by system. Learning a sequence of actions will be helped if these are meaningful in some way to the user What other design implications which must be considered when developing new interactive systems due to users performing some actions automatically?

20. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Visual Perception What we see is not what is there! It is a model of the external world constructed by our visual system Our model is constructed based on The environment Our previous experience Our stored knowledge Provides us with a more constant view of the world but must be aware of limitations, different perceptions of individuals, visual illusions

21. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall What do you see?

22. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall

23. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Visual Perception : Illusions

24. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Gestalt psychology “Gestalt” is German for “shape,” but as the term is used in psychology it implies the idea of perception in context We don’t see things in isolation, but as parts of a whole

25. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Five principles of Gestalt psychology We organize things into meaningful units using Proximity: we group by distance or location Similarity: we group by type Symmetry: we group by meaning Continuity: we group by flow of lines (alignment) Closure: we perceive shapes that are not (completely) there

26. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Proximity

27. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Example: a page that can be improved..

28. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall By using proximity to group related things

29. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Similarity

30. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Example: can you use similarity to improve this page?

31. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Yes: make the buttons the same size:

32. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Anything else?

33. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Yes: use the same font everywhere:

34. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Symmetry: we use our experience and expectations to make groups of things We see two triangles. We see three groups of paired square brackets.

35. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Continuity: flow, or alignment We see curves AB and CD, not AC and DB, and not AD and BC We see two rows of circles, not two L-shaped groups

36. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Can you use alignment (one form of continuity) to improve this page?

37. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Yes: the lines on the previous slide show how to use horizontal alignment

38. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall But why stop? Left-align both columns to get vertical alignment also

39. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Closure: we mentally “fill in the blanks” All are seen as circles

40. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Memory How many items, numbers can we hold in our head? What type of memory is important for interface design? What are the implications for interface design re the limitations of human memory? Are there any strategies designers can use to aid users?

41. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Memory Can you memorize this number? 63472316539845529

42. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Can you memorize this piece of text? FWSEC TRKVD WDFEXN

43. Memory early theories postulated two separate types - long term and short term short term memory was demonstrated to have finite capacity (7 +/- 2 ‘chunks’ of information) finite duration (decays even after 2 or 3 seconds) volatile (easily overwritten by by new information) capacity could be increased by ‘pattern building’ or encoding current theory shows memory as a hierarchical model

44. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Memory Hierarchical Model Sensory Short Term Long Term Practice and effort needed to make this transfer 

45. Short term or Working Memory limited number of items that can be held in an active state at any one time Need time to get information from sensory memory into working memory Need even more time to get items stored in working memory to be stored permantly Can overload working memory

46. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall 3564 + 456 -32 * 15 Answer = ??

47. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall “The Magic Number 7, Plus or Minus 2” George Miller, 1956 Can you remember this Vsdfnjejn7dknsdnd33s Unlikely but can you remember this

48. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall How many chunks in... www.bestbookbuys.com 20? Not really: www. best book buys.com

49. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Can you remember this 246846806802820402468 Unlikely but………

50. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Chunking and Patterns By doing this 2468 4680 6802 8204 02468 Now can you remember it?

51. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Recognition vs. recall Why is a multiple choice test easier than an essay test? Multiple choice: you can recognize the answer Essay: you must recall the answer A computer with a GUI allows us to recognize commands on a menu, instead of remembering them as in DOS and UNIX

52. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Memory aids Post-It ® notes In Windows ctrl- N (new) ctrl- C (copy) ctrl- S (save) Favorites List and bookmarks to store URLs Hyperlinks—if their wording indicates the content of the target page. (“Click here” is not a memory aid.)

53. Design Implications support user by reducing demands on working memory do not require user to remember temporary operating states and labels help the user remember how far the current task has progressed help the user remember what the system expects them to do next leads to the important principle of visibility of current state and feedback about current action Think how menus can alleviate memory limitations

54. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Attention Need to consider certain aspects of attention Focused and divided attention Focused Attention - The cocktail party syndrome Hearing your name in a crowded room whilst talking to someone Seeing someone out of the corner of your eye In both cases you have been distracted and may have to have the information repeated Alternatively can have divided attention. Can carry on conversation and observe what is going on – TV presenters – highly skilled We are all capable of this. Can you think of an example? Attention can also be voluntary or involuntary

55. Guiding Users Attention at the interface Since we know users can be distracted involuntarily we need to consider how we can Get their attention again Get them to focus on what they should be looking at Cognitive psychology provides a number of techniques which can be used reduce search time by structuring layout so user perceives meaningful components in information highlighting through dividers, windows, colour to emphasise structure alerting user to new or important information (look at me) using flashing, inverse video, auditory warnings

56. Guiding Users Attention at the interface By Location location of information on screen guided by its relative importance important requiring immediate attention - prominent less important - less prominent but in a consistent location much less important - not presented but available on request

57. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Interruptions Design Implications Focusing attention and handling interruptions are related to memory In website design you need to give cues or memory aids for resuming tasks: Back button Followed links change color When filling in forms, blank boxes show where to pick up the job

58. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Design Guidelines for the Web Lessen burden on user’s memory: Use recognition instead of recall Help users chunk information Require as little short-term memory as possible Provide visual clues and memory aids Provide feedback: let users know their input was received

59. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Mental Models How do people use knowledge to understand or make predictions about new situations? People build mental models For example, how to withdraw money from an ATM Can’t ignore user’s mental model And how do we know what the users’ mental models are? Through user testing.

60. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Mental Models Best way to demonstrate a users mental model is to ‘run’ a model Try this – how many windows or doors are there in the place where you live? Sometimes the user may have the wrong mental model!! Need to be aware of users mental models

61. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Mental Model Consider the following scenario. You have just arrived back to the UK after 14 days in temps of + 32 C. It is 6 C in the UK. You get into your car which has a digital temperature controlled heating system. (It allows you to set the temp you want in the car to between 18 C and 30 C.) You want to get the inside temp of the car to 23 C as quickly as possible as you drive home. What would you do?

62. Chapter 2: Capabilities of Human BeingsCopyright © 2004 by Prentice Hall Summary In this lecture we have established that cognitive psychology has an important role in interactive design Have recognised that we need to consider How humans process information Visual Perception Memory Attention Mental Models