1 / 41

Lecture 4: Efficiency

Lecture 4: Efficiency. UI Hall of Fame or Shame?. Source: Interface Hall of Shame. Hall of Shame. Source: Interface Hall of Shame. Hall of Fame or Shame?. Source: Interface Hall of Shame. Hall of Fame. Nanoquiz. closed book, closed notes submit before time is up (paper or web)

delora
Download Presentation

Lecture 4: Efficiency

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 4: Efficiency 6.813/6.831 User Interface Design and Implementation

  2. UI Hall of Fame or Shame? Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  3. Hall of Shame Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  4. Hall of Fame or Shame? Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  5. Hall of Fame 6.813/6.831 User Interface Design and Implementation

  6. Nanoquiz closed book, closed notes submit before time is up (paper or web) we’ll show a timer for the last 20 seconds

  7. 11 20 19 18 17 16 15 14 13 12 10 7 1 9 8 0 2 5 4 3 6 NQ2 Perceptual fusion is closely related to: (choose all good answers) A. Response time B. Frame rate C. Efficiency D. Feedback 2. Suppose visitors to your shopping site are consistently having trouble finding the checkout link to buy what’s in their shopping cart. Five consultants each propose different solutions. Who should you NOT hire? (i.e., choose all BAD answers) “Move the link to a different place on the page, making sure it’s outside the usual locus of attention.” “Give the link more affordances for clicking. “ “Increase the link’s information scent.” “Make the link’s URL longer, so that it’s more visible.” “Add a help message to the home page of the web site explaining where the link can be found.” 3. All other things equal, which of these locations for a mode indicator is likely to be most effective for preventing mode errors? (choose one best answer) A. keyboard B. status bar C. mouse cursor D. menubar

  8. Today’s Topics • Human information processing • Pointing efficiency • Fitts’s Law & Steering Law • Design principles • Shortcuts • Defaults, history, and anticipation • Anticipation • Predicting efficiency • Keystroke-level model 6.813/6.831 User Interface Design and Implementation

  9. Human Information Processing Attention Short-term Sensory Store PerceptualProcessor CognitiveProcessor MotorProcessor Senses Long-term Memory Working Memory Muscles Feedback 6.813/6.831 User Interface Design and Implementation

  10. Processors • Processors have a cycle time • Tp ~ 100ms [50-200 ms] • Tc ~ 70ms [30-100 ms] • Tm ~ 70ms [25-170 ms] • Processor speed varies by person and conditions • Fastest may be 10x slowest PerceptualProcessor CognitiveProcessor MotorProcessor 6.813/6.831 User Interface Design and Implementation

  11. Perceptual Fusion • Two stimuli within the same PP cycle (Tp ~ 100ms) appear fused • Causality is strongly influenced by fusion 6.813/6.831 User Interface Design and Implementation

  12. Cognitive Processing • Cognitive processor • compares stimuli • selects a response • Types of decision making • Skill-based • Rule-based • Knowledge-based 6.813/6.831 User Interface Design and Implementation

  13. Motor Processing • Open-loop control • Motor processor runs a program by itself • cycle time is Tm ~ 70 ms • Closed-loop control • Muscle movements (or their effect on the world) are perceived and compared with desired result • cycle time is Tp + Tc + Tm ~ 240 ms 6.813/6.831 User Interface Design and Implementation

  14. Fitts’s Law • Fitt’s Law • Time T to move your hand to a target of size S at distance D away is: T = RT + MT = a + b log (D/S + 1) • Depends only on index of difficulty log(D/S + 1) D S 6.813/6.831 User Interface Design and Implementation

  15. Explanation of Fitts’s Law • Moving your hand to a target is closed-loop control • Each cycle covers remaining distance D with error εD … εD ε2D εnD D S 6.813/6.831 User Interface Design and Implementation

  16. Implications of Fitts’s Law • Targets at screen edge are easy to hit • Mac menubar beats Windows menubar • Unclickable margins are foolish • Linear popup menus vs. pie menus 6.813/6.831 User Interface Design and Implementation

  17. Steering Tasks • Time T to move your hand through a tunnel of length D and width S is: T = a + b D/S • Index of difficulty is now linear, not logarithmic • So steering is much harder than pointing • Thus cascading submenus are hard to use D … S d d εd 6.813/6.831 User Interface Design and Implementation

  18. Speed-Accuracy Tradeoff • Accuracy varies with reaction time • Here, accuracy is probability of slip or lapse • Can choose any point on curve • Can move curve with practice log(P(correct)/P(error)) moves up with practice Reaction time 6.813/6.831 User Interface Design and Implementation

  19. Power Law of Practice • Time Tn to do a task the nth time is: Tn = T1 n –α α is typically 0.2-0.6 6.813/6.831 User Interface Design and Implementation

  20. Improve Mouse Efficiency • Make frequently-used targets big • Use snapping in drawing editors • Put targets used together near each other • Use screen corners and screen edges • Avoid steering tasks 6.813/6.831 User Interface Design and Implementation

  21. Keyboard Shortcuts • Keyboard commands • Menu accelerators 6.813/6.831 User Interface Design and Implementation

  22. Command Aggregates • Styles • Scripts • Bookmarks 6.813/6.831 User Interface Design and Implementation

  23. Aggregating Questions 6.813/6.831 User Interface Design and Implementation

  24. Use Defaults and History • Use defaults • Initially, most likely entry • After use, previous entry • Keep histories • Offer autocompletion Source: Interface Hall of Shame 6.813/6.831 User Interface Design and Implementation

  25. Anticipation 6.813/6.831 User Interface Design and Implementation

  26. Predictive Evaluation • Predictive evaluation uses an engineering model of human cognition to predict usability • In this case, we’ll predict efficiency • The engineering model is • abstract • quantitative • approximate • estimated from user experiments MP PP CP ~100 ms ~70 ms ~70 ms 6.813/6.831 User Interface Design and Implementation

  27. Advantages of Predictive Evaluation • Don’t have to build UI prototype • Can compare design alternatives with no implementation whatsoever • Don’t have to test real live users • Theory provides explanations of UI problems • So it points to the areas where design can be improved • User testing may only reveal problems, not explain them 6.813/6.831 User Interface Design and Implementation

  28. Keystroke-Level Model (KLM) • Keystroke • Button press or release with mouse • Point with mouse • Draw line with mouse • Home hands between mouse and keyboard • Mentally prepare 6.813/6.831 User Interface Design and Implementation

  29. KLM Analysis • Encode a method as a sequence of physical operators (KPHD) • Use heuristic rules to insert mental operators (M) • Add up times for each operator to get total time for method 6.813/6.831 User Interface Design and Implementation

  30. Estimated Operator Times • Keystroke determined by typing speed 0.28 s average typist (40 wpm) 0.08 s best typist (155 wpm) 1.20 s worst typist • Button press or release 0.1 s highly practiced, no need to acquire button • Pointing determined by Fitts’s Law T = a + blog(d/s + 1) = a + b ID 0.8 + 0.1 ID [Card 1978] 0.1 + 0.4 ID [Epps 1986] -0.1 + 0.2 ID [MacKenzie 1990, mouse selection] 0.14 + 0.25 ID [MacKenzie 1990, mouse dragging] OR T ~ 1.1 s for all pointing tasks • Drawing determined by steering law 6.813/6.831 User Interface Design and Implementation

  31. Estimated Operator Times • Homing estimated by measurement 0.4 s (between keyboard and mouse) • Mental preparation estimated by measurement 1.2 s 6.813/6.831 User Interface Design and Implementation

  32. Heuristic Rules for adding M’s • Basic idea: • M before every chunk in the method that must be recalled from long-term memory or that involves a decision • Before each task or subtask • Deciding which way to do a task • Retrieving a chunk from memory • Command name • File name • Parameter value • Finding something on screen • So P is often preceded by M • Unless the location is well-known from practice, in which case the visual search is overlapped with the motor action • Verifying entry or action result • e.g. before pressing OK on a dialog 6.813/6.831 User Interface Design and Implementation

  33. Del key N times M P [start of word] BB [click] H M K [Del] x n [length of word] Total: 2M+P+2B+H+nK = 4.36 + 0.28n sec Example: Deleting a Word • Shift-click selection M P [start of word] BB [click] M P [end of word] K [shift] BB [click] H [to keyboard] M K [Del] • Total: 3M + 2P + 4B + 1K = 6.93 sec 6.813/6.831 User Interface Design and Implementation

  34. Empirical Validation of KLM Source: Card, Moran & Newell 6.813/6.831 User Interface Design and Implementation

  35. Applications of KLM • Comparing designs & methods • Parametric analysis T Del n times Shift-click n 6.813/6.831 User Interface Design and Implementation

  36. Limitations of KLM • Only expert users doing routine (well-learned) tasks • Only measures efficiency • Not learnability, memorability, errors, etc. • Ignores • errors (methods must be error-free) • parallel action (shift-click) • mental workload (e.g. attention & WM limits) • planning & problem solving (how does user select the method?) • fatigue 6.813/6.831 User Interface Design and Implementation

  37. CPM-GOMS • CPM-GOMS models parallel operations • e.g. point & shift-click • Uses parallel cognitive model • each processor is serial • different processors run in parallel MP left hand PP CP MP right hand MP eyes 6.813/6.831 User Interface Design and Implementation

  38. Critical Path Determines Time 0 perceivetarget perceivecursor PP 100 100 start eye move start mouse move verifytarget start Shift press CP 50 50 50 50 move mouse MPright 480 pressShift MPleft 100 move eye to target MP eye 30 6.813/6.831 User Interface Design and Implementation

  39. Analysis of Phone Operator Workstation • Phone company considering redesign of a workstation (keyboard + software) for telephone operators (411 service) • Reduced keystrokes needed for common tasks • Put frequently-used keys closer to user’s fingers • But new design was 4% slower than old design = 1 sec/call = $3 million/year • Keystroke-level model has no explanation • But CPM-GOMS explained why: • Keystrokes removed were not on the critical path • Used during slack time, while greeting customer • A keystroke was moved from the beginning of call (during slack time) to later (putting it on the critical path) 6.813/6.831 User Interface Design and Implementation

  40. Summary • Mouse movement • Pointing depends on distance and size • Steering is exponentially harder than pointing • Design principles • Shortcuts • Defaults, history, and anticipation • Predictive evaluation uses abstract models to predict usability quantities • KLM and CPM-GOMS model efficiency for expert users 6.813/6.831 User Interface Design and Implementation

  41. Next Time: UI Hall of Fame or Shame? 6.813/6.831 User Interface Design and Implementation

More Related