Qu’est ce que l’ergonomie mobile ? En quoi et pourquoi est-elle importante ? En quoi permettrait-elle d’offrir une meilleure expérience à vos utilisateurs cibles sur vos interfaces ? Quelles sont ces règles de conception ?
A l’heure de la bascule vers l’index mobile first de Google, de la hausse continue du trafic mobile, et de l’évolution des usages, la qualité de conception des interfaces mobiles devient de plus en plus stratégique.
>> Un mobinaute quittant vos pages car l’expérience ne le satisfait pas est un prospect perdu.
Les problématiques de conception d’interfaces web impliquent la prise en compte des règles d’ergonomie.
Tâchons de répondre à ces questions sur l’ergonomie mobile au sein de cet article.
Beaucoup d’idées reçues ou de mythes gravitent autour de l’ergonomie web, comme par exemple le responsive web design. Nous y reviendrons plus tard.
Qu’est ce que l’ergonomie mobile ?
En résumant ce que j’ai pu glaner de-ci de-là sur l’ergonomie mobile (et non l’ergonomie web et encore moins l’ergonomie au sens global) : 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 de faciliter la navigation des mobinautes afin de créer des expériences positives, et la génération d’interactions. On parle dans ce contexte précis d’ergonomie cognitive.
>> L’ergonomie repose sur des analyses et des constats concrets, réels, objectifs tandis que l’UX design concerne plutôt la dimension subjective et émotionnelle.
>> Une interface mobile serait considérée comme ergonomique si elle répond aux attentes des utilisateurs, et leur permet une navigation satisfaisante (sur le site et dans le corps des pages) et de réaliser les interactions ou conversions attendues.
>> L’ergonomie mobile implique que la page soit stable, fiable, accessible, rapide à charger, claire, organisée, facile à lire et à comprendre.
Qu’est-ce qu’un site utile ?
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.
Rendre vos interfaces mobiles ergonomiques contribue à rendre votre site et vos pages utiles.
En effet, vos interfaces sont utiles et utilisables pour les utilisateurs cibles.
Bien sûr il y a d’autres critères pour rendre vos pages et votre sites “utiles” et user friendly. Entre autres, il y a :
>> Afficher une proposition de valeur en lien avec les besoins des utilisateurs.
>> Afficher des contenus apportant de la valeur et des réponses aux besoins des utilisateurs cibles.
>> Afficher des éléments de réassurance.
>> …
Qu’est ce qu’un utilisable ? (Uilisabilité / Usabilité)
C’est la capacité d’une interface, d’une page à être facilement utilisable et utilisée par les internautes : à réaliser l’interaction qui lui est associée : téléchargement de livre blanc, inscription à un webinaire, etc.
La norme ISO 9241 défini un site utilisable comme pouvant être utilisé avec efficacité, efficience et satisfaction.
Selon Jacob Nielsen l’usabilité repose dans l’univers du digital sur :
>> L’efficience.
>> La satisfaction vécue par l’utilisateur sur l’interface.
>> La facilité à apprendre les codes de navigation du site naviguant sur les pages (c’est pourquoi le système de navigation doit être le même sur toutes les pages. Cela peut paraitre évident, mais il vaut mieux le rappeler).
>> La facilité d’appropriation, de mémorisation
>> La fiabilité, le faible taux d’erreurs (la page est-elle fiable ?).
Bref, l’objectif est que les pages puissent remplir leur mission business, satisfaire l’utilisateur et afficher l’homogénéité en terme de navigation, design, graphisme, header / footer, ancres de liens, UX writing.
>> 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 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.
Ergonomie mobile : Retour sur le terme “Mobile first”
Il s’agit de la conception d’interface entièrement focalisée sur les problématiques mobile : ergonomie, accessibilité, architecture de l’information, navigation.
Plus globalement, le terme désigne le fait de mettre la priorité sur le mobile.
Cette décision a des répercussions fortes sur les stratégies de marketing digital, les stratégies d’acquisition, de développement des interfaces.
“Mobile First” implique de ne plus voir le device mobile et le trafic mobile comme secondaires mais comme étant à part entière dans la stratégie digitale.
Ergonomie mobile : Retour sur le terme “IHM”
IHM signifie Interface Homme – Machine.
Ce terme désigne l’interface utilisateur entre l’humain et la machine : Les moyens utilisés par l’homme pour communiquer avec la machine. Il en est de même pour l’internet. Comment les utilisateurs peuvent se connecter à une interface et l’utiliser et arriver à un objectif. C’est là qu’intervient l’ergonomie. L’interface doit être utile et utilisable.
Exemple d’IHM du quotidien : Les bornes dans les gares pour réserver un billet de train.
Ergonomie mobile : Retour sur le terme “CCU”
CCU désigne “Conception Centrée Utilisateur”. Le fait de créer une interface en pensant en priorité aux besoins explicites et implicites des utilisateurs cibles.
Ergonomie mobile : Quel est le lien avec la charge mentale de l’internaute ?
L’objectif d’un site ou d’une page web est de limiter au maximum la charge mentale de l’utilisateur. C’est à dire qu’il ne devrait pas avoir à réfléchir à la manière d’atteindre son objectif et ainsi accumuler de la charge mentale.
Les interfaces doivent être suffisamment intuitives utiles et utilisables pour que l’utilisateur atteigne facilement ses objectifs.
Ergonomie mobile : Retour sur la notion de Responsive web design
C’est un design qui adapte automatiquement la largeur de la page à la largeur de l’écran.
Cela permet d’avoir une même page accessible depuis n’importe quel device.
Un seul site donc.
L’adaptation à la largeur de l’écran du device se fait au niveau des points de rupture. Eux-mêmes définis par les média queries dans les fichiers css3.
Le responsive a pour objectif de faciliter la navigation et l’expérience vécue par les utilisateurs lorsqu’ils arrivent sur une interface mobile.
Ergonomie mobile : Retour sur le terme Adaptive web design
L’adaptive est un concept plus large que le responsive. On dit que le premier englobe le second.
L’adaptive est plutôt vu comme une conception évolutive.
Il implique de créer une version de page pour chaque device mais une seule page au final.
Le temps de développement est plus long. Mais le résultat obtenu permet une meilleure adaptation au device et donc une meilleure expérience. Les interfaces sont plus personnalisées avec un chargement plus rapide.
Bref, le choix entre les deux solutions doit se faire en amont et répond à des stratégies différentes.
En savoir plus sur le RWD versus Adaptive.
Ergonomie mobile : Quelles sont les particularités du device mobile à intégrer ?
Elles sont nombreuses et s’avèrent impactantes en terme d’usages. Voici le détail ci-dessous de ces particularités.
Ergonomie mobile et spécificités device mobile #1 : 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.
Ergonomie mobile et spécificités device mobile #2 : Résolutions d’affichage
Les résolutions d’affichage diffèrent entre les marques. Sur les devices Windows l’affichage est limité à
Tandis que sur les devices Apple, les résolutions diffèrent selon le modèle du device / smartphone. Cela va de à pour les Iphone 6 et 6+.
Ici aussi de nombreuses problématiques d’affichage.
Ergonomie mobile et spécificités device mobile #3 : 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.
Ergonomie mobile et spécificités device mobile #4 : Les Navigateurs
Les navigateurs les plus utilisés sont Chrome et Safari. Citons également
Ergonomie mobile et spécificités device mobile #5 : 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.
Ergonomie mobile et spécificités device mobile #6 : 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.
Spécificité device mobile #7 : 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.
Ergonomie mobile : Quelle stratégie de conception envisager selon votre type de site
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.
Ergonomie mobile : Les erreurs de conception à identifier
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 :
Erreurs d’ergonomie mobile : 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.
Erreurs d’ergonomie mobile : 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.
Erreurs d’ergonomie mobile : 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
Eviter les interstitiels.
Attention au temps de chargement pour mobile
Voir les outils GT Metrix ou Page Speed Insights, ou Dareboost, ou encore Web Page test.
Ergonomie mobile : 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.
Ressources complémentaires autour de l’ergonomie mobile
Comment créer un site web d’entreprise
Gérer son blog wordpress comme un pro
Qu’est ce qu’un site user friendly ?