Stratégies d’adaptation mobile
Ergonomie, UX & performance
en milieu périlleux
Stéphanie Walter — Jean-Pierre Vincent
Photo Michael Sohn/AP / NBC News
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
De plus en plus d’applications ouvrent leur contenus dans un navigateur embarqué
Contenu web consommé dans les applications
Slide 5
Slide 5 text
Le site mobile dédié
Et les pièges à éviter
Slide 6
Slide 6 text
Une URL différente par version
Site mobile dédié
http://mobile.lemonde.fr
http://www.lemonde.fr
Slide 7
Slide 7 text
Adaptation « sur mesure » du design et de l’expérience (menus, fonctionnalités, etc.)
Optimisation 100% mobile sur-mesure
Slide 8
Slide 8 text
Deux bases de code, deux équipes, deux expériences : pas de liste d’envies sur desktop
Attention à la continuité de l’expérience
Slide 9
Slide 9 text
• Rapidité de développement
• Cohabitation site « classique »
• Optimisation 100% sur-mesure
• Maintenance complexe
• Que faire des tablettes ?
• Contenus manquant
Le site mobile dédié
Slide 10
Slide 10 text
Le responsive retrofitting
Ou comment faire renter 1500L dans sa baignoire.
Slide 11
Slide 11 text
Un exemple de retrofitting d’un site dont le design « dekstop » date de 2009
Adaptation en surface
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
60% des utilisateurs mobiles repartent après 4 secondes d’attente
Le gros reproche : la performance
Slide 14
Slide 14 text
• 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
Slide 15
Slide 15 text
Le mobile first
Avec des morceaux d’adaptive dedans,
Poupée Russe via Shutterstock
Slide 16
Slide 16 text
On repart de zéro et on refond tout le site avec une approche Mobile First
Slide 17
Slide 17 text
On part du plus petit dénominateur commun et on enrichit l’interface au fur et à mesure.
Exemple de décisions mobile first
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
• 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
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
Bien planifier son adaptation en
amont
Pour éviter les problèmes en aval
Slide 22
Slide 22 text
tK
22 Karen McGran
Slide 23
Slide 23 text
Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture
Planifier l’architecture d’information en amont
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Communiquer les objectifs
• Spécifier les objectifs
– de performances
– de compatibilité
• Planifier les phases d’attente
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
Les plus gros soucis du mobile sont
des soucis de communication
À retenir
Slide 28
Slide 28 text
Adapter l’expérience au média
Les contraintes de la mobilité
Slide 29
Slide 29 text
Optimiser l’espace en fonction du contenu (et non des appareils !)
Slide 30
Slide 30 text
Repenser l’interface au touch pour les petits écrans
Repenser certains éléments au survol
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Une problématique du touch qui va au-delà du mobile
Slide 33
Slide 33 text
Taille des boutons + Feedback utilisateur :active
Optimisation visuelle des éléments cliquables
Slide 34
Slide 34 text
Testez les interactions le plus tôt possible
sur de VRAIS appareils
À retenir
Slide 35
Slide 35 text
Accélérer son site pour les mobiles
Parce que la performance ça compte
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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,
Slide 38
Slide 38 text
On mesure le temps de chargement du moteur de recherche
Mesurer, surveiller, rapporter
Slide 39
Slide 39 text
Charger tardivement
Même avec plusieurs dizaines d’images, le premier chargement n’est pas ralenti
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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à
Slide 42
Slide 42 text
À retenir
Se fixer des objectifs de
performance et s’y tenir
Slide 43
Slide 43 text
Utiliser les capacités de l’appareil
Ces petites opportunités qui feront la différence
Slide 44
Slide 44 text
Proposer des actions au swipe, pinch, etc. pour améliorer l’expérience
Profiter des interactions au touch