aprem ux flupa “cx et conception de services” - olivier sauvage

Comment offrirune expérience utilisateur digitale efficace

dans le commerce connecté ?

2

EYE-TRACKING EN MAGASIN

2

EYE-TRACKING EN MAGASIN

3

L’ATTRACTIVITÉ

3

L’ATTRACTIVITÉ SIMPLICITÉ

REPÉRABILITÉ CONFIANCE

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.

5

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

5

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

6

Grandes zones de cliquage qui s’agrandissent au survol

de la souris

6

Grandes zones de cliquage qui s’agrandissent au survol

de la souris

AB A

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

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

7

Réduction au maximum du nombre d’informations

visibles

7

Réduction au maximum du nombre d’informations

visibles

Iconification des actionsSimplification maximale du design d’interface

7

Réduction au maximum du nombre d’informations

visibles

Iconification des actionsSimplification maximale du design d’interface

Call-to-action clairement identifiable et sans ambiguité

8

8

9

http://tripplanner.travelalberta.com

Utiliser le design et la simplicité pour augmenter

l’engagement

9

http://tripplanner.travelalberta.com

Utiliser le design et la simplicité pour augmenter

l’engagement

Un seul call-to-action pour toute la page

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

10

http://www.airbnb.fr

10

http://www.airbnb.fr

11

LE DESIGN VÉHICULE L’ESPRIT DE LA MARQUE

12

2007

2009

ÉVOLUTIONS D’AIRBNB

13

Votre interface doit être simple et belle

13

Votre interface doit être simple et belle

Visuel immersif animé

13

Votre interface doit être simple et belle

Visuel immersif animé

Formulaire simple assisté

13

Votre interface doit être simple et belle

Visuel immersif animé

Formulaire simple assisté

Airbnb a encore besoin d’expliquer son concept

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

14http://cr7collection.com/#/?data=1

SUR MOBILE AUSSI

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

15http://metidesign.com

RESTER LE PLUS SOBRE POSSIBLE

15http://metidesign.com

Simplicité du designIntégration de visuels en plein écran pour combler la petite taille de la surface

RESTER LE PLUS SOBRE POSSIBLE

15http://metidesign.com

Simplicité du designInté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

16

SIMPLICITÉ

EN PLUS D’ÊTRE BEAU, IL FAUT ÊTRE EFFICACE. SEULE LA SIMPLICITÉ PEUT PERMETTRE UNE

BONNE PRISE EN MAIN DE L’INTERFACE.

17

AIRBNB

L’ORGANISATION DE LA PAGE DOIT ÊTRE

LIMPIDE

17

AIRBNB

ZONE DE COMMANDE L’ORGANISATION DE LA PAGE DOIT ÊTRE

LIMPIDE

17

AIRBNB

ZONE DE COMMANDE

ZONE DE RÉSULTATS 1

L’ORGANISATION DE LA PAGE DOIT ÊTRE

LIMPIDE

17

AIRBNB

ZONE DE COMMANDE

ZONE DE RÉSULTATS 1

ZONE DE RÉSULTATS 2

L’ORGANISATION DE LA PAGE DOIT ÊTRE

LIMPIDE

17

AIRBNB

ZONE DE COMMANDE

ZONE DE RÉSULTATS 1

ZONE DE RÉSULTATS 2

L’ORGANISATION DE LA PAGE DOIT ÊTRE

LIMPIDE3 blocs clairement délimités (loi de clotûre) permettent à l’utilisateur de s’y retrouver facilement

17

AIRBNB

ZONE DE COMMANDE

ZONE DE RÉSULTATS 1

ZONE DE RÉSULTATS 2

L’ORGANISATION DE LA PAGE DOIT ÊTRE

LIMPIDE3 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

18

VOS FORMULAIRES DOIVENT ÊTRE

SIMPLES

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.

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

19

Un formulaire qui ne dit pas son nom

19

Un formulaire qui ne dit pas son nom

Choix de la saison

19

Un formulaire qui ne dit pas son nom

Choix de la saison

Choix de la destination

19

Un formulaire qui ne dit pas son nom

Choix de la saison

Choix de la destinationChoix des personnes

20tripplanner.travelalberta.com

LA PRÉSENTATION DES RÉSULTATS NE DOIT PAS PERDRE L’UTILISATEUR

20tripplanner.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

20tripplanner.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

20tripplanner.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

21

http://www.myownbike.de/

21

http://www.myownbike.de/

22

DIMINUER LE NOMBRE D’INTERACTIONS

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.

23

UTILISATION DE LA 3D POURQUOI PAS ?

23

UTILISATION DE LA 3D POURQUOI PAS ?

24

JINS PAINT

Sur mobile : toujours étape par étape

24

JINS PAINT

Sur mobile : toujours étape par étape

Des choix simples, clairement expliqués visuellement.

24

JINS PAINT

Sur mobile : toujours étape par étape

Des choix simples, clairement expliqués visuellement.

Nombre de couleurs limitées

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

25

Exemple pour un site plus classique

http://www.motoblouz.com

25

Exemple pour un site plus classique

http://www.motoblouz.com

Grand interlignage entre les items du menu de filtreCases cocher agrandie pour un meilleure confort d’utilisationUsage de différents tons de gris pour hiérarchiser l’information et soulager le regard

