Comment optimiser votre version mobile ?


Aujourd’hui, je vais vous parler d’un sujet qui je sais vous paraît capital mais que bien des personnes “ignore” (laisse de côté) : le mobile !


Et pourtant, aujourd’hui, vous devez tous utiliser une approche Mobile First pour vos sites !

On va commencer avec un peu d’histoire ! Vous êtes prêt ? 📖


Vos utilisateurs n’ont pas les mêmes attentes sur mobile que sur ordinateur !

➡️ Au départ du web, on concevait des sites uniquement pour ordinateurs. Puis avec l’apparition des smartphones, des tablettes, des montres connectées, des applications, etc les designers ont du adapter les interfaces numériques à ces différents supports. Tout en gardant une cohérence entre chacune et en s’adaptant aux pratiques, aux usages, aux attentes, aux besoins des utilisateurs, qui différent selon les supports utilisés.

Petit à petit est donc apparut diverses façon d’adapter un site (version ordinateur) à d’autres supports numériques…

Je suppose donc, que vous avez tous déjà entendu parler de site en responsive web design ou en adaptive web design mais qu’est-ce que ces termes signifient, et en quoi sont-ils différents ?

Faire la distinction entre RWD et AWD !

➡️ Responsive web design (RWD)

Le responsive web design est une adaptation à tous les formats.

Par exemple, au moment de la conception d’un site, chaque élément du site va être conçut de manière à s’adapter (en taille : s’agrandir ou se réduire) pour correspondre aux différentes tailles des divers supports.

➡️ Adaptive web design (AWD)

L’adaptive web design (ou adaptatif en 🇫🇷) est une “nouvelle” création pour correspondre à tous les formats.

Par exemple, on ne va pas juste créer un site pour format ordinateur, on va aussi créer un site mobile, et une application dédiée, par exemple.

Ce qui signifie qu’il y a trois réflexions, analyses, conceptions et développements des 3 interfaces numériques différentes pour le même projet. Ainsi la conception est réellement adaptée aux attentes des utilisateurs selon les supports.

Par exemple, pour un projet de prise de rendez-vous en ligne chez un médecin, un utilisateur sur mobile voudra uniquement prendre un rendez-vous rapide autour de lui (une simple liste de suggestions de médecins, peut-lui suffire) et n’aura peut-être pas la même attente qu’un utilisateur sur ordinateur, qui lui sera peut-être en recherche d’un ophtalmologue dans sa nouvelle région et voudra prendre le temps de tous les étudier, de faire des recherches, de consulter des avis, de voir le prix de la consultation, etc…

Même si le projet reste le même, les éléments à afficher en premier sur l’interface, sont différentes sur mobile et sur desktop.

➡️ Mais alors, c’est quoi le mieux ?

le RWD a des avantages… :
👉Moins couteux ;
👉Plus rapide à concevoir ;

…mais aussi des inconvénients :
👉Ne prend pas en compte les attentes utilisateurs spécifiques selon les supports ;
👉Ne facilite pas forcément la navigation sur mobile.

🔼Aujourd’hui, la majorité des utilisateurs sont sur mobile.

C’est pourquoi de nouvelles méthodes sont apparus, afin de faciliter la navigation sur ces supports mobiles.

D’ors et déjà, la conception d’interfaces se fait avec une approche “Mobile First“.

Ainsi, on se focalise sur la conception mobile en premier qu’on déploie ensuite sur ordinateur : on parle alors de Mobile First Web Design !

Vous l’aurez donc compris, l’approche Mobile First c’est partir du design sur mobile pour l’adapter sur tablette puis sur ordinateur. On est dans le processus inverse de pensée afin d’aller à l’essentiel et d’avoir une stratégie déclinable efficace !

☝️Le principe du Mobile First, c’est donc :

  • Se focaliser sur l’essentiel ;
  • Ne pas développer des éléments/fonctionnalités superflue inutilement ;
  • Avoir une performance maximale et optimisée sur tous les supports (avec un temps de chargement optimisé par exemple) ;
  • Avoir un accès rapide aux informations essentielles ;
  • Pouvoir anticiper et adapter le design pour toutes types d’écrans ;
  • Avoir des sites moins lourds (dans tous les sens du terme) ;
  • Et enfin et pas des moindres, avoir une conception mobile friendly (adapté au mobile et aux utilisateurs).

