Limites de caractères dans les champs de zone de texte - avantages et inconvénients et meilleures pratiques?
Certains de nos champs de formulaire ont des limites de caractères. Nous débattons pour savoir si nous devons refléter la taille actuelle de la saisie de données ou simplement limiter et interdire la saisie de données au-delà de cette taille.
En HTML, simple <input> les éléments peuvent avoir un attribut maxlength qui empêche toute nouvelle entrée, mais <textarea> n'a pas d'option intégrée. Limites de caractères dans <textarea> peut facilement être imposé via javascript.
Twitter affiche les caractères disponibles restants et vous permet de taper plus que cela, mais l'affiche comme une erreur (et désactive le bouton d'action).
Nous cherchons à afficher de manière proactive le nombre de caractères autorisés pour un champ limité et à afficher le nombre de caractères restants. Si l'utilisateur dépasse la limite, un message d'invalidation de formulaire en ligne apparaît.
Un contre-argument est que les utilisateurs ne remarquent même pas la mise à jour des petits nombres, et que l'utilisateur pourrait bien finir par dépenser beaucoup d'efforts à taper quelque chose dont ils ont ensuite besoin de couper.
Quels sont les avantages et les inconvénients de l'utilisation de ces compteurs de personnages?
En l'absence de texte, faites simplement entrer le message dans le nombre maximum de caractères (aucune mention du nombre restant.
Au fur et à mesure que vous tapez, le nombre de caractères restants passe du gris au noir (indication très subtile)
Lorsque vous atteignez la limite, changez la bordure en rouge; faire de tout excès de texte une couleur différente; affiche une petite icône d'erreur ci-dessous et indique le nombre de caractères excédentaires - mais maintenant en rouge. Vous pouvez faire disparaître la rougeur en quelques secondes afin de ne pas être trop un "choc".
La coloration du texte en excès permet à l'utilisateur de voir exactement combien l'excès est. Je trouve toujours ennuyeux de devoir deviner combien de mon texte est réellement le montant excédentaire et c'est bien de l'avoir clairement marqué.
Mais ne limitez jamais le nombre réel de caractères pouvant être saisis à la limite réelle que vous affichez comme maximum - c'est une zone sinistrée. Il est toujours bon de pouvoir terminer le flux de ce que vous voulez dire, puis de le modifier.
Le texte colorisé est excellent pendant le processus d'édition, car les commentaires sont là dans le contexte au lieu d'avoir à regarder le nombre. Dès qu'il revient en dessous de la limite - supprimez tous les bits rouges.
Jon W a parlé de Digsby - il suffit de le télécharger pour le vérifier - et voici une capture d'écran de l'application Twitter dans Digsby, qui change l'arrière-plan de l'excès de texte en rouge et le texte en blanc. C'est un bit dur à l'œil, mais le même principe fondamental écrit pour le changement de format de texte.
Comme d'habitude, c'est un compromis entre informer quelqu'un de la limite de caractères et ennuyer quelqu'un avec plus d'informations que nécessaire.
Je pense que la solution est de rendre les informations plus évidentes quand elles sont nécessaires, mais plus subtiles lorsqu'elles ne sont pas nécessaires. Il existe plusieurs façons de le faire, mais une que j'essaierais serait de modifier l'arrière-plan du champ et d'afficher uniquement le message d'erreur à ce moment-là. Les gens remarquent des changements quand ils ne sont pas très subtils.
Cependant ne limitez pas les gens à ne taper que 200 caractères (si c'est la limite). Laissez le type plus, puis éditez-le si c'est trop.
Une chose à considérer est que si c'est un champ où beaucoup de contenu sera entré (c'est-à-dire plus de 140 caractères), il est possible que l'utilisateur ait créé le contenu ailleurs et qu'il veuille le coller dans ce champ. Ne les empêchez pas de faire cela; leur permettre de coller le contenu, puis leur donner la possibilité de le modifier à la taille.
Vous pouvez envisager de modifier le style du texte de la zone de contenu afin qu'il change de couleur/contraste au fur et à mesure que vous vous rapprochez de la limite, plutôt que de ne passer au rouge qu'une fois la limite dépassée. De cette façon, l'utilisateur est averti qu'il approche de sa limite.
La première réponse est excellente, mais j'ai pensé partager une autre idée à ce sujet. Je serais ravi de savoir si d'autres pensent que cela est utilisable/une bonne idée, car je n'ai pas de recherche ou de données à l'appui:
Une barre colorée, à droite ou en bas, comme une "barre de progression", indique la quantité de texte relatif qui a été entrée. Il est vert jusqu'à un certain point, puis devient jaune lorsque la limite est proche, puis devient rouge lorsque la limite est atteinte. L'interface utilisateur émet un bip (mais une seule fois à chaque fois que la limite est atteinte). L'info-bulle change pour montrer que la limite de caractères a été dépassée et le "gribouillage d'erreur" standard (couleur différente du gribouillage de vérification orthographique) identifie les caractères qui dépassent la limite.
J'ai l'impression que c'est plus "ambiant" et ne prend pas autant d'espace sur l'écran ou l'attention des utilisateurs qu'une étiquette distincte.