Comment adapter votre site sur mobile ? Voir Les 10 règles d’ergonomie mobile

règles d'ergonomie mobile

Table des matières

Faites la différence et dites oui à la réussite :)

>> Découvrez dans ce pack de bienvenue les ingrédients de votre réussite

>> Ayez la confiance nécessaire pour construire VOTRE offre, obtenez des prospects grâce à vos valeurs et à votre SEO !

>> Accès au groupe Telegram pour échanger et avoir des conseils.

Quel sujet passionnant que les règles d’ergonomie mobile !

Nous avons deux bonnes raisons de considérer que la conception des pages mobiles représente un véritable enjeu en terme de trafic et d’interactions :

  • Les critères d’usage sur le device mobile sont spécifiques.
  • La part du trafic sur le device mobile dépasse largement les 60% (et 61% des mobinautes ne reviendront pas sur un site si celui-ci n’est pas adapté au mobile).

Ainsi, adapter vos pages web au mobile et appliquer les règles d’ergonomie mobile n’est plus une option, mais plutôt un prérequis obligatoire.

En effet, le respect des règles d’ergonomie mobile est essentiel pour la bonne navigation sur vos pages, et ainsi générer du trafic et des interactions sur vos pages.

La simple application du responsive web design sur vos pages web ne suffit pas.

Alors dans ce contexte, quelles sont les règles d’ergonomie mobile à respecter ?

Voyons tout cela en détail.

 

Sommaire

 

  • Qu’est ce que l’ergonomie mobile ?
  • Quelles sont les particularités du device mobile ?
  • Focus sur les règles d’ergonomie mobile à suivre
  • Autres erreurs de conception mobile
  • Ergonomie mobile : Le plan d’action pour corriger les erreurs
  • Conclusion

 

Qu’est ce que l’ergonomie mobile ?

 

En résumant ce que j’ai pu glaner de-ci de-là sur l’ergonomie mobile (je ne parle pas de l’ergonomie web et encore moins de l’ergonomie de manière générale) : Il s’agit de l’ensemble des solutions rendant utiles et utilisables des pages mobiles , contenus, fonctionnalités et interactions des pages mobiles avec le plus de confort et d’efficacité possible.

Il s’agit donc de rendre vos interfaces mobiles les plus utilisables possibles. L’objectif étant de générer des interactions et du trafic.

Pour ce faire, il convient de respecter les règles d’usage et d’utilisabilité sur mobile. Afin que l’utilisateur se sente le mieux possible.

 

Que signifient les termes “utile” et “utilisable” ?

 

Un site mobile est utile dès lors qu’il répond aux attentes et besoins de l’utilisateur cible pour lequel il a été conçu.

La norme ISO 9241 défini un site utilisable comme pouvant être utilisé avec efficacité, efficience et satisfaction.

Un site mobile doit être efficace : Doit permettre au mobinaute de réaliser la ou les action(s) souhaitée(s).

Un site mobile doit être efficient : Doit permettre au mobinaute de réaliser les actions demandées rapidement, de manière intuitive (sans avoir à réfléchir) et sans erreur (ou en tout cas avec gestion des erreurs facilitée).

Un site mobile doit satisfaire l’utilisateur cible : le site a été conçu pour lui. L’utilisateur doit y trouver les réponses et les informations qu’il cherche facilement. Le contenu doit être exhaustif et répondre au contexte de recherche de l’utilisateur. La navigation, l’architecture de l’information, l’arborescence doivent aider l’utilisateur dans son expérience sur le site et donc à réaliser son objectif.

 

Quelles sont les particularités du device mobile ?

 

Elles sont nombreuses et s’avèrent impactantes en terme d’usages. Voici le détail ci-dessous de ces particularités.

 

Tailles d’écrans

 

Il existe plus de 12 tailles d’écrans différentes entre les appareils mobiles et les tablettes. Et donc autant de problématiques d’affichages.

 

Résolutions d’affichage

 

Les résolutions d’affichage diffèrent entre les marques.  Sur les devices Windows l’affichage est limité à 2560 x 1600 pixels grâce à l’Universal Windows Platform de Microsoft.

Tandis que sur les devices Apple, les résolutions diffèrent selon le modèle du device / smartphone. Cela va de 960 x 640 à 1920 x 1080 pour les Iphone 6 et 6+.

