1. インターフェイスの
仮説を脳科学から考える
2015.05.28 / update 2017.07.25
@keita_kawamoto

2. ・GMOペパボ / Designer
・dribbble.com/keita_kawamoto
・balloonbros.cc
・そろそろブログ欲しい。作る。
・作った blog.orangebomb.org
@keita_kawamoto

3. UI

4. インターフェイスを考えるとき、
通説や人間の習性・性質を考慮し、
仮説を立てますよね。

6. このお話は、
「立てた仮説が正解だったか？」
という話ではありません。

7. デザイナーが
“なぜそういう仮説にしたのか”
を「科学的に」見てみよう
というものです。

8. このお話は必ず正しいとは限りません。
⚠

9. ・モーダルウィンドウ
・色によるコントロール

10. ・モーダルウィンドウ
・色によるコントロール

14. こんな感じのUIを用意

15. 目立って良いね。
ユーザーはモーダルに
注目する。
我ながらGJだ。
デザイナーA氏（１歳）

16. 作ったデザイナーの主張（仮説）

17. 1. 影があることでモーダルが他の要素よりひと
つ前に飛び出して見える
作ったデザイナーの主張（仮説）

18. 1. 影があることでモーダルが他の要素よりひと
つ前に飛び出して見える
2. ひとつ前に飛び出して見えることで視線を
モーダルへ誘導できる
作ったデザイナーの主張（仮説）

19. 1. 影があることでモーダルが他の要素よりひと
つ前に飛び出して見える
2. ひとつ前に飛び出して見えることで視線を
モーダルへ誘導できる
作ったデザイナーの主張（仮説）
STOP!🚨🚨

20. 影があると、なぜ人間は
「飛び出して見える」の？

22. 影があれば飛び出して見える、
これは当たり前のことだと思うのですが、
メカニズムはさっぱりわかりませんよね。

23. と、いうことで
調べてみた

24. 目で見たものは視覚信号として
脳にデータが送られます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

25. 自分自身が今何を見ているのか？
理解できるまでに、
実は数多くの処理が発生しています。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

26. ・視覚情報は常に脳に送信されるが、
「見ているそれが一体なんなのか」を
判別する処理には時間が掛かる
・脳はその処理が終わる前でも、
視覚情報を利用し始める
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

27. > 処理が済む前に
視覚情報を利用し始める？
例えば何かが迫ってきて、危機と感じたとき
「それが何か」判別する前に、無意識のうちに
とっさに体が避けようとする。
このような形で処理前の情報が利用されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

28. ・視覚情報が自分で意識できるようになる
までに、網膜に映った物体の
「色」「形」「奥行き」「動き」
といった情報が付与される
・注意を向けるべき物体は際立って見え、
そうでない物体は後ろに退いて見えるよ
うな処理も自動的に行われる
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

29. ・目と脳の間だけでなく、
体自体と視覚系の間で何度もやりとりが
行われる。体全体で物を見て
「視差情報」を得ることによって
立体的に見ることができる
・見たものを自分で意識・理解できるのは
それらの処理が済んだ後のものになる
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

30. 1. 視覚から得た情報を毎回あらゆる可能性を考
慮するのではない
2. 「前提」は処理の効率化の役目を果たす
情報処理の前提
さらに視覚信号の処理は、脳によって自動的に
さまざまな「前提」のもとで行われます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

31. 処理はあらかじめ
「こうなっているはず」
という予測を前提に行われます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

32. その前提は
“これまでの経験”
に基づき生成されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

33. 人間は、物の形を認識する際、
様々な情報を「手掛かり」
にします。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

34. 今回疑問に上がっている「影」は
その手掛かりの一つです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

35. 人間は現実世界で生活しているうちに
「影があれば立体」と判断するようになって
います。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

36. 視覚信号の処理は「こうなっているはず」と
いう予測を前提に処理が行われるため、「影」
があれば「立体」だと認識してしまうのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

