Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018

455 views

Published on

Vincent et Asma mettent en avant 4 enjeux pour la performance digitale, dans un monde où l’usage mobile est majoritaire :

- La performance technique : Penser les interfaces pour qu’elles soient aussi fluides à utiliser
que simples à comprendre
- Le contenu : Une production de contenu qui doit elles aussi devenir mobile first
- L’ergonomie : Une ergonomie à géométrie variable
- Le parcours client : Des services repensés dans leurs ensemble

Le mobile est devenu du “connect everything”.

----------------------
Conférence donnée au YOODx #VEM9 le 14 février 2018
Evènement organisé par YOODA.com

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018

  1. 1. Mobile First
  2. 2. Vincent Pillet Fondateur & associé Asma Moumni Responsable UX & Service Design
  3. 3. + DES EXPÉRIENCES TRANSVERSALES POUR LES MARQUES Imaginer UN NOUVEAU MONDE CONNECTÉ & ULTRA COMMUNIQUANT Concevoir Deux agences complémentaires
  4. 4. 1 MUTATIONS DIGITALES MISE EN PERSPECTIVE
  5. 5. L’iPhone aujourd’hui est plus puissant que la fusée Apollo 13 en 1970 VS
  6. 6. 25 SECONDES VS En 5 ans la vitesse d’échange d’un titre boursier a été multiplié par plus de 210 000x 2 2008 MOIS 2013
  7. 7. Source https://www.planetoscope.com 38 VS Chaque seconde dans le monde smartphones vendus 4 bébés naissent
  8. 8. Source : HootSuite & We Are Social 2017 d’un accès à l’internet mobile2/3 de l’humanité dispose aujourd’hui
  9. 9. 1O MILLIARDS de vidéos sont vues chaque jour sur Snapchat Source https://www.planetoscope.com
  10. 10. 650 MILLIONS de téléchargements de Pokemon GO
  11. 11. Source : HootSuite & We Are Social 2017 15 % 30 % 45 % 60 % 2009 2010 2011 2012 2013 2014 2015 2016 2017 50,3 % 43,6 % 35,1 % 27,1 % 16,2 % 10,7 % 6,1 % 2,9 % 0,7 % En 2017 L’audience d’internet mobile est passée devant celle d’internet fixe
  12. 12. RAPIDE PUISSANT MOBILE + + + Le mobile a CONNECTÉ L’HUMANITÉ
  13. 13. 2 MUTATIONS MOBILES USAGES & COMPORTEMENTS
  14. 14. Des interactions plus courtes, mais nombreuses Des comportements en pleine mutation par jour, c’est le nombre d’interaction d’un être humain normal avec son smartphones Source :Google 2015. 150x des français consultent leur portable au milieu de la nuit Source : Deloitte 41%
  15. 15. Un trait d’union entre le monde physique et le monde digital Source : Google 2015 82% Des usages en pleine mutation des clients en magasin utilisent leurs mobile pour les aider dans leur choix final
  16. 16. Des parcours de plus en plus fragmentés Des usages en pleine mutation 55% des transactions impliquent au 
 moins deux appareils ou plus Source : Criteo
  17. 17. Une place du mobile de plus en plus primordiale Des usages en pleine mutation Source : comScore
  18. 18. Le mobile, une place de plus en plus significative dans les parcours clients 69% Sur liligo.com, les recherches sur mobile ont été multipliées par 2,5 entre 2013 et 2014. Source : Liligo x2,5 Des usages en pleine mutation des voyageurs débutent leur processus de recherche en ligne sur un appareil mobile. Source : Online Marketing Strategies in Travel, Juin 2015.
  19. 19. 3 MOBILE FIRST ENJEUX & IMPACTS
  20. 20. MOBILE FIRST Notion apparue en 2011 dans le livre « mobile first » de Luke Wroblewski, constatant la prise d’importance exponentielle du mobile, il préconise de changer d’approche et de concevoir ses interfaces digitales en commençant par le mobile LES DIFFÉRENTS NIVEAUX DE MATURITÉ D’INTÉGRATION DU MOBILE Non integré Le mobile est considéré comme la déclinaison d’autres interfaces aucune stratégie particulière le concernant Mobile first Le mobile est considéré comme une interface clé et conçu en priorité Mobile centric Le mobile est considéré comme un point de contact central et les services sont pensés autour de lui
  21. 21. Les différentes options SITE MOBILE SITE RESPONSIVE APPLICATION NATIVE
  22. 22. Les différentes options SITE MOBILE SITE RESPONSIVE APPLICATION NATIVE Fonctionne dans le navigateur Optimisé pour le mobile Coût moins élevé qu’une application native Deux sites à maintenir Deux URL différentes (m.site.com + site.com) Moins bonnes performances qu’une application native Fonctionne dans le navigateur Une URL unique Un seul site à maintenir Coût plus élevé qu’un site mobile Moins bonnes performances qu’une application native Un site qui s’adapte à tous les terminaux Coût moins élevé qu’une application native Peut fonctionner offline Meilleure expérience, mais acquisition plus difficile Coût plus élevé qu’un site Une application par OS (iOS, Android, Microsoft) Meilleures performances Peut utiliser des fonctionnalités natives du smartphone (GPS, push, etc) MAJ plus complexe (nouveau
 téléchargement de l’application)
  23. 23. PERFORMANCE Concevoir pour la performance technique et d’usage Les 4 enjeux du mobile first CONTENU ERGONOMIE Designer des interfaces polymorphes PARCOURS Intégrer l’omnicanalité et la multimodalité dans la réflexion Penser des contenus qui vivront dans différents fronts
  24. 24. PERFORMANCE ENJEU #1 Penser les interfaces pour qu’elles soient aussi fluides à utiliser que simples à comprendre
  25. 25. PERFORMANCE enjeu #1
  26. 26. PERFORMANCE enjeu #1
  27. 27. PERFORMANCE enjeu #1
  28. 28. L’attente de simplicité et d’efficacité est plus forte que jamais, tirée par les usages mobiles. L’utilisateur attend une performance d’usage. PERFORMANCE enjeu #1
  29. 29. PERFORMANCE enjeu #1 Designer pour la performance c’est être capable d’aller chercher la plus infime friction. Même si elle n’impact pas vos chiffres, même si elle ne vous semble pas révolutionnaire, ce sont ces « Little big things » qui rendront votre expérience réellement sans couture. Presque magique, mémorable.
  30. 30. PERFORMANCE enjeu #1 3 secondes C’est le temps de chargement jugé acceptable par les utilisateurs 0 à 2 sec. C’est le temps au delà duquel vous perdrez 1 utilisateur sur 2 4,3 sec. C’est la moyenne actuelle de chargement d’un site x2 En multipliant le temps de chargement par 2 x2 On multiplie par 2 Le taux de conversion VS Performance technique : les habitudes de micro-consommation ont rendus les utilisateurs plus exigeants en terme de vitesse. En même temps, disparités de matériel et de réseaux ont rendus le challenge plus fort
  31. 31. PERFORMANCE enjeu #1 Premier levier permettant d’optimiser la rapidité : AMP pour « Accelerated Mobile Pages ».
 Framework de développement proposé par Google afin d’optimiser les temps de chargements mobiles L’internaute qui sélectionne un contenu AMP n’est en fait pas redirigé vers le site à l’origine du contenu : la lecture se fait directement sur le domaine de Google ! HTML AMP TRÈS LIGHT PRIORISATION LECTURE AU SEIN DU DOMAINE GOOGLEAvec des pages AMP, lorsqu’un contenu est consulté depuis les résultats de Google, c’est sa version AMP qui est systématiquement appelée à la place de la page HTML classique. Il s’agit en fait de pages HTML très légères, auxquelles s’ajoutent le système de cache CDN et une réduction du Javascript. L’image principale et le texte sont chargés en premier, au lieu de la publicité et des scripts en temps normal.
  32. 32. PERFORMANCE enjeu #1 Second levier, les systèmes d’informations, qui doivent s’adapter pour servir ces nouveaux devices et être mieux exploités pour réduire la perception de latence Concevoir les systèmes d’information pour qu’ils soient moins gourmands en données, plus rapides et adaptés aux parcours utilisateurs RATIONALISER LES APPELS APPELS ASYNCHRONES Permettre de charger les informations en plusieurs temps pour qu’au delà de la rapidité réelle, la rapidité perçue soit meilleure
  33. 33. PERFORMANCE enjeu #1 Enfin le poids des médias, encore souvent hérités de productions dédiées à d’autres interfaces, sont encore souvent inadaptés au mobile. La chaine de production de contenu doit elle aussi passer au mobile first
  34. 34. CONTENU ENJEU #3 Des chaines de production qui doivent elles aussi devenir mobile first
  35. 35. CONTENU enjeu #3 Site
  36. 36. CONTENU enjeu #3 Site
  37. 37. CONTENU enjeu #3 Site Site mobile
  38. 38. CONTENU enjeu #3 Site Site mobile Application
  39. 39. ERGONOMIE ENJEU #3 Une ergonomie à géométrie variable
  40. 40. ERGONOMIE enjeu #3 Source : Luke W. Google conversion 2017
  41. 41. ERGONOMIE enjeu #3 Source : Experience utilisateur mobile - Amelie Boucher Les interfaces doivent désormais prendre en compte les nouvelles contraintes qu’impliquent le mobile
  42. 42. Une interface qui doit donner d’avantage d’indices pour aider à l’utiliser, à savoir où il en est, où il va, et ce qu’il se passe DE HIERARCHIE FACILITATION D’AFFORDANCE DE GUIDE Des contenus qui doivent être d’autant plus priorisés Une lecture qui doit d’avantage être guidée Faciliter l’interaction pour un usage dont les modalités sont plus contraintes Des actions qui doivent s’adapter à des interactions qui sont par nature différentes. Tactile VS clavier et souris ERGONOMIE enjeu #3 + + + +
  43. 43. ERGONOMIE enjeu #3 FACILITATION
  44. 44. VS ERGONOMIE enjeu #3 Site mobile Application mobile FACILITATION
  45. 45. ERGONOMIE enjeu #3 Le focus est porté sur les raccourcis de complétion au lieu de l’action primaire : « rechercher ». Celle ci presque invisible, graphiquement atténuée, noyée entre les raccourcis de complétion et l’auto-completion AFFORDANCE
  46. 46. ERGONOMIE enjeu #3 L’ordre des contenus se réorganise pour donner le focus à l’essentiel Le formulaire se réduit pour être plus séquencé et adapté à un usage mobile HIERARCHIE
  47. 47. ERGONOMIE enjeu #3 GUIDE lab.hakim.seApplication Mc Donald Site mobile Royal Air Maroc
  48. 48. PARCOURS ENJEU #4 Des services repensés dans leurs ensemble
  49. 49. PARCOURS enjeu #4 30% Du trafic UK d’Asos est mobile, ce chiffre passe à 70% pour le monde 80% Des ventes desktop font suite à une consultation mobile 70% Des commandes d’Asos UK se font sur mobile. 58% au global Le mobile a redessiné les parcours, il les a rendu moins linéaires, plus fragmentés et cross-canal L’exemple d’ASOS Source : Luke W. Google conversion 2017 & Global commerce review Criteo
  50. 50. PARCOURS enjeu #4 Cette mutation de parcours a ouvert la porte à de nouvelles opportunités pour les marques. C’était la pièce manquant vers l’accompagnement sans rupture Etapes du cycle de vie d’un voyageurs RECHERCHE RESERVATION DEPART VOYAGE RETOUR
  51. 51. PARCOURS enjeu #4 Nouveaux possibles Nouvelles attentes Géolocalisation Personnalisation & contextualisation Nouvelles opportunités de services dans des temps clients jusqu’alors inaccessibles Un service 24/7 Nouvelles données exploitables Un service en temps réel Des parcours réellement 
 sans couture
  52. 52. PARCOURS enjeu #4 l’exemple du voyage
  53. 53. PARCOURS enjeu #4 CONTEXTUALISER
  54. 54. PARCOURS enjeu #4 PERSONNALISER
  55. 55. PARCOURS enjeu #4 RELIER LES MONDES PHYSIQUES ET DIGITAUX
  56. 56. PARCOURS enjeu #4 RELIER LES MONDES PHYSIQUES ET DIGITAUX
  57. 57. PARCOURS enjeu #4 FACILITER
  58. 58. PARCOURS enjeu #4 ACCOMPAGNER
  59. 59. PARCOURS enjeu #4 RELIER LES MONDES PHYSIQUES ET DIGITAUX
  60. 60. PARCOURS enjeu #4 Ce qui se transforme dans nos parcours aujourd’hui, ce n’est pas seulement la présence plus forte et multiple du mobile….
  61. 61. PARCOURS enjeu #4 C’est surtout le rôle central de celui ci, concentrateur de la majorité de nos interactions, relais de certains points de contacts, pont avec d’autres.
  62. 62. Uber sur TimeOut… Uber sur CityMapper… TripAdvisor sur Accorhotels Les parcours enjeu #4 Demain les parcours devront dont se rationaliser, 
 les frontières s’estomper
  63. 63. Les parcours enjeu #4 Source : Ralph Ammer - https://blog.prototypr.io/make-me-think-90b46aa50513 Notre rôle sera, designer et ingénieurs, de gérer cette nouvelle complexité pour qu’elle ne soit pas subie par l’utilisateur
  64. 64. PERSPECTIVES ET DEMAIN, MOBILE CENTRIC ? 4
  65. 65. Le mobile est au coeur du CONNECT EVERYTHING CONCENTRATEUR 
 Il est l’interface du monde connecté (IOT) CAPTEUR 
 
 Il donne accès aux nouvelles réalités : virtuelles 
 et augmentées INTELLIGENT 
 il porte le déploiement massif des IA grâce à sa puissance et ses chipsets dédiées
  66. 66. Au travers d’HomeKit entend agréger l’IOT et annonce avoir plus de 50 marques compatibles CONCENTRATEUR Connect everything
  67. 67. Un form-factor qui évolue peu mais des nouveaux capteurs qui viennent changer la donne. Bienvenue dans l’ère des réalités Mixtes NOUVELLES REALITÉS Connect everything
  68. 68. Une intelligence artificielle qui rend le smartphone vraiment intelligent. Il devient l’assistant de nos vies INTELLIGENCE Connect everything
  69. 69. Joël De Rosnay Avec la 5G, la promesse du tout connecté devient une réalité. L’impact sur notre environnement sera majeure. Voiture autonome, IOT, nouveaux contenus les domaines d’applications sont multiples RÉSEAU Connect everything
  70. 70. Le mobile est au coeur de LA TRANSFORMATION DES ORGANISATIONS MIEUX PRODUIRE 
 Il impose des méthodes plus agiles qui s’adaptent plus facilement aux changements CASSER LES SILOS 
 
 Il force les organisations à passer à plus de transversalité et de pluridisciplinarité S’ADAPTER 
 Uberisation, la destruction créatrice domine l’époque et génère le besoin d’adaptation
  71. 71. Le mobile impose le temps réel aux organisations. C’est une nouvelle façon de faire qui s’impose. Il faut faire vite et mieux que les autres. Etre Agile. Il faut tester et prendre des risques. L’utilisateur reprend le pouvoir MIEUX PRODUIRE Les organisations
  72. 72. Des organisations sans frontières. Le mobile a fait converger les mondes physiques et digitaux. Il ne s’agit plus d’opposer les mondes mais de les fédérer. Les équipes sont pluridisciplinaires, les frontières disparaissent CASSER LES SILOS Les organisations
  73. 73. Pour éviter d’être disruptée, l’entreprise doit s’adapter. Bouger plus vite, développer l’intelligence collective, devenir elle aussi responsive S’ADAPTER Les organisations
  74. 74. Le mobile est au coeur de TRANSFORMATIONS HUMAINES Pour la nouvelle génération le smartphone est en fait une prothèse symbiotique, une extension de leurs sens, de leurs membres et des fonctions de leurs corps. Il impose des méthodes plus agiles qui s’adaptent plus facilement aux changements Joël De Rosnay
  75. 75. Nomophobie No mobile phobia Le mobile génère de nouveaux comportements. De nouvelles addictions apparaissent. Il prend le pas sur nos vies MAITRISER Human centric
  76. 76. Respecter la vie privée Le mobile est le premier contributeur de data de nos vides digitales. Les enjeux de « privacy » sont au coeur des stratégies. Privacy By design, RGPD, les réglementations se mettent en place DECONNECTER Human centric
  77. 77. Le mobile porte LA RÉVOLUTION DIGITALE Mobile first ne veut pas dire mobile à tout prix. Comme toute révolution il faut la comprendre et savoir en tirer ce qu’il y a de meilleur
  78. 78. RÉACTUALISER LES 4 VALEURS CARDINALES DE PLATON TEMPÉRANCE 
 La technologie sous le joug de l’homme et non l’inverse COURAGE 
 Le courage de vaincre la peur et plonger dans le monde des NBIC JUSTICE 
 Mettre les NBIC au service de tous en évitant leurs travers PRÉCAUTION 
 Anticiper pour être capable d’affronter les dangers potentiels
  79. 79. Mobile First + Human Centric
  80. 80. Fondateur & associé v.pillet@useradgents.com Vincent Pillet Responsable UX & Service Design a.moumni@useradgents.com Asma Moumni 8 rue de la Rochefoucauld - 75009 Paris 01 77 75 65 90 www.useradgents.com Merci !
  81. 81. LES CONFERENCES #1 - Le parcours client du voyageur, tendances & opportunités
 Romain Mouchet (Directeur Département Tourisme & Transport – Google France)
 #2 - Mobile First ?
 Vincent Pillet (Directeur Associé - UserADgents) & Asma Moumni (Responsable UX – UserADgents)
 #3 - Les Progressives Web Apps
 Virginie Clève (Experte en Stratégie Numérique – Largow) #4 - Recherche vocale et expérience utilisateur
 Olivier Andrieu (Consultant SEO – Abondance)
 #5 - La recommandation personnalisée, nouveau levier de croissance ? François Ziserman (CEO – Target2Sell)
 #6 - Chatbots, révolution ou arnaque ? Thomas Gouritin (Consultant en Communication Digitale – Tomg Conseils) #7 - Comment la Blockchain pourrait redéfinir l'industrie du voyage ? Une journée organisée par

×