Ayant travaillé sur plusieurs projets d’interfaces mobiles dans la dernière année, je voulais en savoir davantage à propos de l’approche Mobile first. Voici donc un résumé du livre de Luke Wroblewski, que j’ai enrichi par d’autres recherches secondaires. Comme il n’y a pas beaucoup d’ouvrages sur le sujet, ce bouquin est encore le plus lu et le plus pertinent (et je ne suis même pas certaine qu’il y en ait d’autres).

Qu’est-ce que le Mobile first?

Le Mobile first est une approche qui veut que l’on se préoccupe d’abord de la conception des interfaces pour appareils mobiles avant de s’intéresser aux interfaces de bureaux. Elle s’applique à toutes les phases de conception, incluant les analyses utilisateurs, l’architecture d’information, les maquettes, etc. Les puristes du Mobile first vont même jusqu’à implanter les interfaces mobiles avant celles de bureaux.

Pourquoi adopter cette approche?

Je résumerais les utilités d’adopter l’approche Mobile first en trois points importants:

1— Pour répondre à la montée fulgurante de l’utilisation des mobiles

Considérer le mobile en premier répond à une réalité toute simple: l’utilisation des mobiles est de plus en plus importante et devrait bientôt primer sur l’utilisation des ordinateurs de bureau.Un article intéressant sur le blogue de l’agence Foolproof nous procure des statistiques de 2013:

«Today there are six-billion mobile subscribers in the world – meaning if there were one mobile per owner then 87% of the world’s population would have one.»

2— Pour épurer l’expérience globale

Les contenus sont épurés et simplifiés au maximum dès le départ, en vue de pouvoir être consultés facilement sur les mobiles. Ce travail d’épuration peut donc être utilisé par la suite pour l’interface bureau. Après tout, pourquoi mettre des contenus inutiles seulement parce que l’on a plus d’espace? Luke Wroblewski écrit d’ailleurs ceci:

«Songez à la quantité de liens inutiles, de contenu inintéressant et de promotions hors de propos qui polluent la majorité des sites Web, et vous comprendrez pourquoi le régime mobile peut être bénéfique pour vos affaires et vos clients. Une fois que les gens utilisent la version mobile, il n’est pas rare qu’ils réclament que la version bureau soit aussi simple.»

3— Pour profiter de nouvelles possibilités pour engager les utilisateurs

Concevoir d’abord pour le mobile nous permet de considérer un plus grand nombre de moyens pour rejoindre les utilisateurs, dès le départ. En effet, malgré leurs contraintes, l’utilisation de ces appareils offre des possibilités que les ordinateurs de bureaux n’offrent pas.

Mon avis à propos de Mobile first

Personnellement, je ne pense pas que l’approche Mobile first soit révolutionnaire. Pour moi, chaque projet est tellement différent qu’il est impossible de concevoir les étapes dans un ordre prédéterminé. Dès que c’est possible, je préfère d’ailleurs penser un système en progressant de la structure générale vers les fins détails pour que les grands éléments de ce système soient bien connectés entre eux et se complètent. En d’autres mots, l’idéal pour moi est de faire progresser en parallèle les interfaces bureaux et mobiles.

Cela dit, le Mobile first est tout de même important. Je pense que l’arrivée des mobiles nous a forcés à nous recentrer sur les utilisateurs et à faire des choix. L’utilisation des mobiles imposant davantage de contraintes (nous n’avons qu’à penser aux contextes d’utilisation très variés, à la taille réduite des écrans ou aux contraintes technologiques), nous n’avons d’autre choix que de bien connaitre nos utilisateurs pour ne leur offrir que les contenus et les fonctionnalités dont ils ont besoin.

Un article de Ux Booth met d’ailleurs l’accent sur cette nécessité de se centrer sur les utilisateurs:
« Because mobile devices have fundamentally changed user expectations, it’s extremely important that we, as designers, follow user-centered design process to arrive at our solutions. The only problem is that our traditional best practices may not always apply. »

Guide pour la création d’interfaces mobiles

Voici un condensé les éléments à retenir sur la création des interfaces mobiles. Ils sont présentés en deux volets, soit les principes généraux et les éléments spécifiques.

