Vos utilisateurs se rappelleront de 2 moments sur toute leur expérience avec votre produit : le plus fort émotionnellement (bon ou mauvais), et le dernier. C’est la loi bien connue du “peak-end”. Pour améliorer la satisfaction utilisateur au global, c’est donc sur ces deux moments qu’il faut capitaliser.

Lorsqu’on travaille sur la création ou la refonte d’un produit, on met généralement tous nos efforts sur les pages principales comme la page d'accueil, vitrine de notre marque.

Certes, c'est ici qu’il faut réussir à créer le moment N°1, le “peak” puisque les utilisateurs se font une idée d’un produit en 50 millisecondes selon Don Norman (un des fondateurs des grands principes UX et UI).

Mais, qu’en est-il du dernier moment, le “end” ? Je pense notamment aux formulaires de fin et aux parcours transactionnels : sur ce type de pages, le travail de conception est bien souvent limité à l’aspect fonctionnel, laissant de côté l’aspect émotionnel. Erreur : cela crée une rupture dans l’expérience utilisateur alors que ces parcours sont pourtant tout aussi engageant que la page d’accueil !

Comment travailler les étapes de parcours et de formulaires pour en faire des moments “lovable” et engageant de votre expérience utilisateurs ?

Dans cet article, je m’appuie sur un cas concret en vous proposant un “re-design” d’un écran du site mobile de billetterie du musée du Louvre.

‍

Le problème rencontré

Le site du musée du Louvre est l’illustration parfaite du phénomène décrit plus haut. La semaine dernière, j’ai eu envie de tester la nocturne du vendredi : en me rendant sur leur site mobile, j’ai remarqué que la page d’accueil était particulièrement réussie :

En effet, tous les éléments traduisent un positionnement axé sur l’idée d’évasion et mettent en avant le caractère exceptionnel du lieu :

• La majorité de la page est dédiée aux images : on est accueillis par une vidéo au drône de la pyramide au coucher du soleil. Ici l’effet “wahou” est immédiat ! Au fil des pages, les photos du lieu, des galeries et des œuvres sont toujours aussi présentes, donnant un côté très immersif.
• Le message est clair “évadez-vous”, tout au long du site, le vocabulaire et la tonalité reprennent les codes serviciels du luxe, à la manière d’une agence de voyage haut de gamme.
• Enfin tous les codes graphiques convergent autour de l’aspect haut-de gamme : la typographie serif, le noir et blanc et ce vert signature dédié au bouton call-to-action.

Pourtant en cliquant sur le bouton “Billetterie” l’utilisateur est redirigé vers un service tiers dont l’UX et l’UI sont totalement différentes du reste du site :

‍

La billetterie actuelle :

Les écrans sont très denses, il y a beaucoup de texte et d’actions demandées à l’utilisateur.

Il n’y a plus de photos. La tonalité est plutôt froide et générique. Les éléments de choix de dates, d’heure et de tarifs sont tous sur la page et ne sont pas vraiment aux standards de ce que l’on peut trouver sur d’autres sites et applications de billetterie.

Bref, la rupture est frappante, et l’expérience est fortement dégradée : j’ai mis environ 3 minutes à prendre mon billet, alors que je compte moins de 30 secondes sur d’autres services dans le secteur culturel comme Fever ou Shotgun.

‍

Mes quicks wins pour remettre à niveau cet écran de billetterie

Pour améliorer rapidement cet écran, il faut donc penser à quelques astuces UX et UI.

Les quick wins design

• En UX : simplifier le parcours en le divisant par étape. 1 écran = 1 action
• En UI : utiliser les éléments forts de son positionnement produit
• En UX/UI : moderniser ses composants pour faciliter les interactions

Après

Voici ce que cela pourrait donner :

Découvrez la démo :

‍

Les apprentissages de ce cas

Simplifier le parcours en le divisant par étape. 1 écran = 1 action

Pour concevoir un écran efficace, il faut commencer par se placer du point de vue utilisateur en se posant les questions suivantes :

• Où est-ce qu’il/elle se situe dans son parcours ?
• Que cherche-t-il/elle à accomplir précisément sur cet écran ?
• Quelles sont les informations essentielles ?

