Bilan workshop n°5 : l’ergonomie web

C’est l’ergonomie des sites web qui était à l’honneur lors du workshop du 14 décembre dernier, animé par Véronique Brabant dans les locaux de Danone Communities. Veille de la soirée des 2 ans de l’association = 2 soirées GIW dans la semaine pour les plus motivées ! Retour sur le dernier #WorkshopsGIW de 2011.

En guise d’introduction, Laurence Saquer, communications manager chez Danone Communities et hôte de la soirée, nous décrit l’incubateur de « social businesses » comme un laboratoire d’innovations digitales, d’accompagnement et d’animation de communautés. Des initiatives destinées aux jeunes entrepreneurs sociaux et diffusées sur les réseaux sociaux sont ainsi portées par l’incubateur à l’image de l’application Social Business Youngsters ou encore la bourse à projets Global Social Venture Competition.

Pas de doute, le web et l’élan innovant et solidaire sont au cœur de nos préoccupations communes. Bien installées, le workshop démarre…

Véronique Brabant, consultante en e-commerce et spécialiste de l’ergonomie web, prend la parole pour démarrer ce workshop. L’objectif ? Nous initier aux grands principes de l’ergonomie sur le web et affûter notre regard et notre capacité d’analyse lorsque nous naviguons sur internet et particulièrement sur des sites. Autant dire, en quasi permanence !

Elle annonce les 3 grands axes de sa présentation à l’issue de laquelle nous devrions commencer à discerner ce qu’est un site ergonomique et pourquoi :

• Qu’est ce que l’ergonomie ?
• Quelles sont les règles en vigueur ?
• Quelles sont les techniques de conception d’un site ergonomique ? 

Un site ergonomique c’est comme une tasse de café : confort et prise en main

Votre café est chaud et savoureux, vous êtes installé(e) au fond d’un fauteuil moelleux, jusque là tout va bien. Mais vous n’aurez pas la même sensation si la tasse vous échappe des mains ou pire si vous vous brûlez les doigts en le dégustant !

En un exemple clair, Véronique nous explique à quel point la prise en main de la tasse conditionne l’expérience du buveur. La anse, la dimension, le matériau : toutes ces données sont importantes pour que vous appréciiez ce café à sa juste valeur.

Pour les sites web, la logique est la même. Un contenu intéressant ne peut être véritablement attractif que si le site web qui l’héberge offre un confort d’utilisation à l’internaute, une « prise en main » agréable, bref qu’il soit ergonomique.

L’ergonomie conjugue deux impératifs : l’utilité (la réponse aux besoins de l’utilisateur) et l’utilisabilité, traduction littérale du concept anglais d’usability (le confort, l’efficacité, la facilité d’utilisation).

Sur le web, l’ergonomie est primordiale car elle permet de ne pas faire fuir l’internaute, de l’inciter à réaliser son action (cliquer, surfer, acheter…) et, objectif ultime, de créer une préférence, dans ce cas l’ergonomie devient un critère de fidélisation.

Mais cet état de fait varie en fonction de la nature des sites, il va de soi que les sites expérimentaux n’ont pas besoin d’être très ergonomiques alors que les sites de recherche ou d’information doivent en faire une condition sine qua non.

En outre, l’ergonomie sur le web doit pouvoir à la fois répondre aux attentes des utilisateurs et aux objectifs commerciaux, comme les deux faces d’une même pièce. Sans oublier que c’est l’outil qui doit être adapté à l’homme et non l’inverse.

Il s’agit de distinguer l’ergonomie physique – d’un outil physiologiquement adapté à l’homme comme les touches d’un clavier – de l’ergonomie cognitive qui a été théorisée en psychologie cognitive. Véronique Brabant dévoile alors quelques unes des règles fondamentales de l’ergonomie :

• 7 est le nombre magique (plus ou moins 2) : impératif pour structurer les items de votre site internet
• la loi de proximité : le cerveau considère que les éléments proches dans l’espace ont des points communs.
• la loi de similarité : le cerveau regroupe les éléments qui paraissent semblables, il considère que les éléments proches dans l’espace ont des points communs et par analogie, l’éloignement des éléments évoque la différence. Traduction en ergonomie : rassembler les éléments du même type et éloigner les éléments qui n’ont pas de points communs.
• la loi de Fitts : le temps mis pour atteindre une cible est proportionnel à sa distance et inversement proportionnel à sa taille. Autrement dit, on met plus de temps à cliquer sur un élément si celui-ci est loin et petit.

