Les boutons OK / Annuler doivent-ils être alignés à droite ou centrés?
Où dois-je placer les boutons OK/Annuler dans mes boîtes de dialogue? En bas centré ou aligné à droite? J'ai vu les deux et je m'en fous personnellement, mais je veux créer un look cohérent à travers mon application. Y a-t-il des directives à ce sujet ou dois-je faire ce que je veux?
Je pense que cela s'applique également à cette question et y répond:
(Spoiler: Ce n'est pas grave.)
Dans des cas comme celui-ci, souvent peu importe ce que vous faites. Soit le choix a de bons arguments en sa faveur, et aucun choix n'est susceptible de provoquer des catastrophes d'utilisation. Cela pourrait faire gagner 0,1 seconde à certains utilisateurs si vous choisissez le "bon" choix dans certaines circonstances, mais cela ne vaut tout simplement pas la peine de mener des recherches suffisamment élaborées pour découvrir ce qu'est ce choix. Mieux vaut dépenser vos ressources de convivialité sur ces choses qui peuvent changer vos indicateurs de performance clés de 83% ou plus.
Plus d'informations: seit.com/alertbox/ok-cancel.html
À proprement parler de l'alignement, il n'y a pas de bonne réponse autre que d'être cohérent.
Cependant, l'alignement des boutons est lié à positionnement ou ordre logique des boutons .
Il existe deux paradigmes généraux qui peuvent être appliqués au positionnement des boutons **.
- Ordre de lecture - Le premier bouton rencontré dans l'ordre de lecture est principal (OK) et prioritaire sur les options suivantes (Annuler)
- Avant/Arrière - La progression ou l'action vers l'avant (OK) est associée à un mouvement vers la droite tandis que vers l'arrière ou l'annulation (Annuler) est associée à un mouvement vers la gauche.
L'alignement des boutons peut influencer le paradigme perçu de l'utilisateur. En tant que telles, certaines combinaisons d'alignements et de positions peuvent être contradictoires et donc déroutantes pour les utilisateurs.
** cela suppose une lecture de gauche à droite; peut-être pas la même chose pour les langues de lecture de droite à gauche.
Faites ce qui convient à votre application et au système d'exploitation cible.
Cependant, comme vous le faites remarquer, la cohérence dans votre application est probablement plus importante.
Je pense qu'il est préférable (et plus générique) de les aligner à droite.
Ils sont toujours à droite et l'utilisateur s'attend à ce qu'ils soient à droite. Assurez-vous de les espacer suffisamment et de leur donner différents styles pour mettre en évidence l'action principale.
Je préfère positionner l'action la plus probable (OK dans ce cas) à droite et lui donner une sorte de couleur pour le rendre facile à repérer et l'action moins probable (Annuler dans ce cas) à gauche colorée en gris ou une couleur le long des lignes de l'arrière-plan du formulaire.
Je pense que c'est une mauvaise conception de les placer les uns à côté des autres. En suivant l'approche "ne me faites pas penser", quand je dois annuler - je m'arrête et cherche le bouton, mais dans tous les autres cas, je veux juste agir automatiquement.
Cela dépend de votre plateforme. Windows place les boutons sur le côté droit dans l'ordre <OK> <Annuler> et Mac OSX dans l'ordre <Annuler> <OK>. Comme les autres réponses ... soyez cohérent. Pour le placement des boutons, je préférerais le côté inférieur droit.
je pense que "OK" ou votre bouton d'action prioritaire devrait être à gauche pour la raison suivante 1: Un bon pourcentage d'utilisateurs utilise le clavier sur les formulaires ou les boîtes de dialogue et l'utilisateur prendra moins de temps pour atteindre l'action la plus favorable via tabulation s'ils sont sur le côté gauche . 2: rotation des yeux ou loi de Fitt 3: pensez aux aveugles (semi-aveugles) ou à l'utilisation de l'application lorsque vous conduisez ou accédez à l'application en mode vocal. 4: dernier pas le moindre, utilisez des verbes comme action
Il y a beaucoup de discussions disponibles dans ce forum, veuillez les parcourir
Gardez également à l'esprit que mes suggestions ne concernent pas les petits appareils.
Pour un processus linéaire (comme un installateur), aligner les boutons "Suivant" vers la droite (dans un environnement occidental) pourrait être plus intuitif.
Je dirais que l'ordre de vos boutons est plus important. Sous Windows, le "bouton OK" est toujours à gauche et le "bouton Annuler" à droite. Parce que les utilisateurs ne lisent pas, l'échange des boutons OK et Annuler (comme le font certaines applications Mac portées), confond l'utilisateur.
Je pense que cela dépend de la conception. Si vous utilisez une conception standard pour votre formulaire, je placerais les boutons OK/Annuler sur le côté droit (http://bit.ly/9IzQo0), mais si vous utilisez CSS pour modifier vos formulaires, je les placerais au centre (http://www.tumblr.com/register).
Si vos champs de formulaire sont alignés à gauche, il semble également judicieux d'aligner vos boutons à gauche. Voici quelques recherches sur où les yeux des utilisateurs vont réellement et à quelle vitesse ils réagissent: http://www.lukew.com/ff/entry.asp?571
Cela suggère que l'alignement à gauche de ces deux options est le meilleur choix de conception - en particulier lorsque les contrôles de formulaire ci-dessus sont également alignés à gauche. Placer les boutons "Soumettre" et "Annuler" sur la gauche signifiait que les yeux des gens avaient moins de distance à parcourir.
En termes de mouvements oculaires, les gens étaient moins efficaces lorsqu'ils utilisaient [une option avec des boutons alignés à droite].
Je pense qu'il est facile de critiquer des sujets comme ceux-ci au cas par cas, mais je pense que tout le monde devrait envisager un système de conception complet et/ou une bibliothèque de modèles lorsqu'il exprime son opinion et/ou les résultats des tests. Le fait est que, selon le contenu et les tests, certains peuvent afficher une conversion plus élevée avec OK à gauche et OK à droite.
Cependant, lorsque vous envisagez un système de conception complet, considérez-vous que la cohérence est meilleure que lorsque cela fonctionne mieux dans les tests individuels gauche/droite? J'accepte que vous souhaitiez inverser intentionnellement l'action "forward" lorsqu'il y a des externalités négatives importantes, telles que "Supprimer le profil de paiement", quelque chose qui n'est pas réversible, etc., en plaçant le CTA - dans ces cas - à gauche et annuler sur la droite.
Mais, même dans cet esprit, imaginons que la majorité des utilisateurs sont des utilisateurs de Windows (en ce moment), et vous allez suivre un flux de paiement progressif. Vous vous attendez à ce que "checkout" ou "Continue" soit à droite, avec retour ou annulation à gauche. C'est également le cas pour la plupart des mises en page d'annulation/ok d'utilisation modale (sauf pour Foundation), mais cela ne convient pas aux personnes qui se disputent des tests A/B individuels ou qui utilisent des tests qui ont abouti à une conversion plus élevée. la gauche, contre la droite.
Personnellement, dans l'expérience de test, les CTA fonctionnent mieux à droite, mais je suis toujours curieux de savoir quelles mesures les gens ont qui ont un guide de style ou un modèle de conception montrant les CTA dans la position la plus à gauche.
- L'ordre n'a pas d'importance tant qu'ils sont proches les uns des autres pour impliquer qu'ils sont frères et sœurs. Autrement dit, les boutons OK et Annuler font des choses différentes mais ils affectent le même élément.
- Pour une langue de gauche à droite, je mettrais les boutons au centre ou à droite.
- Je voudrais souligner le bouton OK avec une couleur qui correspond à la marque.
J'utilise généralement OK à gauche, Annuler à droite.
Le seul cas où je pourrais voir modifier ce modèle (et cela consiste à diviser les cheveux, pensez-vous) serait pour des actions irrévocables de la part de l'utilisateur (par exemple, supprimer mon compte, tuer tous les humains, etc.), puis je pourrais voulez dévier pour les forcer à penser à l'action ou pour forcer l'action par défaut à être l'option la plus sûre.
Selon le diagramme de Gutenberg , la zone du terminal (où le site présente son dernier appel après que l'utilisateur a scanné le contenu de la page) est en bas à droite de l'écran. En raison du schéma de lecture naturel des lecteurs occidentaux, le fait d'avoir les boutons à cet emplacement réduit en fait la fatigue des utilisateurs, car ils terminent leur navigation à cet emplacement. Si les boutons sont situés en bas à gauche, les utilisateurs finiront généralement dans la zone du terminal et devront retourner à gauche en fonction du rappel pour effectuer leur action. Ce modèle s'applique à la fois aux fenêtres contextuelles et aux écrans d'édition/ajout.
Ce modèle général s'applique également à l'ordre dans lequel les boutons sont positionnés. Si vous indiquez OK avant Annuler, l'utilisateur affichera presque toujours toutes ses options avant de sélectionner celle qu'il souhaite. Dans la majorité des cas, l'utilisateur voudra cliquer sur OK au-dessus de Annuler. Cela signifie qu'ils voient OK, puis Annuler, puis reviennent à OK. Travail très mineur, mais toujours ajouté.
Excellentes réponses ici. Ce que personne n'a mentionné, c'est la loi de Fitt qui régit la vitesse (et la facilité) de cliquer sur des cibles dans une interface graphique. Il donne une science difficile à savoir où placer les boutons principaux.
Fondamentalement, la loi de Fitts ( https://en.wikipedia.org/wiki/Fitts%27s_law ) stipule que la taille de la cible et la distance agissent de manière prévisible sur le temps qu'il faut pour atteindre la cible. Quand un bouton est dans le coin d'une "boîte", la taille cible est sans doute infinie (les seules tailles cibles vraiment infinies sont les coins de l'écran de votre ordinateur où le curseur s'arrête tout seul). Bien que la vitesse ne soit pas toujours une considération primordiale, le confort (facilité d'utilisation) devrait l'être.
Démo interactive (sans coins!): http://simonwallner.at/ext/fitts/