Design 4: Human Capabilities & Design Patterns

1. Design 4: Human Capabilities & Design Patterns

2. Objectives By the end of this class, you will be able to… • Explain several design guidelines based on human capabilities • Apply the guidelines to design & critique user interfaces

3. 1. Bringing cognitive psychology knowledge to HCI 3

4. Core cognitive aspects • Attention • Perception and recognition • Memory • Reading, speaking and listening • Problem-solving, planning, reasoning and decision-making, learning Here we focus on the first 3, plus a bit about reasoning / problem solving

5. Attention • Selecting things to concentrate on • Can be focused or divided • Spotlight model: visual attention is like a spotlight directed towards targets

6. Attention • We are more likely to notice something if • We are attending to it • It is salient (bright, loud, or otherwise noticeable) • We have a limited ability to keep track of events (limited number of spotlights)

7. Change Blindness • We can LOOK but not SEE • E.g. drivers running into pedestrians • To see something, we need to attend to it • A ‘mud splash’ or other disruption can make changes especially hard to see

8. Attention: Design implications • Make information stand out when it needs attending to or is important • Use colour, ordering, spacing, underlining, sequencing and animation • Avoid cluttering the interface - follow google.com example of crisp, simple design • Group features together • Show icons for group headings and commonly used functions • Allow users to customize

9. Too many icons

10. Over-use of graphics

11. Clean, simple design

12. Perception and recognition • How information is acquired from the world and transformed into experiences • Obvious implication is to design representations that are readily perceivable, e.g. • Text should be legible • Icons should be easy to distinguish and read • Information should be organized • We discussed perception quite a lot last lecture (e.g. colour perception, grouping)

13. Perceptual Grouping • We group objects that are… Close to each other (proximity) Similar Connected

14. Memory • Involves encoding and recalling knowledge • Short term and long term • We don’t remember everything - involves filtering and processing • Context affects memory • Recognition easier than recall • Benefit of GUI over command-based interfaces • We are better at remembering… • Images rather than words • Familiar things

15. Example: Setting a Font • Type in font name: • Hard to remember

16. Menus gone crazy!

17. Better choice

18. Memory Excercise • Int heb ack oft heb oxi sat oy • In the back of the box is a toy

19. Classic ‘72’ • George Miller’s theory of how much information people can remember • 72 chunks of information (e.g. 7 digit phone numbers) • Short-term memory • People’s immediate memory capacity is very limited • Useful finding for interaction design?

20. What some designers get up to… • Present only 7 options on a menu • Display only 7 icons on a tool bar • Have no more than 7 bullets in a list • Place only 7 items on a pull down menu • Place only 7 tabs on the top of a website page • But this is wrong? Why?

21. Why? • Inappropriate application of the theory • People can scan lists of bullets, tabs, menu items till they see the one they want • They don’t have to recall them from memory • Often a small number of items is good design • But it depends on task and available screen estate

22. More appropriate application of memory research • File management and retrieval is a real problem to most users • Memory involves 2 processes • recall-directed and recognition-based scanning • File management systems should be designed to optimize both kinds of memory processes

23. Properties / functions of a good file browser? • Facilitate existing memory strategies and try to assist users when they get stuck • Flexible search (partial name, date, type, suggest alternates…) • Enable file browsing • Help users encode files in richer ways • Provide them with ways of saving files using colour, flagging, image, flexible text, time stamping, etc

24. Mental models • Users develop an understanding of a system through learning & using it • Knowledge is often described as a mental model • How to use the system (what to do next) • What to do with unfamiliar systems or unexpected situations (how the system works) • People make inferences using mental models of how to carry out tasks

25. Exercise: ATMs • Write down how an ATM works • How much money are you allowed to take out? • What denominations? • If you went to another machine and tried the same what would happen? • What information is on the strip on your card? How is this used? • What happens if you enter the wrong number? • Why are there pauses between the steps of a transaction? What happens if you try to type during them? • Why does the card stay inside the machine? • Do you count the money? Why?

26. How did you fare? • Your mental model • How accurate? • How similar? • How shallow? • Payne (1991) did a similar study and found that people frequently resort to analogies to explain how they work • People’s accounts greatly varied and were often ad hoc

27. User & Design Models • User model – a user’s conceptual model • Design model – a designer’s conceptual model • How is the design model conveyed to the user? • Through the system image (interface)

28. The design principle of transparency • • NOT to be understood as literal • useful feedback • • easy to understand • • intuitive to use • • clear & easy to follow instructions • • appropriate online help • • context sensitive guidance of how to proceed when stuck

29. Make the system model visible through the interface. Why? • Experiment by Halasz & Moran: • Task: solve problems using a ‘stack calculator’ • 2 groups of participants: both groups were taught step-by-step procedures • One group was also given a model of how the calculator works • Both groups did well on routine problems, but the group with the model did better on novel problems

30. External cognition • Concerned with explaining how we interact with external representations (e.g. maps, notes, diagrams) • Q: How do maps / notes / diagrams help us? Why not just keep them in our head? Think of some examples.

31. Externalizing to reduce memory load • Diaries, reminders, calendars, notes, shopping lists, to-do lists, Post-its, piles, marked emails • Location may indicate priority & type of reminder • External representations: • Remind us that we need to do something (e.g. to buy something for Father’s day) • Remind us of what to do (e.g. buy a card) • Remind us when to do something (e.g. send a card by a certain date)

32. Computational offloading • When a tool is used in conjunction with an external representation to carry out a computation (e.g. pen and paper) • Try doing the two sums below (a) in your head, (b) on a piece of paper and c) with a calculator. • 234 x 456 =?? • CCXXXIIII x CCCCXXXXXVI = ??? • Which is easiest and why? Both are identical sums

33. Annotation and cognitive tracing • Annotation involves modifying existing representations through making marks • e.g. crossing off, ticking, underlining • Cognitive tracing involves externally manipulating items into different orders or structures • e.g. playing scrabble, playing cards

34. Design implication • Provide external representations at the interface that reduce memory load and facilitate computational offloading • e.g. Information visualizations have been designed to allow people to make sense and rapid decisions about masses of data • Offload cognitive operations to the perceptual system

35. Interface Design Patterns • Many interface problems crop up again and again • Use existing patterns when possible • E.g. http://www.cs.helsinki.fi/u/salaakso/patterns/index.html

36. Key Points • When designing interfaces… • Support recognition rather than recall • Make important items stand out from the rest • Make system functionality transparent, via the interface • Represent information visually so the user does not need to remember it or think about it, they can just see it • Re-use existing interface design patterns