Zones de texte

Avec une zone de texte, les utilisateurs peuvent afficher, entrer ou modifier un texte ou une valeur numérique.

Zone de texte classique.

C’est le bon contrôle ?

Pour décider, tenez compte de ces questions :

• Est-il pratique d’énumérer efficacement toutes les valeurs valides ? Si c’est le cas, considérez une liste de sélection unique , affichage de liste, liste déroulante, liste déroulante modifiable ou curseur à la place.
• Les données valides ne sont-elles pas complètement non contraintes ? Ou les données valides sont-elles limitées uniquement par format (longueur contrainte ou types de caractères) ? Dans ce cas, utilisez une zone de texte.
• La valeur représente-t-elle un type de données qui a un contrôle commun spécialisé ? Les exemples incluent la date, l’heure ou l’adresse IPv4 ou IPv6. Dans ce cas, utilisez le contrôle approprié, tel qu’un contrôle de date plutôt qu’une zone de texte.
• Si les données sont numériques :
  • Les utilisateurs perçoivent-ils le paramètre comme une quantité relative ? Dans ce cas, utilisez un curseur.
  • L’utilisateur bénéficie-t-il de commentaires instantanés sur l’effet de la définition des modifications ? Dans ce cas, utilisez un curseur, éventuellement avec une zone de texte. Par exemple, les utilisateurs peuvent facilement choisir une couleur à l’aide d’un curseur, car ils peuvent immédiatement voir l’effet des modifications apportées à la teinte, à la saturation ou aux valeurs de luminosité.

Concepts de conception

Bien que les zones de texte aient l’avantage d’être très flexibles, elles présentent l’inconvénient d’avoir des contraintes minimales. Les seules contraintes sur une zone de texte modifiable sont les suivantes :

• Vous pouvez éventuellement définir le nombre maximal de caractères.
• Vous pouvez éventuellement restreindre l’entrée aux caractères numériques (0 9) uniquement.
• Si vous utilisez un contrôle de rotation , vous pouvez limiter les choix de contrôle spin aux valeurs valides.

Outre leur longueur et la présence facultative d’un contrôle spin, les zones de texte n’ont aucun indice visuel qui suggère les valeurs valides ou leur format. Cela signifie qu’ils s’appuient sur des étiquettes pour transmettre ces informations aux utilisateurs. Si les utilisateurs entrent du texte non valide, vous devez gérer l’erreur avec un message d’erreur.

En règle générale, vous devez utiliser le contrôle le plus limité que vous pouvez. Utilisez des contrôles non entraînés comme des zones de texte en dernier recours. Cela dit, lorsque vous envisagez des contraintes, gardez à l’esprit les besoins des utilisateurs globaux. Par exemple, un contrôle qui est limité aux codes postal des États-Unis n’est pas globalisé, mais une zone de texte non contrainte qui accepte n’importe quel format de code postal est.

Modèles d’utilisation

Une zone de texte est un contrôle flexible avec plusieurs utilisations possibles.

Étiquette	Valeur
d’entrée de données Zone de texte monoligne et non contrainte utilisée pour entrer ou modifier des chaînes courtes.	Zone de texte monoligne et non contrainte.
d’entrée de données mise en forme Ensemble de zones de texte courtes, de taille fixe et monoligne utilisées pour entrer des données avec un format spécifique.	Zone de texte utilisée pour l’entrée de données mise en forme. Remarque : la fonctionnalité de sortie automatique avance automatiquement le focus d’entrée d’une zone de texte à l’autre. L’un des inconvénients de cette approche est que les données ne peuvent pas être copiées ou collées en tant qu’unité unique.
d’entrée de données assistées Zone de texte monoligne et non contrainte utilisée pour entrer ou modifier des chaînes, combinée à un bouton de commande qui permet aux utilisateurs de sélectionner des valeurs valides.	Dans cet exemple, la commande Parcourir permet aux utilisateurs de sélectionner des valeurs valides.
d’entrée textuelle Zone de texte multiligne et non contrainte utilisée pour entrer ou modifier des chaînes longues.	capture d’écran Zone de texte multiligne et non contrainte.
d’entrée numérique Zone de texte à une seule ligne et numérique utilisée pour entrer ou modifier des nombres, avec un contrôle de rotation facultatif pour faciliter l’entrée basée sur la souris.	Zone de texte utilisée pour l’entrée numérique. La combinaison d’une zone de texte et de son contrôle de rotation associé est appelée zone de rotation.
d’entrée de mot de passe et de code confidentiel Zone de texte monoligne et sans contrainte utilisée pour entrer des mots de passe et des codes CONFIDENTIELs en toute sécurité.	capture d’écran Zone de texte utilisée pour entrer des mots de passe.
de sortie de données Zone de texte en lecture seule, toujours affichée sans bordure, utilisée pour afficher des chaînes courtes.	Contrairement au texte statique, les données affichées à l’aide d’une zone de texte peuvent faire défiler (utiles si les données sont plus larges que le contrôle), sélectionnées et copiées. Zone de texte en lecture seule utilisée pour afficher les données.
sortie textuelle Zone de texte multiligne et en lecture seule utilisée pour afficher des chaînes longues.	capture d’écran Zone de texte en lecture seule utilisée pour afficher les données.