Ici aussi de nombreuses problématiques d’affichage.

 

Les OS

 

Il existe IOS, Android, et Windows avec des versions différentes et des mises à jour à activer. Mêmes problématiques que cité ci-dessus.

 

Les Navigateurs

 

Les navigateurs les plus utilisés sont Chrome et Safari. Citons également Internet Explorer, Opera pour Android, Firefox, Silk

 

Navigation à la mano et expérience utilisateur

 

Sur Smartphone, on navigue avec ces doigts, son pouce, pour slider, scroller, cliquer sur un bouton et autres call to action. Utiliser les touches pour écrire devient ardu.

Ainsi remplir un formulaire s’avère bien plus complexe que sur Desktop, et cette contrainte doit donc être prise en compte.

 

Les contenus

 

Ils doivent s’adapter à la taille des écrans. Les informations essentielles doivent apparaitre très rapidement à l’oeil de l’utilisateur pour attirer son attention. Les usages mobiles diffèrent des usages desktop et l’affichage des contenus doit donc être adapté également.

 

Vibreur (canal haptique) et fonctions du smartphone

 

La fonction localisation du GPS s’avère essentielle du mobile. Il faut la prendre en compte lors de la conception des interfaces.

Attention à la mémoire sur le téléphone ainsi que la batterie qui fatiguent souvent rapidement à cause d’une utilisation fréquente et prolongée.

A noter également les permissions pour les applications (accès aux contacts, photos etc) qu’il faut anticiper. Les utilisateurs portent une attention particulière au respect de ces points de sécurité.

 

Il faut donc pouvoir prendre en compte ces différents points de détail.

 

Revenons sur les types de sites mobiles envisageables

 

Plusieurs scénarii peuvent se présenter pour votre site mobile :

  • Votre site est en responsive web design. Un seul nom de domaine, un seul site disponible en version web et desktop.
  • Vous avez un site mobile dédié, avec un domaine dédié. Vous avez un double travail de synchronisation des contenus entre le site “classique” et le site mobile.
  • Vous avez un PWA, Progressive Web App, qui est à la fois un site web et une application avec les fonctionnalités et la personnalisation d’une application.

Pour faire le choix technique, tout dépend de vos objectifs business et éditoriaux, de vos utilisateurs cibles et de leur fréquence d’utilisation de votre site.

La solution la plus simple reste tout de même le site en responsive web design.

 

Focus sur les règles d’ergonomie mobile à suivre

 

Voyons ensemble les règles d’ergonomie sur device mobile qui vous permettront de faire vivre à vos utilisateurs mobiles des expériences positives.

 

Règles d’ergonomie mobile : Adapter l’affichage de votre page à l’écran mobile

 

Par définition, les interfaces mobiles sont limitées en terme de largeur et de longueur, par rapport au desktop. Il est donc recommandé de simplifier l’affichage des contenus et de les épurer si possible (dans le cas de pages en responsive web design).

La taille de la page ne doit pas dépasser la taille de l’écran.

Concrètement, il s’agit de ne pas forcer l’utilisateur à devoir slider à droite ou à gauche pour faire apparaitre le reste du contenu qui dépasse l’écran.

D’où le besoin de n’afficher que les éléments vraiment importants : par exemple l’énorme footer en desktop peut disparaitre en mobile.

 

Agrandir les zones cliquables

 

Les boutons doivent être facilement cliquables avec le pouce (sans que l’utilisateur ait à élargir la page pour atteindre le bouton convoité). Ainsi, sur mobile, on évitera les liens textes, qui sont difficiles à atteindre et aussi dans certains cas à identifier. On leur préférera les boutons.

Chaque élément cliquable devrait mesurer 7 millimètres et être séparé de 2 millimètres des autres éléments.

Pourquoi ? Pour que l’utilisateur puisse cliquer facilement dessus.

 

Limiter l’utilisation du clavier

 

Utiliser le clavier numérique s’avère souvent complexe (selon la taille du pouce et des touches, et des espaces entre les touches).

C’est pourquoi en ergonomie mobile, on recommandera le plus possible de limiter l’utilisation du clavier, et donc d’utiliser les informations pertinentes stockées dans le téléphone.

