Quelle stratégie adopter pour être présent sur le mobile (et les tablettes) en 2013 ? Quel contenu diffuser aux consommateurs ? Mettre en place des outils cross-canaux ? Une webapp ou une application native ou encore un site en responsive design ? Quelques pistes de réponse dans ce document.

1. DÉFINIR SA
STRATÉGIE « WEB MOBILE »
EN 2013

2. #1
QU’EST CE QUE
« LE WEB MOBILE » ?

3. 3

4. Hors
-­‐Domicile
27
pouces
et
+
3
pouces
Taille
de
l’écran
Lieu
d’u/lisa/on
Domicile
«
Web
Mobile
»
selon
les
ins:tuts
d’études
«
Les
Mobiles
»
=
Smartphones
«
Web
mobile
»
dont
nous
allons
parler
4

5. #2
ETAT DES LIEUX
DU WEB MOBILE
5

6. DES CHIFFRES
• En
15
ans
internet
a
fait
40,7
millions
d’internautes
(70%
pop).
• En
5
ans
le
mobile
a
fait
22,3
millions
de
mobinautes
(46%
pop).
• Et
en
3
ans,
les
tablePes
ont
conquis
4,3
millions
de
Français.
40,7
Millions
22,3
Millions
4,3
Millions
…d’internautes
…de
mobinautes
…de
tablonautes
Médiamétrie
–
Septembre
2012
6

7. ET LE COMMERCE DANS TOUT ÇA?
31,
1
millions
4,5
millions
960
000
e-­‐acheteurs
m-­‐acheteurs
T-­‐acheteurs
+29%
/
1
an
+32%
/
1
an
+71%
/
1
an
Médiamétrie
–
Octobre
2012
7

8. ET LE COMMERCE DANS TOUT ÇA?
E-­‐commerce
8

9. Les achats sur mobile ont connu
une croissance de 18% d'un
trimestre à l'autre, et de 150% par
rapport à l'année dernière.
Les achats sur mobile représentent
5% du e-commerce général.
Fevad
–
Novembre
2012
9

10. ÉQUIPEMENTS
• 46,6%
des
Français
sont
équipés
de
smartphones
en
septembre
2012
Répar//on
par
OS,
monde
Médiamétrie
–
Novembre
2012
10

11. ÉQUIPEMENTS
Répar//on
par
OS,
France
11

12. LES USAGES | LE TOP
• Les
Smartphones
sont
les
terminaux
mobiles
les
plus
couramment
u:lisés
pour
accéder
au
Web
:
61%
VS
netbooks
(37%)
>
tableGes
(22%)
• Le
Smartphone
est
également
avant
tout
u:lisé
pour
communiquer
:
§ L'envoi
ou
la
récep:on
d'emails
est
l'occupa:on
favorite
des
consommateurs
interrogés
(70%)
§ La
par:cipa:on
à
des
réseaux
sociaux
(62%)
§ La
messagerie
instantanée
(61%)
Etude
Accenture
2012
12

13. LES USAGES | LA NAVIGATION
Les mobinautes passent
3h46 par mois
sur des sites mobiles
(hors applications) et génèrent
697 pages vues par mois.
13

14. LES USAGES | LES APPLIS
à
Jeux
et
réseaux
sociaux
14

15. LES USAGES | NB D’APPLIS PAR SMARTPHONE
100%
90%
80%
70%
20+
60%
50%
20+
40%
50+
30%
20%
50+
80+
10%
80+
Etude
Surikate
2012
15

16. PROFIL DU MOBINAUTE FRANÇAIS
57
%
sont
des
hommes
78
%
ont
entre
15-­‐34
ans
49
%
CPS+
41
%
sont
dans
la
région
parisienne
78
%
sont
sur
les
réseaux
sociaux
+
de
75
%
d’entre
eux
disposent
«
d’internet
illimité
»
sur
leurs
mobiles
DeloiPe–
Mai
2012
–
Médiamétrie
2012
16

17. ET LA TABLETTE ?
4,3
millions
de
tablonautes
±10%
des
foyers
français
L'Ipad
représente
85%
des
connexions
à
par:r
d'une
tablePe.
PROFILS
• Plus
masculins
et
CSP+
que
la
moyenne
des
cyberacheteurs.
• Achètent
à
20
%
des
produits
culturels
>
18
%
des
services
>
13
%,
des
voyages.
• 9
tablonautes
sur
10
qui
achètent
depuis
leur
tablePe,
le
font
de
chez
eux.
• 98%
l’u:lisent
à
domicile.
Médiamétrie-­‐
Septembre
2012
17

