Quelles sont les meilleures pratiques d'alignement des boutons?
Il existe des raisons d'aligner les boutons à gauche, au centre ou à droite. Quelles sont les meilleures pratiques d'alignement des boutons et quels facteurs devons-nous prendre en compte? Quels boutons doivent être à gauche, au centre et à droite?
Personnellement, je fonde mes jugements sur les conventions de plate-forme modèle de lecture en forme de f , attention horizontale . Cependant, je n'ai pas trouvé une liste complète de règles qui me diraient où aligner chaque type de bouton dans chaque contexte.
Je ne suis pas sûr que vous puissiez identifier un ensemble complet de règles, je ne pense pas qu'il soit possible d'être définitif ... Bien que je convienne que la recherche d'attention en forme de F et horizontale à laquelle vous faites référence devrait être vos principes de départ.
Si je devais créer un ensemble de règles, cela ressemblerait à ceci:
- Pour les boîtes de dialogue avec un bouton, en bas au centre
- Boîte de dialogue avec deux boutons, en bas au centre, la réponse "positive" vient en premier - donc "Oui/Non" ou "OK/Annuler"
- Formulaire simple, bouton d'action principale aligné à gauche sous le dernier champ du formulaire, actions secondaires à droite du bouton principal avec une conception visuelle moindre
- Formulaires multipages, action "en avant" à droite (avec un design clair et gras indiquant l'étape suivante du processus), action "en arrière" à gauche (moins en gras dans la conception mais clairement étiquetée)
- Variation de 4) - utilisez l'approche d'alignement à gauche du formulaire simple, c'est-à-dire la règle 3) --- mais uniquement s'il y a une barre de progression ou un assistant très proche du bouton qui aide l'utilisateur à s'orienter dans le processus et à comprendre ce qui va suivre
- Soyez prêt à changer la règle que vous utilisez, ou ignorez-les complètement et proposez quelque chose de totalement différent à la suite des tests.
Dans les formulaires Web, il ne semble pas y avoir de grande différence dans les performances selon que les boutons sont alignés à gauche, à droite ou au centre, bien que aligné à gauche semble fonctionner mieux , donc je serais enclin à aller avec cela pour une application web. Pour les boîtes de dialogue d'une application de bureau (à ne pas confondre avec les boîtes de message), je m'en tiendrai aux normes et je serais aligné à droite.
La chose la plus importante semble être de garder les boutons Exécuter et Annuler côte à côte. Mettre Exécuter à l'extrême droite et Annuler à l'extrême gauche est associé à des réponses lentes et à des taux d'erreur élevés. Mettre Exécuter est à l'extrême gauche et Annuler à l'extrême droite est incompatible avec les attentes des utilisateurs . Je sais que cela n'a pas beaucoup de sens, mais jusqu'à ce que des recherches plus approfondies le résolvent, la chose sûre est de garder Execute et Cancel ensemble.
Quant à savoir si Exécuter ou Annuler doit être le premier, les utilisateurs n'ont apparemment pas de fortes attentes dans un sens ou dans l'autre lorsqu'ils sont côte à côte. Les choses les plus importantes sont:
Soyez cohérent en interne dans votre application. S'il s'agit d'une application de bureau, suivez les normes applicables.
Étiquetez toujours le bouton Annuler "Annuler" pour que l'utilisateur sache lequel est lequel.
Le bouton Exécuter doit être étiqueté avec l'action qu'il commet (par exemple, "Acheter" ou "S'inscrire"). N'utilisez quelque chose de non descriptif comme "Soumettre" que s'il n'y a rien de plus spécifique que vous pouvez utiliser.
Si vous utilisez des boutons sur un formulaire, je suggère de placer le bouton "suivant" ou "soumettre" en ligne avec le bord gauche des entrées.
Si un utilisateur se concentre sur le formulaire et que tout se déplace vers le bas en ligne droite, alors c'est une bonne idée de mettre le bouton sur lequel il est le plus susceptible de vouloir appuyer.
Nous avons récemment effectué des tests sur un formulaire d'inscription de plusieurs pages, où le bouton "précédent" était à gauche et le bouton "suivant" à droite. Parce que le formulaire était laissé aligné, cela signifiait que chaque fois que nos participants allaient cliquer sur le "suivant", ils survolaient le bouton "précédent" en premier parce que c'était ce qu'ils voyaient. Ils n'ont pas toujours cliqué sur le bouton "précédent", mais certains l'ont fait à l'occasion, ce qui, comme vous pouvez le deviner, a été très frustrant pour eux.
Cela dépend évidemment de la façon dont le formulaire est conçu, mais le plus souvent, il y a une ligne droite que vos utilisateurs suivront lorsqu'ils parcourent le formulaire et il est logique d'y mettre le bouton le plus utilisé.
Nathan fournit quelques bons points mais n'est pas sûr du point 2: OK/Annuler
Il y a une vieille mais intéressante Alertbox de Jakob Nielsen sur OK- Annuler où il suggère, que cela n'a pas vraiment d'importance si son OK/Annuler ou Annuler/OK et "aucun choix n'est susceptible de causer l'utilisabilité catastrophes "tant qu'il est cohérent. Il continue en disant Apple utilise Cancel/OK et Windows utilise OK/Cancel .... si vous savez quelle plateforme la majorité de votre public utilise, vous pouvez envisager cela.
Nathan a à peu près cloué sur la tête. Et la nuance qu'Oliver a souligné ne fait que souligner le point essentiel de Nathan selon lequel "je ne pense pas qu'il soit possible d'être définitif".
La plupart des arguments que j'ai eu avec des gens au sujet de ces types de décisions de conception sont généralement enracinés dans le débat et non dans l'intérêt de bonnes possibilités de conception. Plus vous concevez (pour tout support), plus vous apprendrez qu'il n'y a pas de bien ou de mal. Il y a juste vraiment bon ou vraiment mauvais;). Et dans de nombreux cas, comme Nathan l'a mentionné, les gens interagissent avec succès avec un certain nombre de solutions et de modèles de conception différents. Cela ne devrait pas être une surprise lorsque nous considérons le design dans d'autres aspects de notre vie en dehors des ordinateurs et des logiciels. Par exemple, certains pays conduisent à droite, certains à gauche et certains des deux.
Dans le cas des formulaires Web, l'important est que vous soyez cohérent et que vous appliquiez de bons principes de conception visuelle. Il semble donc que cela corresponde à l'esthétique générale, à la disposition générale du contenu, à l'espacement et à la couleur. Les bases peuvent aller loin si elles sont bien faites.
Bien sûr, la recherche de Nielsen est utile comme toute autre recherche (c'est bien d'avoir des échantillons). Mais si les cartes de chaleur mesuraient une forme avec un gros gros bouton rouge en bas à droite de la page, tout d'un coup le motif E est le nouveau motif F si vous comprenez.