Lignes directrices

Généralités

• Lors de la désactivation d’une zone de texte, désactivez également les étiquettes associées, les étiquettes d’instructions, les contrôles spin et les boutons de commande.

• Utiliser la saisie semi-automatique pour aider les utilisateurs à entrer des données susceptibles d’être utilisées à plusieurs reprises. Par exemple, citons les noms d’utilisateur, les adresses et les noms de fichiers. Toutefois, n’utilisez pas la saisie semi-automatique pour les zones de texte qui peuvent contenir des informations sensibles, telles que des mots de passe, des codes CONFIDENTIELs, des numéros de carte de crédit ou des informations médicales.

• Ne faites pas défiler inutilement les utilisateurs. Si vous attendez que les données soient supérieures à la zone de texte et que vous pouvez facilement rendre la zone de texte plus grande sans nuire à la disposition, dimensionner la zone pour éliminer la nécessité de faire défiler.

  Incorrect :

  

  Dans cet exemple, la zone de texte doit être beaucoup plus longue pour gérer ses données.

• Barres de défilement :

  • Ne placez pas de barres de défilement horizontales dans des zones de texte à plusieurs lignes. Utilisez plutôt le défilement vertical et l’habillage de ligne.
  • Ne placez aucune barre de défilement dans les zones de texte à une seule ligne.

• Pour les entrées numériques, vous pouvez utiliser un contrôle spin. Pour une entrée textuelle, utilisez plutôt une liste déroulante ou une liste déroulante modifiable.

• N’utilisez pas la fonctionnalité de sortie automatique, à l’exception de l’entrée de données mise en forme. Le décalage automatique du focus peut surprendre les utilisateurs.

Zones de texte modifiables

• Limitez la longueur du texte d’entrée lorsque vous pouvez. Par exemple, si l’entrée valide est un nombre compris entre 0 et 999, utilisez une zone de texte numérique limitée à trois caractères. Toutes les parties des zones de texte qui utilisent une entrée de données mise en forme doivent avoir une longueur courte et fixe.

• Soyez flexible avec les formats de données. Si les utilisateurs sont susceptibles d’entrer du texte à l’aide d’un large éventail de formats, essayez de gérer tous les formats les plus courants. Par exemple, de nombreux noms, nombres et identificateurs peuvent être entrés avec des espaces facultatifs et une ponctuation, et la mise en majuscules n’a souvent pas d’importance.

• Si vous ne pouvez pas gérer les formats probables, exigez un format spécifique à l’aide d’une entrée de données mise en forme ou indiquez les formats valides dans l’étiquette.

  acceptable :

  d’entrée numérique

  Dans cet exemple, une zone de texte nécessite une entrée dans un format spécifique.

  Mieux :

  

  Dans cet exemple, le modèle d’entrée de données mis en forme est utilisé pour exiger un format spécifique.

  Best :

  

  Dans cet exemple, une zone de texte gère tous les formats probables.

• Envisagez de mettre en forme la flexibilité lors du choix de la longueur maximale d’entrée. Par exemple, un numéro de carte de crédit valide peut utiliser jusqu’à 19 caractères afin de limiter la longueur à tout ce qui est plus court, ce qui rend difficile d’entrer des numéros à l’aide des formats plus longs.

• N’utilisez pas le modèle d’entrée de données mis en forme si les utilisateurs sont plus susceptibles de coller des données longues et complexes. Au lieu de cela, réservez le modèle d’entrée de données mis en forme pour les situations où les utilisateurs sont plus susceptibles de taper les données.

  

  Dans cet exemple, le modèle d’entrée de données mis en forme n’est pas utilisé, afin que les utilisateurs puissent coller des adresses IPv6.