18. ET DEMAIN…
« Les
mobiles et les tablettes
dépasseront les PCs pour l’accès à
internet en 2013 ».
… mais…
18

19. WEB VS APPLICATIONS
19
© C2iS / 26, rue Louis Blanc - 69006 LYON / 26, rue du Faubourg Saint-Antoine - 75012 PARIS / Web : http://www.c2is.fr

20. A RETENIR
1
Le
web
est
mobile.
2
Les
transacUons
d’ici
2014.
3
Le
trafic
mobile
passe
par
des
(2)
plateformes…
4
…
et
des
applicaUons…
5
…
qui
répondent
à
des
usages
courants,
originaux,
mulUples.
20

21. #3
DÉFINIR SA
STRATÉGIE MOBILE

22. LA STRATÉGIE MOBILE S’INSCRIT DANS UNE
STRATÉGIE GLOBALE DE CONTENUS
CONTENUS
HIÉRARCHISATION
PERSONNALISATION
ANTICIPATION
/
PRÉDICTION
CONTEXTE
DE
IDENTIFICATION
CONNEXION
DU
CONTACT
SYNCHRONISATION
22

23. DÉTERMINER LA BONNE STRATÉGIE MOBILE
1
Quels
contenus?
23

24. LES DIFFÉRENTS TYPES DE CONTENUS
Co Se So Di Pro
Corporate
Serviciels
Social
Diver:ssants
Promo:onnels
• Présenta:on
de
• Apportent
une
• Contenus
créés
• Créent
de
la
• Contenu
la
marque
valeur
ajoutée
à
par
la
connivence
avec
assurant
la
• Présenta:on
des
l’internaute,
lui
communauté
ou
la
marque
:
promo:on
d’un
ac:vités
facilitent
la
vie.
n’ayant
de
sens
• Jeux
vidéos
disposi:f
ou
• Chiffres
clés
• Informa:ons
que
dans
une
(serious
games)
produit
• Services
dimension
• Vidéos
type
pub
• Promos
et
soldes
• Organisa:on
complémentaires
sociale.
• Avantages
clients
• Recrutement
• Plateforme
• Jeux
concours,
communautaires
etc.
• Réseaux
sociaux
• Contenus
serviciels
boostés
par
les
fonc:ons
sociales.
24

25. DÉTERMINER LA BONNE STRATÉGIE MOBILE
1
Quels
contenus
?
2
Dans
quel
contexte
?
25

26. LE CONTEXTE DE CONSULTATION
SITE
WEB
:
APPLICATION
:
d’usage
SITE
WEB
ou
APPLICATION
:
Type
Découverte
/
Fidélisa:on
/
E-­‐commerce
/
User
Expérience
(UX)
recrutement.
expérience
/
service.
Contraintes
liées
Mobilité
/
Informa:ons
Confort
Session
longue
au
contexte
géolocalisa:on
tps
réel
/
push
Accès
facile
Hardware
u:le
Partage
26

27. DÉTERMINER LA BONNE STRATÉGIE MOBILE
1
Quels
contenus
?
2
Dans
quel
contexte
?
3
Comment
y
accéder
?
27

28. ACCÈS AUX OUTILS MOBILES
WEB
MOBILE
/
WEBAPP
APP
SMARTPHONE
APP
TABLETTE
RESPONSIVE
DESIGN
• Accessible via l’URL
actuelle • Visible sur les stores
• Idem web mobile
• Multiplateforme • Mode déconnecté
• Mode déconnecté • Idem application
• SEO une fois installée • Toujours visible une
fois installé
• Relais IRL
• Installation nécessaire • Idem application
• Connexion • Nécessite des • Dispo par OS • Diffusion limitée (pour
indispensable terminaux récents • Soumission store et l’instant)
strat. de promotion • App souvent lourdes
Habitudes / Usages :
Répétitivité de l’action – Passe-temps – Recherche Urgente
28

29. DÉTERMINER LA BONNE STRATÉGIE MOBILE
1
Quels
contenus
?
2
Quel
contexte
?
3
Comment
y
accéder
?
4
De
l’importance
du
Cross-­‐canal
29

30. LE CROSS CANAL MULTI DEVICE
EXPÉRIENCE
RETAIL
EXPÉRIENCE
CROSS
CANAL
EXPÉRIENCE
WEB
30

