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