"L’expérience client digitale" par Olivier Sauvage (Wexperience)

1. Comment offrir
une expérience utilisateur digitale efficace
dans le commerce connecté ?

2. 2
EYE-TRACKING EN MAGASIN

3. 2
EYE-TRACKING EN MAGASIN

4. 3
L’ATTRACTIVITÉ

5. 3
L’ATTRACTIVITÉ SIMPLICITÉ
REPÉRABILITÉ CONFIANCE

6. 4
L’ATTRACTIVITÉ
"Aesthetics matter: attractive things work better »
Donald Norman
http://www.jnd.org/dn.mss/emotion_design_attractive_things_work_better.html
POUR UNE BONNE EXPÉRIENCE UTILISATEUR, IL
FAUT OFFRIR DES INTERFACES À LA FOIS BELLES
ET LUDIQUES.

7. 5
http://special.bose.eu/en/

8. 5
http://special.bose.eu/en/

9. 6
Grandes zones de cliquage
qui s’agrandissent au survol
de la souris

10. 6
Grandes zones de cliquage
qui s’agrandissent au survol
de la souris
AB A

11. 6
Grandes zones de cliquage
qui s’agrandissent au survol
de la souris
AB
Aide à la navigation : des
informations supplémentaires
apparaissent au survol (ici,
renforcement du call-to-action)
A

12. 6
Grandes zones de cliquage
qui s’agrandissent au survol
de la souris
AB
Aide à la navigation : des
informations supplémentaires
apparaissent au survol (ici,
renforcement du call-to-action)
Beaucoup d’espace autour des
objets pour améliorer la clarté
A

13. 7
Réduction au maximum
du nombre d’informations
visibles

14. 7
Réduction au maximum
du nombre d’informations
visibles
Iconification des actions
Simplification maximale
du design d’interface

15. 7
Réduction au maximum
du nombre d’informations
visibles
Iconification des actions
Simplification maximale
du design d’interface
Call-to-action clairement
identifiable et sans
ambiguité

16. 8

17. 8

18. 9
http://tripplanner.travelalberta.com
Utiliser le design et la
simplicité pour augmenter
l’engagement

19. 9
http://tripplanner.travelalberta.com
Utiliser le design et la
simplicité pour augmenter
l’engagement
Un seul call-to-action
pour toute la page

20. 9
http://tripplanner.travelalberta.com
Utiliser le design et la
simplicité pour augmenter
l’engagement
Un seul call-to-action
pour toute la page
Carrousel simple avec
un grand visuel immersif
occupant toute la page

21. 10
http://www.airbnb.fr

22. 10
http://www.airbnb.fr

23. 11
LE DESIGN VÉHICULE L’ESPRIT DE LA MARQUE

24. 12
2007
2009
ÉVOLUTIONS D’AIRBNB

25. 13
Votre interface doit être simple et belle

26. 13
Votre interface doit être simple et belle
Visuel immersif animé

27. 13
Votre interface doit être simple et belle
Visuel immersif animé
Formulaire simple
assisté

28. 13
Votre interface doit être simple et belle
Visuel immersif animé
Formulaire simple
assisté
Airbnb a encore besoin
d’expliquer son concept

29. 13
Votre interface doit être simple et belle
Visuel immersif animé
Formulaire simple
assisté
Airbnb a encore besoin
d’expliquer son concept
Simplification du logo et
du nom de la marque
elle même

30. 14http://cr7collection.com/#/?data=1
SUR MOBILE AUSSI

31. 14http://cr7collection.com/#/?data=1
Photo interactive avec
indication des points
cliquables par des
icones « + »
Permet d’avoir plus de
produits sur une seule
page visible à l’écran
SUR MOBILE AUSSI

32. 15http://metidesign.com
RESTER LE PLUS
SOBRE POSSIBLE

33. 15http://metidesign.com
Simplicité du design
Intégration de visuels en
plein écran pour combler
la petite taille de la
surface
RESTER LE PLUS
SOBRE POSSIBLE

