UIデザインの心理学の本を読んだ話

会津大学でプログラム書いてる学生です。

UIデザインの心理学の本を読んだので、まとめてアウトプットする話をします。

もくじ

---

• はじめに
• ないようまとめ
  1. 人はどう見るのか
  2. 人はどう読むのか
  3. 人はどう記憶するのか
  4. 人はどう考えるのか
  5. 人はどう注目するのか
  6. 人はどうすればヤル気になるのか
  7. 人は社会的な動物である
  8. 人はどう感じるのか
  9. 間違えない人はいない
  10. 人はどう決断するのか
• おわりに

---

はじめに

インターフェースデザインの心理学 ウェブやアプリに新たな視点をもたらす100の指針
- 本の要約を書こうと思いましたがハチャメチャに文量が多くなりました。本当にまとめられているんですかねこれは？
- 本の形式が、100のコラムのまとめ本的なものだったので、そのなかから各章気になるものを2〜4くらいピックアップしてまとめていきます

ないようまとめ

1_人はどう見るのか

目につられる

人間はどうやら他の人が見ている部分を見てしまう傾向があるようです。脳には顔の判別を専門に行っている領域があり、これのおかげで顔は他のものより早く識別できます。
なので注目させたいものがある場合は人の顔の画像を使い注目させるようにしたり、何かを訴えかけたいときにはこちらを見つめる人の顔を用いると効果的だそうです。

わかりやすい手がかりを

例えばQiitaだったら緑の文字に下線がひかれている状態だとリンクだとわかりますよね？また、テレビのリモコンなどはボタンが立体的になっていて、これを押すと何か起こるんだろうなと想像できますね？このようにあるものに対してできる操作の手がかりがあれば、ユーザーがそれを操作する確率が上がります。
なので、webでいうとクリックできる箇所は直感でクリックできるような見た目にしましょう。hoverなどを使用して、カーソルが上に来たときは色を変えるなどすると良いかもしれません。(ただ、スマホなどの場合はhoverとか無いのでまた別に考える必要あり。)
これについてはアフォーダンスという言葉について調べてみてください。

配置によるグループ化

けっこう当たり前のようですが、人間は近くにあるものを同じグループに属しているものだと考えます。ひとつのグループとして見てもらいたい要素(写真と文章、また見出しと本文など)は近づけて配置してみるようにしましょう。
枠線を使って分けてみるより、まず配置を整理してみることで画面がすっきりするようです。(もしそれで不十分な場合は枠線を使うことになりますけど…)

色々な色の与える影響

色が精神状態に影響するっていうのはよくある話ですよね。オレンジは食欲が増すとか、落ち着かない、などの意味があるからファーストフード店で使われるなど。意識して使うと効果的かもしれません。(ただ、webページ上で使う色は実際にその色に囲まれるわけではないので、そんなに効果は見込めないかもしれませんけど…笑)
また、色盲の人に意識することも重要です。色盲は赤、黄、緑の区別が難しいケースが一番多いです。そのため、要素を区別するときに色だけを用いるのではなく、複数の体系を用意しておくとよいです。たとえば色の他に線の太さを用いると色覚異常の人でも、線の太さで要素を区別することができます。

2_人はどう読むのか

画面上のものは紙より読みづらい

らしいです。パソコンやスマホは画面が光を発しているのでハチャメチャに目が疲れます。そのため小さい文字、背景色と文字色のコントラストが弱いなどは避けましょう。やっぱり理想は白背景に黒字が一番コントラストが強く、読みやすいです。極論、書く文字は読む価値のある内容にしましょう。ユーザーにとって興味深いものかどうがが重要です。

実は長い行のほうが早く読める

(英語の文章での研究ですが)1行100文字程度の長さの文章が、読む速さが最適らしいです。しかし、1行55文字前後の長さの文章のほうが「好まれる」ようです。
よって、早く読んでもらいたいときは長い行を使い、そうでもないときは基本的に短い行を使うようにしましょう。

3_人はどう記憶するのか

人間は4つまでしか覚えられない

短期記憶には3〜4つしか入らないようです。しかし、情報をいくつかのチャンクにしてしまえば4つ以上も詰めることが可能です。たとえば電話番号ってXXXX-XXXX-XXXXみたいな感じですよね。これは12個の数字をばらばらに覚えるのではなく、3つの塊にすることによって覚えやすくしているためです。(多分諸説あり)
何かユーザーに覚えてもらいたいものがあるときは、4つに絞るか、またチャンクに分けましょう。

人間は忘れる生き物

人間はめっちゃ忘れます。忘却度曲線は有名な話ですね。もはやユーザーが忘れることを前提にデザインしましょう。本当に重要な情報ならば、すぐ見つけられるようにするか、デザインの中に含めて提供しましょう。

4_人はどう考えるのか

理解しやすい情報量

あたりまえのようですけど、情報が少ないほど理解がしやすいです。段階的開示という言葉があり、人がそのときその時点で必要としている情報だけを提供することです。クリックの回数は増えますが、ユーザーがその場で必要な情報を探すために考えるよりはよっぽど良いです。情報をチャンクに分けるのと似ている感じですかね？
たとえば、ばぁーっと情報を羅列するのではなく、タイトルだけ記述してその下に詳細情報のリンクをつけておくなどすれば、そこを知りたいユーザーは喜んでクリックするでしょう。

物語は理解しやすい

物語には説得力があり、相手の注意を引き、その後も気をそらさせないようです。(この説明自体は物語ではないので説得力0ですが笑)序論で場の状況を説明、本論で主役が克服しなければならない課題にブチあたる、結論ではそれを解決する。物語は因果関係を「作り出す」こともあり、めっちゃ便利っぽいです。
プレゼンだろうがwebだろうが、物事を説明する際に物語は非常に有効です。

