Stratégies d’adaptation mobile 
Ergonomie, UX & performance
en milieu périlleux
Stéphanie Walter — Jean-Pierre Vincent
Pho...
Designer web et mobile,
spécialisée en interface et
expérience utilisateurs
Freelance // Alsacréations
braincracking.org
A...
Il y a aujourd’hui presque 3 milliards d’abonnement internet sur mobile dans le monde
Des utilisateurs de plus en plus mob...
De plus en plus d’applications ouvrent leur contenus dans un navigateur embarqué
Contenu web consommé dans les applications
Le site mobile dédié
Et les pièges à éviter
Une URL différente par version
Site mobile dédié
http://mobile.lemonde.fr
http://www.lemonde.fr
Adaptation « sur mesure » du design et de l’expérience (menus, fonctionnalités, etc.)
Optimisation 100% mobile sur-mesure
Deux bases de code, deux équipes, deux expériences : pas de liste d’envies sur desktop
Attention à la continuité de l’expé...
• Rapidité de développement
• Cohabitation site « classique »
• Optimisation 100% sur-mesure
• Maintenance complexe
• Que ...
Le responsive retrofitting
Ou comment faire renter 1500L dans sa baignoire.
Un exemple de retrofitting d’un site dont le design « dekstop » date de 2009
Adaptation en surface
60% des utilisateurs mobiles repartent après 4 secondes d’attente
Le gros reproche : la performance
• Site unique (à coder,
designer, recette)
• Adaptation sans refonte à
partir de l’existant possible
Optimisation cosmétiq...
Le mobile first
Avec des morceaux d’adaptive dedans,
Poupée Russe via Shutterstock
On repart de zéro et on refond tout le site avec une approche Mobile First
On part du plus petit dénominateur commun et on enrichit l’interface au fur et à mesure.
Exemple de décisions mobile first
Les choix du guardian : la publicité
La publicité sur mobile est exécutée tardivement et n’est visible qu’au milieu de l’a...
• Site unique pour une stratégie multi
support
• Attention portée sur l’ergonomie et
à la performance
• Prise en compte de...
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 F...
Bien planifier son adaptation en
amont
Pour éviter les problèmes en aval
tK
22
Karen McGran
Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture
Planifier l’architecture d’inform...
Trouver des alternatives et planifier les écrans d’attente, optimiser le code en fin de projet
Planifier les attentes en a...
Communiquer les objectifs
• Spécifier les objectifs
– de performances
– de compatibilité
• Planifier les phases d’attente
Identification des éléments qui vont poser des soucis en mobile pour mettre l’accent dessus : tableaux, onglets, maps, etc...
Les plus gros soucis du mobile sont
des soucis de communication
À retenir
Adapter l’expérience au média
Les contraintes de la mobilité
Optimiser l’espace en fonction du contenu (et non des appareils !)
Repenser l’interface au touch pour les petits écrans
Repenser certains éléments au survol
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 ...
Une problématique du touch qui va au-delà du mobile
Taille des boutons + Feedback utilisateur :active
Optimisation visuelle des éléments cliquables
Testez les interactions le plus tôt possible
sur de VRAIS appareils
À retenir
Accélérer son site pour les mobiles
Parce que la performance ça compte
Combien coûte le temps ?
• Google
– Critère de référencement
– Influence le taux de crawl
– Influence la position dans les...
Constater et montrer !
Dareboost pour les débutants, WebpageTest.org pour les autres, Google PageSpeed Insights
Configurat...
On mesure le temps de chargement du moteur de recherche
Mesurer, surveiller, rapporter
Charger tardivement
Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
Rester raisonnable avec les polices
La police fait partie de l’identité d’une marque mais ne devrait pas bloquer le conten...
Polices asynchrones
Aller à l’essentiel et être capable de se passer (temporairement) de polices, d’images, de JS …
1s : j...
À retenir
Se fixer des objectifs de
performance et s’y tenir
Utiliser les capacités de l’appareil
Ces petites opportunités qui feront la différence
Proposer des actions au swipe, pinch, etc. pour améliorer l’expérience
Profiter des interactions au touch
<a href=“tel : 03 88 23 02 71”>
Composer le numéro en un clic
Inputs HTML5, scanner de carte de crédit sur iOS, simplifier l’expérience grâce aux capacités
Les formulaires sur mobile
Pensez à un fallback (si l’utilisateur refuse, en cas de soucis de GPS, etc.)
La Géolocalisation
Appareil photo, microphone, possibilité d’un chat dans le navigateur en WebRTC + getUserMedia
Accès au matériel multimédia
Gestion de la déconnexion pour les applications en Web — Super cache pour les sites de consultation
Offline
Grâce à HTML5 (Service Workers + Notification API + Services Push)
Arrivée des notifications et du push
Disponible sur iOS, Android et Windows. Pour les générer : realfavicongenerator.net
(fav)icône de lancement sur l’accueil
Changer la couleur de la barre du site (Android), lancer en plein écran et plus encore …
Personnalisation et plein écran
À vous de jouer !
C’est que le début (d’accord d’accord)
braincracking.org
Jean-Pierre VINCENT
@WalterStephanie
@theystolemynick
inpixelitrust.fr
Shared under CC- BY-NC-SA licence
Stratégies d’adaptation mobile : ergonomie, UX et performance en milieu périlleux
Prochain SlideShare
Chargement dans…5
×

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

546 vues

Publié le

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

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
546
Sur SlideShare
0
Issues des intégrations
0
Intégrations
20
Actions
Partages
0
Téléchargements
21
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×