Contenu connexe
Similaire à Analyse Expérience Utilisateur - Voyages-Sncf (20)
Analyse Expérience Utilisateur - Voyages-Sncf
- 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. 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. 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
- 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. 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. © 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. 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. 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. 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. 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. 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. © 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. © 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. 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. 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. 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 ??
- 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. © 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. © 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. © 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. © 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. 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 ?
- 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. 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. © 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. 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. © 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. #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. © 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. #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. © 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. © 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. © 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. © 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. © 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. © 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. #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. 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. 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. 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 !