Modèles de conception frustrants : filtres cassés

Les filtres sont partout . Bien que nous pensions souvent qu'ils apparaissent lors de la réservation de vols ou d'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 la quantité de données qui est difficile à comprendre ; 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 aussi courant dans les grilles de données, les tableaux de bord d'entreprise, le suivi des vaccins et les registres des archives publiques.

Concevoir pour la gamme confortable

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 chemisiers plutôt que toute la collection.

Nous avons des attributs d'intérêt spécifiques, une intention spécifique, que 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 (lorsqu'aucun filtre n'est sélectionné) à l'état final (lorsque 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 facile, mais afficher juste assez de résultats pertinents est un peu plus difficile. En fait, pour chaque interface et pour chaque intention, nous avons à l'esprit une gamme confortable particulière, c'est-à-dire un nombre préféré d'options que nous pensons pouvoir gérer relativement sans effort.

Cette gamme d'options ne doit pas tenir sur un seul écran, ou être affichée sur une seule page, ou être limitée à une petite liste restreinte dont nous pouvons facilement nous souvenir. Il peut s'agir de dizaines à des centaines d'éléments dispersés sur un certain nombre de pages.

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

• nous examinons des options très pertinentes,
• 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 réorganise simplement les résultats en fonction de certains attributs préférés ( limites souples ), les filtres représentent toujours des limites rigides. 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 plage 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 personnes n'ayant aucun problème à explorer 20 à 30 types de véhicules, 40 à 50 types de baskets, 70 à 80 bouquets de fleurs ou même à paginer 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érentes , plus nous nous sentons à l'aise avec un ensemble d'options légèrement plus grand.

La question ultime est donc de savoir comment trouver cet équilibre délicat, 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 gamme 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, listes déroulantes de sélection, curseurs et boutons pour n'en nommer que quelques-uns - mais dans leur essence, tous les éléments de formulaire sont simplement basiques entrée, non?

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

• les filtres peuvent se présenter sous différentes formes et saveurs , pour les prix, les notes, les couleurs, les dates, les heures, la taille, la marque, la capacité, les fonctionnalités, le niveau d'expérience, la tranche d'âge, les symptômes, l'état du produit, etc.
• les filtres sont généralement nombreux et doivent être affichés sur tous les écrans,
• les filtres ont souvent des états différents (sélectionnés, non sélectionnés, désactivés)
• les filtres ont souvent besoin de valeurs par défaut sensibles , et ils doivent 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 exemple 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 tant 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 rend souvent les filtres et les résultats correspondants quelque peu synchrones , car ces derniers dépendent de la rapidité avec laquelle l'interface utilisateur enregistre une entrée et du temps dont elle a besoin pour la traiter avec succès.

Maintenant, aborder toutes les subtilités de chacun de ces défis n'est 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 un taux d'abandon élevé et des taux de rebond élevés. Explorons quelques-uns des plus critiques.

Évitez les petits volets déroulants

Après seulement quelques sessions d'utilisation avec des clients qui essaient d'utiliser des filtres sur leur propre appareil, on peut repérer des frustrations courantes qui reviennent encore et encore. L'un des modèles les plus ennuyeux provient des longues sections de filtre contenant 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 obligent souvent les clients à faire défiler verticalement, lentement, avec précision, avec une concentration et une précision extrêmes. Comme ils le font 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 ordre alphabétique.

Une autre option serait d'afficher jusqu'à 7 à 10 options à la fois avec un accordéon qui se développerait et afficherait toutes les options par simple pression/clic. Ces options n'ont pas besoin d'être affichées dans toute leur hauteur, mais peuvent être affichées dans un volet déroulant plus grand . Mais alors, ils ne devraient pas être activés en faisant défiler le volet.

C'est également une bonne 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.ua, un détaillant de commerce électronique ukrainien (voir ci-dessus).

Toujours fournir un remplacement de saisie de texte 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, de la durée maximale d'un voyage en train ou d'une couverture min/max pour un plan 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 habituellement subir lorsque nous augmentons un peu le prix, de 200 $ à 215 $, ou que nous ajoutons une heure supplémentaire pour la durée d'un vol. Le faire avec un curseur est difficile car cela demande une précision incroyable, et cela produit toujours des erreurs et provoque de la frustration.

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

• lorsque les clients veulent explorer rapidement de nombreuses options, un bon vieux curseur avec une piste et un pouce fonctionne parfaitement ;
• lorsque les clients veulent être plus précis dans leur exploration, nous pouvons les 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 les aider en fournissant des champs de saisie de texte 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 au clavier uniquement.

Jetez un œ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 focus 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 provient de 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.

Ne faites jamais défiler automatiquement les utilisateurs sur une seule entrée

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

Dans cet exemple de Dell.com, lorsque 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 se rafraîchit, faisant passer le client tout en haut de la barre latérale de filtrage. Cela signifie que plus vous souhaitez utiliser de filtres - et naviguez généralement de haut en bas - plus vous devrez continuer à faire défiler l'écran pour trouver le bon filtre.

Une raison pour laquelle cette implémentation est si courante n'est pas parce que nous voulons faire défiler automatiquement les clients vers le haut de la zone des filtres , mais plutôt parce que nous voulons les conduire vers le haut des résultats des produits avec des 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 ne souhaitez spécifier que 6 à 10 fonctionnalités de cette manière, vous devrez vous lancer dans une lutte de défilement assez tenace 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, malheureusement, l'interface utilisateur ne répondra pas comme prévu. L'expérience globale est assez frustrante et désorientante, également parce que le site Web semble lent et qu'il faut toujours de plus en plus d'efforts pour continuer à filtrer. Pas le meilleur exemple de 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 qu'une seule entrée peut être effectuée à la fois. Par exemple, nous pourrions geler toute l'interface et ainsi désactiver toute entrée jusqu'à ce que les nouvelles données reviennent du serveur. Ensuite, nous devrons attendre que de nouveaux résultats soient injectés dans le DOM, et ce n'est qu'alors que l'interface utilisateur reviendra. Bien qu'elle soit légèrement plus claire que la solution précédente, elle s'avère avoir des problèmes en soi.

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

Chaque fois que nous figeons l'interface utilisateur sur une seule entrée, nous ralentissons activement nos clients dans l'expression de leur intention. Nous rendons en fait un peu plus compliqué pour eux de spécifier ce qui les intéresse, en donnant la priorité à l'affichage des résultats par rapport à l'entrée. Cela semble cependant être une mauvaise priorisation. Jetons un coup d'œil à l'exemple ci-dessous.

Chez Sears.com, chaque fois qu'une sélection est effectuée, non seulement l'interface utilisateur est entièrement bloquée ; 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 "en savoir 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 l'attribut particulier qu'il souhaite sélectionner. Walmart (voir exemple ci-dessous) suit le même schéma.

Dans ces cas, nous devons nous appuyer sur JavaScript pour basculer de manière fiable entre les états gelés et fonctionnels, 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 terminé sa saisie, mais il est raisonnable de s'assurer que pendant toute l'interaction avec les filtres, le client n'aura jamais à attendre qu'une interface réponde . Maintenant, si nous regardons d'un peu plus près les trois exemples ci-dessus, nous remarquerons une similitude. Tous appliquent automatiquement chaque filtre lors de la sélection, désactivant toute autre sélection jusqu'à ce que la nouvelle page de résultats revienne.

Cependant, il est très courant que les clients ajoutent rapidement plusieurs filtres , parfois dans la même catégorie. Le comportement de l'interface utilisateur ne prend pas bien en charge cette intention.

Alors, avons-nous des alternatives ? Une alternative évidente consiste à confier à l'utilisateur la décision de savoir quand les résultats doivent être mis à jour. Cela pourrait signifier ajouter un bouton "Appliquer" et encourager les clients à sélectionner tous les filtres avant de voir les résultats. Mais ce n'est pas nécessairement 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 délai. Il suffit de passer de l'affichage synchrone des résultats à son pendant 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 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 des 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 reviennent du serveur.

Nous pourrions le rendre un peu plus évident en montrant que de nouveaux produits sont chargés à mesure que de nouveaux filtres sont appliqués. Un bon exemple de cela est Coolblue, avec 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 des produits. Nous avons remarqué que pour de nombreux clients, c'est un comportement attendu, à moins que vous ne gardiez un bouton flottant "Appliquer" près de la zone des filtres.

Éviter les décalages de mise en page lors de l'entrée du filtre

Tant que l'interface ne bloque pas l'entrée, les clients s'attendent bien sûr à 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 changements de mise en page accidentels , ils 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 oeil à 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 éléments de produit arrivent, un petit changement se produit dans la zone de filtrage. Il y a généralement trois raisons pour lesquelles cela se produit :

• à chaque entrée de filtre, les sections de filtre qui ont été agrandies par le client se replient automatiquement,
• les filtres qui étaient disponibles auparavant deviennent indisponibles, et ils deviennent masqués, réduisant la hauteur de la zone de filtrage,
• l'aperçu des filtres appliqués est situé au-dessus de la zone des filtres, de sorte qu'à mesure qu'il grandit avec chaque nouveau filtre, il 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 de l'actualisation 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 aux pages précédentes (par exemple avec le bouton "Retour").

Pour le deuxième problème, si les filtres 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 peut aider) et ce qui doit être fait pour les réactiver . Nous pouvons alors également ajouter une option pour "Masquer toutes les options indisponibles".

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

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 maintiendrait 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 & Barrel, dans 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. Notez 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 flottants , de sorte qu'à mesure qu'un 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 de filtres est persistante ; même lorsque les utilisateurs font défiler la page, la superposition de filtres ne se ferme pas automatiquement - elle nécessite l'entrée de l'utilisateur, cédant à nouveau le contrôle à l'utilisateur. Cependant, il se ferme automatiquement une fois l'un des filtres 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 : pas de changements de mise en page, pas de défilement frustrant dans les couloirs étroits, et les filtres sont toujours accessibles.

