06.01.21
2 MIN

Il a généralement pour objectif la définition d’un besoin pour aboutir à une estimation de coût ou une demande de devis : j’ai nommé le simulateur. À la croisée du formulaire de contact et du tunnel de conversion, le simulateur emprunte de bonnes pratiques à ses deux cousins. On a réuni pour vous les 7 points-clés à garder à l’esprit lors de sa conception.

1. Un contexte le plus sobre et épuré possible

Comme dans un tunnel de conversion, on garde le minimum d’éléments perturbateurs pour focaliser l’attention sur l’action à réaliser et limiter les risques de sortie de tunnel.

Chez ekWateur, plus de menu de navigation dans le simulateur, seul le logo et le contact restent visibles

2. Un étapier pour rassurer

On vous en parlait déjà dans notre article sur les 15 bonnes pratiques UX pour le design de vos formulaires, on reste toujours convaincu·e·s. Avec une barre de progression en haut de votre simulateur, vous permettez à l’utilisateur ou utilisatrice de garder le contrôle, et ça, c’est rassurant. Il peut se repérer dans son parcours, revenir en arrière si nécessaire et estimer le temps restant.

Chez planète OUI, les étapes sont affichées clairement en haut du simulateur

Un écran = une action

Le nombre d’écrans importe peu (bien qu’il soit toujours important de se limiter au strict nécessaire, voir plus loin) si la fluidité est au rendez-vous. En dédiant un écran à chaque action, on permet à l’utilisateur·rice de se concentrer sur un sujet à la fois. Enfin, la zone d’action ne bouge pas, à chaque validation, la question suivante chasse la précédente : un minimum d’effort pour un maximum d’efficacité !

On limite aussi des champs de saisie pour privilégier les actions au clic.

Chez Yoopies, on commence avec une question simple, et unique

4. Les questions indispensables uniquement

Comme évoqué plus tôt, il n’y a pas de nombre d’or de questions à respecter dans l’élaboration d’un simulateur. Le sens sera toujours roi. On visera donc un nombre de question minimum, mais toujours en accord avec l’objectif du tunnel afin de fournir une réponse pertinente à l’utilisateur·rice.

5. Des informations complémentaires et synthétiques accessibles au bon moment

On épure l’interface en affichant le moins d’informations possible… Ce qui laisse la place aux informations vitales ! Ponctuellement, on ajoute une précision pour faciliter la complétion (sa rareté ne la rendra que plus visible). En complément, on prévoit des informations “à la demande” derrière un pictogramme qui appelle une infobulle ou derrière un cliqué-déployé par exemple, pour fournir les bonnes précisions au bon moment et accompagner les novices et les indécis·es.

Chez meilleurtaux.com, un conseil apparaît ponctuellement pour expliquer les informations demandées ou guider la complétion.

6. Quand cela s’y prête, des pictogrammes ou des illustrations pour appuyer le texte

Choisis avec soin, ils accompagnent et accélèrent l’identification des options proposées tout en ajoutant une identité graphique bienvenue à votre simulateur.


Chez IZI by EDF, les illustrations permettent d’identifier rapidement les options disponibles

7. Et bien sûr, le respect des standards ergonomiques dans la conception de formulaires

Des boutons de retour et de validation toujours placés aux mêmes endroits, des formats de champs adaptés au contenu attendu (et l’appel du bon clavier sur mobile), des messages d’erreur au bon endroit et au bon moment…

Et maintenant, à vous de jouer ! Avec ces premières recommandations, vous pourrez éviter les plus gros écueils de la conception d’un simulateur. Avant de vous lancer, néanmoins, n’oubliez pas de réfléchir au parcours global de vos utilisateurs (en élaborant leurs Experience Maps, notamment) afin de vous assurer de poser les bonnes questions au bon moment et vous garantir de meilleures performances.