web-dev-qa-db-fra.com

sélecteur de plage / champ unique

Travaille actuellement sur l'application de liste de voitures où les utilisateurs peuvent parcourir les voitures, contacter les vendeurs, etc.

L'un des filtres que nous avons est l'année, en ce moment, nous fournissons à l'utilisateur 2 champs (Année de - Année à) et nous comptons sur l'utilisateur pour entrer les deux champs la même valeur si l'utilisateur recherche des voitures à partir d'un spécifique an.

J'essaie de trouver une solution intuitive qui prend en charge à la fois la plage et les valeurs uniques, étant donné que les utilisateurs sont très simples (pensez à un grand-père) et que la priorité pour la plage est supérieure à la valeur unique.

4
UX Labs

J'étais sur le point de commenter la réponse de BrunoH: https://ux.stackexchange.com/a/122001/98561 , que je trouve une solution très agréable et simple pour les utilisateurs de bureau car la définition des curseurs nécessite certains précision difficile à atteindre avec les appareils à écran tactile. Mon commentaire est devenu assez long, d'où une autre réponse.

J'utiliserais le concept de BrunoH avec deux ajouts:

  • un bouton radio permettant un choix explicite entre la plage et la valeur spécifique (je ne mets pas les années de fabrication ici par paresse et à cause de ma prochaine idée)
    mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

  • une échelle quasi exponentielle reflétant l'offre de voitures d'occasion sur le marché. Ce que je veux dire, il n'y a pas beaucoup de voitures de 1995 par rapport à 2005, mais nous pouvons supposer que l'offre totale de voitures fabriquées entre 1995 et 2000 sera à peu près similaire à celles de 2017 uniquement (de plus en plus de voitures sont fabriquées chaque année et plus les voitures se retrouvent dans une décharge et non sur le marché).
    Ainsi l'échelle peut ressembler à ceci:
    mockup

télécharger la source bmml

Bien sûr, cela rend un peu plus compliqué si je recherche une voiture de 2009 exactement. Une solution pour cela peut être une "marge" si "année spécifique" est choisie, c'est-à-dire que si je sélectionne "2008" avec "marge", les voitures de 2008 +/- 1 seront sélectionnées et je trie les résultats de la recherche par année de fabrication descendant. Et plus la date de fabrication est précoce, plus la marge est grande.

C'est beaucoup de logique dans les coulisses, mais pour les utilisateurs qui ont besoin d'options de recherche très précises et détaillées, une fonction de "recherche avancée" peut être fournie.

2
Mike

vous pouvez y parvenir en utilisant un curseur de plage. Comme ça: enter image description here

Problème avec ce modèle: vous avez un point de départ fixe. Si votre site traite de très vieilles voitures, cette solution ne fonctionne pas. Pour le faire fonctionner avec des voitures plus anciennes, vous pouvez afficher les champs de à comme champs de saisie. De cette façon, l'utilisateur a la possibilité d'utiliser les curseurs ou de saisir directement l'année.

3
BrunoH

Pour moi, une échelle avec deux modes d'interaction fonctionnerait assez bien:

  • si vous cliquez dessus, une valeur est sélectionnée
  • faire glisser sur une pièce sélectionnerait une plage

(Bien sûr - comme déjà mentionné dans d'autres réponses également - il pourrait être semi-logarithmique et les valeurs pourraient également être affichées dans des zones de texte modifiables).

Bien que je ne l'ai pas encore vu, cela pourrait ne pas être très intuitif au début.

1
Máté Juhász