10 règles d’or de l’ergonomie pour les mobiles

L’arrivée de l’iPhone sur le marché des téléphones, dans le lointain 2007 a crée de facto de nouveaux usages et un nouveau marché, celui des Apps mobiles. L’arrivée de la concurrence de Google dans un premier temps et de celle de Microsoft plus récemment, n’ont fait que donner encore plus de choix aux utilisateurs, qui ont aujourd’hui la possibilité de faire “à peu près tout” sur leur smartphone ou leur tablette, comme le dit si bien la marque à la Pomme. Oui, mais à condition que l’interface reste simple et intuitive.

Une App mobile : qu’est ce que ça change ?

Il ne faut pas oublier que ces applications présentent 3 différences fondamentales par rapport à l’exploitation de sites et logiciels sur ordinateur:

  • un affichage différent : la taille de l’écran est bien plus réduite que sur un ordinateur, la résolution est souvent inférieure, et les proportions de l’écran ne sont pas obligatoirement les mêmes non plus. Ceci a un impact non négligeable sur la place disponible à l’écran, et donc sur l’organisation visuelle des contenus
  • des principes d’interaction nouveaux : adieu la souris, on navigue au doigt, ou aux doigts. On tape, on “pinche” (le mouvement à deux doigts qui permet de zoomer sur une carte routière, par exemple), on feuillette les journaux et les livres électroniques comme dans la réalité… Si certains gestes de l’interaction tactile sont simples et intuitifs d’autres nécessitent un certain apprentissage et peuvent ne pas être compris ou retenus par les utilisateurs
  • une évolution du public cible et des usages associés: l’iPhone, ou l’iPad, sont de véritables objets de convoitise de la part d’un public traditionnellement peu intéressé par les nouveautés informatiques, celui des séniors. Si, il y a quelques années, les ergonomes avaient du mal à recruter des personnes de plus de 60 ans pour tester des sites Web, aujourd’hui nous n’avons aucun mal à trouver des sexagénaires enthousiastes, prêts à tester de nouvelles applications mobiles. Ces changements de mentalité sont positifs, mais ce nouveau public est aussi naïf et peu aguerri face à des interfaces qui se veulent simples mais qui ne le sont pas toujours. L’évolution des usages touche aussi des aspects liés au contexte de l’interaction: on consulte ses mails en marchant (difficulté de lecture pendant la marche), on joue aux jeux vidéo sur smartphone à l’arrêt du bus (problèmes de lisibilité dus à la lumière du soleil, trop forte), on bouquine dans son lit (problèmes d’éblouissement)… Lors de la conception de ces Apps il faut donc tenir compte de toutes ces données, concernant la population cible, ses besoins et le contexte d’interaction.

Quelques macro-principes : 10 règles d’or

1. Adapter l’affichage au petit écran

Penser une IHM pour le mobile signifie épurer les contenus, simplifier l’affichage et, si nécessaire, fournir des moyens d’accès à des informations plus détaillées. Comparez par exemple la page web de votre compte Twitter sur ordinateur à celle qui s’affiche dans l’App mobile : suggestions, tendances et moteur de recherche n’apparaissent pas sur l’accueil et les boutons pour “retwitter” ou “répondre” sont disponibles uniquement après être rentrés dans chaque tweet.

2. Agrandir les zones cliquables

En miniaturisant les contenus, on pourrait être tentés de réduire proportionnellement la taille des éléments cliquables, mais ceci est une erreur : il ne faut pas oublier qu’une bonne partie des supports mobiles ne proposent pas de stylet pour interagir avec l’écran, il faut donc tenir compte de la taille des doigts. Selon les lignes-guides Microsoft, chaque élément cliquable doit ainsi avoir une taille minimum d’environ 7mm et être espacé des autres éléments d’au moins 2 mm, pour éviter tout problème de visée (pour plus d’info à ce sujet, consultez cet article)

3. Indiquer où on se trouve dans l’App

Même dans une App avec un nombre d’écrans limités, il est possible de ne pas savoir dans lequel on se trouve et se perdre. Bien que l’espace à l’écran soit réduit, il est par ailleurs conseillé d’afficher un titre pour chaque écran. La capture d’écran ci-dessous est relative à l’App Instagram et montre ce problème : bien que le symbole de l’appareil photo (3ème icône) soit plus saillant que les autres, l’utilisateur se trouve actuellement sur l’écran principal, qui n’a pas de titre.

capture d'écran Instagram

4. Limiter l’utilisation du clavier

Si la taille des icônes et des boutons est limitée, celle des touches d’un clavier virtuel l’est encore plus : on peut aisément imaginer les contraintes que cela créé à une bonne partie des utilisateurs. La seule solution, dans ce cas, est de limiter au maximum la saisie clavier. Ceci signifie que l’App devra essayer de récupérer toute information pertinente par d’autres biais, par exemple en cherchant dans les données du smartphone (pour récupérer par exemple l’adresse mail de l’utilisateur), en proposant de se logguer via FaceBook ou Twitter ou grâce aux fonctions du téléphone (la géolocalisation peut éviter à l’utilisateur de saisir sa ville et son pays, par exemple).