31. LE MANIFESTE DU CLIENT CROSS-CANAL
«
Je
suis
un
client
unique.
J’aPend
que
les
marques
me
reconnaissent
en
tant
que
tel
quel
que
soit
leurs
canaux
de
vente,
web
ou
physique
et
quel
que
soient
mes
devices
de
connexion.
J’accepte
de
partager
des
données
sur
mon
historique
de
naviga:on,
ma
localisa:on
ou
mon
open-­‐graph
uniquement
pour
être
mieux
reconnu
et
mieux
servi.
J’aPend
que
les
marques
prennent
en
compte
ce
que
je
partage
avec
elles
sur
les
médias
sociaux
et
me
répondent.
J’aPend
que
les
marques
mePent
à
ma
disposi:on
des
ou:ls
facilitant
mes
interac:ons
avec
elles
et
leurs
produits
pour
avoir
plus
d’informa:ons,
pour
pouvoir
donner
mon
avis,
pour
pouvoir
personnaliser
leurs
produits,
etc.
»
31

32. A RETENIR
1
Un
vaste
choix
de
contenus
sont
adaptés
au
web
mobile.
2
Les
smartphones
sont
uUlisés
pour
des
foncUons
précises.
3
Les
tableGes
sont
uUlisées
pour
des
recherches
et
du
mulUmédia.
4
L’accès
dépend
des
usages.
5
Une
expérience
mobile
s’inscrit
dans
un
parcours
Cross-­‐canal.
32

33. #4
DÉVELOPPER POUR
LE MOBILE

34. LE DESIGN INFLUENCÉ PAR 4 ÉLÉMENTS
• Taille
de
l’écran
• Réseau
disponible
• Tac:le
ou
non
(taille
• Géoposi:on
des
touches,
• Environnement
de
interac:vité)
consulta:on
• Sens
de
lecture
ERGONOMIE
MOBILITE
SPÉCIFICITÉS
HIERARCHIE
DE
TECHNIQUES
L’INFORMATION
• Fonc:ons
intégrées
• 1ere
info
disponible
OS
• Naviga:on
adaptée
• Hardware
• Poids
des
contenus
• Navigateur
html
34

35. LES 7 GRANDES RÈGLES DE DÉV.
Une
applicaUon
web
ou
naUve
doit
de
préférence
respecter
les
standards
graphiques
et
ergonomiques
du
device
et
de
l’OS.
35

36. LES 7 GRANDES RÈGLES DE DÉV.
Une
applicaUon
tableGe
peut
au
contraire
proposer
une
navigaUon
immersive
et
tacUle,
éloignée
des
standards
web
et
OS.
36

37. LES 7 GRANDES RÈGLES DE DÉV.
Pour
une
applicaUon,
un
bug
est
rédhibitoire.
37

38. LES 7 GRANDES RÈGLES DE DÉV.
Certaines
foncUonnalités
peuvent
se
recouper,
mais…
…chaque
ouUl
doit
apporter
un
service
différent,
en
accord
avec
son
contexte
d’uUlisaUon.
38

39. LES 7 GRANDES RÈGLES DE DÉV.
Opter
pour
un
CMS
modulaire,
gérant
le
mulUsite
par
exemple.
Pour
un
disposiUf
web
cross-­‐device
et
responsive,
designer
en
table.e
first.
39

40. SITE WEB OU APPLICATION ?
Chaque
ou:l
a
ses
propres
avantages
et
inconvénients.
L’usage
et
l’expérience
client
que
l’on
veut
créer
via
l’ou:l
dicteront
ce
choix.
40

41. LES DIFFÉRENCES SITE WEB / APPLICATION
Fonc:onnalités
Applica:ons
Webapp
HTML5
Web
Mobile
Accès
au
hardware
:
appareil
photo
numérique,
gyroscope,
vibreur,
compas,
état
du
réseau,
push
de
no:fica:ons
X
Si
le
service
que
vous
souhaitez
proposer
sur
mobile
requiert
Accès
aux
applicaUons
naUves
(liées
à
l'OS
comme
par
exemple
la
galerie
de
l’une
des
fonc:onnalités
ci-­‐
photo
sur
iPhone,
carnet
de
contacts,
calendrier,
etc.)
X
contre,
seule
une
applica:on
Stockage
de
données
(système
de
fichiers)
X
na:ve
pourra
répondre
à
ces
besoins.
Rapidité
et
fluidité
X
Fonc:onnement
hors
connexion
(dont
mémorisa:on
du
log-­‐in
/
mdp)
X
X
GéolocalisaUon
X
X
X
InteracUvité
:
Anima:ons,
graphismes
avancé,
interfaces
na:ves
(boutons,
listes,
etc...)
X
X
X
MulUmédia
:
Vidéo,
son,
images
X
X
X
Accès
et
mise
à
jour
Applica:ons
Webapp
HTML5
Web
Mobile
Accès
via
URL
Non
*
Oui
Oui
Accès
via
stores
Oui
Non
Non
Mise
à
jours
type
web
Non
**
Oui
Oui
Mise
à
jour
via
les
stores
Oui
Non
Non
*
Une
URL
peut
renvoyer
vers
le
Store
pour
téléchargement,
mais
pas
vers
le
téléchargement
direct.
**
Le
contenu
peut
être
mis
à
jour
via
chargement
à
distance,
mais
la
mise
à
jour
de
version
requiert
une
nouvelle
soumission
au
Store.
41

