SlideShare une entreprise Scribd logo
DÉFINIR SA
STRATÉGIE « WEB MOBILE »
EN 2013
#1
QU’EST CE QUE
« LE WEB MOBILE » ?
3
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
#2
    ETAT DES LIEUX
    DU WEB MOBILE




5
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
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
ET LE COMMERCE DANS TOUT ÇA?




             E-­‐commerce	
  

8
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
É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
ÉQUIPEMENTS




     Répar//on	
  par	
  OS,	
  France	
  




11
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
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
LES USAGES | LES APPLIS




               à	
  Jeux	
  et	
  réseaux	
  sociaux	
  


14
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
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
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
ET DEMAIN…

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

             … mais…	
  


18
WEB VS APPLICATIONS




19
     © C2iS / 26, rue Louis Blanc - 69006 LYON / 26, rue du Faubourg Saint-Antoine - 75012 PARIS / Web : http://www.c2is.fr
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
#3
DÉFINIR SA
STRATÉGIE MOBILE
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
DÉTERMINER LA BONNE STRATÉGIE MOBILE

1 	
  Quels	
  contenus?	
  




23
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
DÉTERMINER LA BONNE STRATÉGIE MOBILE

1 	
  Quels	
  contenus	
  ?	
  
2 	
  Dans	
  quel	
  contexte	
  ?	
  	
  




25
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
DÉTERMINER LA BONNE STRATÉGIE MOBILE

1 	
  Quels	
  contenus	
  ?	
  
2 	
  Dans	
  quel	
  contexte	
  ?	
  	
  
3 	
  Comment	
  y	
  accéder	
  ?	
  


27
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
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
LE CROSS CANAL MULTI DEVICE



     EXPÉRIENCE	
  RETAIL	
  

                                EXPÉRIENCE	
  CROSS	
  CANAL	
  

     EXPÉRIENCE	
  WEB	
  




30
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
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
#4
DÉVELOPPER POUR
LE MOBILE
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
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
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
LES 7 GRANDES RÈGLES DE DÉV.



             Pour	
  une	
  applicaUon,	
  
     un	
  bug	
  est	
  rédhibitoire.	
  	
  


37
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
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
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
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
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
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
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
#5
BEST PRACTICES
MOBILES
APPLICATIONS MOBILES
Les	
  applica:ons	
  mobiles	
  permePent	
  
d’offrir	
  des	
  services	
  à	
  valeur	
  ajoutée	
  à	
  
l’internaute	
  et	
  d’être	
  «	
  toujours	
  dans	
  leur	
  
poche	
  ».	
  	
  

46
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
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
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
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
ACCOR HOTELS | SITE MOBILE OU APP ?




           Site	
  mobile	
     Applica:on	
  


51
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
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
LA REDOUTE | SITE MOBILE OU APP ?




            Site	
  mobile	
  
           Site	
  mobile	
      Applica:on	
  


54
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
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
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	
  
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
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
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
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
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
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
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
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	
  
C2iS Agence Digitale
   26 rue Louis Blanc
       69006 LYON
   Tel : 04 37 24 78 20
        www.c2is.fr       @agence_c2is

Contenu connexe

Tendances

Parlons tourisme attentes et comportements des internautes en 2012-alix howar...
Parlons tourisme attentes et comportements des internautes en 2012-alix howar...Parlons tourisme attentes et comportements des internautes en 2012-alix howar...
Parlons tourisme attentes et comportements des internautes en 2012-alix howar...
Office de tourisme Aunis Marais Poitevin
 
OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)
OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)
OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)
guest0dddb5
 
1er Baromètre du Marketing Mobile en France
1er Baromètre du Marketing Mobile en France1er Baromètre du Marketing Mobile en France
1er Baromètre du Marketing Mobile en France
servicesmobiles.fr
 
Cours Marketing Mobile - Ulrich Rozier
Cours Marketing Mobile - Ulrich RozierCours Marketing Mobile - Ulrich Rozier
Cours Marketing Mobile - Ulrich Rozier
Ulrich Rozier
 
Veille Ne Kid 06.05.09 : l'internet des objets
Veille Ne Kid 06.05.09 : l'internet des objetsVeille Ne Kid 06.05.09 : l'internet des objets
Veille Ne Kid 06.05.09 : l'internet des objets
Né Kid
 
Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...
Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...
Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...
UNITEC
 