25

Exemple pour un site plus classique

http://www.motoblouz.com

Grand interlignage entre les items du menu de filtreCases cocher agrandie pour un meilleure confort d’utilisationUsage 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 lignesUtilisation de puces en forme d’étoile pour facilietr la lecture

26http://www.cdiscount.com

Le contraire de la simplicité

26http://www.cdiscount.com

Le contraire de la simplicité

Informations parasites

26http://www.cdiscount.com

Le contraire de la simplicité

Informations parasites

Textes petits et pas espacés

26http://www.cdiscount.com

Le contraire de la simplicité

Informations parasites

Textes petits et pas espacés

Beaucoup d’infos compliquée à comprendre

27

27

Créer une expérience utilisateur peut aller à

l’encontre de ces principes

28http://designawatch.okmylo.com

28http://designawatch.okmylo.com

29

Simplifier au maximum le parcours utilisateur

29

Simplifier au maximum le parcours utilisateur

Call-to-action unique

30

30

Prévisualisation des élémentsChoix simplifiés

30

Prévisualisation des élémentsChoix simplifiés

Phase d’apprentissage de l’interface simplifiée par une action unique.Mode de configuration séquentielRapidité d’obtention du résultat (5 clics)

31

31

Pensé pour le mobile et le web

32

LA REPÉRABILITÉ

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 ?

34

http://www.decathlon.fr

34

http://www.decathlon.fr

Utilisation de symboles pour accélérer la lecture et faciliter la compréhension de l’interface.

35

35

Mais ça reste compliqué

36

http://www.fnac.com

36

http://www.fnac.com

Interlignages importants

36

http://www.fnac.com

Interlignages importants

Raccourcis

36

http://www.fnac.com

Interlignages importants

Raccourcis

Chemin de navigation

37

Fnac

37

Fnac

Lisibilité facilité par des grands espaces autour des catégories

37

Fnac

Lisibilité facilité par des grands espaces autour des catégories

Seulement 4 items par catégorie

37

Fnac

Lisibilité facilité par des grands espaces autour des catégories

Seulement 4 items par catégorie

Visuel symbolique d’une catégorie

38

http://www.amazon.fr

Anticiper et corriger les erreurs de l’utilisateur

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.

39

Guidez l’internaute

39

Guidez l’internaute

Decathlon

39

Guidez l’internaute

Decathlon

Amazon

39

Guidez l’internaute

Decathlon

Amazon

Fnac

40

Permettre de filtrer pour gagner du temps

Amazon

40

Permettre de filtrer pour gagner du temps

Amazon

Des choix en adéquation avec la catégorie sélectionnée

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

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.

41

Les filtres les plus importants en haut

41

Les filtres les plus importants en haut

Utiliser des icones plutôt que des boutons radio, rendre ludique, augmenter la surface de clic

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

42

CONFIANCE

43

Les règles du tunnel de commande

43

Les règles du tunnel de commande

Pas de temps de réaction trop longs

43

Les règles du tunnel de commande

Pas de temps de réaction trop longsAfficher des marques de confiance : cadenas et sceau de confiance

43

Les règles du tunnel de commande

Pas de temps de réaction trop longsAfficher des marques de confiance : cadenas et sceau de confianceFormulaires faciles à remplir

43

Les règles du tunnel de commande

Pas de temps de réaction trop longsAfficher des marques de confiance : cadenas et sceau de confianceFormulaires faciles à remplir

Indicateurs de progression

43

Les règles du tunnel de commande

Pas de temps de réaction trop longsAfficher des marques de confiance : cadenas et sceau de confianceFormulaires faciles à remplir

Indicateurs de progression

Affichage permanent du contenu du panier

43

Les règles du tunnel de commande

Pas de temps de réaction trop longsAfficher des marques de confiance : cadenas et sceau de confianceFormulaires faciles à remplir

Indicateurs de progression

Affichage permanent du contenu du panier

Suppression de tous les éléments distracteurs

44

Amazon

Si possible, faire rentrer votre formulaire dans une seule page

44

Amazon

Subdiviser le formulaire en grandes parties clairement délimitées

44

Amazon

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

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

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

46

Sur smartphone, la conversion demeure encore extrêmement basse.

johnlewis.com

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

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

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.

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

48

CONCLUSION

49 http://demodern.com/projects/nike-digital-retail-experience

NIKESTORE : UN MIX COMPLET DE DESIGN, D’INTERACTIVITÉ, DE PLAISIR

49 http://demodern.com/projects/nike-digital-retail-experience

NIKESTORE : UN MIX COMPLET DE DESIGN, D’INTERACTIVITÉ, DE PLAISIR

50

PAR OÙ PASSE L’OPTIMISATION ?

50

UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT

PAR OÙ PASSE L’OPTIMISATION ?

50

UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT

ATTRACTIVITÉ, SIMPLICITÉ, REPÉRABILITÉ, CONFIANCE

PAR OÙ PASSE L’OPTIMISATION ?

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 ?

Téléphone eMail

+ 33 3.20.99.03.21 olivier@wexperience.fr

Merci de votre attention !!

www.wexperience.fr