3. INTRODUCTION
01 Les freins à l’achat sur mobile .................................... p.09
02 Principaux usages du M-Commerce
.................. p.10
03 Site mobile ou application ? ........................................ p.14
04 Les chiffres qui doivent
vous décider à faire le pas
........................................... p.20
4. QUELQUES CHIFFRES
Le marché du e-commerce sur mobile
(smartphone), aussi appelé m-commerce,
06
est aujourd’hui en plein essor. En 2012,
on compte en France plus de 19 millions
de smartphones en circulation, avec sur
chacun de ces smartphones une moyenne
de 24 applications installées (dont beaucoup pré-installées) (1)
Ce livre blanc a pour but de recenser les
• En
Europe, une transaction a lieu toute les 15 secondes
sur mobiles. (1)
indique que ses ventes depuis smartphone et
tablette ont augmenté de 195% au 1er trimestre 2012
par rapport à la même période de l’année précédente. (2)
• Entre
2011 et 2012, l’augmentation de la fréquentation
d’un site depuis un smartphone est de 103%.
• En
2012, les français ont acheté pour 2,2 milliards
d’euros depuis un smartphone et/ou tablette.
Ce sera 5 milliards en 2015 pour représenter 7% de
l’e-commerce. (3)
best practices du e-commerce mobile en
AIDE À LA DÉCISION
analysant de façon comparée les sites mobiles et applications de leaders du e-commerce. Nous étudierons suivant une liste de
LE SHOPPING SUR SMARTPHONE ... (4)
critères les points forts et les points faibles des
pRENDRE EN PHOTO LE PRODUIT
solutions proposées au client pour l’achat en
CHERCHER UN MAGASIN
ligne depuis un périphérique mobile.
La mobilité au filtre des tablettes et du
responsive design fera l’objet d’une analyse
spécifique lors d’une prochaine étude.
RECHERCHER UN PRODUIT & son prix
ENVOYER LA PHOTO D’UN PRODUIT
CHERCHER UN PRODUIT EN MAGASIN
DEMANDER CONSEIL à ses amis
acheter
1 - http://www.siweo.fr/actualit%C3%A9s/detail/les-utilisateurs-d-andro%C3%AFd-installent-en-moyenne-24-apps-sur-leur-terminal
07
•
PayPal
37%
35%
35%
34%
33%
33%
26%
(5)
• 40,5%
des gens utilisent
leurs smartphones pour
comparer les prix et 28%
pour se renseigner sur un
magasin.
• Il
ne faut pas uniquement
développer la plateforme
d’achat mais aussi l’accès
à l’information permettant
d’acheter en boutique
physique.
1 - http://lecercle.lesechos.fr/entreprises-marches/high-tech-medias/mobilite/221145640/transaction-mobile-15-secondes-europe
2 - http://www.zdnet.fr/actualites/m-commerce-le-decollage-semble-bien-avoir-eu-lieu-39786524.htm
3 - http://www.journaldunet.com/ebusiness/commerce/marche-du-m-commerce-1112.shtml
4 - http://blog.juliepirio.com/infographie-le-role-du-smartphone-dans-le-e-commerce
5 - http://www.zdnet.fr/actualites/le-m-commerce-pourrait-representer-plus-de-2-milliards-d-euros-cette-annee-en-france-39771959.htm
5. 08
01 Les freins à l’achat sur mobile
Quels sont les facteurs qui peuvent mettre en péril un achat
depuis un mobile et comment y remédier ?
Ce livre blanc a pour but de répondre à cette question via divers exemples.
Freins à l’achat sur mobile
de site optimisés = Frustration.(1) La France est particulièrement
en retard sur ce point : 18% des entreprises françaises avaient en 2011
un site adapté pour les mobiles alors qu’au Royaume-Uni, elles sont 50%. (2)
• Pénurie
• Protection des informations personnelles et la sécurité :
- Une appréhension à communiquer son numéro de carte bancaire
depuis un terminal mobile. Mais cela va s’améliorer avec le temps
comme c’est le cas pour l’e-commerce.
- On estime que 83% des Français sont prêts à adopter l’achat depuis un
mobile, à la condition que le niveau de sécurité garantisse la protection
de leurs coordonnées bancaires. (3)
• Problème
de connexion et de lenteur due au réseau mobile. L’arrivée de
la 4G pourra potentiellement y remédier.
1 - http://www.zdnet.fr/actualites/m-commerce-quels-sont-les-freins-39773139.htm
2 - http://www.zdnet.fr/actualites/le-m-commerce-pourrait-representer-plus-de-2-milliards-d-euros-cette-annee-en-france-39771959.htm
3 - http://www.usinenouvelle.com/article/la-france-bientot-3e-pays-europeen-pour-le-m-commerce.N178930
09
6. PRINCIPAUX USAGES
DU M-COMMERCE
11
Un site mobile ou une application n’est pas
seulement utilisé pour acheter. Le support
proposé à l’utilisateur doit le suivre tout au
long du processus d’achat qui commence
par une phase de découverte,
puis de réflexion, enfin une phase
d’achat
et ensuite une phase de
fidélisation.
02
01
7. 12
Trouver un magasin,
Horaires,
Plan,
Numéro de téléphone, (…)
Fonction
de recherche
performante
Lier le panier
avec celui du site
desktop et même
physique
Possibilité
de suivre la
livraison
Connexion 24/7
Notification push
01découverte
Comparer
les prix
en magasin
Scanner des QR code
sur des publicités
dans la rue ou dans
des magazines
02 réflexion
Cibler les clients en
fonction du contexte :
Utiliser les
informations
récoltées dans
la phase
de découverte
Fonctionnalité
« One-click »
pour achat rapide
Mise en avant
de produit,
commentaires
de clients,
formulaire
de contact, fonction
d’appel rapide
Donner confiance
à l’utilisateur
sur la sécurité
de ces données
personnelles
et bancaires
03 ACHAT
Intégrer l’application
dans le magasin :
Scanner les
codes-barres pour
ajouter au panier
de l’application,
coupons de réduction,
Payer avec ?
Utiliser
l’application
comme carte
de fidélité
13
Intégration
des réseaux sociaux :
« Partager son achat »
04 FIDéLISATION
Notifications
Push
Proposer
des offres
de réductions
8. SITE MOBILE
OU APPLICATION ?
03
01
15
Le choix entre une application ou un
site mobile dépend des fonctionnalités
attendues, du type de service que l’on
cherche à fournir et du budget.
10. APPLICATION
• Nécessité
de rechercher, télécharger et installer l’application
(et mettre à jour) :
- Mais présence dans les résultats de recherche des apps stores
- Validation par les apps stores (pour iOS et Windows Phone)
... EN Résumé
SITE MOBILE
• Accès
via navigateur :
- Navigation statique
- Connexion permanente nécessaire
- Fonctionnalités limitées
• Un
site pour toutes les plateformes :
- Cout de développement plus faible.
- Site quasiment identique quelle que
soit la plateforme
• Plus
facile d’accès :
- Accessible directement depuis le
moteur de recherche
- Pas de téléchargement nécessaire
- Pas de processus de validation
par les apps stores
• Mise
à jour transparente pour l’utilisateur
vs.
18
• Interface
Client interactive : Accès à toutes les fonctionnalités
de l’appareil :
- Disponible hors-ligne
- Stockage local. Accès aux contacts, photos, …
- GPS
- Appareil photo : QR Code
- NFC (1)
- Notification Push
- Plus rapide
- Pus stable
• Coût
de développement plus important
1 - http://fr.wikipedia.org/wiki/Communication_en_champ_proche
19
11. les chiffres qui
doivent vous décider
à faire le pas
04
01
21
En 2014, Internet sera plus utilisé sur
mobile que sur ordinateur.
12. 2014
Internet sera plus utilisé
sur mobile que sur ordinateur.
Votre magasin 24/7
dans la poche
de vos clients !
22
46%
Des mobinautes se tournent vers
un site concurrent après une
mauvaise expérience mobile. (2)
57%
Ne recommanderont pas une
marque après une mauvaise
expérience mobile.
70%
82%
25%
86%
Des gens utilisent leur mobile
dans un magasin.
Des mobinautes vérifient
et répondent à leurs emails
depuis leurs mobiles. (3)
74%
de la moitié
Des recherches locales sont
réalisées depuis un mobile.
Des mobinautes utilisent
leurs mobiles devant
la télévision. (1)
des recherches
Des utilisateurs ne vont
pas attendre plus de 5 secondes
qu’une page se charge.
sur mobile mènent
à un achat
40%
1 - http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
2 - http://fr.slideshare.net/Gomez_Inc/2011-mobile-survey-what-users-want-from-mobile
3 - http://www.gstatic.com/ads/research/en/2011_TheMobileMovement.pdf
En magasin
35%
En ligne
20%
Sur Mobile
23
14. 01 Critères d’études
Etude réalisée à l’aide
d’un Nexus 4 sous Android 4.2.2
26
Design/Zoning = Ergonomie
• Taille
des boutons : adaptée aux doigts.
• Taille
des images : lisible.
46% des mobinautes se tournent vers un site
concurrent après une mauvaise expérience
mobile et 57% ne recommanderont pas
cette marque. (1)
Il est donc très important d’offrir à l’utilisateur une expérience mobile idéale.
• Gestion
de l’orientation : portrait/paysage.
• Nombre
de rubriques. Nombre d’étapes.
• Mise
en avant du moteur de recherche :
- Auto complétion
- Visibilité
Tunnel d’achat
• Achat
• Fil
02 Choix des
sites analysés
• Produits
culturels, High tech
- Amazon
- Fnac
- Rue du commerce
• Voyages
- Voyages-sncf
• Business
model particulier
- eBay
- Groupon
en tant qu’invité
d’Ariane. Guidage.
• Formulaire
:
- Gestion des erreurs
avant envoi au serveur.
• Densité
• Mise
informationnelle
en confiance
• Rapidité
et fluidité
Shopping (1)
(mémorisation de la carte bancaire)
• 1-Click
1 - http://www.nuwave-marketing.com/chiffres-m-commerce-2012-infographie/
1 - http://www.journaldunet.com/encyclopedie/definition/67/44/21/one-click_shopping.shtml
2 - http://www.journaldunet.com/ebusiness/internet-mobile/m-commerce-en-france.shtml
Le mobile est surtout utilisé pour
acheter des voyages et des biens
culturels. (2)
27
15. ANALYSE
01 Amazon ........................................................................................... p.30
02 Fnac
................................................................................................... p.32
03 Rue du commerce ................................................................ p.34
04 eBay .................................................................................................... p.36
05 Groupon ......................................................................................... p.38
06 Voyages-SNCF
........................................................................... p.40
07 Focus sur le tunnel d’achat
......................................... p.42
16. AMAZON site mobile
• Design
30
minimaliste.
(pas de publicité, navigation
hiérarchique masquée par
défaut, mise en avant de la
recherche (auto complétion) et des
recommandations,...)
• Proposition
de télécharger
l’application.
• Articles
mis en avant :
- Suivant l’historique de navigation
si connecté à un compte Amazon.
- D’une catégorie, par exemple les
produits Kindle, si non connecté.
• Accès
très rapide aux produits
depuis les catégories.
• Pas
réellement de structure dans la
page. Pas de segmentation.
• Obligation
Amazon.
• Importante
AMAZON application
• Design
minimaliste
• Recherche
toujours accessible depuis
le haut de la page.
• Possibilité
31
de scanner un code barre.
• L’utilisateur
est obligé de sortir du
tunnel d’achat pour créer son compte
Amazon. Pas de possibilité d’achat en
tant qu’invité.
• Une
navigation difficile entre les
produits. Un swipe gauche/droite
pour passer d’un produit à l’autre par
exemple.
• Lien
pas toujours facilement cliquable.
• Très
différente du site mobile.
de créer un compte
densité informationnelle
dans la liste des produits.
Interface minimaliste et simple. Accès rapide aux fonctions de recherche et aux catégories.
Cohérence ergonomique entre l’application, le site mobile et le site desktop. Mais l’obligation de
créer un compte freine l’achat et les éléments cliquables sont trop petits.
17. FNAC site mobile
• Gros
32
bouton de navigation / Zone
cliquable étendue. Clic facile.Navigation
toujours accessible en bas de page.
• Présentation
et simple.
• Recherche
de la liste des produits aérée
accessible en haut de page.
• Panier
- Mémorisé entre les visites même sans
compte.
- Accessible et gérable
(suppression, validation…) partout.
• Localisation
du téléphone pour proposer
le produit dans le magasin le plus proche.
• Connexion
et inscription
- Sur le même écran
- Contrôle des formulaires avant envoi.
FNAC application
• Interface
à optimiser :
- Bouton petit et peu accessible
- Pas de bouton de navigation
• Pas
de disponibilité en magasin.
• Recherche
:
- (Peu pertinente)
- Non accessible de partout
• Pas
de tri dans la liste des produits.
• Plus
lent que le site mobile
• Pas
de personnalisation du clavier en
fonction des champs.
• «
Mot de passe oublié » non adapté
au mobile.
• Beaucoup
de tooltip et de pop-in : évite
un nouveau rechargement de page.
• Pas
de personnalisation du clavier
en fonction des champs.
• Pas
de vérification des champs
avant envoi des formulaires.
• L’utilisateur
est obligé de sortir
du tunnel d’achat pour créer son
compte Fnac. Pas de possibilité
d’achat en tant qu’invité.
Excellent site mobile mais application médiocre. Site mobile bien adapté aux écrans.
Gros boutons. Boutons d’accès rapide à la recherche et aux catégories.
Création de compte obligatoire.
33
18. RUE DU COMMERCE
site mobile
34
• Menu
latéral (style Facebook)
• Interface
colorée
• Overlay
explicatif
• Clavier
adapté aux champs des
formulaires.
• «Compléter
avec un accessoire» lors
de l’ajout d’un produit au panier.
RUE DU COMMERCE
application
• Pas
d’exploitation du potentiel du
smartphone.
• Très
similaire au site mobile.
• Pas
d’intérêt par rapport au site
mobile.
• Historique
des recherches
• Possibilité
de créer un compte
«complet» ou «express».
• Contrôle
serveur.
• Picto
des champs avant envoi au
pas forcement compréhensible
• Problème
d’écriture dans les
formulaires, les textes s’écrivent à
droite.
• Peu
d’utilisation des pop-in. Toujours
une nouvelle page.
• Ajout
automatique d’une assurance.
Site mobile et application strictement identiques. Menu latéral style Facebook.
Option d’aide guidant l’utilisateur. Gros problème dans le fonctionnement des formulaires.
Interface colorée et claire.
35
19. EBAY site mobile
EBAY application
13 milliards de dollars de transactions sur
36
• Utilisation
mobile en 2012 : 20% du volume global
des bests practices Android (1)
• Possibilité
d’eBay. 500 dollars dépensé chaque seconde depuis un mobile. (1)
de mettre un objet en vente
depuis l’app.
• Gestion
des messages privés
• Recherche
• Recherche
:
- Mise en avant
• Possibilité
• Sobre,
toujours accessible
• Toutes
minimaliste
• Info
sur l’intégralité du compte (enchères
gagnées/perdues, objets vendus).
• Gros
bouton de navigation / Zone
cliquable étendue. Clic facile.
• Pas
réellement de structure dans la
page. Pas de segmentation entre les
différentes zones de la page.
• Obligation
eBay.
d’enregistrer des recherches
et de créer des alertes pour celles-ci
les fonctionnalités du site
desktop sont présentes.
• Lorsque
la connexion est perdue,
l’application « plante », on retourne
à l’accueil de l’application.
de créer un compte
• Importante
densité informationnelle
dans la liste des produits.
Application conforme aux best practices ergonomiques Android. (1)
Application regroupant l’intégralité des fonctionnalités du site desktop.
Bouton d’accès rapide. Design et ergonomie peu agréables.
1 - http://www.webmarketing-com.com/2013/03/25/19980-m-commerce-bilan-2012-et-ambitions-pour-2013-interview-dolivierropars-directeur-m-commerce-ebay
1 - http://developer.android.com/design/get-started/principles.html
37
20. GROUPON site mobile
• Localisation
38
pour cibler les deals.
• Toutes
les pages sont adaptées
mobiles.
GROUPON application
• Utilisation
• Achat
des bests practices Android
de deals possible
• Lente
• Bouton
trop petit pour une
utilisation tactile.
• Texte
pas toujours facile à lire.
• Interface
à optimiser : Image trop
grosse, pictos peu explicites et trop
petits, ...
• Texte
pas toujours facile à lire
• Interface
à optimiser : Image trop
grosse, pictos peu explicites et trop
petits, ...
Application conforme aux best practices ergonomiques Android.
Design à optimiser.
Utilisation du GPS pour localiser les deals alentour.
39
21. VOYAGES-SNCF site mobile
En 2012, Voyages-sncf.com a été nommé
40
1er site marchand de tourisme. L’application mobile (lancée le 9 août 2012 sur Android) a été téléchargée plus de 5 millions
de fois tandis que le site mobile comptabilise plus d’un millions de visiteurs uniques
VOYAGES-SNCF application
• Cohérence
dans les boutons.
Ex : un bouton de validation est bleu
et carré
• Suivi
des best practices Android
• Localisation
pour compléter les
champs départ/arrivée
• Auto-complétion
par mois. (1)
très efficace
• Design
très agréable et clair :
- Gros bouton / Code couleur
• Très
proche graphiquement de
l’application (moins d’animation
et de fonctionnalités)
• Très
rapide et fluide.
• Accès
à toutes les fonctions
disponibles sur le site PC (choix de la
place, code de réduction,…)
• Historique
des recherches
• Possibilité
d’enregistrer la carte bleue
pour les achats futurs.
• Email
non compatible mobile
Application parfaitement conforme aux best practices ergonomiques Android.
Très claire et très simple. Il est plus rapide de commander sur téléphone que sur ordinateur.
Utilisation des plus d’un téléphone : localisation, QR-code...
1 - http://frenchweb.fr/les-chiffres-clefs-de-voyages-sncf-en-2012/102435
1 - http://lecercle.lesechos.fr/entreprises-marches/high-tech-medias/mobilite/221145640/transaction-mobile-15-secondes-europe
2 - http://www.zdnet.fr/actualites/m-commerce-le-decollage-semble-bien-avoir-eu-lieu-39786524.htm
3 - http://www.journaldunet.com/ebusiness/commerce/marche-du-m-commerce-1112.shtml
41
22. FOCUS SUR LE TUNNEL D’ACHAT VOYAGES-SNCF
42
FOCUS SUR LE TUNNEL D’ACHAT VOYAGES-SNCF
ACCUEIL
CHOIX DU PLACEMENT
• Boutons
• Offres
PAGE DE Résultat
d’accès rapide
promotionnelles
• Interface
simple
01/14
CHOIX DU TARIF
• Mise
en avant des
informations importantes
par des couleurs
02/14
MON PANIER
• Fil
d’Ariane
• Retour
03/14
04/14
MODE DE RETRAIT
possible
05/14
06/14
43
23. FOCUS SUR LE TUNNEL D’ACHAT VOYAGES-SNCF
44
FOCUS SUR LE TUNNEL D’ACHAT VOYAGES-SNCF
COORDONNées
PAIEMENT
GESTION DES ERREURS
confirmation
Réseaux sociaux
AJOUT AU CALENDRIER
• Auto-complétion
• Mise
• Détails
• Récapitulatif
• Possibilité
• Ajout
grâce au
compte utilisateur
07/14
en confiance
08/14
explicites des
erreurs commises
09/14
complet
10/14
de partager
11/14
au calendrier du
téléphone
12/14
45
24. FOCUS SUR LE TUNNEL D’ACHAT VOYAGE-SNCF
46
FOCUS SUR LE TUNNEL D’ACHAT AMAZON
QUESTIONNAIRE
DE SATISFACTION
EMAIL
DE CONFIRMATION
ACCUEIL
• Ecoute
• Email
•
13/14
non adapté
au mobile (pas de
responsive)
14/14
FICHE PRODUIT 2/2
Meilleurs ventes
• Economie
• Proposition
•
Zone de recherche
étendue
• Commentaire
•
du client
FICHE PRODUIT 1/2
Accès aux catégories
01/08
réalisée
client
• Bouton
• Achat
02/08
d’autres produits
de partage
immédiat
03/08
47
25. FOCUS SUR LE TUNNEL D’ACHAT AMAZON
48
FOCUS SUR LE TUNNEL D’ACHAT AMAZON
CONNEXION
Récapitulatif
commande 1/2
Récapitulatif
commande 2/2
• Une
• Bouton
•
«Serveur sécurisé» :
Mise en confiance
AJOUT AU PANIER
Récapitulatif panier
seule page pour tout
valider
• Achat
direct ou poursuite
des achats
inaccessible tant
que tout n’est pas correct
• «Afficher
le mot de passe»:
Evite les erreurs
04/08
05/08
06/08
07/08
08/08
49
27. SYNTHèse
comparative
53
Après analyse de ces différents sites et
applications, il est possible de faire une
synthèse globale basée sur les critères
définis de Design, Ergonomie et
sur le Tunnel d’achat.
01
29. BEST
PRACTICES
02
01
57
Après analyse des différents dispositifs
mobiles, 10 best practices ressortent
et doivent absolument être considérés tout
au long du processus de développement.
30. 02 BEST PRACTICES
58
Compte
utilisateur
FORMULAIRE
PANIER
Pré contrôle des champs
de formulaires en amont,
avant envoi au serveur
(Ex : l’adresse e-mail estelle valide ?)
• Accessible
partout
Donner la possibilité
de tout de suite valider
la commande / ou de
continuer les achats.
N’inclure que les champs
les plus importants dans les
formulaires afin de réduire
le temps de complétion.
•
•
Dans l’idéal, autoriser
l’achat sans compte.
•
Ou alors intégrer
le choix d’un mot
de passe à la fin du
processus d’achat pour
créer un compte de
façon transparente.
•
•
01
02
TUNNEL D’achat
Panier commun entre
les plateformes
Choix du produit
depuis smartphone et
achat depuis PC ainsi
possibles.
CONFIRMATION
D’ACHAT
TOUTES LES PAGES
SONT ADAPTées au mobile
Penser à faire des emails
en responsive afin qu’ils
soient adaptés au mobile.
•
•
Un SMS de confirmation
en plus du mail est un bon
point.
•
59
Possibilité de « Récupérer pseudo/mot de passe »
Ensemble des fonctionnalités desktop sont
disponibles sur mobile (gestion du compte,
paiement, suivi de commande…)
•
•
Forte mise en avant de la fonction de recherche.
Offrir les mêmes résultats que le site desktop.
•
Supprimer les fioritures mais pas le contenu dans le
tunnel d’achat.
•
Penser 3G, léger, et cela malgré l’arrivée de la 4G.
05
03
06
Utiliser les possibilités offertes par un smartphone
•
•
Montrer l’avancement dans le tunnel d’achat.
•
Inclure le plus possible d’option de paiement :
CB, PayPal, Google Wallet…
•
Rassurer l’utilisateur.
•
Mémoriser la carte bancaire pour permettre
le 1-click shopping.
Ecran tactile, localisation, notification, capteur photo/Code barre)
•
GPS : données de localisation pour trouver un magasin, check-in
(créer la page localité FB/Foursquare du magasin)
• QR
code / NFC : promotion en vitrine ou dans un magazine
•
04
Penser tactile : gros bouton
•
Mise en avant du numéro du service client via un clic to call :
On est déjà sur un téléphone donc très facile d’appeler.
07
31. 02 BEST PRACTICES
60
Ce que l’on peut faire
en plus sur mobile
Possibilité de partager sur les réseaux sociaux.
Par exemple, Twitter est proportionnellement plus
utilisé sur mobile que Facebook
•
Créer la même
application
avec les mêmes
fonctionnalités
quel que soit l’OS.
Créer des offres de réductions disponibles
uniquement sur mobile.
•
08
09
Suivi des best practices
design/ergonomiqueS
Exemple : utilisation d’image (+ libellé) pour
faciliter la compréhension d’un bouton d’action ou
du contenu d’une catégorie.
•
10
