20170614 ECCV n°35 Avis VS Hertz - Capitaine Commerce · Analyse de site mobile. 2 Merci à . 3...

Audit, Conceptionet Optimisation

de l'expérience utilisateur

Expérience client et collants verts n° 35

VS

Analyse de site mobile

2

Merci à

3

Agence d’audit et d’optimisation de l’expérience client digitale

www.wexperience.fr

3

Agence d’analyse de vos web analytics

www.digitaleez.fr

2 agences pour comprendre l’expérience utilisateur

http://www.wexperience.fr

http://www.digitaleez.fr

4

Matériel utilisé : 1 iPhone 6S pas tout neuf

Audit, Conceptionet Optimisation

de l'expérience utilisateur

Expérience client et collants verts n° 35

VS

ECC n°35 - Site mobile AVIS VS Hertz

6

Donner l’air d’être facile

Etre engageant

Offrir des résultats avec des choix clairs et avec des attentes correspondant aux attentes de l’utilisateur

Objectifs d’un site web mobile de location de voiture pour une première visite

Laisser une bonne impression à l’utilisateur

7

Marié, père de 3 enfantsDirecteur commercial…

Hubert - 45 ans[ persona primaire ]

……

…

Ordinateur fixe Windows vistaRésolution : 1280*800Navigateur : Internet Explorer 9

Iphone 6S

SituationActivitéCSP

Qualité(s)Défaut(s)

::

:::

Top logiciels et applications :

Matériel utilisé :

« Il me faut une voiture confortable et puissante »

Jean, sa femme et ses enfants vivent en centre ville et ont décidé de se passer de voiture. Désormais, lorsqu’ils partent en vacances, ils louent. C’est plus simple et Michel aime bien la possibilité de pouvoir rouler dans une voiture neuve dont il peut choisir le modèle.

Cette année, ils partent faire une grande excursion vers l’Espagne pendant 3 semaines avec leurs trois grands enfants. Il ne faut pas que la voiture soit un soucis, mais fasse partie du plaisir du voyage.

Sa mission : se faire une première idée des offres disponibles chez les grands loueurs, sans passer par un comparateur

Saisie rapide sans ou avec peu d’erreursNavigue au clavier dans les formulairesScrolle avec la molette de la sourisAjoute les pages à ses favorisSait ajouter des plug in

• Se méfie beaucoup d’Internet :-) Préfère les bons vieux téléphones et les faxs ;-)

• Réalise toutes ses démarches administratives par courrier ou en se déplaçant dans les organismes. N’hésite pas à se déplacer loin de son domicile.

• N’aime pas renseigner ses données bancaires en ligne. Fais attention à la présence d’un cadenas sur les sites internet.

Habitudes :

Expertise internet :Sur ordinateur fixe ou portable

Moyenne

Ses sous-objectifs :- trouver le meilleur prix, son budget max est de 1500€- trouver une voiture pouvant accueillir 5 grandes personnes avec bagages

Facteurs à prendre en compte pour l’analyse :- S’y connait peu en modèle de voiture- C’est la première location de Jean et il n’a pas l’habitude de le faire- Il ne connaît aucun des deux sites qu’il visite

Expertise internet :Sur smartphone

Moyenne

Possède son smartphone depuis plus de 6 moisMaintient son smartphone avec une main et navigue avec la secondeNavigue et maintient son smartphone avec 1 mainConsulte son téléphone plus de 10 fois/jourTélécharge et utilise des applications


Arrivée sur le site


9

Dans les deux cas, l’arrivée sur le site est compliqué par l’affichage légal sur les cookies. C’est gênant dans les deux cas, mais encore plus dans celui de Hertez qui occupe carrément toute la place.

On ne sait même pas où il faut cliquer pour faire disparaître le texte.

A noter : la reconnaissance de langue automatique pour les deux sites. On verra après que ça n’est pas toujours le cas.

Vide Dressing Vestiaire Collective

Je n’aime pas trop bien cette histoire de gâteaux.

Avis Hertz


10

