FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par Frédéric Veidig

LUXE et e-Commerce : quelle expérience utilisateur? Mai 2012

Par Frédéric Veidig - Directeur Expérience Utilisateur

UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX

1. Introduction : pourquoi cette présentation sur
le Luxe, l’UX et l’e-Commerce?

UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX 2

I. Introduction : pourquoi ce sujet de présentation?

1. Répondre à une réalité du consultant UX en agence

Luxe et e-Commerce
=
Une problématique rencontrée en agence digitale.

Une problématique dans laquelle l’exigence d’une
« expérience utilisateur » innovante et différenciante est
souvent mise au premier plan par l’annonceur Luxe.



1. Répondre à une réalité du consultant UX en agence

Les demandes d’intervention sont diverses :
• Prolonger l’expérience vécue en magasin (en boutique).

• Passage au e-Commerce de sites luxe déjà existants

• Création d’une nouvelle plateforme digitale e-Commerce Luxe

• Organisation du catalogue digital des produits Luxe

• Optimisation de parcours client

• Optimisation du design d’interface sur certaines pages ou
fonctionnalités.
• Etc…



2. Pour comprendre l’évolution de la relation luxe/digital

Avant : Avant :
• Les marques de luxe ont depuis
Luxe + Digital longtemps investi le digital mais
davantage pour communiquer
= que pour vendre.
• Cela a généré la création de
Expérience de marque forte nombreux sites plaquettes, sites
+ évènementiels, sites full Flash
avec des expériences créatives
Communication fortes mais souvent totalement
(objectif de notoriété digitale) déconnectés des possibilités de
business direct offerte par le
digital.



2. Pour comprendre l’évolution de la relation luxe/digital

Maintenant : Maintenant :
• Le canal de vente e-Commerce
Luxe + Digital constitue aujourd’hui une part
non négligeable du commerce
= et les perspectives de croissance
de ce canal sont toutes très
Expérience de marque forte positives.
+ • Les marques de luxe sont
Communication désormais matures sur le digitale;
elles ont maintenant une vision
(objectif de notoriété digitale)
ROISTE du digital; elles veulent
+ elles aussi se lancer dans l’e-
Commerce, gagner des parts
Ventes de marché et mesurer leurs
(ROI mesurables en temps réel) performances business.


3. Qu’est-ce que le Luxe?
Crédit : Christian Dior - Sac Lady Dior



Le mot luxe vient du latin luxus qui signifie
"excès"

Le luxe est quelque chose qui n’est pas
essentiel* mais qui est désirable et souvent
trés coûteux.

* Le luxe c’est le superflu



On peut aussi caractériser le luxe par les attributs suivants :

• La rareté et l’exclusivité
Soit par une production ou une diffusion volontairement limitée soit par la rareté
des matériaux qui composent le produit (ex : pierres précieuses)

• L’esthétisme, la désirabilité et le rêve
Une esthétique travaillée (à ne pas confondre avec le bon goût) est souvent
associée aux produits luxe.
D’une façon générale un produit de luxe suscite souvent la convoitise.
Un produit de luxe génère le rêve; c’est la promesse d’un « meilleur » au de là du
« commun ».

• La tradition, la qualité et l’excellence
La transmission de savoirs faire techniques très précis, transmis au fil du temps de
génération en génération par « les Maisons » est souvent mise en avant.
La notion de luxe est systématiquement associée à une notion de qualité « hors
norme ».



Le Luxe c’est aussi

• L’élitisme dans la cible de consommateurs
La notion de luxe est antinomique avec la notion de
démocratisation; ce qui est luxueux n’est par essence
pas accessible à la population de « masse ».

« Le luxe, c’est l’inaccessible. »

Lorsqu’un produit de luxe commence à devenir
abordable, il perd son aura de luxe.
Le Joaillier Mauboussin a jeté un pavé
dans la marre du monde de la Joaillerie Ex : Les parfums des grandes maisons de luxe (Chanel,
en affichant le prix de ses créations dans Dior, Yves St Laurent, etc..) que l’on va pouvoir acheter
le métro parisien. en réseau de distribution sélective de parfums
(Séphora, Marionnaud) , parfois même avec des
Résultats : promotions ne sont plus considérés comme des
Un chiffre d’affaire fortement en hausse produits de luxe.
Mais une image luxe amoindrie.




• Les trois luxes
Les acteurs du luxe distinguent cependant trois niveaux de luxe pour segmenter leur
marché. Cette distinction leur permet d’effectuer de la diffusion de masse sur l’un
des segments tout en restant dans l’élitisme et l’inaccessibilité par ailleurs :

1. Le luxe inaccessible 2. Le luxe intermédiaire 3. Le luxe accessible

Pour la classe nantie Pour la classe intermédiaire. Pour la classe moyenne.

On parle d’hyper Luxe Produits couteux destinés Produits d’entrée de gamme
aux classes CSP+ dans une marque de luxe et
Ex : Yacht, Voitures de sports, accessibles au plus grand
Villa, Haute Joaillerie, Haute Ex : Maroquinerie, Joaillerie, nombre
Horlogerie, Haute Couture… Horlogerie, Prêt-à-Porter, Ex : Parfums, Cosmétique,
Hôtellerie de luxe… Accessoires, Gastronomie…




• Un cérémonial de vente, une expérience d’achat
travaillée et du service exclusif entourant le produit
.

L’expérience d’achat contribue à la valorisation du
produit.

La façon d’acheter un produit de luxe est
presqu’aussi importante que le produit lui-même.

Par exemple : acheter un parfum Guerlain dans la
boutique Guerlain située Place Vendôme, ne
procurera pas la même expérience que d’acheter
ce même parfum au magasin Séphora situé avenue
des Champs Elysées.
Par ailleurs, la notion de services
Cette maîtrise du ressenti sur tout ce qui concerne le
exclusifs (privilégiés) accompagne très
produit (y compris l’achat) c’est aussi ce qui fait
souvent, le produit luxe.
qu’un produit appartient au luxe.
Le consommateur n’achète pas que le
produit mais aussi les services associés.


