Analyse Expérience Utilisateur - Voyages-Sncf

1 510 vues

Publié le

Mini-audit de l'expérience utilisateur du site voyages-sncf.com. Les points forts et les axes d'amélioration, à date.

Publié dans : Marketing

Analyse Expérience Utilisateur - Voyages-Sncf

  1. 1. http://www.voyages-sncf.com/ Mini-audit de l’Expérience Utilisateur
  2. 2. 2 Pourquoi ce dossier ?
  3. 3. UN REGARD SUR L’UX DU SITE © Arnaud Petitbon 20153 Cette présentation vise à donner une idée de l’expérience utilisateur dans le site voyage-sncf.com, ses points forts et donner quelques axes d’amélioration possibles. C’est un exercice conduit sur initiative personnelle. Il n’a d’autre but que faire un point de situation à date et partager une vision de l’expérience utilisateur (UX). Dans l’idéal bien entendu, une véritable analyse UX se base sur… : - les indicateurs webanalytics pour contextualiser l’information - les données de navigation (données comportementales, mousetracking…) pour une approche quantitative et factuelle de l’UX - les enquêtes de perception sur panel utilisateurs, pour une approche qualitative … Le tout afin d’étayer l’analyse, infirmer ou confirmer les éléments issus de l’observation, et aller plus loin dans les axes de recommandations. N’ayant pas ces éléments à disposition, nous nous contentons donc ici d’une simple observation. Alors, que peut-on dire de l’expérience utilisateur de voyages-sncf.com ?
  4. 4. UX : VISER UNE MEILLEURE PERFORMANCE © Arnaud Petitbon 20154 L’idée est de rendre l’expérience sur le site agréable, la navigation intuitive, l’ergonomie attractive et les visuels immersifs. Le but est d’aider l’internaute à retrouver facilement les informations recherchées, le séduire par l’esthétique du site et lui donner envie de revenir. … Quoi de mieux pour optimiser la performance e-commerce ? L’UX est un accélérateur qui permet d’agir conjointement sur les deux axes e-commerce : acquisition et transformation. Optimisée, elle va donc contribuer à développer le trafic vers le site et surtout augmenter les ventes. Plus le nombre de vues et le temps passé augmentent, et plus le taux de transformation est susceptible de progresser ! Les promesses en optimisation UX peuvent aller jusqu’à : > Temps passés sur le site doublés > Taux de rebond réduit de 20% > Taux de transformation augmentés de 30%
  5. 5. 3 AXES D’OBSERVATION © Arnaud Petitbon 20155 1 Une Expérience Utilisateur globalement satisfaisante 2 Les points très positifs de l’UX dans le site 3 Des axes d’améliorations possibles
  6. 6. 6 UNE EXPERIENCE UTILISATEUR GLOBALEMENT SATISFAISANTE AXE # 1
  7. 7. © Arnaud Petitbon 20157 LE POINT SUR LES ATTENTES A défaut d’enquête de perception, observons les mots clés recherchés par les utilisateurs du site. 1/2 internaute arrive sur le site par le Search, et les mots clés tapés sont représentatifs de leur attentes. MOTS-CLES Ici, que ce soit en organique ou en référencement payant, l’intérêt des internautes se porte sur : sncf, billets, horaires, TGV, voyages… Source données chiffrées : SimilarWeb
  8. 8. ADEQUATION DES ATTENTES © Arnaud Petitbon 20158 A l’arrivée sur le site, la phrase d’accueil est explicite : « voyages-sncf.com est le distributeur de voyages en ligne de SNCF ». D’emblée, l’internaute accède à la consultation des horaires et des billets de train. Par rapport aux attentes de l’internaute avant la visite, le site joue parfaitement son rôle !
  9. 9. © Arnaud Petitbon 20159 Source données chiffrées : Google Trends Depuis plusieurs années, les requêtes de mots-clés « train » associé à « voyage » sont bien plus importantes que celles avec « réservation ». APPETENCE POUR LE VOYAGE Cette tendance n’échappe pas à voyages-sncf, qui a élargi son offre et propose des entrées vers le voyage dès la home page, répondant aussi à cette attente complémentaire de ses visiteurs. ADEQUATION DES ATTENTES
  10. 10. NOMBRE DE VISITES © Arnaud Petitbon 201510 0,7$ 1,2$ 4,3$ 5,2$ 6,2$ 6,5$ 16,1$ Bahn.com) Eurostar) Air)France) TheTrainLine.com) Lu5ansa) Bris6sh)Airways) voyage;sncf.com) NOMBRE DE VISITES EN MILLIONS - AOUT 2015 Avec un trafic 23 fois plus important que son concurrent allemand et 4 fois plus important qu’Air France, voyage-sncf.com apparaît comme un leader incontesté des sites de distribution de titres de transport en France et en Europe, en attirant le plus gros flux de trafic. Et ce trafic reste stable dans ces hautes proportions, comme on le voit au cours des 6 derniers mois. Source données chiffrées : SimilarWeb
  11. 11. TAUX DE REBOND © Arnaud Petitbon 201511 54,6% 21% 20,7% 19,7% 15,7% 14,7% 14,2% 13,2% Bahn.com) Lu,ansa) Air)France) Eurostar) TheTrainLine.com) Bris6sh)Airways) voyages;sncf.com) Troc)des)Trains) TAUX DE REBOND % - MAI 2015 Le taux de rebond de voyages-sncf.com est bas dans l’absolu. Mais il est par surcroit plus bas que celui de ses concurrents, affichant de fait une meilleure performance et la captation d’un trafic plus qualifié. Source données chiffrées : SimilarWeb. Moyennes par sessions utilisateurs calculées pour le mois d’août 2015. moyenne
  12. 12. INDICATEURS DE NAVIGATION © Arnaud Petitbon 201512 voyage'sncf.com. Bris2sh.Airways. Eurostar. Air.France. Lu;ansa. TheTrainLine.com. Troc.des.Trains. Bahn.com. Source données chiffrées : SimilarWeb. Moyennes par sessions utilisateurs calculées pour le mois d’août 2015. 2 min 17 5 min 13 6 min 43 7 min 21 7 min 35 7 min 47 8 min 45 9 min 04 TEMPS MOYEN PASSES Les visiteurs de voyages-sncf.com passent en moyenne plus de 9 min sur le site par sessions, soit plus de 2 min que la moyenne des sites concurrents. Ils visitent plus de 9 pages pendant ce temps, soit en moyenne 3 pages de plus que la moyenne des concurrents. Ils prennent le temps de parcourir le site, lire les informations et dérouler l’ensemble du parcours client. Cela démontre une vraie appétence pour le site, et une envie de découverte des produits et services. Bris%sh'Airways' voyages0sncf.com' Air'France' TheTrainLine.com' Eurostar' Lu<ansa' Troc'des'Trains' Bahn.com' NOMBRE DE PAGES VUES 10,4 9,5 7,1 7 6,9 5,6 5,5 2,2
  13. 13. DES INDICATEURS AU VERT ! © Arnaud Petitbon 201513 Sur la base de l’observation des éléments tangibles que sont les indicateurs webanalytics, il apparaît que : • Les visiteurs affluent massivement vers le site et y restent. • le trafic est qualifié et le site répond de prime abord aux attentes, car le taux de rebond est bas. • les utilisateurs prennent le temps de naviguer dans le site et visiter les pages car le temps passé et le nombre de pages vues moyens sont élevés. • Les indicateurs sont meilleurs que les sites similaires de la concurrence : pas de problème de positionnement. La bonne expérience utilisateur se traduit donc dans les indicateurs statistiques.
  14. 14. PARCOURS CLIENT Sélection produit (1/2) © Arnaud Petitbon 201514 1 2 3 4 1. ACCUEIL (HOME PAGE) > Proposition des portes d’entrées dans le site > Rappel identité visuelle voyages-sncf / codes du groupe SNCF > Blocs e-commerce & informations sur l’ensemble de l’offre 5 2. RECHERCHE PRODUIT > Accès direct au bloc de réservation en zone de visibilité maximale > Saisie intuitive des critères de recherche 3. COMPARAISON PRODUIT > Page résultat : comparaison prix, horaires, confort > Retrouver son produit par simple contrôle 4. SELECTION PRODUIT / CHOIX DU PLACEMENT > Sélection intuitive du produit/tarif par clic sur la case correspondante > Choix du placement par clic sur zones déroulantes 5. RECAPITULATIF COMMANDE > Etape de Réassurance NB : Présentation du cas passant. L’objectif n’est pas de présenter l’ensemble des chemins de navigation.
  15. 15. © Arnaud Petitbon 201515 PARCOURS CLIENT Check Out (2/2) 6 7 8 9 6. IDENTIFICATION CLIENT Au choix : > Incitation à la connexion client > Incitation à la création de compte client > Commande sans compte (mode invité) 7. CHOIX OPTION « LIVRAISON » > e-billet / Retrait en Borne Libre Service / simple option à confirmer 8. INDICATION INFOS PASSAGER / CLIENT 9. PAIEMENT > Renseignement des informations de paiement (CB) > Réassurance « Paiement sécurisé » NB : Présentation du cas passant. L’objectif n’est pas de présenter l’ensemble des chemins de navigation.
  16. 16. © Arnaud Petitbon 201516 PARCOURS CLIENT Mobile 1 2 3 4 5 6 1. ACCUEIL (HOME PAGE) > Accès direct au bloc de réservation 2. RECHERCHE PRODUIT > Saisie intuitive des critères de recherche 3. COMPARAISON PRODUIT > Comparaison prix, horaires, confort… par simple contrôle visuel en scroll down 4. SELECTION PRODUIT / CHOIX DU PLACEMENT > Sélection intuitive du produit/tarif par clic sur la case correspondante > Choix du placement dans la page dédiée 5. RECAPITULATIF COMMANDE 6. RECAPITU- LATIF INFOS PASSAGER / CLIENT NB : Présentation du cas passant. L’objectif n’est pas de présenter l’ensemble des chemins de navigation.
  17. 17. PARCOUR CLIENT Multicanal, Multidevice © Arnaud Petitbon 201517 Clients POINTS DE CONTACT : MULTICANAL CANAL WEB : MULTIDEVICE Naviguer dans le site web Consulter les horaires Consulter les offres / promos Acheter Contacter le support client Voir / modifier ses infos clients Effectuer des opérations de SAV Courrier, newsletter Web, media sociaux, forum, TVI Personel naviguant Centre d’appel Support client Points de vente SNCF
  18. 18. UN PARCOURS CLIENT ADAPTE © Arnaud Petitbon 201518 • Le parcours est logique, cohérent et intuitif, il se déroule sans accroc. • Même s’il se déroule en plusieurs étapes (minimum 9), il conserve une impression de simplicité. • Il accompagne l’utilisateur pas à pas, étape par étape. • Il laisse le retour arrière possible (ex : modifier ses critères de recherche) et vérifie la volonté du client (ex : confirmer commande). • Le parcours nominal est allégé. Tout au long de la démarche, de multiple options permettent d’affiner le besoin ou personnaliser son produit. Cela nécessite néanmoins une bonne connaissance / maîtrise du site (plus fastidieux pour les novices). • Le parcours sur mobile reprend les mêmes étapes mais est encore plus simplifié. Avec ce parcours client, tout est réuni pour délivrer une bonne expérience utilisateur !
  19. 19. BILAN : UX GLOBALEMENT SATISFAISANTE © Arnaud Petitbon 201519 Les attentes des internautes sont conformes aux éléments proposés sur le site, dès la Home Page. Les indicateurs webanalytics généraux montrent une appétence pour le site, une navigation volontaire et profonde. Le parcours de navigation amène l’internaute vers l’achat des produits de manière simple et intuitive, au terme d’un parcours client logique, cross- canal & multi-device. Au final, le site permet de retrouver les informations recherchées, trouver simplement son produit et facilite l’achat. Il donne envie de revenir car il est « pratique et sympa ». Pour toutes ces raisons, on peut affirmer que le site joue son rôle et propose une expérience utilisateur globalement satisfaisante. Quels sont les éléments particulièrement bons pour l’Expérience Utilisateur ??
  20. 20. 20 QUELS SONT LES POINTS TRES POSITIFS DE L’UX ? AXE # 2
  21. 21. © Arnaud Petitbon 201521 BLOC RESERVATION AMELIORE (1/2) AFFICHAGE OPTIMISE > Simplifié par défaut, cela permet d’alléger l’affichage sur la home page pour une meilleure appréhension visuelle globale. > le clic dans l’un des champs déplie les critères de recherche avancés, permettant à l’utilisateur de personnaliser sa recherche selon son besoin. Des options de recherches supplémentaires sont proposées en mode dynamique selon les critères saisis. Le site laisse la possibilité d’accès à plus de critères pour les utilisateurs au profil plus particulier, sans alourdir l’affichage par défaut pour la majorité. Zone dépliée au clic
  22. 22. © Arnaud Petitbon 201522 BLOC RESERVATION AMELIORE (2/2) AUTO-COMPLETION Suggestion automatique de gares selon les premières lettres saisies BONS POINTS POUR L’UX Au final, le bloc réservation met en oeuvre des ajustements au service d’une meilleure expérience utilisateur, empruntant aux best practices web. GEOLOCALISATION GARE Plus ludique, le site propose la géolocalisation sur carte à proximité de l’adresse saisie
  23. 23. © Arnaud Petitbon 201523 BLOC RESERVATION : MES RECHERCHES MES RECHERCHES RECENTES > Permet de retrouver simplement ses précédentes recherches de billets, épargnant à l’internaute de ressaisir ses critères = gain de temps > Permet de « rattraper » les clients n’ayant pas finalisé un achat > Permet d’offrir un service indépendant du compte client et de la saisie de « préférences » dans son profil Nouveauté Rentrée 2015 BON POINT POUR L’UX Très pratique pour tout type d’utilisateurs, cette fonctionnalité est une best practice qui permet d’optimiser le taux de conversion.
  24. 24. PAGE RESULTAT © Arnaud Petitbon 201524 AVANT TABLEAU RECAPITULATIF C’est incontestablement le point fort de cette présentation des résultats de la recherche produit. Les utilisateurs sont friands de ce type de récapitulatifs, permettant de comparer en un coup d’oeil tarifs et horaires. Le clic sur les heures de départ fonctionne comme un système d’ancres, facilitant la navigation in-page. LISTE PRODUITS La présentation reste cependant assez fastidieuse, car longue et trop chargée en informations, ne facilitant pas la prise de décision. Une fois scrollée, il n’y a plus d’outil de navigation in- page pour revenir comparer avec les autres produits. Au final, la page de résultat offre une expérience utilisateur mitigée.
  25. 25. PAGE RESULTAT © Arnaud Petitbon 201525 APRES Nouveauté Rentrée 2015 RECAPITULATIF OFFRE PRODUITS > Présentation moderne, visuelle et intuitive > Présentation qui adopte les codes « universels » des distributeurs de titres de transport en ligne > Comparaison aisée des tarifs et horaires > Montée en gamme subtile facilitant l’orientation des clients vers les produits plus conforts, mais plus chers ! > Plus de détails / sélection produit par simple clic dans la case correspondante, qui déplie la zone correspondante. Cela laisse par défaut un affichage léger, avec seules les informations utiles à la décision. BON POINT POUR L’UX Incontestablement, la nouvelle présentation répond beaucoup mieux aux besoins des utilisateurs, en combinant le bénéfice d’un « tableau récapitulatif » avec une offre de produits synthétique, intuitive et visuelle. Cette page est l’un des meilleurs points d’amélioration de l’UX du site, qui facilite en même temps la navigation et l’aide à la décision d’achat.
  26. 26. PAGE RESULTAT © Arnaud Petitbon 201526 AVANT BLOC RAPPEL / MODIFIER RECHERCHE Autre atout de la nouvelle page résultat, c’est l’amélioration de la visibilité du bloc de rappel / modification des critères de recherche. Il a peu changé et reste à la même place, mais… > la nouvelle présentation des produits nécessite moins de scroll down, permettant de garder la fonctionnalité sous les yeux, en zone de visibilité maximale. > le bloc jour pleinement son rôle de réassurance (i.e. le site a bien pris en compte mes critères de recherche) > l’ergonomie simplifiée et le bouton « Rechercher » mis en valeur suggèrent davantage son utilisation qu’auparavant. DOUBLE GAIN L’utilisateur réassuré, peut relancer facilement et de suite une nouvelle recherche, plutôt que de quitter le site faute de trouver intuitivement la fonctionnalité. Il se sent plus libre, il vit une meilleure expérience utilisateur. Pour VSC, cela permet d’éviter de perdre des ventes par abandon, et donc d’optimiser la conversion. APRES
  27. 27. INCITATION CONNEXION LOGUEE © Arnaud Petitbon 201527 Nouveauté Rentrée 2015 Cette étape « anodine » pour l’utilisateur marque un pas décisif dans l’approche, la gestion de données client, et les services que voyages-sncf souhaite proposer à ses utilisateurs. De prime abord embêtante pour l’utilisateur, les bénéfices sont néanmoins importants. IDENTIFICATION / CREATION COMPTE CLIENT Cette étape suggère fortement, au choix : > l’identification avec son compte client > la création d’un compte client si l’internaute n’en a pas encore. Elle laisse cependant la possibilité de passer commande en mode invité par un bouton judicieusement grisé (i.e. non mis en valeur). BENEFICES VSC > Data catching pour le CRM > Tracking navigation / préférences de consommation pour enrichir la base de connaissance client > Personnalisation du site à l’utilisateur (optimisation UX) > Personnalisation du Content > Ciblage des offres poussées > Incitations au renouvellement d’achats > Lier l’utilisateur avec son programme de fidélité BENEFICES UTILISATEUR > Informations pré-renseignées à la commande (nom / coordonnées passager, programme de fidélité, titres de paiement) = signifiant saisie facilitée + gain de temps = meilleure expérience globale. > Personnalisation de la relation client-marque. > Profiter d’offres « sur- mesure » / de ses avantages fidélité
  28. 28. MOYENS DE PAIEMENT © Arnaud Petitbon 201528 Nouveauté Eté 2015 UTILISER UN MOYEN DE PAIEMENT ENREGISTRE La carte bancaire pré-enregistrée est proposée automatique- ment en fin de parcours d’achat (après identification client), afin finaliser plus simplement la commande et faciliter l’achat. Ce faisant, le site conserve un niveau de sécurité réassurant, en masquant une partie des chiffres et demandant le code de sécurité. PRATIQUE ! > évite l’effet dissuasif ou fastidieux de rentrer ses codes bancaires quand on veut juste terminer son achat. > anticipe l’abandon des ventes pour les personnes n’ayant pas leur carte sous la main ou qui n’ont plus le temps = permet de d’améliorer le taux d’abandon à une étape critique du parcours d’achat AJOUTER UN MOYEN DE PAIEMENT De plus, le site laisse la possibilité d’ajouter d’autres titres de paiement, pour plus de souplesse dans le choix de ses règlements.
  29. 29. PANIER MULTI-PRODUITS (1/2) © Arnaud Petitbon 201529 HAUT BAS Page Panier Desktop ENTREE / ICÔNE PANIER Accessible depuis la barre de menu partout dans le site, indiquant le cumul d’achat à payer. AJOUTER UN PRODUIT Fonctionnalité d’ajout d’un produit avant de finaliser l’achat SUPPRIMER UN PRODUIT Fonctionnalité laissant la liberté à l’utilisateur de supprimer un produit qu’il ne souhaite plus avant de finaliser son achat. Nouveauté Eté 2015 Produit 1 Produit 2
  30. 30. PANIER MULTI-PRODUITS (2/2) © Arnaud Petitbon 201530 PANIER SUR MOBILE > un bouton « ajouter un billet » > un bouton « supprimer » > icône panier mise à disposition dans la barre de navigation FONCTIONNALITE INDISPENSABLE A L’UX C’est une fonctionnalité dont voyages-sncf ne pouvait plus se passer face à la généralisation des habitudes et des codes de consommation sur le web, que les concurrents n’avaient pas manqué de mettre en place. Nouveauté Rentrée 2015 Page Panier Mobile Voyages-sncf a ouvert la possibilité de sélectionner plusieurs titres de transports avant finaliser le panier, sur desktop et mobile ! L’utilisateur peut désormais sélectionner plusieurs produits, puis régler son panier en un seul paiement. Il ne doit plus réitérer le parcours client pour chaque billet, apportant une bien meilleure expérience utilisateur.
  31. 31. OPERATIONS DE SAV © Arnaud Petitbon 201531 ENCORE UN DOUBLE GAIN Pour l’utilisateur, effectuer ses opérations de SAV en ligne est un gain en expérience utilisateur car il est totalement maître de ses démarches, en toute autonomie, à distance via internet s’il le souhaite. Pour VSC, cela permet d’aller plus loin dans la digitalisation de la relation client, la dématérialisation du billet, tout en simplifiant / allégeant les opérations de SAV en back-office. La marque peut désormais mettre davantage l’accent sur l’innovation, le service et la valeur ajoutée. Voyages-sncf a ouvert la possibilité d’effectuer des opérations très pratiques de service après vente directement en ligne, sur mobile et desktop : > ECHANGER SON BILLET > ANNULER SON BILLET Dorénavant, l’utilisateur n’est plus obligé, après avoir eu un parcours digital, de se déplacer en point de vente physique. Il peut effectuer ces opérations à tout moment selon sa convenance. Nouveauté Eté 2015
  32. 32. MON COMPTE CLIENT © Arnaud Petitbon 201532 DONNEES PERSONNELLES La section centralise toute les informations personnelles de l’utilisateur au même endroit. Cette page totalement dédiée permet à l’utilisateur de visualiser d’un seuil coup d’oeil toutes ses informations personnelles. L’interface permet à l’internaute de personnaliser son profil ou de modifier ses données personnelles. BON POINT POUR l’UX > Transparence jouée par la marque > Réassurance apportée pour le client qui peut ainsi se positionner dans l’univers SNCF > Laisser la main à l’utilisateur sur ses données personnelles
  33. 33. MYTRIPSET © Arnaud Petitbon 201533 MYTRIPSET HOME PAGE L’ergonomie de la page d’accueil de ce service Web est digne des meilleurs sites de e-commerce du moment : un grand visuel immersif, une baseline marketing claire (« comparer et réservez votre itinéraire »), des solutions multi-modes de transport, et une barre de recherche centrale immédiatement repérable et suggérant son utilisation.
  34. 34. © Arnaud Petitbon 201534 MYTRIPSET La fonctionnalité propose une ergonomie claire, intuitive, visuelle et apporte une touche ludique à la navigation. > Elle facilite la lecture et l’appropriation des informations par l’alignement des durées et tarifs d’une part, et la modélisation des itinéraires d’autre part. > Elle répond ainsi au besoin de simplicité de navigation des internautes. > Elle combine plusieurs modes de transports, permettant de mieux organiser ses voyages > Elle permet de comparer aussi en jouant avec le système de filtres.
  35. 35. © Arnaud Petitbon 201535 MYTRIPSETHome Page Desktop Ligne de flottaison ACCES MYTRIPSET L’accès à la fonctionnalité, pourtant plébiscitée par les utilisateurs qui la voient, reste très discrète et mériterait une meilleure mise en valeur. Actuellement, elle n’est accessible que depuis la home page, sous la ligne de flottaison et sous le bloc réservation qui concentre tout l’attention. UN SERVICE WEB BONUS POUR L’UX MYTRIPSET répond à un besoin en phase avec la réalité des voyageurs, leur permettant d’organiser leur déplacements à l’avance de manière optimisée. C’est une véritable offre de service web utile, qui aide à la décision d’achat. Le parcours est ludique et bénéficie d’une belle ergonomie. Le service et le parcours contribue à compléter agréablement l’expérience utilisateur sur le site.
  36. 36. DES POINTS TRES POSITIFS POUR L’UX © Arnaud Petitbon 201536 Les exemples ne manquent pas pour démontrer les bonnes initiatives entreprises par voyages-sncf afin de proposer une bonne expérience utilisateurs à ses visiteurs. La marque s’appuie autant sur les meilleures pratiques du métier que sur une vision propre et sur-mesure. En plus de jouer son rôle, le site web propose des items et fonctionnalités particulièrement positifs pour l’expérience client. Les éléments présentés ne sont pas exhaustifs. Ils ne constituent que des faits saillants particulièrement signifiants. Nous avions observés en première section une expérience globalement satisfaisante, sur la base de statistiques sur août 2015. Avec la mise en place des éléments très positifs pour l’expérience utilisateurs présentées dans cette seconde section, déployés récemment, il y a fort à parier que cela se traduira par des statistiques encore plus satisfaisantes d’ici à la fin d’année 2015. Pour autant, quels axes d’améliorations peut-on remarquer ?
  37. 37. 37 QUELS POINTS D’AMELIORATION POSSIBLES ? AXE # 3
  38. 38. REFONTE ERGO/DESIGN HOME PAGE © Arnaud Petitbon 201538 HOME PAGE LANDING PAGE ‘’Réservez’’ CONSTAT > la page apparaît chargée en informations et confuse dans son organisation > elle ne se positionne plus dans les codes des meilleures pratiques du métier du web. C’est un axe prioritaire d’amélioration à travailler, car une home page / landing page est la première chose que le visiteur voit. Si la page ne fait pas suffisamment envie ou ne guide pas l’internaute facilement dans sa recherche, il a vite fait de quitter le site. Il est essentiel de faire bonne impression dès le début ! Quels éléments amènent à ce constat ?
  39. 39. REFONTE ERGO/DESIGN HOME PAGE © Arnaud Petitbon 201539 CONSTAT #1 : BLOCS La page propose des blocs de tailles différentes et non alignés. Cela donne involontairement une impression de confusion, de fouillis. CONSTAT #2 : POLICES Sur la page son présentes plusieurs tailles et couleurs de police de caractères, également tantôt en gras, ombré, majuscule ou minuscule. Cela contribue également à l’impression de fouillis. CONSTAT #3 : INFOS Les informations proposées sont de plusieurs niveaux et natures, apparemment sans organisation logique. Cela contribue aussi à l’impression de confusion. Améliorer la cohérence et l’homogénéité de la charte graphique.
  40. 40. © Arnaud Petitbon 201540 #BENCHMARK BENCHMARK : COHERENCE GRAPHIQUE Sans aller bien loin, dans le site voyages-sncf on retrouve des landings page jouant parfaitement leur rôle et répondant aux codes des bonnes pratiques web : > un grand visuel immersif pour la zone d’exposition maximale, avec des portes d’entrées clairement identifiées et identifiables. > les blocs alignés et de tailles cohérentes facilitent la lecture des informations poussées sous la ligne de flottaison. > Les visuels en aplat permettent de structurer subtilement la page et guider le visiteur dans les thématiques abordées. Au final, elle offre une bonne cohérence graphique d’ensemble, facilitant l’appréhension globale des informations. Ligne de flottaison http://www.voyages-sncf.com/destinations/france/normandie La page est longue : proposer des outils de navigation in-page, comme un système d’ancres ou un bouton retour haut de page.
  41. 41. REFONTE ERGO/DESIGN HOME PAGE © Arnaud Petitbon 201541 CONSTAT #4 : BARRE DE MENU La barre de menu est positionnée sous deux autres niveaux d’entrées en haut de page. La multiplication des entrées dans le site sur trois niveaux différents est très confusante pour l’internaute et génère de l’incompréhension. 1 2 3 Dans la suite de la navigation, une bannière s’intercale au dessus des menus, accentuant encore plus l’impression de confusion. Epurer le haut de page, simplifier / optimiser la barre de menu et autres barres de navigation.
  42. 42. © Arnaud Petitbon 201542 CONSTAT #5 : REPETITION DES ENTREES Dans la même page, les entrées vers un même service / une même thématique sont répétées à plusieurs endroits pourtant situés à proximités. Ici, des icônes de la barre de menu sont répétées dans le système d’onglets du bloc de réservation. Cela contribue au sentiment de confusion général, n’aidant pas l’orientation de l’internaute. Pourtant, ces accès sont utiles pour amener les visiteurs vers les offres complémentaires de voyages-sncf. REFONTE ERGO/DESIGN HOME PAGE Privilégier une entrée unique correctement mise en valeur. Une entrée supplémentaire peut être envisagée à un autre endroit si elle est justifiée et apporte une valeur ajoutée.
  43. 43. #BENCHMARK © Arnaud Petitbon 201543 http://www.easyvoyage.com/ BENCHMARK : HAUT DE PAGE & BARRE DE MENU Le haut de page est allégé et la barre de menu correctement mise en avant. Le site laisse la possibilité d’accéder à plus d’information en déroulant des menus dédiés. Ils sont tous positionnés au même niveau. A noter que cela permet de mettre l’accent sur la barre de recherche centrale, porte d’entrée principale vers l’offre produit.
  44. 44. © Arnaud Petitbon 201544 REFONTE ERGO/DESIGN HOME PAGE CONSTAT #7 : MISE EN VALEUR CONTRE PRODUCTIVES D’un coup d’oeil général, on constate que : > le bloc de réservation, élément central et porte d’entrée principale du site est en blanc et non mis en valeur. Il est de plus coupé par la ligne de flottaison ! > l’attention est d’abord attirée par les éléments de couleurs "flashys" Ce choix de présentation manque de subtilité pour des internautes de plus en plus aguerris face à ce type de pratiques tout en alimentant un sentiment d’irritation et de confusion. Privilégier une cohérence graphique d’ensemble dans le choix des couleurs et visuels, qui va d’abord mettre en valeur les informations utiles à la cible des internautes Ligne de flottaison CONSTAT #6 : PUBLICITES Des espaces dédiés à la publicité sont disséminés dans la page à plusieurs endroits, nuisant à la cohérence graphique d’ensemble. La disposition actuelle fort visible accentue l’irritation que les visiteurs éprouvent généralement face à la publicité poussée sur les sites web, au détriment des informations utiles. Elle contribue à rendre le graphisme hétérogène.
  45. 45. #BENCHMARK © Arnaud Petitbon 201545 http://www.thetrainline.com/ BENCHMARK : COHERENCE GRAPHIQUE Le bloc de recherche produit est l’élément mis en valeur sur la home page, en zone de visibilité maximale. Pour autant, des portes d’entrées alternatives sont subtilement mises en valeur. A noter qu’ici aussi, le haut de page est épuré et les barres de navigation optimisées.
  46. 46. © Arnaud Petitbon 201546 REFONTE ERGO/DESIGN HOME PAGE CONSTAT #8 : FOOTER Le footer représente un tiers de la page au total. Pourtant, il propose en grande partie des entrées déjà proposées dans les barres de menu en haut de page ou dans les éléments de page, remettant en cause l’utilité d’un footer aussi long et détaillé. x3 http://www.bahn.de/ #BENCHMARK De son côté, la home page de la Deutsche Bahn a purement et simplement supprimé le footer !
  47. 47. © Arnaud Petitbon 201547 CHANTIER BIG DATA CONSTAT Il est possible de remarquer que voyayes- sncf a entrepris une refonte complète de son approche de la gestion des données clients, repensée plus globalement à l’aune du Big Data. Des initiatives intéressantes ont dores et déjà été entreprises. Cependant, l’avancée dans ce chantier de refonte nécessite des ajustements afin de délivrer une expérience utilisateurs toujours meilleure, autour d’un compte client unique et un parcours utilisateur fluide et sans couture. Quels éléments amènent à ce constat ?
  48. 48. © Arnaud Petitbon 201548 CHANTIER BIG DATA CONSTAT #1 : INCITATION A LA CONNEXION LOGUEE Dans le parcours actuel, l’internaute est incité à se connecter / créer un compte client APRES avoir sélectionné ses produits et AVANT de finaliser son achat. C’est à dire à un moment où il a l’impression que cette étape ne tombe pas au bon moment. Il est pourtant possible de se connecter dès la home page. Mais l’accès est modeste et discret. Cela serait pourtant plus pratique de le faire en début de parcours, avant d’entrer dans le tunnel de conversion. Identifier une solution d’incitation à la connexion loguée dès l’arrivée sur le site : pop-in, indicateur visuel, Facebook connect, connexion permanente à l’instar de l’appli voyages-sncf… Objectifs : > optimiser le data catching / tracking navigation > personnaliser l’affichage selon le profil client dès le début de navigation > simplifier le parcours utilisateur au moment de la finalisation de l’achat Le tout au service d’une meilleure expérience utilisateur ! #Benchmark : Indicateur visuel Next steps
  49. 49. © Arnaud Petitbon 201549 CHANTIER BIG DATA CONSTAT #2 : SYNCHRONISATION DES COMPTES CLIENT Une première étape a été franchie en fusionnant le compte portail (desktop) et le compte appli mobile, autour d’un même compte utilisateur, permettant de centraliser l’information sur un même identifiant. Mais le client conserve d’autres comptes en parallèle : le(s) compte(s) fidélité, le compte client « hôtel, vol, voiture ». Même si une liaison est faite, cela ne facilite pas la compréhension de cette coexistence, au détriment de l’expérience utilisateur. Et cela complexifie la relation client, car techniquement, l’information client est éclatée dans trois bases CRM. Une considération totalement étrangère à l’utilisateur final… Aller plus loin dans la refonte de l’architecture des données client, afin de proposer un compte client unique à l’utilisateur final, quelque soit son profil et ses habitudes de consommation. Next steps
  50. 50. © Arnaud Petitbon 201550 CHANTIER BIG DATA Desktop Mobile Desktop Mobile CONSTAT #3 : PAS DE SUIVI DU PANIER Le panier n’est pas multi- device, il ne suit pas l’utilisateur d’un appareil à l’autre. CONSTAT #4 : PAS DE SUIVI DES RECHERCHES Les recherches récentes ne se retrouvent pas non plus d’un appareil à l’autre. Les utilisateurs sont multidevice ! Travailler la synchronisation des données « Panier » et « Mes Recherches » afin que ces nouvelles fonctionnalités soient aussi multi-device ! Ainsi l’utilisateur peut préparer un achat et le finaliser sur un autre appareil, pour un parcours sans couture, et une meilleure expérience utilisateur. Next steps
  51. 51. © Arnaud Petitbon 201551 PANIER CONSTAT #3 : PUSH ASSURANCE ANNULATION Le push assurance annulation occupe une place importante dans le récapitulatif panier, nuisant de fait à sa lecture globale et son rôle de réassurance. Le push peut ainsi sembler irritant et intempestif pour les utilisateurs. De plus, les règles de gestion pourraient être affinées. Par exemple ici, pour un billet ouvert de somme modique, l’assurance annulation n’est pas justifiée. CONSTAT #2 : TIME OUT Après plusieurs tests, il apparaît que le panier n’est pas conservé longtemps en mémoire et qu’il disparaît sans logique apparente après un parcours de navigation alternatif. Conséquence, le panier est perdu alors que l’utilisateur pensait l’avoir sous la main. Il doit tout recommencer, au détriment d’une bonne expérience utilisateur. PANIER La nouvelle fonctionnalité Panier est bienvenue. Il reste à mettre en oeuvre les actions nécessaires à son optimisation : ergonomie, valorisation du produit vs allègement des pushs, temps d’affichage à calibrer. CONSTAT #1 : VISIBILITE L’accès au panier reste très discret. Contrairement aux concurrents, il n’est pas signalé par un indicateur visuel, indiquant la bonne prise en compte de l’ajout au panier.
  52. 52. #BENCHMARK © Arnaud Petitbon 201552 BENCHMARK : PANIER EPURE Le panier récapitule clairement les informations produits. Le panier apparaît entièrement en zone de visibilité maximale. Un avertissement prévient l’utilisateur de la durée de conservation de son panier. Les frais supplémentaires sont indiqués discrètement. Un indicateur visuel est inséré dans la barre de navigation pour signaler le panier rempli. https://www.thetrainline.com/buytickets/shoppingbasket.aspx
  53. 53. D’AUTRES IDEES… © Arnaud Petitbon 201553 DIMENSION VOYAGE Le produit d’appel est le billet de train, mais ce qui fait rêver est le voyage ! Or, l’offre de voyages-sncf est complète et permet de proposer des produits « Voyages ». A ce jour, cette offre de service complémentaire reste assez méconnue, et n’est pas assez valorisée dans les homes page / landing pages, sinon plutôt maladroitement. Pour autant, la dimension voyage est onirique et laisse la porte ouverte à beaucoup de créativité afin de valoriser l’univers VSC et faire monter en gamme le distributeur. Elle offre une base solide à l’engament et à une expérience utilisateur inoubliable. ENGAGEMENT Aujourd’hui, les programmes de fidélité SNCF récompensent les clients sur le volume d’achat (système des Smiles). Pourquoi ne pas repenser le système de récompense, en favorisant… : > le partage social > la recommandation > les avis consos > le parrainage > l’utilisation des applis (téléchargement…) > … L’idée est de mobiliser l’internaute et développer l’engagement vers la marque, tout en enrichissant l’expérience utilisateur.
  54. 54. Arnaud PETITBON © Arnaud Petitbon 201554 10 ans d’expérience en cabinet de conseil > Management des organisations > Gestion de projets > Assistance à maîtrise d’ouvrage 2 ans d’expérience en Marketing > Marketing produit (projet marketing, category management) > Marketing digital (UX, Analytics, Webmarketing) Double diplômes > EDHEC, Master 2 en business management > MBA MCI, Mba spécialisé en e-business
  55. 55. MERCI ! © Arnaud Petitbon 201555 Vous avez apprécié cette analyse de l’expérience utilisateur du site voyage-sncf.com ? Retrouvez-moi sur… LinkedIn : http://bit.ly/linkedIn-ArnaudPetitbon Mes articles : http://bit.ly/blogmbamci N’hésitez pas à me contacter ! arnaud.petitbon@gmail.com 06 73 00 52 91 Vous aimerez aussi travailler avec Arnaud pour accompagner vos projets digitaux et optimiser votre performance e-commerce !

×