「インターフェースデザインの心理学」の紹介

2021/11/10: 有名な心理学の論文に少なからず再現性がないことが話題になっています。分野の自浄作用が働いているとも取れますが、以下の内容の信頼性は実際の本に記載された参考文献の調査結果を見て判断してください。

この本はWebサイト専門の本ではなく，インターフェース全般に対し心理学の観点からどう構成すべきかを述べた本です．フロントエンドにもいくつか活かせそうな箇所があるので，特に興味深かった部分を抜粋していきます．「記事の内容，フロントエンドで活かすなら」の順に記載します．ちなみにフロントエンドに活かせる，という視点で見れば「続・インターフェースデザインの心理学」のほうがおすすめです．今回はどちらからも抜粋しています．

- サルも人間も1度に覚えられる項目は4つまで

前のページの情報はWebサイト自体に記憶させておくのが望ましいですが，それが無理な場合でも5項目以上暗記して入力しなければならない項目があるとユーザーは挫折しそうです．

また，商品を比較させるような画面でも，比較項目が5種類以上になるとユーザーの頭がパンクする可能性があります．たとえばスタンダードプランとプレミアムプランを比較させるなら，同じ部分より違う部分を目立たせることで認知負荷を下げることができます．

- 年齢，性別に関係なく1人の人間が同じ時間に行動／思考できるのは1つだけ

会話をしながら，LINEをしながら，音楽を聴きながら，動画をみながら，様々な状況でアクセスされる可能性のあるWebサイトですが，そのようにしてアクセスされた場合，ページのほとんどは真面目に読まれてはいません．重要な情報はこれでもかと強調しない限り容易に見落とされるそうです．

余談ですが，日頃からマルチタスクを行っている人は単一の物事への集中力が欠けているそうなので，気をつけたいです．

- 今どれだけ進んでいるか，この作業でどれだけ進むかを明示するとやる気が出る

Noteのプロフィール入力や mgram の長すぎる診断で用いられている手法です．「プロフィール画像を設定しましょう！」設定するとバーが伸びてファンファーレ．60個目の回答，「ここまできたらあと少し！」いろいろな箇所で見覚えのある仕掛けです．

- 具体的には1桁

ホテルや飛行機の予約でよくある手法です．これも見覚えがあるので挙げました．実際実装する，となると具体的に数字計算していれるんでしょうか．たまにベタ書きで入れてるサイトもありますけど．

- 「顧客の75%」というより物語にするほうが記憶に残りやすい

これはフロントエンドではないのですが，何かをアピールしたいときによく用いられ，そしてしばしば禁止される手法です．最近では Youtube で「薄毛でふられたけどこの育毛剤をためしたらモテモテ」みたいな広告が禁止されましたが，80%改善！とかより感情に訴えかける効果が高いため用いられ，かつそれが理由で禁止されたのでしょう．

- 見ることと行動を起こすことは違う

Webサイトはクリックして開かれたあと，どこを見てもらってどう視線を動かさせるかが重要です（Z / F 移動，色，余白）が，一方で見てもらったからといってブラウザバックされないとは限りません．スクロールやクリックといった行動を促すためには，そうしたいと思えるような仕掛けに頼ることもできます．

たとえば90vhのトップ画面は，下に何かあるのを予見させてスクロールして「発見」する喜びを与えますし，キャラクターが嬉しそうにボタンの方向を向いていれば，釣られてクリックするかもしれません．

- 人間でもロボットでもいじめられているのを見た時は脳の同じ部位が活性化する

システムがダウンしたとき，あるいはローディングでユーザーを待たせる時，ユーザーはシステムに完璧を求めるので怒りの感情を抱きますが，たとえばローディング画面で一生懸命ロードバーを推し進めるキャラクターが現れたなら，怒りより先に「がんばれ！」と小さな子供を見守るような気持ちになります．

余談ですが，ローディング画面はいつ終わるかわからない円形より 0-100 のバーのほうが「いつか終わるかも」と思って待ってくれる時間が長いそうです．

- 人は数秒のうちに（特に顔の表情に）感情が影響される

いろんな会社ページでトップに楽しそうな社員の顔が映るのには意味がありました．Webサイトに入った瞬間に気分を高揚させれば，後に受け取る情報は大抵プラスになることでしょう．

また自分が楽しくなくても別の人があるWebアプリを楽しそうに使っているのを目の当たりにすれば，自分もまた同じように楽しめるようになることがある，とも言えます．見かけるのはSNSでもいいですし，現実と仮想を掛け合わせた空間で他者と交流する場合にも感情の伝播は発揮されると考えれば何かと面白いことができそうです．

- 画面中央以外の部分をタップするときは，たいてい両手を使った

「親指の届く範囲なら片手でタップできる」というのは神話で，実際のところ，画面中央のみが素早く正確にタップできる範囲であったそうです．PCではお馴染みであったタブを用いたレイアウトを最近見かけないのは，スマホの横画面が狭いこともそうですが，タブの境界が最もタップしやすいため意図しない動作を引き起こしやすかったからかもしれません．

- 株式市場のデータをパターンにしてベストに送った．ベストを着せられた被験者は，最初訳もわからず赤と緑のボタン（知らされてはいないが株の売買ボタン）を押して正解か不正解かのフィードバックを受けていたが，だんだんと正確にボタンを押せるようになっていった．

上で挙げたように人は感情で先に判断を下しているだけでなく，無意識のうちに正しく判断できるそうです．（同じ本の「フィーリング」に関する項目でも同じようなことが書いてありました．）だからこそ感情や無意識に働きかけるような仕組みのほうが良い結果を得やすいのでしょう．

本にはないですが......

感情や無意識はその場における正しい判断は下せますが，影響のされやすさや局所的な判断にしか長けていないのもあり，容易に影響されやすいです．

Twitterでいいねを生み出した方は，世界中に愛を溢れさせたかったそうです．YouTubeのリコメンドシステムを作った方は検索の手間を省いて快適な動画サーフィンを楽しんでもらいたかっただけだそうです．実際は，ウケのいい過激な発言や動画に人々の関心が集中し，左右二極化が進みました．

感情や無意識にとって心地よいWebサイトを生むことは知識／スキルがあれば可能になってきているように思います．ただそうして作るものが，中毒や偏執を生んでしまう可能性がある，ということも心の片隅に置いておかなければならないかもしれません．