5. Rendre les éléments cliquables “reconnaissables”

Il ne faut pas oublier que sur un smartphone ou une tablette il n’y a ni les tooltips ni l’effet de survol sur les éléments cliquables (la “petite main” blanche qui apparait sur ordinateur). Ceci signifie que l’utilisateur doit identifier tout seul les éléments cliquables (ou prendre le temps de cliquer sur tout ce qui apparaît à l’écran…). Il est donc impératif que les icônes et les boutons de l’App soient visuellement saillants et “affordants” (il doivent avoir un aspect bombé, pour indiquer qu’ils peuvent être enfoncés) afin que l’utilisateur comprenne qu’il s’agit bien d’éléments interactifs.

6. Soigner les icônes

Comme dit précédemment, sur un support mobile il n’y a pas de tooltips. Une icône peu évocatrice risque donc de poser de sérieux problèmes à l’utilisateur, qui n’a d’autre choix que de cliquer dessus pour découvrir sa signification. Dans cet univers il est donc encore plus important d’utiliser des icônes claires et bien dessinées, pour que l’utilisateur en comprenne le sens le plus facilement possible. Lorsque la place à disposition et le nombre d’éléments à afficher le permettent, il est conseillé aussi de doubler les icônes d’un équivalent textuel, pour en rendre la compréhension encore plus facile. L’exemple ci-dessous montre une bonne application de ces principes, dans le cas de l’App M6 Mobile.

Ecran de l'App iPhone M6 Mobile

7. Exploiter le canal sonore et celui haptique

Si limiter le nombre d’informations affichées à l’écran, en raison de sa taille réduite, pose un problème de communication, il ne faut pas oublier que d’autres canaux sont disponibles pour fournir un feedback à l’utilisateur. Paradoxalement, sur un téléphone portable le canal sonore n’est souvent pas le meilleur choix, car si l’utilisateur est dans un environnement urbain, très bruyant, il peut ne pas entendre les signaux émis par son téléphone. En revanche, le canal haptique (autrement dit, les vibrations de l’appareil) permet une communication sensorielle efficace : une vibration pourra ainsi indiquer une erreur, l’arrivée d’une mise à jour d’informations ou encore la sélection d’un élément important.

8. Assurer la continuité des contenus

Dans le cas d’une App qui s’inscrit dans la continuité d’un site Web, il est important que l’utilisateur puisse retrouver un univers familier et des contenus cohérents. De plus, s’il a la possibilité d’avoir un compte sur le site Web, il faut que le login soit disponible aussi sur l’App mobile, qui se doit donc d’être synchronisée avec le site Web. Ceci permet de garantir à l’utilisateur une user experience unique, dans laquelle, s’il modifie par exemple des options de son compte sur le site Web, elles seront automatiquement prises en compte sur l’App mobile.

9. Exploiter les outils “mobiles”

Il ne faut pas oublier que tout bon smartphone est avant tout “smart”, autrement dit il peut nous simplifier la vie de plusieurs façons. Une App mobile bien conçue pourra exploiter à son avantage toute la puissance de ces supports, en permettant par exemple de chercher personnes ou commerces “autour de l’utilisateur” (grâce à la géolocalisation), de scanner le code barre des produits à mettre dans la liste des courses, de trouver des numéros de téléphone à appeler directement d’un simple clic (et oui, un smartphone reste un téléphone). Appareil photo, microphone, GPS, accéléromètre, sont donc des outils qui peuvent venir compléter les fonctionnalités d’une App.

10. Penser au contexte d’utilisation et adapter la charte graphique

Un tout dernier rappel vis-à-vis du fait qu’une App reste avant tout un objet à utiliser en condition de mobilité, donc probablement dans des conditions de luminosité qui ne sont pas identiques à celles d’un bureau, dans lequel on utilise peut être la version Web des mêmes services et contenus. Il faut donc penser à une charte graphique qui tienne compte de l’éclairage extérieur et soit suffisamment contrastée pour rester lisible en plein soleil. Pour certaines App, utilisées dans des contextes très différents (jour et nuit, par exemple), il ne faut pas hésiter à créer 2 versions de la charte graphique, que l’utilisateur choisira en fonction de ses besoins.

Ces lignes-guide n’ont pas la prétention d’être universelles ni exhaustives. Dans d’autres billets de ce Blog nous traiterons au cas par cas d’autres aspects de l’univers Mobile.

Auteur/Autrice

  • Teresa Colombi

    Managing Director, Docteur de recherche en psychologie cognitive et eye tracking - Teresa allie la passion pour la recherche à celle de l’application des connaissances en ergonomie cognitive pour l’optimisation des Interfaces Homme-Machine. Teresa est reconnue pour son expertise dans le domaine du eye tracking, de la gamification, a rédigé de nombreux articles et contribué à la rédaction d’ouvrages dans le domaine de l’ergonomie cognitive. Teresa gère au quotidien les relations avec les clients Ludotic et supervise la plupart de nos réalisations.