Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 66 Publicité

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

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.

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.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

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

Publicité

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

  1. 1. DÉFINIR SA STRATÉGIE « WEB MOBILE » EN 2013
  2. 2. #1 QU’EST CE QUE « LE WEB MOBILE » ?
  3. 3. 3
  4. 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. 5. #2 ETAT DES LIEUX DU WEB MOBILE 5
  6. 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. 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. 8. ET LE COMMERCE DANS TOUT ÇA? E-­‐commerce   8
  9. 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. 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. 11. ÉQUIPEMENTS Répar//on  par  OS,  France   11
  12. 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. 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. 14. LES USAGES | LES APPLIS à  Jeux  et  réseaux  sociaux   14
  15. 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. 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. 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. 18. ET DEMAIN… « Les  mobiles et les tablettes dépasseront les PCs pour l’accès à internet en 2013 ». … mais…   18
  19. 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. 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. 21. #3 DÉFINIR SA STRATÉGIE MOBILE
  22. 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. 23. DÉTERMINER LA BONNE STRATÉGIE MOBILE 1   Quels  contenus?   23
  24. 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. 25. DÉTERMINER LA BONNE STRATÉGIE MOBILE 1   Quels  contenus  ?   2   Dans  quel  contexte  ?     25
  26. 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. 27. DÉTERMINER LA BONNE STRATÉGIE MOBILE 1   Quels  contenus  ?   2   Dans  quel  contexte  ?     3   Comment  y  accéder  ?   27
  28. 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. 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. 30. LE CROSS CANAL MULTI DEVICE EXPÉRIENCE  RETAIL   EXPÉRIENCE  CROSS  CANAL   EXPÉRIENCE  WEB   30
  31. 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. 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. 33. #4 DÉVELOPPER POUR LE MOBILE
  34. 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. 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. 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. 37. LES 7 GRANDES RÈGLES DE DÉV. Pour  une  applicaUon,   un  bug  est  rédhibitoire.     37
  38. 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. 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. 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. 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. 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. 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. 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. 45. #5 BEST PRACTICES MOBILES
  46. 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. 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. 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. 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. 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. 51. ACCOR HOTELS | SITE MOBILE OU APP ? Site  mobile   Applica:on   51
  52. 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. 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. 54. LA REDOUTE | SITE MOBILE OU APP ? Site  mobile   Site  mobile   Applica:on   54
  55. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 66. C2iS Agence Digitale 26 rue Louis Blanc 69006 LYON Tel : 04 37 24 78 20 www.c2is.fr @agence_c2is

×