Filtres cassés —

Les filtres sont partout. Alors que nous pensons souvent qu'ils apparaissent lors de la réservation de vols ou des achats en ligne, les filtres sont fréquemment utilisés dans à peu près toutes les interfaces qui comportent plus d'une poignée de points de données.

Ce n'est pas nécessairement seulement la quantité de données qui est difficile à faire. sentiment de bien; c'est la complexité et le manque de cohérence que les données impliquent généralement qui nécessitent un certain filtrage – un scénario courant dans les grilles de données, les tableaux de bord d'entreprise, le suivi des vaccins et les registres publics.

Concevoir pour la gamme confortable[19659005]En tant que clients, nous utilisons des filtres pour réduire un large éventail d'options à une sélection plus gérable et très pertinente. Peut-être juste quelques dizaines de bulletins de versement au lieu de milliers, ou juste une poignée de blouses plutôt que toute la collection.

Nous avons des attributs spécifiques d'intérêt, une intention spécifiqueque nous devons communiquer d'une manière ou d'une autre. à l'interface. Pour ce faire, nous décomposons notre intention en un ensemble de fonctionnalités disponibles. Cette intention peut être assez spécifique ou assez générale, mais dans les deux cas, la conception doit minimiser le temps nécessaire aux clients pour passer de l'état par défaut (quand aucun filtre n'est sélectionné) à l'état final (quand tous les filtres sont appliqués avec succès).

Ce n'est cependant qu'une partie de l'histoire. Appliquer des filtres pertinents est la partie la plus simple, mais montrer juste assez de résultats pertinents est légèrement plus difficile. En fait, pour chaque interface et pour chaque intention, nous avons en tête une plage confortable particulière, c'est-à-dire un nombre préféré d'options que nous pensons pouvoir gérer relativement sans effort.

Cette plage d'options n'a pas besoin de tenir sur un seul écran, d'être affiché sur une seule page ou de se limiter à une petite liste dont nous pouvons facilement nous souvenir. Il peut s'agir de des dizaines à des centaines d'articles éparpillés sur plusieurs pages.

L'important est que cette gamme réponde à nos attentes :

• nous examinons des options très pertinentes,[19659013]nous pouvons facilement comprendre ce que nous explorons,
• nous pouvons repérer les différences entre toutes les options, et
• nous pouvons tout traiter dans un délai raisonnable et prévisible.

Contrairement au tri, qui ne fait que réarranger les résultats en fonction de certains attributs préférés (limites souples), les filtres représentent toujours des limites strictes. Ils limitent strictement la portée des résultats. Pas assez de filtres appropriés et les utilisateurs tirent bien au-delà de la plage confortable ; trop de filtres et d'utilisateurs se retrouvent avec des résultats nuls et abandonnent complètement le site.

La gamme de confort varie considérablement d'un produit à l'autre. L'indice de l'endroit où il se trouve peut être déduit de la différence réelle entre les options. Dans les tests d'utilisabilité, nous voyons des gens n'avoir aucun problème à explorer 20 à 30 types de véhicules, 40 à 50 types de baskets, 70 à 80 bouquets de fleurs, ou même à feuilleter 100 à 200 bulletins de versement. Pourtant, ils se sentent complètement dépassés lorsqu'ils explorent 15 types différents de sharpies ou de piles AAA. En règle générale, il semble que plus les options sont différentesplus nous nous sentons à l'aise avec un ensemble d'options légèrement plus large.

La question ultime est donc de savoir comment trouver cette délicate équilibre, lorsque notre interface aide les utilisateurs à obtenir rapidement juste assez de résultats. Une réponse à cette question réside dans quelque chose qui semble terriblement évident : éliminer tous les obstacles sur le chemin des utilisateurs vers cette plage confortable. C'est plus facile à écrire qu'à faire, surtout lorsque vous avez des dizaines, voire des centaines de filtres qui doivent être accessibles sur mobile, sur ordinateur et partout entre les deux.

La complexité du filtrage