Pour ne pas dire que l'affichage des filtres au dessus des résultats est toujours mieux par défaut. Sur Asos, chaque entrée de filtre provoque des sauts vers le haut de la page, de sorte que les clients doivent faire défiler manuellement vers le bas pour continuer le filtrage. Au lieu de re-rendre la page entière, il serait plus logique de re-rendre la zone des filtres et la liste des produits séparément.

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 à afficher, 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 on peut encore faire un peu plus, par exemple avec un bon vieux bouton « appliquer ».

Afficher le nombre de résultats sur le bouton "Appliquer"

Il semble presque un peu archaïque d'avoir un bouton "Appliquer" pour les filtres à une époque où nous nous habituons à des interactions transparentes et fluides, des fondus enchaînés et des animations chronométrées. Cependant, si l'on veut conduire les clients vers une fourchette 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 superposition de méga-filtres sur la droite avec toutes les options de filtrage disponibles regroupées ici. Au fur et à mesure que le client parcourt les filtres, la liste de produits est mise à jour en arrière-plan de manière asynchrone. Plus important encore, notez le bouton "Appliquer" dont l'étiquette change en fonction de l'entrée.

Avec chaque entrée de filtre, une nouvelle demande est envoyée au serveur, récupérant le nombre de résultats, puis affichant ce nombre 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é avec 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 des produits ; une superposition de filtre apparaît au toucher/clic. 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, avoir un bouton "Appliquer" avec 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 aux petits écrans. Cependant, sur les petits écrans, et surtout 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, ce qui entraîne des retards massifs pour les clients en déplacement (par exemple, Crutchfield, Walgreens). 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 d'une page entière pour les filtres fonctionnerait mieux. Cela donne plus d'espace pour expérimenter 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 séparées. En fait, utiliser des accordéons qui pourraient s'effondrer et se développer au lieu d'amener l'utilisateur sur une page séparée pourrait être une bonne idée - similaire à ce dont nous avons discuté avec les méga-listes déroulantes.

