Vous vous êtes sans doute déjà demandé ce qu’est un site performant ? Et vous n'arrêtez pas d'entendre parler d'UX Design (ou design d'expérience utilisateur) ?
C’est en mettant l’utilisateur au cœur de la conception, en observant et en testant la façon dont il utilise votre site, que vous parviendrez à en faire un outil réellement performant.
Nous aborderons quelques méthodes et outils pour répondre à ces enjeux et vous donner les clés pour les appliquer à vos projets.
10. Notes
Pour Amazon, c’est de vous vendre un maximum de produits.
Ou pour Facebook, c’est que vous puissiez renseigner un maximum de données
personnelles pour servir le ciblage de ses publicités.
11. 40% des utilisateurs quittent un site
s’il prend plus de 3 secondes à charger
https://blog.kissmetrics.com/loading-time/
12. Notes
Si le site n’est pas performant, l’utilisateur ne l’utilise pas.
Le site n’est donc pas performant non plus pour l’annonceur.
13. 100 ms de temps de chargement en plus
coûte à Amazon 1% de chiffre d’affaires.
0,5 s en plus pour afficher une page de résultats
coûte à Google 20% d’audience.
http://glinden.blogspot.fr/2006/11/marissa-mayer-at-web-20.html
14. Notes
Vous connaissez peut-être ces chiffres. Ce sont de vrais chiffres, issus
d’expérimentations chez Amazon et Google.
Ils datent de 2006. On peut penser que les utilisateurs sont encore plus sensibles à ce
type de performance aujourd’hui.
15. Pour rendre le site plus performant pour l’annonceur,
il faut qu’il soit plus performant pour l’utilisateur.
16. Notes
C’est une situation dans laquelle les deux parties prenantes n’ont pas forcément des
objectifs contraires.
18. Notes
Ce n’est qu’un critère parmi tous ceux qui font que l’utilisateur est satisfait de
l’utilisation du service.
Il y a d’autres moyens pour faire en sorte qu’il ait une bonne « expérience utilisateur ».
19.
20. Notes
Par exemple, « performant » ça peut vouloir dire rassurant. Et dans certains cas,
quelque chose qui irait trop vite ne serait pas rassurant.
Exemple du restaurant gastronomique, où l’expérience client passe par le fait de
prendre le temps de bien l’accueillir avec tout le cérémonial qu’on en attend. Ou d’un
service dont on attend qu’ils soit sécurisé (banque, etc).
Exemples : Un loader peut aider à comprendre que les éléments d’une page sont en
train de charger.
Une animation un peu plus poussée permet même de donner de l’intérêt à l’attente.
La structure du site peut aussi apparaitre sans le contenu pour préparer l’utilisateur à
l’affichage des données.
21.
22. Notes
Vous connaissez sans doute le jeu avec le dinosaure que propose Chrome en mode hors
connexion ? Il permet d’illustrer qu’une expérience négative pour l’utilisateur pour se
transformer en expérience positive, à travers un petit jeu tout bête (où l’on fait avancer
le dinosaure via la barre espace).
26. Notes
L’expérience utilisateur, qu’est-ce que c’est ?
On peut prendre l’exemple de l’expérience utilisateur dans une montagne russe.
Et bien, on y maitrise tous les paramètres : on sait que l’utilisateur va passer un bon
moment : il est captif, il est sanglé, on sait à quel moment il va arriver, il part d’un point A
à un point B, un flash va se déclencher à tel moment pour la photo…
28. Notes
Et bien, ça ne se passe pas comme ça. Parce que la structure du web est une toile avec
plein de chemins différents possibles. Plus le site est complexe, plus le nombre de
chemins augmente.
L’UX permet offrir le maximum de confort à tous les utilisateurs en anticipant au
maximum leur cheminement, leur navigation.
30. Notes
C’est pourquoi la démarche UX vise à observer et tester les usages des utilisateurs.
Même si l’utilisateur est au centre de nos préoccupations, l’approche UX peut être
réalisée sans sa présence réelle.
32. Notes
La pratique de l’UX en agence est composée de la façon suivante :
1/3 viennent du dév
1/3 viennent de la com/crea
1/3 viennent des sciences sociales
33. LES ANALYTIQUES
DES PROFILS TRES DIGITAUX
ISSU DU DEVELLOPPEMENT
OU DU SEO
CE QU’IL LEUR FAUT :
DES DONNÉES ET DES OUTILS
34. LES INTUITIFS
DES PROFILS ISSUS
DE LA COMMUNICATION
OU DE LA CRÉATION
CE QU’IL LEUR FAUT :
DE L’EXPERIENCE
35. LES ITERATIFS
DES PROFILS ISSUS
DES SCIENCES HUMAINES
CE QU’IL LEUR FAUT :
DU TEMPS ET DES UTILISATEURS
37. Notes
Malgré leur connaissances du produits et leurs compétences professionnelles, les
concepteurs / les annonceurs ne sont pas les utilisateurs.
Ils peuvent avoir des idées préconçues, des habitudes, des biais.
Ce que nous pensons et savons n’est pas forcément faux, mais nécessite d’être validé et
testé.
Nous allons donc aborder la méthode complète et idéale de ce que devrait être une
démarche UX permettant d’éviter ces écueils.
40. Notes
Observer les utilisateurs permet d’identifier leurs besoins et leurs usages.
On peut les observer de façon directe (en regardant comment ils se comportent) ou de
façon indirecte, en étant à l’écoute de ce qu’ils disent.
44. Kantar TNS :
Les Millenials passent une journée par
semaine sur leur smartphone
http://www.tns-sofres.com/publications/les-millennials-passent-un-jour-par-semaine-sur-leur-smartphone
47. Notes
Là, pas d’outil secret, Google est votre meilleur ami.
Vous cherchez des concurrents et vous allez voir ce qu’ils font.
Est-ce que c’est tricher ? Non, pas forcément. Mais ça peut être contre productif : il ne
s’agit pas de copier à tout prix le voisin. Sinon tous les sites e-commerce peuvent copier
Amazon. Mais ce serait oublier qu’Amazon a probablement des problématiques
différentes de celles de la plupart des sites e-commerce.
50. Notes
Sur les stores d’applis par exemple, vous pouvez voir ce que les utilisateurs apprécient,
ou pas, dans une application concurrente.
51.
52. Notes
En prenant le temps d’étudier en détail ce qui se dit, on peut avoir des informations
réellement intéressantes : ce que ces utilisateurs (dans l’ensemble plutôt satisfaits)
reprochent à l’application, c’est sa lenteur au démarrage. Due à la publicité.
Peut-être qu’une piste serait, non pas de supprimer la publicité, mais de la déplacer.
Pour que les utilisateurs accèdent plus rapidement à l’information basique qu’ils
souhaitent et qu’ils lancent l’application plus souvent.
Par exemple , certaines éditeurs de jeu portables , ont eu l’idée de lier l’accès à des
bonus aux visionnages de publicités. Pratique efficace , car l’utilisateur a choisi le
visionnage.
53.
54. Notes
Sur les réseaux sociaux, vous pouvez faire confiance aux utilisateurs pour vous
remonter TOUS les problèmes qu’ils rencontrent.
Les gens pas contents sont les plus nombreux sur ces réseaux, mais sont utiles pour
améliorer le service.
59. Notes
Vous avez probablement Google Analytics sur votre site.
Analytics ne sert pas simplement à savoir combien de visiteurs sont passés sur votre
site.
Même sans paramétrage compliqué, vous avez accès à ce type d’information : c’est une
représentation des parcours utilisateurs sur votre site. Il est ainsi possible de savoir, par
exemple, quand les utilisateurs quittent le site, et donc d’améliorer les pages qui
fonctionnent moins bien.
63. Notes
Définir un panel, recueillir des informations. Pourquoi c’est bien ?
- c’est facile
- ça peut être presque gratuit
Vous lancez un blog, vous demandez à vos clients actuels quelles thématiques / formats
les intéressent.
Si vous vendez du matériel de jardinage, vous demandez à vos clients s’ils souhaitent
des tutoriels vidéo ou des articles sur les plantes de saison.
Les outils pour mettre en place ce type d’enquête sont accessibles : vous pouvez utiliser
Google Forms pour le questionnaire : c’est gratuit. Et vous pouvez envoyer votre
questionnaire directement par email ou en utilisant un plateforme de mailing comme
Mailchimp.
65. Notes
Le but d’une interview c’est de comprendre.
Si vous avez la chance pour pouvoir poser des questions directement aux utilisateurs, il
faut en profiter pour obtenir des informations qu’on ne peut obtenir par la simple
observation.
Dans tous les cas, il est important que garder en tête ce que vous souhaitez savoir et
donc de poser un nombre limité de questions.
Vous pouvez même poser très peu de question et choisir un entretien libre dans lequel
le participant s’exprime et où vous n’intervenez que pour relancer la discussion.
Sinon, dans le cadre d’un entretien plus directif, veillez à bien poser les mêmes
questions à chaque fois.
Et, surtout, laissez parler le participant. Sinon, autant réaliser une enquête.
67. Notes
Il consiste à observer les utilisateurs « dans leur milieu naturel ».
Il ne s’agit pas de testeurs que l’on convoque.
Par exemple, si vous avez une application qui donne les horaires du métro, vous allez
voir dans les couloirs d’une station ou dans une rame pour observer, par exemple,
comment les utilisateurs se servent de leur smartphone. C’est un exemple un peu
caricatural, mais là vous allez observer que les utilisateurs sont debout, tiennent leur
téléphone d’une seule main et que ça bouge pas mal. Donc vous allez éviter d’écrire
trop petit, de faire des boutons trop petits et placer les contrôles principaux en bas de
l’écran, où ils sont plus accessibles avec une seule main.
69. Notes
Les ateliers consistent à travailler en groupe avec des utilisateurs ou d’autres parties
prenantes.
Leur bon côté, c’est qu’ils permettent de travailler en groupe et donc de confronter des
points de vue.
Le mauvais côté, c’est que quand on est en groupe, il arrive que les personnalités les
plus fortes (ceux qui parlent le plus fort ou ceux qui sont le mieux placé dans la
hiérarchie) aient un poids disproportionné.
Il faut donc réussir à mettre en place des règles ou des stratégies permettant de
contourner ce biais.
71. Notes
Nous allons faire une petite parenthèse pour nous arrêter sur une présentation un peu
plus détaillée de ce que peut être un atelier.
Je vais vous présenter un atelier qu’on avait organisé il y a quelques temps pour un
client.
L’atelier s’appelle « Buy a feature », « Achetez une fonctionnalité ».
73. Notes
Un client refond son application de domotique. Il nous demande donc d’imaginer des
fonctionnalités originales, et si possible utiles.
On se retrouve donc avec plein de nouvelles fonctionnalités, en plus de celles qui
existent déjà. Et le client se dit : « On ne peut pas tout mettre, et puis tout n’intéresse
peut-être pas les gens ».
Donc : comment savoir quelles fonctionnalités ont un intérêt pour les utilisateurs ?
75. Notes
En organisant un atelier, pardi !
Et donc on invite des utilisateurs à deux ateliers d’une demi-journée.
Mais pour contourner les biais dont nous parlions plus haut, il faut mettre en place une
stratégie qui donne à chaque utilisateur les mêmes chances de se faire entendre.
77. Notes
Le principe de l’atelier Buy a Feature c’est de forcer l’utilisateur à faire des choix.
On fixe un prix à chaque fonctionnalité et on donne un budget à nos utilisateurs.
Et puisque « Choisir c’est renoncer », on ne lui donne pas assez de budget pour tout
acheter. Sinon, ce n’est pas drôle. Et puis c’est inutile, surtout.
On recommande de donner entre 30% et 50% du montant total en budget.
On peut organiser l’atelier selon deux variantes : chaque utilisateur dispose de son
budget propre ou alors il y a un budget commun sur l’utilisation duquel les participants
doivent s’accorder.
Le problème de ce second choix, c’est qu’on risque de trouver le biais évoqué plus tôt :
c’est le patron qui aura le dernier mot, ou celui qui parle le plus fort.
79. Notes
Il faut fixer le prix de chaque fonctionnalité. Ce prix dépend de plusieurs paramètres.
D’abord, le coût réel de déploiement de la fonctionnalité. Si on vous demande de
choisir entre un site e-commerce ou une page Facebook, on se doute bien qu’il y en a un
qui coûte un peu plus cher que l’autre.
Ensuite, l’intérêt de la fonctionnalité pour l’entreprise. Peut-être que mettre en place
une fonctionnalité à un bénéfice supplémentaire pour l’entreprise. Ça peut-être un
bénéfice commercial, ou en terme d’image, parce que c’est super innovant et que vous
serez les seuls à le faire.
Cet intérêt, il va avoir comme conséquence de faire diminuer le prix de la
fonctionnalité.
Et pour définir le montant de cette réduction, on demande au client -l’entreprise qui
refond son application, dans notre cas- si elle voit un intérêt particulier pour chaque
fonctionnalité.
Pour ça, on organise un nouvel atelier, avec les chefs de produit par exemple.
C’est l’atelier dans l’atelier.
81. Notes
On commence par expliquer le principe de l’atelier aux utilisateurs, puis on leur
présente l’ensemble des fonctionnalités proposées.
Bien entendu, pour la réussite de l’atelier, il est important que tout le monde
comprenne bien tout ce qui est proposé.
Ensuite, on joue à la marchande.
On va récupérer trois types d’informations, dans cet atelier :
- information quantitative : on sait quelles fonctionnalités ont été choisies, et dans
quelle proportion.
- il est également important de demander aux utilisateurs de justifier leur choix
(exemple : certaines fonctionnalités ont été choisies exclusivement par des hommes
« pour leur femme ».)
- enfin, l’ambiance assez ludique de l’atelier et le fait que l’on demande aux utilisateurs
de s’exprimer permet également de recueillir des informations plus générales sur
l’entreprise, les produits et la vision qu’en ont les utilisateurs.
83. Notes
Observer c’est bien, mais il faut formaliser ce qu’on a observé.
C’est un exercice qui peut prendre de nombreuses formes, suivant ce qu’on a observé
et ce que l’on cherchait à comprendre.
85. Notes
Les personas sont un outil utilisé à la fois en marketing (buyer personas) et en UX.
Ils doivent permettre de répondre à différentes questions concernant les
comportements de différents types d’utilisateurs.
L’idée, c’est d’avoir un persona pour chaque type de client identifié.
86. Marion
25 ans
Habite à Tours
Passe un weekend prolongé à Saint Malo entre amis
èElle cherche des idées d'endroits à visiter sur la côte
Elle fait une recherche sur
Instagram : #saintmalo
Elle s'arrête sur les photos qui la
font rêver et regarde où ça se
trouve
Des photos de Chausey la
séduisent
Elle tape dans Google : "comment
se rendre à Chausey ?"
Elle arrive sur le blog "Compagnie
Corsaire"
Elle affine sa recherche en
consultant les avis Compagnie
Corsaire sur Trip Advisor
Les avis achèvent de la convaincre,
elle achète en ligne sur votre site
Il vous faut un compte
Instagram séduisant,
avec de nombreux #
Il vous faut des
contenus sur le site
pour apparaitre sur ces
recherches
Essayez de répondre
aux avis laissés par vos
clients : cela donne
une bonne image
Les infos sur la
destination sont
claires, le parcours
d'achat sur le site est
fluide
87. Michel
65 ans
Habite en région parisienne
Passe une semaine de vacances en famille à Saint Malo
èIl cherche une activité pour occuper ses petits enfants
Il va à l'office de tourisme en début
de séjour
Il s'est muni de votre brochure,
il l'étudie
Il tape "Compagnie Corsaire"
dans Google et arrive sur votre
site
Il compare les destinations :
durée, type de bateau,
prestations (simple traversée
ou croisière commentée ?)
Il retient la croisière
commentée "Baie du Corsaire"
Il veut se décider au dernier
moment en fonction de la
météo
Il s'envoie par email la
brochure / les infos clefs pour
cette destination : horaires et
port de départ, pour acheter
directement à la cale
Il faut attirer son
attention parmi toute
l'offre disponible, avec
un support original
Votre site est bien
référencé. En arrivant
dessus, l'internaute
comprend qu'il est au
bon endroit
L'ensemble des
destinations est visible
en 1 coup d'œil
Les caractéristiques de
chacune sont claires
La brochure est
facilement accessible
Les infos pratiques
sont très lisibles dans
la page destination
88. Nancy
35 ans
Habite à Cork
Passe deux semaines de vacances en famille à Cancale, c'est la première fois qu'elle vient en France
èElle prépare son voyage plusieurs mois à l'avance pour caler un planning d'activités
Elle fait des recherches sur Google
: "Cancale : what to see around
with kids"
Elle arrive sur votre blog, et
s'intéresse à vos destinations
Ses vacances sont dans 4 mois,
il est trop tôt pour acheter un
billet
3 jours avant de partir pour la
Bretagne, elle reçoit un mail lui
rappelant toutes les traversées
disponibles sur la Compagnie
Corsaire
Elle réserve pour le milieu de
semaine sur votre site Internet
Votre nom est présent
sur des sites
partenaires
Vous répondez à cette
question sur votre blog
Votre site est bien
référencé aussi en
anglais
Le site lui propose de
lui envoyer un rappel
par mail quelques
jours avant ses
vacances
L'email donne un
aperçu des différentes
destinations et inviter
à réserver en ligne
91. Notes
Les parcours utilisateurs permettent de décrire les usages que vous avez pu observer
de votre application ou de votre site.
Par exemple, vous avez une boutique en ligne, un site e-commerce, et vous regardez
dans Google Analytics, ou lors de tests utilisateurs, comment vos utilisateurs vont
consulter leur suivi de livraison.
Vous vous attendez à ce qu’ils se connectent et cliquent sur le bouton « Suivre mes
commandes » que vous avez judicieusement placé dans le sous-menu « Commandes ».
92.
93. Notes
Voilà le parcours utilisateur tel que vous l’avez imaginé au début.
C’est le parcours idéal, le plus efficace pour accomplir cette tâche.
Mais voilà, vos utilisateurs sont têtus, et ils n’utilisent pas le sous-menu « Commandes ».
Ils cliquent directement sur « Commandes », arrivent sur la liste de leurs commandes,
choisissent une commande et, depuis cet écran, choisissent l’écran « Voir l’état de la
livraison ».
94.
95. Notes
Résultat, non seulement son parcours est plus long, mais en plus il n’est pas exactement
là où vous vouliez qu’il soit.
Alors vous êtes un peu déçu, et vous vous dîtes que vos utilisateurs ne sont pas très
malins. Mais vous avez appris quelque chose. Vous avez appris la façon dont vos
utilisateurs se comportent et utilisent votre site.
C’est une donnée qui a de la valeur. Elle vous permet de réaliser le parcours utilisateur
ci-dessus et de vos poser des questions. Est-ce que mes utilisateurs sont satisfaits de ce
parcours ?
Est-ce que je peux m’adapter à leurs usages et améliorer ce parcours ?
Est-ce que je peux rendre le parcours « idéal » plus facile à découvrir ?
Ce type de livrable, les parcours utilisateurs, est réalisable à toutes les phases de la vie
de votre produit : vous pouvez les faire sur un site en production, comme dans mon faux
exemple. Mais vous pouvez également le faire en phase de conception, en interrogeant
des utilisateurs, en leur demandant quel parcours ils imaginent devoir faire pour
accomplir certaines tâches. Ou quels parcours ils aimeraient faire dans une application
idéale.
98. Notes
On va enfin construire (ou améliorer) notre interface.
Avec toutes les données que nous avons rassemblées, étudiées et formalisées, nous
allons pouvoir faire quelque chose d’exceptionnel.
Bon, ce n’est pas certain, mais si on se plante, on pourra quand même se dire qu’on avait
mis toutes les chances de notre côté.
103. Notes
Les prototypes permettent de tester la structure et la navigation.
Les zonings sont des schémas représentant les éléments présents sur une page ou un
écran.
111. Notes
Puisqu’on part du principe que c’est l’utilisateur qui définit les directions que l’on
prend, il faut lui faire valider le résultat de nos observations.
113. Notes
Les tests utilisateurs consistent à demander à un utilisateur de réaliser une tâche
sur le site ou un prototype.
On peut réaliser ce genre de tests assez simplement, avec un questionnaire que
l’on remplit au fur et à mesure.
Et, si on le souhaite, il y a des outils assez simples qui permettent d’enregistrer ce
qui se passe à l’écran tout en filmant et en enregistrant le testeur.
114.
115. Notes
C’est par exemple ce que propose l’outil en ligne Lookback.
L’idéal pour ce type de test, c’est d’être deux. Une personne accompagne le
testeur, lui explique ce qui est attendu. Par exemple, annuler une commande sur
un site e-commerce, ou créer un compte utilisateur. Il faut bien sûr essayer d’être
le moins directif possible afin de ne pas biaiser le test.
L’autre intervenant va prendre des notes, aussi bien concernant les actions du
testeur que ses commentaires.
Quand on réalise ce genre de tests, on a souvent la tentation de trop en faire, mais
une des clés de la réussite dans cet exercice, c’est justement de tester à chaque
fois une seule fonctionnalité pour ne pas se disperser.
117. Notes
Une fois que votre site est en ligne ou que votre application est disponible sur les
stores, de nouvelles possibilités s’offrent à vous.
Vous pouvez récupérer les données de Google Analytics, on l’a évoqué plus tôt.
Vous pouvez également réaliser des tests A/B, c’est-à-dire présenter
aléatoirement des modèles de pages différents aux utilisateurs, comparer les
résultats et mettre en ligne de façon permanente la version qui fonctionne le
mieux.
Quoi qu’il en soit, il est important de ne pas considérer la mise en ligne de votre
site comme la dernière étape, mais comme la fin d’un premier cycle.
119. Notes
C’est une technologie qui permet d’analyser l’activité oculaire d’une personne en
réalisant un suivi de son regard. Cette technique permet de savoir avec
précision où regarde l’utilisateur, ce qu’il voit et ce qu’il ne voit pas.
On peut ainsi mesurer les zones qui sont vues, lues, utilisées ou ignorées.
123. Notes
C’est une histoire très connue, parce qu’elle est marquante, vu la somme en jeu.
C’est Jared Spool qui la raconte. Un client demande à sa société, UIE, de tester le formulaire d’enregistrement de
son site e-commerce. C’est un formulaire tout simple : adresse e-mail, mot de passe, se connecter, créer un
compte, mot de passe oublié.
Donc UIE regarde comment les utilisateurs utilisent le formulaire. Et constate plein de choses intéressantes.
Des gens qui viennent sur le site pour la 1ère fois ne sont plus certains que c’est la 1ère fois. Donc ils essaient
leur adresse e-mail et leur mot de passe habituel. Puis un autre mot de passe. Et encore un. Puis ils abandonnent.
Des utilisateurs créent un nouveau compte à chaque visite ou presque.
Certains cliquent sur le lien « Mot de passe oublié » mais ne terminent jamais le processus et quittent le site. Et
puis, les utilisateurs sont persuadés qu’on leur demande leur adresse mail uniquement pour leur envoyer de la
publicité. Comment faire ?
En remplaçant le bouton « Se connecter » qui amenait à ce formulaire par un bouton « Continuer » et en
précisant qu’il n’était pas nécessaire de créer un compte pour continuer ses achats. Une fois que l’utilisateur a
rempli son adresse pour la livraison, on lui propose de créer un compte pour ne pas avoir à le refaire la prochaine
fois, mais rien ne l’y oblige.
Le résultat, c’est $15 millions de CA le premier mois, et 300 millions la première année.
Comment ? « On a juste changé un bouton » dit Jared Spool. Mais la vraie réponse c’est « en observant les usages
des clients ».