Seng 5115 Spring 2011

1. Seng 5115Spring 2011 Cognitive Walkthrough Visual Design Theory

2. Agenda • Preview: deliverables, Usability Lab • Cognitive Walkthrough • Paper prototype demonstration • HCI Theory • Fitts' Law and Selection Techniques

3. Looking Ahead • Next week’s topic: Heuristic Evaluation • Next week’s deliverable: Initial Prototype and Walkthrough Scenarios

4. First Prototype • On paper • Have enough copies for TA and each team member • Key issue – how much detail needed for non-user evaluation • Needs to have all visible labels, menu items, controls to support walkthrough • Looking forward: will need to identify planned shortcuts, error messages for heuristic evaluation

5. Scenarios • Step-by-step instructions for completing two or more of the tasks in your prototype • Level of detail needed to accomplish without task knowledge • Cross check level of detail in prototype

6. March 11 – Usability Lab • Class will be in the Campus Usability Lab • B-26 Walter Library (basement)‏ • We'll go in two groups • 10-noon • noon-2pm • Email me your preference, if you have one. I'll try to respect preferences. • Please send me candidate interfaces for usability tests (with/without eye tracking)‏

8. Cognitive Walkthroughs • Directed at first-time use • Task-oriented • Requires (Lewis & Rieman) scenarios • “Will users be able to follow this scenario”? • Believable story? • Be aware of who users are (personas are helpful)

9. Seven Stages of Action Goals Evaluation of the interpretations Intention to act Interpreting the perception Sequence of actions Execution of the action sequence Perceiving the state of the world The World

10. The Seven Stages as Design Aids Ask yourself how easily can the user: Determine the function of the system? Tell if the system is in the desired state? Tell what actions are possible? Determine a mapping from system state to interpretation Determine a mapping from intention to physical action? Perform the action? Tell what state the system is in?

11. Cognitive Walkthrough Procedure • For each action in the scenario • “Tell the story” of why the user will do it • Ask critical questions (cf. 7 Stages of Action)‏ • Will users be trying to produce the effect? I.e., does the user understand that this step is needed to reach their goal? • Will users see the correct control? (visible) • Will users recognize that this is the control they’re after, i.e., that it will advance them toward their goal? • Or will they select a different control instead? • Will users understand the feedback? That is, will be they be able to tell that they achieved their intended goal or at least made progress toward it?

12. Quick example • Task: Understand the change made in a geographic edit on Cyclopath • Scenario: • Click on “Recent Changes” tab • Click “Changes” option • Click on description of the revision of interest • Click “Update” button • Click “Look at” button • Alternative clicking the “Before” and “After buttons” • (Zoom in if necessary)‏

13. Another example – Sharing my Google Calendar • Click on “Settings” • Click on “Calendar Settings” • Click on “Calendars” • Click on “Shared: Edit Settings” • Enter email address of person to share with • Set desired Permission Settings • Click “Save”

14. Making walkthroughs work • Get the scenarios right • Know your users • Be skeptical • Work together

15. Cognitive Walkthrough Benefits • Focuses on initial user experiences • Task-oriented – focus • Easy to learn; quick to do • Can do early in the process • Forces you to articulate assumptions about user knowledge and thought process • Will they really see the right control? Will they understand this *is* the right control? • Will they understand the labels? • Will they understand the feedback?

16. Cognitive Walkthrough Limits • Designers must understand their users • Focuses on first-time users • Identifies problems, doesn’t produce solutions

17. Exercise: Cognitive Walkthrough Analysis • In non-project groups of 3-5 • Users and Task to be announced • Scenario developed jointly • Perform walkthrough • identify problems • estimate error probabilities (25% intervals)‏ • Remember who your users are!

18. Debrief …

20. Graphic Design • Ideally, get a trained graphic designer • Use standard toolkits • Drupal, Wordpress, Joomla, ... • I know it when I (don’t) see it • Learn the basics yourself

24. Some principles • Contrast • Repetition • Alignment • Proximity

25. CRAP • Contrast • Emphasize important information • Make different things look different • Repetition • Consistency • Repeat design throughout the interface • Alignment • visually connect elements • create a visual flow • Proximity • group related elements, separate unrelated Robin Williams Non-Designers Design Book, Peachpit Press

26. Graphic Design – misc. • Simplicity / non-distracting • Don’t rely on color, use as a supplement • Angry fruit salad! • Don’t rely on sound

27. Original

28. Proximity

29. Alignment

30. Contrast

31. Repetition

33. HCI Theory • Theory in HCI? • Predictive theories • physical and cognitive models • Models of behavior • descriptive and evocative theories • Pragmatic goal: • Engineering / design guidance

34. Example Theories … • Norman’s 7-stages of Action • explains where to look for problems • Grounded Theory • Bottom-up: data -> “theory” • Activity Theory • based on Vygotsky’s psychology • actors, artifacts, mediation • Descriptive; organizational • Distributed Cognition

35. More examples (social) • Collective Effort Model • Group attachment: group identity or interpersonal bonds • Social identity • Social influence / compliance • Goal setting • …

36. The collective effort model as design inspiration Individualperformance Individualoutcomes High Prediction Rare Rated Individualvalue of outcomes Individualmotivation Individualeffort + Needs Work Contributionto group performance Individual valueof group outcomes Good Old Random Groupperformance Groupoutcomes

37. Selection • Selecting objects to interact with • Menu items • Icons • Mundane, yet ubiquitous task • Small improvements  big payoff • So lots of work to understand, analyze, and innovate

38. Theory • Fitts’ Law • Key factors • A – distance to the target • W – width of the target • Guide for innovation • Reduce A – bring target closer • Increase W – make the target biggerseW – make the target bigger

39. A W Windows Less Equivalent? Mac Greater “Simple” application • Windows menus vs. Mac menus u • So Windows faster, right? • No! Screen space and control space are not equivalent!

40. Assumptions… • Any path from the start to target position is acceptable • No time necessary to visually locate the target • Oops… both are (may be) false

41. Steering Law • The path to the target is important

42. Steering Law • There’s a “tunnel” that the user must stay within • This slows things down • Corners slow things down, too

43. Sometimes visually locating the target takes time • How to organize menu items • Adaptive menus? • Target rich environments

44. So, to create a better selection technique: • Reduce A (distance to target)‏ • Increase W (size of target)‏ • Get around the steering law • And remember: screen space != control space

45. Improving menu selection

46. Make items that are farther away bigger • As A increases, increase W • BUT: farther items get pushed even farther away!

47. Consider direction of mouse movement • Reduce A • Reduce length of the “tunnel” • Time reduced by 12% • But: • Users got confused

48. Pie Menus • www.piemenus.com • Reduce A • Time decreases by 15%, errors cut in half • Used in games • BUT: • Takes more screen space • Limited number of items • Hard to position near edge of screen

49. Force fields Mouse warping 17% time reduction

50. Something to consider… • Where do these numbers come from? • Do they matter? • (Will come back to this)‏