« Oui »

4. Le Luxe s’intéresse t-il à l’e-Commerce?


Oui, les maisons de luxe s’intéressent au e-Commerce
Les raisons de cet intérêt sont multiples :

Enjeux business Enjeux images

• Lutter contre la contrefaçon • Inscrire sa marque de luxe dans la
disponible sur Internet (ex : Vuitton modernité des nouveaux canaux
avec eBay) de distribution.
• Lutter contre le marché gris • Maîtriser son image et la
(marché parallèle mais légal) valorisation de ses propres produits
• Augmenter ses ventes sur le canal digital
• Lutter contre la concurrence • Faire du marketing one to one
• Aller à la rencontre des nouveaux (personnaliser la relation client)
points de contact avec sa
clientèle
• Supprimer les barrières
géographiques.




Pour s’adapter aux différences culturelles
géographiques

Les différences culturelles entre pays révèlent des rapports au luxe qui sont
spécifiques.

Contrairement à la France de nombreux pays sont beaucoup plus à l’aise
avec le fait de consommer ouvertement du luxe.

Dans ces pays, le luxe est un produit comme un autre et peu donc s’acheter
via Internet.


Oui, pour s’adapter culturellement

En Chine et en Asie
Ce qui compte n’est pas tant l’expérience d’achat que le fait d’avoir un produit de
luxe visible, ostentatoire signe d’appartenance à une classe sociale.

En Asie, Internet n’est pas un frein à l’achat, ce qui importe c’est avant tout d’avoir accès aux produits de luxe
pour les consommer.

Internet est aussi une opportunité pour une marque de luxe de couvrir virtuellement tout un pays émergent
alors que seuls deux-trois magasins existent en réel « Mortar » sur l’ensemble du territoire.



Aux USA
Les américains vivent avec le digital ; ils sont par ailleurs beaucoup plus pragmatiques
que les français. Acheter un produit de luxe par Internet est plus « naturel » pour eux.


L’exemple de Cartier.com
Ce n’est pas un hasard si le site Cartier (Maison Française) ne propose
actuellement le e-Commerce que pour les Etats-Unis et le Japon.


L’exemple de Cartier.fr
La fiche produit du site français n’offre pas l’accès au e-Commerce


L’exemple de Cartier.us
La fiche produit du site Américain offre l’accès au e-Commerce


L’exemple de Cartier.jp
La fiche produit du site Japonais offre l’accès au e-Commerce


6. Qu’est-ce que l’UX?
Crédit : Sony Playstation



Une bonne expérience utilisateur
=
un Graal?

Tous les annonceurs digitaux veulent atteindre ce Graal (Comme Apple a pu
l’atteindre avec ses produits (iPhone, ipad, etc)) sans forcément, toute fois à
parvenir à définir précisément ce qu’est une bonne expérience utilisateur.



L’expérience utilisateur se construit sur la base de 6 piliers
Ce sont des capacités particulières d’un dispositif digital qui vont définir l’expérience des
utilisateurs lorsqu’ils seront confrontés à ce dispositif.

L’Utilité L’Utilisabilité La Désirabilité
Qui répond à Ergonomie/ Qui est
un besoin Qui est facilement attractif, séduisant
utilisable

L’Emotion L’Adaptabilité La Socialité

Capacité à provoquer Qui sait évoluer Qui permet une
des émotions positives avec l’utilisateur expérience sociale


7. Qu’est-ce qui caractérise une expérience luxe
digitale?

7. Qu’est-ce qui caractérise une expérience luxe digitale?

C’est plus que l’acquisition du produit lui-même…
C’est aussi la façon d’acheter ce produit.

Dans le luxe, la façon d’acheter importe autant que le produit lui-même.

Le cérémonial est important.

Le parcours utilisateur ou la cinématique d’interface sont parfois allongés
volontairement pour créer du « cérémonial ».



Cinématique d’achat digital et cérémonial luxe

Exemple : www.louisvuitton.fr - cérémonial digital : e-Boutique (full Flash)
Passage de la liste produit à la fiche produit puis retour à la liste produit.*

* Dans cette exemple le passage direct à un produit similaire depuis la fiche produit n’est
pas possible.
L’utilisateur doit repasser systématiquement par la liste produits pour accéder à un autre
produit de la liste.

L’utilisateur est de ce fait systématiquement confronté à l’animation de l’interface
(cinématique de coverflow + construction et déconstruction progressive de la fiche
produit.)
Le caractère systématique de ce parcours allongé constitue le cérémonial de découverte
des produits sur la e-Boutique Vuitton.



Ex : louisvuitton.fr - cérémonial digital :
Liste produits sous forme de coverflow + clic sur le produit central



Clic sur le produit central



Disparition du Coverflow



Ecran de chargement de la fiche produit



Construction progressive de la fiche produit



Fiche produit complète



Clic sur le fil d’Ariane « Sac à main »



Disparition de la Fiche produit



Ecran de chargement de la liste produit (Coverflow)



Apparition progressive de la liste produit (Coverflow)



Ex : http://www.louisvuitton.fr - cérémonial digital :



Ex : Vuitton.com - cérémonial digital :



Liste produit (Coverflow) affichée dans son état initial



Analyse du parcours utilisateur louisvuitton.fr

Le parcours actuel Vuitton est un parcours expérientiel
Vuitton a souhaité privilégier le cérémonial via une cinématique et un parcours
allongés et obligatoires

Liste produit Ecran de Affichage partiel Fiche produit n°1
chargement Fiche produit n°1 Affiché

Liste produit Ecran de
chargement



Analyse du parcours utilisateur louisvuitton.fr

Si un parcours alternatif, plus direct avait été mis en place,
ce parcours aurait été moins « joli » et aurait moins servi l’image prestigieuse de
la marque.