Baromètre de l'économie numérique 2e édition
Baromètre de l'économie numérique 2e éditionBaromètre de l'économie numérique 2e édition
Baromètre de l'économie numérique 2e édition
servicesmobiles.fr
 
Social Loves Mobile
Social Loves MobileSocial Loves Mobile
Social Loves Mobile
Nexize
 
Conférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesConférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usages
servicesmobiles.fr
 
Messagerie instantanée : les plus populaires dans le monde
Messagerie instantanée : les plus populaires dans le mondeMessagerie instantanée : les plus populaires dans le monde
Messagerie instantanée : les plus populaires dans le monde
servicesmobiles.fr
 
Communiqué de presse - Internet global - Médiamétrie - Avril 2013
Communiqué de presse - Internet global - Médiamétrie - Avril 2013Communiqué de presse - Internet global - Médiamétrie - Avril 2013
Communiqué de presse - Internet global - Médiamétrie - Avril 2013
Romain Fonnier
 
What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ? What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ?
DigitasLBi Paris
 
2015 baromobile OmnicomMediaGroup avec comments
2015 baromobile OmnicomMediaGroup avec comments2015 baromobile OmnicomMediaGroup avec comments
2015 baromobile OmnicomMediaGroup avec comments
jean-yves destandau
 
Connected Commerce : Le baromètre de l’Expérience Marchande Connectée Digitas
Connected Commerce : Le baromètre de l’Expérience Marchande Connectée DigitasConnected Commerce : Le baromètre de l’Expérience Marchande Connectée Digitas
Connected Commerce : Le baromètre de l’Expérience Marchande Connectée Digitas
DigitasLBi Paris
 
Présentation e bay futur du commerce
Présentation e bay futur du commercePrésentation e bay futur du commerce
Présentation e bay futur du commerce
eBay_France
 
Présentation eBay futur du commerce
Présentation eBay futur du commercePrésentation eBay futur du commerce
Présentation eBay futur du commerce
servicesmobiles.fr
 
Les clés d'une présence réussie sur mobile
Les clés d'une présence réussie sur mobileLes clés d'une présence réussie sur mobile
Les clés d'une présence réussie sur mobile
Ad4Screen
 
Valtech - Analyse des comportements sur les sites e-Commerce
Valtech - Analyse des comportements sur les sites e-CommerceValtech - Analyse des comportements sur les sites e-Commerce
Valtech - Analyse des comportements sur les sites e-Commerce
Valtech
 

Tendances (20)

Parlons tourisme attentes et comportements des internautes en 2012-alix howar...
Parlons tourisme attentes et comportements des internautes en 2012-alix howar...Parlons tourisme attentes et comportements des internautes en 2012-alix howar...
Parlons tourisme attentes et comportements des internautes en 2012-alix howar...
 
OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)
OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)
OPEN YOUR BRAND ! Un évènement autour de la marque mobile (11 Mars 2010)
 
1er Baromètre du Marketing Mobile en France
1er Baromètre du Marketing Mobile en France1er Baromètre du Marketing Mobile en France
1er Baromètre du Marketing Mobile en France
 
Cours Marketing Mobile - Ulrich Rozier
Cours Marketing Mobile - Ulrich RozierCours Marketing Mobile - Ulrich Rozier
Cours Marketing Mobile - Ulrich Rozier
 
Veille Ne Kid 06.05.09 : l'internet des objets
Veille Ne Kid 06.05.09 : l'internet des objetsVeille Ne Kid 06.05.09 : l'internet des objets
Veille Ne Kid 06.05.09 : l'internet des objets
 
Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...
Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...
Le numérique : nouveau pilier de l'innovation sociétale et économique - Antoi...
 
Tourisme
TourismeTourisme
Tourisme
 
Reussir son appli
Reussir son appliReussir son appli
Reussir son appli
 
Baromètre de l'économie numérique 2e édition
Baromètre de l'économie numérique 2e éditionBaromètre de l'économie numérique 2e édition
Baromètre de l'économie numérique 2e édition
 
Social Loves Mobile
Social Loves MobileSocial Loves Mobile
Social Loves Mobile
 
Conférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesConférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usages
 
Messagerie instantanée : les plus populaires dans le monde
Messagerie instantanée : les plus populaires dans le mondeMessagerie instantanée : les plus populaires dans le monde
Messagerie instantanée : les plus populaires dans le monde
 