Pour ce faire, on peut proposer de se loguer avec les login / mot de passe des réseaux sociaux, ou d’utiliser la géolocalisation du téléphone, ou les coordonnées déjà enregistrées.

 

Rendre les éléments cliquables « reconnaissables »

 

C’est ce qu’on appelle l’affordance. Sur mobile, l’utilisateur doit identifier tout seul les éléments de navigation, les éléments d’interactions. Les icônes et autres boutons doivent donc ressembler à des icônes et des boutons. Par exemple ils doivent avoir un effet bombé pour montrer qu’ils peuvent être enfoncés et ainsi cliqués.

L’écran est petit, chaque espace doit donc être réfléchi et utilisé à bon escient. Pas de place pour ajouter des tartines de textes, même au niveau des liens de navigation.

 

Soigner les icônes

 

Il faut des icônes claires, bien dessinées, évocatrices afin que l’utilisateur soit aidé dans sa navigation.

 

Utiliser les canaux sonore et haptique

 

Utiliser le vibreur est un bon moyen pour fournir un feedback (retour) à l’utilisateur (recevoir une notification, ou validation d’une action par exemple), puisque tout ne peut pas être communiqué sur une seule page.

Attention au canal sonore (selon le volume sonore autour de l’utilisateur).

 

Assurer la continuité des contenus

 

Que l’utilisateur soit sur l’application puis sur le site mobile, ou sur la tablette ou le site web il faut qu’il puisse retrouver les mêmes informations, les mêmes contenus, et qu’il puisse poursuivre les interactions ou les commandes qu’il a initiées, d’où l’intérêt de la synchronisation des informations sur le compte quelque soit le device.

 

Exploiter les outils « mobiles »

 

Pensez bien sûr aux fonctions géolocalisation, appareil photo, micro qui peuvent participer à la bonne expérience vécue par l’utilisateur sur les pages mobiles.

 

Penser au contexte d’utilisation et adapter la charte graphique

 

Pour les applications, on pensera à une version graphique jour et nuit selon la luminosité ambiante, sombre la nuit, éclairée le jour. Les signaux sonores seront également affaiblis la nuit.

 

Faire simple, penser simple

 

Faciliter le plus possible la navigation de l’utilisateur, il vous le rendra par le trafic, le volume de pages vues, et les interactions générées.

Pour faciliter cette navigation, rien de mieux que de faire simple. L’utilisateur ne doit pas avoir à réfléchir ou à s’imposer une charge mentale (si c’est le cas, révisez vos interfaces et votre parcours utilisateur).

Pensez avant tout à l’utilisateur. Qu’est ce qu’il cherche ? Qu’est ce qu’il veut ? Apporter lui tout sur un plateau.

 

Un fil d’Ariane

 

Prenez le temps d’ajouter un fil d’Ariane afin d’aider votre mobinaute dans sa navigation (et c’est bon aussi pour les moteurs de recherche).

 

Des interfaces simplifiées

 

La contrainte d’affichage sur le device mobile force à prioriser et limiter la présentation des différents contenus. En amont, il faut donc mener un travail de réflexion sur les éléments prioritaires, secondaires, urgents, et optionnels (selon les objectifs business, et éditoriaux). Attention toutefois de ne pas rentrer dans une approche simpliste. Affichez vos contenus importants (ceux à forte valeur ajoutée), même s’ils sont longs mais faites attention aux blocs moins essentiels (je pense par exemple au footer).

En responsive web design, on peut très bien limiter le contenu sur mobile tant qu’il est présent dans le code source de la version desktop (C’est important pour Google de présenter les mêmes contenus entre desktop et mobile).

 

Une navigation facilitée

 

La navigation doit être visible sur toutes les pages, compréhensible et identifiable immédiatement, afin encore une fois de faciliter l’expérience de l’utilisateur sur vos pages.

Que cette navigation apparaisse sous forme d’un fil d’Ariane, d’icônes, ou d’un menu, elle doit être présente et cohérente sur toutes les pages (ne vous amusez pas à changer les codes couleurs ou la charte graphique d’une page à une autre).

 

Des accès sécurisés

 

