Quelle est la meilleure façon de saisir cm de mesures corporelles?
Dans mon application Web, l'utilisateur doit enregistrer ses mesures des parties suivantes du corps:
- Tête
- Cou
- Poitrine
- Hanche
- Pieds
La valeur stockée dans la base de données peut également stocker deux décimales. J'ai donc pensé de trois manières différentes pour demander ceci:
Option 1: jquery-number-plugin.js
Une entrée de texte qui formaterait automatiquement les nombres entrés et prend en charge les valeurs flottantes.
Vous pouvez le vérifier ici:http://jsfiddle.net/7nuA6/3/embedded/result/
Option 2: curseur
Un curseur avec un pas de 0,5 cm. Je voudrais indiquer la valeur réelle, cette fonctionnalité n'est pas incluse dans l'exemple. Je définirai la valeur minimale et maximale en fonction du sexe de l'utilisateur et du corps de la pièce. Je veux dire, les pieds pourraient être compris entre 15 et 35 cm par exemple.
Vous pouvez le vérifier ici:http://jsfiddle.net/8GNrd/7/embedded/result/
Option 3: numéro de type d'entrée
Je pense que c'est la meilleure option. Il a deux flèches pour ajouter ou soustraire le nombre, et vous pouvez taper directement la valeur souhaitée. Le mauvais point est le support du navigateur: http://caniuse.com/input-number
Vous pouvez le vérifier ici:http://jsfiddle.net/ZNKrb/66/embedded/result/
Ce sont mes questions:
- Selon vous, qu'est-ce qui est plus convivial?
- Avez-vous une autre alternative avec une bonne prise en charge du navigateur?
- Selon vous, quelle est la meilleure valeur par défaut à définir après que l'utilisateur a mis la mesure?
[~ # ~] modifier [~ # ~] :
Enfin, j'ai trouvé ceci: http://bootsnipp.com/snippets/featured/buttons-minus-and-plus-in-input
Pour la question 1, je exclurais l'option 2 (curseur) car de nombreuses personnes ont des problèmes avec leur image corporelle . Faire glisser un curseur vers la droite donne à quelqu'un l'impression qu'il est gros. Les personnes de taille extrême (dans un sens ou dans l'autre) peuvent avoir davantage l'impression que le site Web ne les aide pas, plus encore que si une liste de tailles sur un site de vêtements ne comprend pas la leur. Avec les sites de vêtements, je ne sais pas si les gens visitent délibérément les sites de magasins qui n'incluent pas leur taille, sachant qu'il y a beaucoup de magasins de vêtements qui auraient leur taille. Mon point est, je pense que c'est plus un problème pour une application générique de mesure du corps qui s'adresse à tous que pour un magasin de vêtements qui s'adresse à un public spécifique.
Bien que je n'ai pas de sources sur cette question en particulier, À propos de Face 3 a une section sur la conception d'interaction éthique, qui dit ceci:
"Les produits ne devraient nuire à personne, ou étant donné la complexité de la vie dans le monde réel, devraient, à tout le moins, minimiser les dommages."
Les auteurs énumèrent ensuite cinq types de dommages: interpersonnels, psychologiques, physiques, environnementaux et sociaux/sociétaux. La taille d'une personne qui n'est pas disponible dans le curseur peut lui causer un préjudice interpersonnel ("perte de dignité, insulte, humiliation") et/ou un préjudice psychologique ("confusion, inconfort, frustration, coercition, ennui"). Le Code de conduite de l'Association des professionnels de l'expérience utilisateur contient une déclaration similaire "ne pas nuire".
(En complément, Peter Morville et Louis Rosenfeld consacrent un chapitre complet à l'éthique pour les architectes de l'information dans Architecture de l'information pour le World Wide Web.)
Cela laisse donc vos deux autres options.
J'ai testé l'option 3 (type d'entrée: nombre) en saisissant une valeur non numérique. La valeur y est restée. Je pense que ce serait plus convivial si vous changez la valeur lorsque le focus d'entrée est perdu, si le contrôle le permet.
L'option 1, je pense, est trop restrictive car elle ne fait que ignorer entrée non numérique et les utilisateurs ne peuvent pas voir ce qu'ils ont tapé. Idéalement, pour moi, une entrée non numérique apparaîtrait brièvement à l'écran, puis serait corrigée à une valeur numérique par défaut appropriée comme zéro. La réponse de JohnGB à Est-ce une bonne pratique d'accepter uniquement les frappes numériques dans les champs de nombre uniquement? en parle.
Idéalement, je choisirais une autre option entre l'option 1 et l'option 3 , comme l'indique la réponse de JohnGB liée ci-dessus. Si ce n'est pas possible, je choisirais l'option 1 ou l'option 3 et je m'assurerais simplement que les messages d'erreur (si 3 est choisi) ont du sens pour les utilisateurs.
Pour la question 2, des alternatives avec une bonne prise en charge du navigateur, cela peut être davantage une question liée au développement. Si personne ici n'a de réponse, Stack Overflow peut être un meilleur endroit pour demander. Une réponse à cette question à SO mentionne un shim polyfill numérique pour les navigateurs incompatibles : https://stackoverflow.com/questions/17976393/html5-input-type-number-not-working-in-firefox (je n'ai pas testé cette solution moi-même).
Pour la question 3, j'envisageais de recommander que vous choisissiez une valeur "moyenne". Cependant, cela permettrait aux utilisateurs de poursuivre la configuration avec une valeur probablement incorrecte. Cela me soulève également l'image corporelle/l'éthique en raison de la perception qu'ont les gens de ce qui est moyen. 50% des personnes (moins celles qui sont en fait la mesure moyenne - moins susceptibles en cm que dans certaines autres méthodes de dimensionnement des vêtements) qui, par définition, sont plus grandes que la personne moyenne, courent le risque de se sentir insultées par cela.
Donc, avec cela à l'esprit, je recommanderais pour la question 3 que vous choisissez une valeur non valide par défaut . Mettez-le à zéro ou laissez-le vide et affichez une erreur si les utilisateurs tentent de passer à l'écran suivant. Lorsque les utilisateurs voient ce formulaire pour la première fois, les champs doivent être vides. Une valeur négative n'aura pas vraiment de sens et exposera trop les gens au modèle d'implémentation de votre application web (voir aussi Donald Norman, The Design of Everyday Things and Emotional Design). Dans les deux cas, indiquez clairement que les utilisateurs doivent saisir quelque chose de correct, ce qui est idéalement exact pour eux afin de tirer le meilleur parti de l'application, afin de continuer.
Pour la question 1.
Dans le curseur, lorsque vous gardez un pas de 0,5 cm, il sera un effort supplémentaire pour l'utilisateur de le définir à une valeur spécifique lors de la première tentative. De plus, vous devrez conserver des curseurs avec différentes configurations de plage pour les cinq aspects que vous souhaitez capturer (ce que vous devrez faire comme validations de plage pour les deux autres options également), mais pour une fréquence d'utilisation plus élevée, la saisie de valeurs semblerait plutôt plus convivial que de régler le curseur.
Bien que les options 1 et 3 soient de nature assez similaire, considérez le fait que si vous devez modifier une valeur entrée, puisque vous avez défini la valeur de pas à 0,5 cm pour l'option 3, il sera plus facile de manipuler les données dans ce champ (même en utilisant les touches fléchées haut et bas), ce qui vous donne un avantage dans l'expérience utilisateur sur l'option 1.
Pour la question 2. Je suis d'accord avec Matt, vous pouvez essayer le débordement de pile pour obtenir de très bonnes solutions.
Pour la question 3. La valeur par défaut des champs peut être le 0 idéal. Étant donné que si vous conservez une valeur minimale, maximale ou moyenne, il est fort probable que l'utilisateur puisse sentir qu'il est sur/sous-dimensionné car le cerveau définit automatiquement la valeur valeur comme référence (pas consciemment cependant). Donc, utiliser un 0 le rendrait simple et pendant que l'utilisateur soumet l'enregistrement, vous pouvez vérifier les validations de valeur 0 dans les champs assez facilement.