SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Tues, April 18, 2006

2. Today • Evaluation based on Cognitive Modeling • Keystroke-Level Model • low-level description of what users must do to perform a task. • GOMS • structured, multi-level description of what users must do to perform a task • Fitts’ Law • Used to predict time needed to select a target

3. Keystroke-level Model • Another “discount” usability method • Main idea: • Walk through the interface, counting how many operations it would take an expert user to perform • Look for ways to optimize • Look for potential sources of error • KLM is very low-level (tiny operations)

4. Keystroke-Level Model • How to make a KLM • List specific actions user does to perform task • Keystrokes and button presses • Mouse movements • Hand movements between keyboard & mouse • System response time (if it makes user wait) • Add Mental operators • Assign execution times to steps • Sum execution times • Only provides execution time and operator sequence Slide adapted from Chris Long

5. KLM Example • Replace all instances of a 4-letter word. • (example from Hochstein)

6. What is GOMS? • A family of user interface modeling techniques • Goals, Operators, Methods, and Selection rules • Higher-level than KLM • Input: detailed description of UI and task(s) • Output: various qualitative and quantitative measures Slide adapted from Chris Long

7. Applications of GOMS analysis • Compare UI designs • Profiling • Building a help system • GOMS modelling makes user tasks and goals explicit • Can suggest questions users will ask and the answers Slide adapted from Chris Long

8. What GOMS can model • Task must be goal-directed • Some activities are more goal-directed than others • Even creative activities contain goal-directed tasks • Task must a routine cognitive skill • Can include serial and parallel tasks Slide adapted from Chris Long

9. GOMS Output • Functionality coverage and consistency • Does UI contain needed functions? • Are similar tasks performed similarly? (NGOMSL only?) • Operator sequence • In what order are individual operations done? • Abstraction of operations may vary among models Slide adapted from Chris Long

10. Output (cont’d) • Execution time • By expert • Error recovery • Procedure learning time (NGOMSL only) • Accurate for relative comparison only • Does not include time for learning domain knowledge Slide adapted from Chris Long

11. How to do (CMN-)GOMS Analysis • Generate task description • Pick high-level user Goal • Write Method for accomplishing Goal - may invoke subgoals • Write Methods for subgoals • This is recursive • Stops when Operators are reached • Evaluate description of task • Apply results to UI • Iterate Slide adapted from Chris Long

12. Operators vs. Methods • Operator: the most primitive action • Method: requires several Operators or subgoal invocations to accomplish • Level of detail determined by • KLM level - keypress, mouse press • Higher level - select-Close-from-File-menu • Different parts of model can be at different levels of detail Slide adapted from Chris Long

13. GOMS Example 1: PDA Text Entry • goal: enter-text-PDA • move-pen-to-text-start • goal: enter-word-PDA • ...repeat until no more words • write-letter ...repeat until no more letters • [select: goal: correct-misrecognized-word] ...if incorrect • expansion of correct-misrecognized-word goal: • move-pen-to-incorrect-letter • write-letter Slide adapted from Chris Long

14. goal: draw-graph goal: draw-node ...repeat until no more nodes goal: draw-circle draw-circle-gesture goal: verify-circle-gesture [select: goal: correct-gesture] ...if misrecognized or drawn incorrectly goal: connect-node ...repeat until no more connections draw-line-gesture move-pen-to-node-just-drawn goal: name-node make-naming-gesture goal:enter-text GOMS Example 2: Graph Drawer Slide adapted from Chris Long

15. GOMS Example 2 • expansion of correct-gesture goal • move-pen-to-undo-button • tap-undo-button • goal: copy-node • move-pen-to-node • draw-copy-gesture • drag-pen-to-destination Slide adapted from Chris Long

16. GOMS Example 3 • Move text in a word processor • (example from Hochstein)

17. GOMS Example 3 • Move text in a word processor • (example from Hochstein)

18. GOMS Example 3 • Move text in a word processor • (example from Hochstein)

19. Other GOMS techniques • NGOMSL • Regularized level of detail • Formal syntax, so computer interpretable • Gives learning times • CPM-GOMS • Closer to level of Model Human Processor • Much more time consuming to generate • Can model parallel activities Slide adapted from Chris Long

20. Real-world GOMS Applications • KLM • Mouse-based text editor • Mechanical CAD system • NGOMSL • TV control system • Nuclear power plant operator’s associate • CPM-GOMS • Telephone operator workstation Slide adapted from Chris Long

21. Engineering Model of Human Performance • From The Psychology of Human-Computer Interaction, by Card, Moran, and Newell • Quantitative predictions • Usefully approximate • Based on the “Model Human Processor” Slide adapted from Chris Long

22. Advantages of GOMS • Gives several qualitative and quantitative measures • Model explains why the results are what they are • Less work than user study • Easy to modify when interface is revised • Research ongoing for tools to aid modeling process Slide adapted from Chris Long

23. Disadvantages of GOMS • Not as easy as heuristic analysis, guidelines, or cognitive walkthrough • Only works for goal-directed tasks • Assumes tasks are performed by expert users • Evaluator must pick users’ tasks/goals • Does not address several important UI issues, such as • readability of text • memorability of icons, commands • Does not address social or organizational impact Slide adapted from Chris Long

24. GOMS Summary • Provides info about many important UI properties • But does not tell you most of what you want to know about a UI • Substantial effort to do initial model, but still (potentially) easier than user testing • Changing later is much less work than initial generation Slide adapted from Chris Long

25. 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

26. 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

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

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

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

30. 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

31. 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.) Slide adapted from Pourang Irani

32. 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, by Fitt's Law. • When labels are not used, the tool icons crowd together. Slide adapted from Pourang Irani

33. 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

34. 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

35. Summary • We can use Cognitive Modeling to make predictions about interface usability • Complementary to Usability Studies • In practice: • GOMS not used often • Fitts law often used for determining best case for new kinds of input methods