Grande tendance 2016 – 100% mobile first

“Il y a une logique simple : quoi que vous fassiez, occupez-vous d’abord des mobiles”                             
Eric Schmidt

mobile2
Le mobile first a le vent en poupe. En témoigne la stratégie d’évangélisation du New York times : Bloquer en interne durant 24 heures l’accès au site www.nytimes.com pour forcer ses collaborateurs à découvrir le site via leur mobile.

C’est quoi le mobile first ?

Le mobile first consiste à concevoir un site web sur mobile. Les interfaces seront ensuite adaptées sur desktop. L’écran d’un mobile est beaucoup plus petit (80% d’espace en moins). Le mobile first permet d’épurer le site et de focaliser le produit sur ses principales fonctionnalités. Cela améliore l’expérience utilisateur et l’objectif du produit, en terme de performance ou de notoriété.
Les technologies mobiles peuvent être utilisées pour améliorer le service à l’utilisateur. Quelques exemples des possibilités des mobiles :

  • Accéléromètre pour mesurer les mouvements de l’appareil et afficher des données de réalité augmentée
  • Géolocalisation (GPS, Wi-Fi, triangulation, une antenne relais, IP)
  • Double caméra : avant et arrière
  • Connexion d’appareil via bluetooth
  • Proximité de l’appareil avec des objets physiques
  • Lumière ambiante : réactivité à la lumière de l’environnement
  • NFC, RFID
  • Giroscope : mouvement à 360°
  • Audio : entrée pour microphone, sortie pour haut-parleur
  • Vidéo et image : capture et entrée cinéma
Les gestes mobiles

Les mobiles permettent des gestuelles variées pour offrir des services annexes :

  • Tap
  • Double tap
  • Drag (glissementt)
  • Swipe (balayement rapide)
  • Pinch (resserrement)
  • Spread (écartement)
  • Pression maintenue
  • Press and drag (pression maintenue d’un doigt et drag de l’autre)
  • Plusieurs variations de rotation

Voir le guide des gestes mobiles 

Quand utiliser le mobile first ?

Cela dépend du projet. Si la majorité de la cible utilise le service via desktop, il peut être judicieux de concevoir des écrans d’une résolution minimum de 1024 pixels. Mais soyons réaliste. Les tailles d’écrans des devices sont de plus en plus hétéroclites et l’usage du mobile en France connaît une croissance fulgurante depuis 2009. Il est donc sage de penser un produit dans un environnement étroit, avec le maximum de contraintes possibles, avant de le décliner sur desktop.

Qui utilise Internet via son mobile?

mobile
En 2015, le taux d’utilisation d’Internet à l’échelle mondiale est d’environ :

  • 60% via ordinateur (75% en France)
  • 30% via smartphone (15% en France)
  • 10% via tablette (10% en France)

L’accès à Internet via les smartphones a doublé en l’espace d’un an, en France et dans le monde. La proportion d’utilisation desktop/mobile devrait s’inverser dès 2016. Le Nigeria, l’Inde, l’Afrique du Sud, l’Indonésie, les Emirats-Arabes Unis, l’Arabie Saoudite, la Pologne, la Malaisie, Singapour et le Mexique figurent au top du palmarès de l’utilisation du web via mobile. Ce sont dans l’ensemble des pays qui n’ont jamais été équipés en ordinateur.

Quel est le comportement des mobile users?

D’après Luke Wroblewski, l’utilisation d’un smartphone permet de tuer le temps, de suivre les alertes d’une application, d’obtenir un renseignement local. Les français utilisent en moyenne Internet sur leur téléphone 1H20 par jour. Ils accèdent principalement aux services suivants : réseaux sociaux, vidéos, jeux vidéos, géolocalisation et banque en ligne.
Etrangement, l’e-commerce ne figure pas parmi l’activité préférée des français. En France, en 2015, seule 1 personne sur 10 utilise de manière régulière le m-commerce (shopping via mobile). En Corée du sud, en Chine, aux Emirats-Arabes unis, à Singapour et à Hong Kong, au moins 3 personnes sur 10 effectuent des achats via leur mobile.

Quelques conseils pour optimiser l’expérience utilisateur sur mobile
  • Content first : Afficher directement le contenu (page de landing page intermédiaire)
  • design simplicity : Hiérarchiser les informations pour faciliter l’accès au contenu et éviter de chercher à tout faire “rentrer” dans la version mobile.
  • UX centered : Penser l’environnement d’utilisation (bus, matin, etc.)
  • Call-to-action : optimiser l’emplacement des boutons d’action et aggrandir les visuels e-commerce (+ 9% de conversion)
  • Footer : Insérer une zone pour approfondir et une zone pour rebondir vers le menu ou le haut de page.
  • Le bouton retour : Peut parfois être remplacé par le bouton retour du device
  • Taille minimum des boutons : 44 x 44 px (doubler pour rétina)
  • Taille minimum de la police : 14pt (doubler pour rétina)
  • Réduire les visuels qui ne sont pas du contenu

 
Sources

  • Mobile First. N°6 Broché – 19 janvier 2012 de Luke Wroblewski, éditions Eyrolles
  • Digital, Social & Mobile in 2015 816,038 We Are Social Singapore We Are Social Singapore (source : StatCounter)
  • http://whitepaperit.com/mobile-uiux-development.html

 
Marina Wiesel – UX Designer @UXRepublic
En bonus, 2 formations pour devenir un pro du design mobile :
Comprendre le monde mobile
Design tactile