Conception UX pour mobile : voici à quoi tu devrais faire attention lorsque tu optimises ton site web pour une utilisation mobile

Comment faire de ton site web une expérience agréable pour l'usage mobile ? Que signifie l'expérience utilisateur pour les appareils mobiles ? Quels principes de conception peux-tu appliquer ? Tu trouveras les réponses à toutes ces questions dans cet article. Examinons de plus près les meilleures pratiques en matière de design UX mobile !

Pourquoi une conception UX mobile ?

Des mouvements de conception tels que Mobile First essaient depuis quelque temps de déplacer notre attention vers le mobile. Aujourd'hui, la plupart des sites web professionnels fonctionnent bien sur les appareils mobiles. Les designer·euse·s consciencieux·ses y contribuent, bien sûr. Cependant, même celles et ceux qui gèrent un site web utilisent souvent des approches comme Bootstrap ou des thèmes WordPress préétablis. Ici, l'affichage réactif est généralement déjà intégré. Cela permet aux développeur·euse·s de gagner un temps fou. 

Toutefois, l'utilisation de Bootstrap, thèmes WordPress & compagnie comporte le risque que le design soit conçu pour un appareil de bureau et qu'il soit ensuite simplement adapté aux appareils mobiles.

Pourquoi est-ce un problème ? Les visiteur·euse·s qui consultent ton site web via des appareils mobiles ont d'autres besoins qui ne sont pas nécessairement satisfaits par la seule adaptation esthétique et technique du site web.

La conception de l'expérience utilisateur repose sur la résolution de problèmes. La question initiale est toujours la suivante : quels sont les problèmes des utilisateur·rice·s et comment les résoudre ? Dans le contexte des appareils mobiles, tu dois donc te poser une question-clé : quels problèmes supplémentaires se posent lorsque les utilisateur·rice·s visitent ton site web à partir d'un appareil mobile ?

Nous sommes nombreux·ses à utiliser nos smartphones, surtout en déplacement. L'expérience utilisateur est fortement influencée par des facteurs externes : il peut y avoir du bruit autour de nous. Nous pouvons également être en déplacement, l'interaction avec le téléphone est alors moins précise. Les niveaux de lumière peuvent changer rapidement entre très lumineux et très sombre. Le réseau peut passer du bon au mauvais, voire s'arrêter complètement. Les visiteur·euse·s de ton site peuvent être sur des forfaits prépayés, alors essaie d'éviter les sites qui utilisent beaucoup de données mobiles en peu de temps.

La position peut être moins confortable et tes utilisateur·rice·s moins détendu·e·s en conséquence. Nous avons généralement moins de patience parce que nous avons moins de temps pour les tâches individuelles. Si quelque chose ne fonctionne pas en un minimum de temps, ou si nous devons attendre trop longtemps pour que le contenu se charge, nous avons tendance à annuler le processus sur le smartphone et à consacrer notre brève attention à un autre site web.

La volonté de lire ou de faire défiler un grand nombre de textes est également plus faible. Nous recherchons des informations clairement structurées en petites bouchées. Il se peut aussi que nous n'ayons qu'une seule main libre.

Les raisons de surfer sur Internet avec un smartphone sont très différentes de celles des utilisateur·rice·s d'ordinateurs de bureau : sur l'appareil mobile, nous voulons soit rechercher des informations spécifiques, soit essayer de passer le temps. 

Lorsque je navigue sur un site web commercial depuis mon smartphone, je suis probablement plus intéressée par les informations de base :

• Quelle est l'adresse ?
• Comment m'y rendre ?
• Quelles sont les horaires d'ouverture ?
• Comment puis-je prendre contact ?
• Quels sont les produits proposés ?
• Quels sont les prix ?

La seule question qui reste est la suivante : ton site web est-il optimisé pour les appareils mobiles ? Pour mieux résumer ce que cela signifie en détail, j'ai résumé les principes UX les plus importants pour la conception mobile.

Design UX mobile : 13 principes à mettre en œuvre immédiatement

1. Le contenu

Les visiteur·euse·s de ton site web ont des objectifs différents selon les appareils qu'iels utilisent pour accéder à ton site. Les textes longs sur les appareils mobiles impliquent souvent un défilement important pour trouver ce qu'iels sont venu·e·s chercher. En tant qu'utilisateur·rice·s mobiles, nous recherchons des informations rapides et concises. Les personnes qui visitent ta boutique sur mobile sont plus susceptibles de vouloir connaître les produits que tu proposes que d'en savoir plus sur ton parcours.

Le contenu doit donc être adapté. Sur le smartphone et la tablette, la hiérarchie est différente de celle de l'ordinateur de bureau. Il y a plusieurs possibilités ici :

