Stratégies d’adaptation mobile 

Ergonomie, UX & performance en milieu périlleux

Stéphanie Walter — Jean-Pierre Vincent

Photo Michael Sohn/AP / NBC News

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

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

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érience

• Rapidité de développement

• Cohabitation site « classique »

• Optimisation 100% sur-mesure

• Maintenance complexe

• Que faire des tablettes ?

• Contenus manquant

Le site mobile dédié

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étique de surface

sans réelle prise en compte de tous

les enjeux mobile

Le site responsive

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’article

• 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

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

Bien planifier son adaptation en amont

Pour éviter les problèmes en aval

tK

22Karen McGrane

Profiter d’une refonte responsive pour revoir les priorités et simplifier l’architecture

Planifier l’architecture d’information en amont

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

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.

Prévoir un inventaire d’interface

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 action survol / clic

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 SERP

Image Tax Credits

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,

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 contenu

Apprendre à lire entre les lignes ? 6 secondes : enfin de quoi lire

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à

À 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