Recommandations en matière de saisie de texte (applications du Windows Store)

Suivez ces recommandations pour ajouter des contrôles de saisie de texte dans une application du Windows Store.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interaction utilisateur : entrée tactile... et plus encore.

Est-ce le contrôle approprié ?

Les contrôles de saisie de texte permettent aux utilisateurs d’entrer et de modifier un texte ou une valeur numérique. Lorsque vous envisagez l’utilisation d’un contrôle de saisie de texte, considérez les points ci-dessous.

  • Toutes les valeurs valides peuvent-elles être facilement dénombrées ? Si c’est le cas, envisagez plutôt d’utiliser l’un des contrôles de sélection.
  • Les données valides sont-elles totalement sans contraintes ? Ou sont-elles contraintes uniquement par le format (contraintes de longueur ou de types de caractères) ? Si c’est le cas, utilisez un contrôle de saisie de texte.
  • La valeur représente-t-elle un type de données auquel correspond un contrôle courant spécialisé ? Si c’est le cas, utilisez le contrôle approprié plutôt que le contrôle de saisie de texte. Utilisez, par exemple, un contrôle DatePicker plutôt qu’un contrôle de saisie de texte pour les saisies de date.
  • Si les données sont numériques :
    • L’utilisateur perçoit-il le paramètre comme étant une quantité relative ? Si c’est le cas, utilisez un curseur.
    • L’utilisateur bénéficiera-t-il du résultat instantané des modifications de ses paramètres ? Si c’est le cas, utilisez un curseur accompagné éventuellement d’un contrôle correspondant.

Il existe des contrôles de saisie de texte d’une ligne et de plusieurs lignes. La section qui suit indique quand utiliser les contrôles de saisie de texte d’une ligne, tandis que les sections ultérieures s’attachent aux contrôles de saisie de texte de plusieurs lignes.

Choix du contrôle de saisie de texte d’une ligne approprié

Pour les chaînes de texte courtes, utilisez un contrôle de saisie de texte d’une ligne. Ce tableau indique quand utiliser les différents types de contrôles de saisie de texte.

Saisie de données élémentaires

Utilisez des contrôles de saisie de texte d’une ligne pour recueillir de petits éléments de texte.

L’exemple suivant montre une zone de texte d’une ligne destinée à saisir une réponse à une question de sécurité. La réponse devant être brève, il convient d’utiliser ici une zone de texte d’une ligne. L’information collectée ne correspondant à aucun des types de saisie spécialisés reconnus dans Windows, le type de contrôle générique "Text" est approprié.

Saisie de données élémentaires

Entrée de données formatées

Utilisez un ensemble de contrôles de saisie de texte d’une ligne courts et de taille fixe pour entrer des données ayant un format spécifique.

Entrée de données formatées

Saisie de données assistée

Utilisez un contrôle de saisie de texte d’une ligne sans contraintes pour entrer ou modifier des chaînes, en association avec un bouton de commande qui permette aux utilisateurs de sélectionner les valeurs valides.

Saisie de données assistée

Saisie de valeurs numériquesUtilisez un contrôle de saisie de chiffres d’une ligne pour entrer ou modifier des nombres.
Saisie de mots de passe et codes confidentiels

Utilisez un contrôle de saisie de mot de passe d’une ligne pour entrer les mots de passe et codes confidentiels en toute sécurité.

Saisie de mots de passe et codes confidentiels
Saisie du courrier électronique

Utilisez le contrôle de saisie de courrier électronique d’une ligne pour entrer une adresse électronique.

Saisie du courrier électronique

Lorsque vous utilisez un contrôle de saisie de courrier électronique, vous obtenez automatiquement ceci :

  • Lorsque l’utilisateur accède à la zone de texte, le clavier tactile s’affiche avec les touches tactiles spécifiques à la saisie d’un e-mail.
  • Lorsque l’utilisateur entre un format d’e-mail incorrect, une boîte de dialogue s’affiche pour l’avertir. Saisie du courrier électronique
Saisie d’URLUtilisez le contrôle de saisie d’URL pour entrer les adresses de sites Web.
Saisie de numéros de téléphoneUtilisez le contrôle de saisie de numéros de téléphone pour entrer les numéros de téléphone.

 

Pratiques conseillées et déconseillées concernant les zones de saisie d’une ligne

Pratiques conseillées

Utilisez plusieurs zones de texte d’une ligne pour saisir plusieurs petits éléments de texte. Si les zones de texte sont de nature apparentée, il convient de les regrouper.

Prévoyez un texte d’espace réservé dans vos zones de texte d’une ligne, si vous pensez que les utilisateurs ont besoin d’instructions complémentaires pour entrer une valeur.