Quand il arrive sur le site, Michel décide de suite de lancer une recherche (c’est ce que le site l’incite à faire, puisqu’il y a un gros call-to-action visible et mis en avant.

1 bon call-to-action, c’est :• 1 couleur saillante• 1 taille suffisamment

grande par rapport à la taille de l’écran (mais pas trop)

• 1 libellé court et explicite• de l’espace autour du

bouton pour bien le faire voir

• 1 position au dessus de la ligne de flottaison pour toute suite faire comprendre l’action principale de l’écran

Vide Dressing Vestiaire CollectiveAvis Hertz

L’écran de Hertz est beaucoup moins intuitif.L’ensemble de l’écran a l’air plus compliqué, car rien ne vient particulièrement guider le regard.

• il n’y a pas de call-to-action visible (diminution de l’engagement)

• la quantité d’information visible est trop grande et les textes sont trop petits, ce qui renforce l’impression de complexité

• L’interaction principale semble être « se connecter », or, ce n’est pas ce que veut Michel puisque c’est sa première connexion et qu’il veut juste faire une première évaluation des offres


11

En arrivant sur Avis, Hubert utilise directement la géolocation pour gagner du temps. Inconvénient, elle ne marche pas et le message est en anglais.Bien que Michel puisse tenir une conversation sur Shopenhauer dans cette langue et qu’il comprenne parfaitement le message, il a l’impression qu’il s’agit d’un bug système et cela lui donne une mauvaise impression de la qualité du site.

Vide Dressing Vestiaire CollectiveAvis

Pourquoi me parle-t-il en anglais, maintenant ? Encore

un coup de la CIA !


12

N’ayant pas l’habitude de louer de voiture (c’est tj son assistante qui s’en charge, quel veinard !), Hubert pense d’abord à rentrer son adresse.Il pense que le système lui donnera ensuite le nom et l’emplacement de l’agence la plus proche, mais… ça n’est pas ce qui se passe et il ne comprend pas le résultat qui lui est adressé.

Ça commence à l’énerver.


Toi, mon bonhomme, tu ne vas pas t’en sortir

comme ça…


13

Après plusieurs essais, il a l’idée de taper simplement Lille et là, miracle !, le site lui affiche enfin les agences de location de sa ville !


Evidemment, une fois qu’il a compris l’astuce pour le site de Avis, il va beaucoup plus vite ensuite pour le site de Hertz. Avantage pour Hertz !

Cette expérience prouve que lorsque l’on teste un site ou une application, il faut savoir changer l’ordre des choses pour détecter des défauts qu’on ne verrait pas forcément lors d’une visite.

A noter :• la géoloc de Hertz ne

fonctionne pas plus que celle d’Avis

• Entrer une adresse ne fonctionne pas mieux sur Hertz que sur Avis


14

Le choix de la date et de l’heure est assez instinctif sur Avis.

Même si il n’y a pas de champs de formulaire, l’ « affordance » des boutons semblent suffisamment bonne pour qu’on ait envie de cliquer naturellement dessus (mais ça serait à vérifier en test utilisateur)

Affordance : La capacité d’un objet à suggérer sa propre utilisation


Sur Hertz, on retrouve une mise en forme tout ce qu’il y a de plus classique pour le choix de l’heure et de la date. On ne peut pas se tromper.

L’ensemble reste moins confortable que sur Avis, les zones de clic étant plus petites.

Loi de Fitts : la loi de Fitts est un modèle du mouvement humain, prédisant le temps requis pour aller rapidement d’une position de départ à une zone finale de destination, en fonction de la distance à la cible et de la taille de la cible.


15

D’un point de vue ergonomique, les écrans de choix de date sont bien présentés :

• l’utilisateur ne peut faire qu’une seule action, il n’est pas dispersé par plusieurs choix

• le calendrier occupe tout l’espace de l’écran, pas de dispersion

• il est simple, lisible, classique, on ne peut pas se tromper


Le choix de la date et de l’heure sur Hertz sont plus classiques, mais on voit bien immédiatement l’inconvénient d’avoir gardé les autres informations à l’écran.

• C’est moins lisible• On peut quand même faire

d’autres choix alors qu’on était déjà en train d’en faire un en premier


16

Vide Dressing Vestiaire CollectiveHertz

Le truc insupportable ! Un code mal fait qui fait zoomer automatiquement sur la page et crée un scroll horizontal.

Tous les champs apparaissent désormais tronqués et l’application semble désagréable à utiliser, car elle demande beaucoup plus d’efforts à devoir sans arrêt scroller de gauche à droite pour atteindre les différents champs.


17


Exemple : pour un utilisateur néophyte, le fait de ne plus voir les flèches des menus déroulants va introduire un doute dans son esprit et il ne saura pas naturellement s’il peut cliquer directement sur le menu déroulant ou devoir scroller à gauche pour faire apparaître (s’il y en a une) la flèche du menu déroulant pour pouvoir cliquer dessus.

Respire, Jean, respire.


18

Grâce à cette présentation « raccourcie » de la date et de l’heure, la lisibilité des informations est très bonne, rapide et sans ambiguité, cela permet à l’utilisateur de na pas avoir à revérifier plusieurs fois de suite ses choix.


Sur Hertz, c’est à peu près aussi clair, mais l’information est un peu moins bien organisée à l’écran et est perdue, comme on l’a déjà vu, au milieu d’autres informations, ce qui diminue le confort de lecture.


19


AVANTAGE AVIS

Formulaire de recherche


20

Pistes d’optimisation

Avis Hertz

Diminuer la taille d’affichage du texte sur les cookies

Ne pas afficher la géoloc si elle ne fonctionne pas

Permettre une recherche d’agence par adresse

Afficher l’écran de choix de la date comme sur Avis

Afficher moins d’infos sur l’écran de recherche

Remonter les call-to-action et surtout, changer les libellés !!!


21

Après cette première étape, Hubert est prêt à découvrir les résultats de recherche.

Je ne pensais pas que partir en vacances

en famille serait si compliqué


Présentation des offres


23

Sur Avis, à nouveau, la présentation est claire et moderne. Les véhicules ne sont pas présentés dans leur entier et l’usage d’une photo tronquée permet de les afficher en plus grand (ce qui crée une meilleure émotion).

Les informations sont claires :• le prix est très visible• le modèle également


Pas mal, les gars, pas mal !


24

Mais toute l’info pour chaque véhicule n’est pas disponible immédiatement à l’écran. Il faut scroller pour commencer à avoir du détail.



25

Autre inconvénient, Jean est obligé de scroller et de passer plusieurs offres pour découvrir un peu plus tard le type de véhicule qui l’intéresse.

A noter :• - il y a 2 CTA pour chaque

véhicule : «détails» et « continuer ».

• Comme je l’ai déjà souvent dit « continuer » constitue un libellé imprécis qui ne permet pas de comprendre vraiment ce qui va se passer ensuite.



26

Il est assez difficile de se repérer pour Hubert dans les différentes catégories de véhicule. Elles sont bien spécifiées, mais il se fie plutôt au nombre de places et de bagages par véhicule pour faire son choix (ce qui lui parle plus).

Il s’arrête sur la Peugeot 3008 (il ne sait pas vraiment ce que c’est) et clique sur « détails » pour en savoir plus.

Recommandation :• n’essayez pas de mettre

tous les critères discriminants dans la fiche produit, choisissez ceux qui parlent le plus à vos utilisateurs.

• Mettez les critères moins importants dans une seconde page ou en plus petit en bas de la page.



27

Une popin s’affiche à l’écran, mais ne lui donne pas plus d’informations. Hubert se demande vraiment à quoi sert ce bouton « détail » si c’est pour lui afficher exactement la même chose.

Seul le libellé du CTA a changé, mais celui-ci n’est pas tellement plus clair : « Sélectionner un véhicule » fait-il allusion au véhicule en cours ou bien à la possibilité de choisir un autre véhicule similaire à celui-ci.Hubert ne trouve pas ça très clair.


Je ne comprends rien à ce site


28

Hubert n’étant pas né de la dernière pluie, il scrolle doucement le contenu de la popin (même si rien ne lui indique qu’il peut le faire) et là, Ô stupeur, découvre qu’il y a d’autres informations qui l’intéresse.



29

Il trouve les infos sur les prix claires.

A noter : la bonne utilisation des espacements, de la longueur des textes qui sont courts, des icônes rouges qui accrochent le regard et scandent le rythme visuel de la popin.

Petit problème : la croix pour refermer la popin disparait quand on scrolle. Pendant quelques instants, Hubert se demande comment il doit faire pour revenir à l’écran précédent ce qui a le don de l’énerver…


« Non compris ». Moi non plus, je ne comprends

pas.


30

Hubert est un peu effrayé par les prix. Il se demande s’il n’a pas raté quelque chose, car, pour l’instant, aucun véhicule ne lui convient, surtout en terme de prix.

Instinctivement (convention), il chercher vers le haut de l’écran (scroll vers le haut) un système qui lui permettrait d’affiner sa recherche.



31

Le système de filtre est simple et ne lui permet pas beaucoup de choix dans les options, mais cela lui convient, car correspond à son caractère pressé.

Il clique sur « Appliquer »



32

Mais, à nouveau, les choix qu’on lui propose ne correspondent pas à ce qu’il recherche en terme de prix et de modèle.

Il décide de passer à un autre site.


C’est décidément bien plus comliqué que ce que

je ne pensais.


33

Sur Hertz, il semble qu’il y ait directement les choix qu’il recherche.Un logo Family Collection le renforce dans sa conviction sur le fait qu’il se rapproche du résultat.

En revanche, il ne voit pas, d’emblée de jeu, où il doit cliquer pour avoir plus d’information sur la catégorie de véhicule qu’il voit.



34

Il déroule la page et voit plusieurs véhicule de la catégorie « Family », mais, hormis le prix, il ne comprend pas ce qui distingue ces différentes offres. Il regrette notamment de ne pas voir les informations sur le nombre de bagages et de passagers comme sur Avis.

Intuitivement, il clique sur le petit « i » d’information (décidément très petit, il doit s’y prendre à plusieurs reprises pour qu’il se passe quelque chose).

Recommandation : toutes vos zones de clics devraient faire au moins 1cm sur 1cm pour offrir le confort d’utilisation maximale.



35

Hourra ! Voilà les infos qu’il recherchait sur les passagers et les bagages.Et, coup de chance, le véhicule qu’il vient de choisir correspond tout à fait à son besoin (même s’il n’apprécie pas trop les Ford).

Il aimerait maintenant bien en savoir plus sur les conditions de l’offre, mais il ne voit pas où il pourrait cliquer pour les trouver.

Encore une fois, il essaye plusieurs clics au hasard et, après avoir cliqué sur l’image de la Ford Grand C-Max, il trouve ce qu’il cherche.

Attention à vos problématiques d’affordance, faites tj attention à rendre vos liens bien détectables.


J’ai l’impression qu’on me cache quelque

chose… mais quoi ?


36

Ce sont à nouveau des infos sur le véhicule qu’il recherchait, mais il y en a d’autres !

Tout ça n’est pas fait pour le confort des quarantenaires se dit-il, lui qui commence à devenir un peu presbyte.Ces petits caractères sont juste une ignominie pour lui et ne lui donne pas vraiment envie de lire.



37

Hubert cherche plus d’infos sur les conditions de location de la voiture. Il revient sur la page précédente et scrolle vers le bas de la page (convention) dans l’espoir de trouver quelque chose qui pourrait l’intéresser.

En bas, il trouve deux liens, pas très visibles, qui pourraient lui apporter plus d’infos.

Après deux « taps » maladroit, il parvient à ouvrir le lien.

Astuce : rendez les liens importants plus accessibles, plus rapides d’accès (Loi de Fitts) en les positionnant, si possible, à chaque endroit où la personne va en avoir besoin.



38

Un menu se déploie et Hubert découvre énormément d’informations qui lui paraissent intéressantes (même si il trouve que d’avoir choisi du bleu clair sur fond blanc et d’avoir écrit les infos aussi petit est juste une horreur).

Conseil : • Quand il y a beaucoup de

liens dans une liste à puce, les catégoriser et les hiérarchiser.

• Penser aussi à agrandir l’espace entre les lignes pour éviter que le doigt de l’utilisateur ne clique à la fois sur 2 liens.



39

Après avoir cliqué sur les informations de condition de location, Jean découvre que pour continuer, il doit choisir sa langue (mais pourquoi ?)

Conseil :• Evidemment, ne pas

demander la langue de l’utilisateur une fois qu’elle a déjà été choisie

• Ne pas obliger l’utilisateur à faire un clic supplémentaire et inutile pour continuer dans sa navigation

• Eviter les couleurs qui font un contraste faible (jaune sur fond gris) et diminuent la lisibilité.



40

Après avoir choisi le français, Hubert doit patienter quelques secondes pour qu’un document se télécharge. Une fois qu’il s’affiche, Hubert est totalement découragé. Il s’agit d’un pdf et devant la quantité d’informations qu’il découvre, il n’a pas du tout envie de continuer sa navigation.

Après avoir essayé plusieurs liens et découvert le même problème, Hubert jette son téléphone contre le mur de son salon et prend un bon vieux journal et un verre de whisky pour se détendre.

Conseils :• Lorsque vous faites

télécharger un doc à un utilisateur, prévenez-le à l’avance du contenu du lien (voir écran précédent)

• Ne faites pas télécharger de doc sur un smartphone :-)

