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

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

Transcript

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. 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. 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. De plus en plus d’applications ouvrent leur contenus dans un navigateur embarqué Contenu web consommé dans les applications
5. Le site mobile dédié Et les pièges à éviter
6. Une URL différente par version Site mobile dédié http://mobile.lemonde.fr http://www.lemonde.fr
7. Adaptation « sur mesure » du design et de l’expérience (menus, fonctionnalités, etc.) Optimisation 100% mobile sur-mesure
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. • 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. Le responsive retrofitting Ou comment faire renter 1500L dans sa baignoire.
11. Un exemple de retrofitting d’un site dont le design « dekstop » date de 2009 Adaptation en surface
13. 60% des utilisateurs mobiles repartent après 4 secondes d’attente Le gros reproche : la performance
14. • 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
15. Le mobile first Avec des morceaux d’adaptive dedans, Poupée Russe via Shutterstock
16. On repart de zéro et on refond tout le site avec une approche Mobile First
17. On part du plus petit dénominateur commun et on enrichit l’interface au fur et à mesure. Exemple de décisions mobile first
18. 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
19. • 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
20. 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
21. Bien planifier son adaptation en amont Pour éviter les problèmes en aval
22. tK 22 Karen McGran
23. Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture Planifier l’architecture d’information en amont
24. 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
25. Communiquer les objectifs • Spécifier les objectifs – de performances – de compatibilité • Planifier les phases d’attente
26. 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
27. Les plus gros soucis du mobile sont des soucis de communication À retenir
28. Adapter l’expérience au média Les contraintes de la mobilité
29. Optimiser l’espace en fonction du contenu (et non des appareils !)
30. Repenser l’interface au touch pour les petits écrans Repenser certains éléments au survol
31. 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
32. Une problématique du touch qui va au-delà du mobile
33. Taille des boutons + Feedback utilisateur :active Optimisation visuelle des éléments cliquables
34. Testez les interactions le plus tôt possible sur de VRAIS appareils À retenir
35. Accélérer son site pour les mobiles Parce que la performance ça compte
36. 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
37. 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,
38. On mesure le temps de chargement du moteur de recherche Mesurer, surveiller, rapporter
39. Charger tardivement Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
40. 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
41. 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à
42. À retenir Se fixer des objectifs de performance et s’y tenir
43. Utiliser les capacités de l’appareil Ces petites opportunités qui feront la différence
44. Proposer des actions au swipe, pinch, etc. pour améliorer l’expérience Profiter des interactions au touch
45. <a href=“tel : 03 88 23 02 71”> Composer le numéro en un clic
46. Inputs HTML5, scanner de carte de crédit sur iOS, simplifier l’expérience grâce aux capacités Les formulaires sur mobile
47. Pensez à un fallback (si l’utilisateur refuse, en cas de soucis de GPS, etc.) La Géolocalisation
48. Appareil photo, microphone, possibilité d’un chat dans le navigateur en WebRTC + getUserMedia Accès au matériel multimédia
49. Gestion de la déconnexion pour les applications en Web — Super cache pour les sites de consultation Offline
50. Grâce à HTML5 (Service Workers + Notification API + Services Push) Arrivée des notifications et du push
51. Disponible sur iOS, Android et Windows. Pour les générer : realfavicongenerator.net (fav)icône de lancement sur l’accueil
52. Changer la couleur de la barre du site (Android), lancer en plein écran et plus encore … Personnalisation et plein écran
53. À vous de jouer ! C’est que le début (d’accord d’accord)
54. braincracking.org Jean-Pierre VINCENT @WalterStephanie @theystolemynick inpixelitrust.fr Shared under CC- BY-NC-SA licence