SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Tues, April 6, 2004

2. Today • Evaluation based on Cognitive Modeling • Comparing Evaluation Methods

3. Another Kind of Evaluation • Evaluation based on Cognitive Modeling • Fitts’ Law • Used to predict a user’s time to select a target • Keystroke-Level Model • low-level description of what users would have to do to perform a task. • GOMS • structured, multi-level description of what users would have to do to perform a task

4. GOMS at a glance • Proposed by Card, Moran & Newell in 1983 • Apply psychology to CS • employ user model (MHP) to predict performance of tasks in UI • task completion time, short-term memory requirements • Applicable to • user interface design and evaluation • training and documentation • Example of • automating usability assessment Slide adapted from Melody Ivory

5. Model Human Processor (MHP) • Card, Moran & Newell (1983) • most influential model of user interaction • used in GOMS analysis • 3 interacting subsystems • cognitive, perceptual & motor • each with processor & memory • described by parameters • e.g., capacity, cycle time • serial & parallel processing Slide adapted from Melody Ivory Adapted from slide by Dan Glaser

6. Original GOMS (CMN-GOMS) • Card, Moran & Newell (1983) • Engineering model of user interaction • Goals - user’s intentions (tasks) • e.g., delete a file, edit text, assist a customer • Operators - actions to complete task • cognitive, perceptual & motor (MHP) • low-level (e.g., move the mouse to menu) Slide adapted from Melody Ivory

7. CMN-GOMS • Engineering model of user interaction (continued) • Methods - sequences of actions (operators) • based on error-free expert • may be multiple methods for accomplishing same goal • e.g., shortcut key or menu selection • Selections - rules for choosing appropriate method • method predicted based on context • hierarchy of goals & sub-goals Slide adapted from Melody Ivory

8. Keystroke-Level Model • Simpler than CMN-GOMS • Model was developed to predict time to accomplish a task on a computer • Predicts expert error-free task-completion time with the following inputs: • a task or series of subtasks • method used • command language of the system • motor-skill parameters of the user • response-time parameters of the system • Prediction is the sum of the subtask times and overhead

9. t sec. KLM-GOMS (What Raskin refers to as GOMS) Keystroke level model 1. Predict 2. Evaluate x sec. Action 1 Action 2 y sec. Action 3 + z sec. Time using interface 1 Time using interface 2 Slide adapted from Newstetter & Martin, Georgia Tech

10. Raskin excludes Symbols and values Remarks Time (s) Operator Press Key Mouse Button Press Point with Mouse Home hand to and from keyboard Drawing - domain dependent Mentally prepare Response from system - measure 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Assumption: expert user Slide adapted from Newstetter & Martin, Georgia Tech

11. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Raskin’s rules Rule 0: Initial insertion of candidate M’s M before K M before P iff P selects command i.e. not when P points to arguments Rule 1: Deletion of anticipated M’s If an operator following an M is fully anticipated, delete that M. e.g. when you point and click Slide adapted from Newstetter & Martin, Georgia Tech

12. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Raskin’s rules Rule 2: Deletion of M’s within cognitive units If a string of MK’s belongs to a cognitive unit, delete all M’s but the first. e.g. 4564.23 Rule 3: Deletion of M’s before consecutive terminators If a K is a redundant delimiter, delete the M before it. e.g. )’ Slide adapted from Newstetter & Martin, Georgia Tech

13. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Raskin’s rules Rule 4: Deletion of M’s that are terminators of commands If K is a delimiter that follows a constant string, delete the M in front of it. Rule 5: Deletion of overlapped M’s Do not count any M that overlaps an R. Slide adapted from Newstetter & Martin, Georgia Tech

14. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Example 1 Temperature Converter Choose which conversion is desired, then type the temperature and press Enter. Convert F to C. Convert C to F. Apply Rule 0 HPBHKKKKK HMPMBHMKMKMKMKMK Apply Rules 1 and 2 HMPBHMKKKKMK Convert to numbers .4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2 =7.15 Slide adapted from Newstetter & Martin, Georgia Tech

15. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Example 1 Temperature Converter Choose which conversion is desired, then type the temperature and press Enter. Convert F to C. Convert C to F. Apply Rule 0 HPBHKKKKK HMPMBHMKMKMKMKMK Apply Rules 1 and 2 HMPBHMKKKKMK Convert to numbers .4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2 =7.15 Slide adapted from Newstetter & Martin, Georgia Tech

16. Example 2 • GUI temperature interface • Assume a button for compressing scale • Ends up being much slower • 16.8 seconds/avg prediction

