Comment indiquer clairement à l'utilisateur quels caractères sont valides
J'essaie de déterminer la meilleure façon d'informer l'utilisateur qu'une entrée accepte certains caractères spéciaux. Les alphanumériques sont assez simples, mais j'ai l'impression de perdre de la clarté lorsque j'arrive à des personnages tels que. et -. Un style que j'ai essayé est le suivant:
Valid characters include A-z, 0-9, and (._-).
Lorsque les parenthèses enveloppent les caractères valides, mais lorsque les parenthèses ne sont pas valides, il semble trop facile de les confondre avec la liste.
Le style vers lequel je me penche est le suivant:
Valid Characters include A-z, 0-9, '.', '_', and '-'.
Mais j'ai l'impression que les guillemets simples encombrent les choses et permettent de se perdre facilement dans la liste, surtout à mesure qu'elle grandit. Y a-t-il un moyen de transmettre cette information qui est acceptée comme "meilleure", ou existe-t-il en fait de meilleures façons de procéder entièrement?
L'encombrement est problématique. Souligner les caractères valides pourrait suffire. Par exemple.:
Les caractères valides sont A - Z a - z -9._-.
Les afficher avec des couleurs différentes peut également aider.
Voici quelques conseils:
- interdire les caractères uniquement si c'est absolument nécessaire (je déteste quand je ne peux pas utiliser _ dans mon pseudo)
- afficher un message uniquement à l'utilisateur qui essaie d'utiliser l'un d'eux. Les autres utilisateurs ne seront pas gênés
- si l'utilisateur entre un caractère interdit, ne le considérez pas et expliquez-lui pourquoi.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je suggère de mentionner les caractères qui ne sont pas autorisés, car le nombre de caractères invalides est toujours moindre pour toute entrée requise. Cela contribuera à réduire l'encombrement. Voir l'exemple donné de l'Explorateur Windows.
Vous pouvez afficher des blocs de chaque type de caractère, comme ceci:
Caractères autorisés:A-Za-z0-9-_.
Je laisserais de côté A-z et peut-être même 0-9 car cela devrait évidemment être autorisé. Pour les caractères supplémentaires j'irais avec leurs noms plutôt que les symboles
Vous pouvez également utiliser un trait de soulignement, un tiret et un point.
tl; dr
Vous devez afficher tous tous les caractères valides ou tous les caractères invalides avant l'utilisateur commence à taper dans le champ. Cela devrait être un indice. Soyez bref, facile à comprendre et simple.
Manifestation
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Explication approfondie
Exemples d'espaces réservés
Utilisez des champs avec un espace réservé qui montre un exemple d'entrée valide. Les espaces réservés d'exemple indiquent le format préféré de l'entrée. Cela pourrait aider par exemple dans un champ de numéro de téléphone.
Message sur le focus
Affichez une étiquette fixe ou une bulle contextuelle lorsque l'utilisateur entre dans le champ.
L'utilisateur verra l'astuce avant qu'il commence à saisir l'entrée, afin qu'il puisse penser à une valeur différente si celle qu'il voulait à l'entrée est incorrecte. Cela résout également la question possible qu'un utilisateur poserait avant de donner l'entrée: "que dois-je écrire ici? Est-ce que mon entrée sera correcte?".
Liste de caractères courte et audacieuse
Utilisez une forme courte des caractères valides comme "a-z" et non quelque chose comme "alphanumérique uniquement".
Il est beaucoup plus facile de superviser et de comprendre les caractères acceptés. Vous n'avez pas à trouver la signification des mots comme: "ok, les caractères alphanumériques sont des caractères de a à z avec des nombres". Clarifie également l'obscurité comme: "les lettres majuscules sont-elles autorisées?".
Je recommanderais également solution @ NonNumeric en utilisant le gras sur la liste des caractères autorisés. Cela guide l'attention sur l'essence du message contextuel.
Commentaires sur le flou
Une fois que l'utilisateur a rempli le champ et que le focus est perdu, vous devez valider le champ.
- Si l'entrée est valide, cochez la case qui indique l'entrée valide.
- Si l'entrée n'est pas valide, laissez la fenêtre contextuelle là et faites-la ou le champ utilisateur (ou les deux) rouge, donc cela indiquera que quelque chose s'est mal passé.
Grâce à cela, si l'utilisateur a manqué le guide avant de taper, il a un retour après sa saisie. Les erreurs/coches simplifient également l'aperçu du formulaire rempli.
Une façon de résoudre ce problème consiste à ne rien dire du tout au début, puis à informer l'utilisateur lorsqu'un caractère non autorisé est entré. Si vous utilisez la validation en ligne et postulez après chaque entrée de caractère, l'utilisateur (presque) n'aura même pas besoin d'être informé du caractère interdit.
Cela dépend de ce qui doit se passer sur le terrain. Si les données qui doivent entrer dans le champ suivent une certaine forme (par exemple un code postal ou quelque chose), il y a un ensemble très limité de caractères qui devraient y arriver. Type-Os et des manières très alternatives de taper les données seront traitées par le message d'erreur et le reste flottera sans même s'en rendre compte.
Il se peut cependant que le champ soit fait pour des données qui ont moins de conventions autour de leur format. Dans ce cas, le nombre d'entrées erronées peut atteindre des niveaux inacceptables et une pré-entrée d'instructions est requise.
Dans le message d'erreur en ligne et dans le cas où un texte d'information est nécessaire, je préfère écrire "Lettres et chiffres" plutôt que "AZ, aZ, 0-9" car c'est beaucoup plus facile à comprendre et vous pouvez enregistrer l'encombrement des caractères spéciaux.
Ex: Veuillez utiliser uniquement des lettres, des chiffres et ces caractères spéciaux (_. -)
Je dirais que votre meilleur pari est d'utiliser une structure semblable à une table pour étiqueter et isoler clairement chaque règle:
[~ # ~] css [~ # ~]
table{
border-collapse:collapse;
}
td{
padding:3px 6px 3px 6px;
vertical-align:top;
border:solid 1px #000;
}
[~ # ~] html [~ # ~]
<h3>Allowed characters</h3>
<table>
<tr><td>Alphabet: lower-case and UPPER-case</td><td>A through Z<br>a through z</td></tr>
<tr><td>Numbers</td><td>0 through 9</td></tr>
<tr><td>Punctuation: period, underscore, hyphen</td><td>.<br>_<br>-</td></tr>
</table>
Alors maintenant, si votre liste s'allonge, vous n'avez plus à vous soucier des futurs personnages qui joueraient avec n'importe quel format que vous auriez choisi pour les caractères précédents.
Si vous autorisez uniquement tous les caractères utf8 en entrée, vous n'avez pas à vous soucier de la façon de l'expliquer à l'utilisateur. Et cela vous évitera un gros mal de tête lors de la mondialisation de votre application/site Web.
S'ils doivent entrer un e-mail, vous pouvez écrire "cette adresse e-mail n'est pas valide selon la norme Internet RFC". C'est beaucoup plus facile et les gens comprendront pourquoi ils doivent entrer uniquement ces caractères au lieu de penser que vous êtes méchant.
Afin d'éviter tout encombrement, mais pour fournir à l'avance toutes les informations descriptives que vous souhaitez, vous pouvez avoir un "lien" près du champ de saisie qui dit quelque chose comme "Quels caractères sont valides ici.". Lorsqu'une personne déplace sa souris vers (passe la souris sur) le lien, une "info-bulle" s'affiche qui décrit ce qui est valide, dans les détails que vous souhaitez.
Si l'espace n'est pas un problème, utilisez une liste verticale avec Word et les indices réels.
Vous pouvez utiliser
- Nombres (-9),
- Lettres (A-Z et a-z),
- Souligne (_),
- Tirets (-), et
- Périodes (.)
Dans tous les cas, expliquez les caractères valides avant que l'utilisateur entre les données, pas après la soumission ou lors de la frappe.