Blog de Nicolas LAURENT


Billets de Nicolas LAURENT

Articles récents


Catégories


ERGONOMIE

Expérience utilisateur Mobile

4 avril 2017

Une application mobile reste différente d’un site web. Il en va de même pour l’ergonomie.

En effet une application mobile va se retrouver :

  • Avec un affichage différent en raison de la taille réduite de l’écran, ce qui va changer l’organisation des contenus
  • Sans souris : des nouveaux modes d’actions avec les doigts s’appliquent (swipe, tap, double tap,pinch, rotate,…)

Voici quelques conseils pour bien penser l’ergonomie d’une application mobile.

  • Il convient tout d’abord de réfléchir au contexte d’utilisation.  Contrairement à son ordinateur de bureau, l’utilisateur peut utiliser son téléphone dans la rue pour trouver un restaurant,  dans les transports pour lire les actualités,… Et cela avec un seul pouce la plupart du temps. Ainsi,  l’utilisation d’un mobile s’effectue souvent dans un environnement dégradé. Il faut donc aider l’utilisateur en offrant le contenu le plus utile  possible afin de retenir au mieux son attention.
  • Les zones actives (un bouton par exemple) ne doivent pas être réduites proportionnellement à la taille d’écran. Chaque élément cliquable doit avoir au moins 7mm (selon le guidelines de Microsoft) afin de prendre en compte la taille  des doigts.

    Les icônes sont trop petites .

    Les icônes sont trop petites -Fidme

  • Les zones cliquables doivent être vite repérées. Pour cela elles doivent se distinguer facilement en les voyant comme actionnables.  Les messages et boutons principaux sont visibles sans avoir besoin de scroller la page.
Le bouton "Commander" est bien visible - Uber

Le bouton « Commander » est bien visible – Uber

 

  • Inciter les utilisateurs en coupant volontairement le contenu pour leur signaler que celui-ci peut être défilé
Exemple de cut-off - Le Monde

Exemple de cut-off – Le Monde

  • Anticiper les besoins et supprimer les actions inutiles. Ex : saisie du titre d’une recherche. Proposer déjà l’ouverture du clavier pour la saisie.
  • Utiliser plutôt des squelettes d’écran qui s’affichent progressivement au lieu d’un écran d’attente. Les indicateurs de chargement doivent être soignés : personnalisé, colorés…
Avant le chargement complet, un placeholder s'affiche - France info

Avant le chargement complet, un placeholder s’affiche – France info

 

  • Prêter  attention aux icônes : elles doivent être évocatrices. Une icône peu suggestive risque de poser de sérieux problèmes à l’utilisateur, qui n’a d’autre choix que de cliquer dessus pour découvrir sa portée.
A quoi correspondent toutes ces icônes ?

A quoi correspondent toutes ces icônes ?

 

  • Rester cohérent entre le contenu du site web et l’application mobile. L’utilisateur doit retrouver un univers familier grâce à une harmonisation d’ensemble.