5 Interface Laws Every Software Designer Should Know

1519587b1a0febb658c36c94f6272b0d?s=47 Kevin Hale
December 05, 2011

5 Interface Laws Every Software Designer Should Know

Y Combinator's Kevin Hale teaches the 5 laws every software designer should know about interface design. He'll walk you through the experiments used to discover them and visualize the math in ways that makes it easy to see how to apply them in your day to day design work.

1519587b1a0febb658c36c94f6272b0d?s=128

Kevin Hale

December 05, 2011
Tweet

Transcript

  1. Interface Laws Every Software Designer  Should Know 5 By

    Kevin Hale
  2. Kevin Hale @ilikevests Partner , Y Combinator

  3. Metaphor Descriptive Mathematics Predictive Models!

  4. 1 Fitts’s Law

  5. Fitts’s Law T = a + b log (1+ D/W)

    2 How humans point at things.
  6. Bigger things are easier to point at.

  7. Paul Fitts

  8. None
  9. Shannon-Hartley Theorem C = B log (1+ S/N) 2 T

    = a + b log (1+ D/W) 2
  10. Fitts’s Experiment

  11. Fitts’s Experiment Distance Width Time

  12. Fitts’s Law T = a + b log (1+ D/W)

    2 Distance Width Time
  13. Linear vs Log 0.0 1.5 3.0 4.5 6.0 0 2

    4 6 8 10 12 14 16 18 20 22 24 26 28 30 Linear vs Log
  14. 1

  15. 2

  16. 10

  17. 11

  18. None
  19. None
  20. Target Start

  21. Target Start x

  22. Fitts’s Experiment

  23. Fitts’s Law T = a + b log (1+ D/W)

    2 Distance Width Time
  24. Target Start

  25. Target Width Start

  26. None
  27. None
  28. T = a + b log (1+ D/W) 2 Distance

    Width Time
  29. T = D/W Distance Width Time

  30. O = D/W Distance Width Time

  31. O = O/∞ Distance Width Time

  32. Contextual Menus

  33. Pie Menus

  34. O = O/∞ Distance Width Time

  35. ∞ ∞ Infinite Target Widths at Edges

  36. Infinite Dimensions at Corners ∞ ∞ ∞ ∞

  37. Hot Corners

  38. None
  39. None
  40. WebOS

  41. None
  42. High Velocity Deceleration Initial Movement Final Movement

  43. 2Steering Law

  44. Steering Law / Accot-Zhai Law Length ∫ T = a

    + b C ds W(s) How humans move in a tunnel.
  45. Steering Law / Accot-Zhai Law Start Stop

  46. Steering Law / Accot-Zhai Law Path

  47. Steering Law / Accot-Zhai Law Width Length

  48. Steering Law / Accot-Zhai Law Constant Constant Length Width ∫

    T = a + b C ds W(s) Path Time
  49. Steering Law / Accot-Zhai Law Width of Tunnel ds W(s)

    Instantaneous Speed dT = b
  50. Steering Law / Accot-Zhai Law How fast?

  51. Steering Law / Accot-Zhai Law Width

  52. Steering Law / Accot-Zhai Law Wider Paths = Faster Movement

  53. Nested Menu Optimizations A B C D 1 2 3

    4 i ii iii iv
  54. Nested Menu Optimizations

  55. Crossing Based Interfaces

  56. WebOS

  57. None
  58. None
  59. III Hick’s Law 3

  60. Hick’s Law T = b · log (n + 1)

    2
  61. Hick’s Law T = b · log (n + 1)

    2 It takes less time to identify an object from fewer things.
  62. None
  63. None
  64. None
  65. Hick’s Law T = b · log (n + 1)

    2
  66. Hick’s Law T = b · log (n + 1)

    2 Constant Binary Search Decisions Uncertainty Time
  67. Hick’s Law # of Choices 1 2 3 7 15

    Relative Time 1 1.6 2 3 4
  68. Hick’s Law T = b · log (n + 1)

    2 Binary Search Decisions Time
  69. None
  70. None
  71. 1

  72. 2

  73. 3

  74. Not for menu design.

  75. Find the monkey. Humans Animals Robots Monsters Cat Dog Monkey

    Chicken Bear
  76. Find the monkey. Humans Animals Robots Monsters Cat Dog Monkey

    Chicken Bear
  77. Find the monkey. Humans Animals Robots Monsters Cat Dog Monkey

    Chicken Bear x
  78. Better for attention optimization.

  79. None
  80. None
  81. Which animal is in trouble? Cat Dog Monkey Chicken Bear

  82. Also great for helping users know what to do next.

  83. None
  84. 4Miller’s Law

  85. Miller’s Question What is the capacity of 
 working memory?

  86. Miller’s Law 7 +/- 2 Chunks

  87. Bits vs Chunks

  88. 1970’s Model of Working Memory Visio-Spatial Sketchpad Phonological Loop Central

    Executive Long Term Memory
  89. Phonological Loop

  90. 2 Seconds of Sound

  91. Miller’s Law 7 digits 6 letters 5 words

  92. Colors Digits Letters Shapes Words Random Forms Nonsense Syllables Processing


    Time Reciprocal of Memory Span (item ) -1
  93. Chunk Capacity 4 +/- 1

  94. Hard to Remember 17373542783 fbibbcibmirs

  95. Chunks and Context Make it Easier +1 (737) 354-2783 fbi

    bbc ibm irs
  96. None
  97. None
  98. It’s easy to chunk!

  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. 5Power Law 
 of Practice Practice Practice Practice

  109. Power Law of Practice RT = aP + c -b

    Constant Trial # Constant Constant Completion Time
  110. Power Law of Practice T = T n -0.4 n00b

    Time Trial # Constant Completion
 Time n 1
  111. Power Exponential Law of Practice RT = ae + c

    -b(P-1) Trial # Completion Time
  112. Focus on repeat performance.

  113. Different UIs for n00bs and pros.

  114. None
  115. None
  116. None
  117. None
  118. None
  119. 12345 Fitts Steering Hicks Miller Practice Review

  120. 12345 Big Wide Few Chunk Repeat Review

  121. High 5 @ilikevests and thanks!