Les 7 meilleurs conseils pour une conception de site web adaptée aux mobiles

La conception d’un site Web adapté aux mobiles est celle qui donne la priorité à l’expérience de navigation mobile plutôt que de la traiter comme une réflexion secondaire par rapport à la version de bureau.

Cette approche est devenue extrêmement importante au cours de la dernière décennie. Selon une étude de Statista, un peu plus de la moitié de l’ensemble du trafic sur les sites Web s’effectue désormais sur un appareil mobile, ce qui inclut environ 45 % de tous les achats en ligne. Si l’on considère que les smartphones n’existent que depuis dix ans, ces chiffres ne peuvent qu’augmenter à mesure que la navigation sur les sites Web mobiles s’enracine et que les conceptions deviennent plus intuitives.

C’est pourquoi les sites Web qui ne font pas d’efforts sincères et stratégiques pour offrir une expérience mobile de qualité risquent d’être nettement distancés par leurs concurrents. Afin de t’aider à suivre le rythme, nous avons élaboré ce guide des conseils et astuces les plus courants pour concevoir des sites Web adaptés aux mobiles.

Les 7 principaux conseils de conception de sites Web adaptés aux mobiles

  • Utilise l’approche “mobile-first”
  • Utilise les dimensions recommandées pour les mobiles
  • Optimise ton site pour le mode portrait
  • Réduis le menu
  • Réduis le contenu secondaire
  • Limite les champs de formulaire et la saisie de texte
  • Un site adapté aux mobiles doit être adapté aux pouces

Conseil 1 : utilise l’approche “mobile-first”

La navigation sur les sites Web mobiles ayant pratiquement dépassé celle des ordinateurs de bureau, les concepteurs ont dû cesser de considérer le site de bureau comme la version “principale”. C’est pourquoi l’approche “mobile-first” – concevoir le site mobile avant la version de bureau – est une bonne pratique courante depuis des années.

En centrant la direction artistique sur l’expérience mobile, les concepteurs sont encouragés à limiter les décisions de conception en raison des limitations. Outre les contraintes de taille, les utilisateurs de mobiles interagissent souvent d’une seule main et les saisies autres que le tapotement et le glissement ont tendance à être plus lourdes que sur un ordinateur de bureau. Prenons l’exemple des animations de survol qui dépendent de la saisie de la souris : si ta version de bureau repose trop sur ce type de retour visuel, cela posera problème pour les mobiles par la suite.

Par conséquent, la conception mobile-first tend à mettre l’accent sur la simplicité et la facilité d’utilisation dès le départ. Garde à l’esprit que cette approche ne condamne pas les versions de bureau à un minimum d’espace. Au contraire, il est plus facile de développer une mise en page simple que de simplifier une mise en page complexe.

Il est également important de tester d’abord ton multimédia sur mobile, car les photos ou les vidéos conçues pour une orientation paysage peuvent ne pas fonctionner correctement en portrait. Les détails fins tels que les expressions faciales ou les éléments d’arrière-plan peuvent être plus difficiles à lire en petite taille. En outre, il n’y a souvent de la place que pour une seule image à la fois, et si tu conçoit d’abord un site Web de bureau riche en images, le défilement de chacune d’elles sur le mobile peut devenir superflu.

Conseil 2 : utilise les dimensions recommandées pour les mobiles

Sur un appareil portable, l’espace peut sembler plus limité que dans tout autre contexte de conception. Mais prendre en compte les contraintes de taille dès le début de ton projet est le meilleur moyen d’éviter les conflits ultérieurs.

Les résolutions d’écran des appareils mobiles varient selon les appareils, mais à l’heure actuelle, la résolution la plus courante est de 360×640 (rapport d’aspect 9:16) selon les recherches menées par statcounter. Google Analytics peut t’indiquer les appareils spécifiques que tes utilisateurs préfèrent, et tu dois t’assurer que la conception de ton site Web est suffisamment réactive pour s’adapter aux variations.

En ce qui concerne la taille de la police pour la conception mobile, il est recommandé d’utiliser au moins 16px pour le corps du texte. Cela peut également varier en fonction des polices de caractères utilisées (en fonction de leur construction, certaines polices seront moins visibles à 16px que d’autres).

Il n’existe pas de taille standard pour les polices de caractères des titres, mais l’objectif est d’établir une hiérarchie typographique claire grâce à un contraste de taille, de poids et de style. En cas de doute, tester simplement la taille des polices sur un appareil mobile.

Les images et autres médias peuvent bien sûr être aussi larges que le permet l’appareil. Laisse le sujet de l’image dicter la taille de l’image afin de préserver la clarté. Garde à l’esprit que tu n’es pas obligé de faire tenir l’image entière, mais que tu peux zoomer sur le sujet et supprimer les éléments d’arrière-plan superflus, comme dans l’exemple ci-dessus.

Enfin, la taille des boutons est extrêmement importante pour la conception de sites Web adaptés aux mobiles, car les écrans tactiles sont beaucoup moins fiables qu’une souris et un clavier pour capter les entrées de l’utilisateur. Une étude portant sur les utilisateurs âgés recommande des boutons d’écran tactile entre 42 et 72px pour une accessibilité optimale.