42. RESPONSIVE DESIGN | KESAKO ?
Le
Responsive
Design
permet
à
un
site
de
s’adapter
automa:quement
à
la
largeur
u:le
de
l’affichage
de
l’écran.
Un
même
site
peut
donc
être
op:misé
pour
différents
affichages.
42

43. RESPONSIVE DESIGN | COMMENT ?
Fluid
Grid
Les
éléments
se
replacent
par
rapport
à
la
place
disponible
Media
Queries
On
iden/fie
le
device
et
le
navigateur
de
consulta/on
pour
lui
servir
«
le
bon
code
»
Flexible
Media
CSS
Suivant
le
device,
on
va
servir
des
media
adaptés
Les
règles
de
formatage
de
la
page
HTML
5
La
dernière
version
d’html
permeDant
des
interac/ons
poussées
43

44. RESPONSIVE DESIGN | AVANTAGES ?
…
et
inconvénients
Accès
au
même
contenu
Du
temps
et
de
l’argent
Présence
mul:-­‐
devices
Design
plus
simple
SEO
Moins
de
pubs
Mises
à
jour
Fonc:on
unique
44

45. #5
BEST PRACTICES
MOBILES

46. APPLICATIONS MOBILES
Les
applica:ons
mobiles
permePent
d’offrir
des
services
à
valeur
ajoutée
à
l’internaute
et
d’être
«
toujours
dans
leur
poche
».
46

47. CLARINS
|
MON
FIL
ROUGE
BEAUTÉ
Une
applica:on
qui
aide
les
clientes
à
choisir
les
produits
qui
correspondent
le
plus
à
leurs
besoins.
Les
plus
:
-­‐
envoyer
sa
photo
pour
recevoir
un
diagnos:c
beauté.
-­‐
le
service
permePant
de
conseiller
la
crème
du
jour
en
fonc:on
de
la
météo.
-­‐
interac:vité
avec
le
point
de
vente.
47

48. ZARA | APPLICATION OFFICIELLE
Une
applica:on
permePant
de
commander
les
produits
et
d’être
au
courant
des
dernières
nouveautés
de
la
marque.
-­‐
ergonomie
et
naviga:on
de
l’applica:on.
-­‐
les
visuels
des
fiches
produits.
-­‐
interac:vité
avec
le
point
de
vente.
48

49. AIR FRANCE | MEILLEURES OFFRES
Une
applica:on
forte
de
son
concept
créaUf
qui
la
rend
aussi
bien
inspiraUonnelle
que
foncUonnelle
pour
toute
personne
cherchant
à
voyager.
-­‐
ergonomie
et
graphisme
de
l’applica:on.
-­‐
le
moteur
de
recherche
«
inspirez
moi!
».
-­‐
intégra:on
de
Facebook.
49

50. SITES MOBILES VS APP
La
ques:on
se
pose
souvent
de
développer
un
site
mobile
ou
une
applica:on.
Les
deux
sont
souvent
complémentaires.
50

51. ACCOR HOTELS | SITE MOBILE OU APP ?
Site
mobile
Applica:on
51

52. ACCOR HOTELS | UN DESIGN D’APP
Un
design
proche
d’une
applica:on
na:ve.
-­‐
un
moteur
de
recherche
avec
une
fonc:on
de
géolocalisa:on
afin
de
trouver
l’hôtel
le
plus
proche
de
vous.
-­‐
un
historique
des
réserva:ons.
-­‐
votre
profil
donnant
accès
à
votre
compte.
Primé
second
meilleur
site
mobile
pour
les
internautes.
52

