How to use the Keystroke Level Model      to measure and compare  the efficiency of user interfaces.       Sebastian Daum -...
About me Sebastian Daum • Immigrated from Germany to Poland 2 1/2 years ago • Studied Digital Media • UX Consultant at For...
Make predictions of task execution times        for a specific UI design.
Efficiency is the speed with which a user can           accomplish a given task.
Two (often conflictive) usability goalsEase of learning          Ease-of-use (efficiency)
Why do we want to measure efficiency?       To cost-justify development costs
Why do we want to measure efficiency? To select the most efficient UI design among several options
Keystroke Level Modeling
Iterative process               AssessDesign    Productivity increased   YES   Implement               by desired         ...
Keystroke Level[Decomposition of larger tasks, likefilling in a webform into millisecond             level actions]
KLM - How to use=
KLM - How to use1. Count all of the physical operations   Point      Operator 1   [time]    + Operator 2   [time]         ...
KLM - How to use1. Count all of the physical operations     Point      Operator 1   [time]    + Operator 2   [time]       ...
KLM - How to use1. Count all of the physical operations   Point    Operator 1   [time]  + Operator 2   [time]             ...
KLM-OperatorsKKeystrokeBetween 0.12 and 1.2 sec.
KLM-Operators    PK   Pointing        1.1 sec.
KLM-Operators        B    PK        Press or release mouse button        0.1 sec.
KLM-Operators            H        B    P       Home hands to keyboard or mouseK           0.4 sec.
KLM-Operators                M            H   Routine thinking        B       or perception    P           1.2 sec.K
KLM-Operators                    W (t)                M    Waiting for the system to respond            H        B        ...
KLM exampleSearch for train connection on PKP.pl
KLM exampleFrom: Krakow main stationTo:   Wroclaw main stationDate: 06.12., 19:00
KLM example
KLM exampleAssumption: Hands on keyboard1. Home mouse                        H + 0.4 sec.2. Point the mouse to the “From”-...
KLM example4. Home keyboard      H + 0.4 sec.5. Type “Krakow”     7K + 1.96 sec.
KLM example6. Press TAB-key      K + 0.28 sec.7. Type “Wroclaw”     8K + 2.24 sec.
KLM example8. Home mouse                   H + 0.4 sec.9. Move mouse                   P + 1.1 sec.10. Click on calendar i...
KLM example11. Move mouse                 P + 1.1 sec.12. Click to change month     BB + 0.2 sec.13. Move mouse           ...
KLM example15. Move mouse to 6th of december    P + 1.1 sec.16. Click to set date               BB + 0.2 sec.
KLM example17. Move mouse to “Time”-input box          P + 1.1 sec.18. Triple-click to select default value   3BB + 0.6 sec.
KLM example19. Home keyboard                        H + 0.4 sec.20. Replace default value with “19.00”   5K + 1.4 sec.
KLM example21. Press TAB-key to put focus on “Search”-button   K + 0.28 sec.
KLM example22. Press “Return”-key to execute search K + 0.28 sec.                                                 K + 0.28...
KLM example23. Home mouse                       H + 0.4 sec.24. Move mouse to 2nd “Search”-button P + 1.1 sec.25. Click to...
KLM example             The physical operators involved:Only             H + P + BB + H + 7K + K + 8K + H + P + BB + P +ob...
KLM example             The physical operators involved:Only             H + P + BB + H + 7K + K + 8K + H + P + BB + P +ob...
KLM example             The physical operators involved:             H + P + BB + H + 7K + K + 8K + H + P + BB + P +      ...
KLM exampleThe physical operators involved:H + P + BB + H + 7K + K + 8K + H + P + BB + P +BB + P + BB + P + BB + P + 3BB +...
KLM exampleA more efficient search form.
KLM example              Place cursor in input              field on page load
KLM example              Show autosuggestions
KLM example              Same for destination
KLM example              Show date picker              when user click into              the input field
KLM example              Show 2 months at              once instead of a single              month
KLM example              Change 2 months at              once when user clicks              on the arrow
KLM example              Replace ‘time’ input              field with a dropdown
KLM exampleTake information fromthe 2nd screen intothe search form
KLM example              Increase size and              visibility of search              button
Comparison between the 2 forms      pkp.pl                     My search form352821           3314                        ...
Comparison between the 2 forms      pkp.pl                     My search form35282114           33                        ...
Comparison between the 2 forms      pkp.pl                   My search form35282114         27.54                         ...
A penny saved is a penny earned :-)12 sec.
A penny saved is a penny earned :-)          100 / day12 sec.               20 min.
A penny saved is a penny earned :-)          100 / day             p.a.12 sec.               20 min.                      ...
A penny saved is a penny earned :-)          100 / day             p.a.12 sec.               20 min.Predict the Return-on-...
Constraints• Fastest times
Constraints• Fastest times• Highly trained and experienced users
Constraints• Fastest times• Highly trained and experienced users• Error- and interruption-free
+   -
+               -• Delivers accurate predictions
+               -• Delivers accurate predictions• Numbers to convince clients /support sales
+               -• Delivers accurate predictions• Numbers to convince clients /support sales• Easy to use
+                  -• Delivers accurate predictions• Numbers to convince clients /support sales• Easy to use• Apply early ...
+                  -• Delivers accurate predictions• Numbers to convince clients /support sales• Easy to use• Apply early ...
+                                   -• Delivers accurate predictions       • Not applicable in all situations• Numbers to ...
+                                   -• Delivers accurate predictions       • Not applicable in all situations• Numbers to ...
+                                   -• Delivers accurate predictions       • Not applicable in all situations• Numbers to ...
Make KLM estimations quickly• UI prototyping tool• Automatically evaluates your design with a predictive human performance...
What’s thepoint?
What’s thepoint?             KLM/CogTool             help you to             easily evaluate             your UI.
Why shouldyou care?
Why shouldyou care?             Higher ROI,             save time &             money.
Thank you!
How to use the Keystroke-Level Model to compare the efficiency of user interfaces
How to use the Keystroke-Level Model to compare the efficiency of user interfaces
Upcoming SlideShare
Loading in...5
×

