Aligner à gauche ou aligner à droite un bouton d'appel à l'action?
Nous créons une présentation en ligne, et la plupart du texte sur les pages est centré, sur la dernière page que nous avons CTA, le bouton mène à un site Web différent, qui est aligné à gauche. On m'a demandé de l'aligner à droite, car certains croient que les CTA appartiennent à la droite et tout en étant centré, il semble se perdre (c'est un gros bouton vert).
J'ai lu l'article de Lukew sur " Actions primaires et secondaires dans les formulaires Web " Mais ceci est considéré comme un excellent exemple de boutons sur le formulaire Web, existe-t-il une étude qui examine le flux oculaire du texte centré et des images à un bouton, l'œil occidental préfère. En regardant le diagramme avec des flèches, je pense que le bouton d'alignement à droite serait en fait préférable car il faut un œil pour accéder au bouton plus rapidement.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Meilleur entrainement
Vous trouverez de nombreuses informations sur les tests CTA et les théories. Mais vous ne trouverez pas grand-chose qui vous dira quoi faire avec l'alignement horizontal. La raison en est que cela dépend de votre conception.
La norme
Si vos collègues veulent parler de ce qui est le plus commun , alors vous devez vous aligner à droite, comme vous le suggérez. Ceci est utilisé plus souvent que gauche car cela signifie aller de l'avant dans une séquence (au moins pour nous de gauche à droite). Inversement, vous trouverez beaucoup de CTA "<Retour à quelque chose" alignés à gauche.
Adaptation au contexte
Dans votre cas, le contenu du site est principalement centré, ce qui entraîne l'utilisateur à se déplacer le long de l'axe vertical central. Il crée également un environnement esthétique qui favorise la symétrie. Dans ce contexte, je voudrais centrer le bouton. Pour les esprits visuels, voici un rapide filaire pour suivre l'axe dominant d'alignement.
Trouver le problème
Si vous rencontrez des problèmes avec les utilisateurs qui manquent un bouton centré, vous devez vous demander si vous lui avez donné l'échelle, l'espacement et la différenciation appropriés par rapport à la vue environnante. Comme vous le savez sûrement, l'alignement n'est pas le seul facteur en jeu.
Plus important encore, savez-vous avec certitude que c'est raté? Parfois, un manque de clics n'est pas dû à un manque de visibilité. Les utilisateurs savent-ils à quoi s'attendre lorsqu'ils cliquent? Leur avez-vous donné une motivation adéquate?
Non pas que cela signifie beaucoup, mais voici la confirmation que centré peut fonctionner à partir de Smashing Mag .
Localiser un bouton d'appel à l'action au milieu d'une mise en page Web sans élément d'accompagnement (ou significativement plus petit et sans accentuation) peut être un moyen efficace d'attirer l'attention et d'attirer une action.
Commençons par pourquoi ...
- Votre contenu est aligné au centre aujourd'hui. Ainsi, lorsque les utilisateurs naviguent sur la page, ils s'attendent à ce que le prochain contenu soit aligné au centre.
- Aujourd'hui, vous avez un gros bouton vert aligné au centre. Ça ne se fait pas assez remarquer.
- Pourquoi n'est-il pas remarqué? Difficile à dire exactement sans regarder le contenu exact, mais il est probable que:
- Le bouton est en compétition pour l'attention avec les graphiques, la palette de couleurs et le volume de contenu au-dessus.
- L'utilisateur est perçoit le bouton comme faisant partie du contenu. En d'autres termes, vous faites trop beau travail d'harmoniser la mise en page parce que vous guidez l'utilisateur à lire le contenu aligné au centre, donc l'utilisateur continue à perçoivent le bouton aligné au centre comme faisant partie du flux de contenu plutôt que comme un élément interactif.
Pourquoi l'alignement gauche/droite peut-il aider?
- En retirant le bouton du flux aligné au centre, vous créez une dissonance cognitive intentionnelle . Cela donne à l'utilisateur une pause cognitive intentionnelle à partir du flux de contenu, ce qui l'incite à évaluer plus attentivement l'élément de rupture d'alignement. Elle peut alors plus facilement percevoir le bouton CTA comme un composant interactif.
Pourquoi est-ce important?
- En comprenant le processus cognitif, vous pouvez créer une meilleure conception.
- En utilisant le cadre ci-dessus, nous savons que la véritable approche consiste à créer une rupture cognitive pour l'utilisateur pour lui permettre de percevoir le bouton CTA plus clairement.
- Bien que l'alignement soit une façon de le faire, il en existe plusieurs autres (cliquez sur l'image pour l'agrandir):
- L'illustration montre qu'il peut y avoir d'autres façons de mieux mettre l'accent sur le CTA sans avoir à casser votre mise en page (si cela est important pour vous/le client sur le plan stylistique).
Ce cadre vous aide également à prendre une décision sur l'alignement gauche vs droite si vous décidez d'aller avec une dissonance d'alignement. L'alignement à gauche est un choix plus naturel car il suffit de briser l'alignement central tout en restant conforme aux attentes de l'utilisateur en matière de lecture de gauche à droite. C'est pourquoi il est plus commun sur les sites Web.
L'alignement à droite peut stimuler plus de dissonance cognitive (l'utilisateur s'attend à descendre et à gauche pour lire le contenu suivant, mais à la place, à descendre ou à descendre), mais cela se fait au prix d'une certaine désorientation potentielle en tant que résultat.
Que fera le CTA? En fonction de ce que le fait d'appuyer sur le bouton entraînera probablement un placement différent. Par exemple, si cela mène à une autre page, il peut être utile de le placer à droite pour une conception de bureau, car la plupart des systèmes d'exploitation de bureau utilisent les boutons suivant/ok en bas à droite.
On pourrait dire qu'une position centrale neutre peut fonctionner dans la plupart des cas.
Selon loi de Fitt :
le temps nécessaire pour se déplacer rapidement vers une zone cible est fonction du rapport entre la distance à la cible et la largeur de la cible.
Vous pouvez également considérer le diagramme de Gutenberg , mais selon étude de Nielsen , ce concept zone terminale n'est pas vraiment utile, bien que d'après mon expérience personnelle, cela fonctionne tant que les éléments sont courts.
Maintenant, il y a une tendance très recherchée et suivie de placer des boutons à gauche ... tant que le conteneur entier est en haut à droite. J'ai moi-même beaucoup testé cela (les CTA sont mon pain et mon beurre) et je l'ai trouvé très intéressant. Conteneur en haut à droite avec des boutons alignés à gauche bat généralement Conteneur en haut à droite avec des boutons alignés à droite pour plus de 50%.
Cependant, si vous placez votre formulaire au milieu, le bouton doit être centré ou aligné à droite (et voici où Fitt Law est utile, d'où la raison pour laquelle je l'ai mentionné, faites le calcul et vous verrez). N'oubliez pas que cela dépendra également de la largeur de votre formulaire. Personnellement, j'ai tendance à faire des formulaires plus petits (pas plus de 400 pixels de largeur) et à utiliser des boutons vraiment volumineux, prenant généralement toute la largeur du formulaire. J'ai fait beaucoup de recherches à ce sujet, et cela fonctionne, mais bien sûr, vous devez faire vos propres tests.
Enfin: outre le placement, n'oubliez pas d'utiliser la copie, l'espacement (laissez de la place pour le bouton!), La taille et la couleur .