OK / Annuler à gauche / droite?
Devrait OK bouton à gauche de Cancel bouton ou vice versa?
Existe-t-il des études suggérant l'une ou l'autre des solutions?
Comme pour tout: test utilisateur! Heureusement, le héros de la convivialité Jakob Nielsen saute à la rescousse ici dans son article Alertbox sur les boutons OK/Annuler :
Le bouton OK doit-il venir avant ou après le bouton Annuler? Suivre les conventions de plate-forme est plus important que de sous-optimiser une boîte de dialogue individuelle.
Kostya a eu raison de conseiller l'adhésion aux directives de la plateforme. Mais qu'en est-il des plateformes Web?
Si vous concevez une application Web, la décision est plus difficile à prendre, mais vous devriez probablement choisir la plate-forme préférée par la plupart de vos utilisateurs. Les journaux de votre serveur vous montreront le pourcentage d'utilisateurs Windows par rapport à Mac pour votre site Web ou intranet spécifique. Bien sûr, Windows compte généralement beaucoup plus d'utilisateurs, donc si vous ne pouvez pas vous soucier de vérifier les journaux, la directive qui s'appliquera à la plupart des situations est OK en premier, Annuler en dernier.
Il mentionne également deux autres directives importantes à prendre en compte lors de la création de boutons OK/Annuler:
- Il est souvent préférable de nommer un bouton pour expliquer ce qu'il fait que d'utiliser une étiquette générique (comme "OK"). Une étiquette explicite sert d '"aide juste à temps", donnant aux utilisateurs plus de confiance dans la sélection de l'action correcte.
- Définissez le bouton le plus souvent sélectionné par défaut et mettez-le en surbrillance (sauf si son action est particulièrement dangereuse; dans ces cas, vous souhaitez que les utilisateurs sélectionnent explicitement le bouton plutôt que de l'activer accidentellement en appuyant sur Entrée).
La réponse se trouve dans les directives d'interface utilisateur pour le système que vous utilisez.
Pour les fenêtres
Présentez les boutons de validation dans l'ordre suivant:
- OK/[Faites-le]/Oui
- [Ne le faites pas]/Non
- Annuler
- Appliquer (si présent)
- Aide (si présente)
Donc, Annuler est toujours à droite du bouton OK.
Pour MacOS
Un bouton qui initie une action est le plus à droite. Le bouton Annuler se trouve à gauche de ce bouton.
Donc, pour les utilisateurs de MacOS, Cancel est à gauche du bouton OK.
Pour Android
L'action dédaigneuse d'une boîte de dialogue est toujours à gauche. Les actions rejetées reviennent à l'utilisateur à l'état précédent.
Les actions positives sont à droite. Les actions affirmatives poursuivent la progression vers l'objectif utilisateur qui a déclenché la boîte de dialogue.
Pour Android, Annuler se trouve à gauche du bouton OK.
Pour les autres systèmes, voir les directives.
Pensez à "lire" la métaphore. Les occidentaux lisent de gauche à droite, notre cerveau est conditionné à couler de gauche à droite. CANCEL est fondamentalement un pas en arrière (à gauche) et OK/SUBMIT/YES/Etc., Sont un pas en avant (à droite).
Il semble que la convention Windows OK/Cancel ait fait beaucoup de conditionnement cérébral pour les utilisateurs. Donc, les tests d'utilisabilité sortiraient certainement avec beaucoup de gens à la recherche un bouton OK à gauche, Annuler à droite.
Mais cela ne change pas l'instinct le plus élémentaire de quelqu'un qui interagit avec le système sans aucun pré-conditionnement. Mon instinct de base dit que le bouton OK/Approbation/Aller de l'avant, quelle que soit la couleur ou la taille que vous lui appliquez, doit être sur le bord droit de la boîte de dialogue.
Considérez cette boîte de dialogue, sans étiquette ni surbrillance de couleur:
Où cliqueriez-vous? Je clique sur le bouton sur le bord droit, si je souhaite soumettre le formulaire. La raison en est qu'avant Windows, j'ai été conditionné à mon instinct de la manière suivante:
- La langue anglaise coule de gauche à droite.
- La navigation du navigateur fonctionne en arrière (gauche) et en avant (droite).
![enter image description here]()
- Les vieux jeux 2D comme Dangerous Dave déplacent le personnage vers la droite, lorsqu'ils progressent davantage.
Les nombres sur la droite numérique augmentent vers la droite, diminuent vers la gauche.
Les poids atomiques sur le tableau périodique augmentent vers la droite.
L'horloge tourne à droite.
Le calendrier augmente les dates vers la droite.
Je pense que la plateforme Windows a créé un anti-pattern avec OK/Cancel, qui est maintenant si répandu que ses études de validation de l'utilisabilité. Mais si vous considérez les facteurs ci-dessus, je pense que le maintien du bouton principal à droite est justifié et défendable.
EDIT: Un facteur supplémentaire à considérer est la cohérence. Si vous attendez des boutons supplémentaires dans vos boîtes de dialogue, le bouton principal sur le bord droit aiderait à rester cohérent avec le placement. Un exemple visuel rendrait cela clair:
Pour les utilisateurs dont la langue est lue de gauche à droite, je suggère de mettre le bouton OK à gauche, car ces utilisateurs attribueraient une plus grande importance à la première chose qu'ils voient.
Cela permettrait à ce sous-ensemble d'utilisateurs de terminer leur tâche le plus rapidement possible.
À mon humble avis, peu importe où vous placerez le bouton "OK": à gauche ou à droite. Peu importe le type d'utilisateurs qui visitent votre site (en hébreu ou en arabe). Peu importe le type de logiciel qu'ils utilisent. Les statistiques nous indiquent que 55% des utilisateurs veulent voir le bouton "OK" à droite mais si nous le mettons à droite, les 45% restants seront insatisfaits.
La meilleure solution est de mettre en évidence le bouton "OK" (le rendre plus visible que "Annuler") et tous les utilisateurs indiqueront facilement le bouton "OK" comme bouton principal et plus important.
Google et d'autres sociétés utilisent cette approche dans leurs logiciels.
Luke Wroblewski a écrit un livre sur les formulaires Web (Web Form Design: Filling in the Blanks) et il a également couvert certains principes comme: "Actions primaires et secondaires" (http: // www.lukew.com/resources/articles/psactions.asp ), "Étiquettes de formulaire alignées en haut, à droite ou à gauche" (http: // www.lukew.com/ff/entry.asp?504) ou "chemin d'accès à l'achèvement", etc. (vous pouvez également lire http : //www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php )
Donc, l'OMI en fonction du placement d'étiquette que vous avez (de préférence verticalement) et de gauche à droite + des règles de haut en bas, afin d'avoir un bon chemin vers l'achèvement, vous devez d'abord placer l'action principale (OK) puis les actions secondaires (+ + Annuler)
EDIT: placement d'étiquette dans les formulaires, par Caroline Jarrett, 2010 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf
Je pense que tout le monde a donné un bon point, mais il y a encore un point clé à mentionner ici.
Les boutons tels que Ok/Soumettre/Enregistrer, etc. sont appelés boutons d'action positive. De même, des boutons tels que Annuler/Réinitialiser, etc. sont appelés boutons d'action négative.
Maintenant, pour répondre à la requête, la plupart d'entre eux sont venus avec de bons points, mais voici une autre perception selon laquelle le test utilisateur d'une application décide généralement de la plupart des problèmes. Après tout, toute application créée est réservée aux utilisateurs.
Il y avait un test de moment oculaire et un test de chaleur ont été effectués sur les utilisateurs et toujours en cours en fonction de la disponibilité des laboratoires. Le meilleur scénario qui se présente est que la plupart des utilisateurs commencent à regarder l'application Web ou toute autre application de gauche à droite et du coin supérieur et commencent à faire défiler vers le bas en ramassant les points chauds clés et finissent généralement vers le bas à gauche. toujours bon de garder le bouton d'action positive à gauche et les boutons d'action négative à droite.
Aussi, ne niant pas le fait que ce sont des recherches basées sur peu d'utilisateurs, il n'est pas nécessaire que cela tienne toujours bien mais la plupart du temps ça le sera.
Il y a un autre point clé ici, c'est qu'il doit y avoir plus d'espace entre les boutons d'action positive et négative afin que les utilisateurs prennent un peu plus de temps pour atteindre les boutons négatifs et leur donnent ainsi suffisamment de temps pour réfléchir et réagir.
J'ai essayé d'expliquer que les couples de points sont basés sur mon expérience et sur des articles de recherche.
Faites des commentaires, afin que je puisse également en savoir plus.
Cordialement Deepak Bajaj
De nombreuses applications ont changé pour utiliser différents styles pour les boutons OK vs Annuler. Une interface utilisateur commune est d'avoir le bouton OK mais un bouton traditionnel tandis que l'annulation est un bouton de lien. Cela donne une distinction visuelle très claire entre les deux et même si cela conduit l'utilisateur à cliquer sur OK, la distinction visuelle finit par mettre en évidence la différence et aide l'utilisateur à choisir celle qu'il souhaite réellement.
J'ai vu cela à la fois dans les applications Web et de bureau.
Juste pour clarifier le raisonnement:
Il est considéré comme "plus correct" de placer le bouton principal (OK) dans le coin exact de la boîte de dialogue, car il est plus facile d'appuyer (il y a eu plusieurs questions/discussions à ce sujet).
Cependant, cela dépend aussi de ce à quoi les utilisateurs sont habitués - si vous créez un site ou une application pour les utilisateurs de Windows, vous feriez mieux de suivre les normes Windows.
Assurez-vous que "Entrée" sur le clavier est correctement associé à OK - beaucoup de gens l'utiliseront aussi.
Hou la la! Tant de réponses argumentant à gauche ou à droite.
J'ai moi-même effectué des tests à ce sujet et je les ai trouvés statistiquement non concluants.
La meilleure réponse que j'ai trouvée est que peu importe l'ordre dans lequel ils vont, tant que l'action principale est clairement indiquée - j'utilise toujours un bouton coloré pour [Do it]/go/submit/etc et un texte plus petit uniquement bouton pour [Ne pas le faire]/annuler/effacer/etc.
Tout comme les boutons "Publiez votre réponse" et "rejeter" au bas d'un formulaire de réponse ici sur UX StackExchange!
Vous pouvez trouver une opinion intéressante ici ; Anthony T. suggère qu'il est préférable de placer le bouton "OK" à droite de "Annuler":
Avec le bouton "Ok" à droite, les fixations visuelles sont moindres et coulent dans une seule direction [...]
Comparez cela avec l'action principale placée à droite de la boîte de dialogue et l'action secondaire placée à gauche. Les utilisateurs commencent avec leurs yeux sur l'action secondaire et déplacent leurs yeux vers l'action principale pour cliquer sur le bouton. Cela crée un total de deux fixations visuelles dans une direction, offrant aux utilisateurs un flux visuel plus rapide. Les utilisateurs fixent chaque bouton une seule fois et se terminent sur le bouton d'action principal. Le fait de laisser l'action principale à gauche peut être plus facile à atteindre pour les utilisateurs, mais lorsque vous regardez la vitesse en termes de processus mentaux et de fixations visuelles de l'utilisateur, placer l'action principale à droite d'une boîte de dialogue est en fait plus rapide.
Pour les applications Web ASP.NET, après avoir pris beaucoup d'aspirine pour traiter les problèmes de bouton par défaut (tout ce qui se déclenche lorsque la touche Entrée est enfoncée), je viens de mettre mon bouton par défaut sur la gauche afin qu'il soit le premier dans le balisage.
Différents navigateurs gèrent différemment plusieurs boutons d'envoi lorsque vous appuyez sur la touche Entrée (en particulier lorsque le curseur se trouve à l'intérieur d'une zone de texte au moment de la pression sur Entrée). Certains navigateurs utilisent simplement le premier bouton du balisage pour envoyer le formulaire, ce qui peut ne pas être ce que vous voulez (surtout si vous devez faire quelque chose du côté serveur par la suite).
Si vous n'utilisez pas de javascript personnalisé pour gérer les scénarios de bouton par défaut et que vous vous appuyez sur le comportement par défaut du navigateur Web, vous devez probablement placer le bouton par défaut sur la gauche.
Si possible, je suggérerais d'omettre complètement le bouton d'annulation, résolvant ainsi votre dilema. - Il est parfois inutile et est souvent activé par erreur.
De http://www.nngroup.com/articles/reset-and-cancel-buttons/ :
La plupart des formulaires Web auraient amélioré la convivialité si le bouton Réinitialiser avait été supprimé. Les boutons d'annulation sont également souvent de peu de valeur sur le Web.
Offrez un bouton Annuler lorsque les utilisateurs peuvent craindre de s'engager dans quelque chose qu'ils souhaitent éviter. Avoir un moyen explicite d'annuler offre un sentiment de sécurité supplémentaire qui n'est pas offert simplement en partant.
Annuler est principalement utile pour les dialogues en plusieurs étapes où l'utilisateur a progressé au-delà d'une ou plusieurs pages avec des actions. Pour le moment, appuyer sur le bouton Retour n'annulera pas ces actions et il serait préférable que l'utilisateur clique sur Annuler.
En fin de compte (surtout après avoir lu toutes les réponses ci-dessus), je vois que cette discussion se résume à la convention de la plate-forme par rapport à la convivialité "objective". Ce que je veux dire par "objectif", c'est à quel point quelque chose serait utilisable pour les utilisateurs qui ne connaissent aucune convention de système d'exploitation. Plus précisement:
OK à droite
Ce modèle gagne haut la main dans l'argument objectif d'utilisation SI les utilisateurs ne sont pas conditionnés à la convention des fenêtres moins utilisables (voir article ). Comme l'article le décrit, le fait d'avoir OK à droite s'aligne sur notre convention de lecture de gauche à droite, un flux de tâches plus efficace, est une meilleure cible de coin, également le fait que nous considérons les chronologies comme allant de gauche à droite (d'où un `` retour ''/`` annuler '' à droite est logique, car il s'agit d'un modèle de retour dans le temps).
OK à gauche
Convention Windows
C'est une réalité malheureuse, mais des modèles mal conçus (comme OK sur la gauche) peuvent devenir une convention et les utilisateurs s'y attendront. Essayer de faire autre chose, même si c'est objectivement un modèle plus utilisable, entraînera une mauvaise utilisation. Un exemple classique est le système de mesure métrique vs impérial - le système métrique a tout pour lui en termes de convivialité, de conversion facile d'unité, etc. mais si vous forcez les Américains des petites villes à penser en mètres et en centimètres lorsqu'ils sont habitués aux pouces/pieds, vous obtiendrez une mauvaise convivialité et des utilisateurs très frustrés. Je suppose que la leçon est de travailler très dur pour nous assurer de ne jamais introduire de mauvaises conventions en premier lieu!
Personnellement, lors de la conception pour le Web, je choisis de mettre le bouton OK à gauche, j'insiste également pour indiquer ma taille en centimètres et mon poids en kilogrammes, même lorsque je parle à des gens à l'esprit impérial. C'est vraiment une guerre d'usure, mais lentement le système impérial mourra, et j'espère que la convention `` OK à gauche '' des fenêtres le sera aussi :)
J'irais avec "Ok" sur la droite. En raison de la lecture occidentale qui va de gauche à droite. Et "Annuler" ne vous ferait pas avancer mais "Ok" le fera.
Mais une approche totalement différente. N'utilisez pas "Ok" et écrivez sur les boutons ce qu'ils font. Par exemple, "Enregistrer" ou "Ne pas enregistrer" n'oblige pas l'utilisateur à lire le texte de description. Gain de temps et prévention des erreurs de saisie.
Lol, je ne peux pas m'empêcher de rire par beaucoup de ces réponses. Cela semble être un cas de ne pas voir la forêt pour les arbres. Comme tout problème UX, cela dépend fondamentalement de la façon dont le formulaire est présenté. Par exemple, Étiquettes en haut, champs en dessous ou étiquettes à gauche des champs à côté. Regardez la page entière et comment les yeux d'un utilisateur coulent dans le formulaire. Le bouton final "Soumettre" a-t-il une ligne de vue claire?
Comme indiqué dans un article précédent, le livre de Luke Wroblewski sur les formulaires Web Web Form Design: Filling in the Blanks contient certains des meilleurs conseils en matière de création de formulaires Web ainsi qu'un grand paradigme de formulaires du point de vue de l'utilisateur - Les formulaires sont un moyen de parvenir à des fins et sont tolérés en raison du résultat final prévu (c'est-à-dire acheter quelque chose, créer un compte pour avoir accès à quelque part, etc.). Test utilisateur, test AB oui bien sûr si vous le pouvez. Le but ultime étant que plus votre formulaire est facile à remplir, mieux c'est.
J'aime vraiment certains des sites où il n'y a pas de bouton (visuellement) pour une action négative, seulement un lien. De cette façon, je n'ai pas à perdre de temps à regarder les boutons, je sais plus que le bouton le fait. Et si je sais que je ne veux pas faire ce que les pages veulent que je fasse, je prends un peu de temps pour voir comment serait-il préférable de continuer (recherchez le bouton de fermeture, le bouton d'annulation)
donc au lieu de:
[NOOOOO!] [CLIQUEZ-MOI! CLIQUEZ-MOI!]
il y aurait:
Non, merci! [Oui, s'il vous plaît!]
De cette façon, il n'est pas vraiment important de positionner votre bouton, il n'y en a visuellement qu'un et donc facile à localiser.
Dans mes applications, j'utilise la couleur visuelle pour mettre en évidence l'objectif du bouton d'action. Peu importe que ce soit à gauche ou à droite. Personnellement, je préfère avoir le bouton "ok" à droite (parce que je suis un utilisateur droitier et/ou osx - et en fait c'est un lien ..)
- gros bouton vert pour validation
- gros bouton rouge pour suppression
- (gros ou pas) bouton gris pour annuler
Pour moi, ce serait l'ordre logique:
<LeftRight>
<PreviousNext>
<BackForward>
<BackDone
Do nothingDo it
CancelOK
Sauf que OK doit être remplacé par l'action réelle telle que SaveDeleteAcceptExit ou Send.
Quand je rencontre des gens qui plaident pour OK à gauche, je leur demande toujours de placer Left contre Right, Previous contre Next, et Back contre Forward, et laissez-les expliquer pourquoi ils les ont placés dans cet ordre, avant de les laisser expliquer pourquoi OK devrait être sur la gauche.
Par ordre de priorité, utilisez la première solution disponible:
- directives de la plateforme
- du début à la fin (où le début pour les langues occidentales est généralement laissé, mais peut être différent, par exemple, l'arabe commence à droite et se termine à gauche)
- la façon dont votre utilisateur attend le plus
Cependant, dans le cas des lecteurs d'écran et des outils d'accessibilité similaires, avoir l'action principale au début (laissée dans les cultures occidentales) peut faire gagner beaucoup de temps à ces utilisateurs ayant des besoins spéciaux!
Bien sûr, il existe de nombreux arguments pour et contre les deux parties.
Je le dirais cependant de cette façon. "Croyez-vous que le placement négatif-positif est le meilleur? Non ou Oui?"
Le fait est que "Oui ou Non" s'écoule mieux lorsqu'il est prononcé, ce qui explique probablement pourquoi l'ordre des boutons positif-négatif a été choisi par Microsoft.
D'un autre côté, le flux négatif-positif est souvent utilisé dans la rhétorique et le débat afin d'ajouter du poids à l'argument positif et de le garder frais dans l'esprit d'une personne. "Voulez-vous voir vos enfants souffrir aux mains du parti adverse? Ou voulez-vous voter pour notre parti et assurer votre avenir?" Etc.
En supposant que la décision doit être prise si l'action positive doit être disponible à gauche ou à droite et sans tenir compte du parti pris d'utiliser certains systèmes d'exploitation ou appareils physiques (livres), des constructions abstraites (flux de formulaire de l'assistant), etc., la science du comportement semble suggérer que l'option statistiquement la plus à gauche est choisie plus fréquemment comme premier choix.
Cela implique que le placement d'une action positive (OK ou étiquette d'action explicite) à gauche doit être préféré si aucun autre facteur n'est pris en compte.
Source: Est-ce que seuls les humains comptent de gauche à droite?