Communiqué de presse - Internet global - Médiamétrie - Avril 2013
Communiqué de presse - Internet global - Médiamétrie - Avril 2013Communiqué de presse - Internet global - Médiamétrie - Avril 2013
Communiqué de presse - Internet global - Médiamétrie - Avril 2013
 
What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ? What's Next Contenus : Et si on parlait Performance ?
What's Next Contenus : Et si on parlait Performance ?
 
2015 baromobile OmnicomMediaGroup avec comments
2015 baromobile OmnicomMediaGroup avec comments2015 baromobile OmnicomMediaGroup avec comments
2015 baromobile OmnicomMediaGroup avec comments
 
Connected Commerce : Le baromètre de l’Expérience Marchande Connectée Digitas
Connected Commerce : Le baromètre de l’Expérience Marchande Connectée DigitasConnected Commerce : Le baromètre de l’Expérience Marchande Connectée Digitas
Connected Commerce : Le baromètre de l’Expérience Marchande Connectée Digitas
 
Présentation e bay futur du commerce
Présentation e bay futur du commercePrésentation e bay futur du commerce
Présentation e bay futur du commerce
 
Présentation eBay futur du commerce
Présentation eBay futur du commercePrésentation eBay futur du commerce
Présentation eBay futur du commerce
 
Les clés d'une présence réussie sur mobile
Les clés d'une présence réussie sur mobileLes clés d'une présence réussie sur mobile
Les clés d'une présence réussie sur mobile
 
Valtech - Analyse des comportements sur les sites e-Commerce
Valtech - Analyse des comportements sur les sites e-CommerceValtech - Analyse des comportements sur les sites e-Commerce
Valtech - Analyse des comportements sur les sites e-Commerce
 

Similaire à C2iS Keynote - Quelle stratégie "web mobile" en 2013 ?

Christophe morawski intervention-mobilisation-des-marques_2012
Christophe morawski intervention-mobilisation-des-marques_2012Christophe morawski intervention-mobilisation-des-marques_2012
Christophe morawski intervention-mobilisation-des-marques_2012
Christophe Morawski
 
Inpix mobile relational
Inpix mobile relationalInpix mobile relational
Inpix mobile relational
Inpix
 
Tendances Web Marketing 2013
Tendances Web Marketing 2013Tendances Web Marketing 2013
Tendances Web Marketing 2013
WSI France
 
2011 06 think mobile pour thibaut
2011 06 think mobile pour thibaut2011 06 think mobile pour thibaut
2011 06 think mobile pour thibaut
Thibaut Bayart
 
Le Monde c'est déjà demain
Le Monde c'est déjà demainLe Monde c'est déjà demain
Le Monde c'est déjà demain
M Publicité / Groupe Le Monde
 
Conférence comment approcher la dimension mobile
Conférence comment approcher la dimension mobileConférence comment approcher la dimension mobile
Conférence comment approcher la dimension mobile
Nicolas Bariteau
 
Le décodeur 2016 par Agence C2iS
Le décodeur 2016 par Agence C2iSLe décodeur 2016 par Agence C2iS
Le décodeur 2016 par Agence C2iS
C2iS
 
La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...
La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...
La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...
Le Moulin Digital
 
Veni Mopa 06 09
Veni Mopa 06 09Veni Mopa 06 09
Veni Mopa 06 09
MONA
 
Observatoire des écrans connectés By Group M et SFR régie Mars 2013
Observatoire des écrans connectés By Group M et SFR régie Mars 2013Observatoire des écrans connectés By Group M et SFR régie Mars 2013
Observatoire des écrans connectés By Group M et SFR régie Mars 2013
servicesmobiles.fr
 
Commerce mobile: les priorités pour 2012
Commerce mobile: les priorités pour 2012Commerce mobile: les priorités pour 2012
Commerce mobile: les priorités pour 2012
Adviso Stratégie Internet
 
7 pieges a_eviter_stratégie_marketing_mobile
7 pieges a_eviter_stratégie_marketing_mobile7 pieges a_eviter_stratégie_marketing_mobile
7 pieges a_eviter_stratégie_marketing_mobile
cal7
 
Les enjeux du e-tourisme_Jean-Luc Boulin
Les enjeux du e-tourisme_Jean-Luc BoulinLes enjeux du e-tourisme_Jean-Luc Boulin
Les enjeux du e-tourisme_Jean-Luc Boulin
Pays de Bergerac
 
Conférence Innov'metiers la digitalisation des métiers
Conférence Innov'metiers la digitalisation des métiersConférence Innov'metiers la digitalisation des métiers
Conférence Innov'metiers la digitalisation des métiers
Carolina Borges
 