Les deux premières questions vont aider à répondre à la troisième et ainsi trier et hiérarchiser les informations à afficher. Nous l’avons vu sur l’écran du Louvre, le texte prend vite tout l’écran sur un site mobile ! Or c’est de l’espace perdu car les utilisateurs mobiles lisent généralement seulement 20 à 28% du contenu d'une page selon plusieurs études menées par Nielsen Group.

Pour permettre à votre utilisateur d’atteindre son objectif, vous pouvez l’aider de plusieurs manières :

1. D’abord en découpant le formulaire par étape et en lui indiquant sa progression et les étapes restantes.
2. En affichant le minimum de texte possible
3. Puis en plaçant ces informations indispensables aux endroits stratégiques pour son œil. Pour cela on peut s’aider des lois UX suivantes :

Selon le principe de Gutenberg, il faut placer le bouton call-to-action au bon moment après le scan des infos principales.

Et selon la loi de Fitts, plus un composant est grand, visible et proche de la zone du pouce, plus l’utilisateur l’atteint rapidement et facilement.

Dans le cas d’un parcours, en plaçant le bouton en sticky en bas de l’écran, plutôt qu’en fin de page, vous mettez tout en œuvre pour que l’utilisateur comprenne et réalise l’action principale en en temps record ;).

‍

Définissez et utilisez votre positionnement produit

Un positionnement est la façon dont une marque exprime ses valeurs et se différencie dans l'esprit des consommateurs. Sur un produit numérique comme un site mobile, ou une application, cela se manifeste à travers les choix graphiques, la tonalité mais aussi toutes les fonctionnalités et les parcours proposés.

Définir votre positionnement vous permettra non seulement de créer un produit unique donc plus “lovable”, mais aussi d’identifier les fonctionnalités clés de votre expérience et de les prioriser.

Pour l’exprimer au sein d’un parcours transactionnels, d’un formulaire ou tout autre parcours a priori très fonctionnel, vous pouvez par exemple opter pour une couleur de fond différente du blanc. Ici par exemple, j’ai opté pour le noir en fond pour amplifier l’effet immersif et transmettre l’émotion liée à la curiosité, le sentiment que l’on va découvrir un mystère en achetant son billet pour le Louvre.

‍

Moderniser ses composants en faisant de la veille

Enfin, le plus difficile pour une équipe produit n’est pas toujours de créer de nouveaux écrans, mais de mettre à jour les éléments déjà présents dans son design system.

Pour s’assurer que votre produit reste a minima au standard du marché, et que l’expérience utilisateur n’est pas dégradée par le manque de modernité des composants et des éléments UI, il faut “bencher” régulièrement les concurrents et les produits les plus innovants.

C’est d’autant plus le cas lorsque l’on travaille dans des secteurs disruptés par de jeunes acteurs, comme la culture (mais aussi la banque, l’épargne, etc).

Il ne faut pas non plus hésiter à s’inspirer des bonnes pratiques des applications les plus innovantes, même pour votre site mobile, dans une logique “mobile first”.

‍

Conclusion

Dans cet article, j’espère vous avoir démontré l'importance de retranscrire votre positionnement de marque même dans vos formulaires : ces moments de fin de parcours sont tout aussi essentiels pour l'expérience globale sur votre produit et la satisfaction de vos utilisateurs.

En appliquant quelques principes “quick wins” d'UX et d'UI, j’ai pu rapidement améliorer l'écran de billetterie du Louvre pour proposer une expérience utilisateur plus engageante et mémorable.

Ce qu’il faut retenir :

1. Simplifier vos écrans en divisant votre parcours par étape permet de faciliter la compréhension de l'utilisateur et d'accélérer ses actions.
2. Définir et utiliser clairement le positionnement de votre produit y compris sur ces écrans permet de créer une expérience unique et véhiculer des émotions.
3. Enfin, il est crucial de rester à jour en matière de design et de composants, en effectuant une veille régulière et en s'inspirant des meilleures pratiques du marché.

N'oubliez pas que chaque interaction compte, du premier "peak" au dernier "end". Investir du temps et des efforts dans la conception de vos formulaires contribuera à renforcer l'image de votre marque et à créer un produit lovable !

‍