Concevoir une meilleure UX pour le bouton arrière

Il n’y a pas beaucoup de choses dans les tests d’utilisabilité qui reviennent encore et encore. L’un d’eux est l’anxiété que ressentent les gens lorsqu’ils doivent rentrer. Les utilisateurs en général n’ont pas beaucoup confiance dans le bouton « Précédent » du navigateur, et pour une bonne raison. Nous avons tous été dans une situation où le bouton « Retour » d’un navigateur ne fonctionnait tout simplement pas comme prévu.

Par exemple, si vous vous trouvez dans un processus en plusieurs étapes tel que le paiement, le bouton « Retour » vous ramènera souvent à la tout début du processus, plutôt qu’à la page précédente, avec toutes vos données évaporées dans les airs. Et parfois, nous devons retaper plusieurs fois des données sensibles telles que les numéros de carte de crédit car elles ne peuvent pas être stockées pour des raisons de sécurité.

Peur du bouton « Retour » du navigateur

Sûrement, les utilisateurs comptent beaucoup sur le bouton « Retour » du navigateur. Pourtant, pour les raisons mentionnées ci-dessus, fréquemment, les utilisateurs semblent être réfléchir à deux fois avant d’appuyer sur ce bouton. La plupart du temps, ils ont juste peur de perdre leurs données ou l’état de la page dans laquelle ils se trouvent actuellement – et c’est compréhensible car parfois on ne sait pas où le navigateur amènera un utilisateur.

C’est pourquoi il n’est pas rare de voir des gens prendre captures d’écran de la page actuelleou ouvrir la même page dans un autre onglet pour s’assurer que leurs données (au moins pour la page en cours) sont toujours disponibles dans le navigateur.

Problèmes graves commencent à apparaître lorsque nous introduisons des superpositions, des liens d’ancrage, des galeries d’images et des vues dynamiques dans nos interfaces ou modifions les URL lorsque les utilisateurs parcourent la page. Par exemple, si une grande superposition, par exemple pour l’édition d’un tableau, apparaît au clic, où le bouton « Retour » doit-il amener l’utilisateur ? Et que se passe-t-il si un utilisateur clique sur une galerie d’images dans un article ?

Fermez toujours les grandes superpositions avec le bouton « Retour »

Des études montrent que plus une nouvelle vue est visuellement différente, plus elle est susceptible d’être perçue comme une page séparée par les utilisateurs. Avec cela, on s’attend à ce que le bouton « Retour » amène un utilisateur à la « page » précédente, même si, techniquement, il ne s’agit peut-être pas vraiment d’une page distincte.

Cela vaut pour la liste de produits apparaissant après le filtrage et le tri, pour les paiements en accordéon, mais peut également être utile pour les liens d’ancrage et contenu étendu et tronqué — surtout si les sections sont longues. Dans ces situations, c’est raisonnable à aligner le comportement du bouton « Précédent » du navigateur pour répondre aux attentes de l’utilisateur — avec le API d’historique.

Nous ne voulons certainement pas polluer l’historique des utilisateurs avec des états ou des pages inutiles, cependant. Lorsqu’un utilisateur clique sur une galerie d’images dans un article, nous ne devrions probablement pas ajouter chaque image à l’historique de l’utilisateur, car cela rendra beaucoup plus difficile l’accès à la « vraie » page précédente.

Dans ce cas, un état du carrousel est rarement considérée comme une « page différente ». Tant que la page ne change pas de manière significative, nous devons éviter d’ajouter des états à la pile d’historique de l’utilisateur. Cela vaut également pour les cases à cocher, les menus déroulants et les sections injectées dynamiquement, par exemple.

La position du bouton « Retour »

Même si nous avons aligné les attentes concernant le comportement du bouton « Retour », certains utilisateurs seront toujours inquiets si le bouton « Retour » fonctionne réellement comme prévu. Un bon moyen de résoudre ce problème consiste à ajouter un lien « Retour » personnalisé et spécifique au formulaire ou un bouton « Retour » dans votre interface.

Steve Schoger suggère que les boutons soient alignés à droite ou à gauche, c’est toujours une bonne idée de mettre l’action principale sur le côté extérieur. Cela signifie que le bouton « Retour » – qui serait également visuellement moins lourd – résiderait à côté du bouton « Suivant ».

Placez le bouton « Retour » au-dessus du formulaire

