Ajax et ergonomie

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 essayer ici de contribuer à cette réflexion en insistant 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é et l’accessibilité de l’utilisation d’Ajax

Néanmoins, avant d’entrer dans les détails de l’intégration d’AJAX dans la conception, faisons d’abord un peu d’histoire. Nous aborderons ensuite les notions d’accessibilité et d’interactivité. Enfin, nous nous pencherons sur les points clés en terme d’ergonomie.
Nous conclurons cet article, rappelant les précautions à prendre vis-à-vis d’Ajax en terme d’ergonomie.

Contrairement à une première idée reçue, Ajax n’est pas une technologie. Il s’agit plutôt d’une technique de conception qui regroupe des technologies diverses préexistantes telles que :

• HTML, XHTML, et CSS : présentation et mise en forme des pages Web
• XML, XSLT, JavaScript, DOM : manipulation dynamique (à l’aide de DOM : Document Object Model) des données
• XMLHttpRequest : méthode permettant l’échange de données de manière asynchrone au format XML

Ainsi, même si le terme Ajax est apparu en 2005, ses éléments constitutifs sont antérieurs comme XMLHttpRequest (l’élément central d’Ajax) qui date de 1998. Il avait été crée par Microsoft pour Internet Explorer 4. Les technologies précitées sont de nos jours supportées par les navigateurs les plus usités : Mozilla, Mozilla Firefox, Internet Explorer, Konqueror, Safari et Opera.

Le principal attrait d’Ajax réside dans le rendu dynamique des pages et une interactivité qui n’est pas sans rappeler le mode d’interaction du client lourd.
L’avènement des interfaces riches (Rich Internet Application) permet au Web de fournir des sites associant une interactivité plus riche, jusque là réservée au client lourd, tout en gardant une facilité de consultation qui leur sont propres.

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. (voir Figure 1)

Figure 1 : Affichage de l'accueil de Netvibes.com en cas de désactivation de JavaScript dans le navigateur

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). (Voir Figure 2.) 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à.

Figure 2 : Affichage du webmail Gmail en cas de désactivation de JavaScript dans le navigateur

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.

Nous pouvons identifier quelques fonctions spécifiques pour lesquelles l’usage d’Ajax serait un plus en terme 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é.

Figure 3 : Technologies et expérience utilisateur

Figure 4 : Bonne utilisation du Drag & Drop

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 (Voir Figure 4). Opposant ce système aux liens hypertextes utilisés généralement pour ce type de document, nous pouvons nous rendre compte que pour accéder aux manuels, le nombre d’actions minimales, la charge de travail (lecture des instructions, compréhension globale de cette fonctionnalité) sont plus coûteux que le système « classique ».

Figure 5 : FAQ du site Free.fr - Utilisation du Drag & Drop

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é.

Les apports pour l’utilisateur sont divers et multiples :

• Interactivité enrichie : interface plus simple et plus ludique, personnalisation de pages plus aisée;
• Rapidité d’exécution : feed-back instantané, enchaînement fluides des actions ;
• Charge cognitive diminuée(à nuancer, par une interactivité renforcée, dépend toujours du contexte et de la bonne utilisation d’Ajax)

Malgré ces points positifs, certains points critiques sont à contrôler :

• Accessibilité : les lecteurs d’écran ne gèrent pas JavaScript, obligation de prévoir une version « non JavaScript » alternative
• Localisation et navigation : impossibilité de se repérer à l’aide de la page d’adresse, d’utiliser les boutons « précédent / suivant » du navigateur et de « marquer » les pages
• Retours visuels sur les modifications effectuées sur la page dans sa globalité parfois absents ou peu évidents (ex. : Windows Live Mail : « Traitement en cours » en bas à gauche de l’écran) ; Problème en terme d’identification de la zone de la page qui vient ou qui va se charger
• Identification des composants manipulables et des actions possibles pour éviter une expérimentation par tâtonnements.

Ces problèmes peuvent être évités d’une part si le concepteur a conscience des précautions de base à prendre au niveau des différents composants et d’autre part si le choix de l’utilisation d’Ajax et son application sont fait suite à une analyse ergonomique (besoins utilisateurs, process, etc.) afin de garantir l’utilisabilité du site et des composants.

Pour chaque composant Ajax, il est primordial de pouvoir répondre à ces 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 seront pas forcément plus rapidement productifs avec cette nouvelle conception du Web.
Il faut y prêter attention et insister sur une conception centrée utilisateur.

	Les paroles d'experts : Technologies et standards Ajax et Ergonomie Accessibilité : le web pour tous L'audit accessibilité : préparer la labellisation Accessiweb Les fonctions de recherche pour un site web