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

1. How to use the Keystroke Level Model
to measure and compare
the efficiency of user interfaces.
Sebastian Daum - Fortune Cookie Poland

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. Make predictions of task execution times
for a specific UI design.

4. Efficiency is the speed with which a user can
accomplish a given task.

7. Two (often conflictive) usability goals
Ease of learning Ease-of-use (efficiency)

8. Why do we want to measure efficiency?
To cost-justify development costs

9. Why do we want to measure efficiency?
To select the most efficient UI design among
several options

10. Keystroke Level Modeling

11. Iterative process
Assess
Design Productivity increased YES Implement
by desired
degree?
NO

12. Keystroke Level
[Decomposition of larger tasks, like
filling in a webform into millisecond
level actions]

13. KLM - How to use
=

14. KLM - How to use
1. Count all of the physical operations Point
Operator 1 [time]
+ Operator 2 [time] Click
+ Operator 3 [time]
+ Operator 4 [time]
Type
=

15. KLM - How to use
1. Count all of the physical operations Point
Operator 1 [time]
+ Operator 2 [time] Click
+ Operator 3 [time]
+ Operator 4 [time]
Type
2. Add mental acts where required Remember
+ Act of thinking / perception [time]
Perceive
=

16. KLM - How to use
1. Count all of the physical operations Point
Operator 1 [time]
+ Operator 2 [time] Click
+ Operator 3 [time]
+ Operator 4 [time]
Type
2. Add mental acts where required Remember
+ Act of thinking / perception [time]
Perceive
= Overall task execution time

17. KLM-Operators
K
Keystroke
Between 0.12 and 1.2 sec.

18. KLM-Operators
P
K Pointing
1.1 sec.

19. KLM-Operators
B
P
K
Press or release mouse button
0.1 sec.

20. KLM-Operators
H
B
P Home hands to keyboard or mouse
K 0.4 sec.

21. KLM-Operators
M
H Routine thinking
B or perception
P 1.2 sec.
K

22. KLM-Operators
W (t)
M Waiting for the system to respond
H
B t must be determined
P
K

23. KLM example
Search for train connection on PKP.pl

24. KLM example
From: Krakow main station
To: Wroclaw main station
Date: 06.12., 19:00

25. KLM example

26. KLM example
Assumption: Hands on keyboard
1. 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.

27. KLM example
4. Home keyboard H + 0.4 sec.
5. Type “Krakow” 7K + 1.96 sec.

28. KLM example
6. Press TAB-key K + 0.28 sec.
7. Type “Wroclaw” 8K + 2.24 sec.

29. KLM example
8. Home mouse H + 0.4 sec.
9. Move mouse P + 1.1 sec.
10. Click on calendar icon BB + 0.2 sec.

30. KLM example
11. 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.

31. KLM example
15. Move mouse to 6th of december P + 1.1 sec.
16. Click to set date BB + 0.2 sec.

32. KLM example
17. Move mouse to “Time”-input box P + 1.1 sec.
18. Triple-click to select default value 3BB + 0.6 sec.

33. KLM example
19. Home keyboard H + 0.4 sec.
20. Replace default value with “19.00” 5K + 1.4 sec.

34. KLM example
21. Press TAB-key to put focus on “Search”-button K + 0.28 sec.

35. KLM example
22. Press “Return”-key to execute search K + 0.28 sec.
K + 0.28 sec.

36. KLM example
23. 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.

37. 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 + K
keystroke + H + P + BB
actions

38. 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 + K
keystroke + H + P + BB
actions
= 17.54 sec.

39. 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 operators
The
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

40. 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 operators
M + 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.

41. KLM example
A more efficient search form.

42. KLM example
Place cursor in input
field on page load

43. KLM example
Show autosuggestions

44. KLM example
Same for destination

45. KLM example
Show date picker
when user click into
the input field

46. KLM example
Show 2 months at
once instead of a single
month

47. KLM example
Change 2 months at
once when user clicks
on the arrow

48. KLM example
Replace ‘time’ input
field with a dropdown

49. KLM example
Take information from
the 2nd screen into
the search form

50. KLM example
Increase size and
visibility of search
button

51. Comparison between the 2 forms
pkp.pl My search form
35
28
21
33
14
25
7
0
# of operators

52. Comparison between the 2 forms
pkp.pl My search form
35
28
21
14
33
25
-24.5%
7
0
# of operators

53. Comparison between the 2 forms
pkp.pl My search form
35
28
21
14 27.54 -44.5%
7 15.27
0
Estimated task execution time (sec.)

54. A penny saved is a penny earned :-)
12 sec.

55. A penny saved is a penny earned :-)
100 / day
12 sec. 20 min.

56. A penny saved is a penny earned :-)
100 / day p.a.
12 sec. 20 min.
~ 5 days

57. A penny saved is a penny earned :-)
100 / day p.a.
12 sec. 20 min.
Predict the Return-on-
investment (ROI) ~ 5 days

58. Constraints
• Fastest times

59. Constraints
• Fastest times
• Highly trained and experienced users

60. Constraints
• Fastest times
• Highly trained and experienced users
• Error- and interruption-free

61. + -

62. + -
• Delivers accurate predictions

63. + -
• Delivers accurate predictions
• Numbers to convince clients /
support sales

64. + -
• Delivers accurate predictions
• Numbers to convince clients /
support sales
• Easy to use

65. + -
• Delivers accurate predictions
• Numbers to convince clients /
support sales
• Easy to use
• Apply early in the design process

66. + -
• Delivers accurate predictions
• Numbers to convince clients /
support sales
• Easy to use
• Apply early in the design process
• No users involved

67. + -
• 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

68. + -
• Delivers accurate predictions • Not applicable in all situations
• Numbers to convince clients / • Tedious estimation at millisecond level
support sales
• Easy to use
• Apply early in the design process
• No users involved

69. + -
• Delivers accurate predictions • Not applicable in all situations
• Numbers to convince clients / • Tedious estimation at millisecond level
support sales
• Easy to use
• Apply early in the design process
• No users involved
There is help!

70. Make KLM estimations quickly
• UI prototyping tool
• Automatically evaluates your design with a predictive human performance model
• Freeware

71. What’s the
point?

72. What’s the
point?
KLM/CogTool
help you to
easily evaluate
your UI.

73. Why should
you care?

74. Why should
you care?
Higher ROI,
save time &
money.

75. Thank you!