web-dev-qa-db-fra.com

Placement des boutons

Je suis en train de développer un site Web et nous avons rencontré quelques éléments sur le placement avec des boutons dont nous ne sommes pas sûrs.

Le site Web a un processus de réservation et sur ce processus, nous avons aligné à droite les boutons à chaque étape.

Sur les formulaires de contact et les formulaires de demande, nous avons aligné à gauche les boutons pour les aligner avec l'alignement à gauche des champs du formulaire.

Est-il préférable que tous les boutons soient alignés sur le site Web de la même manière, ou est-ce que nous avons fait en ce moment une méthode qui devrait fonctionner?

16
alanhornedotcom

Benny a donné une excellente réponse et je suis d'accord avec ce qu'il a à dire en ce qui concerne le fait que le formulaire de contact ne fait pas partie du processus de réservation et qu'il ne devrait pas y avoir de concentration sur l'alignement à droite du bouton de soumission juste pour assurer cohérence.

Cependant, vous devez vous assurer que la présentation de votre formulaire est telle qu'elle permet au lecteur de numériser rapidement le contenu du formulaire et de le remplir et le bouton d'appel à l'action (le bouton d'envoi) est situé à un endroit qui s'aligne sur la présentation du formulaire

Pour citer ce que " Comment l'alignement des boutons de formulaire dépend de la disposition " a à dire sur le sujet:

La façon dont vous devez aligner votre bouton de formulaire dépend de la disposition du formulaire que vous choisissez. Si votre formulaire utilise une disposition à une colonne, votre bouton sera plus visible pour les utilisateurs si vous l'alignez à gauche de vos champs de texte. Dans une disposition à une colonne, les yeux de l'utilisateur se déplacent principalement dans une direction verticale pour remplir le formulaire. Lorsque les utilisateurs atteignent le bas de votre formulaire, ils n'ont pas à déplacer leurs yeux vers la gauche ou la droite pour trouver votre bouton. Il leur suffit de continuer dans leur direction verticale pour voir et cliquer sur le bouton de votre formulaire. enter image description here

Cependant, juste au cas où votre formulaire de contact nous a une disposition en deux colonnes pour une raison quelconque, l'article cite:

Lorsque les utilisateurs remplissent un formulaire avec une disposition en deux colonnes, leurs yeux se déplacent de gauche à droite, en zigzag. Lorsque l'utilisateur arrive à la fin du formulaire, ses yeux se terminent généralement sur le côté droit de la page, car dans la culture occidentale, les gens lisent de gauche à droite. L'alignement de votre bouton à droite de vos champs de texte dans une présentation de formulaire à deux colonnes aidera les utilisateurs à se poser directement sur le bouton lorsqu'ils auront fini de numériser le formulaire.

enter image description here

Voici quelques autres articles à lire sur le placement des boutons sur les formulaires:

  1. La meilleure façon d'aligner les boutons sur différentes formes
  2. Idées et directives utiles pour une bonne conception de formulaires Web - Ne fournit pas vraiment trop de meilleures pratiques ou directives, mais a de bons exemples
  3. Modèles de conception de formulaires Web: formulaires d'inscription
  4. Pourquoi les utilisateurs cliquent sur le bouton droit vers des actions plus que sur les actions restantes
10
Mervin

Non. Le formulaire de contact et le formulaire de réservation ne font pas partie du même processus, ce qui signifie que le placement du bouton est OK différemment. Le formulaire de contact est généralement un formulaire simple avec un nombre limité de champs à saisir, tels que Nom, Email, Téléphone et un champ Texte + le bouton. Le bouton est souvent aligné à gauche sur la zone de texte du message, comme illustré ci-dessous. Il existe des variantes où le bouton d'envoi est aligné à droite sur la zone de texte du message - mais, comme vous le dites, l'alignement vertical avec le texte est perdu.

enter image description here

La réservation peut être un processus assez compliqué, avec plusieurs étapes telles qu'un assistant. Ensuite, c'est souvent l'inverse où vous alignez le bouton à droite pour donner l'impression de tourner une page dans un livre. Ainsi, les boutons dans un formulaire de plusieurs pages sont alignés à droite ( Remarque: il y a des variations ici aussi ).

Attention aux différences culturelles. Certains pays lisent des livres de droite à gauche où l'analogie avec les livres ne fonctionnerait pas. Comme toujours, il est recommandé d'étudier l'utilisation de votre public cible sur des sites Web existants avant de passer en production.

enter image description here

Bonne chance!

5
Benny Skogberg