Conseil n° 3 : optimise l’orientation portrait

Bien que les sites Web mobiles puissent techniquement être utilisés en mode paysage, l’appareil étant tourné sur le côté, le mode portrait est largement plus courant. Le Blackberry a popularisé la prise du téléphone mobile à deux mains dans les années 2000, mais cette pratique a été complètement abandonnée avec l’avènement du smartphone, les utilisateurs préférant le mode portrait à une main.

L’étroitesse du mode portrait est parfaite pour les mises en page à colonne unique. Dans ce style, les éléments du site sont placés de manière séquentielle, de haut en bas. Bien que l’alignement centré du contenu soit courant, l’alternance de la justification à gauche et à droite peut créer un intérêt visuel et l’illusion d’une disposition en deux colonnes. En outre, les éléments plus petits, comme les icônes et les photos, peuvent être présentés dans une grille, tandis que les carrousels d’images peuvent rompre le défilement vertical par un balayage horizontal.

En plus de trouver des moyens créatifs de briser la disposition en une seule colonne, il existe des façons de l’utiliser à ton avantage. Les applications de médias sociaux ayant habitué les utilisateurs mobiles à de longues périodes de défilement, les concepteurs de sites Web peuvent étaler le contenu à l’aide d’espaces blancs et de renforts. Le contenu reste ainsi propre et lisible tout en encourageant l’engagement par un défilement continu.

Considère l’inverse : le contenu qui est regroupé sur un seul écran avec un défilement limité peut sembler intimidant à lire.

La conception par sections est également utile pour regrouper des informations similaires afin que l’utilisateur comprenne l’objectif général de chaque section sans avoir à lire en profondeur. C’est particulièrement utile lorsque l’on sait qu’environ 79 % des visiteurs ne font que survoler le contenu d’un site Web. Des fonds de couleur variés permettent de différencier ces sections et des bordures de section créatives perturbent l’impression de boîte que ces sections donnent.

Conseil 4 : réduis le menu

La navigation est un autre domaine qui peut rapidement devenir compliqué en fonction du nombre de destinations et d’options proposées à l’utilisateur. Alors que les sites Web de bureau ont tendance à avoir une barre de navigation d’en-tête complète avec plusieurs menus principaux et sous-menus, il est devenu standard de contenir tout cela dans l’icône simple et reconnaissable du hamburger. Par conséquent, la plupart des en-têtes de sites Web mobiles tendent à être réduits à cette icône et au logo.

Pour le style du menu proprement dit, une approche courante est la barre latérale coulissante qui recouvre une partie de l’écran avec les options de navigation. Cela permet au menu de fonctionner dans une dimension distincte du reste du contenu de la page tout en laissant à l’utilisateur la possibilité de sortir du menu et de revenir à l’écran précédent.

Selon la complexité de ton menu, chaque option de menu peut contenir d’autres options imbriquées, ou un sous-menu. Lorsque l’utilisateur clique sur l’un de ces sous-menus, il est préférable que la nouvelle liste d’options remplace le menu existant afin que la liste reste courte.

N’oublie pas de fixer la barre de navigation à l’écran afin que l’utilisateur n’ait pas à la faire défiler jusqu’en haut. Une pratique courante pour les mobiles consiste à masquer la navigation fixe lorsque l’utilisateur fait défiler l’écran vers le bas, afin de donner au contenu l’attention qu’il mérite, et à révéler la navigation lorsque l’utilisateur commence à remonter l’écran.

Il existe d’autres moyens de navigation qui sont utiles à la place ou en plus des menus standard. Les onglets permettent à l’utilisateur de passer facilement d’une section de contenu à une autre sans avoir à charger une nouvelle page.

De nos jours, de nombreux concepteurs d’UX explorent également des solutions de navigation autres que la saisie par tapotement – le balayage horizontal et/ou vertical étant le plus courant. Lorsque tout le reste échoue, l’icône de recherche pratique est courante sur les mobiles pour permettre à l’utilisateur de trouver les éléments spécifiques qu’il recherche.

Conseil n° 5 : réduis le contenu secondaire

Les sites Web de bureau ont souvent de la place pour un corps de texte détaillé, des spécifications de produits et d’autres contenus. Mais comme les sites mobiles exigent que l’information aille droit au but, les concepteurs doivent éliminer ou raccourcir tout contenu non essentiel. C’est là que les sections repliables/déployables sont utiles.

Le repli du contenu consiste à rendre les informations explicatives facultatives à l’aide d’une icône telle qu’un triangle ou un signe plus qui permet de développer ou de révéler le contenu caché. Si le fait de cacher ton contenu peut sembler une mauvaise chose, les avantages d’une navigation simplifiée, renforcée par des titres convaincants, l’emportent largement sur le risque de manquer des informations. La micro-interaction du basculement est également une invitation supplémentaire pour l’utilisateur à interagir avec la page au lieu de lire passivement.

