絞り込み UI のパターン

モバイル向けの絞り込み UI を実装する必要があり、身近なアプリやウェブサイトの UI を観察してみました。観察したアプリやウェブサイトはユニクロ、メルカリ、GitHub Mobile、Spotify の 4 つです。

ユニクロ ウェブサイト (画面上部ハーフモーダル、全画面モーダル)

ユニクロのウェブサイトの投稿スタイリング一覧画面は、主として画面上部のハーフモーダルで絞り込み条件を指定するタイプでした。

❶	❷	❸

性別、身長などの絞り込み項目が画面上部に表示されています (❶)。絞り込み項目を押すと画面上部にハーフモーダルが表示され、選択肢が提示されます (❷)。選択肢を押すと一覧が直ちに絞り込まれます。絞り込みを行うと、適用されている絞り込み条件の数が左端に表示されます (❸)。ここを押すと、絞り込みをコントロールする全画面モーダルが表示されます。

❹	❺

全画面モーダルでは、適用されている絞り込み条件が一番上にまとめて表示されます (❹)。ここから絞り込みの解除も行うことができます。また、画面上部ハーフモーダルと同様に絞り込み条件を指定することもできます (❺)。

メルカリ (画面上部ハーフモーダル、ドロップダウン、全画面モーダル)

メルカリ (Android 版) でもユニクロと同様に主として画面上部ハーフモーダルが使われていました。

❶	❷	❸

カテゴリー、ブランドなどの絞り込み項目が画面上部に並んでいます (❶)。項目を押すと画面上部にハーフモーダルが現れ、選択肢が提示されます (❷)。選択肢は複数選択可能です。選択肢を押すとチェックマークがつき、選択状態となります (❸)。右下の決定するを押すと一覧が実際に絞り込まれます。

❹	❺

絞り込みを行うと、適用されている絞り込み条件がフリーワード検索の入力欄に表示されます (❹)。また、絞り込みのためのボタンにも、選択されている条件の数がカテゴリー (1) のように表示されます。絞り込みを解除するには入力欄に表示されている絞り込み条件の×ボタンを押します。または、絞り込む時と同じようにボタンからハーフモーダルを開き、選択を解除することもできます。商品ステータスに関してはドロップダウンで販売中の商品のみ、売り切れの商品のみに絞り込めます (❺)。

ユニクロと異なり、メルカリでは絞り込み条件がフリーワード検索の検索欄に表示されていました。複数選択式の絞り込み UI では、アクティブな選択肢をボタンのラベルに書き並べることはスペースの都合上難しいです。このような場合、メルカリのように検索欄に表示する方針に合理性がありそうです。

ハーフモーダルに関しては、ユニクロでは選択肢を選ぶと直ちに一覧が絞り込まれたのに対し、メルカリでは確定ボタンを押すまで何も起こらないという微妙な違いがありました。後者のような挙動は、モーダル内外の状態に一時的な不一致をつくりだします。このような不一致は一般に排除すべきとされますが、メルカリが敢えてこの挙動を採用していることは興味深いです。

GitHub Mobile (画面下部ハーフモーダル、ドロップダウン)

GitHub Mobile (Android 版) では、前出のユニクロやメルカリと異なり、画面上部ではなく画面下部のハーフモーダルが使われていました。また、ドロップダウンも併用されていました。

❶	❷	❸

Pull Request 一覧画面 (❶)。作成者フィルターの選択肢は画面下部ハーフモーダルで表示されます (❷)。ハーフモーダルの中でユーザーを選ぶと、背景に見えている Pull Request の一覧が同時が絞り込まれます。ハーフモーダル右上には検索ボタンがあり、ユーザー名でユーザーを検索することもできます。一方、ステータスによる絞り込みの UI はドロップダウンです (❸)。

GitHub Mobile では、前の 2 つのアプリやウェブサイトと異なり画面下部モーダルが使われていることに目が行きます。画面下部モーダルで提示されるのはラベルや作成者などのオブジェクトですが、いずれもユーザーによって作成されるオブジェクトです。GitHub Mobile の画面下部モーダルはスクロールでき、ユーザーによって作成される (潜在的に) 無数の選択肢を提示するのに適した作りとなっています。さらに、選択肢をテキストで検索する導線も用意されており、選択肢の数が多くなることを考慮していることが窺えます。

Spotify のマイライブラリ (トグルボタン)

Spotify は、トグルボタンによる絞り込みとパンくずリストが融合した独特な UI となっていました。

❶	❷	❸

初期状態ではプレイリスト、ポッドキャスト、アルバム、アーティストなど異なる種類のオブジェクトが一画面に表示されています (❶)。上部にオブジェクトの種類ごとのトグルボタンがあり、押すとその種類のオブジェクトのみに絞り込まれます。例えば、プレイリストを押すと一覧がプレイリストに絞り込まれます (❷)。オブジェクトの種類で絞り込むと、同時に追加の絞り込み条件が提示されます。例えば、プレイリストが選択されている条件ではマイリスト、ダウンロード済みの 2 つの追加の絞り込み条件が提示されます。追加の絞り込み条件を選ぶと、トグルボタンがパンくずリストのような見た目になります (❸)。

初期状態で提示されているプレイリスト、ポッドキャストなどの絞り込み条件はオブジェクトの種類を表していて、それらは互いに排他的です。この点で、直行する絞り込み項目が表示されていたユニクロ、メルカリ、GitHub Mobile と異質です。

絞り込み条件が互いに排他的であることの帰結として、ある条件が適用されている状態で他の条件は意味をなしません。そのため、例えばプレイリストを選ぶとプレイリスト以外の選択肢は非表示となります。代わりに、追加の絞り込み条件が表示されます。ユーザーは、この操作を繰り返すことでドリルダウン式に絞り込み条件を追加していくことができます。

まとめ

以上の観察結果から、絞り込み UI を設計するときには以下のような観点を持てば良いのではないかと思いました。

• 選択肢の提示方法
  • 選択肢の数に応じて使い分ける (例: 多数の場合は画面下部ないし上部のモーダル、二値の場合はトグルボタン)。選択肢の数が限定された UI ほど操作が簡単であるため。
• アクティブな絞り込み条件の提示方法
  • 絞り込み条件が単数選択式の場合、フィルタリングへの動線となるボタンのラベルにアクティブな絞り込み条件を表示する。
  • 複数選択式の場合、絞り込み条件がボタンのラベルに収まるとは限らないので、検索欄など別の場所にまとめて表示する。

また、Spotify パンくずリスト的なフィルタリングの UI はナビゲーションの階層が深くなりすぎないようにする方法として優れていると感じました。自分で UI をデザインする際にも機会があれば取り入れてみたいです。

参考

以下の記事では絞り込み UI のパターンのそのトレードオフについてまとめられており、とても参考になります。
https://note.com/shingo2000/n/n3102db8e97bb