Votre site mobile doit donc être en https, comme le recommande Google (raison évoquée la sécurisation des données des utilisateurs. Tous les secteurs ne sont pas concernés de la même manière).

 

La commande vocale mise à l’honneur

 

La commande vocale peut s’avérer une bonne alternative pour remplir un formulaire ou écrire un texte (le login avec les réseaux sociaux présente quelques contraintes) sur mobile.

Je ne parle pas ici de la recherche vocale effectuée avec les enceintes vocales qui correspond à d’autres problématiques (maturité des usages et des technologies). Mais simplement de facilité d’usage pour utiliser le clavier sur mobile.

 

Règles d’ergonomie mobile : Prendre en compte l’accessibilité

 

De par la position de la main sur le device mobile, et la position du pouce il s’avère plus aisé d’accéder à la zone de navigation située vers le bas de la page. D’où l’intérêt sur les applications et certains sites web d’afficher le menu en bas de page et non en haut de page comme c’est classiquement le cas.

La section jaune (haut de page) ne devrait pas comporter les boutons d’action essentiels.

 

Issu de https://www.lukew.com/ff/entry.asp?1927

La position des mains joue également un rôle selon qu’on navigue à une main, deux mains (avec un pouce ou deux pouces).

Les usages iraient dans ce sens (selon Arquen) :

  • Usage à une main : 49%
  • Usage à deux mains avec un pouce : 36%
  • Usage à deux mains avec les deux pouces : 15%

Tout dépend de ce que l’utilisateur cherche à faire, dans quel contexte et le lieu (assis, debout, statique, en mouvement). En tout cas, afficher les zones d’action en bas de page présente un gros avantage en terme d’ergonomie mobile.

 

Règles d’ergonomie mobile : Prendre en compte les zones relatives aux interactions et à la lecture

 

Nous avons vu juste ci-dessus que les interactions se généraient plus facilement en bas de page à cause de la position de la main sur le device. A l’inverse la lecture se fait plus facilement en haut de page.

D’où l’intérêt d’observer les comportements utilisateurs pour réorienter si besoin la conception des interfaces selon les constats faits.

 

Règles d’ergonomie mobile : La compatibilité

 

Il s’agit ici de l’adéquation entre les interfaces et l’utilisateur.

Exemple de question posée : L’application est-elle adaptée au profil des utilisateurs visés ?

Concrètement est ce que le design, l’architecture de l’information, le contenu éditorial, le parcours utilisateur, la proposition de valeur, et enfin l’utilisabilité présentés sur le site analysé correspondent aux besoins et contraintes des utilisateurs cibles ?

 

Règles d’ergonomie mobile : Guidage

 

Il s’agit ici des moyens mis à disposition de l’utilisateur pour s’orienter au sein des interfaces.

Exemple de question posée : Le système fournit-il un retour aux actions de l’utilisateur ?

L’utilisateur est-il bien guidé / orienté sur le site vers les zones et fonctionnalités qu’il souhaite ?

 

Règles d’ergonomie mobile : Homogénéité

 

Il s’agit ici de l’uniformité au niveau de l’utilisation et de la représentation des interfaces.

Exemple de question posée : Le fonctionnement de la souris est-il cohérent ?

 

 

Règles d’ergonomie mobile : Flexibilité

 

Il s’agit ici de la variété des moyens et solutions disponibles sur les interfaces pour atteindre un objectif.

Exemple de question posée : Une alternative rapide est-elle proposée à l’utilisation des menus ?

Par exemple, peut-on utiliser un moteur de recherche interne ? Si oui, celui-ci est-il bien mis en avant ? Renvoie-t-il des résultats pertinents ?

Les listes de résultats sont-elles exploitables ?

A coupler ensuite avec une analyse SEO, pour voir si lesdites pages de résultats ne sont pas en duplication de contenu avec les listes “classiques” faites pour les moteurs.

 

Règles d’ergonomie mobile : Contrôle utilisateur

 

Il s’agit de laisser à l’utilisateur la possibilité de garder la main.

Exemple de question posée : L’utilisateur peut-il quitter/abandonner/mettre en pause facilement un traitement en cours ?

Un exemple très simple : Au moment du chargement d’une page comportant une vidéo, il faut que l’utilisateur puisse de lui-même activer le démarrage de la vidéo et non que celle-ci démarre toute seule, comme je le vois encore très souvent.

 

