Qui dit mobile, dit règles d’ergonomie mobile et Mobile Index First, et conception Mobile First.
En effet, il faut garder en tête que les critères d’usage sur le device mobile sont spécifiques et ont beaucoup évolué. Egalement que le trafic mobile dépasse le trafic desktop au niveau Monde (ratio plutôt 50/50 pour la France).
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.
Voyons ensemble les règles d’ergonomie sur device mobile qui vous permettront de faire vivre à vos utilisateurs mobiles des expériences positives.
Définir 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 #1 : 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.
Règles d’ergonomie mobile #2 : 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.
Règles d’ergonomie mobile #3 : 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.
Règles d’ergonomie mobile #4 : 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.
Règles d’ergonomie mobile #5 : Soigner les icônes
Il faut des icônes claires, bien dessinées, évocatrices afin que l’utilisateur soit aidé dans sa navigation.
Règles d’ergonomie mobile #6 : 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).
Règles d’ergonomie mobile #7 : 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.
Règles d’ergonomie mobile #8 : 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.
Règles d’ergonomie mobile #9 : 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.
Règles d’ergonomie mobile #10 : 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.
Règles d’ergonomie mobile #11 : Un fil d’Ariane
Prenez le temps d’ajouter un fil d’Ariane afin d’aider votre mobinaute dans sa navigation.
Règles d’ergonomie mobile #12 : 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).
Règles d’ergonomie mobile #13 : 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).
Règles d’ergonomie mobile #14 : 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).
Règles d’ergonomie mobile #15 : 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 #16 : 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 #17 : 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.
Les règles d’ergonomie mobile selon Bastien & Sapin
Règles Bastien & Scapin : 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 Bastien & Scapin : 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 Bastien & Scapin : 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 Bastien & Scapin : 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 Bastien & Scapin : 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 Bastien & Scapin : 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 Bastien & Sapin : 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 ?
Quelles questions de poser afin de créer une bonne navigation sur vos interfaces selon les règles ergonomiques ?
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 ?
Outils et ressources complémentaires autour des règles d’ergonomie mobile
Le respect des règles d’ergonomie des interfaces mobiles tend vers à améliorer l’expérience mobile et ainsi augmenter le taux de conversion et baisser le taux de rebond.
La conception centrée utilisateur se focalise par exemple sur le temps de chargement mais aussi sur les tests utilisateurs.
Comment rendre son site user friendly
Qu’est ce que le mobile index first de Google
Qu’est ce que l’ergonomie mobile ?
——————————–
>> https://paper.dropbox.com/doc/Criteres-ergonomiques-yJwJvEFhaLBtcHk6cKC62
>> https://stayintech.com/UX
>> http://ixdchecklist.com/
>> https://cindymillet.fr/assets/pdf/CindyMillet_Audit_UPEM.pdf
>> https://capian.co/fr/criteres-ergonomiques-bastien-scapin
>> http://www.ergognome.com/conception/bastien-et-scapin-cest-la-regle/
>> http://www.guillaumegronier.com/2017-ihm/resources/CriteresBastienScapin_v2.pdf
>> https://search.google.com/test/mobile-friendly?hl=fr