À première vue, le filtrage ne semble pas être une entreprise particulièrement complexe. Bien sûr, nous pouvons avoir de longs débats sur les bons éléments de formulaire pour différents types de filtres – saisie semi-automatique, radios, bascules, sélections déroulantes, curseurs et boutons pour n'en nommer que quelques-uns – mais dans leur essence, tous les éléments de formulaire sont juste basiques d'entrée, n'est-ce pas ?

Eh bien, il s'avère qu'il y a plusieurs facettes de l'expérience qui rendent la conception de filtres assez difficile :

• les filtres peuvent venir en différentes saveurs et les formes, pour les prix, les notes, les couleurs, les dates, les heures, la taille, la marque, la capacité, les caractéristiques, le niveau d'expérience, la tranche d'âge, les symptômes, l'état du produit, etc.
• les filtres sont généralement en grand nombre et ils doivent être affichés sur tous les écrans,
• les filtres ont souvent différents états (sélectionné, non sélectionné, désactivé)
• les filtres ont souvent besoin de des valeurs par défaut sensibleset ils ont pour se souvenir de l'entrée de l'utilisateur,
• les filtres peuvent être interdépendants et ces dépendances doivent être évidentes,
• les filtres peuvent être difficiles à valider par ex. lorsque les utilisateurs peuvent saisir des données complexes, telles que l'heure ou les dates,
• les filtres doivent prendre en charge et afficher des messages d'erreur significatifs,
• et bien d'autres.

Les filtres n'existent jamais seuls. ; d'une manière ou d'une autre, ils sont toujours liés aux résultats sur lesquels ils agissent. Cette connexion fait souvent que les filtres et les résultats de correspondance sont quelque peu synchronescar ces derniers dépendent de la vitesse à laquelle l'interface utilisateur enregistre une entrée et du temps dont elle a besoin pour la traiter avec succès.

les subtilités de chacun de ces défis ne sont rien de moins qu'un travail monumental, mais certains problèmes sont légèrement plus frustrants que d'autres, rendant l'expérience globale douloureuse et ennuyeuse, et donc provoquant des taux d'abandon et de rebond élevés. Explorons quelques-uns des plus critiques.

Après quelques sessions d'utilisation avec des clients qui essaient d'utiliser des filtres sur leur propre appareil, on peut repérer certaines frustrations courantes faire des rondes encore et encore. L'un des modèles les plus ennuyeux provient des longues sections de filtre qui contiennent des dizaines d'options. Ces options sont souvent cachées dans un petit volet déroulant, affichant 3 à 4 options à la fois et nécessitant un défilement vertical pour parcourir les options.

Ces sections amènent souvent les clients à faire défiler verticalement, lentement, avec précision, avec une concentration et une précision extrêmes. . Comme sur mobile, certains filtres sont activés par erreur, incitant le client à être encore plus concentré. Un exemple classique de ce modèle est le filtre « Marques », qui contient souvent des centaines d'options, triées par popularité ou par alphabet.

Une option alternative serait d'afficher jusqu'à 7 à 10 options à la fois avec un accordéon qui se développerait et afficherait toutes les options en tapant/cliquant. Ces options n'ont pas besoin d'être affichées sur toute leur hauteur, mais peuvent vivre dans un volet déroulant plus grandmais elles ne doivent pas être activées en faisant défiler le volet.

C'est aussi un bon idée de compléter le filtre avec une recherche semi-automatique et une vue alphabétique si certaines des options populaires sont mises en évidence en haut. Un bon exemple en est Rozetka.uaun détaillant de commerce électronique d'Ukraine (voir ci-dessus).

Toujours fournir une entrée de texte de secours pour les curseurs

Chaque fois que les utilisateurs peuvent définir une large plage de valeurs, qu'il s'agisse d'une fourchette de prix dans un magasin de détail, d'une durée maximale d'un voyage en train ou d'une couverture min/max pour un régime d'assurance, nous utiliserons probablement une sorte de curseur. Tous les curseurs ont une chose en commun : ils sont merveilleux lorsque nous voulons encourager les clients à explorer rapidement de nombreuses options, mais ils sont assez frustrants lorsque l'utilisateur a quelque chose de spécifique en tête et doit donc être un peu plus précis.

