Design
Leave a comment

そのデザインの理由をより言語化する。人の心理と行動原理から学ぶデザインルール「インタフェースデザインの心理学」

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針
Susan Weinschenk
オライリージャパン
売り上げランキング: 10,075
 

人はどのように認知し、考え、行動するのか。
本書は、人の行動原理を「ユーザインターフェース」の視点から、デザイナーやエンジニア向けに100の指針としてまとめられたものです。






なぜ?|本書の意義とこのエントリーの目的

ユーザに対して望むアクションがあり、その目的に応じるようデザインしていく場合、まずユーザへの深い共感と理解が起点となります。
現状の技術や方法論、トレンド、競合含めた周辺環境、自社の背景…。デザイン上におけるこれら考慮要因ももちろんありますが、特にデザイン思考においてはユーザを知る、さらに言うと人の深層心理と行動を知る、というステップも重要です。

本書は、ユーザの深層心理や行動を観察によって知っていく前段階の、いわば前提知識の獲得として活用できる本でしょう。
一定の経験を積んだデザイナーであれば、自明な内容のものも多くあるかもしれませんが、他者と共有するうえでそのデザインの根拠を示す、またはロジックを言語化するための予備として参考になりえます。その入り口としても、自分の頭の整理としても参考になると思われたのでまとめてみました。


だれ向けか?|本書の対象者

主となる対象者は、Webやアプリを開発するデザイナーとエンジニアです。ただし、本書はタイトルが指すUIデザインという観点に留まらず応用できる点が、大きな特徴と言えます。従い、以下のような立場の人も対象者となるでしょう。


  • サービスをデザインする、ストラテジストやクリエイティブ・ディレクター
  • コンテンツと情報を設計する、ディレクターやインフォメーションアーキテクト
  • 意思決定し責任を負う、発注者やプロジェクトマネージャーなど

インデックス|本書の目次

本書は、10の視点(=章)から構成されています。以下より、さまざまな状況で活用できるそうな代表例をいくつか挙げつつまとめてみます。


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




 1. 人はどう見るのか

人は目が捉えた情報をそのまま見ているのでなく、目が受理したイメージを脳へ伝達し、脳の処理結果を見ています。いかに見てもらうか?を考えるに対し、視覚に関わる脳の特性から見てみます。


#002. 対象の「あらまし」をつかむのは中心視野より周辺視野の役目

 view01

概要

  • 視野には中心視野周辺視野の2種類がある。
  • 人間の祖先がサバンナで生き残れたのは、忍び寄るライオンの姿を周辺視野で捉える遺伝子が受け継がれたからだ、という説。
  • PCでウェブサイトを閲覧している時などに使うのは、周辺視野。一瞥によってそのページの概要を掴む、という行動を行っている。

この特性が該当するケース

  • 周辺視野によって、目の前の文章を集中して読みたい時(読ませたい時)、画面横の広告バナー(特に動画バナー)の存在がうるさく感じられ、集中できなくなる
  • アニメーションやパララックスなど表示演出が過多なため、PCサイト本文への注意が散漫となり、結果として読まれなくなる。

