Mais qu’est-ce que c’est exactement « L’UX » ? L’UX design consiste à penser et à concevoir un site web de manière à ce que l’expérience utilisateur soit la meilleure possible. Reste à définir ce qu’est une bonne expérience utilisateur. En quoi est-ce que cela peut m’aider à remplir mes objectifs ? Ça ne risque pas de me coûter cher ? Pendant ce Work’n Coffee, nous vous proposons de découvrir comment l’UX peut vous rendre plus performant. Comment ? Grâce à une approche pragmatique, adaptée à votre budget et à vos besoins.

1. Work’n Coffee
L’UX DESIGN AU SERVICE
DE MA PERFORMANCE
18/09/2015

2. QUEL MOTEUR DE RECHERCHE UTILISEZ-
VOUS ?

3. 3
Pourquoi utilisez-vous
Google ?
• Qu’aimez-vous à
propos de Google ?
• Qu’est-ce que votre
famille ou vos amis
aiment sur Google ?
• Vous rappelez-vous de
votre première
impression ?
• Facile à utiliser
• Rapide
• Page d’accueil très
simple et agréable
• Fait ce que je lui
demande
• Précis dans les
résultats
• Les résultats s’affichent
rapidement
• Innovant

4. 4
Pourquoi utilisez-vous
Google ?

5. QU’EST-CE QUE L’UX ?

6. 6
Définition
Laszliro Kovacs – User centered design @Dribbble
L’UX (user experience)
Concerne toutes les expériences,
interactions et même émotions
qu’un utilisateur aura avec un
produit, un service et tout ce qui
gravite autour : interfaces, service
client, communauté, emails…

7. 7
Attention aux mauvaises interprétations
L’UX ce n’est pas juste des jolies graphismes
Ou suivre les dernières
modes

8. 8
Les éléments de l’expérience utilisateur
STRATÉGIE
• Stratégie
• Objectifs du produit/service
• Etudes des besoins utilisateurs
CADRE
• Définir les fonctionnalités du site
• Son contenu
STRUCTURE
• Architecture de l’information
• Définition des interactions
SQUELETTE
• Conception des interfaces
• De la navigation
• Des éléments permettant d’utiliser le site
SURFACE
• Design visuel.
• A quoi le produit final ressemble

9. 9
Remettre l’utilisateur au
centre de la réflexion
L’UX c’est avant tout remettre
l’utilisateur au centre de la réflexion.
Les comprendre et répondre à leur
besoins.
Régler leurs problèmes.

10. Designer un
produit
Designer
l’expérience

11. 11

12. 12
La conception centrée utilisateur : les 3 erreurs à éviter
1 2 3
Ne prendre en compte que les
demandes du client sans
s’intéresser aux besoins des
utilisateurs.
Penser que les utilisateurs ont les
mêmes besoins, comportements
et goûts que moi.
« Vous n’êtes pas l’utilisateur »
Forcer les utilisateurs à faire ce que
l’on veut.
Le seul moyen est de comprendre
leurs motivations, leurs
problématiques et leurs besoins.

13. Ne pas confondre ce que l’utilisateur veut VS ce dont il a besoin

14. 14
L’UX ce n’est pas seulement « l’utilisateur »
UX
Besoins
UTILISATEURS
Objectifs
BUSINESS
Quelle valeur
apporte cette
expérience à
l’entreprise ?
Qu’en retire
l’utilisateur ?

15. QU’EST-CE QUI FAIT UNE BONNE UX ?

16. Les facettes de l’expérience utilisateur
16
VALEUR
UTILITÉ
DÉSIRABILITÉ
CRÉDIBILITÉ
ACCESSIBILITÉTROUVABILITÉ
UTILISABILITÉ

17. Les facettes de l’expérience utilisateur
17
VALEUR
DÉSIRABILITÉ
CRÉDIBILITÉ
ACCESSIBILITÉTROUVABILITÉ
UTILISABILITÉ
UTILITÉ
Doit répondre à un besoin et aider
l’utilisateur à accomplir ses
objectifs

