Curseurs de prix vs liens de gamme comme élément de formulaire de recherche à facettes pour filtrer le prix
Lors de la comparaison d'un widget de curseur jquery frontal avec une liste de liens qui filtrent par gamme de prix, dans le contexte de recherches à facettes qui réduisent le nombre d'articles dans un catalogue, lequel des deux éléments d'interface susmentionnés est le meilleur lorsque l'on considère la vitesse à quel utilisateur peut restreindre les produits du catalogue à la gamme qui représente le montant qu'il souhaite dépenser?
Le curseur a plus de charge cognitive pour un utilisateur. L'implémentation d'interaction à l'aide du curseur peut également entraîner des pertes de temps.
Dans un scénario où l'utilisateur garde à l'esprit la fourchette de prix prévue pour un produit, les problèmes possibles sont les suivants:
- L'utilisateur doit constamment mapper le nombre et la position du curseur voulus. Même si le numéro souhaité est affiché dans le curseur, certains utilisateurs ne cliqueront pas simplement mais y glisseront. La nécessité d'une boucle de rétroaction constante conduit à une charge cognitive élevée.
- Tenez compte de l'espace requis pour le curseur utilisable.
- Manque de visibilité
![enter image description here]()
- Le chargement immédiat du contenu lors du changement de curseur entraînera un scintillement du contenu et une charge réseau. Il est donc préférable de convaincre si la position du curseur est définitive. Ajoutez ce temps d'attente au temps de chargement des ressources. Cela peut donc être critique pour un utilisateur.
Ayant l'ensemble des fourchettes de prix sous forme de liens hypertexte, l'interaction utilisateur se compose de seulement deux étapes:
- Reconnaissez le lien nécessaire.
- Cliquez dessus.
2 arguments en faveur des curseurs:
Si je fais des emplettes, je travaille généralement avec une limite de prix supérieure mais pas inférieure. Pas toujours, mais généralement. Un curseur me permet de garder ma limite inférieure à 0 $ pendant que je modifie ma limite supérieure. Les liens pour définir les gammes de prix m'obligent à tronquer ma recherche du foo parfait ( cliquez sur le lien> faites défiler la gamme de prix la plus basse> cliquez sur la deuxième gamme de prix la plus basse> faites défiler ... ) au lieu de rassembler tous les résultats sur une seule page.
Compte tenu de la façon dont j'utilise les curseurs dans ce contexte, j'ai certainement (et je parierais que d'autres l'ont également) magasiné avec une limite de dépenses initiale et ajusté la limite supérieure plus haut, car je n'étais pas satisfait des résultats que j'ai obtenus avec ma recherche initiale. J'ai décidé que je devais dépenser plus d'argent pour obtenir ce que je voulais, ce qui est une victoire pour le magasin dans lequel j'achète.
Cela dit, j'aimerais que quelqu'un ait des données - ou des anecdonnées - sur les résultats réels avec le curseur.
ETA
Je viens de parcourir cette conception alternative sur newegg.com. Des cases à cocher pour chaque niveau de prix permettent de sélectionner une large gamme de prix pour votre recherche.
Notez que dans leur implémentation, la page se recharge automatiquement lorsque vous sélectionnez une fourchette de prix, ce qui rend le cas d'utilisation spécifique que j'ai décrit ci-dessus (sélection d'une large gamme du prix le plus bas au maximum des dépenses personnelles) vraiment ennuyeux. Chaque. Cliquez sur. Recharger. Page. Un filtre en direct ou un bouton "soumettre" atténuerait cependant ce problème.
Les curseurs permettent de choisir librement la fourchette de prix.
Problèmes avec les curseurs
Cependant, comme ils sont généralement parmi plusieurs critères et que la majorité de l'écran devrait présenter des résultats plutôt que le filtre, ils sont généralement assez petits.
Choisir un prix spécifique nécessite un positionnement parfait au pixel près (ou - en cas de limite stricte - n'est même pas réalisable).
La plage doit être limitée par d'autres aspects de la requête pour ne pas avoir à répartir 0,01 $ à 10 000 $ dans un seul curseur linéaire, mais cela donne souvent des étapes difficiles.
La sélection de 100 $ .. 200 $ peut donner exactement deux résultats et masquer des dizaines d'options à 99,99 $.
L'affordance est deux opérations de glisser-viser, contre un seul clic.
Pourquoi voudrais-je même filtrer par prix?
Je pourrais avoir une limite budgétaire stricte, ou une limite souple, "99,99 $, pas un centime de plus" vs "environ 100 $ pour une bouilloire de qualité est très bien"
Une limite supérieure peut également être utilisée pour exclure les fonctionnalités indésirables du produit: je ne veux pas d'une bouilloire parlante avec un navigateur de recettes intégré.
Une limite inférieure est généralement utilisée pour exclure les correspondances incorrectes, par exemple J'ai cherché des bouilloires et j'ai obtenu deux pages d'autocollants de bouilloire pour 0, 99 $, ou pour une qualité minimale perçue - je veux une bouilloire robuste, pas les fragiles principalement en plastique.
Notez que le prix est souvent un proxy pratique pour un autre attribut difficile à filtrer.
Deux curseurs ou un curseur de plage sont généralement l'implémentation la plus simple .
Les gammes de prix nécessitent une configuration manuelle ou un algorithme décent. Un bon algorithme peut rechercher des groupes de prix et suggérer automatiquement des fourchettes significatives qui reflètent réellement les résultats disponibles.
$25..$75 (25 items)
$89.99..$130 (30 items)
$180 and up (12 items)
[custom]
Pour appliquer les limites fixes, une fenêtre contextuelle "plage personnalisée" peut être utilisée, en utilisant des curseurs de grande taille avec des étapes "naturelles" et un retour idéalement immédiat du nombre de résultats dans cette plage.
Alternativement: le prix est dans presque toutes les applications la condition de tri principale. Cela pourrait être exploité dans la présentation des résultats.
Lorsque les prix diffèrent considérablement, au lieu d'afficher tous les résultats, regrouper par fourchette de prix. Par exemple. au lieu de deux pages d'autocollants de bouilloire, affichez le top 5 et un lien vers "plus pour moins de 1 $"
Vous pouvez également fournir des aides à la navigation, par exemple lors du tri par prix, au lieu des numéros de page, utilisez un indicateur de prix.
Je serais d'accord avec les curseurs de prix si les résultats filtrés changent pendant que l'utilisateur glisse et que l'utilisateur n'a pas à cliquer sur un autre bouton pour appliquer le filtre.
Tout comme le curseur de tarification sur Heroku ici https://www.heroku.com/pricing
Tant que vous pouvez montrer appliquer le filtre pendant que l'utilisateur fait glisser le filtre (en supposant que toutes les données sont déjà chargées), le curseur sera utile.
Sinon, il deviendra encore plus fastidieux pour l'utilisateur de déplacer d'abord le curseur en faisant glisser sa souris, puis vous téléchargerez les valeurs filtrées et les afficherez.