Règles d’ergonomie mobile : Traitement des erreurs

 

On parle ici des possibilités données à la correction des erreurs.

Exemple de question posée : L’utilisateur est-il prévenu rapidement de son erreur ?

En tant qu’utilisateur, il est insupportable de ne pas pouvoir facilement corriger ses erreurs, ou de ne pas être prévenu rapidement de son erreur.

Le pire est de ne pas savoir comment corriger une erreur, faute d’information affichée.

 

Règles d’ergonomie mobile : Charge mentale

 

Concrètement il s’agit de réduire le travail de mémorisation de l’utilisateur.

Je suis assez fan de cette section. En effet, je suis convaincu qu’il faut autant que possible éviter de demander à l’utilisateur un effort de compréhension sur l’utilisation d’une interface.

Faciliter au maximum l’utilisation d’une interface permet une meilleure expérience vécue par l’utilisateur car celui-ci n’a pas rencontré de freins dans sa navigation et dans son expérience sur votre site.

Exemple de question posée : Les saisies sont-elles réduites au minimum ?

L’utilisateur doit-il se souvenir d’une manipulation spécifique pour réaliser une action ? Ou l’utilisateur doit-il faire l’effort de comprendre une action à réaliser dans un contexte d’utilisation spécifique ?

 

 

Les questions à se poser pour proposer une utilisabilité optimale

 

  • S’interroger sur la clarté des textes, la richesse et la pertinence des contenus.
  • S’interroger sur la présentation graphique et l’homogénéité des interfaces (par exemple l’aération de la mise en page, les codes couleurs, les choix des polices, et les images).
  • S’interroger sur l’accessibilité des informations, l’emplacement des différents éléments présents sur les pages.
  • S’interroger sur la gestion des erreurs, et les retours de l’outil selon les actions effectuées.
  • S’interroger sur la gestion de la charge cognitive, la fameuse charge mentale. Pour la réduire, il s’agit de diminuer les activités de perception et mémorisation.
  • L’affichage demande-t-il un effort de perception ?
  • Le temps de chargement des pages est-il acceptable ?
  • L’application est-elle adaptée au profil des utilisateurs visés?
  • L’utilisateur est-il assisté dans sa façon de se servir de l’application?
  • La navigation permet-elle d’accéder de manière fluide à l’ensemble des contenus et des fonctionnalités présentes sur le site ?
  • Les pages sont-elles suffisamment efficaces en terme d’ergonomie pour répondre aux besoins des utilisateurs ?

Les réponses à ces questions vont permettre de réorienter les décisions prises en terme de conception des interfaces.

 

Les règles ergonomiques selon vos objectifs business

 

Les règles ergonomiques dépendent avant tout de :

  • Votre modèle économique.
  • Vos objectifs business.
  • La conception de vos templates de pages.
  • La conception de votre parcours utilisateur.

Bref, vous l’aurez compris, elles diffèrent entre un site e-commerce, et un site portail.

 

L’analyse de l’ergonomie (autant web que mobile) se matérialise par une liste de problèmes synthétisés et priorisés. Chaque problème se voit attribuer un niveau de gravité selon son impact sur la performance de l’utilisateur. Deux types de problèmes ergonomiques apparaissent :

► Problème mineur : il ralentit l’utilisateur dans l’accomplissement de sa tâche.
► Problème majeur : il empêche l’utilisateur de finaliser sa tâche.

Vous l’aurez compris, ce sont les problèmes majeurs qui doivent être traités en premier (selon vos ressources en interne).

 

 

Règles d’ergonomie mobile : Navigation sur vos interfaces

 

Il s’agit ici d’identifier si les axes de navigation affichés sur votre site permettent d’accéder aux contenus souhaités.

Parmi les questions importantes à se poser, voici quelques exemples :

  • Le fil d’Ariane est identifiable / l’internaute a des repères visuels pour situer son parcours ?
  • Le menu est-il toujours présent ?
  • Les liens ressemblent réellement à des liens / ils ne sont pas cachés dans le texte. => Oui ? Non ?
  • Les contenus publicitaires ou sponsorisés sont identifiés comme tels. => Oui ? Non ?
  • Les boutons dʼaction sont identifiables. => Oui ? Non ?
  • Les éléments principaux de la page sont visibles sans “scroller”. => oui ? non ?
  • Les couleurs et les contrastes aident la lisibilité . => Oui ? Non ?

 

