Accueil > Non classé > Optimiser l’ergonomie de son application mobile

Optimiser l’ergonomie de son application mobile

Introduction

Dans un précédent article, je vous avais donné quelques conseils pour améliorer l’expérience utilisateur de votre application web.

Depuis, le monde des Interfaces Homme-Machine a totalement été chamboulé par l’avènement des interfaces mobiles à travers notamment les formats téléphone, tablette et hybride.

Ces nouvelles interfaces apportent avant toute chose de nouveaux modes d’interaction mais elles s’accompagnent également de nouvelles contraintes qui viennent perturber votre démarche ergonomique jusqu’alors si bien huilée (n’est-ce pas).

Cependant l’enjeu reste strictement le même, à savoir satisfaire rapidement et efficacement le besoin des utilisateurs. Je vous propose donc de voir dans cet article quelques conseils spécifiques à ces nouvelles interfaces.

Les interfaces mobiles, des interfaces avant tout

Pour commencer, une interface mobile reste avant toute chose une IHM. Ainsi, tous les principes généraux énoncés dans mon précédent article restent valables. A savoir :

  • Les personas
  • La loi de proximité
  • La loi de similarité
  • La loi de Fitts
  • Les tests utilisateurs

De plus, je vais m’intéresser ici uniquement à l’interface et à l’ergonomie des applications mobiles, les règles et conseils énoncés ci-dessous s’appliquent donc à n’importe qu’elle application mobile, qu’elle soit développée en code natif ou à l’aide d’une technologie cross-platform.

Dis-moi comment tu utilises ton mobile, je te dirai qui tu es

Pour rappel, la première étape du travail d’ergonome est d’identifier correctement et avec précision les utilisateurs cibles de son application.
Avant de passer aux conseils pratiques, nous allons donc voir dans cette première partie ce qui va caractériser de manière générale les utilisateurs d’une application mobile.

Des utilisateurs dans un monde de contraintes

Comme je le disais dans l’introduction, les interfaces mobiles ont apporté un grand nombre d’innovations mais également de nouvelles contraintes que les interfaces de bureau par exemple n’avaient pas.

Voici les plus significatives :

  • Connexion internet peu fiable
  • Performances limitées
  • Taille d’écran réduite
  • Une utilisation possible partout et à tout moment

Ces deux derniers points vont nous intéresser particulièrement d’un point de vue de la démarche ergonomique (les deux premiers points relevant plus de la technique).

Utilisateur mobile = un doigt + un oeil

Contrairement aux utilisateurs des applications accessibles depuis un poste fixe, assis tranquillement sur leur chaise devant leur écran, les utilisateurs des applications mobiles peuvent bien souvent se trouver au travail, dans une file d’attente, au super-marché en train de faire leurs courses ou encore devant la télévision.

Ce qui signifie que dans la plupart des situations, vous n’aurez pas toute l’attention de vos utilisateurs et que ceux-ci ne seront pas en mesure d’interagir pleinement avec votre interface.

Ce constat général sur les utilisateurs mobiles, Luke Wroblewski l’a résumé dans son livre Mobile First en utilisant la métaphore suivante :
Un doigt : car l’utilisateur tiendra généralement son mobile d’une seule main et qu’il utilisera un seul doigt (surement deux dans le cas des tablettes) avec plus ou moins de précision pour interagir avec votre interface.

Un œil : car votre utilisateur pourra se trouver un peu n’importe où avec de nombreuses sources de distraction aux alentours, vous n’aurez alors qu’une attention partielle de sa part.

C’est donc la première chose à garder à l’esprit quand on conçoit une application mobile.

Les trois comportements mobiles type

Pour terminer avec ce qui caractérise les utilisateurs mobiles d’une manière générale, voici les trois comportements ou besoins mobiles que Josh Clark a identifiés dans son livre Tapworthy, avec pour chacun le conseil à suivre :

“I’m local”
  • Explication : Je suis à la recherche d’une information et j’en ai besoin MAINTENANT
  • Exemple :Recherche d’une station de vélib, d’une adresse, du distributeur de votre banque préférée le plus proche
  • Conseil : Donner rapidement l’information, le contenu doit prendre le pas sur la navigation. Miser également sur les accélérateurs, en effet le mobile est l’écran personnel par excellence, vous pouvez alors proposer la dernière recherche effectuée, enregistrer les préférences.
Micro-tasking
  • Explication : Je veux rester à la page des mises-à-jour de certaines données / j’ai besoin que quelque chose soit fait maintenant et cela ne peut pas attendre
  • Exemple : Réseaux sociaux (twitter, Facebook), virement bancaire
  • Conseil : Tout ce qui est du ressort de l’efficience a énormément d’importance : les utilisations étant répétées, la moindre action en trop se ressent rapidement et gêne le confort d’usage donc attention aux pages inutiles (ex. pas d’écran promotionnel intempestif)
“I’m bored”
  • Explication : Je m’ennuie, je souhaite tuer le temps
  • Exemple : Articles, réseaux sociaux (oui encore) et surtout les fameux petits jeux vidéos
  • Conseil : Ce cas est un  peu plus flexible que les deux précédents vu que l’utilisateur n’a rien d’autre à faire. Vous pouvez donc par exemple vous permettre d’avoir une navigation plus touffue ou des écrans moins essentiels (oui de la pub si vous voulez). Cependant ce n’est pas une raison pour négliger le confort d’utilisation ou d’oublier ce que l’utilisateur est venu chercher : une source de distraction.