Contrairement au bureau, avoir un bouton "Appliquer" dans tous ces exemples est important, et vous pouvez le rendre légèrement plus utile en ajoutant la quantité de produits sous forme d'étiquette sur le bouton et en gardant le bouton collant en bas pendant que l'utilisateur fait défiler vers le bas. .

Liste de contrôle de conception de filtrage

Comme d'habitude, voici toutes les choses à garder à l'esprit lors de la conception de tout type de filtre - une petite aide pour éviter de manquer des détails importants avant d'entamer des conversations avec vos collègues concepteurs et développeurs. Vous pouvez également trouver un jeu complet de listes de contrôle des modèles de conception d'interface intelligente dans votre magazine Smashing.

1. Pouvons-nous éviter une icône de filtre et afficher les filtres tels qu'ils sont ?
2. Sinon, quelle icône choisissons-nous pour indiquer le filtrage ?
3. L'icône + le rembourrage sont-ils suffisamment grands pour un tapotement confortable ?
4. Mettons-nous l'icône en haut, en bas ou flottante (mobile/desktop) ?
5. Que se passe-t-il exactement lorsque l'utilisateur clique/appuie sur l'icône ?
6. Comment l'icône changera-t-elle lorsque vous appuyez/cliquez ?
7. Aurons-nous une sorte d'animation ou de transition au clic ?
8. Les filtres apparaîtront-ils sous forme de page entière/superposition partielle ou de diapositive ?
9. Pouvons-nous éviter le filtrage de la barre latérale car il est généralement lent ?
10. Exposons-nous par défaut les filtres populaires ou pertinents ?
11. Affiche-t-on le nombre de résultats attendus pour chaque filtre ?
12. Pouvons-nous utiliser un swiper horizontal pour passer d'un filtre à l'autre ?
13. Pouvons-nous éviter les menus déroulants et n'utiliser que des boutons/puces + bascules ?
14. Pour les filtres complexes, proposons-nous une recherche dans les filtres ?
15. Utilisons-nous des icônes pour expliquer les différences entre les différents filtres ?
16. Utilisons-nous les bons éléments pour les filtres, par exemple les curseurs, les boutons, les bascules ?
17. Les filtres s'appliquent-ils automatiquement (oui, pour les diapositives) ?
18. Les filtres s'appliquent-ils manuellement lors de la confirmation ("Appliquer") (oui, pour les superpositions) ?
19. Comment communiquons-nous les filtres déjà sélectionnés ?
20. Les filtres sélectionnés peuvent-ils apparaître sous forme de pastilles, puces ou étiquettes amovibles ?
21. Recommandons-nous des filtres pertinents en fonction de la sélection ?
22. Suivons-nous l'incompatibilité entre les filtres sélectionnés ?
23. Comment les messages d'erreur ou les avertissements apparaissent-ils dans l'interface utilisateur ?
24. Permettons-nous aux clients de réinitialiser tous les filtres rapidement, en une seule fois ?
25. Les filtres (ou le bouton des filtres) flottent-ils sur le défilement sur mobile/bureau ?
26. Les utilisateurs peuvent-ils appuyer au même endroit pour ouvrir/fermer les filtres ?

Emballer

Trop souvent, l'expérience de filtrage sur le Web est interrompue et frustrante, ce qui rend inutilement difficile pour les clients d'accéder à cette gamme confortable et brillante de résultats pertinents. Lors de la conception du prochain filtre, jetez un œil à certains des problèmes courants que vous voudrez peut-être éviter et, espérons-le, évitez toute la frustration qui vient des implémentations cassées et inaccessibles.

• Conçu pour la gamme confortable d'options, pour le cas où un client souhaite ajouter plusieurs filtres rapidement, l'un après l'autre.
• Pour les groupes de filtres longs, évitez les minuscules volets défilants et affichez jusqu'à 7 à 10 options à la fois avec un accordéon qui se développerait et afficherait toutes les options par simple pression/clic. Ajoutez également une recherche semi-automatique et une vue alphabétique.
• Ajoutez toujours des steppers (+/-) et des champs de saisie de texte lorsque vous utilisez des curseurs,
• Les clients souhaitent souvent définir plusieurs filtres du même type. Ne faites jamais défiler automatiquement les utilisateurs sur une seule entrée et ne réduisez jamais automatiquement un groupe de filtres.
• Ne figez jamais l'interface utilisateur sur une seule entrée et ne faites jamais attendre votre client qu'une interface réponde lors de la définition des filtres.
• Mettez toujours à jour les filtres et affichez les résultats de manière asynchrone , de sorte que sur chaque entrée de filtre, les résultats correspondants puissent être mis à jour de manière asynchrone, tandis que les filtres restent toujours accessibles et au même endroit.
• Évitez toujours les changements de mise en page sur l'entrée du filtre et envisagez d'afficher les filtres au-dessus des résultats.
• Sur mobile, le bouton "Appliquer" peut être collant en bas de l'écran. Mettez à jour le nombre de produits et affichez-les sur le bouton.

Articles de la série

Si vous trouvez cet article utile, voici un aperçu d'articles similaires que nous avons publiés au fil des ans - et quelques autres sont à venir.

• Accordéon parfait
• Configurateur réactif parfait
• Sélecteur d'anniversaire parfait
• Sélecteur de date et d'heure parfait
• Méga-liste déroulante parfaite
• Comparaison parfaite des fonctionnalités
• Curseur parfait
• Form Design Patterns Book par Adam Silver, publié sur SmashingMag
• Abonnez-vous à notre newsletter par e-mail pour ne pas manquer les prochaines.