Position de l'étiquette de formulaire pour une meilleure facilité d'utilisation
Je crée un formulaire qui demandera à un visiteur de lui indiquer ses firstname, middle initial et lastname. Je veux que tous ces champs de texte soient en ligne, mais où dois-je placer les étiquettes? À gauche, en haut ou sous les champs.
Je cherche la meilleure approche du point de vue de la convivialité.
Jetez un oeil à cette étude réalisée par UXmatters . Il est assez approfondi, inclut des données sur l'eye tracking et conclut que les étiquettes en haut sont globalement la meilleure solution.
Il y a n article similaire de Luke Wroblewski , également assez détaillé. Les deux articles méritent d'être lus!
La chose la plus importante est d'être cohérent avec le reste de votre site. En général, la plupart des sites Web font les étiquettes à gauche des champs de texte. Dans cette cause, il s'agirait d'une description longue, alors assurez-vous d'avoir de la place et que ça coule bien.
Si à gauche ne regarde pas à droite ou s'il n'y a pas de place pour le faire, alors je le ferais ci-dessus. Comme c'est très clair.
La seule méthode que j'éviterais consiste à placer les étiquettes sous les champs de texte. quand les étiquettes sont sous les champs, c'est plus déroutant.
Normalement, pour votre situation, en haut ou à gauche est préférable. Assurez-vous simplement que l'étiquette vient avant le champ de saisie pour l'accessibilité.
Néanmoins, il existe de nombreuses façons différentes de mettre en page une page et d’être accessible.
Les étiquettes de formulaire peuvent vraiment apparaître n'importe où, à condition que cela se produise depuis. Ce recours vaut le coup d'œil, http://patterntap.com/tap/collection/forms
Deux options sont considérées comme les meilleures:
- étiquettes à gauche du champ, vidées à droite pour qu'elles soient proches de l'entrée.
- étiquettes au-dessus du champ lui-même
une autre chose importante à noter pour la facilité d'utilisation est de s'assurer que vous utilisez l'attribut for de l'étiquette, de sorte que cliquer sur l'étiquette se concentre sur le champ qu'elle étiquette.
Réponse: Aucune de ces réponses. Utilisez espace réservé texte à l'intérieur du champ lui-même. L'attribut d'espace réservé est une partie intégrée de HTML-5.
Sinon, je dirais de le placer au-dessus des champs, aligné à gauche.
C'est un peu une tangente - mais s'il vous plaît, n'utilisez pas prénom/nom/initial. Tout le monde ne se nomme pas dans ce groupe.
Me citer sur StackOverflow:
De nombreuses cultures asiatiques placent le nom de famille en premier, car la famille est considérée comme plus importante que l'individu.
Notant que bon nombre de personnes utilisent un nom différent de celui attribué par leurs parents, j'ai utilisé le schéma suivant avec un certain succès:
Nom complet (normalement écrit pour adresser le courrier); Nom de famille; Connu sous (le nom couramment utilisé dans la conversation).
Par exemple.:
Nom complet: William Gates III; Nom de famille: Gates; Connu sous le nom: Bill
Nom complet: Soong Li; Nom de famille: Soong; Connu sous le nom de Lisa
Voir https://stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 pour plus d'informations.