Faites en sorte que la taille de vos zones de texte d’une ligne soit légèrement supérieure à l’entrée la plus longue prévue. Si le contrôle devient trop grand, divisez-le en deux ; par exemple, une adresse peut être divisée en utilisant les valeurs "Ligne d’adresse 1" et "Ligne d’adresse 2".

Définissez une longueur maximale. Si la source de données de sauvegarde n’autorise pas les chaînes de saisie longues, limitez la saisie et utilisez une fenêtre contextuelle de validation pour indiquer à l’utilisateur qu’il a atteint la limite.

Pratiques déconseillées

N’utilisez pas l’élément textarea ayant une hauteur de ligne égale à 1 pour créer une zone de texte d’une ligne. Utilisez plutôt l’élément input type=text.

N’utilisez pas de texte d’espace réservé pour pré-remplir le contrôle de texte. Les zones de texte effacent les textes d’espace réservé lorsque l’utilisateur utilise le contrôle. Utilisez plutôt l’attribut "value".

N’utilisez pas une zone de texte comme zone de recherche. Dans les pages Web, il est fréquent de recourir à un élément input pour créer une zone de recherche. Toutefois, vous créez une expérience bien plus agréable et plus solide en utilisant l’icône Rechercher. L’icône Rechercher offre une expérience de recherche rigoureuse qui peut être intégrée à votre application. Pour plus d’informations, voir Ajout de la recherche.

Ne placez pas un autre contrôle juste à côté d’une zone de saisie de mot de passe. La zone de saisie de mot de passe contient un bouton d’affichage du mot de passe pour permettre à l’utilisateur de vérifier le mot de passe qu’il a saisi. La présence d’un autre contrôle juste à côté pourrait amener les utilisateurs à afficher leur mot de passe par erreur en tentant d’interagir avec un autre contrôle. Pour empêcher que ceci se produise, laissez suffisamment d’espace entre la zone de saisie du mot de passe et l’autre contrôle ou placez ce dernier sur la ligne suivante.

 

Choix du contrôle de saisie de texte de plusieurs lignes approprié

Lorsque les utilisateurs ont besoin d’entrer ou de modifier de longues chaînes, utilisez un contrôle de saisie de texte de plusieurs lignes. Il existe deux types de contrôle de saisie de texte de plusieurs lignes : le contrôle de saisie de texte brut (l’élément textarea) et le contrôle de texte enrichi (un élément tel qu’un objet div, dont l’attribut contenteditable est défini sur « true »).

  • Si l’objectif principal de la zone de texte de plusieurs lignes est de créer des documents (par exemple les entrées d’un blog ou le contenu d’un message électronique) et si ces documents nécessitent du texte enrichi, utilisez une zone de texte enrichi.
  • Si vous voulez permettre aux utilisateurs de mettre en forme leur texte, utilisez une zone de texte enrichi.
  • Pour saisir du texte qui sera uniquement consommé et ne sera pas à nouveau présenté aux utilisateurs, utilisez un contrôle de zone de texte brut. Supposons par exemple que vous avez une enquête ; l’utilisateur remplit l’enquête, les données sont envoyées à un serveur et l’utilisateur ne les revoit plus jamais. Il n’est généralement pas nécessaire de permettre aux utilisateurs de mettre en forme ce type de texte.
  • Pour les autres cas de figure, utilisez un contrôle de saisie de texte brut.

Pratiques conseillées et déconseillées concernant les contrôles de saisie de texte sur plusieurs lignes

Pratiques conseilléesLorsque vous créez une zone de texte enrichi, proposez des boutons de mise en forme et implémentez leurs actions. (Les applications du Windows Store en JavaScript ne fournissent pas ces contrôles automatiquement. )
Utilisez une police qui s’harmonise avec l’apparence de votre application.
Faites en sorte que la hauteur du contrôle de texte soit suffisante pour loger les entrées classiques.

Pour la saisie de textes longs pour lesquels l’utilisateur est limité par un nombre de mots ou de caractères, utilisez une zone de texte brut et ajoutez un compteur en temps réel pour afficher le nombre de caractères ou de mots restants. Vous devez créer le compteur vous-même ; placez-le à côté de la zone de texte et mettez-le à jour de manière dynamique à mesure que l’utilisateur entre chaque mot ou caractère.

Texte long

Pratiques déconseilléesNe laissez pas les contrôles de saisie de texte s’allonger en hauteur lorsque les utilisateurs entrent le texte.
N’utilisez pas de zones de texte à plusieurs lignes lorsque les utilisateurs n’ont besoin que d’une ligne.
N’utilisez pas de contrôle de texte enrichi si un texte brut est approprié.

 

Rubriques associées

Recommandations en matière de vérification orthographique

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.