Dans le chapitre précédent, vous avez vu comment se centrer autour de l’utilisateur. Nous allons voir maintenant comment prendre le mobile en considération.

Le “mobile” désigne tout autant le smartphone que la tablette.

En France, la publicité nous incite à utiliser le mot “mobile” pour parler du téléphone portable. Or le mobile désigne plus largement ce qui est portable, ce que l’on emmène avec nous.

Sachez que c’est surtout l’utilisateur qui est mobile

Avant de concevoir un produit, vous devez comprendre une chose : votre utilisateur est avant tout mobile.

Qu’est-ce que ça veut dire ? C’est l’utilisateur qui est mobile, et non son téléphone ?

En clair, lorsque l’on parle du “mobile”, cela ne désigne pas seulement le fait que les utilisateurs utilisent des appareils qui sont mobiles, mais c’est aussi parce que les usages et les comportements ont changé : on est dans l’ère de la mobilité, on est connecté à Internet partout…

“On ne va pas sur Internet. On est dans Internet” – Joël de Rosnay, futurologue français.

C’est donc l’utilisateur qui est mobile. Il :

• se déplace en utilisant son smartphone : il marche, prend les transports…
• cherche en permanence à avoir un bon réseau, et suffisamment de batterie 
• communique et capture le réel en instantané : mail, messagerie, mais aussi via la photo voire la réalité augmentée
• commence à préférer les images, émojis et autres, plutôt que le texte parce que cela va plus vite et transmet mieux une émotion ou un message
• possède plein d’applications mobiles, pour plein de besoins différents
• son attention est donc divisée (c’est la course pour capter son attention et parvenir à la retenir)

La version desktop de votre site web peut être très jolie et pleine d’effets graphiques mirobolants… n’empêche que votre utilisateur consultera votre site depuis son mobile dans la très grande majorité du temps. Il ne faut pas l’oublier, ni le négliger !

La plupart des gens ne liront pas sagement toutes les pages de votre produit, ils les liront en diagonale en cherchant des yeux l’information qui les intéresse.

Intégrez l’approche du mobile-first

Il y a tellement d’utilisateurs sur mobiles (smartphones et/ou tablettes) que c’est impossible aujourd’hui pour tout designer de n’envisager que la version desktop (ordinateur) : vous devez penser “responsive“.

La notion de “responsive” (de l’anglais, qui réagit, qui s’adapte, littéralement) fait référence au principe d’adaptabilité d’un contenu sur différents terminaux (ordinateur, smartphone, tablette). En bref, le contenu doit s’afficher de manière lisible sur différentes tailles d’écrans.

Cela implique que, si on passe de l’ordinateur au smartphone (taille divisée par 10 en moyenne) :

• La taille de la police de caractère, des liens, des boutons et autre type de contenu s’adapte de manière à ce que l’on n’ait pas besoin de zoomer.
• Les visuels (images, “slider”, photos,…) sont re-dimensionné‌s correctement.
• La disposition du contenu reste claire.

Si vous n’intégrez pas le responsive dans votre approche, vous êtes non seulement “has been” (pas à jour) mais aussi vous aurez du mal à faire voir au monde votre site. En effet, le moteur de recherche Google “punit” les sites non “responsives”, c’est-à-dire qu’il pénalise les sites non compatibles avec le mobile en termes de référencement : ils ne remontent pas dans les résultats de recherche.

Il est donc indispensable de :

• prévoir une version mobile lorsque l’on développe un site web
• le coder en intégrant le responsive (encore mieux)
• commencer (que ce soit code ou maquette graphique) par la version mobile
• appliquer les bonnes pratiques de ce que j’appellerais le “design pour le pouce” lorsque l’on développe un site web ou une application mobile.

L’approche du “mobile-first“, un principe que l’on voit souvent en UX design, consiste à “se débarrasser du problème du mobile” en premier, à traiter les attentes en termes de mobile en premier.

Ce n’est pas tellement que le mobile est un problème, c’est plutôt qu’il s’agit de prendre en considération les contraintes liées au mobile d’abord pour ensuite passer à la version desktop.

Assimilez les contraintes de l’appareil mobile

Développer pour du mobile demande d’être conscients de plusieurs contraintes dans le processus de conception :

1. La taille de l’écran est très petite et l’utilisateur y navigue avec un doigt (souvent le pouce).
2. Un smartphone s’utilise très souvent en marchant.
3. Le réseau est aléatoire, parfois bon, parfois fluctuant, faible, voire inexistant…
4. La batterie des smartphones d’aujourd’hui dure maximum une journée.

Ces quatre contraintes à elles seules permettent déjà de dégager quelques grands principes lorsque l’on doit concevoir une application mobile :

• afficher l’essentiel du contenu, à la bonne taille et au bon endroit.

On fait du design pour le pouce, ne l’oublions pas ! Sur un ordinateur on navigue sur l’écran grâce à un curseur (depuis un trackpad ou une souris) qui est tout petit comparativement à la taille de l’écran et qui, de ce fait, permet un très grand niveau de précision et de contrôle du mouvement. Sur un smartphone, on interagit avec le doigt, beaucoup plus gros en proportion par rapport à l’écran…

• charger rapidement, même quand le réseau n’est pas en 4G.
• ne pas consommer trop d’énergie et donc de batterie.