Principes généraux:

• Ne privez pas les gens de contenu et de fonctionnalités sous prétexte qu’ils utilisent un appareil mobile.
• Priorisez ce qui compte vraiment pour les utilisateurs et leurs activités. Enlevez le reste.
• Adaptez votre interface à la manière dont les gens utilisent leur appareil mobile et aux raisons pour lesquelles ils l’utilisent.
• Structurez les contenus pour que les tâches puissent se faire de façon fluide.
• Privilégiez le contenu par rapport à la navigation (par exemple, condensez la navigation pour qu’elle ne prenne pas trop de place dans l’écran).
• Demeurez clair et focalisé en réduisant le nombre d’options de navigation pour des tâches clés.
• Encouragez la saisie et permettez aux gens d’effectuer leurs tâches ou de créer des contenus à partir de leur mobile.
• Agrandissez les éléments pour faciliter la consultation.
• Offrez des options appropriées pour l’exploration et la rotation de l’appareil.
• Exploitez les capacités de l’appareil mobile pour créer de nouvelles manières de capturer les informations.

En d’autres termes, vous devez vous centrer sur vos utilisateurs et connaitre leurs besoins et habitudes réels pour concevoir des interfaces mobiles performantes.

Éléments spécifiques:

• Créez des cibles tactiles assez grandes, d’au moins 44 x 44 points.
• Créez des cibles et des boutons encore plus grands lorsqu’ils sont très importants ou que la conséquence d’une erreur de manipulation est grave.
• Espacez les cibles tactiles suffisamment pour éviter les erreurs.
• Tenez compte du fait que 70 à 90% des gens sont droitiers (malheureusement pour les gauchers) lorsque vous disposez les éléments de navigation dans l’écran.
• Disposez les actions destructrices, comme annuler ou supprimer, hors de la zone de confort des gens (par exemple, dans le coin haut gauche).
• Ayez en tête les gestuelles de base des écrans tactiles (consultez http://www.lukew.com/ff/entry.asp?1071).
• Préconisez les gestuelles naturelles (par exemple, toucher une photo et écarter les doigts pour l’agrandir au lieu d’avoir à cliquer pour ouvrir une autre fenêtre.
• Compenser la perte des interactions de survol (le mieux est d’enlever toutes les interactions de survols qui se transposent plus ou moins bien sur les écrans tactiles).
• Utilisez les bons types de champs pour les bonnes questions, lors de la saisie.
• Pensez aux contrôles personnalisés qui peuvent parfois aider les gens à fournir des réponses précises sans trop d’efforts (par exemple, le remplissage de champs de saisie automatique).

J’ajouterais à cela l’importance de faire des tests utilisateurs sur vos interfaces mobiles. Cela vous donnera une grande longueur d’avance pour comprendre l’utilisations et les problèmes réels de vos utilisateurs.

En pratique

Même si la plupart des gens du domaine connaissent l’approche Mobile first, très peu la mettent en pratique. À mon avis, c’est en grande partie parce que nous ne sommes pas tout à fait arrivés au point d’implanter les interfaces mobiles avant les interfaces de bureaux. L’ordre naturel des choses veut donc que nous terminions ce qui est le plus pressant en premier.

Pour ma part, même si je ne commence pas par concevoir les interfaces mobiles dans leur totalité, j’y travaille maintenant dès le début du processus. Elles font désormais partie intégrante de la stratégie et leurs qualités propres influencent de plus en plus mes interfaces de bureau.

Pour en savoir plus :

AGENCE FOOLPROOF (2012). «Going Mobile», Blogue de l’agence Foolproof.

ALBANESIUS, C. (2010). «Google’s New Rule: Mobile First», PC Mag.

GRAHAM, R. (2012). «Mobile First: What Does It Mean?», UX Matters.

JOHNSON, J. (2013). «Mobile First Design : Why It’s Great and Why It Sucks», Design Shack.

MCVICAR. E. (2013). «Designing for Mobile», Blogue de l’agence Foolproof.

WROBLEWSKI, L. (2012). Mobile First, Eyrolles, 144 p.