Recommandations en matière de dispositions de formulaire

Applies to Windows and Windows Phone

Concevez des formulaires qui assurent une expérience tactile agréable, optimisent l’utilisation de l’espace de l’écran et réduisent le besoin de panoramique/défilement dans votre 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

Pratiques conseillées et déconseillées

  • Utilisez une disposition de formulaire appropriée pour le contenu et l’application.
  • Utilisez le même style de positionnement des étiquettes pour tous les contrôles d’un formulaire.
  • Utilisez du texte d’espace réservé inséré lorsque le contenu du formulaire est simple et aisément compréhensible.
  • N’utilisez pas plusieurs colonnes en présence d’un mouvement panoramique vertical étendu.
  • Ne placez pas les étiquettes à gauche lorsque la longueur des étiquettes varie beaucoup.
  • Ne lancez pas automatiquement le clavier tactile (sans entrée tactile).

Indications d’utilisation supplémentaires

Lorsque vous concevez un formulaire et la disposition du contrôle, pensez à la façon dont vous voulez que l’utilisateur remplisse le formulaire et aux effets produits par le mouvement panoramique/défilement. Veillez à tenir compte également de l’impact du clavier tactile (il peut utiliser jusqu’à 50 % de l’écran en orientation paysage) et des notifications d’erreurs en ligne, le cas échéant.

Dispositions à colonne unique

Utilisez une disposition à colonne unique pour votre formulaire quand :

  • vous voulez encourager les utilisateurs à remplir le formulaire dans un ordre spécifique ;
  • le formulaire s’étend sur plusieurs pages ;
  • l’application est redimensionnée à une taille étroite et haute ;
  • l’application affiche d’autres notes et informations, instructions ou personnalisations et publicités.

Voici un exemple de formulaire court qui utilise une disposition à colonne unique :

Formulaire court avec une disposition à colonne unique

Voici un exemple de formulaire plus long qui utilise une disposition à colonne unique :

Formulaire plus long avec une disposition à colonne unique

Au lieu d’essayer de faire entrer de nombreux contrôles dans un seul formulaire très long, envisagez de scinder la tâche en groupes ou en une séquence de plusieurs formulaires. Voici un exemple de formulaire plus long qui est divisé en groupes :

Formulaire plus long divisé en groupes

Voici un exemple de formulaire plus long qui est réparti sur plusieurs pages :

Formulaire plus long divisé en groupes

Voici un exemple de formulaire qui utilise une disposition à colonne unique, car l’interface utilisateur contient des notes et informations supplémentaires :

Formulaire contenant des notes et informations supplémentaires

Quand utiliser des dispositions à deux colonnes

Utilisez une disposition à deux colonnes pour les formulaires courts avec mouvement panoramique vertical limité. La disposition à deux colonnes optimise l’utilisation de l’espace de l’écran dans une orientation paysage. N’oubliez pas de réserver un grand espace de gouttière entre les deux colonnes.

Voici un exemple de formulaire qui utilise deux colonnes :

Formulaire utilisant deux colonnes

N’utilisez pas plusieurs colonnes en présence d’un mouvement panoramique vertical étendu. Pour remplir le formulaire, l’utilisateur doit atteindre le bas de la première colonne, accéder à la partie supérieure de la deuxième colonne, puis descendre à nouveau. Cette expérience devient encore plus difficile si le clavier tactile est affiché.

Voici un exemple de formulaire qui utilise deux colonnes de façon inappropriée :

Formulaire utilisant deux colonnes de façon inappropriée

Quand utiliser trois colonnes ou plus

Utilisez trois colonnes ou plus pour optimiser l’utilisation de l’espace de l’écran visible dans une orientation paysage. Cette disposition fonctionne bien dans les écrans panoramiques fixes ou horizontaux, mais s’avère délicate dans les écrans panoramiques verticaux. Utilisez cette disposition uniquement quand l’ordre de saisie n’est pas important.

Formulaire utilisant trois colonnes

Positionnement des étiquettes

La plupart des contrôles ont besoin d’une étiquette.

  • Placez les étiquettes au-dessus ou à gauche d’un contrôle.
  • Utilisez le même style de positionnement des étiquettes pour tous les contrôles d’un formulaire.

Quand utiliser le positionnement supérieur des étiquettes

En général, positionnez les étiquettes au-dessus des contrôles. Lorsque vous utilisez une disposition à plusieurs colonnes pour un formulaire, positionnez toujours les étiquettes au-dessus des contrôles.

Le positionnement des étiquettes au-dessus des contrôles permet d’établir la relation entre une étiquette et son contrôle, ainsi que de créer une disposition nette, puisque toutes les étiquettes et tous les contrôles peuvent être alignés à gauche. Le positionnement des étiquettes au-dessus des contrôles permet de mieux présenter les chaînes longues, tout en facilitant par ailleurs la gestion des problèmes liés à la localisation et à l’accessibilité.

