苛立たしいデザインパターン：壊れたフィルター
公開: 2022-03-10フィルタはどこにでもあります。 フライトの予約やオンラインショッピングの際に表示されることがよくありますが、フィルターは、少数のデータポイントを超える機能を備えたほとんどすべてのインターフェースで頻繁に使用されます。
ただし、理解するのが難しいのは、必ずしも膨大な量のデータだけではありません。 データグリッド、エンタープライズダッシュボード、ワクチン追跡、公共記録レジストリなどの一般的なシナリオでは、データに通常伴う複雑さと一貫性の欠如により、ある程度のフィルタリングが必要になります。
一部：デザインパターン
- パート1：完璧なアコーディオン
- パート2：完璧なレスポンシブコンフィギュレーター
- パート3：完璧な日付と時刻のピッカー
- パート4：完璧な機能の比較
- パート5：完璧なスライダー
- パート6：完璧なバースデーピッカー
- パート7：完璧なメガドロップダウンメニュー
- パート8：完璧なフィルター
- 次のニュースレターを見逃さないように、メールマガジンを購読してください。
快適な範囲のための設計
お客様として、私たちはフィルターを使用して、オプションの大規模なセットをより管理しやすく、関連性の高い選択肢に減らします。 おそらく、数千枚ではなく数十枚の支払い伝票、またはコレクション全体ではなくほんの一握りのブラウスです。
関心のある特定の属性、特定の意図があり、それを何らかの方法でインターフェースと通信する必要があります。 これを行うには、意図を一連の利用可能な機能に分解します。 その意図はかなり具体的または非常に一般的かもしれませんが、どちらの場合も、設計は、顧客がデフォルト状態（フィルターが選択されていない場合）から最終状態（すべてのフィルターが正常に適用された場合）に移行するのに必要な時間を最小限に抑える必要があります。
しかし、それは話の一部にすぎません。 関連するフィルターを適用するのは簡単ですが、関連する結果を十分に表示するのは少し難しいです。 実際、すべてのインターフェース、およびすべての目的について、特に快適な範囲を念頭に置いています。これは、比較的簡単に管理できると思われるオプションの好ましい数です。
この範囲のオプションは、単一の画面に収まる必要はなく、単一のページに表示される必要もありません。また、簡単に覚えられる小さな候補リストに限定される必要もありません。 何十から何百ものアイテムが何ページにもわたって散らばっています。
重要な部分は、この範囲が次のような期待に応えることです。
- 関連性の高いオプションを検討しています。
- 何を探求しているのかを簡単に理解できます。
- すべてのオプションの違いを見つけることができ、
- 合理的で予測可能な時間枠内ですべてを処理できます。
いくつかの優先属性（ソフト境界）に従って結果を再配置するだけの並べ替えとは異なり、フィルターは常にハード境界を表します。 それらは結果の範囲を厳密に制限します。 適切なフィルターが不足しているため、ユーザーは快適な範囲を超えて撮影します。 フィルタとユーザーが多すぎると、結果がゼロになり、サイトを完全に放棄してしまいます。
快適な範囲は製品ごとに大きく異なります。 それがどこにあるかへの手がかりは、オプションが実際にどれほど異なっているかから推測することができます。 ユーザビリティテストでは、20〜30種類の車、40〜50種類のスニーカー、70〜80の花束、さらには100〜200の支払い伝票を調べても問題がないことがわかります。 それでも、15種類のシャーピーや単4電池を探索するとき、彼らは完全に圧倒されていると感じます。 経験則として、オプションが異なるほど、オプションのセットが少し多くなり、快適に感じるように見えます。
したがって、最終的な問題は、ユーザーが十分な結果にすばやく到達するのに役立つインターフェイスを使用して、その微妙なバランスをどのように見つけるかです。 その質問に対する1つの答えは、非常に明白に聞こえる何かにあります。それは、その快適な範囲へのユーザーの経路上の障害を取り除くことです。 ただし、作成するよりも作成する方が簡単です。特に、モバイル、デスクトップ、およびその間のあらゆる場所でアクセスできる必要があるフィルターが数十または数百ある場合はなおさらです。
フィルタリングの複雑さ
一見すると、フィルタリングは特に複雑な作業のようには見えません。 もちろん、オートコンプリート、ラジオ、トグル、選択ドロップダウン、スライダー、ボタンなど、さまざまな種類のフィルターに適したフォーム要素について長い議論をすることができますが、本質的には、すべてのフォーム要素は基本的なものです。入力ですよね？
実は、フィルターの設計を非常に困難にする経験には、かなりの数の側面があります。
- フィルタには、価格、評価、色、日付、時間、サイズ、ブランド、容量、機能、経験レベル、年齢範囲、症状、製品ステータスなど、さまざまなフレーバーと形状があります。
- フィルタは通常多数あり、画面全体に表示する必要があります。
- 多くの場合、フィルターにはさまざまな状態（選択済み、未選択、無効）があります
- フィルタには多くの場合、適切なデフォルトが必要であり、ユーザーの入力を覚えておく必要があります。
- フィルタは相互に依存する可能性があり、これらの依存関係は明白である必要があります。
- フィルタの検証が難しい場合があります。たとえば、ユーザーが時刻や日付などの複雑なデータを入力できる場合、
- フィルタは、意味のあるエラーメッセージをサポートして表示する必要があります。
- そして他にもたくさん。
フィルタが単独で存在することはありません。 何らかの形で、彼らは常に彼らが行動している結果に接続されています。 この接続により、フィルターとマッチング結果がある程度同期することがよくあります。後者は、UIが入力を登録する速度と、入力を正常に処理するために必要な時間に依存するためです。
さて、これらの課題のそれぞれの細かい複雑さに対処することは、記念碑的な仕事にほかなりませんが、いくつかの問題は他の問題よりも少しイライラし、全体的な経験を苦痛で迷惑にし、したがって高い放棄と高いバウンス率を引き起こします。 重要なもののいくつかを調べてみましょう。
小さなスクロール可能なペインは避けてください
自分のデバイスでフィルターを使おうとする顧客との数回のユーザビリティセッションの後、何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度もフラストレーションを感じることがあります。 最も厄介なパターンの1つは、数十のオプションを含む長いフィルターセクションから来ています。 これらのオプションは、多くの場合、小さなスクロール可能なペインに隠れており、一度に3〜4個のオプションが表示され、オプションを参照するには垂直方向のスクロールが必要です。
これらのセクションでは、多くの場合、顧客は非常に焦点を絞って正確に、垂直方向、ゆっくり、正確にスクロールします。 モバイルでそうするため、一部のフィルターが誤ってアクティブ化され、顧客はさらに集中するようになります。 このパターンの典型的な例は「ブランド」フィルターです。これには、人気またはアルファベットでソートされた何百ものオプションが含まれていることがよくあります。
別のオプションは、タップ/クリックですべてのオプションを展開して表示するアコーディオンを使用して、一度に最大7〜10個のオプションを表示することです。 これらのオプションは、完全な高さで表示する必要はありませんが、より大きなスクロール可能なペインに表示できます。 ただし、ペインをスクロールしてアクティブ化しないでください。
人気のあるオプションのいくつかが上部で強調表示されている場合は、検索オートコンプリートとアルファベット順のビューでフィルターを補完することもお勧めします。 その良い例は、ウクライナのeコマース小売業者であるRozetka.uaです（上記を参照）。
スライダーのテキスト入力フォールバックを常に提供する
小売店での価格設定範囲、電車の最大所要時間、保険プランの最小/最大補償範囲など、ユーザーが広範囲の値を定義できる場合は常に、何らかのスライダーを使用します。 すべてのスライダーには共通点が1つあります。それは、顧客に多くのオプションをすばやく探索するように促したい場合は素晴らしいですが、ユーザーが特定のことを念頭に置いているため、もう少し正確にする必要がある場合は非常にイライラします。
価格を200ドルから215ドルに少し上げるとき、または飛行中にさらに1時間追加するときに、私たちが通常経験しなければならない欲求不満について考えてみてください。 スライダーを使ってこれを行うのは、信じられないほどの精度が必要であり、常に間違いを引き起こし、フラストレーションを引き起こすため、困難です。
完璧なスライダーを設計する方法についてはすでに詳しく説明しましたが、おそらくすべてのスライダーに必要な最も重要な機能は、さまざまな速度の相互作用をサポートすることです。 実際、相互作用にはいくつかの一般的なタイプがあります。
- 顧客が多くのオプションをすばやく調べたい場合は、トラックと親指を備えた古き良きスライダーが完全に機能します。
- お客様がより正確に探索したい場合は、前後にきめ細かくジャンプするためのステッパー（+/-）を追加することで支援できます。
- お客様が正確な値を念頭に置いている場合は、最小/最大値のテキスト入力フィールドを提供することで支援できるため、ユーザーはスライダーを使用せずに値を直接入力できます。
- これらすべての場合において、ソリューションはアクセス可能であり、キーボードのみの対話をサポートする必要があります。
以下のロイズバンクの例を見てください。 個人ローン計算機は、あらゆるタイプの相互作用を美しくサポートします。 また、親指がアクティブになっているときのフォーカススタイルと、顧客が現在ナビゲートしている場所を示すために上部の金利スライダーの下に表示される範囲に注意してください。 金利は、お客様が借りたい金額によって異なります。
適切に設計されたスライダーのもう1つの興味深い例は、Made.comのソファサイザーです。これを使用すると、必要な寸法に基づいてソファをフィルタリングできます。 Made.comは、一連の入力フィールドを使用するのではなく、「サイズ変更」アイコンのあるビジュアルインターフェイスを使用することを選択しました。 ハンドルをドラッグしてサイズを調整するか、高さと幅の入力フィールドに正確な値を入力できます。
単一の入力でユーザーを自動スクロールしない
あなたは前にそこに行ったことがあります。 おそらく興奮のラッシュで、小売店に向かい、すべての適切なカテゴリリンクをクリックし、サブナビゲーションを左右にスワイプして、ついにコミットする準備ができた1つの光沢のある新しいラップトップに目を向けます。 次にあなたに期待しているのは、あなたが夢中になれると思っていた経験ではないかもしれません。 以下の例を見てください。 何が起こっているのかわかりますか？
Dell.comのこの例では、ラップトップの機能を選択すると、一度に1つの入力のみが登録されます。 複数のオプションをすばやく選択した場合は、最後の入力のみが適用されます。 そして、入力が登録されると、ページが更新され、顧客はフィルタリングサイドバーの一番上までジャンプします。 つまり、使用するフィルターが多いほど（通常は上から下に移動する）、適切なフィルターを見つけるために下にスクロールし続ける必要があります。
この実装が非常に一般的である理由は、フィルター領域の上部に顧客を自動スクロールするためではなく、フィルターを適用して製品結果の上部に顧客を誘導するためです。 新しいフィルターを適用すると、リストの途中でスタックすることは特に役に立ちません。 実際、フィルターを更新するたびに結果の上部を表示することをお勧めしますが、フィルターを自動スクロールする必要があるという意味ではありません。
実際、この方法で6〜10個の機能だけを指定したい場合でも、一度に1つのフィルターのみを登録して、自動スクロールに対する非常に頑固なスクロールの戦いに着手する必要があります。 一度に複数のフィルターをタップまたはクリックすることは可能ですが、この場合、残念ながらUIは期待どおりに応答しません。 全体的なエクスペリエンスは非常に苛立たしく、方向感覚を失います。これは、Webサイトが遅く感じられ、フィルタリングを続行するために常にますます多くの労力が必要になるためです。 デフォルト状態から最終状態までの時間を最小化する最良の例ではありません。
これらの問題に取り組む1つの方法は、フィルターの自動スクロールを完全に削除し、一度に1つの入力しか実行できないことを示すためのより良い方法を見つけることです。 たとえば、インターフェイス全体をフリーズして、新しいデータがサーバーから返されるまで入力を無効にすることができます。 次に、新しい結果がDOMに挿入されるのを待ってから、UIが戻ってくるのを待つ必要があります。 以前の解決策よりも少し明確ですが、それ自体に問題があることがわかりました。
単一の入力でUIをフリーズしないでください
単一の入力でUIをフリーズするたびに、お客様の意図を積極的に表現するのが遅くなります。 実際には、入力よりも結果の表示を優先して、関心のあるものを指定するのが少し面倒になります。 しかし、それは間違った優先順位のようです。 以下の例を見てみましょう。
Sears.comでは、選択が行われるたびに、UIが完全にブロックされるだけではありません。 ユーザーもページの上部にプッシュされます。 これは、アコーディオンを含むフィルターでは特にイライラします（たとえば、「ブランド」の「詳細」リンク）。 新しいフィルターを使用するたびに、ユーザーは下にスクロールしてアコーディオンを開き、選択する特定の属性を見つける必要があります。 Walmart（以下の例を参照）は同じパターンに従います。
このような場合、データがサーバーから戻ってこない場合、データがゆっくり戻ってくる場合、またはデータの形式が正しくない場合でも、JavaScriptを使用して、フリーズ状態と動作状態を確実に切り替える必要があります。 これは、信頼できる非常に脆弱な仮定です。
もちろん、ユーザーがいつ入力を終了したかはわかりませんが、フィルターとの対話全体を通じて、顧客がインターフェースからの応答を待つ必要がないことを確認するのが妥当です。 ここで、上記の3つの例をもう少し詳しく見てみると、1つの類似点に気付くでしょう。 それらはすべて、選択時にすべてのフィルターを自動適用し、新しい結果ページが戻るまでそれ以上の選択を無効にします。
ただし、顧客が複数のフィルターをすばやく追加することは非常に一般的であり、同じカテゴリーにある場合もあります。 UIの動作は、このインテントを適切にサポートしていません。
それで、私たちは何か選択肢がありますか？ 明らかな代替策は、結果をいつ更新する必要があるかについての決定をユーザーに渡すことです。 これは、 「適用」ボタンを追加し、結果を表示する前に最初にすべてのフィルターを選択するように顧客に促すことを意味する場合があります。 しかし、それが必ずしも唯一の選択肢ではありません。 実際には、両方を実行できます。つまり、フィルターを遅滞なく操作しながら、最新の結果を確認できます。 結果の同期表示から非同期の表示に移行する必要があります。
常に非同期で結果を表示する
フィルタと一致する結果は、多くの場合、ある程度同期していることはすでに説明しました。 ただし、 UIの一部を分割して、両方を別々に非同期でレンダリングすることはできます。 その場合、すべてのフィルター入力で、一致する結果が非同期に更新される可能性がありますが、フィルターは常にアクセス可能で同じ場所にあります。 新しいフィルターを入力するたびに、ユーザーは新しいコンテンツのストリーミングを一瞬で見ることができます。
上記のBestBuyの例は、そのパターンが実際に動作していることを示しています。 左側のサイドバーでフィルターを選択すると、それらはバックグラウンドで適用されますが、選択した場合はさらに多くのフィルターを選択し続けることができます。 製品リストは非同期で更新されます。サーバーからデータが返されるたびに、一致する結果のリストに新しいコンテンツが入力されるため、無効な状態になることはありません。
新しいフィルターが適用されているときに新しい製品が読み込まれていることを示すことで、もう少しわかりやすくすることができます。 その良い例がCoolblueで、左側に非同期サイドバーフィルタリングUIが表示されます。
この時点で、フィルター領域のすべての入力を登録してから、製品リストに適用する必要があることを強調する価値があります。 フローティングの「適用」ボタンをフィルター領域の近くに置いていない限り、多くのお客様にとって、これは予想される動作であることに気づきました。
フィルタ入力でのレイアウトシフトを回避する
インターフェースが入力をブロックしていない限り、もちろん顧客は、いくつかのフィルターを次々に設定できることを期待しています。 ただし、フィルターの配置場所によっては、誤ってレイアウトがずれることがあるため、ページ上で向きを変え、上下にスクロールして中断した場所を見つけてから、次の入力を続行する必要があります。 以下の例を見てください。 VictoriaPlum（下に表示）の問題は何だと思われますか？
ユーザーがフィルターを操作するたびに、新しい製品アイテムが入ってくると、フィルター領域で小さなシフトが発生します。 通常、それが発生する理由は3つあります。
- すべてのフィルター入力で、顧客によって拡張されたフィルターセクションは自動的に折りたたまれます。
- 以前に使用可能だったフィルターは使用できなくなり、非表示になり、フィルター領域の高さが低くなります。
- 適用されたフィルターの概要はフィルター領域の上にあるため、新しいフィルターごとにサイズが大きくなるにつれて、フィルターも押し下げられます。
最初の問題を回避するには、ユーザーが新しいフィルターを設定したり、ページを更新したりした場合でも、アコーディオンの状態を維持し、開いたままにしておく必要があります。 また、更新時またはナビゲーション時にフィルタリングの設定を保持する必要があります。 実際、以前のカテゴリまたはページに戻った場合でも（たとえば、[戻る]ボタンを使用して）、フィルターが引き続き適用されることを期待しているお客様がいます。
2番目の問題では、フィルターが自動的に非表示になるのではなく、フィルターが使用できなくなった場合、フィルターを無効にすることができますが、フィルターが無効になっている理由（わかりやすいヒントが役立つ場合があります）と、フィルターを再度有効にするために何をする必要があるかについても説明します。 。 次に、「使用できないオプションをすべて非表示にする」オプションを追加することもできます。
最後に、フィルター領域の上に適用されたフィルターの位置を再検討することをお勧めします。 しかし、実際に彼らが住むことができるオプションはそれほど多くありません、そしてより良いオプションはフィルタリング結果の上の領域であるように思われます。
結果の上にフィルターを表示する
レイアウトのずれを完全に回避するために、適用されたフィルターを製品結果の上に表示できます。 これにより、ユーザーの操作全体を通じて、フィルタリング領域が安定して予測可能になります。 実際、常に表示されている必要はありません。 以下の例のCrate＆Barrelを使用すると、顧客は必要に応じてフィルターを表示および非表示にできますが、適用されたフィルターは製品の上の専用領域に追加されます。 すべてのフィルターをクリアするオプションも利用できることに注意してください。 （ただし、ビデオが録画されてから製品ページが変更されました。）
もう1つのオプションは、すべてのフィルターセクションをオーバーレイに変換し、結果の上にタップ/クリックして表示することです。 実際、フローティングフィルタを使用することもできるため、顧客がページを下にスクロールしても、フィルタにはいつでもアクセスできます。
このパターンの例はアディダスです（下の画像を参照）。 フィルタバーは永続的です。 ユーザーがページを下にスクロールしているときでも、フィルターオーバーレイは自動的に閉じません。ユーザーの入力が必要であり、ユーザーにコントロールを渡します。 ただし、フィルターの1つを選択すると、自動的に閉じます。 ユーザーが複数のフィルターを選択したい場合は、同じフィルターグループを何度も再度開く必要があります。 フィルタを永続的に保つことはより良い考えかもしれません。 それでも、結果として、レイアウトの変更、狭い廊下でのイライラするスクロール、フィルターへのアクセスはいつでも可能です。
言うまでもなく、デフォルトでは、結果の上にフィルターを表示する方が常に優れています。 Asosでは、すべてのフィルター入力によりページの上部にジャンプするため、顧客は手動で下にスクロールしてフィルター処理を続行する必要があります。 ページ全体を再レンダリングするのではなく、フィルター領域と製品リストを別々に再レンダリングする方が理にかなっています。
ただし、一般的に、最初の2つのオプション（Crate＆BarrelとAdidas）は非常にうまく機能しているようで、前に説明したすべての問題を回避しながら、製品を表示するためのスペースを残します。 これは、障害や混乱を避けたいときに使用する非常に信頼性の高いパターンです。 ただし、たとえば、古き良き「適用」ボタンを使用すると、さらに多くのことができます。
「適用」ボタンに結果の数を表示する
シームレスでスムーズなインタラクション、フェードイン、タイミングアニメーションに慣れているときに、フィルター用の「適用」ボタンがあるのは少し古風な感じがします。 ただし、顧客を快適な範囲に誘導したい場合は、結果の数をできるだけ早く表示するよりも良い方法はありません。
Ikeaは結果の上部にフィルターを備えています。 フィルタがドロップダウンオーバーレイに表示されることもあれば、フィルタの下に錠剤として表示されることもあります。 ただし、ほとんどの場合、前の例とは異なり、フィルターを選択すると、右側にサイドバーのメガフィルターオーバーレイが表示され、使用可能なすべてのフィルターオプションがグループ化されます。 顧客がフィルターを通過している間、製品リストはバックグラウンドで非同期に更新されます。 さらに重要なのは、入力に応じてラベルが変わる「適用」ボタンに注目してください。
フィルタを入力するたびに、新しいリクエストがサーバーに送信され、結果の数が取得され、UIにその数が表示されます。 これは、ユーザーが快適な範囲にどれだけ近づいているか、またはどれだけ近いかをユーザーに明確に伝えるための優れた方法です。
もう1つの例は、フィルタリングに関して一流のエクスペリエンスを提供するスイスのeコマース小売業者であるGalaxus.ch（以下を参照）です。 フィルタは製品結果の上に表示されます。 タップ/クリックするとフィルターオーバーレイが表示されます。 速度低下がなく、応答時間が速く、アクティブフィルターとフィルター領域がうまく統合されています。 あらゆる種類のフィルターを設計する際に検討する価値のある優れた参考例。
一般に、コンテンツ領域のリアルタイム更新とともに「適用」ボタンを使用するのが最も効果的であるように思われます。 これは、両方のソリューションの長所を実際に組み合わせたものです。フィルターにいつでもアクセスできるようにしながら、結果が到着するとすぐに表示されます。
モバイルでの分割画面の回避
この記事で調べた問題は、大画面と小画面に等しく当てはまります。 ただし、小さな画面、特に低速の接続では、これらの問題はさらに重大になります。 ほとんどの場合、インターフェイスは単一のフィルター入力でUI全体をブロックする傾向があり、外出中の顧客（Crutchfield、Walgreensなど）に大幅な遅延を引き起こします。 一方、バックグラウンドで更新された製品リスト（ノードストロームなど）を表示しながら、画面を分割してフィルターオーバーレイを表示するのが一般的です。
ただし、一般的には、フィルターのフルページオーバーレイのパフォーマンスが向上するかどうかを実験することをお勧めします。 複数列のビューを試すためのスペースが増えます。また、スワイプ可能な領域を表示して、別々のページ間を移動せずにフィルターを選択することもできます。 実際、ユーザーを別のページに移動する代わりに、折りたたんだり展開したりできるアコーディオンを使用することは、メガドロップダウンで説明したのと同様に良い考えかもしれません。
デスクトップとは異なり、これらすべての例で「適用」ボタンを使用することが重要です。ボタンにラベルとして商品の量を追加し、ユーザーが下にスクロールしているときにボタンを下部に固定しておくと、少し便利になります。 。
フィルタリング設計チェックリスト
いつものように、あらゆる種類のフィルターを設計する際に留意すべきすべての事項があります。仲間の設計者や開発者との会話に進む前に、重要な詳細を見逃さないようにするためのちょっとした助けになります。 スマートインターフェイスデザインパターンチェックリストの完全なデッキは、本当にSmashingMagazineでも見つけることができます。
- フィルタアイコンを避けて、フィルタをそのまま表示できますか？
- そうでない場合、フィルタリングを示すためにどのアイコンを選択しますか？
- アイコンとパディングは、快適にタップできる大きさですか？
- アイコンを上、下、またはフローティング（モバイル/デスクトップ）に配置しますか？
- ユーザーがアイコンをクリック/タップすると、正確にはどうなりますか？
- タップ/クリックするとアイコンはどのように変化しますか？
- クリック時に何らかのアニメーションやトランジションがありますか？
- フィルタは全ページ/部分オーバーレイまたはスライドインとして表示されますか？
- 通常は遅いので、サイドバーフィルタリングを回避できますか？
- デフォルトで人気のあるまたは関連するフィルターを公開しますか？
- 各フィルターの期待される結果の数を表示しますか？
- 水平スワイパーを使用してフィルター間を移動できますか？
- ドロップダウンを回避し、ボタン/チップ+トグルのみを使用できますか？
- 複雑なフィルターの場合、フィルター内で検索を提供しますか？
- さまざまなフィルターの違いを説明するためにアイコンを使用していますか？
- スライダー、ボタン、トグルなど、フィルターに適切な要素を使用していますか？
- フィルタは自動的に適用されますか（はい、スライドインの場合）？
- フィルタは確認時に手動で適用しますか（「適用」）（はい、オーバーレイの場合）？
- すでに選択されているフィルターをどのように通信しますか？
- 選択したフィルターは、取り外し可能なピル、チップ、またはタグとして表示できますか？
- 選択に基づいて関連するフィルターをお勧めしますか？
- 選択したフィルター間の非互換性を追跡しますか？
- UIにエラーメッセージや警告はどのように表示されますか？
- お客様がすべてのフィルターを一度にすばやくリセットできるようにしますか？
- フィルター（またはフィルターボタン）はモバイル/デスクトップのスクロールに浮かんでいますか？
- ユーザーは同じ場所をタップしてフィルターを開閉できますか？
まとめ
Webでのフィルタリングエクスペリエンスが壊れてイライラすることが多すぎるため、顧客がその光沢のある快適な範囲の関連する結果に到達するのが不必要に困難になっています。 次のフィルターを設計するときは、回避したい一般的な問題のいくつかを確認し、うまくいけば、壊れたアクセスできない実装から生じるすべてのフラストレーションを回避してください。
- 顧客が複数のフィルターをすばやく次々に追加したい場合に備えて、快適な範囲のオプションを設計します。
- 長いフィルターグループの場合は、スクロール可能な小さなペインを避け、タップ/クリックですべてのオプションを展開して表示するアコーディオンを使用して、一度に7〜10個のオプションを表示します。 検索オートコンプリートとアルファベット順のビューも追加します。
- スライダーを使用するときは、常にステッパー（+/-）とテキスト入力フィールドを追加してください。
- お客様は、同じタイプのフィルターをいくつか設定したい場合がよくあります。 単一の入力でユーザーを自動スクロールしたり、フィルターのグループを自動的に折りたたんだりしないでください。
- 単一の入力でUIをフリーズしないでください。また、フィルターを設定するときにインターフェイスが応答するのを顧客に待たせないでください。
- 常にフィルターを更新し、結果を非同期で表示するため、すべてのフィルター入力で、一致する結果を非同期で更新できますが、フィルターは常にアクセス可能で同じ場所にあります。
- フィルタ入力のレイアウトシフトを常に避け、結果の上にフィルタを表示することを検討してください。
- モバイルでは、 「適用」ボタンが画面の下部に貼り付く可能性があります。 製品の数を更新し、ボタンに表示します。
シリーズの記事
この記事がお役に立てば、ここに私たちが何年にもわたって公開した同様の記事の概要があります—そしてさらにいくつかがあなたの道を進んでいます。
- 完璧なアコーディオン
- パーフェクトレスポンシブコンフィギュレーター
- パーフェクトバースデーピッカー
- 完璧な日付と時刻のピッカー
- 完璧なメガドロップダウン
- 完璧な機能比較
- 完璧なスライダー
- SmashingMagに掲載されたAdamSilverによるフォームデザインパターンブック
- 次のニュースレターを見逃さないように、メールマガジンを購読してください。