La philosophie du « mobile-first » est simple : la conception est d’abord créée pour les mobiles et ensuite seulement adaptée aux ordinateurs de bureau. Cela va à l’encontre d’une pratique bien établie qui veut que les écrans plus grands soient les premiers. Cette technique permet de créer des interfaces mobiles élaborées qui peuvent être adaptées aux ordinateurs de bureau par la suite.
Avec cette approche, il n’y a pas de version mobile grossière, de mauvaise disposition des éléments ou de liens qui ne fonctionnent pas correctement. Dans ce billet, nous allons parler des différences entre la conception web mobile-first, l’adaptatif et le responsive.
La conception mobile d’abord par rapport à la conception adaptative et réactive
Tout d’abord, examinons de plus près des concepts tels que la conception adaptative et réactive pour comprendre en quoi la conception mobile-first est différente.
Conception adaptative
Les sites Web adaptatifs sont composés de plusieurs mises en page. Chaque mise en page présente une disposition différente des éléments, adaptée aux différentes tailles d’écran. Lorsqu’un utilisateur ouvre le site Web, le moteur du navigateur définit la taille, la résolution et le rapport hauteur/largeur de son écran. Ces facteurs fonctionnent comme des déclencheurs qui aident à choisir et à afficher une mise en page appropriée.
Alors, comment les concepteurs travaillent-ils avec cela ? Ils créent simplement différentes mises en page pour différentes tailles d’écran :
- 4′-6′ – mise en page pour les smartphones
- 7′-11′ – mise en page pour les tablettes
- 12′ et plus – disposition pour les ordinateurs de bureau
Design réactif
Dans le cas du responsive design, la mise en page du site Web se réduit ou s’étend en fonction de la largeur d’affichage des utilisateurs. Même si la fenêtre change d’un pixel, la page réorganise légèrement ses éléments.
Cette approche permet d’économiser du temps et de l’argent sur la conception de la version mobile. Cependant, il est important de s’assurer que tous les éléments s’affichent correctement sur les différents appareils.
Les conceptions adaptatives et réactives sont similaires. Ils s’adaptent tous deux aux différentes tailles d’écran. La différence est que dans le cas du design réactif, le contenu est de taille fixe, tandis que dans le cas du design adaptatif, le contenu change de manière dynamique.
La conception mobile d’abord
L’un des problèmes que posent les conceptions réactives et adaptatives réside dans une approche dépassée consistant à créer un site Web pour les ordinateurs de bureau d’abord, puis à l’adapter aux appareils mobiles. En conséquence, les pages mobiles sont souvent moins belles.
La stratégie « mobile-first » fonctionne à l’inverse : les appareils mobiles viennent en premier, puis la conception est adaptée aux ordinateurs de bureau. Les concepteurs qui suivent cette stratégie passent des écrans les plus petits aux plus grands. Il s’agit essentiellement de fournir une expérience utilisateur adaptée aux appareils appropriés.
L’objectif principal de cette approche est de placer tout le contenu nécessaire – boutons, textes, CTA, fonctionnalités – sur l’espace limité. Et tous ces éléments doivent être placés au bon endroit pour être accessibles et visibles.
Pourquoi la conception mobile est essentielle pour les entreprises
Les taux de conversion sur les appareils mobiles ont augmenté de 64 % par rapport à la conversion moyenne sur les ordinateurs de bureau. C’est pourquoi vous pouvez augmenter les revenus de votre entreprise grâce à la stratégie « mobile-first ».
Qui plus est, Google évalue désormais de plus près les versions mobiles des sites Web pour comprendre comment les classer. Cette approche est donc très judicieuse si vous envisagez de lancer un nouveau projet.
Cette approche favorise également un accès rapide au contenu pour vos utilisateurs. Moins il y a d’éléments sur la page, moins il faut de temps pour la charger. Étant donné que chaque seconde de retard entraîne une diminution de 7 % de la conversion, vous devriez au moins envisager une conception mobile-first.
Donc, le site Web mobile-first est bon parce que :
- Google le classe bien
- Les pages se chargent rapidement
- L’expérience utilisateur encourage les achats rapides
Travailler avec le contenu
Le contenu est à l’honneur lorsqu’il s’agit de conception mobile. Avec l’approche « mobile-first », votre équipe de conception UI/UX doit fournir aux utilisateurs le contenu dont ils ont besoin. L’espace étant strictement limité, les concepteurs n’ont d’autre choix que de supprimer tous les éléments inutiles de l’interface utilisateur afin de concentrer les utilisateurs sur l’essentiel.
En parlant d’éléments d’interface utilisateur inutiles, nous ne voulons pas dire que vous devez les supprimer de toutes les versions du site Web. Ils peuvent encore être utiles pour la version de bureau.
Les besoins des utilisateurs de téléphones mobiles et des utilisateurs d’ordinateurs de bureau sont différents. Les utilisateurs d’ordinateurs de bureau recherchent souvent des informations plus détaillées ou des fonctionnalités qui n’ont aucun sens sur les sites Web mobiles.
Encore une fois, l’objectif principal de la conception mobile est de placer les boutons, les fonctionnalités, les CTA et les autres éléments aux endroits où ils seront utiles.
Conseils pour la création d’un design Mobile-First
Tous les conseils que nous allons vous révéler portent sur le travail avec le contenu, qui occupe une place centrale dans les conceptions mobiles.
Voici donc plusieurs conseils pour vous aider à gérer plus facilement cette approche de conception :
- Dressez une liste. Rédigez un document ou une feuille de calcul contenant la liste complète du contenu que vous souhaitez placer sur le site Web.
- Classez le contenu par ordre de priorité. Les éléments importants de ce document ou de cette feuille de calcul seront placés aux endroits les plus visibles.
- Soyez cohérent. Encouragez votre équipe à commencer à concevoir et à dessiner des écrans du plus petit au plus grand, en augmentant progressivement la taille du tableau. De cette façon, votre équipe couvrira toutes les tailles d’écran, de la version mobile à la version de bureau.
- Augmentez la surface tactile. C’est essentiel car les empreintes digitales sont nettement plus larges qu’une souris pixellisée. Tous les éléments cliquables et de navigation doivent donc être plus grands. Par exemple, Apple recommande de prévoir des zones cliquables de 44px. Assurez-vous que les hyperliens et les éléments interactifs disposent de suffisamment d’espace et agrandissez-les légèrement si nécessaire.
- Pensez-y comme s’il s’agissait d’une application mobile. Les utilisateurs se sont habitués à certains schémas d’interaction avec les applications. Pensez à la navigation, aux widgets, aux requêtes AJAX et aux autres éléments avec lesquels les utilisateurs peuvent interagir.
- Évitez les images graphiques volumineuses et complexes. Les photographies de paysages et les graphiques complexes s’affichent mal sur les écrans minuscules.
- Typographie. Veillez à ce que les textes importants aient une taille d’au moins 16 pt. De même, veillez à ce que l’interlignage soit suffisant pour une lecture confortable.
- N’oubliez pas la zone de contenu sécurisée. Le contenu ne doit pas coller aux bords de l’écran. Apple recommande un espacement de 16 pt pour éviter cela.
Conclusion
Négliger la conception mobile est un péché UX de nos jours. Une bonne expérience utilisateur doit être au cœur de votre produit. Cette stratégie est considérée comme l’une des approches les plus perspectives et les plus complexes. Elle conviendra aux organisations commerciales, aux services et aux autres produits qui dépendent du rythme de vie rapide de notre époque.
Vous souhaitez devenir UX designer ? Retrouvez plus d’informations sur tous les métiers liés à la conception web sur le blog Monecole-informatif.net !