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

Optimiser l’ergonomie de son application web

Introduction

Je vous propose aujourd’hui un article sur un sujet un peu moins technique mais qui a son importance dans la vie d’un projet web, j’ai nommé la démarche ergonomique.

Cette démarche part d’un constat simple : nous sommes ceux qui créons les outils que nous utilisons au quotidien, nous devrions donc être capable de les concevoir pour qu’ils nous servent et non l’inverse.

Cependant dans le domaine des Interfaces Homme-Machine, on constate souvent à regret que concevoir un produit qui fonctionne ne suffit pas à garantir la satisfaction de ses utilisateurs en terme d’utilisabilité.

Nous allons donc voir ensemble quelques conseils pour optimiser l’expérience utilisateur sur ces interfaces.

L’ergonomie, ça sonne bien mais qu’est-ce que c’est au juste ?

Historiquement et de manière générale l’ergonomie est une démarche qui a pour but de faciliter notre vie en adaptant à nos besoins les objets qui nous entourent (ex. une souris,  une voiture, un stylo, etc).

L’ergonomie web, en particulier, s’intéresse aux interfaces des sites internet et des applications embarquées sur le web (les fameuses Rich Internet Application) mais nous parlerons ici surtout des applications web (même si les notions abordées ici s’appliquent parfaitement à d’autres types d’applications tel que les logiciels ou les applications mobiles).

Mais encore ?

Pour être encore plus précis on dira d’une application qu’elle est ergonomique si elle est utile et utilisable :

  • Elle est utile car elle répond à un besoin.
  • Elle est utilisable car elle permet à l’utilisateur de répondre à son besoin de manière rapide et efficace.

Conséquence

A travers une interface ergonomique l’utilisateur atteint son objectif facilement et efficacement, il est donc satisfait, vous êtes satisfait, tout le monde est gagnant !

Conséquences d’une application non ergonomique

Voyons  maintenant différents leviers pour optimiser l’ergonomie de vos applications web.

La notion de personas

Définition

Les personas sont des représentations fictives mais concrètes des utilisateurs pour lesquels l’application est conçue. Ils fournissent aux développeurs une référence pour définir les fonctionnalités et les scénarios d’utilisation.

La définition des personas est une étape qui intervient idéalement pendant la phase de conception de l’application (il n’est toutefois jamais trop tard pour commencer si cette étape a été négligée).

Avantages d’une telle méthode

Effectuer cette démarche vous oblige à vous pencher sur la cible de votre application (à l’humaniser même), vous permettant ainsi de comprendre qui sont vraiment vos utilisateurs. Elle vous permet également de donner des objectifs à votre cible, vous guidant ainsi sur ce que feront vos utilisateurs de votre application.

Monsieur “Tout-le-monde”, l’ennemi juré des personas !

Le piège à éviter en créant vos personas est de définir une version trop générique de vos utilisateurs. Cela revient à concevoir une application sans prendre en compte les spécificités et les besoins de ses utilisateurs, le produit qui en résulte est alors certes un outil polyvalent mais qui est incapable de satisfaire ses réels utilisateurs. Ainsi les raisonnements tels que “qui peut le plus peut le moins“, “plaire au plus grand nombre” ou encore “si ça marche pour ma grand-mère ça marchera pour tout le monde” sont radicalement à bannir !

Exemple de persona

La définition d’un persona est un travail collectif qui s’effectue en prenant en compte les paramètres suivants  :

  • Les informations socio-démographiques.
  • La relation à l’application, l’historique d’utilisation, la relation aux concurrents.
  • Les habitudes, les envies, le niveau d’expertise.
  • Les objectifs, les missions sur l’application.

Voici un exemple de persona pour l’application Grooveshark :


Les personas vont donc vous permettre de connaître les spécificités de vos utilisateurs en tant que personne et de vous en servir pour présenter une interface avec laquelle ils seront à l’aise.

Quelques lois utiles

L’ergonomie n’étant pas une science exacte, il n’existe pas de lois universelles pour concevoir une interface ergonomique. Cependant les principes énoncés ci-dessous donnent des clés pour favoriser un interfaçage entre votre application et la manière de fonctionner de notre cerveau.

En effet un utilisateur étant avant tout chose un être humain (grande nouvelle), la psychologie cognitive à travers les théories de la Gestalt (psychologie de la forme) énonce les lois suivantes :

