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.

UX, UI sur Mobile, moteur de l'engagement client!

1,212 views

Published on

Soirée lafrenchmobile - UX, UI sur Mobile, moteur de l'engagement client!

#lafrenchmobile!4!#UX!#UI!

UX, UI sur Mobile, moteur de l'engagement client!

  1. 1. 24 Mars 2015 - @lafrenchmobile Supporters La première communauté française dans l'écosystème mobile créé en 2010 400 membres : Freelance, Développeurs, Agence Mobile, Opérateurs, Constructeurs, SSII… Lafrenchmobile intervient dans de nombreux domaines, formation, démarrer des plates-formes, trouver des talents… www.lafrenchmobile.com
  2. 2. UX, UI sur Mobile, moteur de l'engagement client! HTAG!:!#lafrenchmobile!4!#UX!#UI! !"1" Les tendances de l'UX par Remy Bourganel" !"2"Ux republic " !"3"l’UX, différenciateur clef By Tapptic" !"4"En finir avec les applications lentes ! Comment améliorer la performance de vos apps By screenage" !"5"L'experience de recherche, facteur clé de l'engagement utilisateur sur mobile By Algolia" 24 Mars 2015 - @lafrenchmobile Supporters
  3. 3. Toward the internet of uses 24.03.2015
  4. 4. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 • Digital services are now in their very nature in constant transformation. • AI/machine learning is being democratised, services can effectively learn from: > Your behaviours > Context > Many other sources of aggregated data > Broader context, as a system (like a city) A new era
  5. 5. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Diachronic vs synchronic Muji vs… Aether music player, evovle/learn from context (place/time) Services involving programmable matter are diachronic. They reveal and evolve over time. The design becomes conversational with user. Design principles are grounding the ethics. Design principles help bridging evolving experiences. Design principles frame the big picture.
  6. 6. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Context is king Context: People/Time (before, during, after)/Place Minkowski’s space-time: light cone and hyper surface of the present. As an analogy for: Future and past having more value than a thin now Minkoski’s model
  7. 7. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 > Sense: the experience of perceiving what’s going on, in real time, as from data collected from sensors, or from haptics feedback. > Reflect: the experience of stepping-back, putting into perspective from patterns contemplation. > Do: the experience of enhanced/coached action or decision-making from data analytics, machine-learning, recommendation and behavioural change algorythms. Data as core material: 3 experience spaces converging
  8. 8. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Making the invisible visible, sense The ‘nuage vert’ Helsinki 2009 3 experience spaces converging
  9. 9. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Making the invisible visible, reflect Dopplr traveler footprint 2009 3 experience spaces converging
  10. 10. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Making the invisible visible, reflect 3D footprint Time spent by location C. Ramus, Orange, 2012 3 experience spaces converging
  11. 11. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Making the invisible visible, reflect through time 5.39 Taxi traffic in Lisbon Line thickness: density, green: high speed, red: slow speed 2009 3 experience spaces converging
  12. 12. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Making the invisible visible, reflect through time 10.17 Taxi traffic in Lisbon Line thickness: density, green: high speed, red: slow speed 2009 3 experience spaces converging
  13. 13. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Making the invisible visible, reflect through time 19.33 Taxi traffic in Lisbon Line thickness: density, green: high speed, red: slow speed 2009 3 experience spaces converging
  14. 14. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Do Taxi traffic About 10 mn for a taxi Book now? 3 experience spaces converging
  15. 15. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 Do Taxi traffic About 10 mn for a taxi At this time, it’s usually 30 mn. Book now? 3 experience spaces converging
  16. 16. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 From this capability to collect, analyse and report the big data: • The GAFA is to offer personalisation through the learning of your behaviours • But it might lead to a dead end. Imagine a ‘Google now’ like service for tourism. Google learning all from your behaviours could automatically create a tour for you as you arrive in, say, NYC. Problem is that you came to NYC 10 times. And you need editorial content, at the junction of Google now’s knowledge and Guide du Routard… Personalisation vs editorialisation
  17. 17. Remy Bourganel | Tendances UX | meetup | laFrenchMobile | © 2015 • Match-making between your profile and content offerings has a long future and is desirable because: > Of our need to belonging to a community > Our need to be inspired > Of cultural diversity Welcome to the era of the internet of uses! Match-making content/behaviours & needs
  18. 18. UX - UI Moteur de l’engagement client @Tapptic A L E X A N D R E D E S A E D E L E E R M X M a n a g e r m x @ t a p p t i c . c o m
  19. 19. Chiffres clés 2,5 millions d’app
  20. 20. UX - UI Pensez UX ! Une app mobile est une expérience vécue nulle part ailleurs… 1er contact Contexte 98% Wireframes Utilisateur ! Moments mobiles Habitudes Cohérence Références Conception Design Test Process mobile
  21. 21. UX - UI Moteur de l’engagement client A L E X A N D R E D E S A E D E L E E R M X M a n a g e r m x @ t a p p t i c . c o m @Tapptic
  22. 22. Olivier Milcent - Fondateur @omilcent
  23. 23. Screen Age - 2015 2 Screen Age INGÉNIERIE | CONSEIL | FORMATION Nous sommes experts de 
 la performance d’affichage. 
 Nous aidons les éditeurs à rendre leur applications plus rapides.
  24. 24. Screen Age - 2015 3 0,1 s —› 1% de revenus
  25. 25. Screen Age - 2015 4 
 20% de temps gagné —› +25% de PVs
 +12% conversions

  26. 26. Screen Age - 2015 5 2,2s gagnée —› +15% de conversions
  27. 27. Screen Age - 2015 6 LE POTENTIEL DE REVENUS L’USAGE LA CONFIANCE DANS LA MARQUE Une application lente impacte…
  28. 28. Screen Age - 2015 7 Pourquoi une application est-elle lente ? Code natif Politique de chargement, prefetch insuffisant, scrolling sacaddé, GPU/CPU désynchronisé, gestion de la mémoire… 2 Code hybride / HTML3 Manque d’optimisation des images, structure des données, caching des users-agents, CSS, JS… Qualité de l’hébergement4 Utilisation de CDN, caching et fragments, scalabilité, tests de charges… Surchage d’images, non-respect des guidelines, animations mal pensées, peu de réflexion sur la “performance ressentie”… UX Design1
  29. 29. Screen Age - 2015 8 Penser performance-first Performance coding Performance testing Performance monitoring Performance design
  30. 30. Screen Age - 2015 9 Penser performance-first Performance design Performance coding Performance testing Performance monitoring ๏ Priorités fonctionnelles ๏ Design en séquences (flows) ๏ Prototyper et itérer avec les développeurs ๏ Définir les indicateurs de performances ๏ Design patterns de “performance ressentie”
  31. 31. Screen Age - 2015 10 Penser performance-first Performance design Performance coding Performance testing Performance monitoring ๏ Coder, tester et valider séquence après séquence ๏ Préférer le code natif ! ๏ Utiliser des composants hybrides privilégiant la performance (parser HTML natif, AngularJS, Ionic) ๏ Optimiser les images (incluant le format Retina) ๏ Caching, DNS prefetch, des dizaines d’autres best practices à utiliser
  32. 32. Screen Age - 2015 11 Penser performance-first Performance design Performance coding Performance testing Performance monitoring ๏ Mesurer via des indicateurs stables ๏ Utilisation d’outils spéficiques de debug ๏ Outil d’analyse de temps de réponses HTML/API ๏ Outil de simulation de réseau ๏ Tests de montée en charge ๏ Tests sur terminaux réels
  33. 33. Screen Age - 2015 12 Penser performance-first Performance design Performance coding Performance testing Performance monitoring ๏ Monitoring des API ๏ Alertes de bugs et de crash en temps réels ๏ Analyse par type de réseau, de device et de region ๏ Monitoring de non-regression lors des updates
  34. 34. On recherche des talents !
 (si vous êtes client, ça m’intéresse aussi) omilcent@screenage.fr @omilcent

×