18. UTILITÉ
Les facettes de l’expérience utilisateur
18
VALEUR
DÉSIRABILITÉ
CRÉDIBILITÉ
ACCESSIBILITÉTROUVABILITÉ
Doit être facile à utiliser, et
fonctionner correctement (pas de
bugs…)
UTILISABILITÉ

19. UTILITÉ
Les facettes de l’expérience utilisateur
19
VALEUR
DÉSIRABILITÉ
CRÉDIBILITÉ
ACCESSIBILITÉ
Les différents contenus doivent
être facile à trouver pour que
l’utilisateur accède rapidement à ce
qu’il cherche
UTILISABILITÉ
TROUVABILITÉ

20. UTILITÉ
Les facettes de l’expérience utilisateur
20
VALEUR
DÉSIRABILITÉ
ACCESSIBILITÉ
L’utilisateur doit avoir confiance et
croire ce qu’on lui dit
UTILISABILITÉ
TROUVABILITÉ
CRÉDIBILITÉ

21. UTILITÉ
Les facettes de l’expérience utilisateur
21
VALEUR
DÉSIRABILITÉ
Les contenus doivent être
accessibles aux personnes
souffrant d’un handicap
UTILISABILITÉ
TROUVABILITÉ
CRÉDIBILITÉ
ACCESSIBILITÉ

22. UTILITÉ
Les facettes de l’expérience utilisateur
22
VALEUR
Générer l’émotion et l’adhésion
grâce à une identité visuelle forte et
unique
UTILISABILITÉ
TROUVABILITÉ
CRÉDIBILITÉ
ACCESSIBILITÉ
DÉSIRABILITÉ

23. ACCESSIBILITÉ
UTILITÉ
Les facettes de l’expérience utilisateur
23
DÉSIRABILITÉ
Créer de la valeur pour les
utilisateurs finaux et le client
UTILISABILITÉ
TROUVABILITÉ
CRÉDIBILITÉ
VALEUR

24. SATISFAISANT MAIS PAS MÉMORABLE !

25. LA MÉMOIRE DE
L’EXPÉRIENCE
Le souvenir est supérieur à
l’expérience elle-même.
Certains éléments bien précis vont
fortement colorer ce souvenir, en
particulier le début, mais surtout la fin
de l’expérience, qui va avoir
l’influence la plus grande.
Le fait de surpasser
les attentes des utilisateurs influe aussi
sur la mémoire. C’est à cette condition
que l’on crée la surprise, plus
exactement l’heureuse surprise, celle
qui va rester dans les souvenirs.

26. 2626
Pourquoi certaines
idées restent dans
la mémoire ?
Chip & Dan Heath définissent les 6
critères d’une expérience mémorable
(SUCCES)
Simplicity (Simple)
Unexpectedness (Inattendu)
Concretness (Concret)
Credibility (Crédible)
Emotions (Emotionnel)
Stories (Scénarisé)

27. 27
SIMPLE
27
L’expérience doit
toujours sembler simple,
même si le parcours est
complexe, requérant un
enchaînement
d’interactions.
C’est pourquoi il vaut
mieux le découper en
plusieurs petites
opérations faciles
à réaliser isolément.

28. 28
INATTENDU
28
Les surprises heureuses
que nous réservent
certains systèmes
marquent durablement
l’esprit.
Il est donc intéressant
d’intégrer de manière
pertinente dans les
parcours des éléments
de surprise.

29. 29
CONCRET
29
L’abstraction exige toujours de
nous plus de concentration et
d’efforts de compréhension que ce
qui est concret.
Tout ce qui rend les choses plus
concrètes et plus proches va
alléger la charge cognitive des
utilisateurs.

30. 30
CRÉDIBLE
30
De nombreuses choses peuvent donner
du crédit et de l’autorité à un dispositif
numérique : des témoignages vérifiables, l’aff
ichage d’un grand nombre
d’utilisateurs, des références, etc.

