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 le Mobile UX Design ?

Des mouvements de design comme Mobile First tentent depuis longtemps d'attirer notre attention vers les téléphones portables. Aujourd'hui, la plupart des sites web professionnels fonctionnent bien sur les appareils mobiles. Les designers consciencieux y contribuent bien sûr. Mais même ceux qui gèrent un site WordPress utilisent souvent des frameworks comme Bootstrap ou des thèmes WordPress prédéfinis. La présentation responsive y est généralement déjà intégrée. Cela permet aux développeurs de gagner beaucoup de temps. 

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 visiteurs qui consultent ton site WordPress via des appareils mobiles ont d'autres besoins qui ne sont pas forcément satisfaits par la seule adaptation esthétique et technique du site WordPress.

Ledesign de l'expérience utilisateur est basé sur la résolution de problèmes. La question de départ est toujours la suivante : quels problèmes les utilisateurs peuvent-ils rencontrer et comment les résoudre ? En ce qui concerne les appareils mobiles, tu dois donc te poser une question centrale : Quels sont les problèmes supplémentaires qui surviennent lorsque les utilisateurs visitent ton site WordPress à partir d'un appareil mobile ?

Nous sommes nombreux à utiliser nos smartphones, surtout en déplacement. L'expérience utilisateur est alors fortement influencée par les influences extérieures : il peut y avoir du bruit autour de nous. Il se peut également que nous soyons en mouvement - l'interaction avec le téléphone est moins précise. L'influence de la lumière peut varier rapidement entre une lumière éclatante et une lumière sombre. La réception peut passer de bonne à mauvaise, voire être interrompue. Les visiteurs de ton site WordPress utilisent peut-être des forfaits prépayés et essaient donc d'éviter les sites qui consomment beaucoup de données en peu de temps.

La position peut être moins confortable et tes utilisateurs moins détendus. Nous sommes généralement moins patients, car nous avons moins de temps à consacrer à des tâches individuelles. Si quelque chose ne fonctionne pas dans les plus brefs délais - ou si nous devons attendre trop longtemps avant que le contenu ne se charge - nous avons tendance, sur le smartphone, à interrompre le processus et à consacrer notre brève attention à un autre site WordPress.

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 ?

Il ne reste plus qu'une question : ton site WordPress est-il optimisé pour les mobiles ? Pour mieux résumer ce que cela signifie en détail, je t'ai résumé les principes UX les plus importants pour le design mobile.

13 Principes de conception UX mobile

1. Le contenu

Les visiteurs de ton site web ont des objectifs différents, selon l'appareil qu'ils utilisent pour accéder à ton site. Les textes longs sur les appareils mobiles impliquent souvent de faire défiler les pages pour trouver ce qu'ils sont venus chercher. En tant qu'utilisateurs mobiles, nous recherchons principalement des informations rapides et concises. Les personnes qui visitent ta boutique sur leur téléphone mobile souhaitent probablement savoir quels produits tu proposes plutôt 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 :

• Supprimer complètement les contenus : Pour certains contenus, il peut s'avérer utile de les masquer complètement. Cela peut être le cas lorsqu'il s'agit de quelque chose qui ne fonctionne de toute façon pas sur le téléphone. Ou si le volume de données consommé dépasse l'utilité pour l'utilisateur.
• Raccourcir les contenus : tu peux reprendre la structure de ton site WordPress telle quelle, mais raccourcir les contenus longs en conséquence et les relier par exemple à une sous-page. Les visiteurs peuvent ainsi décider eux-mêmes si cette information est pertinente pour eux ou non.
• 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 doive être déformé ou redimensionné. Cela permet également d'éviter les chargements inutilement longs. Le passage du format paysage au format portrait peut être le plus difficile : Selon le contenu de l'image, tu devrais soit n'afficher qu'une partie de l'image, soit déposer tes images de manière ciblée pour les appareils mobiles. Pour les sites web avec beaucoup d'images, tu devrais intégrer Lazy Load ou utiliser les plugins WordPress correspondants. 

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 l'arrière-plan : c'est particulièrement important étant donné que les appareils mobiles sont également utilisés à l'extérieur. Cela vaut également pour le reste de ton site web. Un bon contraste entre les éléments facilite la consultation de ton site web. ContrastChecker.com analyse ton choix de couleurs et te permet de savoir si les couleurs combinées sont suffisamment contrastées 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. 

On pourrait aller un peu plus loin et mettre les mots-clés en gras. Cela permet aux utilisateurs de survoler le texte encore plus rapidement tout en retenant les informations pertinentes. Certaines polices ne sont généralement pas adaptées aux petits écrans, car elles perdent leur lisibilité lorsqu'elles sont redimensionnées. De même, les polices légères, qui sont élégantes sur un ordinateur de bureau, peuvent être moins lisibles sur un 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.

Le menu vertical s'est imposé comme menu principal sur mobile. Mais sur le bureau également, nous voyons de plus en plus souvent un menu vertical au lieu d'un menu horizontal. Au-dessus ou en dessous se trouve généralement le menu secondaire, si nécessaire un peu moins proéminent. Il peut également se trouver 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. Les visiteurs de ton site savent ainsi ce qu'ils peuvent faire sur ton site. Et ils sont en mesure de cliquer sur ce qu'ils veulent. La disposition des éléments les uns par rapport aux autres joue également un rôle. Il faut laisser suffisamment d'espace libre pour réduire le risque de cliquer par erreur sur le mauvais lien ou bouton. Les boutons tels que "Se déconnecter", "Supprimer", "Envoyer" doivent en outre être placés à distance des autres appels à l'action afin qu'ils ne soient pas déclenchés par inadvertance.

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 ordinateurs de bureau, il est judicieux de recourir à des solutions éprouvées, également appelées UI Design Patterns, lors de la création de ton site web ou de ta boutique en ligne. Certains de ces patterns sont communs à tous les appareils, d'autres sont plus spécifiques. En outre, cet e-book d'UXPin s'est avéré être un bon point de repère.

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 rapidement confus. En règle générale, tu ne dois utiliser les formulaires sur les appareils mobiles que si cela est nécessaire. Lors de l'intégration de formulaires, tu dois veiller à ne demander que les données nécessaires et à mettre à disposition des utilisateurs le clavier correspondant. Pour ce faire, tu dois utiliser des types de formulaires HTML appropriés. Cela permet d'indiquer au navigateur de quelle entrée il s'agit. Et le clavier approprié est mis à disposition.

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 feedback ne correspond pas à ton concept, il est tout de même important de donner un quelconque feedback. Qui n'a pas déjà appuyé plusieurs fois de suite sur un lien ou un bouton en se demandant s'il ne fonctionnait tout simplement pas ou si la connexion Internet avait disparu. Il faut éviter cela. Il existe pour cela des astuces courantes comme les animations de chargement. L'important est que les utilisateurs sachent que leur interaction a fonctionné et qu'il va se passer quelque chose.

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 permettent d'inspecter ton site web avec ce que l'on appelle les outils de développement. Tu peux également y inspecter 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 sur le Mobile UX Design

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.