【解説】『インターフェイスデザインの心理学』の要点＆活用方法
はじめに
今回の記事では、O'Reillyの書籍『インターフェイスデザインの心理学』の要点と活用方法を初心者から中級者目線で簡潔に解説する。本書は良質なデザインを設計する上での重要なポイントやテクニックを心理学の観点から徹底解説されているので非常に説得力がある1冊である。私たちプログラマーは仕事をする上で誰かに何かを「伝える」ことは必ずやっている。さらに、何らかのWebサイトやアプリケーションを開発してそれを一般向けに公開する人も少なくないだろう。
このように、私たちは普段誰かに何らかの物事を伝えている。誰かにわかりやすく物事を伝えるためには、相手(サイトやアプリケーションであれば「ユーザ」)に対する理解が欠かせない。サイトやアプリケーションを使っている相手は普段どう考え、どう判断するのだろうか？相手の心を捉えるものはなんだろうか？相手はどんな過ちを犯しやすいのか？このような人間の普段の行動を解明し、それらを良質なデザイン設計につなげるために本書が登場した。
本書では主に以下のポイントに絞って要点と実務での活用方法を詳細に解説する。
- 人はどう見るのか
- 人はどう読むのか
- 人はどう考えるのか
人はどう見るのか
人はパターン認識でものを識別する
私たち人間に入ってくる情報を上手に理解できるのは「パターン」を上手に利用しているからである。例えば、以下のプログラムではただの数字の羅列ではなく「4つの数字」に見えるだろう。
134 453 687 809
アプリケーションを開発する際にアイコンなどの何らかのマークでログインやマイページなどを表現すると思うが、ユーザに素早く認識してほしいなら単純な形を使って認識させよう。認識してもらうもの(具体的にはアプリケーションで使うアイコン)が小さければ小さいほど、装飾を多くせず単純な形にしたほうがいい。
人間は何かを見るときに本能的にパターンを探すので、できるだけパターンを使おう。グループ化や余白を使ってパターンやグループを作る。更に、アイコンなどに使うものの絵はより単純で見やすいものをできるだけ使おう。そうすることで、ユーザに自分がやってほしいこと(アプリケーションならログインや会員登録など)を簡単に伝えられる。
人は視野の中の変化を見過ごすことがある
人間は自分の視野の中で大きな変化が起きてもそれを見落とすことがよくある。あるものが画面上にあるからといって、それをユーザが必ず確認してくれるとは限らない。特に、アプリケーションの画面を更新して一部だけを変更したときにこれがよく起こる。(例えば、入力が正しくない旨のエラーメッセージを追加したときなど)たとえアプリケーション内で重要な情報を更新しても、ユーザは必ずそれに気づくとは限らないのだ。
確実に変更した箇所に気付いてもらうためには、視覚に訴える合図(点滅など)や聴覚に訴える合図(ブザー音)を追加しよう。アプリケーションを扱う上での大事なこと(基本的な使い方やログインフォームの無効など)はユーザにわかるように大げさでもいいので表示しておこう。
文化によって色の意味が変わる
私たちプログラマーは様々な色を使ってアプリケーションのボタンや画面などを装飾する。世界中の人々を対象にアプリケーションやWebサイトを作るなら、色が持つ意味を文化や国ごとに理解しておく必要がある。実は文化や国ごとに色の意味が異なることを理解しておかなければならない。例えば以下のようなケースが挙げられる。
- 白：アメリカでは純潔を意味し結婚式でよく利用されるものの、白が死を意味して葬式で使う文化圏もある。
- 赤：多くの国で「情熱」「活発」などの意欲的なイメージがある。中国では祝い事の際に使われる色として認識されることが多い一方で、ソ連が国旗に赤をシンボルカラーとして使っていることから「革命」「共産主義」などのイメージがある。
- 青：「冷静」「信頼」のイメージがある一方で、食欲を下げるイメージとして知られている。(多くの国で食品に青が使われることはない)欧米では青は「わいせつ」のイメージがある。成人向けの映画をblue filmと呼んでいるのはこれが由来だと言われている。
- 緑：「自然」「癒やし」のイメージがある一方で、西洋では「毒」を連想させる色でもある。
このように考えると、色は文化圏で意味とその解釈が異なることがわかる。自分のデザインの対象(アプリケーションやWebサイト)となる文化圏をいくつか選んで、想定外の事態や誤解をできるだけ阻止するために文化圏ごとの色の意味を正しく理解しておこう。文化圏ごとの色の意味の違いについて興味があれば、以下のサイトを確認するといいだろう。色は見た人が思い浮かべる意味に配慮して慎重に選ぶべきである。
人はどう読むのか
画面上のものは紙に書かれたものより読みにくい
コンピュータやスマートフォンなどの画面で文字を読むことと、紙に印刷された文字を読むことは決して同じではない。コンピュータ上の画面の像のリフレッシュと発光は目を疲れさせることを理解しておこう。
コンピュータの画面上の文章を読みやすくするためには、十分な大きさのフォントを用意して文字と背景に十分なコントラストを付ける必要がある。以下に示すように、白の背景に黒の文字が読みやすい最良の組み合わせとなる。
▼見やすい例
▼見にくい例。本書では黒地に白の文字は読みやすくはないと言われている。(ドラゴンクエスト風の画面は心理学の観点からすると良くないらしい。)
さらに、コンピュータ上に表示する画面はユーザにとって読む価値のある内容にすること。結局のところ、Webページの内容が閲覧者にとって興味深いものであるかどうかが重要である。閲覧者が求めているものを把握して、そのような内容をできるだけ明快でわかりやすい言葉で表現しよう。
長い行のほうが速く読めるものの、一般には短い行のほうが好まれる
画面上に表示する文章のカラム幅(行の長さ)を決める必要に迫られたことはないだろうか？答えは、そのページを速く読んでほしいか、それともページそのものを気に入ってほしいのかによって決まる。
例えば、医療関係者に今話題の病気やその対処法に関する最新情報を伝えるページを管理しているのであれば速度を重視して行を長くするのがいいだろう。その場合、閲覧者は記事を読みyたくて訪問しているので最新情報をいち早く知りたいからだ。それゆえ、情報を重視しよう。一方で、地元の美術館のモダンアートの展示会に関する最新情報を地域の美術館ファンに向けて来場者を増やそうとするなら行の長さを短くして「食いつき」をよくするための努力をしたほうがいいだろう。
要は、文章の内容と対象とする読者によって重要視することを決める必要があるということだ。必要なポイントは読む速度と読者の好みや対象である。ただし、文章はできるだけ短い行で書くようにしよう。
人はどう考えるのか
情報は少ないほどきちんと処理される
脳が一度に処理できる情報はほんのわずかである。脳の中で意識的に処理される情報は40くらいほどだと言われている。一度に大量の情報を与えないようにすることが重要である。それを防ぐためには、段階的開示が必要だ。
段階的開示とは、人がその時その時点で必要としている情報だけを提供することを意味する。一度に少しずつ情報を提供することで情報量の多さでユーザが圧倒されてしまうことを未然に防ぐと同時に多種多様なニーズに応えられるからだ。ユーザの中には、大まかな説明で良いと考える人もいれば詳細を知りたいと思っている人もいる。段階的開示をすると、ユーザは何回もクリックしなければならないだろう。ところが、クリックの回数は重要ではない。むしろユーザは喜んでクリックをする。クリックのたびに適度な情報を得ながら先に進めるのであれば、クリックしていることを意識しないだろう。何回クリックするか数えるよりも段階的開示を行う必要がある。
▼下記の画面はZennの記事。右側に目次を表示することで段階的開示を行っている実例。右側に目次を表示することで読者が必要な情報に即座にアクセスできるような環境が整っている。
ただ、段階的開示を行う際にはユーザが必要としているものをしっかり調査して把握することが前提になることについては十分留意しておこう。
人は30%の時間はぼんやりしている
あなたは論文やレポートに目を通していて、ふと気がつくと同じ文を何回も読んでいたという経験はないだろうか？目の前の文章のことを考えずにいつの間にかぼんやりしていたことは誰にでもある経験だろう。本書ではこれを「マインドワンダリング(注意散漫)」と表現している。マインドワンダリングは時と場合によっては長所となりうるし、短所となりうる。
【マインドワンダリングの長所】
- 目の前の作業に集中しつつ、別の物事を考えられること。例えば、車を運転しているときに前方に注意を払いつつ「ガソリンをいつ補給しようか」と考えることができる。
- ある考えから別の考えに意識を切り替えたり、もとの考えに素早く戻ったりできる
【マインドワンダリングの短所】
- 重要な情報を逃がす
- 「脱線」していることに気づかない。例えば、同僚が作成したレポートを読まなければならないときに飲み会のことを考えていることが挙げられる。
本書で取り上げられているマインドワンダリングへの対処法は主に以下の3つ。
- 前提として、人間は限られた時間しか仕事や作業に集中できないことを理解しておこう。意識が度々散漫になることは当然のことである。
- リンクを駆使してトピックからトピックへ素早く切り替えられるような仕組みを用意しよう。人間がネットサーフィンを好むのは、このようなある意味で注意散漫な行動ができるからだ。
- ユーザがマインドワンダリングの状態になったときでも、「現在位置」を瞬時にわかるような仕組みをつくろう。そうすれば、元の場所に戻ることも次に進むことも両方できる。
おわりに
今回の記事では、O'Reillyの書籍『インターフェイスデザインの心理学』の要点と実務での活用方法を簡潔に解説した。本書には本記事で紹介したもの以外にもデザインを設計する上での重要なポイントが数多く記載されている。詳細を知りたければ実際に本書を手にとって読んでみてほしい。デザインの設計を進める上でのヒントになれば非常に幸いである。
本書を通して得られた学びをアプリケーションの開発や文章の執筆の際に役立てて、ユーザや閲覧者にわかりやすく価値のある情報やデザインを届けられるように学習と行動を継続していきたい。
参考文献・サイト一覧
Discussion