novembre
18
Ateliers Paris Web 2007 - Ergonomie des sites Internet avec Amélie Boucher
Catégories : Evénementiel • Qualité web
Tout juste rentré des ateliers Paris Web 07 que déjà la frustration de n’avoir pu assister aux conférences s’installe. En effet, tous les excellents échos que j’avais pu avoir se sont révélés vrais.
Plusieurs « pointures » du web français et international étaient présentes ce qui a donné lieu à des interventions d’une qualité plus qu’appréciable, des interactions nombreuses avec les auditeurs et une bonne humeur générale toute à fait plaisante.
Le seul défaut que j’ai pu trouver à cette journée est qu’il était impossible d’assister à tous les ateliers…damned
Puisqu’il a fallait en choisir 4, voici les ateliers auxquels j’ai assisté :
- « Analysons ensemble l’ergonomie de votre site Internet !» par Amélie Boucher
- « Flex, Flash et accessibilité» par Stéphane Deschamp
- « Le RGAA par la pratique » par Aurélien Levy
- « Conception d’un site accessible : démarche et bilan ! » par Émilie Sidoli, Julie Landry, Laurence Borne, et Marie Destandau.
Je vais donc vous faire mon petit compte rendu sur ces 4 interventions (en 4 billets différents) qui, est-il besoin de le préciser, ont toutes d’été de grande qualité.
1er atelier : Analysons ensemble votre site Internet par Amélie Boucher
Amélie Boucher – fondatrice d’Ergolab et auteur du récent ouvrage sur l’ergonomie web disponible chez Eyrolles.
Première remarque et non des moindres, la salle était pleine. Pleine, à tel point qu’il n’y avait plus de places assises et que les retardataires ont dû rester debout. Bien que cela ait l’air tout à fait anodin, quel meilleur témoin de la prise de conscience de la place importante de l’ergonomie dans la conception de site Internet.
La présentation s’est axée autour de 12 règles essentielles :
- Une architecture bien rangée et adaptée à la cible
S’il semble évident que cela soit une nécessité de base, de nombreux sites Internet viennent nous prouver tous les jours le contraire. L’architecture business ne doit pas systématiquement être adaptée de façon « brut de pomme » sur le site. En effet, certains termes spécifiques à la marque ne sont pas toujours porteurs de sens pour l’internaute ce qui peut venir perturber la navigation au sein du site.
Par ailleurs, il existe une différence notoire entre la quantité d’informations proposées par le site par rapport à celle perçue par l’utilisateur d’où l’importance capitale d’organisation du mieux possible l’information.
- Organisation visuelle
L’organisation visuelle se cale directement sur les lois de Gestalt (grands principes d’organisation visuelle)
-Cohérence
Conserver une logique tout au long de la navigation de l’internaute.
Un peu facile mais tellement flagrant en ce moment, les portails France Television en pleine refonte. La page d’accueil de France 2 et France 3 viennent d’être mise à jour alors que le contenu de niveau 2 conserve l’ancienne mise en forme. Un peu déroutant même pour les utilisateurs avertis que nous sommes.
-Convention
Les conventions font appel à la mémoire utilisateur et au « règles » ou « principes » établis des usages sur Internet. Exemple concret : le logo d’un site Internet. Ce dernier est systématiquement placé en haut à gauche pour suivre le principe de lecture qui va dans ce sens. De façon intuitive nous avons le réflexe d’aller le chercher là quand bien même il serait placé à droite.
L’exemple présenté par Amélie s’est fait sur le site de Clarins. Il est vrai que lors du choix du produit, une liste de checkbox est laissée libre à l’utilisateur. Instinctivement (et puisque c’est gratuit), nous avons tendance à cocher toutes les cases.
Dommages, un seul article semble autorisé (et pourtant cétait indiqué). Un radiobutton aurait semble-t-il été plus judicieux d’autant que les différentes utilisations des éléments de formulaires sont maintenant quasiment acquis pour les utilisateurs réguliers du net.
-Information – visibilité du feedback
Informer l’utilisateur ! Un utilisateur informé est un utilisateur en confiance, qui plus est sur un site d’achat.
Sur VirginMega, un ajout de produit présent déclenche l’affiche en haut de page d’une alerte précisant le contenu du panier. Problème, on ne le voit pas lorsque l’on est trop bas dans la page.
Dommage de ne pas avoir pensé à faire adapter la position de cet affichage selon là où l’on se trouve dans la page.
Résultat de cette erreur, un double clic de l’utilisateur donc un double ajout ce qui entrainera plus tard une suppression dans la page dans son panier. Bien évidemment, cela ne sera pas pour rassurer le futur acheteur.
-Compréhenssion
Faire comprendre à l’internaute ce qu’il est en train d’entreprendre sur le site. Les actions ne doivent pas être ambigües mais claires pour être le plus efficient possible.
-Assistance
Guider l’internaute !
Il faut suggérer les actions (notion d’affordance) qu’il doit faire sur le site. Ne pas le laisser perdu dans cette masse d’information sous peine qu’il ne revienne pas.
-Gestion des erreurs
La gestion des erreurs est essentielle. Comme dans la règle « information », un utilisateur informé est un utilisateur rassuré.
L’erreur en elle-même n’est pas problématique, il faut simplement faire attention à bien le faire remonter à l’internaute en lui indiquant précisément d’où vient le problème pour faciliter la correction.
Attention toutefois à la surprotection.
L’exemple étudié pour illustré les formulaires à vérification instantanée a été Remember the Milk déjà mis en avant par Fred Cavazza. Amélie Boucher montre ici que ce formulaire, aussi intuitif soit-il, pousse la protection utilisateur contre les erreurs trop loin dans le sens où le site considère comme erreur tout champ non rempli à partir du moment où le focus de la souris est sur ce champ.
A titre personnel, je trouve le formulaire d’inscription au portail Yahoo bien plus intéressant et intuitif (celui-ci fera d’ailleurs l’objet d’un article prochain). L’ajax est certes beaucoup utilisé mais de manière plus judicieuse que dans RTM. En effet, Amélie Boucher précisait que si la vérification instantanée était très appréciable d’un point de vue ergonomique, une sur-utilisation pouvait ne pas être utile.
-Rapidité
La rapidité où comment être efficient sur une page.
Un exemple tout simple de comment perdre du temps lorsque l’on cherche quelque chose sur le site de l’AFNIC.
Lorsque vous rechercher un nom de domaine mais que vous souhaitez le modifier, le contenu du champ disparait systématique et l’on se retrouve à devoir ressaisir mainte et mainte fois la saisie.
-Liberté
Live free or die…
L’internaute doit ressentir une grande liberté d’action sur le site. No comment.
-Accessibilité
Bien évidemment, l’accessibilité est une contrainte essentielle.
Selon Tim Bernes Lee, directeur du W3C et inventeur du World Wide Web « Le pouvoir du Web réside dans son universalité»
Rendre un site accessible devrait être aujourd’hui considéré comme un postula obligatoire dans toute création web. Mais oui, un site accessible est souvent plus long à faire ce qui impacte des coûts supplémentaires que tous les annonceurs ne sont pas près à assumer. Par ailleurs, un site accessible n’est pas synonyme de charte graphique absente et d’une mise en page laide, en témoigne le site réalisé par Émilie Sidoli, Julie Landry, Laurence Borne, et Marie Destandau pour le centre Pompidou.
-Satisfaction de l’internaute
Ce point se passe à mon sens de commentaire. Le titre seul suffit à comprendre.
La séance s’est terminée par une analyse de quelques sites proposés par les personnes présentes. Par manque de temps, seuls 3 sites ont été analysés.
Au final, j’ai trouvé que cette intervention était l’un des plus intéressantes de la journée. La bonne humeur dégagée par notre oratrice et les nombreux exemples ont permis d’apprendre rapidement quelques règles essentielles d’ergonomies, qui bien qu’elles soient connues, sont loin d’être appliquées partout.
Bravo pour cet atelier !
Amélie Boucher sera également présente à la conférence du 29 novembre à Adobe organisée par Designers Interactifs.
Synerg’heTiC ne manquera pas de vous faire un compte rendu.
Profil Facebook
Profil Flickr