Liste produit Fiche produit n°1 Fiche produit n°2 Fiche produit N
affichée affichée affichée
directement directement directement

Par ailleurs dans ce parcours plus direct :
• Les pages ce seraient affichées immédiatement sans effet de « clipping ».
• L’utilisateur aurait pu passer directement d’une fiche produit à une autre sans
avoir à repasser par la liste produit.



L’expérience d’achat pour le luxe…
C’est aussi de la mémorisation :
C’est ce que le client en garde après coup.

Une expérience se vit sur le moment mais surtout à travers l’empreinte
résiduelle qui va rester en mémoire après coup.

Une expérience, on en parle toujours au passé.
« C’était sympa !» , « C’était bof! », « C’était beau ! », etc.

Pour le luxe, l’expérience d’achat ne doit pas seulement être efficace,
elle doit être positivement et émotionnellement marquante.



Les piliers de l’expérience utilisateurs privilégiés par le luxe digital

La Désirabilité
• De beaux visuels
produits
L’Utilité L’Utilisabilité • De belles photos
• De belles personnes
Qui répond à Ergonomie/ • De belles interfaces
un besoin Qui est facilement créatives
utilisable

L’Emotion
• Un story-telling
marquant
• Un univers immersif L’Adaptabilité La Socialité
• Être dans la
« sensation »
• Une interactivité Qui sait évoluer Qui permet une
innovante avec l’utilisateur expérience sociale
surprenante…


Le nombre d’informations utiles
http://www.louisvuitton.fr/ Fiche Produit est réduit au minimum

Pilier UX Désirabilité : Le produit est magnifié par un visuel et une mise
en scène très travaillée esthétiquement


Le nombre d’informations
http://www.louisvuitton.fr/ Fiche Produit utiles est réduit au minimum

Pilier UX Emotion : Le visuel procure une « sensation » d’immersion
hors norme pour du e-Commerce.


8. Qu’est-ce qu’une bonne expérience
e-Commerce?

8. Qu’est-ce qu’une bonne expérience e-Commerce?

Une bonne expérience e-Commerce ?

• De la richesse produit
• Du prix (des bons prix)
• De l’Information
• De la clarté
• De l’aide au choix
• De l’accessibilité
• De la Réassurance
• De l’efficacité
• Du confort de manipulation (utilisabilité)
• …



Les piliers de l’expérience utilisateurs privilégiés par le e-Commerce

L’Utilité L’Utilisabilité
• Visuel produit, • Fiche produit
• Descriptif détaillé standardisée
• Prix du produit, • Tunnel d’achat
standardisé
La Désirabilité
• délais livraison
• frais de livraison, • Lisibilité
Qui est
• garantie, • Absence de barrière
attractif, séduisant
• achat sécurisé technologique (ex:
• … Flash)…

L’Adaptabilité
• Reconnaissance du
client
L’Emotion • Suggestions de La Socialité
produits en rapport
avec son profil
Capacité à provoquer • … Qui permet une
des émotions positives expérience sociale



Illustration www.laredoute.fr Fiche Produit Le nombre d’informations utiles est important



Illustration www.3suisses.fr Fiche Produit Le nombre d’informations utiles est important


9. Y a-t-il une standardisation naturelle des
expériences e-Commerce?


Le monde réel propose des supermarchés standardisés
Des rayons
Un caddy, un panier
Une ligne de caisses
…



Le monde réel propose des boutiques de mode standardisées
Une vitrine
Des espaces
Des cabines d’essayages
Une ligne de caisses
…

http://inthestreetofmode.wordpress.com/category/its-my-life/



Le monde digital e-Commerce va lui aussi
spontanément vers la standardisation :
en utilisant des patterns d’interface

Comme dans le monde réel

L’e-Commerce pour être plus efficace, utilise des
patterns d’interfaces connus du plus grand
nombre d’utilisateurs.

Lorsqu’un pattern est jugé performant, il est
reproduit par l’ensemble des acteurs du e-
Commerce et devient un standard.



Objectif des pattern e-Commerce standardisés :

Placer l’utilisateur dans une interface qu’il va
davantage reconnaître que découvrir pour :

1. Augmenter le confort de perception de l’utilisateur en
diminuant la charge cognitive nécessaire au décodage
de l’architecture de l’information. On souhaite en effet
que ce décodage soit fait sans effort par l’utilisateur.

2. Concentrer, cibler l’attention disponible de l’utilisateur
sur les avantages produits et les éléments de
réassurances plus que sur la compréhension de
l’architecture ou de la manipulation de l’interface : Ce
qui est important, c’est davantage le produit lui-même
que l’on vend et non l’enveloppe digitale qui est autour.



Exemple de pattern d’interface : La Fiche produit DVD (ici Amazon)



Exemple de pattern d’interface : La Fiche produit DVD (ici Fnac.com)



Exemple de pattern d’interface : La Fiche produit DVD (ici Pixmania)


10. L’internaute luxe est-il un internaute
comme les autres?
Crédits : http://society6.com/artist/r0gue by Danny Haas


10. L’internaute luxe est-il un internaute comme les autres?

Rappel des chiffres français 2011*

Les sites e-commerce
français les plus actifs*

* Fevad (Fédération du e-commerce et de la vente à distance ) & KPMG : BILAN E-COMMERCE 2011 | janvier 2012



Le luxe a tout intérêt à reprendre certains
codes du e-Commerce classique.
Car l’Internaute luxe est un internaute comme les autres.
L’internaute qui va se retrouver sur un site e-Commerce de luxe n’est pas un
internaute « à part », il consomme majoritairement sur des sites e-Commerce
classiques.

Son style de vie Ses sites e-Commerce

Jeune adulte Son site
urbain CSP+ e-Commerce luxe



L’Internaute luxe est un internaute comme les autres

Son style de vie Ses sites e-Commerce

Femme urbaine Son site
CSP+ e-Commerce luxe

