Boutons Next et Previous ?
Un client, dans le domaine bancaire, me pose la question suivante…
Vaut-il mieux placer les boutons “Next” et “Previous” comme ceci…
Version #1
… ou comme cela ?
Version #2
Je vous invite à voter #1 ou #2 en commentaire. Ou bien développer toute forme d’argumentation en la matière.
Vous hésitez ? Effectuons ensemble un test utilisateur ou auditons vos interfaces !
Commentaires des lecteurs
Comment by ThomasF — 2 April 2010
Hmm.. les deux solutions sont tentantes pour des raisons distinctes… Mais ma préférence va pour la #1 et je pense que c’est également la plus répandue actuellement.
Comment by Jean-Christophe B. — 2 April 2010
Bonjour,
La 2ème solution me semble meilleure. Il y a moins de parcours à faire pour passer d’un bouton à l’autre. De ce fait, la navigation entre les slides est bien plus aisée.
Comment by Olivier Leroux — 2 April 2010
Si les boutons sont regroupés, il suffit d’en trouver 1 pour avoir trouvé les autres et la navigation de l’un à l’autre est plus confortable quand les éléments sont proches.
Donc version 2 pour moi !
Comment by davanlo — 2 April 2010
Moi je dirais 2…
… quand je quitte un contenu des yeux pour entreprendre une action, j’ai tendance à être en bas à droite … que je veuille avancer ou reculer … et la proximité des boutons est intéressante.
Si il s’agit d’un diaporama avec une intention de lecture/navigation plus lente, on peut à nouveau débattre de l’opportunité de faciliter le "zapping".
Comment by lou — 2 April 2010
#2.
On voit mieux les boutons groupés qu’éloignés.En plus, les boutons sont plus faciles à manipuler successivement s’ils sont rapprochés.
Comment by Martin — 2 April 2010
A première vue, je dis la première mais juste du point de vue esthétique.
Les arguments pour la 2ème sont bons, je vote donc pour la 2.
Comment by Jérôme — 2 April 2010
Mon vote va à la solution 2 > moins de temps de "travel" entre les deux boutons de l’interface.
Ceci étant dit, si ce sont des photos et que certaines sont en paysages, le mieux est de les placer au dessus, afin d’éviter les scroll down, scroll up de photo en photo.
Comment by Christophe — 2 April 2010
La première solution. Les deux boutons sont éloignés, ce qui permet d’éviter des erreurs de clics sur des boutons trop proches.
Comment by matthieu b. — 2 April 2010
et la version #3 : placer les deux flèches au centre de la ligne du bas de l’écran
Peut-on libeller les boutons plutôt qu’utiliser des icônes seules ?
si oui, version 2 ;
si non, version 1 ou 3
Peut-on ajouter un texte à côté des boutons expliquant qu’il est possible d’avancer d’une étape ou de revenir en arrière ?
si oui, version 1 – le texte liera visuellement les deux boutons
Quelle est la fréquence d’usage du bouton "Previous" ?
si très fréquent, les versions 1 et 3 paraissent plus intuitives
Comment by Alexandre Huete — 2 April 2010
Bonsoir.
Moi je dirai ça dépend… mais pas besoin de faire des tests utilisateurs pour le vérifier 😉
Je pense que cela va dépendre de la fonction réelle des boutons et que les deux solutions se valent. Penser à mettre le focus sur l’action principale et proposer des alternatives clavier pour ceux qui ne veulent pas utiliser la souris.
Questions subsidiaire : vous mettez les boutons "annuler – valider" ou "valider – annuler" ? Même type de raisonnement…
Comment by Yannick — 2 April 2010
éh éh !
mes pulsions théoriques d’ergonomie me soufflent la 2 ( regroupement de l’action, économie de déplacement… blabli….)
mais mes pulsions d’utilisateur me poussent à dire définitivement la 1 :o), je ne suis pas avare de mouvements de souris ou de clics si je comprends de suite l’écran et ses 2 boutons d’action, de plus sans risque de me tromper en agissant ce qui aurait tendance à faire chuter ma satisfaction :o) .
La version 1 signifie plus clairement pour moi le changement d’étape, le passage d’un écran entier à un autre et je rajouterais même entre les deux boutons des repères de progression cliquables ( numéros ou noms des étapes) et hop voilà un utilisateur satisfait !
Comment by André DLC — 2 April 2010
La solution 2 me semble préférable car elle concentre la zone de commande là où je m’attend à la trouver : en bas à droite, là où mon regard termine sa course après avoir balayé la page.
Comment by Insky — 3 April 2010
Bonsoir,
difficile de choisir… à l’heure où l’on croise de nombreux systèmes qui n’indiquent même pas ces flèches (je pense aux zooms photos de type "lightbox" sur lesquels il est nécessaire de "survoler" la zone de gauche ou de droite pour voir le bouton/flèche correspondant apparaitre…)
Je serais tenté de préférer la #1 :
– la plus commune et donc la plus intuitive (ergonomiquement parlant) car déjà ancrée dans les habitudes.
– pour l’équilibre et la structure que cela donne à l’ensemble : sur la #1, l’emplacement des boutons accentue le rôle/sens/utilité des symboles "<" et ">", contrairement à la #2 ou ce sont ces symboles seuls qui donnent un sens au bouton. La #1 doit donc logiquement être mieux comprise par les internautes que la #2
– esthétiquement plus sympa…
Le seul véritable atout que je vois à la #2 est l’efficacité liée au rapprochement des boutons… qui raccourcira sans doute la durée de navigation entre chaque changement sans doute, en espérant que la fatigue économisée se répercute sur la durée totale de navigation…
A voir 🙂
Comment by tetue — 4 April 2010
Héhé, c’est le genre de question que j’adore et qui est capable de me filer des insomnies de capitaine Haddock (barbe au dessus ou en dessous du duvet ?)…
Je préférerais la #1, car :
Le parcours proposé ici est linéaire et il y a de fortes chances qu’il soit effectué par l’utilisateur dans un sens prioritairement à l’autre, comme on feuillette un magazine, les changements de sens étant alors exceptionnels (nuls ou rares). Il n’est donc pas nécessaire de rapprocher les boutons pour réduire le trajet du pointeur entre eux. Au contraire, mieux vaut les éloigner, pour permettre de naviguer en cliquant machinalement toujours au même endroit, sans risquer d’activer par erreur le bouton adjacent, le regard se portant alors sur les écrans qui défilent et non pas sur le bouton qu’on active. Séparer les boutons réduit le risque d’erreur.
Pour que ça fonctionne bien, ceux-ci doivent être assez gros (pour présenter une grande surface de clic difficile à rater), et être placés exactement au même endroit de chaque page, quelque soit l’ancrage dans celle-ci, ce qui me conduirait même à les positionner au dessus du diaporama, pour m’assurer qu’on puisse les activer aisément sans avoir à scroller, quelque soit la taille de l’écran utilisateur.
Comment by Denis Auchat — 4 April 2010
À mon avis, cela devrait dépendre de la langue utilisée et donc de la façon de parcourir la page Web. En écriture occidentale, je privilégierais la deuxième solution, qui correspond à une lecture en diagonale.
Comment by credit — 4 April 2010
Je préfère la solution 2, c’est plus compacte, plus intuitif et quand je lis je lis de haut en bas et de gauche à droite donc je finis le texte en bas à droite ou j’attends de voir les boutons (cas #2).
Comment by Ray Dacteur — 4 April 2010
Désolé si je fais mon malin 🙂 mais je les mettrai plutôt en haut de page, afin qu’ils soient tout de suite accessible et vus. Comment savoir sinon s’ils sont présents avant d’avoir vu toute la page ?
Comment by jmh — 5 April 2010
Un grand merci pour tous vos arguments. Les avis sont partagés, avec une petite majorité pour la version 2.
Les arguments cités sont:
– la proximité des boutons (souvent citée comme avantage, mais aussi comme inconvénient);
– l’équilibre visuel ;
– le sens de lecture ;
– les habitudes.
J’aime assez bien les arguments de Tetue.
Je pense que la taille des boutons et le fait qu’il ne soit pas noyés parmi d’autres fonctions prime sur leur position.
Merci encore pour le débat, et n’hésitez pas à y rajouter une couche.
Comment by Nico — 6 April 2010
Solution #4 : identique à la #3 excepté le fait que les liens sont également proposés avec des intitulés compréhensibles (/du texte).
Comment by Eleonora — 7 April 2010
je préfère la version #2
Comment by emma — 7 April 2010
Pour ne pas être influencé, je réponds avant de lire les commentaires.
A voir tout de suite comme cela, je préfère la 2, en raison de la proximité des boutons, ce qui évite les mouvements de souris.
Mais peut-être aussi que cela dépend du contenu et de son organisation dans la zone au-dessus. Par exemple s’il s’agit de quelque chose qui ressemble à 2 pages de documents, je pense que la solution 1 sera peut-être meilleure car dans ce cas le bouton "précédent" sera associé à la page de gauche, et le bouton "suivant" associé à la page de droite. On retrouve dans ce cas quelque chose qui se rapproche du feuilletage d’un magazine.
Comment by Flo — 8 April 2010
#1
Comment by Gaetano — 8 April 2010
Tout dépend de l’usage. Si c’est pour naviguer ou faire défiler des photos ou des écrans, la solution 1 est meilleure. La proximité des deux boutons diminue le trajet de la souris. Le confort est augmenté.
Si c’est pour progresser dans un formulaire, la solution 1 est meilleure. La distance est ici un avantage: le retour en arrière est exceptionnel et donc être visuellement marqué comme une "régression".
Comment by Magnolia21 — 11 April 2010
J’irais pour la première façon..
Je pense qu’esthétiquement c’est mieux.
Comment by Laurence — 20 April 2010
La version 1 est plus intuitive par défaut.
Après, tout dépend du support de diffusion : Internet, mobile ou borne interactive ? surtout si c’est une pour application bancaire accessible en extérieur.
Pour une version mobile, je choisirai la version 2 mais centrée sous la fenêtre.
Sinon je reste sur la version 1 🙂
Comment by Lindir — 21 April 2010
Je dirais :
#1 sur mon iPhone (j’ai de gros doigts 😉
#2 sur mon ordi (j’ai un petit pointeur)