L'alignement des labels de terrain et le problème de l'internationalisation
Le problème i18n
Lors de la conception d'une application internationalisée, certains problèmes de faisabilité se heurtent à des problèmes d'UX. Voici celle qui me vient à l'esprit.
Pour tenir compte de la longueur variable du texte, j'ai toujours pris le modèle "étiquette alignée au-dessus". Je n'aime pas cette conception du point de vue de l'utilisabilité. Vous devez appliquer un espace blanc avec soin pour éviter toute confusion, mais lorsqu'il est bien conçu, il fonctionne bien.
Mais que faire si je veux essayer quelque chose de différent? Jetez un œil à cet exemple anglais/français.
Si vous avez essayé ceci dans un produit i18n ou avez vu un chemin alternatif réussi:
Y a-t-il des problèmes UX avec l'extension de l'immobilier de label à un côté du champ?
Existe-t-il des stratégies de conception pour éviter ces écueils?
Dois-je simplement m'en tenir à ma solution ennuyeuse et sûre et me réjouir du fait que je pourrais traduire en ouzbek si je le voulais?
Clarification de l'intention: je veux avant tout valider que je ne prends pas d'options raisonnables et utilisables sur la table par pure habitude.
Je suis juste confus à propos de votre déclaration selon laquelle les étiquettes de formulaire ci-dessus fournissent des problèmes d'utilisation car les études d'utilisabilité ont montré que plus une étiquette de formulaire est proche du champ de formulaire, plus elle est rapide à remplir. Pour citer cet article
Ainsi, nous n'avons pas été surpris lorsque nous avons remarqué que la plupart des fixations se trouvaient directement sur les champs de saisie plutôt que sur les étiquettes, comme le montrent les données d'eye-tracking de la figure 3.
Figure 3 - Test des étiquettes alignées à gauche au-dessus des champs de saisie
Placer une étiquette juste au-dessus de son champ de saisie a permis aux utilisateurs de capturer les deux éléments avec un seul mouvement des yeux. De plus, si une étiquette indiquait des données très familières aux utilisateurs - par exemple, leur prénom ou leur nom de famille - les utilisateurs ne fixaient pas l'étiquette séparément pour les lire. Ils ont pu visualiser à la fois l'étiquette et le champ de saisie dans la même zone fovéale; éliminant ainsi le besoin de fixations et de saccades supplémentaires.
Je recommande également de consulter cet article The Definitive Guide to Form Label Positioning pour une comparaison exhaustive des différentes méthodes d'étiquetage et des avantages et inconvénients. Un point culminant est cette matrice de décision:
Venons-en maintenant à la localisation des étiquettes de formulaire
Comme Vitaly l'a souligné, les étiquettes supérieures et alignées à gauche fonctionneraient, le fait que les mêmes phrases aient des longueurs différentes dans différentes langues ferait que l'alignement de votre formulaire serait totalement désynchronisé, ce qui pourrait donner l'impression d'une forme discontinue et cassée. conception. Pour citer cet article sur la localisation des étiquettes de formulaire
En ce qui concerne la flexibilité internationale, cependant, il y a clairement un gagnant. Que votre formulaire en ligne soit un panier d'achat, une page d'inscription ou un autre type de collecte de données, la chose la plus importante à retenir n'est pas que toutes les langues sont créées de manière égale. Certains sont plus longs et certains sont plus courts. Si vous placez des étiquettes sur le côté du champ et laissez 180 pixels d'espace, "Nom du titulaire de la carte" s'adaptera bien en anglais avec de la place à revendre. Mais changez la langue en français, et "Nom du titulaire figurant sur la carte" dépassera largement les 180 pixels qui vous sont alloués. Plus vous prévoyez de traduire en langues, plus vous rencontrerez probablement ce problème. Surtout si vous prévoyez d'être compatible avec tous les navigateurs!
La meilleure façon de vous éviter quelques maux de tête est de placer l'étiquette au-dessus du champ. Il y a beaucoup de place là-haut, surtout si vous avez des champs plus longs. C'est l'endroit idéal pour permettre aux langues plus longues de s'étendre sans détruire vos flotteurs CSS.
Lorsqu'elles ne sont pas placées au-dessus du champ, les étiquettes trop longues peuvent désaligner la structure de code de la page et, par conséquent, vos champs:
Alors que lorsque les étiquettes sont au-dessus du champ, il n'y a aucun problème:
Par conséquent, pour résumer, optez pour les meilleures étiquettes car elles garantiraient une expérience cohérente et sont également plus sûres
Cela peut fonctionner assez bien avec les zones de texte, mais que faites-vous avec les listes déroulantes, les cases à cocher, les boutons radio et plus ou moins tout autre contrôle?
La solution sûre est, enfin, plus sûre :)
Nous utilisons une disposition tabulaire avec des étiquettes alignées à droite à gauche des champs, et autorisons les étiquettes à passer à la ligne si elles ne tiennent pas dans la largeur prédéfinie de la colonne d'étiquette. Les contrôles sont alignés pour remplir complètement leurs cellules de tableau.
Modifier: nous utilisons des pourcentages de la largeur de l'écran pour les largeurs de colonne et permettons aux utilisateurs de présélectionner la largeur de la colonne de contrôles. Ainsi, les utilisateurs peuvent soit redimensionner la fenêtre, soit accorder plus d'espace pour les étiquettes, s'ils trouvent que les étiquettes ne correspondent pas.
Je préférerais aligner les entrées et les étiquettes sur un axe imaginaire (la ligne verticale rouge dans le croquis ci-dessous) et donner aux entrées la longueur qu'il faut car les mots et expressions français peuvent être plus longs que l'anglais.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Cette astuce est généralement utilisée dans les génériques de clôture des films.
