第10章　人間は、全部を同時には見られない

画面には、見出し、写真、ボタン、注意書き、広告が同時に並びます。それでも、私たちは全部を同じ強さでは見ていません。申し込みたいときはボタンを探し、開催日を知りたいときは数字を探します。

大きいもの、周囲と色が違うもの、動くものは目立ちやすくなります。しかし、目立つことと、その場面で必要なことは同じではありません。大きなキャンペーン画像が最初に目へ入っても、小さな「領収書を発行する」を探す助けにはなりません。

この章では、何を目立たせるかより先に、誰が何をしようとしている画面なのかを考えます。

10.1 画面にあっても、読まれるとは限らない

申込ページの上部に「受付は本日 17 時まで」と書いてあっても、利用者がすぐ入力欄へ進めば、締切を読まないかもしれません。

画面に表示されていること、目に入ること、意味を理解すること、あとで思い出せることは別です。「書いてあるから伝わる」とは限りません。

必要な情報は、必要になる場所へ置きます。締切は申込ボタンの近くへ、入力エラーの理由は問題のある入力欄の近くへ置きます。文字を大きくしたり赤くしたりする前に、情報と行動の関係を整えます。

全部を同時に見ないことは、能力不足でもありません。日時を探すときは数字や「開催日」という見出しが手がかりになります。申し込みたいときは「申し込む」という動作名を探します。目的に関係する情報へ注意を向けることで、行動を進めています。

ボタンを目立たせる方法は、色を鮮やかにすることだけではありません。大きさ、背景との明暗差、周囲の内容との位置関係も影響します。

図 10-4C で大切なのは、画面の上や中央なら必ず目立つということではありません。申込内容の直後にあるボタンは、文章を読み終えた流れで見つけられます。離れた場所に置くと、同じ見た目でも探し直す必要があります。

「赤は目立つ」「大きければ見つかる」のように、一つの特徴だけを規則にしないようにします。赤いボタンが赤い背景の上にあれば差は弱くなります。大きな画像ばかりのページでは、一つだけを大きくしても区別できません。目立ちやすさは、対象と周囲の関係から生まれます。

同じ画面に青いボタンが三つあると、「主要ボタンは一つにする」と言いたくなります。しかし、ボタンがどの範囲で、どの決定を表しているかによって意味は変わります。

「申し込む」「資料請求」「相談する」は、それぞれ異なる次の行動です。すべてが同じ強さで並ぶと、どれを選ぶ画面なのか分かりにくくなります。目的の違いを説明する、補助的な操作をリンクにする、次の段階へ移すといった整理が必要です。

こちらの三つは、各カードにある「詳細を見る」です。同じ決定が競っているのではなく、三つの対象へ同じ操作を繰り返しています。ボタンの個数だけで良し悪しを決めず、どのまとまりの中で何を選ぶのかを見ます。

次の設定画面で、利用者は「領収書を発行する」を探しています。中央には大きなキャンペーンバナーがあります。

広告は大きく、周囲と色も違うため、先に目へ入るかもしれません。しかし、領収書とは関係がありません。目立つことと、探しているものへ案内することは別です。

利用者は、見た目だけでなく言葉の意味や置かれそうな場所も使って探します。「領収書を発行する」なら、支払いや利用履歴に関する見出しの近くを探すでしょう。分かりやすい見出しの下へ置き、似た設定と同じ形でそろえることが助けになります。

イベントの内容を知る段階では、大きな出演者写真が良い入口になります。申し込む段階では、締切と申込ボタンの関係が重要になります。同じページでも、行動によって必要な情報が変わります。

ボタンだけを大きくしても、離れた締切は一緒に読めません。

二枚目では、写真、文字サイズ、ボタンの色を変えず、締切とボタンの距離だけを縮めました。「期限を確認してから申し込む」という一続きの行動が、一つのまとまりとして見えます。

何でも強くすれば、画面は「すべて重要」と叫び始めます。先に知る必要がある情報を操作の前へ置き、関係するものを近づけ、それでも見つけにくい場合に大きさや色を調整します。

「メリハリがない」という感想も、具体的に言い換えられます。「ページタイトルと小見出しの大きさが近い」「三つの異なる操作が同じ塗りボタンになっている」「締切と申込欄が離れている」と表せば、どこを直せばよいかが分かります。

必要な情報が見つかっても、押す場所が小さすぎたり、指では届きにくかったりすれば操作できません。

次章では、マウス、タッチ、キーボードで操作するときに、同じ画面がどう変わるかを見ていきます。

Simons and Chabris, “Gorillas in our midst,” 1999. 目的へ注意を向けているときの見落としを扱った研究です。Web 画面の見落とし率へそのまま置き換えるものではありません。
Itti and Koch, “Computational modelling of visual attention,” 2001. 周囲との差から目立ちやすさを考える研究の案内です。
Folk, Remington and Johnston, “Involuntary covert orienting is contingent on attentional control settings,” 1992. 探す目的と注意の関係を扱います。