4. Concevoir en “mobile first”

Si on commence par concevoir la version desktop, le contenu devra ensuite être adapté en “responsive” sur un téléphone mobile, ce qui consistera à faire rentrer tout le contenu dans un petit écran. L’expérience sera détériorée et l’impact environnemental accru par le chargement de contenu inutile.

L’approche “Mobile first” qui consiste à concevoir d’abord pour une version mobile, permet d’aller à l’essentiel et de réduire les fonctionnalités et contenus qui seraient superflus. De cette manière, on s’assure aussi que notre service fonctionnera correctement sur les appareils mobiles. Bien entendu, il ne s’agit pas non plus de délaisser la version desktop.

Cette approche dite «mobile first» doit être pensée pour des terminaux mobiles peu puissants et avec une connexion réseau non optimale (3G plutôt que 4G par exemple). Ces contraintes techniques obligeront les concepteurs à se concentrer sur l’essentiel et à produire un service numérique sobre et peu impactant.

Livre blanc GreenConcept, 2020

Les questions à se poser

  • Qu’est-ce qui est essentiel ?
  • Quel est le minimum de technologie nécessaire pour résoudre le problème ?
  • Est-ce que ça fonctionne sur mobile et desktop ?
  • Est-ce que la taille des boutons et champs est adaptée au mobile ?

Exemple de conception “mobile first”

Unité fonctionnelle : Faire une simulation de droits

Pour un service de simulation par exemple, on peut être tenté de demander de nombreuses informations ce qui ralentit le parcours, peut décourager les utilisateurs car ils n’ont pas toutes les informations sous la main, etc.

L’approche “mobile first” illustrée sur cette maquette (exemple fictif) permet d’aller à l’essentiel des informations nécessaires pour un premier niveau. On peut fournir une option avancée également si l’utilisateur veut aller plus loin.

De cette façon on fournit un service accessible sur mobile, et une expérience simple et fluide.

Wireframe mobile avec 3 champs à remplir et un bouton “Simuler”

Sauf mention contraire, les contenus de ce site sont mis à disposition selon les termes de la licence Creative Commons Attribution 4.0 International.

Venez échanger avec nous sur http://slack.designersethiques.org, canal #projet_ecoconception.

Autrices du guide : Aurélie Baton et Anne Faubry.