Pensez simplement à la frustration que nous devons généralement subir lorsque nous augmentons un peu le prix, de 200 $ à 215 $, ou en ajoutant une heure supplémentaire à la durée de votre vol. Le faire avec un curseur est difficile car cela nécessite une précision incroyable, et cela provoque toujours des erreurs et des frustrations.

Nous avons déjà couvert comment concevoir un curseur parfait en détail, mais probablement la caractéristique la plus importante dont chaque curseur a besoin est de prendre en charge différentes vitesses d'interaction. En fait, il existe quelques types courants d'interaction :

• lorsque les clients souhaitent explorer de nombreuses options rapidement, un bon vieux curseur avec une piste et un pouce fonctionne parfaitement ;
• lorsque les clients doivent être plus précis dans leur exploration, nous pouvons vous aider en ajoutant des steppers (+/-) pour des sauts granulaires en avant et en arrière,
• lorsque les clients ont une valeur exacte à l'esprit, nous pouvons vous aider en fournissant texte champs de saisie pour les valeurs min/max, afin que les utilisateurs puissent saisir des valeurs directement sans avoir à utiliser le curseur,
• dans tous ces cas, les solutions doivent être accessibles et prendre en charge l'interaction avec le clavier uniquement.

Take un coup d'œil à l'exemple de la Lloydsbank ci-dessous. Un calculateur de prêt personnel prend parfaitement en charge tous les types d'interaction. Notez également les styles de mise au point lorsque le pouce est activé et les plages affichées sous le curseur de taux d'intérêt en haut pour indiquer où le client navigue actuellement. Le taux d'intérêt change en fonction du montant que le client souhaite emprunter.

Un autre exemple intéressant de curseur bien conçu vient du Sofasizer de Made.com, qui vous permet de filtrer les canapés en fonction des dimensions qu'ils doivent avoir. Plutôt que d'utiliser un ensemble de champs de saisie, Made.com a choisi d'utiliser une interface visuelle avec une icône « Redimensionner ». Vous pouvez faire glisser la poignée pour ajuster la taille, ou vous pouvez saisir des valeurs exactes dans les champs de saisie de hauteur et de largeur.

Vous y êtes déjà allé. Peut-être que dans la précipitation de l'excitation, vous vous dirigez vers le magasin de détail, cliquez sur tous les liens de la bonne catégorie, balayez vers la gauche et la droite dans la sous-navigation et regardez de près ce nouvel ordinateur portable brillant auquel vous êtes enfin prêt à vous engager. Ce qui vous attend ensuite n'est peut-être pas tout à fait l'expérience à laquelle vous espériez vous faire plaisir. Jetez un œil à l'exemple ci-dessous. Pouvez-vous repérer ce qui semble se passer ?

Dans cet exemple tiré de Dell.comlorsque vous choisissez les fonctionnalités de votre ordinateur portable, une seule entrée est enregistrée à la fois. S'il vous arrive de sélectionner plusieurs options rapidement, seule la dernière entrée sera appliquée. Et lorsqu'une entrée est enregistrée, la page s'actualise, faisant passer le client tout en haut de la barre latérale de filtrage. Cela signifie que plus vous souhaitez utiliser de filtres – et généralement les parcourir de haut en bas – plus vous devrez continuer à faire défiler vers le bas pour trouver le bon filtre.

L'une des raisons pour lesquelles cette implémentation est si courante n'est pas parce que nous voulons conduire les clients vers le haut de la zone filtresmais plutôt parce que nous voulons les conduire vers le haut de la zone de résultats avec les filtres appliqués. Être coincé quelque part au milieu de la liste ne sera pas particulièrement utile une fois que vous aurez appliqué de nouveaux filtres. Et en effet, il est préférable d'afficher le haut des résultats à chaque mise à jour de filtre, mais cela ne signifie pas que nous devons également faire défiler automatiquement les filtres.

