第16章　人間は、同じ見た目に同じ働きを予想する

青い下線付きの文字を何度か押して別のページへ進めたら、次の青い下線付き文字にもリンクの働きを予想します。同じ形のカード、同じ位置のボタン、同じ色の状態表示が繰り返されると、画面の規則が見えてきます。

反対に、一つだけ違うものは目立ちます。しかし、目立ったからといって、なぜ違うのかまで分かるとは限りません。おすすめ、選択中、残りわずか、古い CSS の残り。理由は見た目だけでは決まりません。

この章では、同じ役割を同じ手がかりで繰り返し、必要な例外へ理由を添える方法を考えます。

16.1 反復が、画面の使い方を教える

ナビゲーションの項目が同じ文字と間隔で並べば、同じ種類の移動先だと分かります。設定画面の各行で、名前が左、現在の値が中央、変更ボタンが右に並べば、次の行でも同じ位置に操作があると予想できます。

反復されるのは、色だけではありません。

実装で同じ部品を使うことは、規則を守る助けになります。しかし、同じ部品でも長い名前で崩れたり、特定の状態だけ別の CSS が当たったりすれば、利用者には同じ規則として見えません。大切なのは、コード上の名前ではなく、最終的に画面へ現れた結果です。

次の一覧では、六つの催し名のうち「演劇」だけが赤く大きくなっています。

おすすめなのか、現在選ばれているのか、残席が少ないのか、文字の設定を直し忘れたのか判断できません。

一つだけ違うものが記憶に残りやすくなる現象は、孤立項効果という言葉で説明されることがあります。ただし、「目立つものは必ず選ばれる」という法則ではありません。違いに気づくことと、その意味を理解すること、選ぶことは別です。

差を付けるなら、「おすすめ」「選択中」「残り 3 席」のような言葉や、置かれた場所から理由が分かるようにします。

画面で周囲と違って見せたいものには、さまざまな役割があります。

申込ボタンと削除ボタンは、どちらも強く見せる理由があります。しかし、同じ強い色と形にすると、進む操作と危険な操作の違いが弱くなります。削除には具体的な操作名と確認、必要なら取り消しを用意します。

選択中は現在地、残席は情報です。どちらもボタンとは限りません。色だけに意味を任せず、言葉、線、印、位置から役割を見分けられるようにします。

すべてを同じ「目立たせたいもの」として扱うと、画面内の差と意味の対応が分からなくなります。何を知らせる差なのかを先に決めます。

青い文字をリンクだと予想して押したのに何も起きず、行全体を押したら移動できたとします。次に似た一覧を開いたとき、利用者は最初から行全体を押すかもしれません。このサイト独自の規則を、失敗から覚えたためです。

しかし、失敗を繰り返させて覚えてもらえばよいわけではありません。行全体が押せるなら、マウスを重ねたときやキーボードで選んだときに、行全体の輪郭や背景を変えます。操作後には、移動したことや保存できたことをはっきり返します。

規則は、説明文だけで教えるものでもありません。同じ見た目と同じ結果を繰り返すことで、次の操作を予想できるようになります。

次の商品一覧では、一件だけボタンの形と「今すぐ購入」という言葉が違います。

期間限定なのか、予約商品なのか、特におすすめなのか判断できません。もし古いボタン部品が残っただけなら、意図した例外ですらありません。

次の図では、商品の種類が違うことをラベルで示し、操作の形はそろえています。

「予約商品」という言葉が違いの理由を伝え、「詳細を見る」という同じボタンが共通の操作を伝えます。

例外の個数に決まった上限はありません。ただし、主要、セール、新着、警告、選択中をすべて異なる強い色で同時に示せば、どの差が何を意味するのか学びにくくなります。

通常の規則をまず繰り返し、本当に必要な違いだけを残します。そして、見た目の差だけで意味を当てさせず、理由を読めるようにします。

同じ操作へ同じ見た目を使えば、押したあとの結果も予想しやすくなります。しかし、処理中や失敗の表示が曖昧なら、もう一度押してよいか分かりません。

次章では、操作を受け付けたことと、処理の結果をどのように返すかを見ていきます。

Hunt, “The subtlety of distinctiveness: What von Restorff really did,” 1995. 一つだけ異なるものに関する研究が、単純な「目立てば選ばれる」という話ではないことを整理しています。
W3C WAI, “Understanding SC 1.4.1: Use of Color.” 色だけに意味を任せないための解説です。
WAI-ARIA 1.2, “aria-current.” 現在地や選択状態を支援技術へ伝える仕様です。