Commentaires visuels sur l'utilisation de filtres dans la recherche
Je travaille sur la conception de la version mobile d'un moteur de recherche. Il a quelques filtres, et je veux fournir un retour visuel à l'utilisateur quand il/elle sélectionne un filtre , donc il/elle connaît la recherche les résultats sont filtrés ou ont été modifiés depuis qu'il a sélectionné le filtre.
S'il vous plaît gardez à l'esprit, ceci est conçu pour les mobiles, donc j'ai un espace limité pour travailler avec.
Nous pouvons fournir une icône de chargeur en brouillant l'arrière-plan. Il indiquera à l'utilisateur que le filtrage des options est en cours. En plus de cela, où l'option de filtrage serait-elle affichée?
Une façon d'aborder cela serait de faire apparaître les filtres comme modaux. Cela résoudrait deux problèmes:
1) L'utilisateur appuie sur "Terminé" ou "Appliquer" pour fermer le modal, ce qui lui donne la confirmation souhaitée que les résultats de la recherche ont été modifiés.
2) Les utilisateurs n'auront pas à faire défiler une longue liste de filtres pour accéder aux résultats ci-dessous. Cela peut être un problème, en particulier si les résultats sont répartis sur plusieurs pages et que leur navigation entraîne chaque fois l'utilisateur en haut de la page.
Les images jointes proviennent de next.co.uk. En appuyant sur le bouton "Filtre", les filtres modaux (deuxième image) glissent vers le haut, de sorte que l'utilisateur sait qu'il ne les a pas amenés sur une autre page.
[Ajouter un filtre en bas sans couvrir tout l'écran est une méthode et une autre capture serait d'utiliser le bouton Appliquer après avoir modifié le filtre. Il y aura un problème lorsque le serveur devra extraire des données en fonction de chaque changement de filtre et plantera éventuellement, alors réfléchissez avant de l'utiliser, la solution serait d'ajouter le bouton Appliquer le filtre afin qu'il puisse toucher le serveur et obtenir des résultats.
Vous devez donner à l'utilisateur des commentaires qui:
- La page a reçu son interaction.
- La page a répondu en lui fournissant ce qu'il avait demandé.
Peu importe que les résultats soient identiques. L'important est que l'utilisateur comprenne que son interaction a réussi et que ce qu'il voit maintenant est une réponse.
La façon la plus simple et la plus efficace à laquelle je peux penser est que si les anciens résultats disparaissent et que les nouveaux apparaissent ou apparaissent, c'est ainsi que Google procède par exemple.
retour visuel pour l'utilisateur lorsqu'il/elle sélectionne un filtre - cela peut être obtenu à l'aide d'une simple icône de chargeur dans le volet des résultats chaque fois que l'utilisateur a sélectionné les filtres.
Je suppose que le filtre est menu déroulant sous votre en-tête et il sera réduit une fois que l'utilisateur aura sélectionné ses filtres.
Dans un tel cas, une fois que le menu s'est effondré, je suggérerais assombrir l'écran de résultat avec une icône de chargeur centré, pendant que l'utilisateur attend les résultats du serveur.
Indiquez également un nombre dans la section du menu des filtres réduits, afin que l'utilisateur sache à tout moment qu'un filtre a été appliqué.
Je dirais que vous n'avez pas besoin d'avoir quelque chose de manifestement persistant, comme une autre barre disant "Afficher 43 résultats pour 5 filtres". Si vous faites savoir à l'utilisateur ce que vous faites dans les coulisses à chaque étape, je pense qu'il sera probablement satisfait de sa position dans sa recherche.
Pour y parvenir, une superposition de Nice avec une grosse coche verte, ramassant n'importe quelle animation que vous utilisez ailleurs, et quelque chose comme `` Application du filtre: Februari 2017 '' pendant une seconde, devrait faire le travail.
Un nombre de filtres pour chaque section serait également bénéfique, pour la quantité d'espace qu'ils occupent, donc votre section supérieure pourrait lire 'Startmoment (1) v' - les crochets là-bas impliquant un cercle ou un autre graphique pour séparer le nombre de le titre.
Un peu de test irait un long chemin ici - mettre quelques conceptions ou prototypes différents devant les utilisateurs; voir ce qu'ils disent.
EDIT: veuillez noter que je ne suggère pas une icône de "chargement", ce qui signifierait que votre fonction de recherche devrait être lente pour que les utilisateurs comprennent ce qui se passe! Il s'agit plutôt d'un message que vous envoyez à vos utilisateurs, qui s'affiche quelle que soit la vitesse de votre recherche.
Vous pourriez peut-être utiliser une balise comme celle-ci? 
Ces balises représentent le filtre actif/sélectionné actuel, vous pouvez ajuster la taille pour l'adapter à votre conception.