• Omettre complètement le contenu : pour certains contenus, il peut être judicieux de les masquer complètement. Cela peut être le cas si c'est quelque chose qui ne fonctionne pas sur le téléphone de toute façon ou si le volume de données consommé dépasse le bénéfice pour l'utilisateur·rice.
• Raccourcir le contenu : tu peux reprendre la structure de ton site web mais raccourcir le contenu long en conséquence et créer un lien vers une sous-page, par exemple. De cette façon, les visiteur·euse·s peuvent décider elles ou eux-mêmes si ces informations sont pertinentes ou non pour elles ou eux.
• Modifie la disposition de ton contenu : tu peux revoir la structure de ton contenu et l'organiser différemment sur les appareils mobiles. Les produits pourraient alors occuper la première place et les arrière-plans de la boutique viendraient ensuite. De cette façon, tu évites les défilements inutiles tout en affichant l'intégralité du contenu.

Dans l'exemple suivant, j'ai adapté le contenu du site web d'un restaurant (à gauche) pour le rendre plus ergonomique. J'ai raccourci le texte et créé un lien vers une sous-page avec un CTA (à droite). J'ai également ajusté la typographie, mais nous y reviendrons plus tard.

2. La mise en page

Dans son article Design for Fingers, Touch, and People, Steven Hoober présente les résultats de ses recherches approfondies sur l'utilisation des smartphones. La technique du pouce est souvent utilisée comme guide. Ici, c'est le rayon que le pouce peut parcourir sur l'écran qui compte. Il est souvent suggéré que les coins supérieurs sont des zones absolument taboues que les utilisateur·rice·s ne peuvent atteindre. Selon les résultats de ses recherches, cela n'est toutefois pas tout à fait vrai.

Les six façons les plus courantes de tenir un smartphone sont les suivantes :

Il en résulte la répartition optimale suivante des éléments pour les smartphones :

Résultat : les informations les plus importantes doivent être placées au milieu de l'écran sur les appareils mobiles.

3. Minimalisme

Une approche minimaliste du design n'est jamais mauvaise. Cependant, surtout sur un petit appareil, nous nous sentons à l'étroit et désorienté·e·s par trop de contenu et trop peu d'espace blanc. Il devient difficile de savoir quelles informations sont cachées et comment on y parvient.

La version mobile de Streetartnews apparaît structurée et claire. Sur les pages de contenu, il n'y a que les éléments les plus nécessaires et une police Serif bien lisible avec un interligne approprié :

4. Cohérence

Il est important que ton site web soit cohérent sur toutes les plateformes. Google a résolu ce problème de manière très élégante. Quel que soit l'appareil à partir duquel j'accède à Google, je reconnais immédiatement la marque Google.

Ta marque doit également se refléter sur les appareils mobiles, malgré le design minimaliste. Si ton site web dispose d'un espace utilisateur, les modifications apportées doivent être adoptées en conséquence sur tous les appareils.

5. Médias

Les images doivent avoir une taille appropriée et être affichées dans cette taille, de sorte que rien ne doit être déformé ou mis à l'échelle. Cette méthode permet également d'éviter les chargements inutilement longs. La transition entre le format paysage et le format portrait peut être la plus difficile : en fonction du contenu de l'image, tu dois soit n'afficher qu'une partie de l'image, soit rendre tes images supplémentaires pour les appareils mobiles. Pour les sites web comportant de nombreuses images, tu dois intégrer le Lazy Loading ou utiliser le plugin WordPress correspondant. 

Il en va de même pour les vidéos. Ici aussi, elles passent de paysage à portrait. Les vidéos doivent également être réglées pour fonctionner en sourdine et ne pas démarrer toutes seules. Les vidéos doivent généralement être optimisées pour le web, mais cela est particulièrement important pour les appareils mobiles.

6. La typographie

La fonctionnalité de ton site web est toujours plus importante que son apparence. Cela inclut un texte lisible. La taille par défaut du texte en HTML est de 16px. Cette taille est utilisée sauf si tu spécifies le contraire. Toutefois, en fonction de la police, ton texte peut apparaître plus ou moins grand. 

Pour rendre la typographie plus lisible, il faut toutefois tenir compte de quelques autres éléments :

• Contraste entre la couleur de la police et le fond : ce point est particulièrement important, notamment parce que les appareils mobiles sont également utilisés en extérieur. Cela vaut également pour le reste de ton site web. Un bon contraste entre les éléments facilite la lecture de ton site web. ContrastChecker.com analyse ton choix de couleurs et te fait savoir si les couleurs combinées ont suffisamment de contraste entre elles.
• Espacement : si ton texte est trop rapproché, il devient de plus en plus difficile à lire. L'espacement des lignes pour les appareils de bureau et les appareils mobiles peut être différent.
• Centrage : ma règle de base est de ne jamais utiliser la justification sur les sites web. La justification peut sembler agréable à première vue, mais elle fait en sorte que le flux de la lecture soit interrompu. Le type centré a un effet similaire. Les sections de texte sur les appareils mobiles ne doivent donc être centrées que dans des cas particuliers.