Le consommateur de luxe consomme aussi des produits courants.

L’internaute acheteur de luxe en ligne forge avant tout et majoritairement ses habitudes de
navigation et d’ergonomie sur des sites e-Commerce de biens et de services courants.
La consultation d’un site e-Commerce luxe est sans doute relativement marginale dans sa vie
d’internaute.


11. Quelle innovation pour l’e-Commerce luxe :
incrémentale ou de rupture?


Il existe deux types d’innovations

L’innovation incrémentale continue Lecteur DVD blu-ray
C’est une innovation qui s’appuie sur l’existant et qui
propose des évolutions graduelles, mesurées et linéaires Amélioration
par l’ajout successif de petites améliorations. continue

Ex : Le lecteur DVD -> Le lecteur DVD Blu-Ray Lecteur DVD

L’innovation de rupture
C’est une innovation discontinue qui s’appuie sur un Smartphone

changement radical de paradigme. Un tel changement
Rupture (saut
induit souvent un bouleversement des habitudes technologique,
d’utilisation. changement des usages)

Ex : Le téléphone mobile -> l’iPhone (le Smartphone tactile) Mobile phone
70

http://blogs.lesechos.fr/paristech-review/innovation-de-rupture-comment-rechercher-l-inimaginable-a5504.html



L’innovation de rupture est souvent une
exigence pour un annonceur luxe digital
En effet, certains annonceurs luxe vont avoir tendance à
rechercher l’innovation digitale pour se démarquer de la
concurrence.
Pour assoir la spécificité de leur univers de marque, ces
annonceurs luxe seront en effet tentés par des interfaces
« originales » dans lesquels l’effet « Wow » sera important.

A la recherche de « l’effet Whaou!»
Pour que l’effet différenciant soit ressenti de façon
« impressionnante » et immédiate par les internautes un
annonceur luxe sera plus naturellement sensible à des
innovations de rupture.

Mais attention, les expériences rupturistes ne sont pas
forcément pertinentes pour une efficacité e-Commerce…
Crédits Impressive : http://www.kerrvernon.co.uk/


Innovation de rupture et Commerce réel
Dans le réel des tentatives d’innovations rupturistes existent mais sont
assez rare car difficile à mettre en place de façon concluante.

Exemple : Apple Store
Les lignes de caisses ont été supprimées. Les caisses de paiement sont éparpillées
dans le magasin et dissimulées. Chaque vendeur peut donc se déplacer vers les
clients, fournir du conseil et encaisser un paiement.


Innovation de rupture et Commerce réel
Dans le réel des tentatives d’innovation rupturistes existent mais ces tentatives
ne sont pas toujours concluantes .

Exemple : Carrefour Planet
Ce programme massif d’innovation des hypermarchés Carrefour a été corrigé car
parfois trop rupturiste pour la clientèle habituée.
Il fut ensuite complètement stoppé (en 2011)

UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX http://fr.wikipedia.org/wiki/Carrefour_Planet
73

10. Des Innovations de l’e-Commerce luxe
incrémentales ou de rupture?

L’e-Commerce est majoritairement en innovation incrémentale
L’e-Commerce a beaucoup plus tendance à évoluer et à s’améliorer par petites touches que par
des ruptures très innovantes mais radicales.

Une philosophie e-Commerce « Test and Learn » et R.O.Iste*
L’enjeu premier du commerce est sans cesse d’améliorer le taux de conversion de ses prospects.
Lorsque l’e-Commerce veut améliorer ce taux de conversion, il introduit de nouvelles fonctionnalités
« ex: l’achat en un clic (One click buying par Amazon) ».
L’impact de ces nouvelles fonctionnalités est alors immédiatement mesuré par des indicateurs
digitaux de visites ou tout simplement de chiffre d’affaire.
Si une fonctionnalité est jugée performante, elle est conservée, sinon, elle est automatiquement
abandonnée.
Chaque fonctionnalité qui est introduite ne remet jamais en cause la globalité du paradigme e-
Commerce car on ne souhaite jamais prendre le risque de perdre tous ses clients.

Les patterns d’interfaces e-Commerce évoluent eux aussi par
petites touches.
Cette prudence est guidée par la difficulté de trouver des innovations d’interfaces rupturistes aussi
efficaces commercialement que les interfaces e-Commerce classiques.

UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX * Return On Investment 74


Conclusion : De l’innovation oui mais…
Le luxe peut vouloir créer LA différence en mettant en place des interfaces
radicalement innovantes pour sa plateforme digitale de marque.

E-Commerce = Business first
En revanche pour tout ce qui est e-Commerce, un acteur du luxe aura plutôt intérêt
à ne pas prendre trop de risque et à innover par petites touches seulement à fin de
garantir son business.

Exception faite si cette marque de luxe s’inscrit dans une démarche R&D digitale qui lui sert à valoriser son image.
Et dans la mesure où cette marque de luxe n’attends pas forcément que sa plateforme e-Commerce soit
performante ou même juste rentable.
On parle alors de « R.O.I Image » : le retour sur investissement est axé sur la notoriété et non sur le chiffre d’affaire.


Ce que l’on observe sur le web

12. Les différentes architectures de l’information
e-Commerce Luxe

12. Les différentes architectures e-Commerce Luxe

On trouve deux types d’architectures de plateformes digitales luxe

Architecture A
Deux sites clairement séparés
• Un site marque
• Un site e-Commerce

Environnement graphique Environnement graphique
et navigation spécifiques et navigation spécifiques

Un site marque Un site marque
luxe luxe
Edito e-Commerce
Passage disruptif



A. Deux sites séparés
Un site marque Un site e-Commerce
http://yslexperience.com http://www.ysl-parfums.fr/

Passage dans des environnements radicalement différents.
Comme il s’agit de deux sites distincts , il est peu probable que l’utilisateur fasse
plusieurs aller et retour entre ces univers.