34. 15http://metidesign.com
Simplicité du design
Intégration de visuels en
plein écran pour combler
la petite taille de la
surface
Un seul to call-to-action
pour chaque image.
Taille importante
(1cmx1cm) pour pouvoir
être confortablement
« tappé »
RESTER LE PLUS
SOBRE POSSIBLE

35. 16
SIMPLICITÉ
EN PLUS D’ÊTRE BEAU, IL FAUT ÊTRE EFFICACE.
SEULE LA SIMPLICITÉ PEUT PERMETTRE UNE
BONNE PRISE EN MAIN DE L’INTERFACE.

36. 17
AIRBNB
L’ORGANISATION DE
LA PAGE DOIT ÊTRE
LIMPIDE

37. 17
AIRBNB
ZONE DE COMMANDE
L’ORGANISATION DE
LA PAGE DOIT ÊTRE
LIMPIDE

38. 17
AIRBNB
ZONE DE COMMANDE
ZONE DE RÉSULTATS 1
L’ORGANISATION DE
LA PAGE DOIT ÊTRE
LIMPIDE

39. 17
AIRBNB
ZONE DE COMMANDE
ZONE DE RÉSULTATS 1
ZONE DE RÉSULTATS 2
L’ORGANISATION DE
LA PAGE DOIT ÊTRE
LIMPIDE

40. 17
AIRBNB
ZONE DE COMMANDE
ZONE DE RÉSULTATS 1
ZONE DE RÉSULTATS 2
L’ORGANISATION DE
LA PAGE DOIT ÊTRE
LIMPIDE
3 blocs clairement délimités (loi de
clotûre) permettent à l’utilisateur de s’y
retrouver facilement

41. 17
AIRBNB
ZONE DE COMMANDE
ZONE DE RÉSULTATS 1
ZONE DE RÉSULTATS 2
L’ORGANISATION DE
LA PAGE DOIT ÊTRE
LIMPIDE
3 blocs clairement délimités (loi de
clotûre) permettent à l’utilisateur de s’y
retrouver facilement
Les 2 principaux critères sont mis en avant :
-apparence du logement
-emplacement géographique
Même taille pour montrer que les 2 critères
ont la même importance

42. 18
VOS FORMULAIRES
DOIVENT ÊTRE
SIMPLES

43. 18
VOS FORMULAIRES
DOIVENT ÊTRE
SIMPLES
Critères de choix limités aux choix primaires.
Les autres choix sont dissimulés.
Les critères sont simplifiés au maximum en
terme de wording. On ne surcharge pas
l’interface d’informations afin de permettre à
l’internaute de se concentrer sur l’essentiel.

44. 18
VOS FORMULAIRES
DOIVENT ÊTRE
SIMPLES
Critères de choix limités aux choix primaires.
Les autres choix sont dissimulés.
Les critères sont simplifiés au maximum en
terme de wording. On ne surcharge pas
l’interface d’informations afin de permettre à
l’internaute de se concentrer sur l’essentiel.
Utilisation d’un slider pour choisir la
tranche de prix. Indicateur (en gris)
des disponibilités

45. 19
Un formulaire qui
ne dit pas son nom

46. 19
Un formulaire qui
ne dit pas son nom
Choix de la saison

47. 19
Un formulaire qui
ne dit pas son nom
Choix de la saison
Choix de la destination

48. 19
Un formulaire qui
ne dit pas son nom
Choix de la saison
Choix de la destination
Choix des personnes

49. 20
tripplanner.travelalberta.com
LA PRÉSENTATION DES RÉSULTATS NE
DOIT PAS PERDRE L’UTILISATEUR

50. 20
tripplanner.travelalberta.com
Mise en page carré, simplifiant la
compréhension de la page
LA PRÉSENTATION DES RÉSULTATS NE
DOIT PAS PERDRE L’UTILISATEUR

