Simulateur d'aide juridictionnelle (projet fictif) — Une sidebar qui guide sans jamais perdre l'utilisateur

Le problème

Dans un formulaire long comme celui-ci, l'utilisateur peut vite perdre ses repères : où en est-il ? Qu'a-t-il déjà rempli ? Sans indicateur clair, le risque d'abandon augmente à chaque étape. J'ai transformé une simple sidebar statique en un véritable fil d'Ariane visuel, qui reflète en temps réel l'avancée dans le formulaire.

Comment ça fonctionne

• Des états clairs pour chaque étape : chaque section du formulaire (Revenus, Situation, Personnes à charge, Résultat) a une version active et une version inactive dans la sidebar, comme un interrupteur allumé ou éteint.

• Une seule étape active à la fois : dès que l'utilisateur clique dans une section du formulaire, celle-ci s'allume dans la sidebar et les autres s'éteignent automatiquement — le même principe qu'un menu à onglets, où un seul onglet est sélectionné à la fois.

• Des transitions animées plutôt que des changements brusques : le passage d'un état à l'autre est animé en fondu, pour que l'expérience soit perçue comme fluide, pas saccadée — un détail qui renforce directement la sensation de qualité du produit.

Sur le champ "sélectionnez votre situation", j'ai reproduit exactement ce qu'un utilisateur attend d'une liste déroulante classique : ouverture animée en fondu au clic, mise à jour automatique du texte affiché une fois une option choisie, fermeture du menu au clic extérieur.

Une attention particulière à l'accessibilité

J'ai vérifié le contraste des couleurs, la lisibilité de la typographie, et la taille des zones cliquables selon le critère WCAG 2.5.8 (Target Size Minimum) : chaque élément interactif respecte une taille minimale de 24×24 pixels.