• Si les utilisateurs sont plus susceptibles de réentérer la valeur entière, sélectionnez tout le texte sur le focus d’entrée. Si les utilisateurs sont plus susceptibles de modifier, placez la touche à la fin du texte.

  

  Dans cet exemple, les utilisateurs sont plus susceptibles de remplacer que de modifier, de sorte que la valeur entière est sélectionnée sur le focus d’entrée.

  

  Dans cet exemple, les utilisateurs sont plus susceptibles d’ajouter des mots clés que de remplacer le texte, de sorte que le point d’insertion est placé à la fin du texte.

• Toujours utiliser une zone de texte à plusieurs lignes si les caractères de nouvelle ligne sont des entrées valides.

• Lorsque la zone de texte concerne un fichier ou un chemin d’accès, fournissez toujours un bouton Parcourir.

Zones de texte numériques

• Choisissez l’unité la plus pratique et étiquetez les unités. Par exemple, envisagez d’utiliser des millilitres au lieu de litres (ou vice versa), des pourcentages plutôt que des valeurs directes (ou vice versa), etc.

  correct :

  

  Dans cet exemple, l’unité est étiquetée, mais les utilisateurs doivent entrer des nombres décimaux.

  Mieux :

  

  Dans cet exemple, la zone de texte utilise une unité plus pratique.

• Utilisez un contrôle spin chaque fois qu’il est utile. Toutefois, parfois, les contrôles de rotation ne sont pas pratiques, par exemple lorsque les utilisateurs doivent entrer de nombreux grands nombres. Utilisez des contrôles spin quand :

  • L’entrée est susceptible d’être un petit nombre, généralement inférieur à 100.
  • Les utilisateurs sont susceptibles d’apporter une petite modification à un nombre existant.
  • Les utilisateurs sont plus susceptibles d’utiliser la souris que le clavier.

• texte numérique aligné à droite chaque fois que :

  • Il existe plusieurs zones de texte numériques.
  • Les zones de texte sont alignées verticalement.
  • Les utilisateurs sont susceptibles d’ajouter ou de comparer les valeurs.

  correct :

  

  Dans cet exemple, le texte numérique est aligné à droite pour faciliter la comparaison des valeurs.

  Incorrect :

  

  Dans cet exemple, le texte numérique est aligné de manière incorrecte à gauche.

• aligner toujours avec la droite les valeurs monétaires.

• N’affectez pas de significations spéciales à des valeurs numériques spécifiques, même si ces significations spéciales sont utilisées en interne par votre application. Utilisez plutôt des cases à cocher ou des cases d’option pour une sélection explicite de l’utilisateur.

  Incorrect :

  

  Dans cet exemple, la valeur -1 a une signification particulière.

  correct :

  

  Dans cet exemple, une case à cocher rend l’option explicite.

Entrée de mot de passe et de code confidentiel

• Utilisez toujours le contrôle commun de mot de passe au lieu de créer votre propre mot de passe. Les mots de passe et les codes CONFIDENTIELs nécessitent un traitement spécial pour être gérés en toute sécurité.

Pour plus d’instructions et d’exemples, consultez bulles.

Sortie textuelle

• Envisagez d’utiliser la couleur du système d’arrière-plan blanc pour le texte en lecture seule volumineux et multiligne. Un arrière-plan blanc facilite la lecture du texte. Un grand nombre de texte sur un arrière-plan gris décourage la lecture.

Pour plus d’informations sur les couleurs d’arrière-plan, consultez polices.

Sortie des données

• N’utilisez pas de bordure pour les zones de texte à une seule ligne et en lecture seule. La bordure est un indice visuel indiquant que le texte est modifiable.
• Ne désactivez pas les zones de texte à ligne unique et en lecture seule. Cela empêche les utilisateurs de sélectionner et de copier le texte dans le Presse-papiers. Il empêche également les utilisateurs de faire défiler les données s’ils dépassent la taille de ses limites.
• Ne définissez pas d’taquet de tabulation sur une seule ligne, zone de texte en lecture seule, sauf si l’utilisateur doit probablement faire défiler ou copier le texte.

Validation d’entrée et gestion des erreurs

Étant donné que les zones de texte ne sont généralement pas contraintes d’accepter uniquement les entrées valides, vous devrez peut-être valider l’entrée et gérer les problèmes. Validez les différents types de problèmes d’entrée comme suit :

• Si l’utilisateur entre un caractère qui n’est pas valide, ignorez le caractère et affichez une bulle de problème d’entrée qui explique les caractères valides.

  

  Dans cet exemple, une bulle signale un caractère d’entrée incorrect.

• Si les données d’entrée ont une valeur ou un format qui n’est pas valide, affichez une bulle de problème d’entrée lorsque la zone de texte perd le focus d’entrée.

