Optimisation des parcours de connexion

Optimisation des parcours de connexion

Le contexte

Après analyse des indicateurs (google analytics et usabilla) du site gaz-tarif-reglemente.fr, il en est ressorti 2 éléments clés :

  • la page de connexion est la page la plus vue du site
  • les parcours de connexion sont ceux qui irritent le plus les clients
Analyse de données
Expérience Utilisateur
Parcours utilisateurs
Wireframes

1 - Analyse de l'existant

Ci-contre, un extrait des analyses faites via les cartes de chaleur et enregistrements de sessions via Hotjar :

  • la login page
  • les parcours de récupération d'identifiant
  • les parcours de réinitialisation de mot de passe.

Combiné à un audit ergonomique de ces parcours selon les heuristiques de Bastien et Scapin, il s'en est suivi des pistes d'évolution et une recommandation de bonnes pratiques.

2 - Optimisation des parcours

Après une mise en commun des données et taux d'abandons des tunnels (Merci les PO !), j'ai proposé des parcours optimisés qui prennent en compte les particularités des utilisateurs (voir : Les personae du site gaz-tarif-reglemente.fr). Le diagramme ci-contre matérialise et synthétise l'ensemble des parcours de connexion.

  • Plus de fluidité : utilisation de popin, filtre de chargement uniquement lorsque l'on souhaite ralentir la progression de l'utilisateur
  • Décomposition étapes par étape, avec une information / action par écran
  • La possibilité de passer d'un tunnel à l'autre plus facilement

3 - Réalisation des wireframes, du prototype clicable puis itérations

Je formalise ensuite les parcours via les wireframes. J'aime bien utiliser Balsamiq pour cela, qui permet de créer des wireframes simple très rapidement grâce à sa banque d'objet et la possibilité d'utiliser des symboles (Les symboles sont des éléments reliés entre eux : lorsque l'on en modifie un, tous les autres sont modifiés ).

Je teste ces prototypes en interne, pour estimer leur faisabilité, la logique, recueillir le point de vue des autres personne qui connaissent ou pas le sujet. Ce ne sont pas des personnes qui ressemblent aux utilisateurs, mais leurs retours, croisés aux données de google analytics et hotjar permettent prioriser les retours, et de faire remonter des éléments qui seraient passés à la trappe.

4 - Test des parcours

Une fois les interfaces réalisées par les UI Designers, nous procédons au test des différents parcours. Rédaction du protocole de test et création du prototype animé.
Prochaine étape, analyse des résultats, itération et développement.
En dernière étape, nous testerons sur une partie du trafic avant de déployer ces parcours pour tous les utilisateurs.