37. ただそのために、非常に錯覚を起こしやすく
なっています。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

38. 紙やディスプレイなどの平面上で
影を模した立体表現を行うと
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

39. それが平面だと理解はできても、
影により奥行きを感じ
立体であるかのように錯覚します。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

40. 実験

41. A B
この図、どう見えますか？
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

42. A B
Q.
AとB、どちらか浮き出て見えませんか？
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

43. A B
おそらく光源が上方向であるBを
選んだ人が多いと思います。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

44. 「影」の存在は、
脳の処理の中でも
比較的早い段階で認識されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

45. それにより視界に存在する物体の
おおよその形を認識することが
できるのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

46. 認識が早いのは、光源の位置に
関して脳が独自にある「決定」
をしているからです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

47. A B
光源の位置が確定できない状況には
わりとよく出会うものです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

48. A B
・図には光源について書かれいない
・背景は一色に塗られているため
光源の位置特定の手がかりにならない
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

49. A B
つまり、この図は「曖昧」
ということです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

50. 光源は上方向である可能性も
下方向である可能性もある。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

51. しかしその可能性がありながら、
脳は勝手に取捨選択します。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

52. A B
この場合は自動的に
「光源は上」だと決定されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

53. A B
実は、脳がそう判断するには
十分な材料が存在します。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

55. ↑
こいつ

56. 前提はこれまでの経験に基づき
生成されます。光というのは、
現実世界において多くは
「太陽の光」です。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

57. 脳はその前提を元に
自動的に「光源は上」という
判断を下すのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

58. さらに

59. 「上」とは、実は必ずしも
「現実世界の上方向」ではない。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

60. さっきの図を逆立ちして見てみると、
光源の位置も今度は「下」になります。
つまり「上」とは
「人間の視界の上方向」を指すのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

61. 「太陽の位置はどこにありそうか」
「今自分の頭はどの方向を向いているか」
これらを毎回検討していては、
処理に時間が掛かってしまいます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

62. そのため効率的に判断を下すため、
脳は「視界の上方向に光源がある」
という前提を元に
判断を下すようにできているのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

64. 光源を下方向からにしてみた

66. 確かに
違和感!

67. Q.
影があると、なぜ人間は
「飛び出して見える」の？

68. A.
・脳が勝手に経験に基づく「前提」
を作り処理の効率化をする
・そのため錯覚が起こる

69. ・モーダルウィンドウ
・色によるコントロール

70. ・モーダルウィンドウ
・色によるコントロール
↑これ、どうして「色によるコントロール」が
アクティブなのだとわかるのでしょう。

73. 濃い方が目立つし…
デザイナーA氏（１歳）

74. 薄いと視認しにくいから
弱いし…
デザイナーA氏（１歳）

75. 自分がそう感じるし…？
デザイナーA氏（１歳）

76. このデザイナーの仮説は
「なんとなく」という感じが
拭えていませんね。

77. 脳が奥行きを認知する際、
必ずいくつかの手掛かりが
使用されます。

78. 現実世界において、近くにあるものはくっきり
見え、遠方にあるものは空気の層により薄く
見える。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

79. この経験から「前提」が生成されます。
そして、脳はこのような「空気遠近感」に
対応してしまっているのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

80. 色の差・コントラストの差が、距離感を認知
する上で重要な手がかりになっています。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

81. Q.
なぜ色の薄い方ではなく
濃い方に注目する？

82. A.
脳は周辺との色の差や
コントラストが低いものを遠く
高いものを近く感じる
ようにできているため

83. ・自分の近くにあるもののほうが、自分の
体に直接影響を与える可能性がある。
・自分に関係の深いものを重要視し、注意
を向けるのは生き物として自然なことと
言える。
近い方に注目する理由
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。

84. まとめ

85. UIをこれまで以上に人間に
フィットできるものにするため、
人間の仕組みについて
調べてみましょう。

86. 参考文献

88. Thank you!