フロー状態

時間を忘れるくらい熱中することをフロー状態といいます。フロー状態は明確な目標があるときに生まれ、かつ簡単すぎず難しすぎない達成可能な目標の場合になります。そのため、目標達成のための定期的なフィードバックも必要です。
もしユーザーに集中してもらいたいときがあれば、達成可能な目標を定め、それに対しての定期的なフィードバックをかえしましょう。

5_人はどう注目するのか

繰り返しすぎるとミスる

ある一連の動作を無限に繰り返していると、意識せず自動的にできるようになります。そのうち、注意を払わなくなるためミスしてしまう場合があるでしょう。そんな事態を避けるため、ユーザーが何度も同じ作業をしなくて済むように対象を一括操作できるようなデザインにしましょう。

コントラストマシマシ

10円玉のデザインってどんなデザインでした？描いてみてください！といわれても、茶色で丸くて平等院鳳凰堂が…みたいに、だいたいの特徴しか出てこないので描けないと思います。人間はたいてい、顕著な手がかりしか見ていません。
そのため、本当に目立たせたい部分は他との違いを強調してコントラストを強くしましょう。

6_人はどうすればヤル気になるのか

進捗の可視化

目標に近づけば近づくほど、人間はやる気が出るものです。よくあるのは、ユーザー情報を入力していくと次第に100％に近づいていくというもの。80％とかだと、なんとなく100％にしたくなりませんか？また、何が終わったかより何が残っているかに注目しがちなようです。先程のユーザー情報入力の例でも、大概は「◯◯と◯◯が残っています！入力してください！」みたいな感じですよね？
上で述べた、フロー状態と合わせて何か使えそうな感じしますね。ユーザーに情報を入力してもらうときが一番使えそう？

怠惰

人間は本来怠惰な生き物…らしいです。そのためできる限り少ない作業量で物事を済ませようとします。また、人はあるサイトをほんの1〜2秒見て「使いやすいかどうか」を判断しています。ごちゃっとしたサイトでも、トップに検索フォームがあると必要な情報を目で探す手間がなくて便利ですよね？
そのため、ユーザーにできるだけ少ない作業量で物事を終えられるようにしましょう。トップページは特に工夫が必要だと思います。

7_人は社会的な動物である

共感パワー

ミラーニューロンという細胞があるのを知っていますか？人の動作を見ていると自分も同じ動作をしているように、同じ領域のニューロンの一部が発火するらしく、それがミラーニューロンです。また人に物語を聞かせると、心の中にイメージを思い描くことでミラーニューロンが発火する場合があるそうです。
もしユーザーにある行動をさせたければ、同じ姿を見せるか物語を活用しましょう。もしかしたら行動を促すことができるかもしれません。

8_人はどう感じるのか

データキャラが弱い理由

◯◯と言っていたのは顧客の75％だった。というデータに基づいたものより、物語に焦点を当てたほうが感情的に訴える力が強く、説得力があるようです。聞き手の共感を呼び、データだけでなく感情も同時に処理することにより記憶に残りやすいとか。
事実にもとづくデータを利用するのも大切ですが、物語も加えるとその情報を深いレベルで処理するようになるので効果的です。漫画のデータキャラは大抵、感情とかデータで測れないもので負けますよね？なんかそんな感じのと似てませんか？

見た目重視

人は第一印象で信用できないサイトを排除し、残った信頼できるサイトから情報を選択します。そのためその「信頼できない」という判断の段階で振り落とされないようにしなければいけません。
信頼できないwebサイトの特徴として見た目の第一印象・文字のサイズ・ナビゲーション・色・サイトの名称などといったものが挙げられます。最初の印象をよくするために、そのような要素に注意してデザインしましょう。

9_間違えない人はいない

エラーメッセージの重要性

人間はミスをしますし、問題ゼロの製品も存在しません。そのためエラーを想定してものを作るべきですが、そこでエラーメッセージが重要です。エラーメッセージはユーザーが何をしたか、発生した問題は何か、修正方法は何か、対処の具体例を記述すると非常にわかりやすく効果的です。
ユーザーが操作したときの起こりうる限りのエラーを考えましょう。できればそうしたエラーを未然に防ぎ、それができなければ効果的なエラーメッセージを記述し、ユーザーのストレスを減らしましょう。

プラス、マイナス、それ以外

エラーも種類があり、「プラスにつながるエラー」「マイナスにつながるエラー」「どちらにもならないエラー」があります。プラスにつながるエラーは、そのエラーを受けて最終的な目標達成に役立つ情報が得られるエラーです。マイナスにつながるエラーは、そのエラーを受けることによって作業の行き詰まりやスタート地点に戻るエラー、などユーザーのストレスになるエラーです。どちらにもならないはそれ以外です。
テストの際には起こったエラーをその3種類のどれに分類するか理解しましょう。

10_人はどう決断するのか

口コミパワー

集団心理のような感じで、人は確信が持てないときは人の言動に影響されやすいものです。レビューや評価はそういった場合は非常に効果的でしょう。また、レビューや評価を書き込んだ人についての情報を添えれば添えるほど、影響力が強くなるでしょう。(説得力が増す？)

おわりに

ごちゃごちゃ書き綴ったので文量が多くなりました。

個人的にこれはUIとかフロントエンドとかだけじゃなくて、もっと他の分野にも応用がきかせられると思った本でした。

ものづくりをする上でユーザーのことを意識するのは重要だと思うので、気になる方はぜひ図書館なり本屋なりで見てみてください。

力になると思います。

多分。