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

  • 780 views
Uploaded on

Quelle stratégie adopter pour être présent sur le mobile (et les tablettes) 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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
780
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DÉFINIR SASTRATÉGIE « WEB MOBILE »EN 2013
  • 2. #1QU’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 MOBILE5
  • 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% dun trimestre à lautre, et de 150% par rapport à lanné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  :   §  Lenvoi  ou  la  récep:on  demails    est  loccupa: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   LIpad  représente  85%  des  connexions  à  par:r  dune  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 APPLICATIONS19 © C2iS / 26, rue Louis Blanc - 69006 LYON / 26, rue du Faubourg Saint-Antoine - 75012 PARIS / Web : http://www.c2is.fr
  • 20. A RETENIR1   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. #3DÉFINIR SASTRATÉGIE MOBILE
  • 22. LA STRATÉGIE MOBILE S’INSCRIT DANS UNESTRATÉ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 MOBILE1   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 MOBILE1   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 MOBILE1   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 Urgente28
  • 29. DÉTERMINER LA BONNE STRATÉGIE MOBILE1   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 RETENIR1   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. #4DÉVELOPPER POURLE 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  à  lOS  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. #5BEST PRACTICESMOBILES
  • 46. APPLICATIONS MOBILESLes  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 OFFICIELLEUne  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 OFFRESUne  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 APPLa  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’APPUn  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 MULTIMEDIACePe  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 MOBILEVAL  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 RESPONSIVELe  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 REALISATIONLe  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 FIRSTLe  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 & ANTICIPATIONLe  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 | SYNCHRONISATIONQuel  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 | ANTICIPATIONL’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