Filtrer les champs de texte par rapport aux curseurs
Je fais un site de commerce électronique pour vendre des vêtements et il sera également réactif. Je veux savoir quelle est la meilleure approche pour établir des budgets.
Un champ de texte avec une plage de budget sera-t-il meilleur en UX ou un curseur fonctionnera-t-il mieux sur tous les appareils?
il y a un certain nombre de problèmes à considérer avec les curseurs que vous ne rencontrerez pas en utilisant des zones de texte ou les interactions de type de case à cocher que vous montrez également dans votre instantané d'interface utilisateur dans la question (je ne m'occuperai pas de ceux ici, sauf pour dire que je pense ils sont un excellent outil de recherche à facettes).
1. commentaires des utilisateurs
il est plus difficile de donner aux utilisateurs des commentaires de manière automatisée lors de la mise à jour du curseur. Faites-vous cela chaque fois que l'utilisateur déplace un curseur, risquant de boucher votre interface avec le traitement, ou de le laisser mettre à jour avec un bouton une fois qu'il a sélectionné ses valeurs?
2. nombre de résultats
Comme vous le démontrez avec la conception de la case à cocher, il est très facile de donner à l'utilisateur un nombre de résultats correspondant à un ensemble lorsque la page est chargée, tandis qu'avec les curseurs (et également avec les zones de texte), cette valeur ne peut pas être définie lors du chargement, ce qui signifie que l'utilisateur peut finir avec des jeux de résultats vides. Cependant, avec les zones de texte mises à jour via Ajax lorsqu'elles sont remplies, l'utilisateur ne déclenche pas autant de traitement qu'avec un curseur, vous avez donc plus de temps pour calculer le nombre de résultats.
Les utilisateurs arrivant sur une page de recherche vide doivent être évités à tout prix.
3. défaire les erreurs
Une fois que vous êtes arrivé à un stade où vous avez trop restreint la plage de valeurs avec un curseur, il est alors difficile de l'annuler par rapport à un champ de texte. Dans un espace restreint, comme un panneau latéral de site Web ou un téléphone intelligent, avec des poignées coulissantes trop rapprochées, d'autres erreurs peuvent facilement être commises. L'erreur initiale peut être traitée plus facilement dans le même espace restreint lorsque des zones de texte sont utilisées.
4. suivi des yeux
Dans l'exemple ci-dessus, l'utilisateur doit se concentrer sur quatre points à un moment donné car il ne doit se concentrer que sur deux avec une paire de zones de texte. Ils se concentrent sur les poignées du curseur et sur les valeurs renvoyées.
Cela peut être quelque peu aidé en attachant les valeurs aux poignées, mais vous avez toujours un traitement cérébral supplémentaire requis par rapport aux simples zones de texte. Une plage est lue de gauche à droite (pour les anglophones comme votre interface utilisateur et votre question l'indiquent) et pourrait se passer de l'interruption centrale maladroite de la mise au point.
5. vitesse de définition d'une valeur
Disons que je veux définir la plage de 100 £ à 200 £. Avec les zones de texte que je viens de taper, avec les curseurs, je dois d'abord regarder les limites de la plage, puis faire glisser pour enquêter sur les étapes, puis deviner où se trouvent 100 £ et 200 £, puis réajuster et ainsi de suite jusqu'à ce que je sois au endroit où je veux être
6. souris, clavier et doigt
Les curseurs permettent l'interaction avec la souris. Ils ont des poignées et les gens sont habitués à les utiliser en cliquant et en faisant glisser, ce qui est une interaction plus lourde que la mise au point et la frappe.
Les zones de texte peuvent être concentrées avec les deux méthodes et l'utilisateur connaît très bien les interactions avec la souris et le clavier.
Sur mobile, nous utilisons nos doigts et le curseur est à nouveau plus encombrant. Les zones de texte sont un tap pour se concentrer et quelques taps pour taper, tandis que comme le curseur est un tap pour saisir et glisser pour se déplacer, en composant le point 3 ci-dessus.
quelques lectures supplémentaires et sources pour ma réponse:
http://www.90percentofeverything.com/2007/12/21/three-user-experience-guidelines-for-ajax-sliders/
http://www.uxmatters.com/mt/archives/2010/02/numeric-filters-issues-and-best-practices.php
à partir de ce deuxième article, la citation: "Notez que les interfaces utilisateur ennuyeuses fonctionnent généralement extrêmement bien, car elles sont intuitives et faciles à utiliser" résume une bonne position sur les curseurs par rapport aux zones de texte de base et une maxime que je pense devrait toujours être prise en compte lorsque peser un widget d'interface utilisateur jquery contre un élément de formulaire de base bien établi mais moins intéressant techniquement.
PS, quoi que vous décidiez, utilisez l'index des onglets et tenez compte du focus du clavier tout au long de l'interaction