En 2021, nous sommes presque 4 milliards d’êtres humains à naviguer sur Internet à partir d’un support mobile. Forts de ce constat, les concepteurs changent leur fusil d’épaule et choisissent de plus en plus de créer d’abord la version mobile de leurs sites web, avant de concevoir la version desktop. Voyons ici comment créer un site mobile-first.
Qu’est-ce qu’une conception mobile-first ?
La conception mobile-first, comme son nom le suggère, priorise la version mobile d’un site web. Ainsi, la création du site démarre à partir de l’écran mobile. De cette façon, vous vous assurez d’une expérience utilisateur la plus optimale possible sur n’importe quel type d’appareils (smartphone, tablette, ordinateur).
Le concepteur produit donc une mise en page mobile qui évolue ensuite pour être progressivement adaptée à des tailles d’écrans plus grandes.
Créer une architecture mobile est plus limité que pour une version desktop. Sur un écran plus petit, le nombre d’éléments est forcément plus limité. L’exercice vous oblige donc à cibler la création autour des composants les plus importants, soit ce dont l’utilisateur a le plus besoin. D’autres éléments pourront bien sûr s’ajouter au moment d’adapter cette version mobile vers une mise en page desktop. Mais vous connaîtrez alors exactement les éléments les plus importants à mettre en avant.
Conception mobile-first : pensez comme vos utilisateurs
Avant toute chose, vous devez connaître parfaitement les points faibles de vos futurs visiteurs afin de concevoir un site web mobile facile à utiliser pour eux.
Second point, vous devez définir le parcours que vous souhaitez faire suivre à vos utilisateurs. Pour ce faire, vous devez envisager différents scénarios de comportement pour chacune de vos pages, de manière à ajuster votre parcours en conséquence.
Pour y parvenir :
- multipliez les visites sur les sites mobiles déjà existants ;
- procédez à une analyse de la concurrence afin de vous en démarquer grâce à des solutions qu’eux-mêmes ne proposent pas sur leur site mobile ;
- sondez vos visiteurs afin de préciser avec eux leurs points de blocage.
La hiérarchie visuelle du contenu
Un contenu concis et très précis fait partie des clés d’un site mobile réussit. Veillez donc absolument à fournir à vos visiteurs le contenu qu’ils cherchent, sans les soumettre à une panoplie d’éléments encombrants qui pourraient les détourner de l’information principale de la page.
Pour y parvenir, votre mise en page doit respecter une certaine hiérarchie visuelle adaptée à l’importance de son contenu. Une organisation qui permet à l’utilisateur de discerner facilement les éléments les plus essentiels.
- Les titres sont toujours placés au-dessus de l’aperçu de l’article, lui-même installé « above the fold » soit sur la partie que les utilisateurs peuvent visualiser immédiatement sans avoir à scroller.
- La taille de vos polices, images et vidéos doivent être optimisées pour les mobiles.
- Concentrez vos efforts de présentation sur les éléments du contenu les plus pertinents.
- Optez pour un contenu concis avec des phrases courtes.
- Divisez les textes longs en petits paragraphes.
Plus votre contenu est optimisé, plus l’expérience utilisateur de votre site mobile sera positive.
À lire aussi : Quels formats publicitaires faut-il privilégier sur mobile ?
Un site web mobile-first est un site web minimaliste
Un site mobile-first doit absolument rester simple afin d’améliorer la lisibilité de son contenu. En pratique, conservez uniquement les éléments les plus essentiels et débarrassez-vous du superflu (comme les pop-ups, les publicités, etc.).
- Limitez le nombre de liens dans votre menu de navigation.
- Optez pour une typographie simple et de taille adaptée aux écrans mobiles.
- Misez sur des bordures larges et des lignes épurées.
- Limitez au maximum le nombre de pages.
- Ajoutez un moteur de recherche efficace au site.
- Utilisez les espaces blancs pour désencombrer votre mise en page et la rendre ainsi plus lisible.
- N’utilisez pas plus de deux colonnes de contenus.
Des CTA et éléments mobiles cohérents et audacieux
Vos boutons d’appel à l’action ne doivent pas avoir peur d’être audacieux dans le mobile-first. Assurez-vous qu’ils soient visuellement le plus percutant possible.
Mais le CTA n’est pas le seul à tout mettre en œuvre pour attirer l’œil. D’autres éléments graphiques essentiels pour améliorer l’expérience utilisateur et convertir doivent eux aussi attirer l’attention, et pour y parvenir :
- Utilisez des couleurs contrastées et vives.
- Optez pour des formes géométriques et des motifs abstraits.
- Usez des effets de parallaxe.
- Optez pour une typographie forte.
À lire aussi : Site mobile, responsive design, application : que choisir ?
Conclusion
Concevoir un site mobile-first n’a rien d’insurmontable. Cet exercice induit toutefois de revoir nos habitudes de conception web, en les basant prioritairement sur une version la plus simple et lisible possible. Un design épuré, parfaitement hiérarchisé, concis et audacieux qui servira de base aux autres versions du site, disponibles sur des écrans plus grands.
Vous êtes à la recherche d’un UX designer spécialiste du mobile-first ? Consultez les profils des professionnels Graphiste.com.
Vous recherchez un développeur mobile ? Postez votre projet gratuitement sur Codeur.com et recevez de nombreux devis en quelques heures.