Loi de proximité

Rapprocher visuellement certains éléments tend à montrer que ces éléments sont conceptuellement proches

Autrement dit, deux éléments visuellement proches dans l’interface évoqueront la similitude alors qu’à l’inverse deux éléments éloignés évoqueront la différence.

Par exemple sur le site internet d’Etam :

On voit que les éléments de la navigation principale (en rouge) sont rassemblés sur une même ligne côte-à-côte alors que les éléments de la navigation secondaire sont regroupés verticalement (en vert). Les encarts de promotions (en bleu) étant alors réunis au centre.

Remarque : L’utilisation du blanc joue un rôle crucial dans cette interface pour aérer les différents niveaux d’information, c’est un levier graphique souvent négligé surtout lorsqu’on cherche à tout prix à rentabiliser le moindre pixel disponible à l’écran.

Loi de similarité

Une ressemblance de forme, de couleur, de contenu ou de comportement aura tendance à rapprocher conceptuellement des éléments

Autrement dit, qui se ressemble s’assemble :). On retrouve un exemple d’application de cette loi sur la page de présentation des iPod Nano de l’Apple Store :

Ici au survol de la souris, le bouton pour choisir et acheter un de ces produits prend la même couleur que l’iPod correspondant. Ainsi même si le bouton est éloigné du produit désiré, l’utilisateur voit sans hésitation qu’il a choisi le bon iPod.

Inversement des éléments placés côte-à-côte avec une apparence différente renforceront l’idée de différence conceptuelle. Par exemple en rédigeant cet article, l’interface de WordPress me proposait la vue suivante :

La différence de nature des actions déclenchées par les boutons “déplacer dans la corbeille” et “soumettre à relecture” est alors immédiate et sans équivoque.

Loi de Fitts

Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande.

Si vous devez retenir une loi de cet article c’est bien celle-ci ! A mon sens c’est la plus utile et la plus facilement applicable dans le processus d’optimisation. Concrètement elle signifie que plus un élément cliquable est éloigné du pointeur de la souris plus cet élément doit être gros. En optimisant tout simplement la cliquabilité des éléments interactifs on aide ainsi  l’utilisateur à accéder directement aux parties clés de l’interface (sans que celui-ci ait besoin de s’y reprendre à plusieurs fois).

Pour appliquer cette loi qui répond à une vraie formule mathématique (si si) voici quelques astuces :

Augmenter la taille réelle des éléments cliquables

Il s’agit ici de tout bonnement augmenter la taille des éléments cliquables, exemple avec des liens :

Et exemple avec des boutons :

Rapprocher les éléments à atteindre du pointeur de la souris

Si vous ne pouvez agir sur la taille des éléments cliquables, essayer de les rapprocher du pointeur de la souris (quand la dernière position du pointeur est facilement identifiable).

Par exemple pour la validation d’un formulaire, on sait a priori que la dernière position du pointeur de la souris sera sur le dernier champ de saisie du formulaire, c’est pour cela qu’on trouve généralement le bouton de validation en dessous de ce dernier champ. Exemple que l’on retrouve à travers le formulaire d’inscription de Facebook :

Remarque : Le clic-droit et les raccourcis clavier restent les moyens les plus efficaces pour accéder rapidement aux éléments cibles quelque soit la position du pointeur de la souris. Cependant dans un navigateur web, ces modes d’interaction n’ont pas encore le succès qu’ils ont dans une application logicielle de bureau.

Augmenter la taille virtuelle des éléments cliquables

Dernière application de la loi de Fitts mais pas la moindre : l’augmentation de la taille virtuelle des éléments cliquables. Il s’agit d’accroître la surface cliquable des éléments (pas l’élément graphique en lui-même). Par exemple sur une page de recherche du site Google, pour faciliter l’accès à la page suivante, la surface cliquable est agrandie (représentée par le liseré rouge) au delà de la surface initiale du lien “Suivant”. De même sur le site de réservation en ligne de la SNCF, le texte et l’espace associés au bouton radio adjacent sont cliquables et agissent sur le bouton.

Remarque : Il est fortement conseillé de procéder de la sorte pour tous les éléments interactifs qui offrent une faible surface cliquable telle que les boutons radio et les cases à cocher.

Le concept d’affordance : “Vous pouvez interagir avec moi !”