How to use the Keystroke-Level Model to compare the efficiency of user interfaces

4,334

Published on

Prezentacja Sebastiana Dauma z Fortune Cookie Poland w ramach World Usability Day we Wrocławiu

Published in: Technology

Transcript of "How to use the Keystroke-Level Model to compare the efficiency of user interfaces"

  1. 1. How to use the Keystroke Level Model to measure and compare the efficiency of user interfaces. Sebastian Daum - Fortune Cookie Poland
  2. 2. About me Sebastian Daum • Immigrated from Germany to Poland 2 1/2 years ago • Studied Digital Media • UX Consultant at Fortune Cookie Poland since May 2011 • Happy to be here today! sebastian.daum@fortunecookie.pl
  3. 3. Make predictions of task execution times for a specific UI design.
  4. 4. Efficiency is the speed with which a user can accomplish a given task.
  5. 5. Two (often conflictive) usability goalsEase of learning Ease-of-use (efficiency)
  6. 6. Why do we want to measure efficiency? To cost-justify development costs
  7. 7. Why do we want to measure efficiency? To select the most efficient UI design among several options
  8. 8. Keystroke Level Modeling
  9. 9. Iterative process AssessDesign Productivity increased YES Implement by desired degree? NO
  10. 10. Keystroke Level[Decomposition of larger tasks, likefilling in a webform into millisecond level actions]
  11. 11. KLM - How to use=
  12. 12. KLM - How to use1. Count all of the physical operations Point Operator 1 [time] + Operator 2 [time] Click + Operator 3 [time] + Operator 4 [time] Type=
  13. 13. KLM - How to use1. Count all of the physical operations Point Operator 1 [time] + Operator 2 [time] Click + Operator 3 [time] + Operator 4 [time] Type2. Add mental acts where required Remember + Act of thinking / perception [time] Perceive=
  14. 14. KLM - How to use1. Count all of the physical operations Point Operator 1 [time] + Operator 2 [time] Click + Operator 3 [time] + Operator 4 [time] Type2. Add mental acts where required Remember + Act of thinking / perception [time] Perceive= Overall task execution time
  15. 15. KLM-OperatorsKKeystrokeBetween 0.12 and 1.2 sec.
  16. 16. KLM-Operators PK Pointing 1.1 sec.
  17. 17. KLM-Operators B PK Press or release mouse button 0.1 sec.
  18. 18. KLM-Operators H B P Home hands to keyboard or mouseK 0.4 sec.
  19. 19. KLM-Operators M H Routine thinking B or perception P 1.2 sec.K
  20. 20. KLM-Operators W (t) M Waiting for the system to respond H B t must be determined PK
  21. 21. KLM exampleSearch for train connection on PKP.pl
  22. 22. KLM exampleFrom: Krakow main stationTo: Wroclaw main stationDate: 06.12., 19:00
  23. 23. KLM example
  24. 24. KLM exampleAssumption: Hands on keyboard1. Home mouse H + 0.4 sec.2. Point the mouse to the “From”-field P + 1.1 sec.3. Click into “From”-field BB + 0.2 sec.
  25. 25. KLM example4. Home keyboard H + 0.4 sec.5. Type “Krakow” 7K + 1.96 sec.
  26. 26. KLM example6. Press TAB-key K + 0.28 sec.7. Type “Wroclaw” 8K + 2.24 sec.
  27. 27. KLM example8. Home mouse H + 0.4 sec.9. Move mouse P + 1.1 sec.10. Click on calendar icon BB + 0.2 sec.
  28. 28. KLM example11. Move mouse P + 1.1 sec.12. Click to change month BB + 0.2 sec.13. Move mouse P + 1.1 sec.14. Click to change month BB + 0.2 sec.
  29. 29. KLM example15. Move mouse to 6th of december P + 1.1 sec.16. Click to set date BB + 0.2 sec.
  30. 30. KLM example17. Move mouse to “Time”-input box P + 1.1 sec.18. Triple-click to select default value 3BB + 0.6 sec.
  31. 31. KLM example19. Home keyboard H + 0.4 sec.20. Replace default value with “19.00” 5K + 1.4 sec.
  32. 32. KLM example21. Press TAB-key to put focus on “Search”-button K + 0.28 sec.
  33. 33. KLM example22. Press “Return”-key to execute search K + 0.28 sec. K + 0.28 sec.
  34. 34. KLM example23. Home mouse H + 0.4 sec.24. Move mouse to 2nd “Search”-button P + 1.1 sec.25. Click to see connections BB + 0.2 sec.
  35. 35. KLM example The physical operators involved:Only H + P + BB + H + 7K + K + 8K + H + P + BB + P +observable BB + P + BB + P + BB + P + 3BB + H + 5K + K + Kkeystroke + H + P + BBactions
  36. 36. KLM example The physical operators involved:Only H + P + BB + H + 7K + K + 8K + H + P + BB + P +observable BB + P + BB + P + BB + P + 3BB + H + 5K + K + Kkeystroke + H + P + BBactions = 17.54 sec.
  37. 37. KLM example The physical operators involved: H + P + BB + H + 7K + K + 8K + H + P + BB + P + BB + P + BB + P + BB + P + 3BB + H + 5K + K + K + H + P + BB = 17.54 sec. Insert mental operatorsThe M + H + P + BB + H + 7K + K + 8K + M + H + P +unobservable BB + M + P + BB + M + P + BB + M + P + BB + M +part P + 3BB + H + 5K + K + M + K + M + H + P + BB
  38. 38. KLM exampleThe physical operators involved:H + P + BB + H + 7K + K + 8K + H + P + BB + P +BB + P + BB + P + BB + P + 3BB + H + 5K + K + K+ H + P + BB= 17.54 sec.Insert mental operatorsM + H + P + BB + H + 7K + K + 8K + M + H + P +BB + M + P + BB + M + P + BB + M + P + BB + M +P + 3BB + H + 5K + K + M + K + M + H + P + BB= 27.54 sec.
  39. 39. KLM exampleA more efficient search form.
  40. 40. KLM example Place cursor in input field on page load
  41. 41. KLM example Show autosuggestions
  42. 42. KLM example Same for destination
  43. 43. KLM example Show date picker when user click into the input field
  44. 44. KLM example Show 2 months at once instead of a single month
  45. 45. KLM example Change 2 months at once when user clicks on the arrow
  46. 46. KLM example Replace ‘time’ input field with a dropdown
  47. 47. KLM exampleTake information fromthe 2nd screen intothe search form
  48. 48. KLM example Increase size and visibility of search button
  49. 49. Comparison between the 2 forms pkp.pl My search form352821 3314 25 7 0 # of operators
  50. 50. Comparison between the 2 forms pkp.pl My search form35282114 33 25 -24.5% 7 0 # of operators
  51. 51. Comparison between the 2 forms pkp.pl My search form35282114 27.54 -44.5% 7 15.27 0 Estimated task execution time (sec.)
  52. 52. A penny saved is a penny earned :-)12 sec.
  53. 53. A penny saved is a penny earned :-) 100 / day12 sec. 20 min.
  54. 54. A penny saved is a penny earned :-) 100 / day p.a.12 sec. 20 min. ~ 5 days
  55. 55. A penny saved is a penny earned :-) 100 / day p.a.12 sec. 20 min.Predict the Return-on-investment (ROI) ~ 5 days
  56. 56. Constraints• Fastest times
  57. 57. Constraints• Fastest times• Highly trained and experienced users
  58. 58. Constraints• Fastest times• Highly trained and experienced users• Error- and interruption-free
  59. 59. + -
  60. 60. + -• Delivers accurate predictions
  61. 61. + -• Delivers accurate predictions• Numbers to convince clients /support sales
  62. 62. + -• Delivers accurate predictions• Numbers to convince clients /support sales• Easy to use
  63. 63. + -• Delivers accurate predictions• Numbers to convince clients /support sales• Easy to use• Apply early in the design process
  64. 64. + -• Delivers accurate predictions• Numbers to convince clients /support sales• Easy to use• Apply early in the design process• No users involved
  65. 65. + -• Delivers accurate predictions • Not applicable in all situations• Numbers to convince clients /support sales• Easy to use• Apply early in the design process• No users involved
  66. 66. + -• Delivers accurate predictions • Not applicable in all situations• Numbers to convince clients / • Tedious estimation at millisecond levelsupport sales• Easy to use• Apply early in the design process• No users involved
  67. 67. + -• Delivers accurate predictions • Not applicable in all situations• Numbers to convince clients / • Tedious estimation at millisecond levelsupport sales• Easy to use• Apply early in the design process• No users involved There is help!
  68. 68. Make KLM estimations quickly• UI prototyping tool• Automatically evaluates your design with a predictive human performance model• Freeware
  69. 69. What’s thepoint?
  70. 70. What’s thepoint? KLM/CogTool help you to easily evaluate your UI.
  71. 71. Why shouldyou care?
  72. 72. Why shouldyou care? Higher ROI, save time & money.
  73. 73. Thank you!

×