En fait, même si vous souhaitez spécifier simplement 6-10 fonctionnalités de cette façon, vous devrez vous lancer dans une lutte de défilement assez obstinée contre le défilement automatique avec un seul filtre enregistré à la fois. Il est possible d'appuyer ou de cliquer sur plusieurs filtres à la fois, mais dans ce cas, l'interface utilisateur ne répondra malheureusement pas comme prévu. L'expérience globale est assez frustrante et désorientante, également parce que le site Web est lent et qu'il faut toujours de plus en plus d'efforts pour continuer à filtrer. Ce n'est pas le meilleur exemple pour minimiser le temps entre l'état par défaut et l'état final.

Une façon de résoudre ces problèmes serait de supprimer complètement le défilement automatique des filtres et de trouver un meilleur moyen d'indiquer que une seule entrée peut être effectuée à la fois. Par exemple, en gelant l'interface et en désactivant ainsi toute entrée jusqu'à ce que les nouvelles données reviennent du serveur, les nouveaux résultats sont injectés dans le DOM et l'interface utilisateur est revenue. Bien qu'elle soit légèrement plus claire que la solution précédente, elle s'avère avoir elle-même des problèmes.

Ne jamais geler l'interface utilisateur sur une seule entrée

Chaque fois que nous gelons l'interface utilisateur sur une seule entrée, nous ralentissons activement notre clients à exprimer leur intention. En fait, nous leur compliquons un peu la tâche de spécifier ce qui les intéresse, en privilégiant l'affichage des résultats par rapport à leur entrée. Cela semble être une mauvaise priorité cependant. Examinons l'exemple ci-dessous.

