Le Rayon UX

La radiographie du Web en temps presque réel / thème en chantier (je m'appelle Teuse)

Si tu portes à gauche, t'es Windows, si tu portes à droite, t'es Mac

Contrairement à ce que peut laisser penser le titre de cet article, je ne parlerai pas – aujourd’hui du moins – ni proxénétisme ni de concours de bits. Promis.

Vous avez certainement déjà remarqué que les applications sous Windows / Linux affichent les boutons Valider et Annuler de gauche à droite, et les placent à gauche de la fenêtre, tandis que les applications Mac les affichent de droite à gauche : Annuler puisq Valider. Vous aurez également remarqué que les premières placent les boutons de fermeture / agrandissement / réduction des fenêtres à droite, tandis que les secondes les affichent… à gauche.

Cancel et Save sous Mac

Sous Mac.

Sous Windows

Sous Windows

Ces deux phénomènes sont évidemment liés, et la manière dont vous affichez vos boutons en dit long sur votre OS de prédilection.

Le positionnement traditionnel des boutons, Valider à gauche et Annuler à droite, vient du sens de lecture dans les pays occidentaux. Quand vous concevez un formulaire, vous souhaitez que l’utilisateur le valide, pas qu’il annule sa soumission. Sur le Web, la plupart des formulaires n’affichent d’ailleurs pas de bouton Annuler à coté du bouton de validation afin de ne pas faire baisser le taux de transformation. Ils préfèrent afficher un discret lien Retour placé le plus loin possible du bouton de validation.

En tenant compte du sens de lecture naturel (encore une fois pour les occidentaux), le bouton Valider se place à gauche pour être le premier à remonter lors du scan visuel de la page. À contrario, les boutons de fermeture / agrandissement / réduction des fenêtres ne sont pas des outils que vous utilisez fréquemment, il n’est donc pas utile de les afficher de manière prioritaire.

Il semblerait qu’Apple – ce n’est que pure spéculation, je n’ai trouvé aucune information à ce sujet – se soit basé sur le fameux ratio de 65% de droitiers dans le monde, et la tendance naturelle de ces derniers à placer le pointeur de souris à droite. Le bouton “valider” est donc plus facilement accessible quand placé à droite, tandis que l’effort pour fermer la fenêtre est plus important a fournir.

Je me pose toutefois des questions quant à la pertinence de ce fameux 65% de droitiers et le placement de la navigation à droite depuis que Valentin Brandt m’a fait remarquer que des sites comme Amazon ou eBay affichent tous leurs filtres à gauche de l’écran.

Je ne sais pas trop ce que ça donnerai pour un site orienté lecture comme celui-ci, à moins de nettement différencier visuellement la navigation du contenu, ce qui n’est pas le cas aujourd’hui. J’ai tendance à penser qu’afficher le contenu à gauche facilite la lecture, puisqu’il est la première chose que l’oeil va atteindre. Si j’en crois le mouvement d’eBay et d’Amazon, il se pourrait cependant qu’afficher les options de filtrage à gauche soit plus compréhensible pour les utilisateurs.

Les filtres d'Amazon

Étant d’un naturel curieux, je songe sérieusement à modifier ma feuille de style et lancer une campagne d’A/B testing afin de voir si le placement à gauche des options de filtrage, et notamment des catégories, aura une incidence sur mon nombre de pages vues et mon taux de rebond. La suite au prochain numéro, c’est à dire quand j’aurai le temps.

  • Par Marie 18/03/2011 at 09h13

    Intéressant. Pour tout avouer, j’ai toujours pensé que Windows et Mac OsX faisait fermer leurs fenêtres l’un à l’opposé de l’autre uniquement pour .. ne pas faire comme l’autre ;) Mais quand je passe d’un OS à un autre, je galère et j’ai tendance à annuler plutôt qu’enregistrer, et vice versa..

    Idem pour le placement des icônes sur le bureau par défaut, sur Windows c’est à gauche et sur Mac OsX c’est à droite ;) Perso je préfère à droite car ma souris traine plus souvent du côté droit de l’écran que du gauche, mais c’est aussi peut être parce que j’ai l’habitude du Mac ?

    Autre chose, au début des sites internet, on plaçait toujours le menu de navigation à droite, je crois d’ailleurs que c’est encore le cas pour la majorité des sites ? Et pour les blogs c’est à gauche… C’est amusant, je me suis déjà posée la question de ce gauche ou droite mais je n’ai jamais réellement cherché la réponse ;)

    ps : faute dans ton titre : t’es windows, sans t à la fin ;)

  • Par Flint 18/03/2011 at 21h15

    A mon avis, MS n’a pas voulu de problème dans ces interfaces. Ils ont simplement inverser TOUS les boutons (droite au lieu de gauche), icones (gauche au lieu de droite), barre des taches (en bas, au lieu du menu en haut)….

    Comme Apple reste une des ref dans le domaine homme-machine (IHM) et qu’ils étudient tous. Ils ont du se faire une réflexion (du style), comme quoi l’utilisateur lorsque il lance une action souhaite quelle se réalise dans le 90% des cas. Du coups, lorsque il y a 2 boutons “Annuler” ou “OK”. L’utilisateur li a l’écran les choix et il survole a chaque fois avec la souris le bouton qu’il li. Du coup, laisser OK en 2ème (ou à la fin), évite à l’utilisateur de revenir sur la gauche avec la souris (perte de temps). Au alors, le fait que le “OK” soie toujours dans l’angle et plus simple que de devoir aller le chercher défois a gache (si le fenêtre est petite), au alors au centre (si il n’y a que 2 options), … Et MS a mi le bouton “OK” a gauche au lieu de le mettre à droite pour éviter d’avoir des soucis juridique.

  • Par fabian 19/03/2011 at 13h51

    Mon humble avis: partant du principe que le sens de lecture occidental va de gauche à droite, il me semble naturel de cliquer à gauche si je veux stopper ou arrêter le processus. Par contre, si je veux avancer, je clique à droite, dans le sens du mouvement, un peu comme si la page suivante se trouvait à droite. C’est un peu dans la logique des boutons BACK et FWD du navigateur…

  • Par Oncle Tom 20/03/2011 at 12h07

    Ubuntu affiche à gauche depuis 1 ou 2 versions désormais. On s’y fait vite ;-)

  • Par Oncle Tom 20/03/2011 at 12h09

    PS : Je parlais des boutons de fenêtre, j’ai lu de travers ;-) Mais l’emplacement du bouton « Valider » sous Ubuntu est inverse à Windows (particulièrement flagrant quand on utilise Firefox sur les 2 OS).

  • Par Romain Tribes 21/03/2011 at 16h23

    Plus que la position des boutons d’un OS à l’autre, ce que j’aime, c’est la pertinence des libellés des boutons. “Ne pas enregistrer”, “Annuler”, “Enregistrer”, c’est tellement plus porteur de sens que les stériles “Annuler” et “Ok”, parfois difficile à déchiffrer avec des questions ambigues !

  • Par Lanza 23/03/2011 at 13h11

    Je préfère la disposition d’Apple quant à moi, parce qu’une fois arrivé à “Valider”, j’ai lu (ou survolé) toutes les autres options avant de cliquer bêtement sur OK et de perdre le boulot (“Voulez vous vraiment quitter ? - Ok”)

    Je vois ça plus comme une sécurité que comme une facilité gestuelle.

  • Par Hugues Peeters 28/03/2011 at 09h34

    Sans être plus dans les secrets d’Apple que vous Frédéric, je ne pense pas que le choix de placer le bouton de validation à l’extrême droite de la boite de dialogue soit lié à la problématique gaucher/droitier. Je crois que cela tient plus à l’hypothèse d’attraction gravitationnelle de lecture selon laquelle, sur un layout homogène, le regard tend à former une diagonale dont la zone optique primaire se trouve dans le coin supérieur gauche et la zone terminale dans le coin inférieur droit (certains appellent ce concept le « diagramme de Gutenberg »).

    Selon moi, la différence de présentation entre les formulaires Windows & Mac OSX tient au fait que Apple applique cette logique au niveau atomique en considérant chaque bouton comme une entité à part, tandis que Microsoft considère la zone des boutons comme un seul block dans lequel prime à nouveau le principes de lecture gauche-droite.

    De mon expérience en test utilisateur, la position de ces boutons n’a pas l’importance que l’on veut lui donner, du moins dans les formulaires et les boites de dialogue (pour les call to action c’est plus critique). Les utilisateurs s’y retrouvent assez facilement, pour peu que le bouton d’action primaire (en général la validation) soit clairement mis en évidence de façon visuelle - cette condition est importante.

    La position de ces boutons a d’ailleurs beaucoup bougé dans l’histoire des deux OS et ne s’est stabilisée que récemment. Avant 1995, ils avaient tendance à être aligné verticalement sur la droite du formulaire (sans doute pour des raison d’optimisation de la gestion de l’espace sur les écrans, beaucoup plus petits à l’époque). Les produits Adobe (Photoshop, Illustrator, …) tendent d’ailleurs à encore suivre cette logique aujourd’hui, avec le bouton primaire dans le haut. J’ai même des souvenirs de formulaire Mac OS avec les boutons alignés en bas à gauche de l’écran (ex: la gestion de l’adresse I.P.).

  • Par Sylvain F 31/03/2011 at 15h52

    La position du bouton “valider” à droite me parait plus naturel que sur la gauche, peut-être parce que je suis majoritairement sur mac. Combien de fois sur le site de ma banque ai-je annulé un virement en cliquant à droite, ce qui correspond au bouton annuler (et qui est en lieu et place du bouton “suivant” de la page précédente, rien de mieux pour nous dérouter).

    Comme l’a dit Flint, Apple est réputé pour son expérience utilisateur, le bouton en bas à droite correspond à pas mal d’éléments logiques. Comme déjà dit, une page est parcourue en diagonale, le bouton arrive sur la fin de cette diagonale. Dans l’inconscient, ce qui se dirige vers la gauche est négatif et ce qui se dirige vers la droite est positif. Bizarrement, ce qui avance va à droite et ce qui recule va à gauche, la suite se passe à droite, etc.

    Lorsqu’on écrit, on enlève souvent le curseur de la zone de texte (allez savoir pourquoi), et il est plus facile de le tirer que de le pousser (avec une souris comme avec un trackpad), donc le mettre vers la droite lorsqu’on est droitier. Et l’exemple se vérifie sur ce blog, le bouton “Commenter” se situe sur la droite de la zone de texte ;)

  • Par jcg48 23/04/2011 at 16h10

    Autre possibilité, chez Apple.

    Dans les boîtes de dialogues, le bouton “valider” ou “accepter” placé à droite, et souvent “bleuté” du choix par défaut, peut se valider tout simplement par la touche “Enter” placé à l’extrême droite du clavier !

    Droite -> droite…CQFD et hyper simple !

  • Par Vivien 11/04/2012 at 10h47

    Intéressant article. Je trouve que le bouton de validation à droite est une très bonne solution. Cependant, ce qui manque chez windows ou mac, c’est une distinction (hors focus) du bouton valider du bouton annuler. Mis cote à cote, ils ont la même forme, ne serait-il pas avantageux de grossir, changer de couleur, de fonte le bouton valider ? à méditer… :)

Commentaire Si tu portes à gauche, t'es Windows, si tu portes à droite, t'es Mac