• Si les données d’entrée sont incohérentes avec d’autres contrôles de la fenêtre, indiquez un message d’erreur lorsque l’entrée entière est terminée, par exemple lorsque les utilisateurs cliquent sur OK pour une boîte de dialogue modale.

Ne effacez pas les données d’entrée non valides, sauf si les utilisateurs ne sont pas en mesure de corriger facilement les erreurs. Cela permet aux utilisateurs de corriger les erreurs sans recommencer. Par exemple, vous devez effacer les mots de passe et les codes CONFIDENTIEL incorrects, car les utilisateurs ne peuvent pas les corriger facilement.

Pour plus d’instructions et d’exemples, consultez Messages d’erreur et Bulles.

Invites

Une invite est une étiquette ou une instruction courte placée à l’intérieur d’une zone de texte comme valeur par défaut. Contrairement au texte statique, les invites disparaissent de l’écran une fois que les utilisateurs tapent quelque chose dans la zone de texte ou qu’il obtient le focus d’entrée.

de recherche

Une invite classique.

Utilisez une invite quand :

• L’espace d’écran se trouve à une telle prime que l’utilisation d’une étiquette ou d’une instruction n’est pas souhaitable, comme dans une barre d’outils.
• L’invite est principalement destinée à identifier l’objectif de la zone de texte de manière compacte. Il ne doit pas s’agir d’informations cruciales que l’utilisateur doit voir lors de l’utilisation de la zone de texte.

N’utilisez pas d’invites simplement pour diriger les utilisateurs à taper quelque chose ou cliquer sur des boutons. Par exemple, n’écrivez pas de texte d’invite indiquant Entrer un nom de fichier, puis cliquez sur Envoyer.

Lorsque vous utilisez des invites :

• Dessinez le texte d’invite en gris italique et le texte d’entrée réel en noir normal. Le texte d’invite ne doit pas être confondu avec le texte réel.
• Conservez le texte d’invite concis. Vous pouvez utiliser des fragments au lieu de phrases complètes.
• Utilisez la mise en majuscules de style phrase.
• N’utilisez pas de ponctuation de fin ou de points de suspension.
• Le texte d’invite ne doit pas être modifiable et doit disparaître une fois que les utilisateurs cliquent sur ou tabulation dans la zone de texte.
  • Exception : Si la zone de texte a le focus d’entrée par défaut, l’invite s’affiche et disparaît une fois que l’utilisateur commence à taper.
• Le texte d’invite est restauré si la zone de texte est toujours vide lorsqu’elle perd le focus d’entrée.

Dimensionnement et espacement recommandés

Dimensionnement et espacement recommandés pour les zones de texte.

La largeur d’une zone de texte est un indice visuel de la taille d’entrée attendue. Lors du dimensionnement des zones de texte :

• Choisissez une largeur appropriée pour les données valides les plus longues. Dans la plupart des cas, les utilisateurs ne doivent pas avoir à faire défiler la chaîne la plus longue probable qu’ils entrent ou affichent.
• Inclure un supplémentaire de 30 % (jusqu’à 200 % pour le texte plus court) pour tout texte (mais pas les nombres) qui sera localisé.
• Si l’entrée attendue n’a pas de taille particulière, choisissez une largeur cohérente avec les autres zones de texte ou contrôles de la fenêtre.
• Dimensionner les zones de texte à plusieurs lignes pour afficher un nombre intégral de lignes de texte.

Étiquettes

Étiquettes de zone de texte

• Toutes les zones de texte ont besoin d’étiquettes. Écrivez l’étiquette sous la forme d’un mot ou d’une expression, et non comme une phrase, se terminant par un signe deux-points et en utilisant texte statique.

  exceptions :

  • Zones de texte avec des invites situées où se trouve l’espace à un niveau premium.

  • Pour l’étiquetage, un groupe de zones de texte utilisées pour entrée de données mise en forme doit être traité comme une seule zone de texte.

  • Si une zone de texte est subordonnée à une case d’option ou à une case à cocher, et qu’elle est introduite par son étiquette se terminant par un signe deux-points, ne placez pas d’étiquette supplémentaire dans la zone de texte.

  • Omettez les étiquettes de contrôle qui restèrent l’instruction principale. Dans ce cas, l’instruction principale prend le signe deux-points (sauf s’il s’agit d’une question) et la clé d’accès.

    acceptable :

    

    Dans cet exemple, l’étiquette de zone de texte n’est qu’une restaération de l’instruction principale.

    Mieux :

    

    Dans cet exemple, l’étiquette redondante est supprimée. Par conséquent, l’instruction principale prend le signe deux-points et la clé d’accès.