51. 20
tripplanner.travelalberta.com
Mise en page carré, simplifiant la
compréhension de la page
Beaucoup d’espaces entre les blocs
d’informations pour faciliter la
lecture
LA PRÉSENTATION DES RÉSULTATS NE
DOIT PAS PERDRE L’UTILISATEUR

52. 20
tripplanner.travelalberta.com
Mise en page carré, simplifiant la
compréhension de la page
Beaucoup d’espaces entre les blocs
d’informations pour faciliter la
lecture
Wording limité des call-to-action
LA PRÉSENTATION DES RÉSULTATS NE
DOIT PAS PERDRE L’UTILISATEUR

53. 21
http://www.myownbike.de/

54. 21
http://www.myownbike.de/

55. 22
DIMINUER LE NOMBRE
D’INTERACTIONS

56. 22
DIMINUER LE NOMBRE
D’INTERACTIONS
Les zones du vélos sont directement
cliquables pour pourvoir être
configurées. Et le résultats est
(presque) immédiatement visible. En
utilisant ce système, on évite à
l’internaute d’avoir à chercher à quel
item du menu de droite correspond
quelle partie du vélo.

57. 23
UTILISATION DE LA 3D
POURQUOI PAS ?

58. 23
UTILISATION DE LA 3D
POURQUOI PAS ?

59. 24
JINS PAINT
Sur mobile : toujours
étape par étape

60. 24
JINS PAINT
Sur mobile : toujours
étape par étape
Des choix simples, clairement
expliqués visuellement.

61. 24
JINS PAINT
Sur mobile : toujours
étape par étape
Des choix simples, clairement
expliqués visuellement.
Nombre de couleurs limitées

62. 24
JINS PAINT
Sur mobile : toujours
étape par étape
Des choix simples, clairement
expliqués visuellement.
Nombre de couleurs limitées
Résultat directement affiché à
l’écran

63. 25
Exemple pour un site plus classique
http://www.motoblouz.com

64. 25
Exemple pour un site plus classique
http://www.motoblouz.com
Grand interlignage entre les items
du menu de filtre
Cases cocher agrandie pour un
meilleure confort d’utilisation
Usage de différents tons de gris
pour hiérarchiser l’information et
soulager le regard

65. 25
Exemple pour un site plus classique
http://www.motoblouz.com
Grand interlignage entre les items
du menu de filtre
Cases cocher agrandie pour un
meilleure confort d’utilisation
Usage de différents tons de gris
pour hiérarchiser l’information et
soulager le regard
Hiérarchisation des informations
importantes : mise en avant des
points forts du produit dès la page
liste.
Bon espace entre les lignes
Utilisation de puces en forme
d’étoile pour facilietr la lecture

66. 26
http://www.cdiscount.com
Le contraire de la
simplicité

67. 26
http://www.cdiscount.com
Le contraire de la
simplicité
Informations parasites

68. 26
http://www.cdiscount.com
Le contraire de la
simplicité
Informations parasites
Textes petits et pas espacés

69. 26
http://www.cdiscount.com
Le contraire de la
simplicité
Informations parasites
Textes petits et pas espacés
Beaucoup d’infos compliquée à
comprendre

70. 27

71. 27
Créer une expérience
utilisateur peut aller à
l’encontre de ces principes

72. 28
http://designawatch.okmylo.com

73. 28
http://designawatch.okmylo.com

74. 29
Simplifier au maximum
le parcours utilisateur

75. 29
Simplifier au maximum
le parcours utilisateur
Call-to-action unique

76. 30

77. 30
Prévisualisation des éléments
Choix simplifiés

78. 30
Prévisualisation des éléments
Choix simplifiés
Phase d’apprentissage de l’interface
simplifiée par une action unique.
Mode de configuration séquentiel
Rapidité d’obtention du résultat (5
clics)

79. 31

80. 31
Pensé pour le
mobile et le web

81. 32
LA REPÉRABILITÉ

