Meilleures pratiques de conception UX mobile

Mobile UX Design : conseils pour l'optimisation mobile de ton site web

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 ?

Utilisation des smartphones en Allemagne

Selon Statista.com en 2020, 97,5% des ménages en Allemagne avaient un ou plusieurs téléphones mobiles. Cela représente un pourcentage de 80% d'utilisateurs mobiles d'Internet. Parmi eux, 24,1% utilisaient un contrat prépayé. Pour 2023, on prévoit une augmentation de 66,5 millions d'utilisateurs de smartphones à 68,6 millions.

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.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

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.

Meilleures pratiques de conception UX mobile
Version mobile originale d'un site web d'exemple
Meilleures pratiques de conception UX mobile
Version mobile optimisée d'un site web d'exemple

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 :

Meilleures pratiques de conception UX mobile
Comment les gens préfèrent tenir leurs smartphones

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

Meilleures pratiques de conception UX mobile
La meilleure mise en page pour le contenu primaire, secondaire et tertiaire

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é :

Meilleures pratiques de conception UX mobile
La hiérarchie visuelle est d'autant plus importante lorsqu'elle est mobile.
Meilleures pratiques de conception UX mobile
Un interligne plus grand est plus facile à lire sur les appareils mobiles.

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.

Meilleures pratiques de conception UX mobile
La version de bureau de Google
Meilleures pratiques de conception UX mobile
Et voici à quoi ressemble Google sur la tablette.
Meilleures pratiques de conception UX mobile
La version mobile de 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. 

Optimiser les images WordPress : 6 plugins pour compresser les images

Optimiser les graphiques et les images pour ton site WordPress est une étape simple et importante pour améliorer ton temps de chargement. Nous te présentons six plugins WordPress populaires qui te permettront d'effectuer ce travail. Compression de tes images Tu n'as plus à t'inquiéter.

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. 

Tout sur la typographie web et les polices de caractères

En règle générale, une taille de police de 16px est idéale pour les textes de corps et la saisie de texte sur les smartphones. Tu trouveras d'autres informations sur la typographie sur le web dans notre article "Comment trouver la police de caractères parfaite pour ton site web ?" et l'article de blog "Tape Sizes for Every Device" de UX Matters.

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.
Meilleures pratiques de conception UX mobile
Texte justifié sur une page type
Meilleures pratiques de conception UX mobile
Texte centré à gauche sur une page d'exemple

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.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

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.

Meilleures pratiques de conception UX mobile
La règle du pouce (Source : UX Matters)

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.

Meilleures pratiques de conception UX mobile
Air Inuit affiche les interactions de manière très claire et ergonomique.

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.

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. 

Meilleures pratiques de conception UX mobile
Crustac.fr a choisi le modèle d'interface utilisateur Burger Menu pour rendre la navigation intuitive pour tou·te·s.

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.

Meilleures pratiques de conception UX mobile
Social login (également appelé connexion unique) sur Pinterest.

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é

Accessibilité de WordPress : comment créer un site web accessible

L'accessibilité dans WordPress est une composante importante de la création de sites Web. Mais à quel point WordPress est-il accessible ? Pourquoi l'accessibilité est-elle si importante ? Et comment rendre ton site accessible à tous ? Si toi aussi tu te poses ces questions, notre site est fait pour toi. Guide de l'accessibilité C'est exactement ce qu'il te faut.

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.
Meilleures pratiques de conception UX mobile
Outils pour les développeur·euse·s sur Google Chrome
  • 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.

Tes questions sur le design UX mobile

Quelles questions as-tu à poser à Sonja sur le thème du design UX mobile ? Nous nous réjouissons de ton commentaire. Tu t'intéresses au design et au développement web ? Alors suis Raidboxes sur Twitter, Facebook, LinkedIn ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.