• Attribuez une clé d’accès unique. Pour obtenir des instructions sur l’attribution de touches d’accès, consultez clavier .

• Utilisez la mise en majuscules de style phrase.

• Positionnez l’étiquette à gauche ou au-dessus de la zone de texte, puis alignez l’étiquette avec le bord gauche de la zone de texte. Si l’étiquette se trouve à gauche, alignez verticalement le texte de l’étiquette avec le texte de la zone de texte.

  correct :

  

  

  Dans ces exemples, l’étiquette en haut s’aligne sur le bord gauche de la zone de texte, et l’étiquette sur la gauche s’aligne avec le texte de la zone de texte.

  Incorrect :

  

  

  Dans ces exemples incorrects, l’étiquette en haut s’aligne sur le texte de la zone de texte et l’étiquette située à gauche s’aligne sur la partie supérieure de la zone de texte.

• Vous pouvez spécifier des unités (par exemple, des secondes ou des connexions) entre parenthèses après l’étiquette.

• Si une zone de texte accepte arbitrairement un petit nombre de caractères, vous pouvez indiquer l’entrée maximale dans l’étiquette. La largeur de la zone de texte doit également suggérer la taille maximale.

  capture d’écran

  Dans cet exemple, l’étiquette donne le nombre maximal de caractères.

• Ne placez pas le contenu de la zone de texte (ou de son étiquette d’unités) dans une phrase, car cela n’est pas localisable.

• Si la zone de texte peut être utilisée pour entrer plusieurs éléments, indiquez clairement comment séparer les éléments de l’étiquette.

  

  Dans cet exemple, le séparateur d’élément est donné dans l’étiquette.

• Pour obtenir des instructions sur l’indication de l’entrée requise, consultez Entrée requise dans boîtes de dialogue.

Étiquettes d’instructions

• Si vous devez ajouter du texte d’instruction sur une zone de texte, ajoutez-le au-dessus de l’étiquette. Utilisez des phrases complètes avec une ponctuation de fin.

• Utilisez la mise en majuscules de style phrase.

• Des informations supplémentaires utiles, mais non nécessaires, doivent être conservées rapidement. Placez ces informations entre parenthèses entre l’étiquette et le signe deux-points, ou sans parenthèses sous la zone de texte.

  

  Dans cet exemple, des informations supplémentaires sont placées sous la zone de texte.

Étiquettes d’invite

• Conservez le texte d’invite concis. Vous pouvez utiliser des fragments au lieu de phrases complètes.
• Utilisez la mise en majuscules de style phrase.
• N’utilisez pas de ponctuation de fin ou de points de suspension.
• Si l’invite indique aux utilisateurs d’entrer des informations qui seront appliquées par un bouton en regard de la zone de texte, placez simplement le bouton en regard de la zone de texte. N’utilisez pas l’invite pour diriger les utilisateurs à cliquer sur le bouton (par exemple, n’écrivez pas de texte d’invite indiquant, faites glisser un fichier, puis cliquez sur Envoyer).

Documentation

Lorsque vous faites référence à des zones de texte :

• Utilisez le type pour faire référence aux interactions utilisateur qui nécessitent une saisie ou un collage ; sinon, utilisez entrée si les utilisateurs peuvent placer des informations dans la zone de texte à l’aide d’autres moyens, tels que la sélection de la valeur dans une liste ou l’utilisation d’un bouton Parcourir.

• Utilisez cette option pour faire référence à une entrée dans une zone de texte en lecture seule.

• Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule et incluez la zone de mots. N’incluez pas le trait de soulignement ou le signe deux-points de la clé d’accès. Ne faites pas référence à une zone de texte en tant que zone de texte ou champ.

• Lorsque cela est possible, mettez en forme l’étiquette à l’aide du texte en gras. Sinon, placez l’étiquette entre guillemets uniquement si nécessaire pour éviter toute confusion.

  Exemple : tapez votre mot de passe dans la zone Mot de passe, puis cliquez sur OK.

• Si la zone de texte nécessite un format spécifique, documentez uniquement le format acceptable le plus couramment utilisé. Permettre aux utilisateurs de découvrir tous les autres formats eux-mêmes. Vous souhaitez être flexible avec les formats de données, mais cela ne doit pas entraîner de documentation complexe.

  correct :

  Entrez le numéro de série du composant au format 1234-56-7890.

  Incorrect :

  Entrez le numéro de série du composant à l’aide de l’un des formats suivants :

  1234567890

  1234-56-7890

  1234 56 7890