だいたいマネーフォワードさんに遊びに行った時に発表したものです。 公開すると思ってなかったので、適当資料。 フィッツの法則はwikipediaが詳しいのでそこからいろいろ辿ってください。 https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%83%84%E3%81%AE%E6%B3%95%E5%89%87

1. フィッツの法則
UI設計の科学的アプローチといった趣旨のこと
どっちかというとそういったものの背景のはなし
1

2. T= a + b log2(1+D/W)
こんなやつ
2

3. 注意
• 筆者はデザイナなどの専門職ではないので割りと
適当なこと言ってます
• 簡単のために省略した表現をしている箇所があり
ます
3

4. もくじ
• フィッツの法則
• どのようないみか？
• フィッツと誤差
• UI比較
• タッチUIではどうか？
4

5. どんな法則？
T= a + b log2(1+D/W)
• 人間がマウスを動かす動作を数式にしたもの
• 1954年にフィッツさんが提唱
5

6. どんな法則？
T= a + b log2(1+D/W)
6

7. どんな意味？
T= a + b log2(1+D/W)
マウスの操作時間
7

8. どんな意味？
T= a + b log2(1+D/W)
マウスの操作時間
必要な移動距離
8

9. どんな意味？
T= a + b log2(1+D/W)
マウスの操作時間
必要な移動距離 マトの大きさ
9

10. どんな意味？
T= a + b log2(1+D/W)
マウスの操作時間
必要な移動距離 マトの大きさ
操作は距離が遠くなるか、マトが小さくなると時間がかかる
10

11. Button
理想
OK!!
11

12. Button
理想
OK!!
12

13. Button
NG・・・
現実
13

14. Button
誤差があるので
1回でうまくいかない
14

15. Button
もっかい！
15

16. Button
OK!!
16

17. Button
誤差はでたが
ボタンの範囲内なのでOK
17

18. フィッツの法則と誤差
• 人間がマウスを動かせば誤差が生じている
• Dが大きくなると誤差が発生する機会が増加
• Wが小さくなると誤差を許容できない
• 結果として時間がかかる
18

19. つまり？
19

20. • 試行時間が短ければ使いやすいとすると
• 誤差が発生する機会が少ない
• 誤差に強い
• そんなUIが使いやすいはず！！！
20

21. 既存のUIをみてみよう
21

22. Windows
Mac
VS
メニューバー
22

23. windows
mac
１つに注目して考えてみる
• アプリのウィンドウに付随
• 一般的なボタンと同じ
• 画面最上部に配置
• アクティブなアプリのメニューのみ
23

24. windows
mac
１つに注目して考えてみる
• アプリのウィンドウに付随
• 一般的なボタンと同じ
• 画面最上部に配置
• アクティブなアプリのメニューのみ
24

25. 最上部のメリット
25

26. macのメニューバーのメリット
26

27. macのメニューバーのメリット
行き過ぎた分は補正される
27

28. macのメニューバーのメリット
こういうバカでかい
ボタンと同じ
28

29. Windows
Mac
VS
メニューバー
29

30. Windows
Mac
VS
メニューバー
30

31. VS
メニューバー
31

32. macの勝ち！
無限だから
32

33. マウスには詳しくなったが
今はタッチ操作の時代
33

34. マウスとタッチの違い
• タッチは試行回数が1回
• うまく行かなかったらはじめから
• いかに誤差に対して寛容かが勝負
34

35. タッチに寛容なUIの例
• フリック入力
• 位置調整の機会
• 始点からの角度のみで入力
• 画面端からスライドさせるパネル
• 始点部分にUIがない
• 終点部分が寛容
35

36. まとめ
36

37. まとめ
• フィッツの法則
• 誤差に寛容か？という評価軸
• タッチにおいても寛容さの観点は有用
• まだ見ぬ入力方式にも応用できるのではないか？
37