Aprem UX FLUPA “CX et Conception de services” - Olivier Sauvage

902 vues

Publié le

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

Publié dans : Services
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
902
Sur SlideShare
0
Issues des intégrations
0
Intégrations
28
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Aprem UX FLUPA “CX et Conception de services” - Olivier Sauvage

  1. 1. Comment offrir une expérience utilisateur digitale efficace dans le commerce connecté ?
  2. 2. 2 EYE-TRACKING EN MAGASIN
  3. 3. 2 EYE-TRACKING EN MAGASIN
  4. 4. 3 L’ATTRACTIVITÉ
  5. 5. 3 L’ATTRACTIVITÉ SIMPLICITÉ REPÉRABILITÉ CONFIANCE
  6. 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. 7. 5 http://special.bose.eu/en/
  8. 8. 5 http://special.bose.eu/en/
  9. 9. 6 Grandes zones de cliquage qui s’agrandissent au survol de la souris
  10. 10. 6 Grandes zones de cliquage qui s’agrandissent au survol de la souris AB A
  11. 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. 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. 13. 7 Réduction au maximum du nombre d’informations visibles
  14. 14. 7 Réduction au maximum du nombre d’informations visibles Iconification des actions Simplification maximale du design d’interface
  15. 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. 16. 8
  17. 17. 8
  18. 18. 9 http://tripplanner.travelalberta.com Utiliser le design et la simplicité pour augmenter l’engagement
  19. 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. 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. 21. 10 http://www.airbnb.fr
  22. 22. 10 http://www.airbnb.fr
  23. 23. 11 LE DESIGN VÉHICULE L’ESPRIT DE LA MARQUE
  24. 24. 12 2007 2009 ÉVOLUTIONS D’AIRBNB
  25. 25. 13 Votre interface doit être simple et belle
  26. 26. 13 Votre interface doit être simple et belle Visuel immersif animé
  27. 27. 13 Votre interface doit être simple et belle Visuel immersif animé Formulaire simple assisté
  28. 28. 13 Votre interface doit être simple et belle Visuel immersif animé Formulaire simple assisté Airbnb a encore besoin d’expliquer son concept
  29. 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. 30. 14http://cr7collection.com/#/?data=1 SUR MOBILE AUSSI
  31. 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. 32. 15http://metidesign.com RESTER LE PLUS SOBRE POSSIBLE
  33. 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. 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. 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. 36. 17 AIRBNB L’ORGANISATION DE LA PAGE DOIT ÊTRE LIMPIDE
  37. 37. 17 AIRBNB ZONE DE COMMANDE L’ORGANISATION DE LA PAGE DOIT ÊTRE LIMPIDE
  38. 38. 17 AIRBNB ZONE DE COMMANDE ZONE DE RÉSULTATS 1 L’ORGANISATION DE LA PAGE DOIT ÊTRE LIMPIDE
  39. 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. 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. 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. 42. 18 VOS FORMULAIRES DOIVENT ÊTRE SIMPLES
  43. 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. 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. 45. 19 Un formulaire qui ne dit pas son nom
  46. 46. 19 Un formulaire qui ne dit pas son nom Choix de la saison
  47. 47. 19 Un formulaire qui ne dit pas son nom Choix de la saison Choix de la destination
  48. 48. 19 Un formulaire qui ne dit pas son nom Choix de la saison Choix de la destination Choix des personnes
  49. 49. 20 tripplanner.travelalberta.com LA PRÉSENTATION DES RÉSULTATS NE DOIT PAS PERDRE L’UTILISATEUR
  50. 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. 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. 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. 53. 21 http://www.myownbike.de/
  54. 54. 21 http://www.myownbike.de/
  55. 55. 22 DIMINUER LE NOMBRE D’INTERACTIONS
  56. 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. 57. 23 UTILISATION DE LA 3D POURQUOI PAS ?
  58. 58. 23 UTILISATION DE LA 3D POURQUOI PAS ?
  59. 59. 24 JINS PAINT Sur mobile : toujours étape par étape
  60. 60. 24 JINS PAINT Sur mobile : toujours étape par étape Des choix simples, clairement expliqués visuellement.
  61. 61. 24 JINS PAINT Sur mobile : toujours étape par étape Des choix simples, clairement expliqués visuellement. Nombre de couleurs limitées
  62. 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. 63. 25 Exemple pour un site plus classique http://www.motoblouz.com
  64. 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. 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. 66. 26 http://www.cdiscount.com Le contraire de la simplicité
  67. 67. 26 http://www.cdiscount.com Le contraire de la simplicité Informations parasites
  68. 68. 26 http://www.cdiscount.com Le contraire de la simplicité Informations parasites Textes petits et pas espacés
  69. 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. 70. 27
  71. 71. 27 Créer une expérience utilisateur peut aller à l’encontre de ces principes
  72. 72. 28 http://designawatch.okmylo.com
  73. 73. 28 http://designawatch.okmylo.com
  74. 74. 29 Simplifier au maximum le parcours utilisateur
  75. 75. 29 Simplifier au maximum le parcours utilisateur Call-to-action unique
  76. 76. 30
  77. 77. 30 Prévisualisation des éléments Choix simplifiés
  78. 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. 79. 31
  80. 80. 31 Pensé pour le mobile et le web
  81. 81. 32 LA REPÉRABILITÉ
  82. 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. 83. 34 http://www.decathlon.fr
  84. 84. 34 http://www.decathlon.fr Utilisation de symboles pour accélérer la lecture et faciliter la compréhension de l’interface.
  85. 85. 35
  86. 86. 35 Mais ça reste compliqué
  87. 87. 36 http://www.fnac.com
  88. 88. 36 http://www.fnac.com Interlignages importants
  89. 89. 36 http://www.fnac.com Interlignages importants Raccourcis
  90. 90. 36 http://www.fnac.com Interlignages importants Raccourcis Chemin de navigation
  91. 91. 37 Fnac
  92. 92. 37 Fnac Lisibilité facilité par des grands espaces autour des catégories
  93. 93. 37 Fnac Lisibilité facilité par des grands espaces autour des catégories Seulement 4 items par catégorie
  94. 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. 95. 38 http://www.amazon.fr Anticiper et corriger les erreurs de l’utilisateur
  96. 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. 97. 39 Guidez l’internaute
  98. 98. 39 Guidez l’internaute Decathlon
  99. 99. 39 Guidez l’internaute Decathlon Amazon
  100. 100. 39 Guidez l’internaute Decathlon Amazon Fnac
  101. 101. 40 Permettre de filtrer pour gagner du temps Amazon
  102. 102. 40 Permettre de filtrer pour gagner du temps Amazon Des choix en adéquation avec la catégorie sélectionnée
  103. 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. 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. 105. 41 Les filtres les plus importants en haut
  106. 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. 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. 108. 42 CONFIANCE
  109. 109. 43 Les règles du tunnel de commande
  110. 110. 43 Les règles du tunnel de commande Pas de temps de réaction trop longs
  111. 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. 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. 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. 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. 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. 116. 44 Amazon Si possible, faire rentrer votre formulaire dans une seule page
  117. 117. 44 Amazon Subdiviser le formulaire en grandes parties clairement délimitées
  118. 118. 44 Amazon Apaiser l’anxiété avec un design simple, doux et rassurance, sans surcharge visuel
  119. 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. 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. 121. 46 Sur smartphone, la conversion demeure encore extrêmement basse. johnlewis.com
  122. 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. 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. 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. 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. 126. 48 CONCLUSION
  127. 127. 49 http://demodern.com/projects/nike-digital-retail-experience NIKESTORE : UN MIX COMPLET DE DESIGN, D’INTERACTIVITÉ, DE PLAISIR
  128. 128. 49 http://demodern.com/projects/nike-digital-retail-experience NIKESTORE : UN MIX COMPLET DE DESIGN, D’INTERACTIVITÉ, DE PLAISIR
  129. 129. 50 PAR OÙ PASSE L’OPTIMISATION ?
  130. 130. 50 UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT PAR OÙ PASSE L’OPTIMISATION ?
  131. 131. 50 UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT ATTRACTIVITÉ, SIMPLICITÉ, REPÉRABILITÉ, CONFIANCE PAR OÙ PASSE L’OPTIMISATION ?
  132. 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. 133. Téléphone eMail + 33 3.20.99.03.21 olivier@wexperience.fr Merci de votre attention !! www.wexperience.fr

×