82. 33
http://www.nngroup.com/articles/flat-vs-deep-hierarchy/
L’accès aux contenus est moins difficile lorsqu’il y a moins de niveaux de profondeurs. Toutes choses étant
égales par ailleurs, il est plus difficiles d’utiliser des hiérarchies profondes.
Plus les catégories sont spécifiques, moins elles se recoupent. Dans les hiérarchies profondes, quand il y
a peu de catégories par niveau, elles ont tendances à être plus génériques et donc plus floues.
Une hiérarchie horizontale avec plus de catégories à chaque niveau est plus facile à comprendre, mais il
peut y avoir à nouveau des chevauchement entre certaines catégories quand elles sont trop nombreuses.
Beaucoup de choix a tendance également à fatiguer l’utilisateur plus vite.
Comment ranger son site ?

83. 34
http://www.decathlon.fr

84. 34
http://www.decathlon.fr
Utilisation de symboles pour
accélérer la lecture et faciliter la
compréhension de l’interface.

85. 35

86. 35
Mais ça reste compliqué

87. 36
http://www.fnac.com

88. 36
http://www.fnac.com
Interlignages importants

89. 36
http://www.fnac.com
Interlignages importants
Raccourcis

90. 36
http://www.fnac.com
Interlignages importants
Raccourcis
Chemin de navigation

91. 37
Fnac

92. 37
Fnac
Lisibilité facilité par
des grands espaces
autour des catégories

93. 37
Fnac
Lisibilité facilité par
des grands espaces
autour des catégories
Seulement 4 items par
catégorie

94. 37
Fnac
Lisibilité facilité par
des grands espaces
autour des catégories
Seulement 4 items par
catégorie
Visuel symbolique
d’une catégorie

95. 38
http://www.amazon.fr
Anticiper et corriger les
erreurs de l’utilisateur

96. 38
http://www.amazon.fr
Anticiper et corriger les
erreurs de l’utilisateurLe moteur de recherche
d’Amazon est capable de
comprendre les synonymes, les
fautes d’orthographe et de les
redresser lui même.

97. 39
Guidez l’internaute

98. 39
Guidez l’internaute
Decathlon

99. 39
Guidez l’internaute
Decathlon
Amazon

100. 39
Guidez l’internaute
Decathlon
Amazon
Fnac

101. 40
Permettre de filtrer pour
gagner du temps
Amazon

102. 40
Permettre de filtrer pour
gagner du temps
Amazon
Des choix en adéquation avec la
catégorie sélectionnée

103. 40
Permettre de filtrer pour
gagner du temps
Amazon
Des choix en adéquation avec la
catégorie sélectionnée
Affichage de sous-catégories
pour appronfondir plus
rapidement sa recherche

104. 40
Permettre de filtrer pour
gagner du temps
Amazon
Des choix en adéquation avec la
catégorie sélectionnée
Affichage de sous-catégories
pour appronfondir plus
rapidement sa recherche
Affichage des filtres les plus
importantes, les plus
discriminants au dessus de la
ligne de flottaison.

105. 41
Les filtres les
plus importants
en haut

106. 41
Les filtres les
plus importants
en haut
Utiliser des icones plutôt
que des boutons radio,
rendre ludique, augmenter
la surface de clic

107. 41
Les filtres les
plus importants
en haut
Utiliser des icones plutôt
que des boutons radio,
rendre ludique, augmenter
la surface de clic
Les sliders : une fausse
bonne idée

108. 42
CONFIANCE

109. 43
Les règles du tunnel de commande

110. 43
Les règles du tunnel de commande
Pas de temps de réaction trop longs

111. 43
Les règles du tunnel de commande
Pas de temps de réaction trop longs
Afficher des marques de confiance : cadenas et sceau de
confiance

112. 43
Les règles du tunnel de commande
Pas de temps de réaction trop longs
Afficher des marques de confiance : cadenas et sceau de
confiance
Formulaires faciles à remplir

