Comment positionner les champs de saisie sur une tablette paysage? Empilés ou côte à côte?
J'ai conçu les champs de saisie du formulaire de connexion empilés sur une application de tablette paysage, car c'est la recommandation d'utilisation que je connais pour les formulaires. C'est plus facile aux yeux de l'utilisateur.
Mais le client demande de l'avoir côte à côte, car il est plus facile de frapper avec les pouces. Cela a du sens, mais reste préoccupé par l'effort de mouvement des yeux. Je veux dire, dans mon cas, ce ne sont que deux domaines, donc ce n'est pas la fin du monde. Mais si je dois concevoir une forme plus longue à l'avenir. Doit-il être empilé ou côte à côte?
Quelqu'un connaît-il des recherches sur la conception de formulaires pour tablettes sur paysage?
Concernant la conception d'un formulaire plus long
Le problème avec les formulaires à deux colonnes est que les utilisateurs seraient confus par la disposition à deux colonnes et interagiraient différemment en ayant besoin de plus de temps pour accomplir la tâche. Pour citer cet article
L'un des problèmes avec les champs de formulaire dans plusieurs colonnes est que vos utilisateurs sont susceptibles d'interpréter les champs de manière incohérente.
Ici, vous verrez 5 façons différentes d'interpréter la relation entre les champs de formulaire lorsqu'ils sont disposés dans une disposition standard à deux colonnes.
Cependant, avec une disposition à une seule colonne, les utilisateurs numérisent simplement de haut en bas et peuvent donc parcourir le formulaire très rapidement et remplir les détails . Pour faire référence cet article qui parle des problèmes avec les formulaires à colonne unique ou à colonnes multiples
Nous avons des formulaires pour nos avis sur les villes, les annonces d'hébergement, etc. Au début, nous avons esquissé ces formulaires dans une colonne, mais dans la conception finale, nous avons essayé 2 colonnes parce que c'était plus agréable du point de vue de la conception.
Le problème était que la deuxième colonne du formulaire contenait des champs obligatoires. Donc, ce qui s'est passé, c'est que l'utilisateur, après avoir rempli la première colonne et vu le bouton "Publier", ne se rendait pas compte qu'une deuxième colonne devait également être remplie. Nous avons commencé à recevoir des e-mails quotidiens comme: "Hé! Je ne peux pas publier sur votre site, il me dit sans cesse que je dois remplir des champs ". Il est important de dire que nous indiquions en fait une phrase de couleur rouge où se trouvaient les remplissages requis, mais de nombreux utilisateurs ne les voyaient toujours pas.
La raison pour laquelle il était difficile pour les utilisateurs de publier du contenu de cette manière est évidente si vous consultez l'image ci-dessous. Voici le chemin que l'utilisateur devait suivre avant et après avoir résolu le problème:
Concernant le formulaire de connexion
Étant donné que le formulaire de connexion ne comporte que deux champs, vous pouvez éventuellement utiliser une disposition à deux colonnes , car les utilisateurs seraient habitués à connaître le flux et à savoir que le premier champ est généralement le nom d'utilisateur\e-mail et le deuxième champ est le mot de passe et il y aurait donc peu de confusion sur la séquence du flux .
Le raisonnement derrière cette hypothèse est que les études ont montré que les dispositions de deux colonnes sont bien pour des cas d'utilisation spécifiques tels que le prénom et le nom ou les champs Pays et état ou champs date. Pour citer cet article de Luke Wroblewski
Il existe certains cas d'exception où la règle de la "colonne unique" peut être enfreinte. Les utilisateurs s'attendent à voir les noms (prénom et nom), les dates (année, mois et jour) et l'heure (heure et minute) écrits sur une seule ligne.
Cela dit, si vous regardez la plupart des conceptions de formulaire, elles suivent une approche empilée car une approche empilée permettrait aux utilisateurs de numériser rapidement le formulaire et de le remplir comme le montrent les exemples de formulaire de connexion ci-dessous.
En conclusion, je suggère de suivre une approche de formulaire empilé, mais si vous décidez d'utiliser une approche à deux colonnes pour le formulaire de connexion, cela devrait aller. Cela dit, vous devez effectuer l'appel entre l'utilisateur en remplissant rapidement le formulaire et l'optimisation de l'espace sur la page.
Cela dit, quelle que soit la mise en page que vous choisissez, je vous recommande fortement de lire ce article sur le positionnement des étiquettes ( et cet article de magazine écrasant également ) car cela définirait également comment votre les utilisateurs interagissent avec votre formulaire.
Avoir des entrées sur le côté droit de la tablette qui sont faciles à frapper avec les pouces est presque hors de propos, ou au moins une préoccupation de niveau assez bas. Les utilisateurs se précipitent généralement à travers les formulaires pour les surmonter, et avoir des entrées dispersées autour de la page enlèvera la découvrabilité des entrées et de leurs étiquettes. Les entrées alignées à gauche et une page déroulante seront presque certainement votre réponse ici. Les entrées et leurs étiquettes seront plus faciles à détecter, et vous rencontrerez moins d'instances d'un utilisateur manquant un champ.
Ce qui est plus important à considérer que l'accessibilité des champs avec les pouces des utilisateurs est le flux du formulaire. J'entends par là prêter attention à la micro-interaction liée au déplacement de champ de formulaire en champ pendant qu'un utilisateur remplit le formulaire dans l'ordre. Assurez-vous que lorsqu'un utilisateur termine une entrée, il/elle est tabulé automatiquement à la prochaine entrée pertinente, et finalement, lorsqu'il atteint la fin, il/elle peut soumettre depuis l'interface du clavier sur son tablette.
En résumé: Si l'utilisateur a besoin de rebondir d'une entrée à l'autre, vous n'avez pas développé le bon formulaire pour le cas d'utilisation, l'ordre des entrées doit tenir compte de l'histoire de l'utilisateur. Les entrées qui ne sont pas alignées à gauche peuvent entraîner une non-découverte car les utilisateurs se précipitent généralement dans les formulaires. Les entrées doivent être réduites à celles qui sont requises et doivent être dans un ordre logique. Onglet automatique vers l'entrée suivante et finalement vers le bouton d'envoi.
O ouais ... presque oublié: testez, répétez, testez, puis répétez autant que vous le pouvez.
L'utilisation de la tablette paysage vous donne une largeur de ~ 700px, et si vous souhaitez afficher les champs de saisie, la disposition sur deux colonnes sera meilleure car l'affichage des champs de saisie empilés s'affichera très longtemps et plus de deux seront très utiles sur les tablettes de petite largeur.
L'affichage de deux champs de saisie sur une ligne sera préférable pour le mode paysage de la tablette.