On trouve deux types d’architectures de plateformes digitales luxe

Architecture B
Un seul site, deux univers
L’univers « éditorial » cohabite avec la boutique e-Commerce
Objectif : permettre un passage plus naturel et plus fréquent de
l’un à l’autre.

Logo marque Plateforme digital luxe

Navigation transverse luxe

Rubriques
éditoriales Boutique
e-Commerce



B. Un seul site, deux univers (illustration)
Exemple : Cas Kenzo : Réflexions
avant vente

Questions :

How to ideally mix brand
content, products and
eCommerce user process ?
How to provide a seamless
user navigation beetween
fashion catalog and Perfumes
catalog ?



Exemple : Cas Kenzo : Réflexions avant vente

Kenzo contents
BRAND CONTENTS NAVIGATION PRODUCTS BUYING NAVIGATION

PRODUCTS CATALOG
INSPIRATIONAL RATIONAL
NAVIGATION NAVIGATION

USER’S CART
Key words : Key words :
• Serendipity • Seductive products
• Surprising • Buying Funnel
• Seducting • Ergonomic interface
USER’S CHECK-OUT
• Amuzing PROCESS • Effectivness
• Amazing • Reinsurrance
• Sharing • Easy to understand
USER’S PAYMENT
PROCESS

« Kenzo’user experience »


http://www.swarovski.com/Web_F http://www.swarovski.com/Web_F
R/fr/online_shop R/fr/magazine

La partie « édito marque » et la partie e-commerce sont
hébergées sous le même site. Elles possèdent une
navigation transverse commune.
L’utilisateur se sent dans le même environnement lorsqu’il
passe de l’une à l’autre. Ce qu’il voit dans la partie édito
doit normalement pouvoir s’acheter dans la partie
UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX boutique, voire, mieux, depuis la partie édito elle-même.


http://www.lancome.fr/_fr/_fr/ecommerce/medias/animatio http://www.lancome.fr/_fr/_fr/parfums.aspx
ns/sideline/tresor-midnight-rose/index.aspx#/sitemap


Ce que l’on observe sur le web

13. Les tendances d’interfaces e-Commerce luxe?


Tendances 1

Les sites « Rich Media » « Plein
écran » « sans scroll vertical »



Tendance 1
Les sites « Rich Media » « Plein écran » « sans scroll vertical »

Description

Immersion
Site dont l’objectif est d’être très immersif pour plonger l’utilisateur dans
l’univers de la marque et lui faire vivre un « cérémonial » spécifique.

Rich Media
Site faisant un usage fréquent des médias riches (Interface Flash, Animation
Flash, Photos en haute résolution, Vidéos, Animations)

Plein écran
Une des particularités de ce type de sites c’est d’ignorer le paradigme du
Web et des pages HTML classiques avec scroll.
Les écrans sont conçus pour que l’utilisateur n’ait pas à scroller pour accéder
aux informations. Toute l’information s’affiche dans la résolution de l’écran.



Les sites « Rich Media » « Plein écran » « Full Frame » « sans scroll vertical »
http://www.cartier.us



http://www.dior.com



http://www.dior.com/beauty/fra/fr



http://www.longchamp.com/fr



http://www.longchamp.com/fr/



http://www.mauboussin.fr//



http://france.hermes.com/



http://www.louisvuitton.fr



Tendance 1

Points positifs Expérience Utilisateur

• Sensation d’immersion visuelle et parfois sonore

• Produits valorisés à l’extrême de ce que l’on peut faire en
digital par des visuels très esthétiques (images statiques,
« Drag & Motion » (animation), vidéos, etc.)

• Interface esthétisée à son maximum (comme un écrin digital)

• Une image de marque et un statut « luxe » magnifiés; une
différenciation renforcée d’avec le reste du e-Commerce
plus commun.



Tendance 1

Points négatifs Expérience Utilisateur
• Négation du paradigme du Web (contraintes techniques, standards de mise en forme,
de navigation et d’ergonomie) au profit d’un paradigme de « CD Multimédia ».

• Une sensation de contrainte, de moindre liberté d’exploration : « l’utilisateur ne peut pas
sortir du cadre-écran à résolution fixe ».

• Allongement des parcours utilisateur dû à une multiplication du nombre d’écrans à
parcourir en raison (sans scroll possible, la surface utile à l’affichage de l’information se
trouve restreinte) - Restriction de la visibilité.

• Sensation de « lourdeur » dans l’interaction avec l’interface (manque de réactivité de
l’interface, temps de chargement accrus du au poids des éléments Rich Media).

• Problèmes de compatibilités techniques (bug et incompatibilités Flash (iPhone, iPad)).

• Information e-Commerce utiles souvent manquantes(prix, disponibilité, livraison,
réassurance…)



Tendance 1

Mon opinion

• Des sites à regarder
Des sites davantage réalisés pour être regardés que pour être utilisés

• Des sites innovants technologiquement
Des sites plus proche de la philosophie du DVD multimédia (rich media /
Flash etc..) que de la philosophie web HTML simple

• Des sites très créatifs
Des sites davantage pilotés par le design créatif et davantage pensés pour
séduire la marque de luxe elle-même que pour satisfaire les utilisateurs e-
Commerce de cette même marque

• Des sites orientés « communication »
Des sites sans doute plus efficace sur des objectifs de communication, de
buzz et de gain de prix (ex : FWA.com) que sur des performances de vente



Tendances 2

Les sites « Mur d’images » « Mosaïque
moodboard »



Tendances1
Les sites « Mur d’images » « Mosaïque moodboard »

Description Créer des atmosphères par des mosaïques d’images
Ici aussi l’objectif est de créer des ambiances immersives.
Mais au lieu de magnifier un visuel unique et fort, on va multiplier les images pour apporter une
richesse et un foisonnement.

