UIと脳

# UIとは

今更語ることでもない基本的な話ですが…UI（User Interface）とは以下をさします。

>ユーザインタフェース (user interface) は、機械、特にコンピューターとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。

また、人間と機械（コンピューター以外の機械も含む）の間で情報のやり取りを行う機器（トリガー）類をMMI（Man Machine Interface）と言います。ボタンやスイッチはもちろん、CUIやGUIもこれに含みます。

最近よく耳にする「UIデザイン」はGUIのデザインだけをさしているように聞こえますが、正しい定義としては ** 機械と人間をつなぐすべてのデザイン = 設計 ** であるので、正しい定義とは言えないかもしれません。



# 脳

人間の脳も電気信号で情報のやり取りをしているのは無学な僕でも知っています。脳が発するイオンによって起こる電気信号が神経を伝って身体を動かすというお話です。
脳がモノを認知・認識する間にあるものは全て電気信号で、そのアウトプットが人間の行動ということになります。

考えてみると実にUI的な動きです。

つまり、UIデザインを考える上で脳の認知・認識は重要なファクターと言え、脳を理解することでより良いUIデザインを設計できるのではと考えられます。


## ニューロマーケティング

1960年代頃から行動心理学について検証が行われるようになり、2000年代に入って「ニューロマーケティング」という名称で定義付け、その後実際にそのマーケティング手法の一つとして注目されはじめました。
例えば、グルーエン効果とよばれるものなどはその一つで、ショッピングモールが迷路のようになっているのは人間の行動と脳を分析した結果あえてそのようにしているそうです。
迷路のようなモールの中で、光：視覚・匂い：嗅覚・BGM：聴覚などに少しづつ影響されリラックス状態になります。迷路のような店内を歩くにつれ歩速は遅くなり、ガードは解かれ、やがて購入へ至る…。