Voici à nouveau l'exemple d'EggShop : pour rendre le texte (à gauche) plus lisible, j'ai augmenté la taille de la police à 16px et réglé la hauteur de la ligne à 1,7 (à droite). J'ai également centré le texte sur la gauche et réduit certains espaces vers le haut, supprimé le double en-tête. Dans la version de bureau, le double titre a un sens. Sur les mobiles, cela ne fait que créer des espaces vides et des doublons indésirables. 

Tu peux aller un peu plus loin et mettre les mots-clés en gras. Cela permet aux utilisateur·rice·s de parcourir le texte encore plus rapidement tout en prenant des informations qui leur sont pertinentes. Certaines polices sont généralement très peu adaptées aux petits écrans car elles perdent leur lisibilité à l'échelle. Même les polices légères qui sont élégantes sur le bureau peuvent être moins lisibles sur le smartphone.

7. Navigation

La navigation de ton site web doit être aussi intuitive que possible. Cela signifie que lorsque tu crées ton architecture de navigation, il est préférable d'utiliser les structures existantes comme guide. Cela permet aux utilisateur·rice·s de naviguer plus facilement sur ton site web. L'intuition consiste, par exemple, à faire défiler les pages vers le bas et vers le haut pour naviguer sur un site web, mais pas nécessairement vers la gauche ou la droite.

Un menu vertical est devenu le menu principal sur les mobiles. Mais aussi sur le bureau, nous voyons de plus en plus souvent un menu vertical au lieu d'un menu horizontal. Au-dessus ou en dessous de celui-ci se trouve généralement le menu secondaire, si nécessaire un peu moins visible. Il peut également être situé en bas. 

Les menus secondaires peuvent être, par exemple, des paramètres de langue ou des liens vers des réseaux sociaux. Si un menu tertiaire est nécessaire, il sera placé sous forme de menu dépliant. Il peut s'agir d'une connexion ou d'une déconnexion, par exemple.

Si ton site web est plus qu'une simple page, il est particulièrement important que les visiteur·euse·s puissent toujours trouver facilement où iels se trouvent.

CTA et liens

Les éléments interactifs doivent être affichés en plus grand format. Ainsi, les visiteur·euse·s de ton site web savent ce qu'iels peuvent faire sur ton site et sont capables de cliquer sur ce qu'iels veulent. La disposition des uns par rapport aux autres joue également un rôle. Il faut laisser suffisamment d'espace pour réduire le risque de toucher accidentellement le mauvais lien ou le mauvais bouton. Les boutons tels que "Déconnexion", "Supprimer", "Soumettre" doivent également être placés à distance des autres appels à l'action afin qu'ils ne soient pas déclenchés accidentellement.

Interaction cachée

Il est assez courant d'autoriser les interactions par plusieurs voies, tant qu'il existe un moyen pour les nouvelles et nouveaux visiteur·euse·s de continuer à utiliser ton site. Cela te permet d'offrir des raccourcis aux utilisateur·rice·s qui reviennent sans rendre les débuts difficiles.

Liens

Si tu souhaites ajouter davantage de fonctionnalités à ton site web, il est judicieux d'utiliser les systèmes existants au lieu d'en programmer de nouveaux. Cela s'applique, par exemple, lorsque l'e-mail client·e de l'utilisateur·rice est utilisé à la place d'un formulaire de contact ou lorsqu'il s'agit d'intégrer des instructions via l'application préférée de l'utilisateur·rice. Cela leur facilite l'utilisation de ton site web dans la mesure où iels peuvent utiliser des applications déjà apprises pour résoudre certaines tâches.

8. Modèles de conception de l'interface utilisateur

Comme pour les appareils de bureau, il est bon d'utiliser des solutions éprouvées, également appelées "modèles de conception d'interface utilisateur", lors de la création de ton site web ou de ta boutique en ligne. Certains de ces modèles s'appliquent à tous les appareils, d'autres sont plus spécifiques. En outre, ce livre électronique de UXPin s'est avéré être un bon point de référence.

Les petits écrans, en particulier, offrent peu d'espace pour la navigation. Les sites web non structurés et confus sont particulièrement visibles.

Comme pour les modèles de conception d'interface utilisateur, il est conseillé de s'orienter vers des sites web et des applications web à succès déjà existants et de les analyser :

• Où se trouve habituellement le menu ?
• Comment ça se présente ?
• Que se passe-t-il quand j'appuie dessus ? 

