Présentation des informations sur la page d'inscription
Je fais la page d'inscription pour un site Web. Comment disposer les différents composants les uns par rapport aux autres? Par exemple, l'en-tête doit-il être au niveau ou au-dessus du champ de saisie de texte?
Username:____________
ou
Username:
____________
Parfois aussi, je dois expliquer des choses à l'utilisateur, par exemple les exigences minimales pour un mot de passe. Où et comment présenter les informations? Doit-il être dans une police légèrement plus petite juste en dessous du titre?
J'ai du texte à côté du champ de saisie qui est mis à jour dynamiquement pendant que l'utilisateur tape, par exemple pour dire que le mot de passe est trop court
Comme pour de nombreux problèmes d'interface utilisateur, la meilleure façon pour vous dépend de la façon dont vos utilisateurs utiliseront le formulaire. Dans votre cas, car le formulaire d'inscription est probablement simple, je suis d'accord avec les autres réponses ici sur les noms de champs au-dessus des zones de saisie.
Pour les formulaires plus longs et plus compliqués, vous devez évaluer si le formulaire sera analysé en premier pour décider s'ils doivent le remplir ou s'ils recherchent un champ spécifique à remplir. Si tel est le cas, vous souhaiterez peut-être utilisez des étiquettes à gauche des entrées pour activer la numérisation. Voici plus d'informations sur l'importance du contexte de LukeW, en réponse à l'article uxmatters publié par Samuel M.
Un sujet lié aux formulaires qui est ignoré est l'emplacement et le style de vos boutons d'action. LukeW a un excellente étude sur ceux-ci aussi (version courte: faire de l'action principale un bouton et des liens d'actions secondaires).
Il est communément admis que les étiquettes au-dessus des entrées facilitent la numérisation des champs du formulaire. Pour expliquer les limites des caractères, vous pouvez ajouter une autre étiquette à l'intérieur de l'entrée.
Je vous recommande de mettre le "titre" (étiquette) au-dessus des entrées de votre formulaire, car il est plus rapide à lire et à remplir (voir: xmatters.com - placement d'étiquette dans les formulaires ), et vous ' ll aura plus d'espace pour les notifications de validation après les champs de saisie.
Pour les champs de mot de passe, je mettrais le texte "le mot de passe devrait être de 8 caractères" sous les champs, pas aussi visible que les étiquettes et les champs du formulaire eux-mêmes, mais toujours pour être visible et lisible. ( et bien sûr les champs comme type de mot de passe)
Et la sortie de validation que je mettrais après les champs d'entrée qu'ils valident, car ce sont des informations secondaires et pas nécessairement visibles. Les couleurs Je ne peux pas vraiment dire quoi que ce soit sans connaître votre schéma de couleurs général, mais si le formulaire est clair, le rouge est généralement la couleur des erreurs de validation, s'il n'est utilisé pour aucun autre texte.
Exemple (je l'espère, montre comment j'essaie de le faire paraître):
Nom d'utilisateur:
[_JoeSmi] disponible
Mot de passe:
[ xxx ____] trop court
Confirmer le mot de passe:
[ yyy ___] les mots de passe ne correspondent pas
Le mot de passe doit contenir 8 caractères.
[ Soumettre ]