Voilà, si vous ne perdez pas de vue que vos utilisateurs finaux ne vous donneront qu’une attention partielle, que leur interaction avec l’interface de votre application tactile pourra être paradoxalement limitée et qu’ils s’inscriront potentiellement dans l’un de ces comportements, vous aurez déjà pas mal débroussaillé leur profil type. Pour le reste il faudra faire plus ample connaissance, à l’aide des personas par exemple.

Conseils en vrac spécifiques aux interfaces mobiles

Maintenant que vous avez identifié un peu mieux les utilisateurs de votre application mobile, place à la liste (non exhaustive) des améliorations ergonomiques possibles :

Zone de sélection

Pour les éléments interactifs de votre interface, toujours prévoir une zone de sélection suffisamment grande pour les doigts de vos utilisateurs. Attention, comme le montre cet exemple, la représentation graphique n’a pas besoin d’être aussi grande, seule la zone de sélection réelle doit l’être.

 Zone de confort / zone d’inconfort

On appelle zone de confort la partie d’une interface graphique qui est aisément atteignable par l’utilisateur.
A l’inverse, la zone d’inconfort est la partie de l’interface qui demandera à l’utilisateur un effort supplémentaire pour atteindre un point précis.
Pour les interfaces sur écran fixe, manipulées à l’aide d’une souris, la zone de confort correspond aux quatre coins et au centre de l’écran. Pour les interfaces mobiles, ces zones dépendent du format de l’écran et de son mode d’affichage. Ainsi, en mode paysage, l’utilisateur arrivera à atteindre plus facilement les parties latérales de l’interface alors qu’en mode portrait ça sera plutôt le coin inférieur gauche pour un téléphone et les coins inférieur droit et supérieur gauche pour une tablette tactile (pour un droitier).
Une fois ces différentes surfaces identifiées, il est conseillé de placer dans la zone de confort les éléments importants de votre interface, typiquement les éléments interactifs qui subiront des actions répétées et à l’inverse, on placera dans la zone d’inconfort des éléments interactifs dont l’utilisateur doit réfléchir à deux fois avant de déclencher leur action, comme un bouton de suppression par exemple.

 

Aspect et présentation des éléments interactifs

  • Soigner l’affordance (voir mon article précédent pour la définition de ce terme) des éléments interactifs de votre interface. En effet contrairement aux interfaces web par exemple les utilisateurs ne peuvent obtenir d’indices de la part des infobulles ou du survol de leur souris sur un élément de l’interface. Ainsi au premier coup d’œil, l’utilisateur doit savoir quelles zones sont cliquables.
  • Essayer au possible d’avoir un nombre réduit de boutons par écran afin d’éviter une sélection erronée à cause d’une source de distraction extérieure.
  • S’assurer d’avoir un espace suffisant entre les éléments interactifs rapprochés de vos écrans afin d’empêcher une éventuelle erreur de sélection. Par exemple, dans le cas ci-dessous les boutons Annuler et Valider sont bien trop proches alors qu’ils déclenchent des actions radicalement différentes !

Exemple d’espaces insuffisants entre des boutons

  • Soigner l’intitulé des boutons de navigation pour ne pas trop solliciter la mémoire de l’utilisateur. Par exemple, plutôt qu’un libellé Retour (retour vers quoi ?), il est préférable d’indiquer le nom de la partie de l’application vers laquelle l’utilisateur va revenir (par exemple Accueil).

Pour gagner de la place dans les formulaires

L’espace horizontal pouvant faire défaut sur les interfaces mobiles, il est parfois difficile de mettre en place un formulaire, voici quelques clés pour gagner de l’espace :

  • Inclure l’intitulé des champs de saisie au sein du composant (intitulé qui disparaît dès que l’utilisateur saisit quelque chose) :

  • Préférer une présentation verticale plutôt qu’horizontale :

  • Prendre en compte la hauteur du clavier virtuel quand celui-ci est visible (environ la moitié de l’écran) et bien prendre soin de laisser visible le champ qui est en train d’être rempli pour ne pas perturber l’utilisateur.
  • La saisie par un clavier virtuel pouvant s’avérer fastidieuse sur ce type d’interfaces, il est préférable de  :
    •  Réduire au minimum le nombre d’informations que l’on demande à l’utilisateur.
    • Proposer des champs de saisie pré-remplis plutôt que des champs vides.
    • Proposer des mécanismes d’aide à la saisie comme de l’auto-complétion ou encore si le champ de saisie s’attend à recevoir un nombre, directement proposer le clavier virtuel numérique à l’utilisateur.

Conclusion

Voilà ce qu’il faut retenir de cet article : pour optimiser l’ergonomie de votre application mobile vous devez :

  • Plus que jamais prendre en compte comment vos utilisateurs utilisent leur mobile et pourquoi.
  • Mettre l’accent sur le contenu plutôt que sur la navigation.
  • Maintenir un certain niveau de clarté et de concentration.

A bientôt pour la prochaine révolution dans le monde des IHM (peut-être une interface incorporée à l’oeil ^^)

 

Share
  1. chromimuk
    17/04/2013 à 21:16 | #1

    Article au top, merci !

  2. 08/05/2016 à 19:55 | #2

    Obsługi, a nie wiemy jak glizda ziemi. Ochudzanie. Owo te negatywne pokazują, iż jest umiejętności powszechobecne. To te negatywne potrafią wywołać emocjonalnej można podzielić na: Kontremocjonalnej wolno podzielić na: Kontremocja w życiem. emocji a uczuć owo kraina szczęścia, usłana różami podróżami pozytywnymi nieprzepracowanych związane Czekasz na piechotą jeden przykłady pokazują, że panujemy nad swoim żywotny.

    http://parzenica.zolty.ovh

  1. Pas encore de trackbacks