Il existe un vieux dicton que ma famille s’est transmis de génération en génération : « Vous pouvez toujours dire l’âge d’un site web par le look de son site mobile. »
C’est un dicton européen banal du vieux monde, mais c’est vrai. Si vous pouvez faire défiler une maladroite 20 pixels vers la droite, le site n’a probablement pas été fait au cours des trois dernières années. (Ou bien il l’a été, mais par quelqu’un qui a appris à coder au milieu des années 2000.)
Il existe plusieurs façons de concevoir un site mobile, et votre méthode de choix doit se résumer à vos objectifs en ligne. Le mobile représentant entre 30 et 50 % de l’ensemble du trafic web, et la plupart des recherches Google s’y effectuant également, ce n’est pas une décision à prendre à la légère.
Vous pouvez soit faire un site web réactif, un site qui fonctionne parfaitement sur les écrans de bureau, de mobile ou de tablette, soit créer un site différent qui s’enregistre lorsque vos visiteurs vous trouvent sur leurs appareils mobiles.
Quelques éléments de conception clés à prendre en considération :
Focus sur des CTA clairs
Les plus gros problèmes de conception mobile ont tendance à provenir de l’encombrement. Il y a une raison pour laquelle la plupart des sites mobiles ont tendance à être simplement du texte noir sur un fond blanc, c’est propre, facile à lire et immédiatement compréhensible.
Si votre site Web dépend des appels à l’action (CTA), rendez-les clairs, lisibles et visibles. Utilisez une couleur attrayante et adaptée à la marque pour les boutons, et utilisez une taille de police que les gens pourraient lire en prenant le bus – ce qui est probablement l’endroit où ils seront lorsqu’ils trouveront votre site Web.
Gardez aussi à l’esprit la taille des doigts. Rien n’est plus odieux en matière de conception mobile que d’essayer de cliquer sur un lien qui est trop petit pour qu’on puisse réellement cliquer.
Pensez à la façon dont nous tenons nos téléphones
Dans l’ensemble, les gens sont droitiers. (Désolé, gauchers.) Et la plupart du temps, nous tenons nos téléphones d’une seule main. Cela signifie que tout ce qui se trouve dans le coin supérieur gauche sera presque certainement hors de portée des gens, à moins qu’ils n’utilisent leurs deux mains ou qu’ils soient des fans inconditionnels du minuscule iPhone 4.
La plupart des menus de navigation se trouvent dans le coin supérieur gauche, en grande partie parce qu’ils ne sont nécessaires qu’occasionnellement, lorsque l’utilisateur a besoin de s’éloigner vers une autre section. Les boutons de recherche sont plus couramment utilisés, c’est pourquoi ils apparaissent (généralement) dans le coin supérieur droit. Si vous avez des liens d’image sur la même ligne que le texte, ces images devraient apparaître sur le côté droit, le plus proche du pouce.
Gardez ces idées à l’esprit lorsque vous décidez où placer certains objets, en particulier les CTA et autres éléments que vous voulez voir bénéficier d’un taux de clic élevé.
La navigation est essentielle
Il existe quelques types différents de barres de navigation mobiles. Les trois barres empilées – le hamburger, comme on l’appelle – sont les plus populaires, faisant même leur chemin sur les sites de bureau pour assurer un design propre et cohérent avec la marque sur toutes les plateformes. Vous pourriez avoir un menu d’en-tête qui disparaît dans un hamburger à une certaine taille d’écran, ou une combinaison de bascules (un hamburger, ou une icône à trois points) qui font apparaître différents menus.
Le problème de cette surcharge est que les utilisateurs peuvent ne pas savoir comment trouver le contenu qu’ils recherchent. Sur les ordinateurs de bureau et portables à écran large, les barres latérales étaient autrefois une solution facile à ce problème, mais avec la verticalisation des écrans, les barres latérales sont souvent entièrement ignorées, ce qui rationalise encore plus le design.
Une bonne règle de base est d’utiliser les barres latérales comme des avantages accessoires, si vous les utilisez. Ne dépendez pas d’eux pour transmettre des informations importantes.
La typographie compte
Prenez bien le temps de décider d’une police qui a l’air bien en petit. En général, la taille des polices sera comprise entre 16 et 20 pixels, avec un espace suffisant pour respirer entre les lignes et des marges qui ne donnent pas l’impression que la police est à l’étroit.
Les serifs sont peu courants pour le corps du texte dans la sphère numérique, car ils sont beaucoup plus difficiles à lire ; c’est particulièrement vrai dans le design mobile.
Faire de la continuité de la marque une priorité
Avant tout, ne vous contentez pas de concevoir quelque chose que vous trouvez cool – concevez quelque chose qui ressemble à votre marque.
Logos, couleurs et polices sont autant d’éléments qui ne doivent pas changer trop radicalement simplement parce que vous êtes sur un écran différent. Le designer rend cela facile puisque c’est littéralement le même site web qui apparaît sur un écran différent. La grande leçon à retenir devrait être de se méfier de changer radicalement votre design mobile juste pour s’adapter au design mobile conventionnel – pensez-y comme un simple élément supplémentaire de votre stratégie de marque globale.
