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 design UX mobile ?

Les 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. En général, la présentation responsive est 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.

Le design de l'expérience utilisateur est basé sur la résolution de problèmes. La question de départ est toujours la suivante : quels sont les problèmes que les utilisateurs peuvent 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 fortement influencée par les influences extérieures : il peut y avoir du bruit autour de nous. Il se peut aussi que nous soyons en mouvement - l'interaction avec le téléphone est moins précise. L'influence de la lumière peut changer rapidement entre une lumière éclatante et une lumière sombre. La réception peut passer de bonne à mauvaise, voire s'interrompre complètement. Les visiteurs de ton site WordPress utilisent peut-être des tarifs 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 donc tes utilisateurs:trices moins détendus. Nous avons généralement moins de patience, car nous avons moins de temps pour les tâches individuelles. Si quelque chose ne fonctionne pas en un rien de temps - ou si nous devons attendre trop longtemps pour que le contenu se charge - nous avons tendance à abandonner le processus sur le smartphone 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'à savoir si ton site WordPress est optimisé pour les mobiles ? Pour mieux résumer ce que cela signifie en détail, j'ai résumé pour toi 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 longs textes 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 portable veulent 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 le contenu : Pour certains contenus, il peut être utile de les masquer complètement. Cela peut être le cas s'il s'agit de quelque chose qui ne fonctionne pas de toute façon sur le téléphone. Ou si le volume de données consommé dépasse les avantages pour les utilisateurs.
• Raccourcir le contenu : tu peux reprendre la structure de ton site WordPress, mais raccourcir le contenu long en conséquence et le relier par exemple à une sous-page. Ainsi, les visiteurs peuvent décider eux-mêmes si cette information est pertinente 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 mis à l'échelle. Cela permet également d'éviter un chargement inutilement long. La transition entre le format paysage et le format portrait peut être la plus difficile : Selon le contenu de l'image, tu dois soit montrer une partie de l'image, soit cibler tes images pour les appareils mobiles. Pour les sites 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 le fond : c'est particulièrement important parce que les appareils mobiles sont aussi 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 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 pourrais aller un peu plus loin et mettre les mots-clés en gras. Ainsi, les utilisateurs peuvent parcourir 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. 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.

Un menu vertical s'est imposé comme menu principal sur mobile. Mais sur le bureau aussi, nous voyons de plus en plus souvent un menu vertical au lieu d'un menu horizontal. Au-dessus ou en dessous, on trouve généralement le menu secondaire, si nécessaire un peu moins proéminent. Il peut aussi 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. Ainsi, les visiteurs de ton site savent ce qu'ils peuvent faire sur ton site. Et ils sont capables de cliquer sur ce qu'ils 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 cliquer par erreur sur le mauvais lien ou bouton. Les boutons tels que "Se déconnecter", "Supprimer", "Envoyer" doivent également ê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 conseillé d'utiliser des solutions éprouvées, également appelées UI Design Patterns, pour créer ton site web ou ton magasin en ligne. Certains de ces modèles sont communs à tous les appareils, d'autres sont plus spécifiques. En outre, ce livre électronique d'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 ? 

Cependant, tu dois faire preuve d'esprit critique pour ne pas copier des erreurs ou des "mauvais" éléments UX. 

9. Formulaires

Les longs formulaires peuvent être fatigants et peuvent rapidement paraître confus. En général, tu ne dois utiliser les formulaires sur les appareils mobiles que si cela est nécessaire. Lorsque tu intègres des formulaires, tu dois veiller à ne demander que les données nécessaires et à fournir aux utilisateurs le clavier approprié. Tu peux le faire en utilisant les types de formulaires HTML appropriés. Cela indique 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 appuyé plusieurs fois de suite sur un lien ou un bouton sans savoir s'il ne fonctionnait tout simplement pas ou si la connexion Internet avait disparu. Il faut éviter cela. Pour cela, il existe des astuces courantes comme les animations de chargement. Il est important 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 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 sur le design UX 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.