31. 31
CRÉDIBLE
31
De nombreuses choses peuvent donner du c
rédit et de l’autorité à un dispositif
numérique : des témoignages vérifiables, l’aff
ichage d’un grand nombre
d’utilisateurs, des références, etc.
• Facilité la vérification de la justesse des
informations sur le site (citations, références, tiers
de confiance)
• Montrer qu’il y a une véritable organisation
derrière le site (adresses physiques, photo de
lieux)
• Mettre en avant l’expertise de la marque ou des
équipes
• Montrer qu’il y a des personnes de confiances
(humains) derrière le site
• Faciliter la prise de contact
• Un design professionnel ou en relation
avec le propos
• Un site utile et utilisable
• Montrer que le site est souvent mis à jour
• Limiter les erreurs aussi petites soient
elles (typo, liens cassés…)
http://credibility.stanford.edu/guidelines/)

32. 32
ÉMOTIONNEL
32
Tout ce qui agit sur nos é
motions a un impact
sur notre mémoire.
Parvenir à créer des
émotions requiert tous le
s talents de l’équipe :
la rédaction, le design
graphique et la qualité de
la réalisation
feront la différence.

33. 33
SCÉNARISÉ
33
Les histoires et
anecdotes ont un
pouvoir de persuasion
plus important que les
données.
Ecouter une histoire agit
comme une sorte de
simulateur mental
favorisant l’engagement
et l’identification.

34. QUELQUES PRINCIPES D’UX DESIGN À
RETENIR POUR VOTRE PROCHAIN PROJET

35. 35
PENSER LE CONTENU COMME UNE TÂCHE
35
C’est avant tout le contenu qui motive la visite,
rarement les fonctionnalités ou la beauté de l’interface
On perd souvent de vue que les utilisateurs qui viennent consulter des
informations le font rarement pour être simplement plus savants ou plus
cultivés : c’est bien plus souvent une étape dans une tâche plus large.

36. 36
COHÉRENCE
36

37. 37
FAMILIARITÉ (SUIVRE LES CONVENTIONS)
37
Logo en haut à gauche
Au clic, renvoie vers la
home
Ressemble à un bouton, agit comme
un bouton
Liens visités, dans une couleur
différente
Couleur des liens différente
du texte

38. 38
FEEDBACK
38

39. LE PROCESS DE L’UX

40. 4040
Audit
ergonomique
Analyse de la
concurrence
Personas
Architecture
de l’information
SpécificationsWireframes
LE PROCESS DE L’UX

41. 41
AUDIT ERGONOMIQUE
41
Objectif : détecter les problèmes
majeurs d’ergonomie
- Analyse de chaque site suivant une
grille ergonomique
- Identification des problèmes
d’utilisabilité majeurs
Rapport d’analyse ergonomique
LIVRABLE

42. 42
ANALYSE DE LA CONCURRENCE
42
Objectif : Détecter les forces et faiblesses des dispositifs des
concurrents.
Faire ressortir des bonnes pratiques d’un marché
- Analyse des sites des concurrents grâce à une grille prédéfinie
- Tests utilisateurs sur les sites concurrents
- Définition des fonctionnalités permettant de se démarquer

43. 43
PERSONAS
43
Objectif : communiquer et partager
une vision commune des utilisateurs au
sein de l’équipe
- Définition des caractéristiques des
utilisateurs
- Définition de leurs tâches/besoins
principaux
- Création des scénarios utilisateurs
Personas
LIVRABLE

44. 44
ARCHITECTURE DE L’INFORMATION & PARCOURS
44
Objectif : définir la structuration des
contenus permettant aux utilisateurs de
trouver facilement l’information
- Création d’une arborescence
- Définition des principaux gabarits de
page
- Définition d’une taxonomie
permettant de lier les contenus entre
eux
Arborescence
Taxonomie
Liste des principaux gabarits
LIVRABLES

45. 45
WIREFRAMES
45
Objectif : matérialiser les contenus,
fonctionnalités et parcours
utilisateurs du site
- Intégration de tous les éléments
d’interface
- Définition de la hiérarchie de
l’information
- Dynamisation des fonctionnalités
importantes
Outil utilisé : Axure
Prototype HTML généré par
AXURE
LIVRABLE