Des friandises visuelles
Il y a une forme de générosité dans ces interfaces : la marque donne plein d’images à voir comme
autant de friandises visuelles à déguster.
Les interfaces mur d’images sont en train de se multiplier sur le web ex : www.Pinterest.com

Pages longues
Les pages sont ici volontairement longues et pensées pour être scrollées.
Chaque « étage » raconte un bout d’histoire ou donne une clé de lecture supplémentaire sur
l’univers.

Multi devices
Ce type d’interfaces est aussi conçu pour des supports tactiles pour lesquels le scroll avec la
molette souris est remplacé par un mouvement de « Flicking » tactile qui peut même être ressenti
comme étant ludique, plaisant.
Ce type d’interfaces a été popularisé avec des applications iPad ex : Flipboard, Vogues, Elle…



Les influences de ce type d’interfaces : Les applications iPad de Mode

Vogues UK - iPad

Elle Magazine - iPad



Les influences de ce type d’interfaces : Les applications iPad agrégatrice d’informations

Flipboard - iPad The Guardian - iPad



Les influences de ce type d’interfaces : Les concepts digitaux autours de l’Image

Pinterest.com Pinterest - iPad



Les influences de ce type d’interfaces : Magazine digitaux de tendances
http://www.dazeddigital.com/


13. Les tendances d’interfaces
e-Commerce luxe?
Les sites « Mur d’images -Moodboard »

http://fr.burberry.com/store/
Page d’accueil
Des effets surprise son cachés dans la page : des animations
vidéos apparaissent en roll over sur certaines cases.


e-Commerce luxe?


Page univers femme
Des effets surprise son cachés dans la page : des animations
vidéos apparaissent en roll over sur certaines cases.


e-Commerce luxe?


Liste Produit


e-Commerce luxe?


Fiche Produit


e-Commerce luxe?

http://www.fred.com/

Page d’accueil


e-Commerce luxe?


Page Univers


e-Commerce luxe?


Fiche Produit


e-Commerce luxe?

http://www.dolcegabbana.com/store

Page d’accueil


e-Commerce luxe?

http://www.zadig-et-voltaire.com

Page d’accueil



Tendances 2

• Sensation d’immersion visuelle

• Appréhension complète de l’univers de la marque ou du
produit de luxe

• Facilité d’appréhension de l’univers (lecture facile des
images)

• Sensation de liberté : on est dans une logique de page web
(et non d’écran) « on sort du cadre !».

• Compatibilité avec les nouveaux formats d’information pour
support tactiles (tablettes)



Tendances 2

• Risque de saturation par l’image : trop d’images peuvent fatiguer
l’utilisateur au bout d’un moment de sur-sollicitation visuelle.

• L’aspect trop « ludique » de l’interface peut détourner des objectifs
de vente du site.

• Occultation des informations textuelles importantes :
La compréhension d’une image nécessite un effort cognitif bien moindre que du texte
aussi un nombre trop important d’images a tendance à occulter les informations
textuelles (importantes pour l’e-Commerce) en ce sens que ces images monopolisent
prioritairement l’attention de l’utilisateur.

• Augmentation du poids des pages : Aucun problème pour une consultation
ADSL ou WI-FI mais potentiellement compliqué pour une consultation mobile 3G ou Edge.



Tendances 2

Mon opinion
• Impact visuel réussi
Des sites qui parviennent à créer un impact visuel fort tout en adoptant le principe
de page web classique(qui s’étalent dans la longueur).

• Compatible pour de l’e-Commerce efficace
Des sites qui sont compatibles avec des architectures d’information propre au e-
Commerce : Les listes produits peuvent afficher d’emblée un grand nombre de
produits, les fiches produit prennent l’espace nécessaire pour s’étoffer
d’informations et d’univers autour du produit.
Attention toute fois au « trop d’images » qui peut nuire à l’efficacité e-Commerce
par l’aspect ludique des page.

• Dans la modernité
Des sites qui font la jonction avec les nouveaux modes de consommation du digital
: via le tactile et les tablettes.



Tendances 3

Les sites « Black & White »
«interfaces HTML Basique»



Tendances 3
Les sites « Black & White » « interfaces HTML Basique »

Description 1/2

Influences des magazines de mode digitaux
De nombreux site e-Commerce de luxe reprennent actuellement les codes des
magazines digitaux de Mode.

Lecteurs de magazine digitaux de Mode = Consommateurs e-Commerce Luxe
Les magazines de Mode sont des relais d’information privilégiés pour les marques de
luxe et les internautes qui consomment de l’information digitale sur la Mode sont aussi
ceux qui sont susceptibles d’acheter cette même Mode en ligne.

Prolonger l’expérience d’un magazine digital de Mode sur le site e-Commerce Luxe
Il y a un intérêt certain à faire en sorte que l’internaute lorsqu’il consulte un site e-
Commerce se retrouve dans un « pattern » d’interface connu et éprouvé.

En prolongeant la mise en place des codes graphiques, d’interface et d’architecture
d’information propre aux Magazines de Mode, les sites e-Commerce de luxe évitent la
disruption dans l’expérience utilisateur.



Tendances 3

Description 2/2

Efficacité réactive des portails d’information de Mode
Les portail magazines de Mode (Elle, Vogues, etc…) sont très réactifs sur l’évolution de leurs interfaces et mode de
présentation de l’information.
L’enjeu majeur d’un magazine digital sur le web étant d’être lu par les internautes, l’efficacité de leurs interfaces,
de leurs architectures d’information sont donc sans cesse éprouvées.

Légèreté, simplicité et réactivité de l’interface
Comme pour les magazines digitaux, les interfaces e-Commerce qui s’en inspirent sont volontairement simplistes.
Elles s’appuient sur ce qui fait la base du web : du texte en typographie système, des liens hypertextes et des
images faciles à charger (et compatible tout support).
Les grilles d’organisation de l’information sont très souvent simples et identifiables facilement à l’œil par l’utilisateur.