[「未来のデザイナーは生物学を学べ」が意味すること](http://bizzine.jp/article/detail/509)

まぁマーケティングについてはさておいても、上の記事にあるIDEOのティム・ブラウン氏も似たようなことを言っています。


# 脳の特性で見るUIデザイン

とはいえ、学者でもなんでもない自分が脳を知る事などさすがに難しすぎます。こちらの「[買いたがる脳 なぜ、「それ」を選んでしまうのか? ](http://goo.gl/YSkdXK)」からいくつか抜粋したいと思います。

![nou.png](https://qiita-image-store.s3.amazonaws.com/0/47955/62f252d7-af5c-0700-da6c-bc2a949c497c.png)


## **書体と流暢性**

<img src="https://qiita-image-store.s3.amazonaws.com/0/47955/7e0a9ec8-1da3-35d8-b0ce-f63a909dea20.png" width="50%" />


ユーザーがコンバージョンするには最終的な決済（意思決定）へどれだけ早く到達できるかが重要とされています。
それには「処理の流暢性」（ヒトが、情報（主に言語情報）を適切に、素早く、数多く処理し出力する能力・特性のこと）が大きく影響しています。

> 見慣れない印象を与えたり、読みにくい字体を使ったりすると、無意識に消費者の評価が下がってしまう。

読みやすさから脳は情報処理を素早く行うことで、そのものを**よく知っているもの**として処理するそうで、よく知っているものほど真実と評価するのでコンバージョンへつなげやすい。
要は書体による文字列の認識速度をあげることが可能なので、書体がなんでもいいということにはならないということです。

道路標識や道路看板に明朝体が使われていないことを想像すると解りやすいと思います。
明朝体は書体が細く、一定の距離から認識するのには鮮明さにかけるからです。

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Tomei_Expwy_Route_Sign.svg/500px-Tomei_Expwy_Route_Sign.svg.png" width="50%" />

- [まちモジ — 日本の看板文字に丸ゴシックが多いのはなぜ？みんなが文字を楽しめる小林 章さんの文字本第2弾](http://blog.petitboys.com/archives/machimoji.html)
- [高速道路フォントめぐり](http://portal.nifty.com/2009/04/10/a/)



## **承認ボタンの位置**

Agree/Cancelボタンが右か左か論争はUIデザインをやっていると度々議論されます。
だいたいはOS利用率や動線（導線）[進むは右とか]から以下のように定義することが多いと思います。

- Mac/iOSの場合は右がAgree、左がCancel。もしくは上がAgree、下がCancel。

<img src="https://qiita-image-store.s3.amazonaws.com/0/47955/377e43b0-18a9-f91b-6aea-b4d232944427.png" width="70%" />

- Windowsは画像がないですが左がAgreeのケースが多いですが、なぜか内容によってバラバラ。ウィンドウの閉じるボタン。

- Androidの場合はMaterial Design以前はおおよそ左がAgree、右がCancel。もしくは上がAgree、下がCancel。

<img src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TC1CQlJEUy1sVWs/components_buttons_usage6.png" width="40%" />

Material Designでは右がAgree。

他にもデバイスや機器によっても色々あると思いますが、脳の側面からみると「利き手」が重要なファクターになります。人は無意識に利き手側にプラスのイメージを持つそうです。


##### **なぜ利き手にプラスのイメージを持つのか？**

書体の話でも出た流暢性に関係します。脳はエネルギー利用の関係上、より効率的に処理をしようとするそうで、日頃から見ているもの・より多く体験したもの・既に知っているものに信頼を置くようできているとか。

そして、人口統計上右利きが圧倒的に多いため、右に配置される事が多い。左利きの人には辛い現実ですが…。




## ラベルとアイコン

<img src="https://qiita-image-store.s3.amazonaws.com/0/47955/f18737d1-71e7-99d1-4a47-52f2541c9f08.png" width="80%" />

最近はアプリケーションなどIconだけのナビゲーションなど多用されています。配置・スペースのコストを考えてのことだと思います。

なぜヒトはIconで物事を認識できるのか、それは脳には言葉・画像・出来事などを結びつける**パターン認識能力**が高いためです。脳がパターン化するために、無意識のうちに言葉・画像・出来事をカテゴリ化する。
しかし、そのパターンの整合性がとれないもの（未学習であったり、既に記憶しているカテゴリと違う表現であったり）は逆に認識に時間がかかる。Iconを使うことでスペースは節約できても、ユーザーの認識処理コストは節約できなければ意味がないと思います。

そのために、適宜必要なラベリングを行う方がユーザーの認識処理コストの削減ができ親切になるケースもあると思います。もちろん、空間は無限ではないのでどこで折り合いをつけるかはユーザーテストなどで測る必要はあると思います。




# 所感

いくつか例にあげてみてUIデザインのコンポーネントや導線設計など、脳や行動心理学的な側面から採用・不採用、また検証についての分析などを行えるのではないかと思っています。
例えば、**なぜ海外のイケてるUIデザインを採用するのか?**みたいなのも、数値や科学的根拠もふまえてプレゼンした方が伝わりやすいですし、意味のない会議も減らせるかもしれません。





# 参考リンク

- [すべてのものに理由はある。脳科学に基づくデザインの法則](http://liginc.co.jp/web/design/other-design/15954)
- [脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法](http://liginc.co.jp/designer/archives/12071)
- [「目的脳」の男性と、「共感脳」の女性! 男女のズレをWEBサイトに応用する!](http://www.ctale.jp/blog/archives/1577)
- [UX デザインにおける心理学の系譜](http://overkast.jp/2012/10/ux-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E5%BF%83%E7%90%86%E5%AD%A6%E3%81%AE%E7%B3%BB%E8%AD%9C/)




--- 

ちなみに、子犬・子猫とか子供などが癒しをもたらすあれは、大人が子孫を守ろうとする行動からくるものだそうです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/47955/41008e26-4174-3db7-c9b6-439866d35770.png" width="20% />