第20章　名前を答えにしない

Web デザインを学ぶと、「近接」「認知負荷」「メンタルモデル」のような言葉に出会います。名前を知ると、画面で気になったことを人へ伝えやすくなります。しかし、名前を言えたことと、問題の理由が分かったことは同じではありません。

たとえば、項目が多い画面を見て「認知負荷が高い」と言っても、何を直せばよいかは分かりません。探す場所が多いのか、言葉が難しいのか、前の画面の内容を覚えておく必要があるのかで、直す場所は変わります。

この章では、専門用語を正解の札ではなく、理由を考え始めるための手がかりとして使います。

20.1 名前を付ける前に、画面で見えたことを言う

「これは近接の問題です」と言う前に、「商品名の入力欄と、次の価格という文字が近い」と言えば、どこを見ているかが伝わります。見えたことが具体的なら、専門用語を知らない人も同じ画面について話せます。

名前は、そのあとで役に立ちます。「近いものは同じまとまりに見えやすい」という考えを知っていれば、距離を変えた案を考えられます。ただし、距離だけが理由とは限りません。文字の強さ、言葉の意味、境界線、操作後の変化も関係することがあります。

一つの名前で話を終えず、「ほかの理由なら、画面のどこを見るだろう」と考える余地を残します。

図 20-5A には、「保存」と「登録」という二つのボタンがあります。大きさ、色、形が同じなので、見た目から主役を選ぶことはできません。これだけなら、片方だけを強く見せる案が思い浮かびます。

しかし、迷いの理由が言葉にある可能性もあります。この画面で「保存」と「登録」がそれぞれ何をするのか、初めて使う人には分からないかもしれません。その場合は色を変えるより、「下書きを保存」「商品を公開」のように、押した後に起きることが分かる言葉へ直す方が有効です。

さらに、押した後の画面が変わらず、どちらの操作が済んだか分からない可能性もあります。この場合に必要なのは、ボタンの見た目ではなく、完了したことを伝える表示です。

同じ「ボタンで迷う」という出来事でも、見た目、言葉、操作後の変化という三つの場所を考えられます。専門用語は、この候補を増やすために使います。

距離が関係しているかを見たいなら、まず距離だけが違う二つの画面を比べます。

図 20-7A では、価格という文字が、上の商品名の入力欄に近く見えます。価格の入力欄よりも上の欄と組になっているように感じられ、項目の区切りが曖昧です。

図 20-7B で変えたのは、商品名の入力欄から次の「価格」までの間隔だけです。背景色、文字、入力欄の大きさは変えていません。そのため、二枚のまとまり方の違いを、間隔の違いと結びつけて考えられます。

これは「広い方がいつでも正しい」という意味ではありません。項目が多いフォームで間隔を広げすぎれば、画面が長くなります。ここで分かるのは、距離を変えると二つの項目の分かれ方も変わるということです。完成した画面では、読みやすさと全体の長さを一緒に整えます。

同じ商品が二つの分類にあると、重複はなくした方がよいように思えます。しかし、ノートを「文具」として探す人も、「勉強に使う物」として探す人もいます。二つの入口があることで、異なる探し方を助けている可能性があります。

図 20-8B では、星空ノートを文具だけに残しました。見た目は重複のない整った分類になります。その一方で、学習用品から探していた人には見つけにくくなるかもしれません。

二枚を見ただけで、どちらが探しやすいかは決まりません。「重複」という名前だけで悪いと判断せず、どんな人が、どこから商品を探すのかまで考える必要があります。

図 20-9A では、「境界を越える」という見出しが画面の下端で二つに分かれています。業務用の入力画面なら、文字が切れた不具合に見えるでしょう。しかし、これは展覧会の入口で境界を感じさせるために、作者が意図した配置です。

意図があれば何でも許されるわけではありません。少しスクロールすれば全文を読めるか、画面を拡大しても文字が隠れたままにならないか、背の低い画面でも次の内容へ進めるかは別に考えます。

「正しい配置か、間違った配置か」という二択にせず、表現の意図を残しながら、内容へたどり着ける形を探します。

近接、認知負荷、メンタルモデル、フィードバック。こうした名前は、画面へ貼る正解シールではありません。

役に立つ説明は、難しい名前を使った説明ではなく、画面のどこで何が起きているかが分かる説明です。そして、「距離だけでなく言葉かもしれない」「見た目だけでなく押した後かもしれない」と、次に見る場所を増やしてくれます。

名前を知る目的は、会話を終わらせることではありません。まだ見ていなかった場所へ、もう一度目を向けることです。