Du Noir et du Blanc, simplement
Comme pour insister sur cette volonté d’alléger un maximum l’interface et d’être dans un minimalisme esthétique,
le Noir et le Blanc sont utilisés pour créer des interfaces basiques, ascétiques, classiques mais, très lisibles et sans
doute bien moins rapidement démodées. Le Blanc est majoritairement présent pour créer un sentiment de
« respiration ».
L’habillage graphique du site est alors réalisé par les visuels produits eux-mêmes.


e-Commerce luxe?
Les interfaces « Black&White »

Les influences de ce type d’interfaces :
Les Magazines digitaux de Mode

http://www.lofficielmode.com/


e-Commerce luxe?


http://www.harpersbazaar.com/


e-Commerce luxe?



e-Commerce luxe?

http://www.ysl.fr/fr/

Sites Yves St Laurent e-Commerce
Prêt à Porter

Page d’accueil


e-Commerce luxe?


Page univers Femme


e-Commerce luxe?


Liste Produit


e-Commerce luxe?


Fiche Produit


e-Commerce luxe?

http://www.ralphlauren.fr/

Célèbre marque de vêtements
« Preepy - WASP » Sportwear et
business

Page d’accueil

L’interface est minimaliste et traitée en
noir et blanc pour laisser toute la
couleur du visuel principal « exploser »
par contraste.


e-Commerce luxe?


Page univers « Black Label »

Cette page univers n’hésite pas à
utiliser de l’espace en hauteur.

L’utilisateur naviguera dans cette page
en descendant la page dans sa
profondeur, d’étage en étage.
Comme si l’utilisateur était dans un
magazine digital ou dans un blog
« Mode ».


e-Commerce luxe?


Liste Produit


e-Commerce luxe?


Fiche Produit


e-Commerce luxe?

http://www.christofle.com/fr

Maison prestigieuse française d’art de
la tables et d’orfèvrerie.

Page d’accueil

Cette interface se veut épurée et
sobre; il renvoie aussi à une certaine
forme d’austérité et de rigueur dont
peut parfois se prévaloir le
« classicisme ».

L’aspect global « monochrome » est ici
renforcé par des visuel eux-mêmes dé
saturés et passés en niveau de gris.


e-Commerce luxe?

http://www.christofle.com/fr

Fiche Produit

Interface « Black & White » poussée à
l’extrême pour un rendu « lumineux ».

Seul le « call to action » principal
générateur de business est mis en
couleur orange « Ajouter au panier » .


e-Commerce luxe?

http://www.belancy.com

Belancy est une bijouterie en ligne mise
en place par l’un des co-fondateur du
site Rue du Commerce.

Belancy propose un choix de pièces
de joaillerie variant de 100 euros à
presque 10 000 euros.

Page d’accueil


e-Commerce luxe?


Liste Produit


e-Commerce luxe?


Fiche Produit


e-Commerce luxe?

http://www.lancome.fr

Liste Produit


e-Commerce luxe?

http://www.lancome.fr

Fiche Produit


16. Les patterns d’interfaces
e-Commerce luxe?

Les « fashion » E-store de marques plus « abordables »
adoptent aussi les interfaces « Black&White »


e-Commerce luxe?

http://www.apc.fr

Page d’accueil


e-Commerce luxe?

http://eboutique.maje.com

Liste Produit

Un visuel alternatif apparaît au roll over
sur les items de la liste produit.


e-Commerce luxe?

http://www.apc.fr

Fiche Produit


e-Commerce luxe?

http://www.zadig-et-voltaire.com

Fiche Produit


e-Commerce luxe?

http://www.asos.fr

Page d’accueil


e-Commerce luxe?

http://www.asos.fr

Liste Produit


e-Commerce luxe?

http://www.asos.fr

Fiche Produit



Tendances 3

• Confort d’utilisation pour l’utilisateur dû à l’emploi d’une interface standardisée

• Grille de lecture souvent très facile à comprendre pour l’utilisateur

• Interface qui sait se rendre discrète au profit de la mise en avant de l’offre
produit.

• Sensation de liberté : on est dans une logique de page web classique (et non
d’écran) « on sort du cadre !».

• Richesse perçue des contenus et de l’offre produit.

• Grande réactivité de l’interface et des chargements de pages dû en partie à
la légèreté technique de l’interface.

• Grande compatibilité multi support (PC, Tablette, Smartphone)



Tendances 3


• Standardisation qui peut dépersonnaliser la spécificité d’une
marque de luxe par rapport à une autre

• Expérience utilisateur e-Commerce qui ne procure ni
émerveillement, ni contemplation de l’univers luxe mis en
avant

• Impossibilité pour une marque de luxe de recréer un
cérémonial de vente qui lui soit spécifique



Tendances 3

Mon opinion 1/3

• Des sites luxe et résolument e-Commerce orientés
Les marques de luxe qui ont adopté cette typologie d’interface ont accepté
pleinement le paradigme posé par le e-Commerce.

En effet, même si ce sont des marques de luxe, lorsqu’il s’agit de vendre leurs
produits en ligne ces marques de luxe n’hésitent plus désormais à privilégier
l’efficacité par l’usage des patterns mis en place par le e-Commerce.

Ces marques de luxe ne mélangent plus les objectifs de leur site e-Commerce
L’objectif premier de leur site e-Commerce est de vendre en ligne et non de
faire de la communication de marque.

Ces sites de luxe font preuve d’une certaine maturité vis-à-vis du e-Commerce
en abandonnant certains principes et certaines pratiques du luxe en total
décalage avec la modernité du paradigme digital web (ex : le non affichage des
prix).



Tendances 3

Mon opinion 2/3

• Une philosophie « Keep-it simple »
Le design d’interface épuré et basique par du principe que ce qui est important
pour l’utilisateur-consommateur, ce n’est pas ce qu’il y a autour du produit mais
le produit lui-même.

L’interface ne doit pas dégrader le produit mais ce n’est pas non plus elle qui va
magnifier le produit. L’interface se doit donc d’être relativement neutre.