Voici deux exemples de positionnement supérieur des étiquettes.

Formulaire où les étiquettes sont positionnées au-dessus de leurs contrôles

Quand utiliser le positionnement à gauche des étiquettes

Dans les formulaires à colonne unique où l’espace vertical doit être conservé, positionnez les étiquettes à gauche des contrôles quand :

  • Les chaînes d’étiquette sont courtes et environ de la même longueur.
  • Il existe suffisamment d’espace horizontal pour la chaîne d’étiquette la plus longue (dans tous les paramètres régionaux).

Voici un exemple de formulaire qui utilise un positionnement à gauche des étiquettes.

Formulaire utilisant un positionnement à gauche des étiquettes

Ne placez pas les étiquettes à gauche lorsque la longueur des étiquettes varie beaucoup, car certaines étiquettes peuvent alors être trop éloignées de leurs contrôles.

Formulaire utilisant un positionnement à gauche des étiquettes de manière inappropriée

N’utilisez pas le positionnement à gauche des étiquettes dans les dispositions de formulaire à plusieurs colonnes. Les étiquettes elles-mêmes peuvent ressembler à une colonne distincte.

Formulaire utilisant un positionnement à gauche des étiquettes de manière inappropriée

Texte d’espace réservé inséré

Parfois, vous pouvez simplifier votre disposition en utilisant du texte d’espace réservé inséré plutôt que des étiquettes. Utilisez du texte d’espace réservé inséré quand :

  • le modèle de formulaire est largement compris par le grand public (par exemple, un contrôle de connexion d’utilisateur ou un champ d’entrée de mot de passe) ;
  • l’étiquette est facilement suggérée ou interprétée une fois que les données ont été entrées dans le champ d’entrée (puisque le texte de la consigne disparaît une fois les données entrées) ;
  • il existe un nombre limité de champs d’entrée.

Voici un exemple de formulaire qui utilise du texte d’espace réservé inséré :

Formulaire utilisant du texte d’espace réservé inséré

Positionnement des boutons

Alignez les boutons de formulaire à droite, sauf quand plusieurs boutons sont incorporés dans d’autres contrôles. Pour qu’un formulaire semble plus homogène, les boutons doivent être alignés sur ces autres contrôles. Par exemple, dans l’écran Paramètres du PC, les boutons incorporés sont alignés à gauche :

Écran Paramètres du PC avec les boutons alignés à gauche

Pour plus d’informations sur le positionnement des boutons, voir Recommandations en matière de boutons.

Focus et navigation

Le contrôle avec lequel un utilisateur est en train d’interagir dans le formulaire a le focus. L’utilisateur peut utiliser la touche de tabulation du clavier pour parcourir les contrôles du formulaire, notamment ceux qui ne sont pas dans l’affichage actuel. Assurez-vous que la région panoramique contenant le contrôle actif défile automatiquement afin de faire apparaître la totalité du contrôle. Vous devez laisser au minimum 30 pixels entre le contrôle qui a le focus et le bord de l’écran ou le haut du clavier tactile (s’il est visible) pour tenir compte des divers mouvements/actions de l’interface utilisateur partant des bords de l’écran et de la barre de redimensionnement du texte sélectionné.

Formulaire avec et sans clavier tactile apparent

Dans certains cas, il existe des éléments d’interface utilisateur qui doivent rester tout le temps à l’écran. Concevez l’interface utilisateur de sorte que les contrôles de formulaire se trouvent dans une région panoramique et que les éléments d’interface utilisateur importants soient statiques. Par exemple :

Formulaire qui contient des zones devant toujours rester affichées

Apparition et disparition du clavier tactile

Si aucun clavier physique n’est détecté, le clavier tactile apparaît quand l’utilisateur appuie sur un champ de texte d’entrée. Ne laissez pas votre application lancer automatiquement le clavier tactile sans cette interaction.

Le clavier disparaît de deux manières :

  • L’utilisateur complète et envoie le formulaire, puis quitte l’affichage.
  • L’utilisateur masque le clavier via la touche appropriée.

Le clavier tactile ne disparaît pas automatiquement tant que l’utilisateur parcourt les contrôles dans un formulaire.

Pour plus d’informations, voir Recommandations en matière de clavier tactile et de volet d’écriture manuscrite.

Exemples de disposition

Voici un exemple de formulaire d’inscription qui suit les recommandations présentées dans ce document :

Formulaire d’inscription

Voici les tailles recommandées pour différents éléments, avec les instructions d’espacement :

Dimensionnement et espacement pour le formulaire d’inscription

Rubriques associées

Pour les concepteurs
Recommandations en matière de boutons
Recommandations en matière de clavier tactile et de volet d’écriture manuscrite

 

 

Afficher:
© 2014 Microsoft