Toutefois, tu dois faire preuve d'esprit critique pour ne pas copier d'erreurs ou de "mauvais" éléments d'interface utilisateur. 

9. Formulaires

Les longs formulaires peuvent être fatigants et se révéler rapidement confus. En général, tu ne devrais utiliser les formulaires sur les appareils mobiles que si cela est nécessaire. Lorsque tu intègres des formulaires, tu devrais veiller à ne demander que les données réellement nécessaires et à fournir à l'utilisateur·rice le clavier approprié. Pour ce faire, tu utilises des types de formulaires HTML appropriés. Cela indique au navigateur ce qu'est l'entrée, et le clavier approprié est fourni.

Tu peux également intégrer le remplissage automatique ou la suggestion de contenu. Tu peux aussi utiliser la connexion aux réseaux sociaux au lieu d'un long processus d'inscription.

10. Retour d'information

Puisque nous utilisons des appareils mobiles avec nos mains, nous avons tendance à nous attendre à recevoir un véritable retour d'information, un retour d'information basé sur des objets réels. Il peut s'agir, par exemple, d'un bouton qui semble être enfoncé lorsque nous l'appuyons.

Si ce type de retour d'information ne correspond pas à ton concept, il est tout de même important de fournir un retour d'information. Qui n'a pas appuyé plusieurs fois de suite sur un lien ou un bouton et ne s'est pas demandé·e si cela ne fonctionnait pas ou si la connexion Internet était interrompue ? Ceci est à éviter. Il existe des astuces courantes pour cela, comme le chargement d'animations. L'important est que l'utilisateur·rice sache que son interaction a fonctionné et que quelque chose va se produire.

11. Gestion des erreurs

Des erreurs arrivent. Tu as accidentellement cliqué sur le mauvais lien et tu t'es retrouvé·e sur le mauvais site web, ou tu soumets quelque chose qui n'était pas encore prêt. Il est important que les erreurs n'aient pas (ou le moins possible) de conséquences négatives. Les fonctions d'annulation et les boutons de retour sont utiles pour cela. Le bouton d'accueil est également incroyablement important ici : c'est le point d'ancrage si tes utilisateur·rice·s se perdent. Ainsi, iels savent toujours comment revenir à la page d'accueil.

12. Vitesse

Le temps de chargement de ton site web peut également être un problème sur les appareils mobiles, surtout si tu souhaites accéder à partir de réseaux instables, le temps d'attente ne doit pas être si long qu'il décourage les visiteur·euse·s.

13. Accessibilité

L'accessibilité est un sujet multiplateforme qui gagne enfin de l'importance. L'idée de base et la mission est que le web doit être accessible à tou·te·s. Ceci est particulièrement pertinent pour les personnes souffrant de handicaps qui peuvent affecter la façon dont iels accèdent et utilisent le web.

Si tu ignores la question de l'accessibilité, tu exclues déjà aujourd'hui 20 % de la population mondiale de la possibilité d'utiliser ton site web. En bref, négliger l'accessibilité n'est pas bon pour ton entreprise et, plus important encore, nuit terriblement à la création d'un monde plus juste et équitable.

Outils pour les tests UX

En fonction de la façon dont ton site web est construit, il se peut que tu disposes d'un moyen de modifier directement la vue mobile. En règle générale, quelques ajustements manuels du CSS sont nécessaires. Plusieurs possibilités peuvent être testées :

• Outils d'inspection dans le navigateur : les navigateurs les plus courants offrent la possibilité d'inspecter ton site web à l'aide des outils dits de développement. Tu peux également y vérifier ton site web dans différentes tailles d'appareils. D'autres bons outils pour tester les sites web sont Responsinator et BrowserStack Responsive.

• Dans l'appareil : le moyen le plus efficace de voir ton site web est l'appareil lui-même. Les tests sur ton propre téléphone portable ou tablette ne devraient donc jamais manquer. Comme il serait très coûteux de posséder chaque appareil à la maison, il existe des émulateurs.
• Émulateurs : ce logiciel est fourni par le fabricant du système d'exploitation lui-même. Tu peux y développer et voir tes résultats directement dans le navigateur, en fonction de la taille de l'appareil et du système d'exploitation correspondant (Android ou iOS).

Conclusion : meilleures pratiques en matière de design mobile

En mettant en œuvre ces conseils, tu peux améliorer ton expérience mobile et attirer davantage de client·e·s. Peut-être que les exemples et les meilleures pratiques t'aideront à développer de nouvelles idées pour ton site web. Malheureusement, le design mobile est encore souvent négligé sur un site web, ce qui a un impact négatif sur le taux de conversion des utilisateur·rice·s mobiles.

Pour plus d'informations sur le design UX mobile, je te recommande vivement les Web Fondamentals de Google et cet article pour une meilleure conception UX mobile.