Ce terme anglais qui ne possède pas de traduction française représente la capacité d’un objet à suggérer son utilisation. Ce concept est aussi vrai dans le monde réel (une poignet de porte ou un interrupteur possèdent une plus grande affordance qu’un mur blanc) mais prend particulièrement tout son sens dans la sphère virtuelle où les éléments de l’interface ne sont pas touchables.

Ainsi n’oubliez pas de soigner l’affordance de vos éléments visuels déclenchant les actions principales de votre application (pour les éléments interactifs déclenchant des actions secondaires, une indication au survol de la souris suffit). Il existe toutefois certaines conventions, respectez-les en ne soulignant pas un texte qui n’est pas un lien par exemple !

Un dernier outil pour la route : les tests utilisateur

Pour terminer cet article il ne faut pas oublier que l’ergonomique reste une discipline du compromis, il est donc courant de finir dans un cul-de-sac décisionnel vis-à-vis du positionnement d’une icône, de l’intitulé d’un bouton ou encore de la couleur de fond d’un formulaire. Dans ce cas effectuer un test utilisateur peut vous tirer d’affaire, car n’oublions pas qu’il existe une seule vérité : celle de l’utilisateur.

A quoi ça sert ?

Ces tests vont permettre de mettre en évidence les freins dans l’interface qui vont nuire à l’expérience utilisateur.

Qu’est-ce que c’est ?

Un test utilisateur consiste à constater ce que les utilisateurs font sur l’application, comment ils le font et ce qu’ils nous en disent, c’est une analyse en direct.

Qui choisir ?

Idéalement il faut choisir une personne étant le plus proche possible des utilisateurs venant sur votre application, si vous aviez au préalable défini des personas ils vous permettront de déterminer avec précision les utilisateurs représentatifs à sélectionner.

Combien de participants choisir ?

Évidement plus vous aurez de participants, plus vous aurez de retours mais avoir un participant est toujours mieux que rien !

Comment procéder ?

Un test utilisateur ne doit pas ressembler à un questionnaire. Intégrer plutôt l’utilisateur dans un scénario (ce qui est un prétexte pour observer comment il va se débrouiller). Surtout vous ne devez pas détailler les étapes permettant de réaliser la tâche et n’oubliez pas que plus le participant s’exprime mieux c’est.

Exemple de scénario portant sur le site internet d’IKEA :

Imaginons que vous voudriez acheter une étagère et connaître ses dimensions

Autre exemple portant sur l’application web Gmail :

Imaginons que vous voudriez retrouver les dernières conversations que vous avez eues avec le service client de votre fournisseur internet

Qu’en déduire ?

Les informations à retirer d’un tel test sont multiples :

  • Le nombre et les types d’erreurs effectuées par l’utilisateur.
  • Le temps de réalisation du scénario donné.
  • Le degré de satisfaction de l’utilisateur.
  • Le niveau de compréhension de l’interface.

Conclusion : l’utilisateur est ROI !

Pour terminer cet article il ne faut pas oublier qu’une application ergonomique est avant tout une application utile, donc sans utilité pas besoin d’utilisabilité. Par exemple recourir à des modes d’interaction sexy comme le drag & drop ne fera pas le succès de votre application si aucun besoin ne le justifie au préalable. On ne le répétera jamais assez mais en somme une application ergonomique est une application qui se préoccupe avant toute chose de ses utilisateurs.

Références

Share
  1. Raphaël LEMAIRE
    14/09/2010 à 13:44 | #1

    Excellent résumé des grands concepts et principe de l’ergonomie.

  2. fbecart
    20/09/2010 à 14:10 | #2

    Bel article ! J’apprécie particulièrement le conseil prodigué dans l’avant-dernière phrase, qui peut potentiellement s’appliquer à un projet auquel j’ai participé récemment ;) Ce point aurait bien mérité son paragraphe.

  3. 21/09/2010 à 11:45 | #3

    Mine de rien l’ergonomie c’est avant tout beaucoup de bon sens… que l’on a fortement tendance à oublier en phase projet.
    Merci pour les rappels, les bons conseils et le ton (j’apprends mieux en souriant!)

    Blandine

  4. 15/12/2010 à 15:12 | #4

    Très intéressant !!

    Merci pour cet article et surtout pour votre blog.

    ++

  1. Pas encore de trackbacks