Qui dit mobile-first, dit orienté contenu et utilisateurs !

Réfléchir mobile, c’est se concentrer dès le départ sur le contenu (d’où l’importance d’utiliser une méthode de conception UX afin de bien lister les contenus et fonctionnalités que l’on veut dans son site au préalable et de les prioriser !) et l’utilisateur !

L’approche Mobile First, c’est ajouter progressivement des couches d’informations d’un support à un autre (du mobile à la tablette et de la tablette à l’ordinateur). Ce qui demande de faire le tri entre les contenus essentiels, secondaires et tertiaires, en fonction de votre mission et des attentes de vos utilisateurs !

👉 Les contenus primaires, essentiels doivent se retrouver sur la version mobile ;

👉 Les contenus secondaires, doivent être ajoutés aux contenus primaires sur la version tablette ;

👉 Les contenus tertiaires, doivent être ajoutés aux contenus primaires et secondaires sur la version ordinateur.

Maintenant que vous avez cette nouvelle approche Mobile First, cette nouvelle façon de penser, voilà 4 bonnes pratiques à adopter sur mobile !

➡️ Valoriser la richesse des contenus

La mobilité n’est pas simplement un enjeu stratégique mais un élément incontournable aujourd’hui. Votre projet doit donc être repensé en fonction du contexte de mobilité pour favoriser l’expérience d’utilisation de vos mobinautes.

1. Prioriser les contenus essentiels

Un travail sur la hiérarchisation de vos contenus sur mobile, permettra entre autre de mettre en avant dès la page d’accueil des éléments essentiels pour les mobinautes et de les rendre facilement accessible.

Il faut penser l’expérience d’utilisation sur mobile, autant que sur tablette et ordinateur. Par exemple, la navigation entre les différentes mises en avant produits/articles de vos sites peut-être pensée pour inciter à swiper avec son doigt.

De plus, réduisez la taille de vos contenus (laissant paraitre une suite à lire) et faites disparaître certaines informations pour laisser place à l’essentiel. Ce qui permettra aussi à vos pages de se charger plus rapidement.

2. Optimiser le chargement des pages

Les mobinautes sont impatients et le temps de chargement peut s’avérer plus long sur mobile que sur desktop (4G et parfois même 3G). il est alors essentiel d’optimiser vos pages pour le mobile.  

Sur mobile l’important est d’optimiser les temps de chargement des différents contenus. L’AMP est un système que vous pouvez utiliser et qui vous permettra de charger l’affichage des différents contenus petit à petit.

Pour optimiser le chargement mobile il est aussi possible de limiter le contenu affiché. Par exemple, en affichant seulement le début de vos articles puis un bouton « charger la suite ». Ainsi, vous réduirez la longueur et le poids de vos pages au chargement. De plus, cela deviendra un indicateur de lecture (combien de personnes ont cliqué dessus et ont donc parcouru l’article). Il est aussi intéressant d’optimiser le poids de vos photos et typographies pour mobile.

Il est essentiel de placer les rubriques et fonctionnalités les plus consultées sur mobile en haut ou en bas d’écran et les rendre « fixe ». En créant Une Tab Bar vous rendrez votre menu constamment accessibles lors de la navigation mobile (cf exemple ci-dessus).

➡️ Faciliter l’expérience de navigation

Sur mobile la navigation doit être interactive et simplifiée. Rendre l’internaute acteur au sein de son parcours permet de créer une expérience unique.

1. Créer une Tab bar avec les entrées stratégiques

Tab Bar VS burger Menu

Ce qui est essentiel c’est de proposer une navigation sur mobile optimisée et simplifiée.

Il est nécéssaire pour les utilisateurs d’avoir facilement accès aux rubriques qu’ils consultent le plus. Il est donc important de les déterminer et de les faire sortir du lot. Il sera aussi possible de mettre en avant des rubriques peut-être moins consultées (car trop cachées par exemple) mais pourtant essentielles pour vos mobinautes.

