Zones de texte

Notes

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos conseils de conception actuels.

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

Zone de texte classique.

Notes

Les instructions relatives à la disposition, aux polices et aux bulles sont présentées dans des articles distincts .

Est-ce le contrôle approprié ?

Pour vous décider, posez-vous les questions suivantes :

• Est-il pratique d’énumérer efficacement toutes les valeurs valides ? Dans ce cas, envisagez plutôt une liste à sélection unique, un affichage de liste, une liste déroulante, une liste déroulante modifiable ou un curseur .
• Les données valides sont entièrement sans contraintes ? Ou les données valides sont-elles limitées uniquement par le format (type de caractères ou de longueur contrainte) ? Si c’est le cas, utilisez une zone de texte.
• La valeur représente-t-elle un type de données auquel correspond un contrôle commun spécialisé ? Les exemples incluent la date, l’heure ou l’adresse IPv4 ou IPv6. Si c’est le 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 ? Si tel est le cas, utilisez un curseur.
  • L’utilisateur bénéficiera-t-il de commentaires instantanés sur l’effet de toute modification apportée aux paramètres ? Si c’est le 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 voir immédiatement l’effet des modifications apportées aux valeurs de teinte, de saturation ou de luminosité.

Principes de conception

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

• Vous pouvez éventuellement définir le nombre maximal de caractères.
• Vous pouvez éventuellement limiter 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 de rotation aux valeurs valides.

Mis à part leur longueur et la présence facultative d’un contrôle de rotation, les zones de texte n’ont pas d’indices visuels qui suggèrent les valeurs valides ou leur format. Cela signifie s’appuyer 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 contraint possible. Utilisez des contrôles sans contrainte 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é à États-Unis codes postaux n’est pas globalisé, mais une zone de texte non contrainte qui accepte n’importe quel format de code postal est.

Modèles d’usage

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

Étiquette	Valeur
Entrée de données Zone de texte monoligne sans contrainte utilisée pour entrer ou modifier des chaînes courtes.	Zone de texte monoligne sans contrainte.
Saisie de données mises 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. Note: 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.
Saisie de données assistée Zone de texte monoligne, sans contrainte utilisée pour entrer ou modifier des chaînes, associée à un bouton de commande qui aide les utilisateurs à sélectionner des valeurs valides.	Dans cet exemple, la commande Parcourir permet aux utilisateurs de sélectionner des valeurs valides.
Entrée textuelle Zone de texte multiligne sans contrainte utilisée pour entrer ou modifier des chaînes longues.	Zone de texte sans contrainte multiligne.
Entrée numérique Zone de texte à une seule ligne, numérique uniquement 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 du contrôle de rotation associé est appelée zone de rotation.
Mot de passe et entrée de code confidentiel Zone de texte monoligne et non contrainte utilisée pour entrer des mots de passe et des codes PIN de manière sécurisée.	Zone de texte utilisée pour entrer des mots de passe.
Sortie des données Zone de texte en lecture seule à une seule ligne, 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 être faites défiler (utile si les données sont plus larges que le contrôle), sélectionnées et copiées. Zone de texte en lecture seule d’une seule ligne utilisée pour afficher les données.
Sortie textuelle Zone de texte en lecture seule multiligne utilisée pour afficher des chaînes longues.	Zone de texte en lecture seule utilisée pour afficher les données.

Consignes

Général

• Lors de la désactivation d’une zone de texte, désactivez également les étiquettes, les étiquettes d’instruction, les contrôles de rotation et les boutons de commande associés.

• Utilisez la saisie semi-automatique pour aider les utilisateurs à entrer des données susceptibles d’être utilisées à plusieurs reprises. Les noms d’utilisateur, les adresses et les noms de fichiers sont des exemples. 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 PIN, des numéros carte de crédit ou des informations médicales.

• Ne faites pas défiler inutilement les utilisateurs. Si vous vous attendez à ce que les données soient plus volumineuses que la zone de texte et que vous pouvez facilement l’agrandir sans nuire à la disposition, dimensionner la zone pour éliminer le besoin de défilement.

  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 sur des zones de texte multilignes. Utilisez plutôt le défilement vertical et l’encapsulage de lignes.
  • Ne placez aucune barre de défilement dans les zones de texte d’une seule ligne.

• Pour l’entrée numérique, vous pouvez utiliser un contrôle de rotation. 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 changement de focus automatique peut surprendre les utilisateurs.

Zones de texte modifiables

• Limitez la longueur du texte d’entrée lorsque vous le 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’une grande variété 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:

  

  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 mise en forme est utilisé pour exiger un format spécifique.

  Meilleur:

  

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

• Tenez compte de la flexibilité du format lors du choix de la longueur d’entrée maximale. Par exemple, un nombre de carte de crédit valide peut utiliser jusqu’à 19 caractères, de sorte que le fait de limiter la longueur à quelque chose de plus court rend difficile l’entrée de nombres en utilisant les formats plus longs.

• N’utilisez pas le modèle d’entrée de données mise en forme si les utilisateurs sont plus susceptibles de coller des données longues et complexes. Réservez plutôt 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é, de sorte que les utilisateurs peuvent coller des adresses IPv6.

