Ajax et l'ergonomie sont-ils conciliables ?

L'accessibilité est un problème majeur dans l'utilisation d'Ajax. Comment tirer profit de cette technique de conception qui contribue fortement à enrichir l'expérience utilisateur ?

Ajax, voilà un acronyme qui fait couler beaucoup d'encre ! Les billets, articles ou encore études se multiplient et chacun apporte sa pierre à l'édifice. Nous allons insister ici plus particulièrement sur les aspects ergonomiques.

Ajax peut être recommandé dans différents contextes ou pour différents objets :
- Formulaire : saisie à la volée
- Interface de traduction instantanée
- E-boutique : panier intelligent (ajouter, enlever des articles instantanément)
- Page d'accueil personnalisable
- Bloc d'informations actualisable instantanément

"L'utilisabilité associée à Ajax doit donc être une préoccupation majeure pour l'ergonome"

Actuellement, lors du cycle de conception, la question de l'utilisation d'Ajax se pose de plus en plus :
- Doit-on fournir à l'utilisateur des fonctionnalités riches basées sur Ajax ?
- Doit-on proposer une interface conçue intégralement en Ajax ?
- Qu'en est-il des aspects liés à l'utilisabilité, l'utilité, l'acceptabilité et l'accessibilité de l'utilisation d'Ajax ?

"L'accessibilité, un souci pour Ajax ?"

L'accessibilité est un problème majeur dans l'utilisation d'Ajax puisque des éléments qui se fondent sur JavaScript ne sont pas accessibles par défaut.

Les navigateurs pour lesquels JavaScript est désactivé ne pourront pas retranscrire les données. Cette désactivation entraîne en même temps des problèmes de compatibilité technique et d'accessibilité.

Si des détours (version alternative par exemple) ne sont pas ajoutés, le site sera inaccessible puisque des malvoyants utilisant des lecteurs d'écran se trouveront dans l'impossibilité d'accéder au site. Le risque encouru est illustré par l'exemple du site Netvibes, conçue intégralement en Ajax.

Premièrement, pour les non-anglophones, ce message d'erreur se trouve être incompréhensible, de plus il ne fournit pas d'autres solutions pour accéder au site. Le Webmail de Google propose une esquisse de solution qui indique à l'utilisateur soit de vérifier les paramètres de son navigateur soit d'afficher la page en mode " simplifié " (HTML). La page telle quelle est présentée aurait besoin d'une meilleure structuration et d'une aide plus guidée pour un novice, mais l'idée est là.

"Quelques recommandations de base à respecter"

Afin de limiter au mieux les problèmes d'accessibilité, il convient de respecter ces recommandations basiques :

- Informer l'utilisateur que le site nécessite l'activation de JavaScript ou dans l'idéal effectuer une détection automatique, prévenir l'utilisateur et le guider dans la résolution du problème ;
- Informer l'utilisateur que la page est mise à jour dynamiquement. Cela est utile pour les utilisateurs qui ont des lecteurs d'écran. Ils peuvent ainsi décider ou non de relancer la lecture de la page ;
- Informer l'utilisateur par une alerte quand des données sont mises à jour. Les lecteurs d'écran sont habituellement capables de lire ces messages d'alertes, associées parfois à un son. Cependant, un trop grand nombre d'alertes provoquera un bruit visuel, dans ce cas là il convient de privilégier la solution suivante ;
- Mettre en surbrillance, pendant un court moment, les données qui viennent juste d'être mises à jour.

En plus des lecteurs d'écrans, il est à noter que les périphériques tels que les téléphones mobiles, les PDA et les moteurs de recherche ne peuvent pas utiliser XMLHttpRequest. Il faut donc le cas échéant s'interroger sur l'accessibilité liée à ses outils.

"Interactivité enrichie - Utilisabilité / Utilité / Acceptabilité"

Nous pouvons identifier quelques fonctions spécifiques pour lesquelles l'usage d'Ajax serait un plus en termes de confort proposé à l'utilisateur.

Le principal apport concerne le rechargement de la page. Alors que pour une page Web " classique ", il est nécessaire de recharger une nouvelle page, Ajax permet de le faire de façon transparente pour l'utilisateur, sans changer de page. Concrètement, les différents objets sont mis à jour, à l'intérieur de la page déjà chargée dès le départ et/ou lors de l'utilisation de ces éléments. Ces derniers peuvent être chargés, soit quand l'utilisateur accède à la page, au lancement de celle-ci, soit quand il accède à une partie de cette page.

Les rechargements partiels apportent une interaction orientée plus vers la manipulation (à mettre en relation avec une logique " client lourd ") et moins vers la consultation. La conséquence se traduit par un fort gain de productivité.

