検索結果が0件の画面では、「何が見つからなかったか」と「次に何を変えられるか」を一緒に示します。ただし、通信に失敗して結果を取得できなかったなら、0件とは言えません。
検索や一覧画面を設計する人に向けて、公開デザインシステムの指針と、社内資料検索の作例をまとめます。作例は架空で、効果を測定した事例ではありません。
「表示するものがない」を4つに分ける
Carbon Design Systemは、データがまだない状態、検索などの操作による空の状態、システムや権限の問題を区別しています。Empty states
この区別を社内資料検索に当てはめると、次のように整理できます。表示文はこの記事の案です。
| 状態 | 表示文の例 | 次にできること |
|---|---|---|
| 検索は完了したが条件に一致しない | この条件に一致する資料はありません | キーワードや絞り込みを変更 |
| 資料がまだ登録されていない | 資料はまだ登録されていません | 登録権限があれば資料を追加 |
| 結果を取得できなかった | 検索結果を取得できませんでした | 同じ条件で再試行 |
| 一覧を閲覧する権限がない | この一覧を表示する権限がありません | 必要なら管理者へ申請 |
「未登録」と言えるのは、対象の一覧にデータがないと確認できる場合です。閲覧できる範囲だけを検索するシステムなら、その範囲を画面に示します。アクセスできない資料の存在まで知らせてよいかは、公開範囲の設計と合わせて決めます。
0件でも、入力した条件は見えるようにする
Carbonの検索パターンは、0件も含めた件数の表示と、検索が行き止まりにならない案内を勧めています。Search
この記事の作例では、「経費精算」というキーワードと「営業部」という絞り込みを残します。検索語を間違えたのか、条件を狭めすぎたのかを、利用者が見直せるようにするためです。
「経費精算」の検索結果：0件
対象：閲覧できる社内資料／部署：営業部
この条件に一致する資料はありません。部署の指定を外して探すこともできます。
［部署の指定を外す］
これは表示案です。「部署の指定を外す」は、キーワードを残して部署だけを解除する操作を想定しています。検索欄では「経費精算」をそのまま編集できるようにします。
「条件をリセット」という文言だけでは、何が消えるのか分かりにくい場面があります。操作名は実際に変わる条件に合わせます。また、解除後の件数を確かめていなければ「資料が見つかります」とは約束しません。
同じ検索を繰り返す以外の道を用意する
DWP Design Systemの住所検索の作例では、見つからなかった検索条件を示し、再検索と手入力の両方へ進めるようにしています。Find an address：No results
社内資料検索にそのまま手入力を持ち込む必要はありません。参考になるのは、検索が成功しなくても元の目的を進められる道を検討することです。
たとえば経費の申請方法を探しているなら、規程の一覧や担当窓口へ進む案があります。ただし、無関係な人気記事や広告を大量に並べても、この目的は満たせません。この作例では、部署の解除を主な操作にし、規程一覧へのリンクを補助として置きます。
代わりの経路がないサービスなら、無理にボタンを増やす必要はありません。何が確認できていて、何を変更できるかを短く伝えます。
読み込み中と失敗時を、0件の画面で代用しない
検索を送信してから応答を受け取るまでは、まだ結果は不明です。次の状態の違いを仕様として決めておくと、表示文と処理の食い違いを確認できます。
- 送信前：検索条件を入力する。
- 応答待ち：「検索中」と示す。
- 正常に完了：結果の件数を示す。0件なら条件変更を案内する。
- 取得に失敗：失敗したことと、再試行できるかを示す。
この作例では、失敗しても入力した条件を保持します。以前の検索結果を残す設計にするなら、「現在入力している条件の結果」だと誤認されない表示も必要です。
検索語を入力するたびに通信する画面では、「経費」の応答より先に「経費精算」の応答が返ることも想定します。古い検索の0件表示が新しい結果を上書きしないことを、開発者と確認します。ここは空の画面の見た目だけでは判断できない部分です。
画面レビューで試す5つの操作
以下は、この作例から作った確認項目です。実際の検索条件や権限に合わせて調整してください。
- 存在しないキーワードで検索し、0件であることと検索対象が分かるか。
- 絞り込みを一つ解除し、残すはずのキーワードが消えないか。
- 通信失敗を再現し、0件表示にならず、条件を保って再試行できるか。
- 検索語を続けて変更し、古い応答が現在の結果を上書きしないか。
- キーボードやスクリーンリーダーで、結果の確認から条件の変更まで進めるか。
この確認だけで検索品質やアクセシビリティ全体を評価できるわけではありません。まずは「結果が空だったとき、利用者が目的に向かって次の操作を選べるか」を、実際の画面で確かめるための入口です。
入力値自体を直す必要がある場合はフォームのエラー表示、状態や完了条件を仕様に落とす場合は要件定義の始め方も参考にしてください。