17. Using KLM and Information Theory to Design More Efficient Interfaces (Raskin) • Armed with knowledge of the minimum information the user has to specify: • Assume inputting 4 digits on average • One more keystroke for C vs. F • Another keystroke for Enter • Can we design a more efficient interface?

18. Using KLM to Make More Efficient Interfaces • First Alternative: To convert temperatures, Type in the numeric temperature, Followed by C for Celcius or F for Fahrenheit. The converted Temperature will be displayed. MKKKKMK = 3.7 sec

19. Using KLM to Make More Efficient Interfaces • Second Alternative: • Translates to both simultaneously C F MKKKK = 2.15 sec

20. GOMS in Practice • Mouse-driven text editor (KLM) • CAD system (KLM) • Television control system (NGOMSL) • Minimalist documentation (NGOMSL) • Telephone assistance operator workstation (CMP-GOMS) • saved about $2 million a year Slide adapted from Melody Ivory

21. Drawbacks • Assumes an expert user • Assumes an error-free usage • Overall, very idealized

22. Fitts’ Law Models movement time for selection tasks • The movement time for a well-rehearsed selection task • increases as the distance to the target • increases • decreases as the size of the target • increases Slide adapted from Newstetter & Martin, Georgia Tech

23. Fitts’ Law Time (in msec) = a + b log2(D/S+1) where a, b = constants (empirically derived) D = distance S = size ID is Index of Difficulty = log2(D/S+1) Slide adapted from Newstetter & Martin, Georgia Tech

24. Fitts’ Law Time = a + b log2(D/S+1) Target 1 Target 2 Same ID → Same Difficulty Slide adapted from Pourang Irani

25. Fitts’ Law Time = a + b log2(D/S+1) Target 1 Target 2 Smaller ID → Easier Slide adapted from Pourang Irani

26. Fitts’ Law Time = a + b log2(D/S+1) Target 1 Target 2 Larger ID → Harder Slide adapted from Pourang Irani

27. Determining Constants for Fitts’ Law • To determine a and b design a set of tasks with varying values for D and S (conditions) • For each task condition • multiple trials conducted and the time to execute each is recorded and stored electronically for statistical analysis • Accuracy is also recorded • either through the x-y coordinates of selection or • through the error rate — the percentage of trials selected with the cursor outside the target Slide adapted from Pourang Irani

28. A Quiz Designed to Give You Fitts • http://www.asktog.com/columns/022DesignedToGiveFitts.html • Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least one reason why labeled tools can be accessed faster. (Assume, for this, that the user knows the tool and does not need the label just simply to identify the tool.) Slide adapted from Pourang Irani

29. A Quiz Designed to Give You Fitts • The label becomes part of the target. The target is therefore bigger. Bigger targets, all else being equal, can always be acccessed faster. Fitt's Law. • When labels are not used, the tool icons crowd together. Slide adapted from Pourang Irani

30. A Quiz Designed to Give You Fitts • You have a palette of tools in a graphics application that consists of a matrix of 16x16-pixel icons laid out as a 2x8 array that lies along the left-hand edge of the screen. Without moving the array from the left-hand side of the screen or changing the size of the icons, what steps can you take to decrease the time necessary to access the average tool? Slide adapted from Pourang Irani

31. A Quiz Designed to Give You Fitts • Change the array to 1X16, so all the tools lie along the edge of the screen. • Ensure that the user can click on the very first row of pixels along the edge of the screen to select a tool. There should be no buffer zone. Slide adapted from Pourang Irani

32. Comparing Evaluation Methods Jeffries et al., 1991

33. Comparing Evaluation Methods • “User Interface Evaluation in the Real World: A Comparison of Four Techniques” (Jeffries et al., CHI 1991) • Compared: • Heuristic Evaluation (HE) • 4 evaluators, 2 weeks time • Software Guidelines (SG) • 3 software engineers, familiar with Unix • Cognitive Walkthrough (CW) • 3 software engineers, familiar with Unix • Usability Testing (UT) • Usability professional, 6 participants • The Interface: • HP-VUE, a GUI for Unix (beta version)

34. Comparing Evaluation MethodsJeffries et al., CHI ‘91

35. Comparing Evaluation MethodsJeffries et al., CHI ‘91 On a 9 point scale Higher is more critical

36. Comparing Evaluation MethodsJeffries et al., CHI ‘91

37. Comparing Evaluation MethodsJeffries et al., CHI ‘91

38. Comparing Evaluation MethodsJeffries et al., CHI ‘91 • Conclusions: • HE is best from a cost/benefit analysis, but requires access to several experienced designers • Usability testing second best – found recurring, general, and critical errors but is expensive to conduct • Guideline-based evaluators missed a lot but did not realize this • They were software engineers, not usability specialists • Cognitive walkthrough process was tedious