Les concepteurs devraient réserver le contenu rétractable aux textes de niveau inférieur, sous l’en-tête. Les contenus répétitifs peuvent être fusionnés pour recouvrir le même espace plutôt que d’être empilés les uns sur les autres. Dans le design d’Artyom Ost illustré ici, il y a trois citations de clients sous l’en-tête dans la version de bureau, et dans la version mobile, le designer les a regroupées en un carrousel.

Les interstitiels et les fenêtres pop-up sont des contenus étrangers que tu devrais éviter complètement dans la conception de sites Web adaptés aux mobiles. Si ces dernières permettent d’économiser de l’espace en superposant le contenu dans une fenêtre distincte, les sites Web truffés de fenêtres pop-up intrusives sont non seulement frustrants à utiliser, mais ils sont également pénalisés par Google.

Conseil 6 : Limite les champs de formulaire et la saisie de texte

La saisie de texte doit être l’un des plus grands obstacles à l’accessibilité mobile. Bien qu’un mot par-ci par-là ne soit pas un problème, qui n’a pas gémi lorsqu’un site mobile demande une adresse électronique, t’obligeant à parcourir d’une seule main les lettres, les majuscules, la ponctuation et les menus de symboles ? C’est pourquoi tu dois minimiser les champs de formulaire autant que possible.

Les possibilités de remplissage automatique, comme le fait de déduire la majeure partie d’une adresse à partir d’un code postal ou de fournir des sélections pré-remplies pour les suffixes de courriel les plus courants, peuvent rendre certaines de ces interactions moins pénibles. Les informations personnelles et de connexion d’un utilisateur peuvent également être simplifiées en quelques clics grâce à des intégrations avec d’autres logiciels basés sur le profil, comme Apple, Google ou Facebook.

Les intégrations tierces avec des fournisseurs de services de paiement tels que PayPal peuvent également s’avérer utiles sur les pages d’achat des sites Web commerciaux, où la saisie des données de carte de crédit peut s’avérer fastidieuse, même sur un ordinateur de bureau. Si cette option n’est pas disponible, tu peux également permettre aux utilisateurs de passer rapidement à la caisse en tant qu’invités et répéter leurs informations d’expédition dans leurs informations de facturation.

Conseil n° 7 : “adapté aux mobiles” signifie “adapté aux pouces”

Selon des recherches incluses dans le livre de Josh Clark intitulé Designing for Touch, les utilisateurs utilisent leur pouce pour au moins 75 % de toutes les interactions mobiles. Cela inclut le défilement, le clic, le glissement et la saisie de texte, le reste des doigts étant occupé à soutenir le dos du téléphone. Il faut également tenir compte du fait que, dans de nombreuses circonstances, les utilisateurs naviguent sur leur téléphone avec leur main moins dominante tout en faisant autre chose. Il est donc clair que les concepteurs doivent donner la priorité à la portée du pouce pour toutes les interactions mobiles.

Le pouce est le plus grand doigt, ce qui le rend imprécis. Lorsqu’ils créent des boutons, les concepteurs doivent utiliser la plus grande taille pour les interactions importantes (voir la section précédente sur le dimensionnement), car l’écran tactile n’enregistre pas la saisie si des parties du pouce tombent en dehors du bouton.

L’emplacement des éléments interactifs sur la page est tout aussi important. En général, un appareil mobile est tenu par l’extrémité inférieure, le pouce reposant au milieu. Pour atteindre les éléments interactifs situés en haut, l’utilisateur doit repositionner toute sa main ou utiliser les doigts de sa deuxième main. Des études montrent que la zone d’interaction idéale (qui se réduit au fur et à mesure que les téléphones grossissent) se situe autour de la partie inférieure du milieu.

Ces dernières années, de nombreux concepteurs d’UX ont pris l’initiative de placer les barres de navigation en bas de l’écran plutôt qu’en haut. Si cela permet un accès plus facile pour le pouce, le fait de rompre les conventions de conception auxquelles les utilisateurs sont habitués peut également se traduire par une expérience moins bonne. Le temps nous dira quelle position est la plus idéale, mais en attendant, la meilleure façon de régler cette question pour ta propre base d’utilisateurs est de tester les deux.

Adopte une conception de site web adaptée aux mobiles

Si l’on en croit la croissance continue de son trafic mondial, la navigation sur les sites Web mobiles est clairement la voie de l’avenir. Mais lorsque tu considères toutes les limitations auxquelles la conception doit faire face par rapport aux sites Web de bureau – le manque d’espace et de périphériques d’utilisateur – cela peut sembler être plus un fardeau qu’une opportunité. Ces défis ne sont pas insurmontables mais ne doivent pas non plus être pris à la légère.

Les conseils donnés dans cet article te donneront une base de référence pour trouver des solutions pratiques aux problèmes de conception de sites Web adaptés aux mobiles, mais il faut beaucoup de soin et de pratique pour les maîtriser. Afin d’obtenir un site Web mobile qui soit une aide et non un obstacle pour tes utilisateurs, envisage de te mettre en relation avec un concepteur de sites Web talentueux.

Partage cet article !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest

Tu aimeras aussi :