SlideShare une entreprise Scribd logo
1  sur  88
Télécharger pour lire hors ligne
インターフェイスの
仮説を脳科学から考える
2015.05.28 / update 2017.07.25
@keita_kawamoto
・GMOペパボ / Designer
・dribbble.com/keita_kawamoto
・balloonbros.cc
・そろそろブログ欲しい。作る。
・作った blog.orangebomb.org
@keita_kawamoto
UI
インターフェイスを考えるとき、
通説や人間の習性・性質を考慮し、
仮説を立てますよね。
このお話は、
「立てた仮説が正解だったか?」
という話ではありません。
デザイナーが
“なぜそういう仮説にしたのか”
を「科学的に」見てみよう
というものです。
このお話は必ず正しいとは限りません。
⚠
・モーダルウィンドウ
・色によるコントロール
・モーダルウィンドウ
・色によるコントロール
こんな感じのUIを用意
目立って良いね。
ユーザーはモーダルに
注目する。
我ながらGJだ。
デザイナーA氏(1歳)
作ったデザイナーの主張(仮説)
1. 影があることでモーダルが他の要素よりひと
つ前に飛び出して見える
作ったデザイナーの主張(仮説)
1. 影があることでモーダルが他の要素よりひと
つ前に飛び出して見える
2. ひとつ前に飛び出して見えることで視線を
モーダルへ誘導できる
作ったデザイナーの主張(仮説)
1. 影があることでモーダルが他の要素よりひと
つ前に飛び出して見える
2. ひとつ前に飛び出して見えることで視線を
モーダルへ誘導できる
作ったデザイナーの主張(仮説)
STOP!🚨🚨
影があると、なぜ人間は
「飛び出して見える」の?
影があれば飛び出して見える、
これは当たり前のことだと思うのですが、
メカニズムはさっぱりわかりませんよね。
と、いうことで
調べてみた
目で見たものは視覚信号として
脳にデータが送られます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
自分自身が今何を見ているのか?
理解できるまでに、
実は数多くの処理が発生しています。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
・視覚情報は常に脳に送信されるが、
「見ているそれが一体なんなのか」を
 判別する処理には時間が掛かる
・脳はその処理が終わる前でも、
 視覚情報を利用し始める
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
> 処理が済む前に
視覚情報を利用し始める?
例えば何かが迫ってきて、危機と感じたとき
「それが何か」判別する前に、無意識のうちに
とっさに体が避けようとする。
このような形で処理前の情報が利用されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
・視覚情報が自分で意識できるようになる
 までに、網膜に映った物体の
 「色」「形」「奥行き」「動き」
 といった情報が付与される
・注意を向けるべき物体は際立って見え、
 そうでない物体は後ろに退いて見えるよ
 うな処理も自動的に行われる
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
・目と脳の間だけでなく、
 体自体と視覚系の間で何度もやりとりが
 行われる。体全体で物を見て
「視差情報」を得ることによって
 立体的に見ることができる
・見たものを自分で意識・理解できるのは
 それらの処理が済んだ後のものになる
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
1. 視覚から得た情報を毎回あらゆる可能性を考
慮するのではない
2. 「前提」は処理の効率化の役目を果たす
情報処理の前提
さらに視覚信号の処理は、脳によって自動的に
さまざまな「前提」のもとで行われます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
処理はあらかじめ
「こうなっているはず」
という予測を前提に行われます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
その前提は
“これまでの経験”
に基づき生成されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
人間は、物の形を認識する際、
様々な情報を「手掛かり」
にします。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
今回疑問に上がっている「影」は
その手掛かりの一つです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
人間は現実世界で生活しているうちに
「影があれば立体」と判断するようになって
います。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
視覚信号の処理は「こうなっているはず」と
いう予測を前提に処理が行われるため、「影」
があれば「立体」だと認識してしまうのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
ただそのために、非常に錯覚を起こしやすく
なっています。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
紙やディスプレイなどの平面上で
影を模した立体表現を行うと
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
それが平面だと理解はできても、
影により奥行きを感じ
立体であるかのように錯覚します。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
実験
A B
この図、どう見えますか?
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
Q.
AとB、どちらか浮き出て見えませんか?
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
おそらく光源が上方向であるBを
選んだ人が多いと思います。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
「影」の存在は、
脳の処理の中でも
比較的早い段階で認識されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
それにより視界に存在する物体の
おおよその形を認識することが
できるのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
認識が早いのは、光源の位置に
関して脳が独自にある「決定」
をしているからです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
光源の位置が確定できない状況には
わりとよく出会うものです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
・図には光源について書かれいない
・背景は一色に塗られているため
 光源の位置特定の手がかりにならない
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
つまり、この図は「曖昧」
ということです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
光源は上方向である可能性も
下方向である可能性もある。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
しかしその可能性がありながら、
脳は勝手に取捨選択します。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
この場合は自動的に
「光源は上」だと決定されます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
A B
実は、脳がそう判断するには
十分な材料が存在します。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
↑
こいつ
前提はこれまでの経験に基づき
生成されます。光というのは、
現実世界において多くは
「太陽の光」です。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
脳はその前提を元に
自動的に「光源は上」という
判断を下すのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
さらに
「上」とは、実は必ずしも
「現実世界の上方向」ではない。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
さっきの図を逆立ちして見てみると、
光源の位置も今度は「下」になります。
つまり「上」とは
「人間の視界の上方向」を指すのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
「太陽の位置はどこにありそうか」
「今自分の頭はどの方向を向いているか」
これらを毎回検討していては、
処理に時間が掛かってしまいます。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
そのため効率的に判断を下すため、
脳は「視界の上方向に光源がある」
という前提を元に
判断を下すようにできているのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
光源を下方向からにしてみた
確かに
違和感!
Q.
影があると、なぜ人間は
「飛び出して見える」の?
A.
・脳が勝手に経験に基づく「前提」
 を作り処理の効率化をする