Sur Sears.comchaque fois qu'une sélection est effectuée, non seulement l'interface utilisateur est complètement bloquée, mais les utilisateurs sont également poussés vers le haut de la page. C'est particulièrement frustrant pour les filtres qui incluent des accordéons (lien « voir plus » dans « Marque », par exemple). Avec chaque nouveau filtre, l'utilisateur doit faire défiler vers le bas et ouvrir l'accordéon pour trouver cet attribut particulier qu'il souhaite sélectionner. Walmart (voir l'exemple ci-dessous) suit le même modèle.

Dans ces cas, nous avons besoin s'appuyer sur JavaScript pour basculer de manière fiable entre les états gelé et fonctionnel, même si les données ne sont pas revenues du serveur, ou si elles reviennent lentement, ou si elles sont mal formées. C'est une hypothèse assez fragile sur laquelle s'appuyer.

Maintenant, bien sûr, nous ne savons pas quand l'utilisateur a fini avec sa saisie, mais il est raisonnable de s'assurer que pendant la toute interaction avec les filtres, le client n'a jamais à attendre qu'une interface réponde . Si nous regardons de plus près les trois exemples ci-dessus, ils appliquent tous automatiquement chaque filtre lors de la sélection, désactivant toute sélection supplémentaire jusqu'à ce que la nouvelle page de produit revienne.

Cependant, il est remarquablement courant que les clients souhaitent ajouter plusieurs filtres rapidementparfois dans la même catégorie. Avons-nous des alternatives? Une alternative évidente est de confier à l'utilisateur la décision quant au moment où les résultats doivent être mis à jour. Cela pourrait signifier l'ajout d'un bouton « Appliquer » et encourager les clients à sélectionner d'abord tous les filtres avant de voir les résultats. Mais ce n'est pas forcément la seule option. En fait, il s'avère que nous pouvons faire les deux : voir des résultats à jour tout en interagissant avec le filtre sans aucun délai. Nous avons juste besoin de passer de l'affichage synchrone des résultats à son équivalent asynchrone.

Toujours afficher les résultats de manière asynchrone

Nous avons déjà mentionné que les filtres et les résultats correspondants sont souvent quelque peu synchrones. Cependant, nous pourrions diviser les parties de l'interface utilisateur et les rendre les deux séparément, de manière asynchrone. Dans ce cas, sur chaque entrée de filtre, les résultats correspondants pourraient être mis à jour de manière asynchrone, tandis que les filtres restent toujours accessibles et au même endroit. À chaque nouvelle entrée de filtre, l'utilisateur verrait un flash de nouveau contenu en streaming.

L'exemple BestBuy ci-dessus montre ce modèle en action. Lorsque nous sélectionnons des filtres dans la barre latérale gauche, ils sont appliqués en arrière-plan tandis que nous pouvons continuer à sélectionner de plus en plus de filtres si nous choisissons de le faire. La liste de produits est mise à jour de manière asynchrone : il n'y a jamais d'état désactivé car un nouveau contenu est ajouté à la liste des résultats correspondants à chaque fois que les données sont renvoyées du serveur.

Nous pourrions le rendre un peu plus évident en montrant que de nouveaux produits sont chargés au fur et à mesure que de nouveaux filtres sont appliqués. Un bon exemple est Coolblueavec une interface utilisateur de filtrage de barre latérale asynchrone apparaissant sur le côté gauche.

Il convient de souligner à ce stade que chaque entrée dans la zone des filtres doit être enregistrée, puis appliquée à la liste de produits. Nous avons remarqué que pour de nombreux clients, c'est un comportement attendu, à moins que vous ne gardiez un bouton "Appliquer" flottant à proximité de la zone des filtres.

Évitez les changements de mise en page sur l'entrée du filtre

Tant que l'interface ne bloque pas entrée, bien sûr, les clients s'attendent à pouvoir définir un certain nombre de filtres les uns après les autres. Cependant, selon l'emplacement des filtres, ils peuvent parfois rencontrer des décalages de mise en page accidentelsils doivent donc s'orienter à nouveau sur la page, faire défiler vers le haut et vers le bas pour trouver où ils se sont arrêtés, puis continuer avec l'entrée suivante. Jetez un œil à l'exemple ci-dessous. Quel semble être le problème sur VictoriaPlum (affiché ci-dessous) ?

Chaque fois que les utilisateurs interagissent avec un filtre, une fois que les nouveaux articles du produit arrivent, il se produit un petit changement dans la zone de filtrage. Il y a généralement trois raisons pour lesquelles cela se produit :

• sur chaque entrée de filtre, les sections de filtre qui ont été développées par le client s'effondrent automatiquement,
• les filtres qui étaient disponibles auparavant deviennent indisponibles et ils sont masqués, ce qui réduit la hauteur du zone de filtrage,
• la vue d'ensemble des filtres appliqués est située au-dessus de la zone des filtres, de sorte qu'à mesure que sa taille augmente avec chaque nouveau filtre, elle pousse également les filtres vers le bas.

Pour éviter le premier problème, nous devons maintenir l'état des accordéons et les garder ouverts, même si l'utilisateur a défini un nouveau filtre ou actualisé la page. Nous devons également conserver les paramètres de filtrage lors du rafraîchissement, ou de la navigation. En fait, nous voyons des clients s'attendre à ce que les filtres soient toujours appliqués même s'ils reviennent aux catégories ou pages précédentes (par exemple avec le bouton « Retour »).

Pour le deuxième problème, si les filtres ne sont pas ne sont plus disponibles, plutôt que de les masquer automatiquement, nous pouvons les désactiver, mais aussi expliquer pourquoi ils sont désactivés (un indice amical pourrait aider) et ce qui doit être fait pour les réactiver. Nous pouvons alors également ajouter une option pour « Masquer toutes les options non disponibles ».

Enfin, nous pourrions vouloir reconsidérer la position des filtres appliqués au-dessus de la zone des filtres. Cependant, il n'y a vraiment pas beaucoup d'options où ils pourraient vivre, et une meilleure option semble être la zone au-dessus du filtrage des résultats.

Afficher les filtres au-dessus des résultats

Pour éviter complètement les changements de mise en page, nous pouvons afficher les filtres appliqués au-dessus des résultats du produit. Cela garderait la zone de filtrage stable et prévisible pendant toute l'interaction de l'utilisateur. En fait, il n'a pas besoin d'être visible à tout moment. Crate & Barreldans l'exemple ci-dessous, permet aux clients de masquer et d'afficher les filtres à la demande, tandis que les filtres appliqués sont ajoutés à la zone dédiée au-dessus des produits. Veuillez noter qu'une option pour effacer tous les filtres est également disponible. (La page du produit a cependant changé depuis l'enregistrement de la vidéo.)