En dehors de cet apport de rendu dynamique, il existe de nombreux " outils Ajax " qui permettent de renforcer l'interactivité des pages Web. Nous entrons là dans le monde du Web 2.0 : Drag & Drop, auto-complétion, plier-déplier pour ne citer qu'eux. Le Drag & drop offre plus de paramétrages pour l'utilisateur et des interactions plus " visuelles ", ce qui est un apport nouveau dans les applications Web professionnelles.

"Les aspects visuels étaient auparavant réservés aux sites de communication"

Les aspects visuels étaient auparavant réservés aux sites de communication avec l'utilisation de flash. L'auto-complétion apporte à l'utilisateur un accompagnement et un gain de productivité en évitant le recours à des recherches avancées, en proposant des suggestions dès la frappe. Le plier-déplier permet une manipulation et une appropriation de l'espace écran par l'utilisateur. Il peut ainsi organiser l'affichage selon ses priorités, cela entraîne là aussi un gain de productivité.

Ajax permet donc indéniablement de fournir une interface riche pour les utilisateurs. Cependant, l'utilité, l'acceptabilité et surtout l'utilisabilité de certains éléments vont dépendre du contexte dans lequel ils sont utilisés. Reprenons l'exemple du Drag & Drop qui permet de glisser et déposer des éléments dans la page. Dans le cadre d'une page d'accueil (pour un site Web comme pour une application métier), cela peut permettre une personnalisation simple et ludique de l'interface. On déplace ici des blocs d'informations (actualités, données personnelles).

Lorsque le bloc est en cours de déplacement, on note l'apparition d'un pictogramme qui fournit à l'utilisateur un retour visuel sur la possibilité de déposer ce bloc dans la page. Cependant ce pictogramme induit l'utilisateur en erreur car en survolant le " header ", le pictogramme ne change pas et laisse penser qu'il est possible de déposer les informations à cet endroit, il n'en est rien.

"Si l'utilisateur a l'habitude de déplacer une fenêtre dans un client lourd, il n'a pas (encore) conscience de la possibilité de reproduire cette action dans le monde Web"

En revanche, l'utilisation de ce composant pour glisser les manuels d'aide dans une zone comme dans la FAQ de Free n'est pas optimal. Opposant ce système aux liens hypertextes utilisés généralement pour ce type d'action, nous pouvons nous rendre compte que pour accéder aux manuels, la charge de travail s'en trouve augmentée (lecture des instructions, compréhension globale de cette fonctionnalité, nombre d'actions).

Ce type de composant ne semble pas intuitif pour des utilisateurs novices et peut ne pas l'être non plus pour des utilisateurs plus confirmés. Ainsi, si l'utilisateur a l'habitude de déplacer une fenêtre dans un client lourd, il n'a pas (encore) conscience de la possibilité de reproduire cette action dans le monde Web. Ce style de composant doit être réservé à des experts ou alors le cas échéant, en l'absence de signalétique communément admise, il convient d'expliquer clairement son utilisation, afin de limiter les problèmes d'utilisabilité.

"Attention à ne pas utiliser Ajax uniquement parce que c'est la mode du moment"

Pour chaque composant Ajax, il est primordial de pouvoir répondre à ces 4 questions :

- Pourquoi utiliser ce composant ?
- Quand utiliser ce composant ?
- Comment utiliser ce composant ?
- Quels risques à imputer à ce composant ?

Ainsi, si Ajax est une avancée majeure pour le Web en terme d'interactivité, il convient de s'attacher à examiner et anticiper les gênes que son utilisation occasionne. Il ne faut pas restreindre son utilisation mais au contraire identifier les contextes d'usage pour en garantir l'acceptabilité, l'utilité et l'utilisabilité.

Attention à ne pas utiliser Ajax uniquement parce que c'est la mode du moment. Il convient de vérifier si cela est pertinent pour l'utilisateur. L'ajout d'Ajax ne doit pas juste être du bruit, cela doit réellement permettre une productivité accrue tout en fournissant un niveau de confort supplémentaire à l'utilisateur.

Comme toute nouvelle approche de conception Web bien que n'étant pas intrinsèquement de toute jeunesse (pour rappel XMLHttpRequest date de 1998), Ajax est amené à évoluer dans les prochains mois, voire dans l'année à venir. Les applications Web sont de plus en plus présentes, certaines sont entièrement nouvelles, d'autres sont la transposition de logiciels existants.

Ajax va donc s'intégrer de plus en plus dans nos vies, dans nos métiers (applications Web professionnelles). Il convient dès lors de prendre conscience que les utilisateurs novices ou intermédiaires sont nombreux et ne doivent pas être perturbés ou dépassés par ces nouvelles interactions. La conception centrée utilisateur est donc d'autant plus essentielle pour tirer le meilleur des interfaces Ajax.

Autour du même sujet