・そのため錯覚が起こる
・モーダルウィンドウ
・色によるコントロール
・モーダルウィンドウ
・色によるコントロール
↑これ、どうして「色によるコントロール」が
アクティブなのだとわかるのでしょう。
濃い方が目立つし…
デザイナーA氏(1歳)
薄いと視認しにくいから
弱いし…
デザイナーA氏(1歳)
自分がそう感じるし…?
デザイナーA氏(1歳)
このデザイナーの仮説は
「なんとなく」という感じが
拭えていませんね。
脳が奥行きを認知する際、
必ずいくつかの手掛かりが
使用されます。
現実世界において、近くにあるものはくっきり
見え、遠方にあるものは空気の層により薄く
見える。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
この経験から「前提」が生成されます。
そして、脳はこのような「空気遠近感」に
対応してしまっているのです。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
色の差・コントラストの差が、距離感を認知
する上で重要な手がかりになっています。
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
Q.
なぜ色の薄い方ではなく
濃い方に注目する?
A.
脳は周辺との色の差や
コントラストが低いものを遠く
高いものを近く感じる
ようにできているため
・自分の近くにあるもののほうが、自分の
 体に直接影響を与える可能性がある。
・自分に関係の深いものを重要視し、注意
 を向けるのは生き物として自然なことと
 言える。
近い方に注目する理由
[出典] Tom Stafford・Matt Webb 『Mind Hacks 実験で知る脳と心のシステム』 夏目 大 訳、オライリージャパン、2005年、ISBN4-87311-271-0。
まとめ
UIをこれまで以上に人間に
フィットできるものにするため、
人間の仕組みについて
調べてみましょう。
参考文献
Thank you!

Contenu connexe

Similaire à インターフェイスの仮説を脳科学から考える

neural architecture search with reinforcement learning
neural architecture search with reinforcement learningneural architecture search with reinforcement learning
neural architecture search with reinforcement learningYamato OKAMOTO
 
ワークショップ「ゲーム開発チームにおけるパトレット」
ワークショップ「ゲーム開発チームにおけるパトレット」ワークショップ「ゲーム開発チームにおけるパトレット」
ワークショップ「ゲーム開発チームにおけるパトレット」Masaru Nagaku
 
【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門Takanori Kashino
 
【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門Takanori Kashino
 
Tfad AgileDay MS 20100122
Tfad AgileDay MS 20100122Tfad AgileDay MS 20100122
Tfad AgileDay MS 20100122Kazumasa EBATA
 
二段階ブレスト
二段階ブレスト二段階ブレスト
二段階ブレストRikie Ishii
 
Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420
Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420
Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420Koichiro Sumi
 
PyconJP 2015のポスター
PyconJP 2015のポスターPyconJP 2015のポスター
PyconJP 2015のポスターNaoto Yoshida
 
【 xpaper.challenge 】ブレインストーミング法
【 xpaper.challenge 】ブレインストーミング法【 xpaper.challenge 】ブレインストーミング法
【 xpaper.challenge 】ブレインストーミング法cvpaper. challenge
 
ユーザーストーリーワークショップ
ユーザーストーリーワークショップユーザーストーリーワークショップ
ユーザーストーリーワークショップYou&I
 
opensource and accessibility (Dec2000) Part 2
opensource and accessibility (Dec2000) Part 2opensource and accessibility (Dec2000) Part 2
opensource and accessibility (Dec2000) Part 2Takuya Nishimoto
 

Similaire à インターフェイスの仮説を脳科学から考える (12)

neural architecture search with reinforcement learning
neural architecture search with reinforcement learningneural architecture search with reinforcement learning
neural architecture search with reinforcement learning
 
ワークショップ「ゲーム開発チームにおけるパトレット」
ワークショップ「ゲーム開発チームにおけるパトレット」ワークショップ「ゲーム開発チームにおけるパトレット」
ワークショップ「ゲーム開発チームにおけるパトレット」
 
【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月29日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
 
伝わるプレゼン
伝わるプレゼン伝わるプレゼン
伝わるプレゼン
 
【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
【9月1日開催】本場スタンフォード大学に学ぶ!デザイン思考入門
 
Tfad AgileDay MS 20100122
Tfad AgileDay MS 20100122Tfad AgileDay MS 20100122
Tfad AgileDay MS 20100122
 
二段階ブレスト
二段階ブレスト二段階ブレスト
二段階ブレスト
 
Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420
Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420
Spath Workshop | 世の中をより良くするアイデアを形に出来るようになる会議 β版 20130420
 
PyconJP 2015のポスター
PyconJP 2015のポスターPyconJP 2015のポスター
PyconJP 2015のポスター
 
【 xpaper.challenge 】ブレインストーミング法
【 xpaper.challenge 】ブレインストーミング法【 xpaper.challenge 】ブレインストーミング法
【 xpaper.challenge 】ブレインストーミング法
 
ユーザーストーリーワークショップ
ユーザーストーリーワークショップユーザーストーリーワークショップ
ユーザーストーリーワークショップ
 
opensource and accessibility (Dec2000) Part 2
opensource and accessibility (Dec2000) Part 2opensource and accessibility (Dec2000) Part 2
opensource and accessibility (Dec2000) Part 2
 

インターフェイスの仮説を脳科学から考える