Une autre option consiste à transformer toutes les sections de filtre en superpositions et à les afficher en appuyant/cliquant au-dessus des résultats. En fait, vous pouvez même utiliser des filtres flottantsde sorte que lorsque le client fait défiler la page, les filtres sont toujours accessibles.

Un exemple de ce modèle est Adidas (voir l'image ci-dessous). La barre des filtres est persistante ; même lorsque les utilisateurs font défiler la page, la superposition de filtre ne se ferme pas automatiquement – elle nécessite l'entrée de l'utilisateur, remettant à nouveau le contrôle à l'utilisateur. Cependant, il se ferme automatiquement une fois que l'un des filtres est sélectionné. Si l'utilisateur souhaite sélectionner plusieurs filtres, il doit rouvrir le même groupe de filtres encore et encore. Garder les filtres persistants pourrait être une meilleure idée. Pourtant, le résultat : aucun décalage de mise en page, aucun défilement frustrant dans les couloirs étroits, et des filtres toujours accessibles.

Cela ne veut pas dire que l'affichage des filtres au-dessus des résultats est toujours meilleur par défaut. Sur Asoschaque entrée de filtre provoque des sauts vers le haut de la page, les clients doivent donc faire défiler manuellement vers le bas pour continuer le filtrage. Au lieu de recréer la page entière, il serait plus logique de recréer uniquement la zone des filtres et la liste des produits.

En général cependant, les deux premières options (Crate & Barrel et Adidas) semblent très bien fonctionner, et elles laissent plus d'espace pour les produits à être affiché, tout en évitant tous les problèmes dont nous avons parlé plus tôt. C'est un modèle assez fiable à utiliser lorsque nous voulons éviter les barrages routiers ou la confusion. Mais nous pouvons encore faire un peu plus, par exemple avec un bon vieux bouton « Appliquer ».

Afficher le nombre de résultats sur le bouton « Appliquer »

Cela semble presque un peu archaïque d'avoir un « Appliquer ». ” pour les filtres à une époque où nous nous habituons à des interactions fluides et fluides, des fondus d'entrée et des animations chronométrées. Cependant, si nous voulons amener les clients vers une gamme confortable, il n'y a guère de meilleur moyen de le faire que d'afficher le nombre de résultats le plus tôt possible.

Ikea propose des filtres en haut des résultats. Parfois, les filtres apparaissent dans une superposition déroulante et parfois sous forme de pilule sous les filtres. Mais la plupart du temps, contrairement aux exemples précédents, lorsqu'un filtre est sélectionné, il affiche une mega-filter-overlay sur la droite avec toutes les options de filtrage disponibles qui y sont regroupées. Au fur et à mesure que le client parcourt les filtres, la liste des produits est mise à jour en arrière-plan de manière asynchrone. Plus important encore, notez le bouton « Appliquer » dont le libellé change en fonction de l'entrée.

À chaque entrée de filtre, une nouvelle demande est envoyée au serveur, récupérant le nombre de résultats, puis les affichant dans l'interface utilisateur. C'est un excellent moyen de donner aux utilisateurs une idée très claire de la distance ou de la proximité de leur plage de confort.

Un autre exemple est Galaxus.ch (voir ci-dessous), un détaillant suisse de commerce électronique qui offre une expérience de premier ordre en matière de filtrage. Les filtres sont affichés au-dessus des résultats du produit ; une superposition de filtre apparaît sur tap/click. Pas de ralentissements, des temps de réponse rapides et une belle intégration des filtres actifs avec la zone des filtres. Un excellent exemple de référence qui mérite d'être pris en compte lors de la conception de tout type de filtre.

En général, le fait d'avoir un bouton « Appliquer » ainsi que des mises à jour en temps réel de la zone de contenu semble fonctionner le mieux. Il combine vraiment le meilleur des deux solutions : afficher les résultats immédiatement lorsqu'ils arrivent, tout en gardant les filtres accessibles à tout moment.

Évitez les écrans partagés sur mobile

Les problèmes que nous avons explorés dans l'article s'appliquent également aux grands et pour les petits écrans. Cependant, sur les petits écrans, et en particulier sur les connexions lentes, ces problèmes deviennent encore plus critiques. La plupart du temps, les interfaces ont tendance à bloquer l'ensemble de l'interface utilisateur sur une seule entrée de filtre, provoquant des retards massifs pour les clients en déplacement (par exemple CrutchfieldWalgreens) . D'autre part, il est courant de diviser l'écran pour afficher une superposition de filtres, tout en affichant la liste des produits mise à jour en arrière-plan (par exemple Nordstrom).

En général, cependant, il serait peut-être préférable d'expérimenter si une superposition de pleine page pour les filtres fonctionnerait mieux. Il donne plus d'espace pour expérimenter avec une vue multi-colonnes, ou peut-être même afficher une zone balayable pour choisir des filtres sans avoir à se déplacer entre des pages distinctes. En fait, utiliser des accordéons qui pourraient se réduire et se développer au lieu d'amener l'utilisateur sur une page séparée pourrait être une bonne idée – similaire à ce que nous avons discuté avec mega-dropdowns.

Unlike on desktop, having an “Apply” button in all these examples matters, and you can make it slightly more useful by adding the amount of products as a label on the button and keeping the button sticky at the bottom as the user is scrolling down.

Filtering Design Checklist

As usual, here are all the things to keep in mind when designing any kind of filter — a little helper to not forget something important before heading into conversations with your fellows designers and developers. You can find a full deck of Smart Interface Design Patterns Checklists at yours truly Smashing Magazine as well.

1. Can we avoid a filter icon and show filters as they are?
2. If not, what icon do we choose to indicate filtering?
3. Is the icon + padding large enough for comfortable tapping?
4. Do we put the icon at the top, bottom or floating (mobile/desktop)?
5. What exactly happens when the user clicks/taps on the icon?
6. How will the icon change on tap/click?
7. Will we have some sort of animation or transition on click?
8. Will filters appear as full page/partial overlay or slide-in?
9. Can we avoid sidebar filtering as it’s usually slow?
10. Do we expose popular or relevant filters by default?
11. Do we display the number of expected results for each filter?
12. Can we use a horizontal swiper to move between filters?
13. Can we avoid drop-downs and use only buttons/chips + toggles?
14. For complex filters, do we provide search within filters?
15. Do we use icons to explain differences between various filters?
16. Do we use the right elements for filters, e.g. sliders, buttons, toggles?
17. Do filters apply automatically (yes, for slide-ins)?
18. Do filters apply manually on confirmation (“Apply”) (yes, for overlays)?
19. How do we communicate already selected filters?
20. Can selected filters appear as removable pills, chips or tags?
21. Do we recommend relevant filters based on selection?
22. Do we track incompatibility between selected filters?
23. How do error messages or warning appear in the UI?
24. Do we allow customers to reset all filters quickly, at once?
25. Are filters (or filters button) floating on scroll on mobile/desktop?
26. Can users tap on the same spot to open/close filters?

Wrapping Up

Too often the filtering experience on the web is broken and frustrating, making it just unnecessarily difficult for customers to get to that shiny comfortable range of relevant results. When designing the next filter, take a look at some of the common issues that you might want to avoid, and hopefully avoid all the frustration that comes from broken, frozen and inaccessible filters.

• Design for the comfortable range of options and for the case when a customer wants to add multiple filters quickly — one right after another.
• For lengthy filter groups, avoid tiny scrollable panes and show as many as 7–10 options at a time with an accordion that would expand and show all options on tap/click. Add a search autocomplete and an alphabetical view as well.
• Always add steppers (+/-) and text input fields when using sliders,
• Customer often want to set a number of filters of the same type. Never auto-scroll users on a single input and never collapse a group of filters automatically.
• Never freeze the UI on a single inputand never make your customer wait for an interface to respond back when setting filters.
• Always update filters and show results asynchronouslyso that on every filter input, matching results could be updated asynchronously, while the filters always remain accessible and at the same place.
• Always avoid layout shifts on filter input and consider displaying filters above the results.
• On mobile, “Apply”-button could be sticky at the bottom of the screen. Update the count of products and show them on the button.

Related Articles

If you find this article useful, here’s an overview of similar articles we’ve published over the years — and a few more are coming your way.

(il)