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.

Stratégies d’adaptation mobile : ergonomie, UX et performance en milieu périlleux

805 views

Published on

L’adaptation de sites au mobile est un mix subtil entre ergonomie, gestion des contenus et performances. Vos utilisateurs sont ultra connectés et leurs exigences élevées : mobile, tablette, grand écran… votre mission si vous l'acceptez est de leur proposer vos contenus, quelles que soient les capacités des terminaux et même de tirer parti des nouvelles possibilités pour améliorer l’UX !
http://www.blendwebmix.com/programme/strategies-d-adaptation-mobile-ergonomie-ux-et-performance-en-milieu-perilleux.html

Published in: Design
  • Be the first to comment

Stratégies d’adaptation mobile : ergonomie, UX et performance en milieu périlleux

  1. 1. Stratégies d’adaptation mobile  Ergonomie, UX & performance en milieu périlleux Stéphanie Walter — Jean-Pierre Vincent Photo Michael Sohn/AP / NBC News
  2. 2. Designer web et mobile, spécialisée en interface et expérience utilisateurs Freelance // Alsacréations braincracking.org Architecte Web, 
 Accélérateur de Web Jean-Pierre VINCENT @WalterStephanie @theystolemynick inpixelitrust.fr
  3. 3. Il y a aujourd’hui presque 3 milliards d’abonnement internet sur mobile dans le monde Des utilisateurs de plus en plus mobile only Image michael davis-burchat
  4. 4. De plus en plus d’applications ouvrent leur contenus dans un navigateur embarqué Contenu web consommé dans les applications
  5. 5. Le site mobile dédié Et les pièges à éviter
  6. 6. Une URL différente par version Site mobile dédié http://mobile.lemonde.fr http://www.lemonde.fr
  7. 7. Adaptation « sur mesure » du design et de l’expérience (menus, fonctionnalités, etc.) Optimisation 100% mobile sur-mesure
  8. 8. Deux bases de code, deux équipes, deux expériences : pas de liste d’envies sur desktop Attention à la continuité de l’expérience
  9. 9. • Rapidité de développement • Cohabitation site « classique » • Optimisation 100% sur-mesure • Maintenance complexe • Que faire des tablettes ? • Contenus manquant Le site mobile dédié
  10. 10. Le responsive retrofitting Ou comment faire renter 1500L dans sa baignoire.
  11. 11. Un exemple de retrofitting d’un site dont le design « dekstop » date de 2009 Adaptation en surface
  12. 12. 60% des utilisateurs mobiles repartent après 4 secondes d’attente Le gros reproche : la performance
  13. 13. • Site unique (à coder, designer, recette) • Adaptation sans refonte à partir de l’existant possible Optimisation cosmétique de surface sans réelle prise en compte de tous les enjeux mobile Le site responsive
  14. 14. Le mobile first Avec des morceaux d’adaptive dedans, Poupée Russe via Shutterstock
  15. 15. On repart de zéro et on refond tout le site avec une approche Mobile First
  16. 16. On part du plus petit dénominateur commun et on enrichit l’interface au fur et à mesure. Exemple de décisions mobile first
  17. 17. Les choix du guardian : la publicité La publicité sur mobile est exécutée tardivement et n’est visible qu’au milieu de l’article
  18. 18. • Site unique pour une stratégie multi support • Attention portée sur l’ergonomie et à la performance • Prise en compte des capacités des appareils • Nécessite souvent une refonte globale (coûteux) • Plus complexe techniquement • Demande un changement de mentalités Le mobile first
  19. 19. Planter l’idée d’une stratégie mobile à plus long terme Les bases d’une réflexion mobile Image par Brad Frost Image Brad Frost
  20. 20. Bien planifier son adaptation en amont Pour éviter les problèmes en aval
  21. 21. tK 22 Karen McGran
  22. 22. Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture Planifier l’architecture d’information en amont
  23. 23. Trouver des alternatives et planifier les écrans d’attente, optimiser le code en fin de projet Planifier les attentes en amont Sur la maquette : une vraie mise en avant En vrai, pendant 8 secondes
  24. 24. Communiquer les objectifs • Spécifier les objectifs – de performances – de compatibilité • Planifier les phases d’attente
  25. 25. Identification des éléments qui vont poser des soucis en mobile pour mettre l’accent dessus : tableaux, onglets, maps, etc. Prévoir un inventaire d’interface
  26. 26. Les plus gros soucis du mobile sont des soucis de communication À retenir
  27. 27. Adapter l’expérience au média Les contraintes de la mobilité
  28. 28. Optimiser l’espace en fonction du contenu (et non des appareils !)
  29. 29. Repenser l’interface au touch pour les petits écrans Repenser certains éléments au survol
  30. 30. Le survol est émulé sur mobile en un premier touch, il faut donc deux touch pour accéder au lien Le problème de la double action survol / clic
  31. 31. Une problématique du touch qui va au-delà du mobile
  32. 32. Taille des boutons + Feedback utilisateur :active Optimisation visuelle des éléments cliquables
  33. 33. Testez les interactions le plus tôt possible sur de VRAIS appareils À retenir
  34. 34. Accélérer son site pour les mobiles Parce que la performance ça compte
  35. 35. Combien coûte le temps ? • Google – Critère de référencement – Influence le taux de crawl – Influence la position dans les SERP Image Tax Credits
  36. 36. Constater et montrer ! Dareboost pour les débutants, WebpageTest.org pour les autres, Google PageSpeed Insights Configuration du viewport et du User-Agent , 100-150 ms de latence, 4 Mb/s de débit,
  37. 37. On mesure le temps de chargement du moteur de recherche Mesurer, surveiller, rapporter
  38. 38. Charger tardivement Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
  39. 39. Rester raisonnable avec les polices La police fait partie de l’identité d’une marque mais ne devrait pas bloquer le contenu Apprendre à lire entre les lignes ? 6 secondes : enfin de quoi lire
  40. 40. Polices asynchrones Aller à l’essentiel et être capable de se passer (temporairement) de polices, d’images, de JS … 1s : je peux lire mon texte 2,5s : Police et image sont là
  41. 41. À retenir Se fixer des objectifs de performance et s’y tenir
  42. 42. Utiliser les capacités de l’appareil Ces petites opportunités qui feront la différence
  43. 43. Proposer des actions au swipe, pinch, etc. pour améliorer l’expérience Profiter des interactions au touch
  44. 44. <a href=“tel : 03 88 23 02 71”> Composer le numéro en un clic
  45. 45. Inputs HTML5, scanner de carte de crédit sur iOS, simplifier l’expérience grâce aux capacités Les formulaires sur mobile
  46. 46. Pensez à un fallback (si l’utilisateur refuse, en cas de soucis de GPS, etc.) La Géolocalisation
  47. 47. Appareil photo, microphone, possibilité d’un chat dans le navigateur en WebRTC + getUserMedia Accès au matériel multimédia
  48. 48. Gestion de la déconnexion pour les applications en Web — Super cache pour les sites de consultation Offline
  49. 49. Grâce à HTML5 (Service Workers + Notification API + Services Push) Arrivée des notifications et du push
  50. 50. Disponible sur iOS, Android et Windows. Pour les générer : realfavicongenerator.net (fav)icône de lancement sur l’accueil
  51. 51. Changer la couleur de la barre du site (Android), lancer en plein écran et plus encore … Personnalisation et plein écran
  52. 52. À vous de jouer ! C’est que le début (d’accord d’accord)
  53. 53. braincracking.org Jean-Pierre VINCENT @WalterStephanie @theystolemynick inpixelitrust.fr Shared under CC- BY-NC-SA licence

×