Quels sont les outils utiles à l’analyse de l’ergonomie mobile de vos pages

 

Voici ci-dessous des liens vers des grilles d’évaluation des critères d’ergonomie mobile (à utiliser dans le cadre d’audit d’ergonomie web et mobile) :

La Search Console a prévu un onglet spécifique dédié à l’ergonomie mobile.

règles d'ergonomie mobile - rapport de la search console

règles ergonomie mobile - rapport search console #2

Autres erreurs de conception mobile

 

D’autres erreurs de conception mobile peuvent empêcher les robots des moteurs de recherche de comprendre et indexer les contenus de vos pages mobiles, voyons lesquelles :

Fichiers JavaScript, CSS et image bloqués

 

Googlebot (robot d’indexation de Google) doit pouvoir lire ces fichiers css, js, et images. Il ne faut pas les interdire dans le robots.txt.

Gestion des fichiers vidéos

 

Vos vidéos doivent pouvoir se lire sur vos pages mobile. Autrement l’expérience utilisateur sera déceptive.

Dans ce cas il vaut mieux utiliser des animations html 5.

Utiliser une intégration vidéo accessible via tous les devices.

Mettre la transcription vidéo à disposition des internautes.

Gestion des redirections entre le site mobile et le site desktop

 

Si vous avez un site mobile, avec des url mobile spécifique, pensez toujours à rediriger le mobinaute vers la page mobile correspondante et non vers la page d’accueil.

De même pour les pages 404.

Eviter les interstitiels

Attention au temps de chargement pour mobile

 

 

Une fois les correctifs ergonomiques identifiés, place au plan d’action

 

Maintenant que les correctifs sont identifiés, il faut pouvoir les prioriser.

A mon sens, deux critères de priorisation apparaissent :

  • Enjeu mineur ou majeur (selon la “gravité” : entrave-t-il ou pas la navigation de l’utilisateur sur votre site ?).
  • Ce correctif concerne-t-il des objectifs business importants ?

A vous d’identifier les niveaux d’urgence des correctifs.

Une fois que vous les avez priorisé, il faut les intégrer dans votre feuille de route (= plan d’action).

Si vous avancez dans vos projets en mode scrum, vous pouvez intégrer les correctifs dans les sprints à venir et selon votre charge de travail.

Quelle que soit votre méthode de gestion de projets, il faut que vous gardiez un certain équilibre dans l’ensemble des tâches de votre plan d’action : les correctifs ergonomiques doivent pouvoir s’étaler dans le temps selon les niveaux d’urgence et selon vos ressources et vos capacités opérationnelles.

 

Règles d’ergonomie mobile : Rappel de 3 axes essentiels lors de la création d’un site adapté aux mobiles

 

  • Facilitez la navigation.
  • Suivez bien le volume d’interactions que vous avez défini : il détermine l’efficacité de vos interfaces.
  • Concevez des interfaces uniformes et simples et pensées utilisateur quelque soit le device.

 

Règles d’ergonomie mobile : Rappel de trois erreurs communes

 

  • Ne pas mettre l’utilisateur au centre de vos réflexions.
  • Avoir un domaine différent par device.
  • Se renfermer sans chercher l’inspiration chez vos partenaires ou même concurrents.

 

Conclusion

 

Comme vous avez pu vous en apercevoir dans cet article une ergonomie mobile bien réalisée est essentielle pour proposer à vos utilisateurs mobiles une navigation et une expérience optimale.

Pour ce faire un certain nombre de règles sont à suivre et à respecter. Mais surtout, pensez utilisateur.

Pour aller plus loin sur les règles de l’ergonomie mobile, voici un document excel listant les points d’attention sur lesquels se focaliser pour réaliser un audit de l’ergonomie de vos pages web et mobiles.

Si votre site est sur WordPress, vous pouvez paramétrer bon nombre de points d’ergonomie via l’administration de votre thème.

Une question ? Un besoin ? Une demande d’information ?

D'autres sujets à découvrir sur le même sujet