第12章　人間は、思い出すより手がかりから見つけやすい

知っている人の名前が出てこなくても、名簿を見ればすぐ分かることがあります。会場の正式名称を思い出せなくても、何文字か入力して候補が現れれば目的の場所を選べます。

何も見ずに答えを思い出すことを再生、表示された候補から知っているものを見つけることを再認と呼びます。名前を覚えるより、画面での違いが分かれば十分です。

ただし、候補を出せば必ず簡単になるわけではありません。似た名前が大量に並べば、今度は探して見分ける必要があります。この章では、必要な手がかりを、必要なときに見つけられる画面を考えます。

12.1 正式名称を思い出さなくても検索できる

利用者は会場名を正確には覚えていません。「し」から始まることだけを思い出し、検索欄へ「し」と入力しました。

何も表示が変わらなければ、検索中なのか、候補が一件もないのか分かりません。短い読み込みでも、候補を探している途中だと伝えます。

正式名称を一文字ずつ思い出す代わりに、候補を見て選べます。ただし「市民ホール」と「市民会館」のように名前が似ている場合は、地域や住所、会場の種類も必要です。

候補を取得できなかった場合に、空の一覧だけを表示してはいけません。「該当する会場がない」と「通信に失敗した」は別の状態です。失敗したことを伝え、もう一度試す操作を用意します。

入力欄と候補一覧を組み合わせた部品を、コンボボックスと呼びます。見た目だけでなく、キーボードでも候補へ移動できること、現在選んでいる候補が読み上げられること、失敗状態が分かることまで含めて作ります。

会場検索の完成した画面を見ます。

利用者は最初に「市民」という二文字だけを思い出しました。候補が現れると、正式名称を思い出す作業から、地域と規模を見比べる作業へ変わります。

候補を増やしすぎると、長い一覧から探す負担が生まれます。数文字の入力で候補を絞り、見分けるために必要な情報だけを添えます。カテゴリーや現在地から絞り込める場合もあります。

自由入力を残した方がよい場面もあります。まだ登録されていない新しい会場を入力するときや、候補へ表示できない情報を扱う場合です。「候補から選ぶ」と「自由に入力する」のどちらか一方を、いつでも正解にはしません。

画面へ手がかりを残す方法には、最近使った項目、履歴、パンくずリスト、手続きの進み具合などがあります。どれも同じものではありません。

「最近編集したイベント」は、直前まで扱っていた対象をもう一度見つけるための入口です。履歴は、それらをどの順番で見たり変更したりしたかをたどるために使います。

パンくずリストは、「組織 > イベント > 申込」のように、サイトの階層のどこにいるかを示します。「2 / 4 情報入力」という手順表示は、申し込みがどこまで進み、あとに何が残っているかを示します。

パンくずリストはブラウザの戻るボタンとも違います。通ってきた順番ではなく、サイト全体の中で現在のページがどこに属するかを示します。

最近使った項目には、プライバシーへの注意も必要です。共有端末へイベント名を残してよいか、いつ消すか、別のアカウントと混ざらないかを決めます。

入力欄の中へ薄く表示される例文を、プレースホルダーと呼びます。例文は入力を始めると消えます。そのため、項目名をプレースホルダーだけへ任せてはいけません。

入力後には、連絡先のメールアドレスなのか、公開するメールアドレスなのか分かりません。書き方の例も消えています。

項目名、書き方の例、入力した値、エラーの説明には、それぞれ別の役割があります。項目名は入力後も見えるラベルとして残します。形式の指定が必要なら、その近くへ短く表示します。間違いがあれば、何をどう直すかを具体的に伝えます。

「思い出させず、見て分かるようにする」は、すべての候補を最初から画面へ並べるという意味ではありません。候補が三十件、千件と増えれば、今度は長い一覧から探す作業になります。

最近使った項目から選べる、何文字か入力すると候補が現れる、カテゴリーで絞れる、必要な説明をその場で開ける、といった方法があります。必要になったとき、すぐ手がかりへたどり着けることが大切です。

候補には、選んだあとに何が起きるかも分かる名前を付けます。「登録済みの会場」と「過去に検索した言葉」を同じ見た目で混ぜると、選択後の結果を予想できません。種類が違う候補は、見出しや説明で分けます。

思い出すことを減らすと、探して見分ける作業が生まれます。どちらか一方をなくすのではなく、利用者が持っている少ない手がかりから、目的のものへ進める画面を作ります。

候補が見つかっても、選択肢が多く似ていると、どれを選ぶか迷います。

次章では、選択肢の数だけでなく、違いの分かりやすさと、間違えたときに戻れるかを考えます。

Jakob Nielsen, “Recognition Rather Than Recall: Memory in User Interfaces.” 思い出す負担を減らし、画面上の手がかりを使う考え方の入口です。
W3C WAI-ARIA APG, “Combobox Pattern.” キーボードや読み上げにも対応した候補一覧の作り方です。
W3C WAI, “Form Instructions.” ラベル、説明、プレースホルダーを分ける理由を確認できます。
W3C WAI-ARIA APG, “Breadcrumb Pattern.” サイト内の現在地を示すパンくずリストの実装例です。