Rendre l'utilisateur conscient qu'il ne peut pas saisir de valeurs arbitraires dans la zone de texte?
Dans mon projet Web actuel, j'ai une zone de texte où l'utilisateur peut saisir une enchère pour une enchère. Cependant, pour éviter les enchères de sommes arbitraires, seules certaines valeurs correspondant à des intervalles prédéterminés sont autorisées.
Par exemple, si l'enchère actuelle est de 240 €, l'utilisateur ne peut pas enchérir 241 €, il doit enchérir 260 €, 280 € ou 300 € (et ainsi de suite). L'enchère peut être aussi importante qu'il le souhaite cependant, elle n'a qu'à s'adapter aux intervalles.
Pour faciliter la vie de l'utilisateur, je lui montre les valeurs d'enchères possibles proches de ce qu'il entre dans la zone de texte:
Mon problème est que cela n'empêche vraiment personne d'entrer et de soumettre des valeurs invalides. Les utilisateurs verront les valeurs comme une suggestion et saisiront toujours d'autres valeurs. Tout ce que je peux faire, c'est afficher une erreur lorsque cela se produit et suggérer une autre valeur qui serait proche de ce qu'il a entré. C'est le nettoyage après coup, mais je préfère aider l'utilisateur de manière préventive.
Existe-t-il une meilleure solution qui rende plus clair à l'utilisateur qu'il doit sélectionner l'une des valeurs que je lui propose et ne peut rien soumettre? J'ai pensé à utiliser des curseurs logarithmiques au lieu d'une zone de texte, mais il n'y a pas de montant maximum que l'on puisse enchérir et mon client préfère quelque peu une solution de zone de texte.
J'ai trouvé une autre façon de gérer ce scénario qui est plus clair dans les cas de sauts arbitraires.
1. Afficher les liens sous la saisie de texte pour transmettre rapidement le fonctionnement du système d'enchères en répertoriant les choix valides qui peuvent être choisis en un seul clic dès le début.
2. Mettez à jour les choix valides à mesure que l'utilisateur tape ou clique L'utilisateur peut soit taper 68, soit cliquer sur le lien correspondant et obtenir le même résultat.
Tant que l'entrée est numérique, mettez à jour les options valides autour d'elle, mais n'essayez pas de valider l'entrée jusqu'à ce que le focus soit perdu (c'est-à-dire les onglets utilisateur ou les clics)
3. Lorsque vous vous concentrez, informez l'utilisateur lorsque la valeur n'est pas valide afin qu'il puisse rapidement remédier à la situation.
Je jouais récemment avec n nouveau type de contrôle de pageur qui n'utilise que des chiffres et ne nécessite aucune localisation (suivant, précédent, dernier, premier, toutes fonctionnent sans aucun mot requis dans l'interface utilisateur)
Je l'ai légèrement modifié pour fonctionner dans votre cas ici. L'idée est d'être très clair pour l'utilisateur à l'avance qu'il ne peut pas simplement taper ce qu'il veut car il n'y a pas de saisie de texte ...
Cet exemple attend une enchère minimum et maximum, mais le maximum pourrait être supprimé.
De grands sauts entre les valeurs peuvent toujours être obtenus en cliquant sur ... puis en tapant.
Vous pouvez montrer à l'utilisateur que, quel que soit le nombre saisi, il s'affichera sous la forme d'un multiple de 10. Lorsque des ordures sont entrées, aucune opération n'est effectuée et il revient à voir la liste des options disponibles sur lesquelles il peut cliquer.
Voici un lien vers le contrôle modifié pour voir s'il fonctionne pour vous
En HTML5, l'élément input prend en charge l'attribut step. Exemple: http://jsfiddle.net/yhffroa1/
Cependant, tous les navigateurs ne le prennent pas encore en charge. IE en particulier n'a pas de boutons rotatifs pour <input type="number">, Et les navigateurs mobiles ne respectent pas du tout step.
Il existe également l'attribut pattern qui applique les pseudoclasses :valid/:invalid Si nécessaire, mais qui ne prend en charge que les expressions régulières. Vous pouvez utiliser JQuery ou ce que vous avez pour ajouter ou supprimer ces classes si nécessaire.
Mais cela ne répond pas à votre question, vous voulez communiquer à l'utilisateur ce qu'il a fait de mal! Dans ce cas, vous voulez setCustomValidity() , qui indiquera au navigateur d'afficher un message personnalisé. Ce n'est pas encore sur caniuse.com, et je ne sais pas comment l'utiliser donc je ne peux pas le tester, mais je pense que cela fonctionne au moins sur Firefox. Il y a beaucoup de questions à ce sujet sur Stack Overflow.
Pour vous assurer que les utilisateurs uniquement sélectionnez et ne entrez rien, vous devez supprimer le formulaire de saisie, car cela encourage les gens à y saisir des éléments.
Alternativement, je
définissez l'enchère actuelle par défaut et ne permettez aux utilisateurs de choisir que des valeurs telles que "445 $ (+ 15 $), 460 $ (+ 30 $), etc.".
définir l'enchère actuelle par défaut et donner à l'utilisateur une liste d'options de + 10 $ (ou quel que soit le minimum) à + 200 $ (ou quel que soit le maximum)
présenter un curseur qui commence par l'enchère actuelle et qui a des bouchons "magnétiques" à chaque jalon (par exemple "sticks" sur +10, +15, +20, +30 et ainsi de suite), au lieu de la liste.
Personnellement, je suis un fan de ce que Windows a fait récemment avec les entrées numériques: lorsque vous entrez quelque chose de non valide, il affiche une fenêtre contextuelle de type "info-bulle" qui vous indique l'erreur.
De toute évidence, le message pour votre contrôle serait quelque chose comme "L'enchère doit être un multiple de 20 €"
Que diriez-vous d'un design comme celui-ci?
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vous autorisez l'utilisateur à entrer le nombre qu'il souhaite dans la zone de texte "offre idéale" , mais l'affiche automatiquement dans la case désactivée "enchère réelle" zone de texte l'incrément le plus proche (arrondi vers le bas pour ne pas faire payer l'utilisateur plus qu'il ne le souhaitait).
Vous avez besoin d'une liste déroulante/sélection consultable. La distinction entre votre exemple est que la zone que vous tapez pour la recherche n'est PAS le champ de saisie de données et ne sert qu'à présenter une liste d'options. Si vous cliquez sur la liste déroulante pour l'agrandir, tapez dans le champ de recherche, puis cliquez loin sans rien sélectionner, la sélection ne change pas et ce qu'ils ont tapé est rejeté. Cela montre clairement qu'ils doivent sélectionner l'une des valeurs que vous leur présentez. S'ils tapent la valeur exacte et appuyez sur Entrée, il sélectionne automatiquement la valeur appropriée.
listes déroulantes Select2 implémentez exactement ce comportement. Vous pouvez utiliser les fonctions/événements pour générer la liste de sélection de manière dynamique en fonction de ce qui est tapé, de sorte qu'aucune demande ajax n'est nécessaire et vous n'aurez pas besoin de créer une liste déroulante contenant toutes les valeurs possibles. Ce sera un peu un cas d'utilisation avancé de select2, mais il est très capable de cela car il fournit la fonction javascript query que vous pouvez remplacer et présenter les valeurs qui sont à proximité.
Typeahead de Twitter est également une implémentation bien connue de ceci:
Plutôt que de se concentrer complètement sur le widget d'entrée, en plus du widget, une interface utilisateur de correction en cours serait très forte.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si vous n'êtes pas limité par l'espace, autorisez l'utilisateur à saisir la valeur qu'il souhaite, puis arrondissez-la à la valeur autorisée la plus proche. La raison pour laquelle cela a besoin d'espace est que vous devrez non seulement afficher la valeur réelle autorisée, mais également une explication de ce qui se passe. Quelque chose comme:
Votre enchère
Pour éviter des enchères arbitraires avec de petites augmentations prolongeant inutilement les enchères, seules certaines valeurs sont autorisées. La valeur que vous entrez ci-dessous sera automatiquement arrondie à la valeur autorisée la plus proche et indiquée dans la case intitulée "Votre enchère". Veuillez vérifier que la somme ajustée est acceptable avant de soumettre votre offre.
Votre enchère: [zone clairement visible] Entrez la valeur ici: [zone de saisie du nombre normal]
Évidemment, vous devrez ajuster le texte et le style, mais j'essaierais d'abord.
En fouillant dans le site, je suis tombé sur deux autres idées dans cette question qui permettent de saisir uniquement des valeurs valides:
Glissière
Un curseur qui peut être glissé à différentes vitesses (idée et image par JonW):
Avantages
- intervalles flexibles possibles (c'est-à-dire +20 entre 200 et 500, +50 lorsque la valeur est supérieure à 500)
- augmentation/diminution plus rapide de la valeur en faisant glisser plus à droite
- pas de valeur max nécessaire
Inconvénient
- pourrait ne pas être intuitif à utiliser pour certains utilisateurs
Odomètre
Un contrôle qui vous permet d'ajuster chaque chiffre du nombre (idée et image par Chase Sandmann)
Avantages
- Si l'ajustement d'un chiffre entraîne un nombre non valide, le contrôle peut déplacer un autre chiffre pour s'adapter à nouveau à l'intervalle. (ou ignorez tout simplement les chiffres invalides lors du réglage)
- Sélection rapide de valeurs élevées possible
Inconvénient
- a une valeur maximale possible grâce au nombre fixe de chiffres
L'avantage des deux solutions est qu'elles n'ont pas besoin de beaucoup plus d'espace qu'une simple zone de texte.
Une saisie semi-automatique qui n'est pas modifiable
Au fur et à mesure que vous tapez, cela réduit les choix (simplement un filtre)
Si seuls les nombres sont valides, il suffit de lancer les frappes qui ne sont pas valides
S'ils saisissent une séquence non valide, vous n'avez tout simplement pas de choix valides
Une touche Entrée est utilisée pour indiquer que l'utilisateur accepte la sélection actuelle
La touche de tabulation est l'élément suivant de la liste de sélection valide
.
Je ne remplirais pas avant le premier numéro
Laissez-les entrer un 1,2, entrez
Donc, s'ils commençaient par un 2, vous leur donneriez 200, 205, 210
Un simple contrôle ascendant
Un simple curseur de contrôle