• Si les utilisateurs sont plus susceptibles d’entrer à nouveau la valeur entière, sélectionnez tout le texte sur le focus d’entrée. Si les utilisateurs sont plus susceptibles d’effectuer des modifications, placez le signe d’insertion à 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 l’insertion est placée à la fin du texte.

• Utilisez toujours une zone de texte multiligne 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, indiquez 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 inversement), des pourcentages au lieu de valeurs directes (ou inversement), et ainsi de suite.

  Correct :

  

  Dans cet exemple, l’unité est étiquetée, mais elle nécessite que les utilisateurs entrent des nombres décimaux.

  Mieux :

  

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

• Utilisez un contrôle de rotation 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 nombres importants. Utilisez des contrôles de rotation dans les cas suivants :

  • 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.

• Aligner le texte numérique à 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 correctement aligné à gauche.

• Toujours aligner à 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 case activée zones ou 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 zone de case activée 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 le vôtre. 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 système d’arrière-plan blanche pour un texte volumineux en lecture seule sur plusieurs lignes. Un arrière-plan blanc facilite la lecture du texte. Beaucoup 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 en lecture seule sur une seule ligne. La bordure est un indice visuel indiquant que le texte est modifiable.
• Ne désactivez pas les zones de texte en lecture seule sur une seule ligne. 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 si elles dépassent la taille de leurs limites.
• Ne définissez pas de taquet de tabulation sur une seule ligne, zone de texte en lecture seule, sauf si l’utilisateur a probablement besoin de faire défiler ou de 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 une entrée valide, vous devrez peut-être valider l’entrée et gérer les problèmes éventuels. 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 ne sont pas cohérentes avec les autres contrôles de la fenêtre, envoyez un message d’erreur lorsque l’entrée complète est terminée, par exemple lorsque les utilisateurs cliquent sur OK pour une boîte de dialogue modale.

N’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 confidentiels 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’elle obtient le focus d’entrée.

Invite classique.

Utilisez une invite dans les cas suivants :

• L’espace d’écran est tellement important que l’utilisation d’une étiquette ou d’une instruction n’est pas souhaitable, par exemple dans une barre d’outils.
• L’invite sert principalement à 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.

Lors de l’utilisation des invites :

• Dessinez le texte d’invite en gris italique et le texte d’entrée réel dans un noir normal. Le texte d’invite ne doit pas être confondu avec du texte réel.
• Gardez le texte d’invite concis. Vous pouvez utiliser des fragments au lieu de phrases complètes.
• Utilisez les majuscules comme pour les phrases.
• N’utilisez pas de ponctuation ou de points de suspension de fin.
• Le texte d’invite ne doit pas être modifiable et doit disparaître une fois que les utilisateurs cliquent dans la zone de texte ou l’onglet 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 probable la plus longue qu’ils entrent ou affichent.
• Incluez 30 % supplémentaires (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 des zones de texte multilignes 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 forme de mot ou d’expression, et non sous forme de phrase, se terminant par deux-points et à l’aide d’un texte statique.

  Exceptions :

  • Zones de texte avec des invites situées où l’espace est premium.

  • Pour l’étiquetage, un groupe de zones de texte utilisé pour l’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 à case activée zone et est introduite par son étiquette se terminant par un signe deux-points, ne placez pas d’étiquette supplémentaire sur la zone de texte.

  • Omettez les étiquettes de contrôle qui restèrent l’instruction main. Dans ce cas, l’instruction main 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’un restatage de l’instruction main.

    Mieux :

    

    Dans cet exemple, l’étiquette redondante étant supprimée, l’instruction main prend le signe deux-points et la clé d’accès.

• Attribuez une clé d’accès unique. Pour connaître les instructions d’attribution de touches d’accès, consultez Clavier.

• Utilisez les majuscules comme pour les phrases.

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

  Correct :

  

  

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

  Incorrect :

  

  

  Dans ces exemples incorrects, l’étiquette en haut s’aligne sur le texte dans la zone de texte, et l’étiquette à gauche s’aligne sur le haut 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 un nombre maximal de caractères arbitrairement faible, vous pouvez indiquer l’entrée maximale dans l’étiquette. La largeur de la zone de texte doit également indiquer la taille maximale.

  

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

• Ne placez pas le contenu de la zone de texte (ou 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éments est indiqué dans l’étiquette.

• Pour obtenir des instructions sur l’indication de l’entrée requise, consultez Entrée requise dans les 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 les majuscules comme pour les phrases.

• Les informations supplémentaires utiles, mais non nécessaires, doivent être brèves. 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

• Gardez le texte d’invite concis. Vous pouvez utiliser des fragments au lieu de phrases complètes.
• Utilisez les majuscules comme pour les phrases.
• N’utilisez pas de ponctuation ou de points de suspension de fin.
• Si l’invite invite les utilisateurs à 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 demander aux utilisateurs de 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 un typage ou un collage ; sinon, utilisez entrée si les utilisateurs peuvent placer des informations dans la zone de texte à l’aide d’autres moyens, par exemple en sélectionnant la valeur dans une liste ou en utilisant un bouton Parcourir.

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

• Utilisez le texte d’étiquette exact, y compris sa majuscule, et incluez la zone de mot. 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 d’un 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é. Laissez les utilisateurs découvrir d’autres formats par eux-mêmes. Vous souhaitez être flexible avec les formats de données, mais cela ne doit pas aboutir à une 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