Quelle est la meilleure façon et la plus intuitive pour qu'un utilisateur saisisse une valeur de hauteur en pieds et pouces dans un formulaire Web?
Quelle est la meilleure façon et la plus intuitive pour qu'un utilisateur saisisse une valeur de hauteur en pieds et pouces dans un formulaire Web? Les principaux choix semblent être:
- Avoir un champ de texte où ils peuvent entrer des valeurs. Cela devient un problème d'analyse modérément complexe si plus d'un ou deux formats sont autorisés, mais c'est faisable.
- Avoir deux champs de texte, un pour les pieds et un pour les pouces.
- Avoir deux listes déroulantes, une pour les pieds et une pour les pouces. Cependant, cela n'autorise pas les valeurs en pouces fractionnaires, sauf s'il existe de nombreuses options dans la liste déroulante en pouces.
Je suppose que cette question concerne également la saisie de tout élément de données qui est souvent considéré comme composé en plusieurs parties (numéros de téléphone).
Que diriez-vous de deux boutons radio (créés avec jQuery Aristo UI ):
Mise à jour : Étant donné que la hauteur est en fait une ligne continue, je pense que ce qui suit est une amélioration et prend en compte les commentaires ci-dessous qu'elle devrait être de 0 à 11 et que vous diriez 6 'et non 6' 0 ":
J'ai créé un jsFiddle pour cela en utilisant jQuery UI Slider .
La première option est bonne si la validation est possible. Le seul problème est que face à un champ de texte vide, les utilisateurs ne savent pas comment formater leurs données - ils supposent que la machine ne gère qu'une gamme finie de formats, et ils doivent deviner lesquels. Pas une bonne expérience utilisateur.
La solution de contournement habituelle consiste à suggérer une valeur potentielle. Certains le font avec du texte par défaut dans la zone de texte, parfois grisé pour un meilleur effet.
Une autre bonne idée est d'analyser les données au moment où le champ perd le focus, en remplaçant le texte de l'utilisateur par "l'interprétation" de votre application de ce qu'ils signifient. Par exemple, après avoir saisi le texte "3.6", votre application remplace le texte "3 pieds 6 pouces". De cette façon, l'utilisateur peut être sûr qu'il n'y a aucun problème de formatage. Ils peuvent également repérer tout problème de formatage réel plus tôt (plus l'utilisateur est informé tardivement d'une erreur, plus il est difficile pour lui de se souvenir du contexte et de sa décision, et donc plus la charge de travail cognitive est grande).
En fin de compte, la partie Utilisateur d'UX dépendra de votreutilisateurs.
L'approche best changera en fonction de conditions telles que:
- Que cibles de déploiement que vous cherchez à soutenir/optimiser (tactile vs clavier)
- Si les utilisateurs font la saisie de données à partir d'un formulaire préexistant qui a une certaine apparence
- Quels antécédents culturels/unités sont communs/pris en charge
- La plage de valeurs que vous cherchez à collecter (bébés vs adultes adultes)
Option 1 - Texte libre/analyseur
Il s'agit essentiellement d'une micro-grammaire , qui présente des avantages et des inconvénients. C'est un peu rare, donc il y a des problèmes de découverte inhérents, mais si vous avez des utilisateurs répétés , il peut offrir un moyen puissant d'entrer des données dans un seul champ sans le coût d'interaction des changements de champs/contextes. Pour faciliter la découverte, vous pouvez utiliser du texte d'espace réservé pour suggérer le format correct pour les données.
De loin, cela nécessitera également le plus de travail de développement à mettre en œuvre par rapport à d'autres options, mais est encore relativement faisable en fonction du nombre de langues/cultures que vous devez prendre en charge
Option 2/3 - Collectez les informations en morceaux
La collecte d'informations séparément est certainement la plus facile à coder dans presque tous les cas, vous pouvez donc optimiser votre cycle de développement pour certaines fonctionnalités rarement utilisées. Ensuite, c'est à vous de décider comment vous voulez collecter des valeurs numériques (en utilisant un stepper, une liste déroulante, un bouton radio ou un groupe de boutons comme exemples). Chaque métaphore d'entrée présente des avantages/inconvénients par rapport à différentes cibles démographiques/de déploiement.
Option 4 - Curseur - Si vous collectez la hauteur sur une petite plage de valeurs (pour les petits enfants par exemple), vous pourriez utilisez un curseur, mais notez que lorsque le nombre de valeurs augmente, la précision requise pour sélectionner correctement une valeur dans un curseur devient de plus en plus difficile , en particulier sur mobile. Si la précision est importante (comme c'est généralement le cas pour la taille/le poids), j'éviterais probablement cette option.
Exemples
Tout comme une expérience de pensée, voici plusieurs maquettes différentes.
- Lequel préféreriez-vous préférez vous utiliser?
- Lequel trouvez-vous le plus facile à lire?
- Lequel prendrait le moins de temps pour entrer (clavier/téléphone)?
- Si vous le pouvez, empruntez 5 utilisateurs finaux du produit et demandez-leur aussi .
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'option 2 est la plus simple, ils entrent simplement un maximum de deux valeurs dans chaque fenêtre. L'option 1 serait déroutante et difficile à analyser et l'option 3 prendrait plus de temps à survoler/faire défiler jusqu'à l'option appropriée.
Rendez les choses faciles
Les gens savent comment enregistrer la hauteur:
Dans les unités impériales, ce sont toujours des pieds et des pouces.
Deux unités distinctes, deux champs séparés.
Facile pour eux d'entrer.
Facile à analyser.
Rendre les choses difficiles
Les boutons radio, curseurs, menus, etc. font simplement réfléchir les utilisateurs à vos commandes.
Vous leur présentez également toute une série de chiffres non pertinents à parcourir.
Voyons voir ... 0, 1, 2, 3, 4 ... 5 ... c'est celui que je veux.
D'accord, maintenant 0, 1, 2, 3, 4, 5, 6, 7 ... 8!
Mec, je suis content que ce soit fini.
????
Comme le dit le proverbe, ne faites pas réfléchir vos utilisateurs.
J'ai abordé cela en prenant la difficile option d'analyse initiale (avec beaucoup de tests unitaires) afin que les utilisateurs puissent taper dans le format de leur choix - mais j'avais une très large gamme pour répondre aux négatifs.
Si la plage n'est pas trop grande, les listes déroulantes au pouce près pourraient mieux servir car elles évitent à l'utilisateur d'avoir à penser au format pour entrer le texte de forme libre, par exemple avec des espaces, des fractions, des tirets, etc.