46. 46
SPÉCIFICATIONS FONCTIONNELLES FINALES
46

47. INTÉGRER L’UTILISATEUR DANS LE
PROCESS

48. INTEGRATION DES TESTS UTILISATEURS DANS LA PHASE DE CONCEPTION
Principaux bénéfices :
Se baser sur des mesures empiriques plutôt que sur des hypothèses.
Sécuriser chaque étape pour éviter de repartir de zéro.
Justifier les choix par une validation utilisateur pour objectiver les décisions et favoriser l’adhésion en interne
Audit
ergonomique
Analyse de la
concurrence
Personas
Architecture
de l’information
SpécificationsWireframes
Questionnaire
en ligne
Tri de carte Tree Testing
Tests
utilisateurs

49. QUESTIONNAIRE EN LIGNE
Objectif : récolter de la donnée réelle sur les utilisateurs afin de
construire des Personas fiables
- Élaboration du questionnaire en ligne
- Diffusion du questionnaire sur vos fichiers clients ou sur vos
sites actuls
- Analyse du questionnaire
Outils: SurveyMonkey, SurveyGizmo, Google Formulaire,
Hotjar…

50. TRI DE CARTE
- Élaboration du questionnaire en ligne
- Diffusion du questionnaire sur les fichiers clients
- Analyse du questionnaire
Description : Proposer à un ensemble d’utilisateurs les contenus
sous forme de carte qu’ils doivent classer en catégories qu’ils
nomment.
Peut être utilisé pour redesigner l’arborescence d’un site, un
catalogue produit…
Démonstration en ligne
https://www.optimalworkshop.com/optimalsort-demoOutil: Optimal Workshop > Optimal Sort

51. TREE TESTING
51
Description : le tree testing permet d’évaluer la facilité
d’accès à l’information.
Le test est effectué sur une arborescence interactive sans
biais graphiques.
On propose des tâches à effectuer aux utilisateurs et on
évalue leur taux de réussite.
Démonstration en ligne
https://www.optimalworkshop.com/treejack-demo
Objectif : valider l’arborescence d’un point de vue utilisateur.
- Paramétrage du tree testing
- Diffusion du test en ligne
- Analyse
Outil: Optimal Workshop > Treejack

52. Objectif : identifier les problèmes d’utilisabilité majeurs et le
niveau de satisfaction des utilisateurs
A l’issue des tests utilisateurs les prototypes
seront corrigés si nécessaire.
TESTSUTILISATEURS
- Rédaction d’un plan de test
- Recrutement des participants
- Passation des tests à distance
- Analyse
52
Outils: Skype, join.me, GotoMeetin, Morae

53. SUCCESS STORIES

54. LE BOUTON À 300 MILLIONS DE $

59. + 300 MILLIONS DE DOLLARS SUR 1 AN (+45%)

60. 60
SUCCESS STORIES
60
Airbnb : « Bienvenue à la maison » la marque nous parle comme à un ami nous fait vivre l’expérience
avant de vivre l’expérience

61. 61
EXEMPLES CONCRETS
61
Wufoo (service de création de formulaire en ligne)
Envoie de lettres manuscrites de
remerciement d’inscription au service

62. 62
EXEMPLES CONCRETS
62
Wufoo (service de création de formulaire en ligne)
Envoie de lettres manuscrites de
remerciement d’inscription au service

63. BONUS !

64. Pour maintenir le cap et garder l’esprit clair
tout au long du projet, posez-vous les bonnes
questions
• Quels sont les objectifs du site ou de la marque ?
• Qui sont mes utilisateurs ?
• D’où viennent-ils ?
• Que cherchent-ils ?
• Qu’est-ce qui est important pour eux ?
• Qu’est-ce qui doit absolument être mis en avant ?
• Quelles sont les prochaines étapes de l’utilisateur ?

65. THANK YOU !
ANNECY
ZAC de Valparc,
74330Poisy
T. : +33 (0)450 244 244
GENEVE
WTC II - routede Pré-Bois29
1215Genève
T. : +41 (0) 22 32075 11
www.agencenetdesign.com
MERCI DES QUESTIONS
?