113. 43
Les règles du tunnel de commande
Pas de temps de réaction trop longs
Afficher des marques de confiance : cadenas et sceau de
confiance
Formulaires faciles à remplir
Indicateurs de progression

114. 43
Les règles du tunnel de commande
Pas de temps de réaction trop longs
Afficher des marques de confiance : cadenas et sceau de
confiance
Formulaires faciles à remplir
Indicateurs de progression
Affichage permanent du contenu du panier

115. 43
Les règles du tunnel de commande
Pas de temps de réaction trop longs
Afficher des marques de confiance : cadenas et sceau de
confiance
Formulaires faciles à remplir
Indicateurs de progression
Affichage permanent du contenu du panier
Suppression de tous les éléments distracteurs

116. 44
Amazon
Si possible, faire rentrer votre
formulaire dans une seule page

117. 44
Amazon
Subdiviser le formulaire en
grandes parties clairement
délimitées

118. 44
Amazon
Apaiser l’anxiété avec un design
simple, doux et rassurance, sans
surcharge visuel

119. 45
Swarowksi
Les contenus en bas de la
première colonnes ont tendance
à ne pas être vus, surtout s’ils
sont sous la ligne de flottaison
Attention aux formulaires à 2 colonnes
Ligne de flottaison sur desktop
Sens de remplissage

120. 45
Swarowksi
Les contenus en bas de la
première colonnes ont tendance
à ne pas être vus, surtout s’ils
sont sous la ligne de flottaison
Attention aux formulaires à 2 colonnes
Ligne de flottaison sur desktop
Sens de remplissage
Sur tablette, cette disposition est
encore plus mauvaise, car elle rend la
lisibilité difficile. Mieux vaut un
affichage sur une colonne

121. 46
Sur smartphone, la conversion demeure
encore extrêmement basse.
johnlewis.com

122. 46
Sur smartphone, la conversion demeure
encore extrêmement basse.
johnlewis.com
Être le plus simple possible.
Bien délimiter les zones de clic
Attention aux problèmes de
contraste
Utiliser les icônes à bon escient

123. 47
Sur smartphone, la conversion demeure
encore extrêmement basse.
ao.com
Utiliser des boutons clairement
visibles, saillant avec le fond de
la page en utilisant une couleur
fortement contrastante pour
guider l’utilisateur

124. 47
Sur smartphone, la conversion demeure
encore extrêmement basse.
ao.com
ATTENTION à l’utilisation
d’intitulés de champs dans les
champs proprement dit. Sur
mobile, ça peut rapidement
perdre l’utilisateur.

125. 47
Sur smartphone, la conversion demeure
encore extrêmement basse.
ao.com
Attention également aux
problèmes de contrastes et de
lisibilité :
-typo gris clair sur fond blanc
-utilisation de l’italique

126. 48
CONCLUSION

127. 49 http://demodern.com/projects/nike-digital-retail-experience
NIKESTORE : UN MIX COMPLET DE DESIGN,
D’INTERACTIVITÉ, DE PLAISIR

128. 49 http://demodern.com/projects/nike-digital-retail-experience
NIKESTORE : UN MIX COMPLET DE DESIGN,
D’INTERACTIVITÉ, DE PLAISIR

129. 50
PAR OÙ PASSE L’OPTIMISATION ?

130. 50
UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT
PAR OÙ PASSE L’OPTIMISATION ?

131. 50
UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT
ATTRACTIVITÉ, SIMPLICITÉ, REPÉRABILITÉ, CONFIANCE
PAR OÙ PASSE L’OPTIMISATION ?

132. 50
UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT
ATTRACTIVITÉ, SIMPLICITÉ, REPÉRABILITÉ, CONFIANCE
TRAVAIL PERMANENT SUR LES DÉTAILS
PAR OÙ PASSE L’OPTIMISATION ?

133. Téléphone eMail
+ 33 3.20.99.03.21 olivier@wexperience.fr
Merci de votre attention !!
www.wexperience.fr