En effet, l’exemple ci-dessus est un modèle assez courant qui fonctionne généralement bien. Cependant, d’après mon expérience, cela causerait également des problèmes car de temps en temps, les utilisateurs cliquer sur un mauvais bouton — principalement parce que ces boutons sont situés trop près les uns des autres.

Par conséquent, je dirais toujours que placer les boutons comme loin les uns des autres que possible est une idée qui vaut la peine d’être testée.

Adam Argent suggère pour mettre le bouton « Retour » au-dessus du formulaire, tel que conçu par Joe Lanman, un designer du Gov.uk. Au final, le bouton « Retour » se trouve alors dans un lieu similaire à l’endroit où la plupart des navigateurs placent le bouton « Retour » du navigateur.

Selon Joe, le bouton « Retour » n’est probablement pas nécessaire une fois que l’utilisateur a rempli le formulaire – « s’il remplit le formulaire et clique sur retour, il perdre leurs réponses.”

« Retour » devrait ressembler à un élément interactif

Il convient de souligner que le bouton « Retour », lorsqu’il est positionné au-dessus du formulaire, devrait en fait ressembler à un élément interactif. Il peut s’agir d’un lien souligné ou d’un bouton autonome qui ressemble en fait à un bouton, par exemple.

D’après mon expérience, si le lien « Retour » se confond avec le reste de la page, les utilisateurs ne peuvent parfois pas trouver un moyen de revenir en arrière et commencent généralement à chercher au bas de la page. Donc pour que ça marche, le bouton « Retour » doit être visible et perceptible.

Sur Gov.uk, le lien « Retour » est situé tout en haut de la page (souligné), apparaissant comme un élément interactif – à un endroit où l’on s’attendrait généralement à un fil d’Ariane. Il n’y a qu’un seul bouton proéminent, et c’est le bouton « Continuer ».

Sur Pleinementle bouton « Retour » et le bouton « Suivant » sont positionnés très loin l’un de l’autre. Les utilisateurs peuvent revenir en arrière en appuyant sur une flèche de retour tout le long du bord extérieur gauche de l’écran tout en poursuivant le processus dans le coin inférieur droit de l’écran. C’est un moyen sûr d’éliminer les erreurs ou les clics erronés.

Cependant, nous devons nous assurer que les utilisateurs peuvent réellement retrouver le chemin du retour au milieu du processus s’ils en ont besoin.

Regrouper les états en tant qu’instantanés

Parfois tu peut ne pas avoir besoin d’un bouton « Retour » du tout. De toute façon, nous devons certainement prendre en charge correctement le comportement du bouton « Retour » du navigateur, mais au lieu d’une manière personnalisée de revenir en arrière, nous pouvons autoriser les utilisateurs à revenir uniquement aux options pertinentes. Par exemple, avec un zone dédiée aux instantanés pour les états.

Sur Boutique de mods Fender, vous pouvez créer des « instantanés » pendant que vous configurez un modèle. Vous êtes toujours poussé à explorer et à personnaliser, avec une option pour revenir à une version spécifique que vous avez enregistrée en tant qu’instantané.

Emballer

La façon dont nous percevons nos propres sites Web en tant que concepteurs et développeurs n’est pas nécessairement la même que nos utilisateurs le perçoivent. Plus les vues sont différentes d’une interaction à l’autre, plus les utilisateurs sont susceptibles de percevoir ces vues comme « choses séparées ». Les utilisateurs comptent sur un bouton « Retour » pour revenir en arrière, mais souvent nous ne correspondons pas à leurs attentes, ce qui entraîne frustration et abandon.

Nous devons sûrement aligner les attentes des utilisateurs avec le comportement du bouton « Retour » au minimum. De plus, c’est une bonne idée d’ajouter un bouton « Retour » personnalisé à nos interfaces – et peut-être de les placer loin des boutons « Suivant » ou « Continuer », peut-être à la Haut de la page.

Bien que cela fonctionne très bien dans certains scénarios, cela pourrait ne pas bien fonctionner pour vous. Dans ce cas, essayez d’éviter de placer les boutons trop près l’un de l’autre et assurez-vous qu’ils sont suffisamment différents visuellement. L’un pourrait être un lien et l’autre pourrait être un bouton. Ce qui semble être un petit détail pourrait rapporter gros et entraîner un taux d’abandon plus faible et une conversion plus élevée.

Ressources utiles

(il)