Vestiaire CollectiveHertz

Ah ah ah !You must be kidding me!*

* Ah ah ah ! Vous devez me plaisanter (traduction approximative)


41


AVANTAGE AVIS

Présentation des offres


42

Pistes d’optimisation

Avis HertzPermettre de visualiser plus rapidement la liste des véhicules proposés (en

diminuant la hauteur de l’affichage pour chaque véhicule)De manière globale, augmenter la taille des polices de caractères, rendre plus

accessible et plus lisible les informations

Permettre de filtrer plus vite les résultats de recherche Retravailler les libellés des CTA (à AB tester)

Changer le libellé du CTA principal de « Continuer » à « Louer cette voiture » Améliorer la visibilité des liens d’informations

Laisser le bouton de fermeture de la popin d’infos tj visible à l’écran Travailler la mise en forme des textes en les racourcissant, les hiérachisant, en regroupant les items en blocs

Faire attention à l’utilisation des couleurs des textes

Supprimer les docs pdf et/ou avertir de leur téléchargement


43

Hubert n’a pas beaucoup avancé dans sa recherche.Il a, certes, trouvé des infos qui l’intéressent sur Hertz, mais le site était tellement mal fait qu’il l’a découragé à continuer sa navigation.

Il continuera ses recherches, mais au bureau et en demandant à son assistante de s’en charger pour lui.

Béatrice, mon petit, j’ai une mission de la plus haute importance

pour vous !


Conclusion


Le vainqueur : AvisIl n’y a pas photo, le site mobile d’Avis est bien plus moderne et répond bien plus aux exigences d’utilisabilité actuelles que celui de Hertz qui mériterait un sérieux coup de peinture (ce qui est peut-être en cours).

Avis contient moins de contenus, mais est plus simple à appréhender, car il diminue le nombre de choix et de choses à voir.

C’est une bonne leçon à retenir.

MERCI !Et pour continuer l’aventure, faites appel Wexperience

La meilleure agence d’UX pour le e-commerce en FranceOlivier Sauvage

[email protected]él : 03 20 65 61 93

mailto:[email protected]

20170614 ECCV n°35 Avis VS Hertz - Capitaine Commerce · Analyse de site mobile. 2 Merci à . 3...

Documents

Transcript of 20170614 ECCV n°35 Avis VS Hertz - Capitaine Commerce · Analyse de site mobile. 2 Merci à . 3...