Les règles indispensables d’un site web ergonomique

Même s’il est important de toujours replacer les règles d’ergonomie dans leur contexte, certaines sont centrales, elles doivent être respectées et mises en œuvre lors de la conception d’un site ou de sa refonte (pour l’ensemble des règles suivantes, se reporter aux exemples des sites identifiés en exemple et contre-exemple par Véronique) :

• l’architecture de l’information : il s’agit de l’organisation cognitive de l’info qui doit respecter une suite logique entre les pages et une arborescence bien pensée ;
• la structure de la page ;
• la navigation ;
• l’adaptation à l’équipement (et pas accessibilité) ;
• le respect des conventions : comme l’astérisque pour indiquer que le champ est requis ou encore le lien d’accueil en haut à gauche ;
• la lisibilité ;
• la cohérence ;
• l’ « affordance » : la capacité d’un objet ou d’une caractéristique à suggérer sa propre utilisation. Ex : souligner des mots permet de dire que les zones sont cliquables ;
• la gestion des erreurs : dans les formulaires à remplir par exemple cela permet de guider, d’accompagner les internautes, il y a des très bonnes pratiques chez la Redoute ou Sarenza par exemple ;
• et enfin l’efficience : efficacité au moindre coût.

Les techniques de conception d’un site sont centrées sur l’utilisateur

Pour déterminer la bonne ergonomie d’un site, il convient d’analyser la nature et les usages des utilisateurs. Cette étude, qui permet ensuite de structurer et hiérarchiser les informations, peut être établie selon différentes techniques :

•  la technique des personas consiste à créer le profil d’un utilisateur type avec des scenarii d’usage, un profil techno (sites préférés, mobile, aisance, configuration), nom, âge. Il convient d’établir plusieurs personas, à ranger selon l’importance de leur représentation parmi les utilisateurs, la première persona sera la référence. Il faut se baser sur des données réelles pour créer les personas, à partir d’infos recueillies auprès d’utilisateurs potentiels.
• la technique du tri de cartes : pour créer l’arborescence du site. Il suffit de demander aux utilisateurs leur avis sur les catégories, leurs besoins en terme d’organisation du site.
• le zoning permet de représenter les grandes zones d’un site pour organiser l’information qui s’y trouve. Il s’agit souvent de la première étape pour vérifier que tous les éléments constitutifs du site ne sont pas oubliés ou pour faire valider à son client ou à sa hiérarchie la structure du site.
• les maquettes fonctionnelles présentent, elles, un niveau de détail supérieur, mais ne doivent pas intégrer des éléments de graphisme qui pourraient bloquer la réflexion.

Une fois en production, un site n’est jamais parfait et nécessite des ajustements, voici les techniques d’optimisation les plus fréquentes divulguées par Véronique Brabant (pour l’ensemble des règles suivantes, se reporter à la présentation complète) :

• l’analyse heuristique établie par un ergonome ;
• le tracking de navigation ;
• les tests utilisateurs ;
• l’eye tracking ;
• l’AB Testing : comparer deux versions d’une page et voir quelle version marche le mieux ;
• et le service client.

Au final, si l’ergonomie est présente dans notre quotidien, cela ne s’avère pas si simple car il faut faire des choix parmi toutes les informations qui devraient être mises en avant et la critique est facile. Véronique attire notre attention sur le fait de toujours bien garder en tête les objectifs commerciaux d’un projet lors de la conception d’un site et ouvre la discussion en évoquant l’UX (user experience), un domaine en pleine évolution, passionnant. Certainement, le thème d’un futur workshop.

Retrouvez la présentation complète de Véronique Brabant sur http://www.slideshare.net/Brabant/workshop-girls-in-web-sur-lergonomie

La suite ?

Les workshops reviendront sans tarder à la rentrée. Notez dans vos agendas le mercredi 11 janvier, nous vous parlerons de Twitter (toujours avec un focus pro et métier) depuis le luxueux concept store Foncier Home qui nous accueillera en exclusivité. Nous mettrons en vente les places comme d’habitude, sur Weezevent, dès janvier.

Et d’ici là, nous vous souhaitons de très bonnes fêtes ainsi qu’un repos bien mérité et ce qu’il faut de bonheur pour recharger les batteries et affronter une année 2012 qui, préparez-vous, s’annonce déjà bien riche du côté des Girlz In Web !

Crédit photos : Caroline Maizières.