53. ACCOR HOTELS | PUSH ET MULTIMEDIA
CePe
applica:on
est
plus
focalisée
sur
la
fidélisa:on
que
le
site
mobile
qui
lui
est
orienté
recrutement.
Les
points
posi:fs
:
accès
aux
promo:ons
en
Push
et
à
des
contenus
vidéos.
53

54. LA REDOUTE | SITE MOBILE OU APP ?
Site
mobile
Site
mobile
Applica:on
54

55. LA REDOUTE | LE CATALOGUE COMPLET
Le
site
mobile
permet
d’avoir
tout
le
catalogue
de
la
Redoute
dans
la
poche.
Il
intègre
:
-­‐
Un
moteur
de
recherche,
-­‐
L’accès
au
catalogue
par
référence
ou
rubrique,
-­‐
L’accès
au
compte
et
possibilité
de
suivre
ses
achats
ou
d’acheter
via
mobile.
55

56. LA REDOUTE | PARTENAIRE SHOPPING
L’applica:on
offre
l’accès
à
de
nombreux
services
u:les
pour
le
client.
Les
+
par
rapport
au
site
mobile
:
-­‐ Créer
une
liste
de
favoris
-­‐ Payez
en
1
clic
-­‐ Cloud
56

57. VAL THORENS | ECOSYSTÈME MOBILE
VAL
THORENS
dispose
d’un
site
mobile
permePant
d’accéder
rapidement
au
contenu
de
la
sta:on
ainsi
que
d’une
app
avec
des
fonc:ons
supplémentaires
:
-­‐ Plan
des
pistes
-­‐ Eléments
live
+
annuaire
de
la
sta:on
-­‐ Retrouver
ses
amis
sur
les
pistes
57

58. VAL THORENS | SITE MOBILE OPTIMISE
-­‐
Contenu
bref
et
efficace
:
service,
informa:on…
-­‐
Eléments
live
mis
en
avant.
-­‐
Une
interface
type
applica:on
mobile
permePant
de
rendre
l’ou:l
«
user
friendly
».
58

59. WEB RESPONSIVE
Le
web
responsive
permet
de
couvrir
«
facilement
»
tous
les
devices.
Mais
il
doit
prendre
en
compte
les
besoins
de
l’u:lisateur
avant
tout
et
n’exclue
pas
pour
autant
une
app
na:ve.
59

60. FOOD SENS | BELLE REALISATION
Le
site
propose
des
varia:ons
très
fines
permePant
d’adapter
l’interface
à
de
nombreuses
résolu:ons
d’écrans.
60

61. STARBUCKS COFFEE
La
naviga:on
s’adapte
en
fonc:on
du
device
u:lisé.
Les
u:lisateurs
de
desktop
ont
des
intérêts
et
des
besoins
d’interac:on
différents
des
u:lisateurs
mobiles.
La
naviga:on
sur
mobile
est
plus
longue.
61

62. QUARTZ | TABLETTE FIRST
Le
site
a
été
pensé
«
tablePe
first
»
pour
une
u:lisa:on
op:male
sur
tablePe.
Cela
se
ressent
sur
le
site
web
:
-­‐ la
naviga:on
au
scroll
vs
une
barre
de
naviga:on
minimaliste.
-­‐ l’u:lisa:on
des
pictogrammes.
-­‐ la
liste
des
ar:cles
sur
l’écran
gauche.
62

63. CLOUD | SYNCHRO & ANTICIPATION
Le
cloud
est
une
des
solu:ons
aux
probléma:ques
des
consommateurs
mul:-­‐canaux.
Il
permet
d’offrir
des
services
de
synchronisa:on
et
d’an:cipa:on
des
besoins.
63

64. AMAZON | SYNCHRONISATION
Quel
que
soit
le
device
avec
lequel
on
se
connecte
à
son
compte,
on
retrouve
ses
informa:ons,
son
historique.
L’ajout
de
produits
à
ses
favoris
par
exemple
se
fait
dans
les
deux
sens
PC
<-­‐>
Mobile.
64

65. GOOGLE NOW | ANTICIPATION
L’informa:on
n’est
plus
cherchée
mais
fournie
au
moment
et
à
l’endroit
où
elle
est
la
plus
u:le.
Au
réveil,
la
météo
est
annoncée,
puis
il
annonce
quel
est
le
meilleur
moment
pour
par:r
au
travail
suivant
la
circula:on,
il
prévient
si
son
avion
a
du
retard,
etc.
65

66. C2iS Agence Digitale
26 rue Louis Blanc
69006 LYON
Tel : 04 37 24 78 20
www.c2is.fr @agence_c2is