DÉFINIR SASTRATÉGIE « WEB MOBILE »EN 2013
#1QU’EST CE QUE« LE WEB MOBILE » ?
3
Hors	  -­‐Domicile	      27	  pouces	  et	  +	                                                                            ...
#2    ETAT DES LIEUX    DU WEB MOBILE5
DES CHIFFRES                         •  En	  15	  ans	  internet	  a	  fait	  40,7	  millions	  d’internautes	  (70%	  pop...
ET LE COMMERCE DANS TOUT ÇA?               31,	  1	  millions	         4,5	  millions	           960	  000	  	            ...
ET LE COMMERCE DANS TOUT ÇA?             E-­‐commerce	  8
Les achats sur mobile ont connu     une croissance de 18% dun     trimestre à lautre, et de 150% par     rapport à lannée ...
ÉQUIPEMENTS      •  46,6%	  des	  Français	  sont	  équipés	  de	  smartphones	  en	  septembre	  2012	           Répar//o...
ÉQUIPEMENTS     Répar//on	  par	  OS,	  France	  11
LES USAGES | LE TOP      •  Les	  Smartphones	  sont	  les	  terminaux	  mobiles	  les	  plus	  couramment	  u:lisés	     ...
LES USAGES | LA NAVIGATION     Les mobinautes passent     3h46 par mois     sur des sites mobiles     (hors applications) ...
LES USAGES | LES APPLIS               à	  Jeux	  et	  réseaux	  sociaux	  14
LES USAGES | NB D’APPLIS PAR SMARTPHONE                                          100%	                                    ...
PROFIL DU MOBINAUTE FRANÇAIS                           57	  %	  sont	  des	  hommes	  	                                   ...
ET LA TABLETTE ?                                          4,3	  millions	  de	  tablonautes	                              ...
ET DEMAIN…   « Les	  mobiles et les tablettes dépasseront les PCs pour l’accès à        internet en 2013 ».             … ...
WEB VS APPLICATIONS19     © C2iS / 26, rue Louis Blanc - 69006 LYON / 26, rue du Faubourg Saint-Antoine - 75012 PARIS / We...
A RETENIR1  	  Le	  web	  est	  mobile.	  	  2  	  Les	  transacUons	  d’ici	  2014.	  	  3  	  Le	  trafic	  mobile	  pass...
#3DÉFINIR SASTRATÉGIE MOBILE
LA STRATÉGIE MOBILE S’INSCRIT DANS UNESTRATÉGIE GLOBALE DE CONTENUS                                    CONTENUS	          ...
DÉTERMINER LA BONNE STRATÉGIE MOBILE1 	  Quels	  contenus?	  23
LES DIFFÉRENTS TYPES DE CONTENUS              Co                             Se                                So         ...
DÉTERMINER LA BONNE STRATÉGIE MOBILE1 	  Quels	  contenus	  ?	  2 	  Dans	  quel	  contexte	  ?	  	  25
LE CONTEXTE DE CONSULTATION                            	  SITE	  WEB	  :	       	  APPLICATION	  :	  d’usage	             ...
DÉTERMINER LA BONNE STRATÉGIE MOBILE1 	  Quels	  contenus	  ?	  2 	  Dans	  quel	  contexte	  ?	  	  3 	  Comment	  y	  ac...
ACCÈS AUX OUTILS MOBILES       WEB	  MOBILE	  /	                                          WEBAPP	             APP	  SMARTP...
DÉTERMINER LA BONNE STRATÉGIE MOBILE1 	  Quels	  contenus	  ?	  2 	  Quel	  contexte	  ?	  	  3 	  Comment	  y	  accéder	 ...
LE CROSS CANAL MULTI DEVICE     EXPÉRIENCE	  RETAIL	                                  EXPÉRIENCE	  CROSS	  CANAL	       EX...
LE MANIFESTE DU CLIENT CROSS-CANAL«	  Je	  suis	  un	  client	  unique.	  	  J’aPend	  que	  les	  marques	  me	  reconnai...
A RETENIR1  	  Un	  vaste	  choix	  de	  contenus	  sont	        adaptés	  au	  web	  mobile.	  	  2  	  Les	  smartphones...
#4DÉVELOPPER POURLE MOBILE
LE DESIGN INFLUENCÉ PAR 4 ÉLÉMENTS      • Taille	  de	  l’écran	                                                 • Réseau	...
LES 7 GRANDES RÈGLES DE DÉV.     Une	  applicaUon	  web	  ou	       naUve	  doit	  de	  préférence	       respecter	  les	...
LES 7 GRANDES RÈGLES DE DÉV.                         Une	  applicaUon	                           tableGe	  peut	  au	     ...
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…	         ...
LES 7 GRANDES RÈGLES DE DÉV.                       Opter	  pour	  un	  	                        CMS	  modulaire,	  	      ...
SITE WEB OU APPLICATION ?Chaque	  ou:l	  a	  ses	  propres	  avantages	  et	  inconvénients.	  L’usage	  et	  l’expérience...
LES DIFFÉRENCES SITE WEB / APPLICATION	  Fonc:onnalités	                                                                  ...
RESPONSIVE DESIGN | KESAKO ?Le	  Responsive	  Design	  permet	  à	  un	  site	  de	  s’adapter	  automa:quement	  à	  la	 ...
RESPONSIVE DESIGN | COMMENT ?                                   Fluid	  Grid	                                  Les	  éléme...
RESPONSIVE DESIGN | AVANTAGES ?                                                …	  et	  inconvénients	           Accès	  a...
#5BEST PRACTICESMOBILES
APPLICATIONS MOBILESLes	  applica:ons	  mobiles	  permePent	  d’offrir	  des	  services	  à	  valeur	  ajoutée	  à	  l’inte...
CLARINS	  |	  MON	  FIL	  ROUGE	  BEAUTÉ	  Une	  applica:on	  qui	  aide	  les	  clientes	  à	  choisir	  les	  produits	 ...
ZARA | APPLICATION OFFICIELLEUne	  applica:on	  permePant	  de	  commander	  les	  produits	  et	  d’être	  au	  courant	 ...
AIR FRANCE | MEILLEURES OFFRESUne	  applica:on	  forte	  de	  son	  concept	  créaUf	  qui	  la	  rend	  aussi	  bien	  in...
SITES MOBILES VS APPLa	  ques:on	  se	  pose	  souvent	  de	  développer	  un	  site	  mobile	  ou	  une	  applica:on.	  L...
ACCOR HOTELS | SITE MOBILE OU APP ?           Site	  mobile	     Applica:on	  51
ACCOR HOTELS | UN DESIGN D’APPUn	  design	  proche	  d’une	  applica:on	  na:ve.	  	  -­‐	  un	  moteur	  de	  recherche	 ...
ACCOR HOTELS | PUSH ET MULTIMEDIACePe	  applica:on	  est	  plus	  focalisée	  sur	  la	  fidélisa:on	  que	  le	  site	  mo...
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	                   ...
LA REDOUTE | PARTENAIRE SHOPPING                    L’applica:on	  offre	  l’accès	  à	  de	  nombreux	                    ...
VAL THORENS | ECOSYSTÈME MOBILEVAL	  THORENS	  dispose	  d’un	  site	  mobile	  permePant	  d’accéder	  rapidement	  au	  ...
VAL THORENS | SITE MOBILE OPTIMISE-­‐	  Contenu	  bref	  et	  efficace	  :	  service,	  informa:on…	  -­‐	  Eléments	  live	...
WEB RESPONSIVELe	  web	  responsive	  permet	  de	  couvrir	  «	  facilement	  »	  tous	  les	  devices.	  Mais	  il	  doi...
FOOD SENS | BELLE REALISATIONLe	  site	  propose	  des	  varia:ons	  très	  fines	  permePant	  d’adapter	  l’interface	  à...
STARBUCKS COFFEE                         La	  naviga:on	  s’adapte	  en	  fonc:on	  du	                                   ...
QUARTZ | TABLETTE FIRSTLe	  site	  a	  été	  pensé	  «	  tablePe	  first	  »	  pour	  une	  u:lisa:on	  op:male	  sur	  tab...
CLOUD | SYNCHRO & ANTICIPATIONLe	  cloud	  est	  une	  des	  solu:ons	  aux	  probléma:ques	  des	  consommateurs	  	  mul...
AMAZON | SYNCHRONISATIONQuel	  que	  soit	  le	  device	  avec	  lequel	  on	  se	  connecte	  à	  son	  compte,	  on	  re...
GOOGLE NOW | ANTICIPATIONL’informa:on	  n’est	  plus	  cherchée	  mais	  fournie	  au	  moment	  et	  à	  l’endroit	  où	 ...
C2iS Agence Digitale   26 rue Louis Blanc       69006 LYON   Tel : 04 37 24 78 20        www.c2is.fr       @agence_c2is
Upcoming SlideShare
Loading in...5
×

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

895

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
895
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. DÉFINIR SASTRATÉGIE « WEB MOBILE »EN 2013
  2. 2. #1QU’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 MOBILE5
  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% 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. 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  :   §  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. 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   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. 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 APPLICATIONS19 © C2iS / 26, rue Louis Blanc - 69006 LYON / 26, rue du Faubourg Saint-Antoine - 75012 PARIS / Web : http://www.c2is.fr
  20. 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. 21. #3DÉFINIR SASTRATÉGIE MOBILE
  22. 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. 23. DÉTERMINER LA BONNE STRATÉGIE MOBILE1   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 MOBILE1   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 MOBILE1   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 Urgente28
  29. 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. 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 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. 33. #4DÉVELOPPER POURLE 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  à  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. 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. #5BEST PRACTICESMOBILES
  46. 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. 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 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. 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. 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. 51. ACCOR HOTELS | SITE MOBILE OU APP ? Site  mobile   Applica:on  51
  52. 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. 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. 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 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. 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 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. 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. 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 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. 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. 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. 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. 66. C2iS Agence Digitale 26 rue Louis Blanc 69006 LYON Tel : 04 37 24 78 20 www.c2is.fr @agence_c2is

×