En utilisant ce principe de menu fixe et visible choisissez les 3 entrées principales que vous voulez afficher (vous pouvez même utiliser des icônes) vous donnerez un rapide accès aux contenus les plus importants de votre site. Vous pouvez aussi tous miser sur vos objectifs pour les atteindre, en indiquant seulement un bouton d’action par exemple (pour pousser à l’inscription, à la réservation ou à l’achat) ou des boutons de partage.

2. Proposer un “back to top”

Sur mobile aujourd’hui, la plupart des blocs de contenus sont « empilés » ce qui rend la page plus longue et nécessite de scroller davantage pour en voir tout le contenu.

Aujourd’hui vos utilisateurs ont l’habitude de scroller et les dispositifs, sont souvent conçus en « long form scrolling » ce qui rend les pages très longues et nécessite sur mobile d’avoir une fonctionnalité facilitant la navigation verticale.

La solution la plus utilisée est le « back to top », qui peut permettre à l’utilisateur de revenir au début de la page du site plus rapidement, en un clic (souvent représenté par une flèche qui pointe vers le haut).

3. Faciliter la cross-navigation

Apporter du trafic sur votre site mobile est quelque chose d’essentiel mais que vous faites déjà mais l’enjeu est de garder vos utilisateurs plus longtemps sur mobile et qu’ils trouvent facilement les informations qu’ils souhaitent.

Il est donc important d’établir une stratégie de cross-navigation efficace. De plus en créant une réelle stratégie de maillage interne vous favoriserez davantage votre référencement naturel et faciliterez la navigation aux internautes.Je vous conseille donc d’intégrer davantage de liens à vos contenus pour les lier les uns aux autres. De même il sera intéressant de valoriser davantage les « articles associés » au sein de vos pages produits/service et l’inverse (par exemple “vous aimerez aussi”). Ainsi les utilisateurs navigueront avec fluidité entre les différentes pages du site mobile.

➡️ Optimiser l’expérience mobile

Un site mobile doit apporter un contenu à valeur ajoutée ou du moins différent par rapport au site sur ordinateur. L’utilisateur n’aura pas le même usage de votre site s’il le consulte sur mobile  (en déplacement) ou sur ordinateur.

1. Les fonctionnalités spécifiques

Vous pouvez très bien tout miser sur une seule fonctionnalité, par exemple, la barre de recherche. C’est-à-dire que vous pourriez très bien vous dire : aujourd’hui mes utilisateurs sur mobile, veulent uniquement effectuer une recherche dans ma barre de recherche pour aller directement trouver l’info qu’ils souhaitent. Donc sur mobile je prend le parti-pris de ne leur montrer que ça. Je vais donc recouvrir l’intégralité de l’écran mobile avec uniquement mon logo, une image et ma barre de recherche et point.

En réalisant un focus sur l’essentiel, sur un objectif en particulier, vous aidez l’utilisateur dans sa démarche principale et ne le perdrez pas.

D’une autre manière vous pourriez créer une fonctionnalité spécifique et uniquement disponible sur mobile. Par exemple une mise en favoris d’articles qui restent accessible hors ligne. A vous de trouver l’idée, qui satisfera pleinement vos utilisateurs.

2. Proposez les bons claviers virtuels

Vos formulaires sur mobile, affiche le clavier du téléphone par défaut. Penser à paramétrer les claviers selon les champs à remplir. Ainsi, faites en sorte que lorsque le mobinaute doit remplir un champ de date de naissance par exemple, il s’affiche le clavier des chiffres et non des lettres.

3. Pensez doigts !

Permettez à vos utilisateurs de manipuler facilement vos images avec leur doigts (zoom par exemple). De nombreuses galeries sont présentes en ligne et permettent d’exploiter le potentiel des écrans tactiles. 

De même, rappelez-vous que sur mobile le survol n’existe pas, donc penser vos animations et interactions de façon différentes que sur ordinateur.


A lire aussi : Comment donner envie à vos utilisateurs dès l’entrée ?


👉 Elle ressemble à quoi vos versions mobiles ?

Maintenant à vous de jouer pour les optimiser au mieux ! 🙌

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *