barre de filtre vs filtre à gauche
Je travaille sur un site Web où j'ai une liste de produits. Ces produits ont la possibilité d'être filtrés, sur ce processus il y a quelques options, comme filtrer en tapant, cocher la case, un filtre comme d'habitude. Il s'agit également d'un site Web réactif, ce qui signifie que ce filtre sera disponible sur mobile, tablette, ordinateur portable, etc.
Lors du développement d'un site Web, je sais que nous devrions essayer de donner la meilleure expérience fluide sur différents appareils et c'est là que j'ai ce doute.
Si j'utilise une barre de filtre, c'est presque tout au "même endroit" lors du passage du mobile à l'ordinateur, car tous les filtres seront en haut, voir l'image ci-dessous.
Remarque: Il s'agit simplement de démontrer le concept, mais je pense que vous pouvez avoir l'idée.
C'est une option possible, car certains ont des avantages, par exemple:
- Nous pouvons utiliser toute la largeur de l'écran;
- Le filtre est visible lors du défilement;
- Il a un meilleur placement compte tenu des autres appareils (du moins à mon avis)
Mais aussi des inconvénients:
- Il a besoin d'une interaction de l'utilisateur pour voir les options;
- Si nous avons plus d'options pour le filtrer, cela peut devenir désordonné ou nous devons nous transformer en un autre type de filtre et d'écrans résionnables, tels que des ordinateurs portables;
- Même si la position pour accéder au filtre est la même (en haut), sur mobile nous aurons une liste de filtres très verticale au lieu d'horizontale (sur des écrans plus grands);
Donc, fondamentalement, mon doute concerne l'utilisation de la barre de filtre supérieure ou de la colonne de gauche traditionnelle avec tout le filtre.
Quand devrais-je utiliser l'un ou l'autre? Ou pourquoi l'un est meilleur que l'autre? Considérant
Je suggérerais d'utiliser une barre supérieure si et seulement si vous avez un maximum de quatre filtres et que vous savez avec certitude que le nombre ne changera pas avec le temps et la complexité du projet.
La raison pour laquelle je le suggère est que les filtres de la barre supérieure ne peuvent être présentés de manière nette que jusqu'à quatre. Si vous avez plus de quatre filtres, la barre supérieure commence rapidement à s'encombrer compte tenu d'une résolution d'écran de 1366x768.
Un panneau de filtre vertical est suggérable tous les jours sur une barre supérieure à condition qu'il ne consomme pas trop de votre bien immobilier et ne domine pas votre zone de contenu principale. La raison en est la suivante:
- Les filtres sont toujours développés et s'étendent sur la longueur de la page. Par conséquent, l'utilisateur n'est pas tenu d'effectuer une action supplémentaire pour appliquer le filtre.
- Étant donné que les filtres sont positionnés verticalement, il serait plus facile pour l'utilisateur de les parcourir car il/elle aurait seulement besoin de marcher dans une direction plutôt que de marcher de haut en bas d'un filtre et de revenir en haut du filtre suivant .
- De plus, comme les filtres sont placés verticalement, il n'y a techniquement aucune limite au nombre de filtres pouvant être mis en œuvre. Vous pourriez avoir 5 ou 50 filtres allant l'un en dessous de l'autre et cela n'aura aucun impact sur la conception.
Dans le cas où vous avez beaucoup de données à afficher, par exemple un tableau, etc., vous pouvez utiliser un bouton ou une icône de filtres dans la barre supérieure, qui, au clic, étend les filtres verticalement dans un modal au-dessus de votre contenu. De cette façon, vous pouvez toujours utiliser la zone d'affichage complète pour présenter le contenu et pourtant les filtres n'entraveront pas votre expérience de visualisation de contenu.
Une liste de filtres permet à l'utilisateur:
- savoir sur quelles options de filtrage la recherche actuelle est basée
- choisissez différentes options dans chaque filtre pour effectuer une nouvelle recherche
Entre vos deux propositions, les points que je considérerais sont:
- À quelle fréquence l'utilisateur interagit-il/vous souhaitez qu'il interagisse avec les filtres?
- Les filtres sont-ils suffisamment importants pour que l'utilisateur les regarde avec le même poids que les résultats réels?
La liste de filtres supérieure est plus discrète, affiche les options réellement sélectionnées mais pas les autres options de chaque filtre. Celui de gauche donne plus d'informations car il permet aux filtres d'être toujours développés.
Si le but de l'application est de trouver un élément très spécifique, une liste de filtres étendue qui montre toutes les options possibles pourrait mieux fonctionner (liste de gauche). Si les recherches ne sont pas censées être aussi spécifiques, une liste de filtres discrets pourrait suffire (liste du haut).
Jetez un oeil à cette autre question où le doute était de savoir si les filtres devaient rester réduits ou développés.
En fonction de vos deux options, voici les avantages et inconvénients de chacun:
Option d'icône de filtre
Avantages: évolutif, mieux afficher la hiérarchie des informations, réactif, facile à développer
Inconvénients: Il n'y a pas de moyen facile de laisser l'utilisateur lorsque les filtres sont appliqués et dans le cas contraire, vous pouvez résoudre ce problème avec une petite étiquette, comme "Filtres appliqués: xxx, xxx, xxx, xxx" ou quelque chose.
Option de barre de filtre
Avantages: accès rapide, un modèle très courant pour les utilisateurs, facile à relier par les lois de la gestalt avec d'autres éléments
Inconvénients: non évolutif, non réactif, les "valeurs" longues seront coupées, difficiles à utiliser (plus de clics pour effectuer plusieurs sélections ou combinaisons) et ainsi de suite.
Mes deux cents Choisissez l'option Filter Icon et affichez-la comme ADVANCED à côté du champ de recherche ... J'ai fait quelque chose de similaire ici pour DESKTOP (l'icône à droite de "Buscar") et cela a fonctionné comme un charme dans les tests utilisateurs:
Lorsque l'utilisateur a cliqué sur l'icône, la zone de résultats est poussée vers le bas et toutes les options dont vous avez besoin seront affichées.
Ce modèle sera similaire sur MOBILE aux utilisateurs, car la même icône affichera le jeu d'options de filtres et un bouton APPLIQUER pour les ramener à la vue des résultats.
J'espère que cela vous aidera :) Meilleurs voeux.
À mon avis, il est bon d'avoir une barre supérieure sur le bureau et dans le tiroir de navigation de l'utilisateur de la vue mobile, comme dans les directives de conception des matériaux. Veuillez voir ce lien comme référence Conception matérielle