En revanche, le visuel produit doit, lui, être suffisamment attractif et informatif
pour permettre de déclencher l’achat.



Tendances 3

Mon opinion 3/3

• Des sites e-Commerce luxe pour des utilisateurs davantage
en quête d’information que de séduction
Lorsqu’un internaute se dirige vers un site e-Commerce; il vient en général
davantage « chercher » un produit qu’il a déjà en tête que prendre le temps de
« flâner » pour se laisser inspirer.

Un site e-Commerce se doit d’être avant tout « Fonctionnel », « Informatif » et
« Ergonomique » la quête d’un produit luxe via le digital ne déroge pas à la
règle.

La valorisation de la marque de luxe, la séduction, et l’inspiration par des univers
produit forts sont bien entendu indispensables mais ce travail de séduction doit
s’effectuer majoritairement sur des rubriques éditoriales connexes à la boutique
e-Commerce. (ex : rubriques Magazine de la marque de luxe , Présentation des collections
de la marque de luxe, Les Savoir-Faire de la marques de luxe, Les actualités, etc.)


14. Quelques erreurs à éviter en
e-Commerce luxe


14. Quelques erreurs à éviter en e-Commerce luxe

Pas de visuel humain pour valoriser le vêtement



Pas de visuel humain pour valoriser le vêtement

Problème : Le produit YSL est présenté sur un mannequin artificiel et sans visage. Le visuel
produit incite donc beaucoup moins à la projection que le produit Ralph Lauren (ci-contre).



Manque d’information utile

Problème : Aucune indication de prix ni de disponibilité n’est accessible depuis la liste produit.




Problème : Aucune indication de prix ni de disponibilité n’est accessible depuis la liste produit.




Problème : L’indication de disponibilité devrait être affichée dés la liste produit pour éviter à
l’utilisateur un sentiment de frustration



Fiche produit en Pop in = Bookmark de page imprécis

Problème : L’utilisateur ne peut pas bookmaker la fiche produit ni même sélectionner directement
l’URL de ce produit pour l’envoyer dans un e-mail.
En effet, quelque soit le produit affiché à partir de cette liste, il s’agit toujours la même URL.
Pour le SEO , une fiche produit avec une URL
UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX unique existe pourtant pour ce produit.
169


Mélanger les produits e-Commerce et les produits non e-Commerce

Absence d’un bouton d’achat
Absence d’une information de prix

Problème : Un site e-Commerce ne doit proposer que l’ensemble de ses produits à la vente en ligne pour ne pas créer de
frustration utilisateur.
A défaut, un système de filtres doit permettre distinguer clairement les produits achetables en ligne des autres produits.



Mal utiliser une métaphore du monde réel pour créer une expérience digitale

Problème : Le fait d’apercevoir de façon dégradée les rubriques en arrière plan complexifie la
compréhension globale de l’interface et des contenus du site.




Problème : La forme graphique en mobiles cintres pour afficher les listes produits empêche
l’utilisateur d’embrasser une bonne étendue de l’offre produit. La perception utilisateur de
l’offre produit s’en trouve trop fragmentée.


http://www.zegnainstore.com/

Problème :
Utiliser la 3D et le
paradigme du jeux vidéo
(et du FPS) ne permet
pas automatiquement de
restituer les « impressions »
ressenties lors d’une visite
en boutique réelle.

Ici l’expérience réelle ne
semble pas avoir été
adaptée au digital e-
Commerce; on a voulu la
retranscrire telle quelle.

Par exemple: le parcours
entre les produits peut
vite devenir très laborieux
si la métaphore du
déplacement physique,
réel, d’un rayon de
vêtements à un autre a
été conservée en l’état.




http://www.zegnainstore.com/

Problème : Le rendu 3D (les textures pauvres notamment ) n’est pas assez flatteur ici pour que la boutique
virtuelle puisse restituer le niveau esthétique attendu d’une boutique de luxe réelle.
Le résultat est donc plutôt dommageable pour la marque et ses produits.



Générer des ruptures d’expérience trop forte entre les différents médias
Voyage d’Hermès / Print et Film publicitaire
Expérience = Sensation de liberté et d’évasion



Générer des ruptures d’expérience trop fortes entre les différents médias
Voyage d’Hermès / e-Commerce
Expérience = Sensation d’enfermement : Le cadre d’exploration produit est fortement contraint,
l’univers de la publicité n’est pas assez rappelé.

UX & e-Commerce Luxe / Frédéric Veidig - Directeur UX FullSIX http://france.hermes.com/ 176


Générer des ruptures d’expérience trop fortes entre les différents médias
Print & Film

Deux univers sans connexion

Digital e-Commerce : Fiche Produit


15. Créatifs et Consultants UX, qui définit le design
de l’Expérience Utilisateur Luxe e-Commerce?


15. Créatifs et Consultants UX, qui définit le design de
l’Expérience Utilisateur Luxe e-Commerce?

Créatif et Consultant UX :
ils sont tous deux complémentaires.
Chacun a un rôle important à jouer dans la construction de
l’expérience utilisateur d’un site luxe e-Commerce


15. Créatifs et Consultants UX, qui définit le design de
l’Expérience Utilisateur Luxe e-Commerce?

Le Créatif
Créatifs Directeur de création, Directeur artistique,
Web designer, Designer d’interfaces…et aussi
Directeur de création, etc…
Planer stratégique.

Dans les rubriques éditoriales et les
rubriques de valorisation de la marque
luxe, le rôle majeur doit être donné aux
créatifs.

Ils sont les plus à même de comprendre
les enjeux liés à l’image de la marque
de luxe.


FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par Frédéric Veidig

FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par Frédéric Veidig

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par Frédéric Veidig

Similaire à FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par Frédéric Veidig (20)

Plus de Flupa

Plus de Flupa (20)

FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par Frédéric Veidig