2018 10ème baromobile v orale
2018 10ème baromobile v orale2018 10ème baromobile v orale
2018 10ème baromobile v orale
jean-yves destandau
 
Conf Mobile M-commerce Greystripe 2013
Conf Mobile M-commerce Greystripe 2013Conf Mobile M-commerce Greystripe 2013
Conf Mobile M-commerce Greystripe 2013
ValueClick France
 
Intervention dauphine 2012
Intervention dauphine 2012Intervention dauphine 2012
Intervention dauphine 2012
spininteractive
 
Présentation Conférence des TechTrends
Présentation Conférence des TechTrendsPrésentation Conférence des TechTrends
Présentation Conférence des TechTrends
Publicis Sapient Engineering
 
Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)
Olivier Robé
 

Similaire à C2iS Keynote - Quelle stratégie "web mobile" en 2013 ? (20)

Christophe morawski intervention-mobilisation-des-marques_2012
Christophe morawski intervention-mobilisation-des-marques_2012Christophe morawski intervention-mobilisation-des-marques_2012
Christophe morawski intervention-mobilisation-des-marques_2012
 
Inpix mobile relational
Inpix mobile relationalInpix mobile relational
Inpix mobile relational
 
Tourisme
TourismeTourisme
Tourisme
 
Tendances Web Marketing 2013
Tendances Web Marketing 2013Tendances Web Marketing 2013
Tendances Web Marketing 2013
 
2011 06 think mobile pour thibaut
2011 06 think mobile pour thibaut2011 06 think mobile pour thibaut
2011 06 think mobile pour thibaut
 
Le Monde c'est déjà demain
Le Monde c'est déjà demainLe Monde c'est déjà demain
Le Monde c'est déjà demain
 
Conférence comment approcher la dimension mobile
Conférence comment approcher la dimension mobileConférence comment approcher la dimension mobile
Conférence comment approcher la dimension mobile
 
Le décodeur 2016 par Agence C2iS
Le décodeur 2016 par Agence C2iSLe décodeur 2016 par Agence C2iS
Le décodeur 2016 par Agence C2iS
 
La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...
La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...
La mobilité dans le tourisme - Office de tourisme Buis les Baronnies - févrie...
 
Veni Mopa 06 09
Veni Mopa 06 09Veni Mopa 06 09
Veni Mopa 06 09
 
Observatoire des écrans connectés By Group M et SFR régie Mars 2013
Observatoire des écrans connectés By Group M et SFR régie Mars 2013Observatoire des écrans connectés By Group M et SFR régie Mars 2013
Observatoire des écrans connectés By Group M et SFR régie Mars 2013
 
Commerce mobile: les priorités pour 2012
Commerce mobile: les priorités pour 2012Commerce mobile: les priorités pour 2012
Commerce mobile: les priorités pour 2012
 
7 pieges a_eviter_stratégie_marketing_mobile
7 pieges a_eviter_stratégie_marketing_mobile7 pieges a_eviter_stratégie_marketing_mobile
7 pieges a_eviter_stratégie_marketing_mobile
 
Les enjeux du e-tourisme_Jean-Luc Boulin
Les enjeux du e-tourisme_Jean-Luc BoulinLes enjeux du e-tourisme_Jean-Luc Boulin
Les enjeux du e-tourisme_Jean-Luc Boulin
 
Conférence Innov'metiers la digitalisation des métiers
Conférence Innov'metiers la digitalisation des métiersConférence Innov'metiers la digitalisation des métiers
Conférence Innov'metiers la digitalisation des métiers
 
2018 10ème baromobile v orale
2018 10ème baromobile v orale2018 10ème baromobile v orale
2018 10ème baromobile v orale
 
Conf Mobile M-commerce Greystripe 2013
Conf Mobile M-commerce Greystripe 2013Conf Mobile M-commerce Greystripe 2013
Conf Mobile M-commerce Greystripe 2013
 
Intervention dauphine 2012
Intervention dauphine 2012Intervention dauphine 2012
Intervention dauphine 2012
 
Présentation Conférence des TechTrends
Présentation Conférence des TechTrendsPrésentation Conférence des TechTrends
Présentation Conférence des TechTrends
 
Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)
 

C2iS Keynote - Quelle stratégie "web mobile" en 2013 ?

  • 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
  • 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
  • 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
  • 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