Slide 1

Slide 1 text

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

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Inputs HTML5, scanner de carte de crédit sur iOS, simplifier l’expérience grâce aux capacités Les formulaires sur mobile

Slide 47

Slide 47 text

Pensez à un fallback (si l’utilisateur refuse, en cas de soucis de GPS, etc.) La Géolocalisation

Slide 48

Slide 48 text

Appareil photo, microphone, possibilité d’un chat dans le navigateur en WebRTC + getUserMedia Accès au matériel multimédia

Slide 49

Slide 49 text

Gestion de la déconnexion pour les applications en Web — Super cache pour les sites de consultation Offline

Slide 50

Slide 50 text

Grâce à HTML5 (Service Workers + Notification API + Services Push) Arrivée des notifications et du push

Slide 51

Slide 51 text

Disponible sur iOS, Android et Windows. Pour les générer : realfavicongenerator.net (fav)icône de lancement sur l’accueil

Slide 52

Slide 52 text

Changer la couleur de la barre du site (Android), lancer en plein écran et plus encore … Personnalisation et plein écran

Slide 53

Slide 53 text

À vous de jouer ! C’est que le début (d’accord d’accord)

Slide 54

Slide 54 text

braincracking.org Jean-Pierre VINCENT @WalterStephanie @theystolemynick inpixelitrust.fr Shared under CC- BY-NC-SA licence