検索の絞り込みは、条件を増やせるだけでは不十分です。今の結果に何が適用されているかと、どこまで解除されるかを見える形にします。
検索画面を設計する人に向け、架空の研修一覧を例に整理します。以下の件数や表示文は設計を説明するための作例で、改善効果を測定した事例ではありません。
選んだ条件と、適用した条件を分ける
研修を「開催形式」「対象者」「開催月」で探す画面を考えます。チェックを入れるたびに更新するか、最後に「この条件で絞り込む」を押すかで、必要な状態管理が変わります。
Carbonは、選択ごとに更新する方法と、一括で適用する方法を区別しています。複数の分類を考えて選ぶ場合や、データ取得が遅い場合には一括適用を検討しています。Filtering
この作例では、一括適用を選びます。入力途中の条件で結果を更新せず、結果の上には適用済みの条件を表示します。
| 場所 | 表示例 | 何を表すか |
|---|---|---|
| 条件の入力欄 | 開催月：11月にチェック | 次に適用したい条件 |
| 結果の見出し | オンライン／10月：8件 | 現在の結果を取得した条件 |
| 適用ボタンの近く | 条件に未適用の変更があります | 入力欄と結果が一致していないこと |
未適用の変更がある状態で条件パネルを閉じる場合は、入力途中の値を保つか破棄するかを決めます。この例では保持し、閉じたパネルにも「未適用の変更あり」と示します。再び開いたときだけ気付く仕様にはしません。
複数選択の意味を文章にする
「オンライン」と「会場」を両方選んだら、どちらかに当てはまる研修を出すのか、両形式に対応する研修だけを出すのか。チェックボックスの見た目だけでは決まりません。
この例では、同じ分類内は「いずれか」、分類をまたぐ場合は「すべて」を満たす設定にします。「開催形式はオンラインまたは会場、かつ対象者は初級」のように仕様へ書きます。何も選ばない分類は制限なしとします。
件数を選択肢の横へ出すなら、その数が「今の全条件を反映した件数」か「その分類だけで数えた件数」かも必要です。正しく計算できない段階では、曖昧な数値を足すより表示を見送る判断ができます。
解除する単位を決める
Carbonは、分類内の解除と、複数分類をまとめた解除を用意する考え方を示しています。条件を閉じて隠す場合にも、適用中だと分かる表示が必要です。Filtering：Filter states／Resetting filters
この作例では、検索語と絞り込みを別に扱います。
- 「開催月の指定を外す」は、開催月だけを解除する。
- 「絞り込みをすべて解除」は、開催形式・対象者・開催月を解除する。
- どちらの操作でも、検索語と並び順は残す。
解除後に適用ボタンを押す必要があるのかも統一します。この例では、結果の上にある解除ボタンは直ちに再検索し、入力欄のチェック変更は適用待ちにします。位置によって役割が違うため、解除ボタンの近くに「解除すると結果を更新します」と示します。説明が煩雑になるなら、解除も適用待ちへ揃える案を比較します。
未適用の変更がある途中で解除する場合も決めます。この例では、解除した分類は入力欄も未選択に戻し、他の分類の入力途中の値は保持します。再検索に使うのは、適用済みの条件から解除対象を外した条件だけです。他の未適用の変更まで一緒に反映しません。「すべて解除」では全分類の入力途中の値も消えるため、操作名を「入力中の条件もすべて解除」とします。
更新しても操作の続きを失わせない
条件変更後は1ページ目へ戻す案にします。以前の5ページ目を維持すると、結果が2ページ分しかない場合の扱いが必要になるためです。通信失敗時は、入力した条件を消さず、表示中の結果が前回分であると伝えます。
件数の更新を読み上げへ伝える場合は、結果一覧そのものへ毎回フォーカスを移す以外の方法もあります。W3Cは、フォーカスを受け取らずに伝える状態メッセージの例として検索結果件数を扱っています。実装では更新頻度も含めて確認します。Status Messages
レビューで試すこと
まず2分類を選び、適用前後で結果の見出しが正しいか確認します。次に1分類だけ解除し、検索語と他の分類が残るかを見ます。ブラウザで戻ったとき、入力欄・結果・件数が同じ条件を示すかも確認対象です。最後にキーボードで選択と解除を行い、画面を見なくても適用状態を確認できるか試します。
0件になった後の案内は検索結果が0件のUI、順序の変更は一覧の並び替えで具体化できます。