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

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/

6

Grandes zones de cliquage qui s’agrandissent au survol

de la souris

6


de la souris

AB A

6


de la souris

AB

Aide à la navigation : des informations supplémentaires

apparaissent au survol (ici, renforcement du call-to-action)

A

6


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


visibles

Iconification des actionsSimplification maximale du design d’interface

7


visibles

Iconification des actionsSimplification maximale du design d’interface

Call-to-action clairement identifiable et sans ambiguité

9

http://tripplanner.travelalberta.com

Utiliser le design et la simplicité pour augmenter

l’engagement

9



l’engagement

Un seul call-to-action pour toute la page

9



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

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


Visuel immersif animé

13



Formulaire simple assisté

13




Airbnb a encore besoin d’expliquer son concept

13




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


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



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é »


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


LIMPIDE

17

AIRBNB

ZONE DE COMMANDE




LIMPIDE

17

AIRBNB

ZONE DE COMMANDE




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

17

AIRBNB

ZONE DE COMMANDE




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


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


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


Choix de la saison

19


Choix de la saison

Choix de la destination

19


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


Mise en page carré, simplifiant la compréhension de la page




Beaucoup d’espaces entre les blocs d’informations pour faciliter la

lecture




Beaucoup d’espaces entre les blocs d’informations pour faciliter la

lecture

Wording limité des call-to-action


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 ?

24

JINS PAINT

Sur mobile : toujours étape par étape

24

JINS PAINT


Des choix simples, clairement expliqués visuellement.

24

JINS PAINT



Nombre de couleurs limitées

24

JINS PAINT



Nombre de couleurs limitées

Résultat directement affiché à l’écran

25

Exemple pour un site plus classique

http://www.motoblouz.com

25



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



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é



Informations parasites




Textes petits et pas espacés




Textes petits et pas espacés

Beaucoup d’infos compliquée à comprendre

27

Créer une expérience utilisateur peut aller à

l’encontre de ces principes

28http://designawatch.okmylo.com

29

Simplifier au maximum le parcours utilisateur

29

Simplifier au maximum le parcours utilisateur

Call-to-action unique

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

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

Mais ça reste compliqué

36

http://www.fnac.com

36

http://www.fnac.com

Interlignages importants

36

http://www.fnac.com


Raccourcis

36

http://www.fnac.com


Raccourcis

Chemin de navigation

37

Fnac

37

Fnac

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

37

Fnac


Seulement 4 items par catégorie

37

Fnac


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


Decathlon

39


Decathlon

Amazon

39


Decathlon

Amazon

Fnac

40

Permettre de filtrer pour gagner du temps

Amazon

40


Amazon

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

40


Amazon


Affichage de sous-catégories pour appronfondir plus rapidement sa recherche

40


Amazon


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


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

41


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


Pas de temps de réaction trop longs

43


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

43


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

43



Indicateurs de progression

43




Affichage permanent du contenu du panier

43




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


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


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


ao.com

ATTENTION à l’utilisation d’intitulés de champs dans les champs proprement dit. Sur mobile, ça peut rapidement perdre l’utilisateur.

47


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

50

PAR OÙ PASSE L’OPTIMISATION ?

50

UNE ATTENTION PERPÉTUELLE PORTÉE SUR LE CLIENT


50


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


50


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

TRAVAIL PERMANENT SUR LES DÉTAILS


Téléphone eMail

+ 33 3.20.99.03.21 [email protected]

Merci de votre attention !!

www.wexperience.fr

mailto:[email protected]

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

Services