対応例として

  • 周辺視野はあらましを伝える世界観伝達のために用い、誘導や離脱を目的とする要素は配置しない。(例:arigato Inc.
    arigato 音や料理、小物などで周辺視野では世界観を伝えながらも、本文エリアや誘導リンクは中心視野を用いることで、目線がブレにくく没入しやすい回遊設計がされている。

#004. 顔認識専門の脳領域がある

ui-Psychology004

概要

  • 脳には、顔を認識するための専門領域がある。遠くからでも人の顔を素早く識別できるのは、その能力による。

この特性が該当するケース

  • Webページを見て、まず注目してしまうのは人の顔。
  • そのうち最も訴求力があるのはこちらをまっすぐに見つめている顔。さらに決め手はにあり、人はWebページにある顔の目と目線の先を見てしまう傾向にある。

対応例として

  • 目線に留めて欲しい要素へは、人の顔を配置する(例:apple)
    ui-Psychology004-1
  • 読んで欲しいメッセージや、導きたいアクションがある場合、目線の先に配置する。(例:apple)
    ui-Psychology004-2




2. 人はどう読むのか

読むことは、情報伝達の主たる手段です。しかし読むこと理解することとは、決して同義ではありません。いかに読んでもらうか?のために、デザイン上で知っておくべき原理を、以下例からまとめてみます。


#015. パターン認識のおかげでフォントが異なっても同じ文字だと認識できる

概要

  • どのフォントを用いても、パターン認識によって認知するうえでは変わらない。
  • しかし印象値という点で、選ばれるフォントによっては文章内容の認識まで変化する。

この特性が該当するケース

ui-Psychology015-1


  • ある運動の指示文を、読みやすいフォントで渡された人たちは、その運動内容もやさしいものとして捉えた。
  • 一方、読みにくいフォントで渡された人たちは、その運動が実際の倍近く時間を要する難しい運動だと判断し、行うことにも気が進まない状態となった。

対応例として

  • フォントは、人の印象値のみならず、感情面さらには行動内容まで変えてしまう効果も時に持つ。(例:The Sydney Morning Herald
    ui-Psychology015-211 オーストラリアの新聞「The Sydney Morning Herald」が、一面で吹き出し表現&ComicSansを採用。Twitter上で炎上した。




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

人が持つ記憶容量は限られており、記憶できる期間も正確さも不確かです。いかに記憶してもらうか?のために、必要な配慮のポイントを見ていきます。


#020. 一度に覚えられるのは4つだけ

概要

  • 人が一度に記憶できるのは5個から9個(7±2)で、一度に処理できる情報の数も7±2個である、というマジカルナンバー7±2説
  • しかしこの説は実際の研究に基づくものでなく、現在の研究によるとマジカルナンバーは4であると言われている。

この特性が該当するケース

  • 情報をチャンク(まとまり)に分けてグループ化すれば、4が5にも6にもなる(電話番号(03-1234-5678)、郵便番号(351-0025)など)

対応例として

  • アプリなど操作に速度性が求められるユーザインターフェースにおいては、より4を意識化した方が操作性は高まる。(例:Twitterアプリのメニュー数、iphoneロック解除のパスワード)
    ui-Psychology020-111




 4. 人はどう考えるのか

人はどう理解し、どう考えるのか?脳が行う処理を知ることは、より目的に対して適切な情報伝達法や体験設計を考えるうえで、強い意義をもちます。その主な例を、以下に見ていきます。


#027. 情報は少ないほどきちんと処理される

概要

  • 情報の提供側が、特に犯しがちな失敗は一度に大量の情報を与えてしまうこと
  • 人がその時に必要とする情報だけを与える段階的提示を採用した方が、ストレスは少ない。
  • 人に対する負担度合いは、「認知(考える)」>「視覚(見る)」>「運動(動かす)」である。

この特性が該当するケース

  • 重要なのはクリックの回数ではない。段階的提示をするとクリック数は増えるが、ユーザへの負荷は考えるよりもクリックの方が低い。

対応例として

  • 上位から下位(大分類から小分類)へと対象を詳細化していく、ドリルダウンナビゲーション(例:ミュージックiOSアプリのドリルダウンナビ)
    ui-Psychology027-11
  • 1画面内で表示内容を切り替えることで、ステップへの負担感を心理的に減らす(例:appleストア
    ui-Psychology027-21 ディセーブルな選択項目を半透明レイヤーとすることで、全体のステップ数も把握できるため、タスクへの負担感を軽減させている。

#033. 人は物語を使って情報をうまく処理する

概要

  • エピソードや物語には、相手の注意を引き、気を逸らさせず、説得を与える力を持つ。
  • しかし、物語はエンターテイメントのためだけに存在するわけではない。

この特性が該当するケース

  • 伝える情報がいかに無味乾燥なものでも、物語を使うことで分かりやすく、興味深く、記憶しやすいものになる。

対応例として

  • 例えば年次報告書のような、興味をもたせにくい内容の情報伝達ほど、物語の力を使うことでより機能される。(例:カナダの動物園「Calgary Zoo」による、「Instagram」を使ったアニュアルレポート)
    ui-Psychology033-12 写真を物語の切り口とし、詳細テキスト内に情報を伝えるという手法を取っている。




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

人を行動へと導くには、モチベーションの原理を活用した体験設計は欠かせません。どのように人はヤル気が起こるのか?持続させることができるのか?のための原理例を見ていきます。


#050. 目標に近づくほど「ヤル気」が出る

概要

  • 人は目標に近づくほど行動が早くなるという、目標勾配効果がある。

この特性が該当するケース

  • 無料のコーヒーがもらえる以下2種のポイントカードがある。
  • ポイントカードA:12個のマスに最初から2個スタンプが押されているカード
  • ポイントカードB:最初からスタンプの押されていない10個のマスのカード
  • あと10杯注文しなければならない事実は両者変わらないが、Aのカードを持つ人の方が早くスタンプを集めるという結果となった。
  • 人は目標に向かって進むとき、既に完了したものに注目するのと、到達までに残されているものに注目するのとでは、残されているものに注目するの方が強い動機づけになる。

対応例として

  • 消化タスクを強調し、残タスクの少なさが際立つよう伝える。(例:Dropboxのスタートガイド)
    ui-Psychology050-1 消化タスクを明示し、達成感を与え、残タスクを明確にしつつインセンティブ(250MBのボーナス)を示すことで、目標までのモチベーションを維持しようとしている。

#053. 人は予測ができないと探索を続ける

概要

  • 脳内のドーパミンは、報酬を得たときより、報酬がもらえそうだという兆候に敏感になる

該当ケース

  • 人は、着信メッセージやSNSでの未読通知を見ると、つい注意が行ってしまう
    ui-Psychology053-1

対応例

  • 着信やアクションに音を組み合わせると、さらに反応的になる(例:LINE通知音、メール着信音など)
  • 情報を少量にし、さらに情報を得るための手段を提供するという方法はさらにドーパミンを活発化させる。(例:twitterの告知メッセージ)
    ui-Psychology053-21




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

人と人との間の共感や絆は、どのように生まれるのか?その原理例を見ていきます。


#064. 人には模倣と共感の能力が備わっている

概要

  • 相手のジェスチャーを真似るだけで、好感度も会話のはずみ具合も高くなる

該当ケース

  • 一緒に歌う、一緒に御飯を食べる、同じチームを応援する、など同期活動を行うだけで、協調性は増し、社会的なつながりは強まる

対応例

  • バルスツイート、パブリックビューイングなどui-Psychology064-1
  • BIC – Universal Typeface Experimentui-Psychology064-1文字を集積し、最大公約数の文字を作るWebプロジェクト。同じ行為をしてもらうことでの間接的なユーザ同士の結びつけと、普遍的な共感を呼び覚ます企画とも捉えられる。




 8. 人はどう感じるのか

人は論理的な考えだけにもとづいて行動しているのでなく、むしろ感情的、感覚的、無意識的に行動を取ることの方が多くあります。その傾向を見ていきます。


#079. 人はまず「見た目」と「感じ」で信用するか否かを決める

概要

  • 人は信用できないという判断を素早く下す。
  • その最初の信用拒否でふるい落とされないためには、見た目の要素がきわめて重要。
  • 信用拒否を通過し、信頼を勝ち取るか否かは、内容や信憑性によって決まる。

該当ケース

  • 高血圧症の患者に、高血圧に関する情報をウェブで探してもらったところ、「信用できない」と判断された83%の意見が、見た目の印象、文字サイズ、ナビゲーション、色、サイト名などデザインに関係するものであった。
  • その後、信用できるとされたサイトが信頼に値するまでの拠り所の特徴は、高血圧症の患者だけを対象に専門家によるアドバイスや情報が盛り込まれたものであり、それは自分のために書かれたものとして感じられたサイトだった。ui-Psychology079-1

対応例

  • 「見た目」と「感じ」とは何によって構成されるか?を例えば以下の様な判断軸から検証する
    • 見た目(ロゴ、フォント、配色、写真等)
    • 言葉づかい(名称、ラベル、ワーディング等)
    • 使いやすさ(ナビゲーション、文字サイズ、インタラクション等)
    • 一貫性(トーン&マナーや、レギュレーションの統一と遵守等)




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

人がある決断をするうえで、どんな要因によって影響を受けるのか?体験設計上、前提として知っておくべき原理とも言えます。


#092. 人は自分の処理能力を超えた数の選択肢や情報を欲しがる

概要

  • 人は自分が決定権を握っていると思いたいため、なるべく選択肢は多くしたいという欲求を持っている
  • そのため希望する選択肢の数を尋ねると、「たくさん」という答えが返ってくる
  • しかし、選択肢が多すぎると思考が麻痺し、人は逆に何も選ばなくなってしまう

該当ケース

  • ジャムの法則
    6種類のジャムを並べたテーブルと、24種類のジャムを並べたテーブルの2つを用意。
  • しかし、どちらのテーブルでも試食をした人の人数は変わらない結果に
  • さらに、最終的にジャムを購入した人の割合では、6種類揃えたテーブルの場合は30%、24種類のテーブルでは3%、と大きな差が開く結果となった。

対応例

  • 商品やサービス、できること(提供機能)の数は絞ること。(例:evernoteの提供サービスは3つ。また機能は書く、集める、見つける、発表するの4種にフォーカスされている)

    ui-Psychology092-1




まとめとして

本書は2012年6月発行であり、約2年ほど経過している書籍ですが、人の心理行動に関するひとつの普遍的な型を提示しているとも言えます。

そのため読み手それぞれの立場ごと、その時々の状況や制約条件ごとで、都度角度を変えながら活用する事ができるレファレンスとして扱う事ができるでしょう。

デザインのクオリティとは、知識と経験の集積によってまず担保されます。発想と感情をジャンプさせるセンスの力学は、この担保なくして有効に機能しません。品質の担保を裏付けるための一つの道具として、もし本書に興味があれば手にとって見ることをおすすめします。


インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針
Susan Weinschenk
オライリージャパン
売り上げランキング: 10,075


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です