davidbgk
/
larlet-fr-david

title:      12 règles d&#39;ergonomie web par Amélie Boucher
slug:       12-regles-d-ergonomie-web-par-amelie-boucher
date:       2007-11-17 23:31:04
type:       post
vignette:   images/logos/ergolab.png
contextual_title1:  ★ iPheeds.org, une version iPhone pour votre blog
contextual_url1:    20080723-ipheedsorg-une-version-iphone-pour-votre-blog
contextual_title2:  Critique du livre Ergonomie Web
contextual_url2:    20080528-critique-du-livre-ergonomie-web
contextual_title3:  Critique du livre Donne moi ce que je veux !
contextual_url3:    20071014-critique-du-livre-donne-moi-ce-que-je-veux

<p>Notes de lectures quasi-brutes issues de la conférence d'<a href="http://www.ergolab.net">Amélie Boucher</a> lors de <a href="http://2007.paris-web.fr/">Paris Web</a> qui était fort intéressante. Je suis impatient de pouvoir <a href="http://www.editions-eyrolles.com/Livre/9782212121582/ergonomie-web">lire son livre</a> qui semble aller beaucoup plus loin. En attendant de faire un bilan plus complet sur ces journées. Ou pas.</p>

<h2>Architecture</h2>


<p>Connaissance des visiteurs pour architecturer le site, c'est essentiel pour connaître leurs habitudes et pouvoir ranger les éléments par thématique. L'architecture de l'information constitue les fondations du site sans lesquelles un site ne pourra être utilisable de façon ergonomique.</p>


<h2>Organisation visuelle</h2>


<p>Vérifier en floutant la page que l'on a de gros blocs identifiables, il s'agit de limiter la surcharge visuelle au maximum car l'animation complique l'intégration mentale. Essayer au maximum de placer les animations hors du texte principal de façon à limiter les distractions. Se renseigner sur <a href="http://fr.wikipedia.org/wiki/Psychologie_de_la_forme">les lois de la Gestalt</a>.</p>


<h2>Cohérence</h2>


<p>Capitaliser l'apprentissage interne en gardant des repères tout au long de la navigation sur le site, les barres de navigation sont un repère important pour le visiteur&nbsp;: ne pas déplacer/modifier au cours de la visite.</p>


<p>Nomenclature (charte) à respecter pour ne pas perdre le visiteur concernant les termes métiers. Ne pas supprimer les parties importantes (les plus utilisées ?) des pages et uniformiser les formats de présentation (comme les liens). Le comportement du site doit toujours être le même&nbsp;!</p>


<p><strong>Attention</strong>&nbsp;: certaines choses différentes doivent être présentées différemment, l'ergonomie ne doit pas brider la créativité. Il faut maintenir cette hétérogénéité au niveau du design. Le métier d'ergonome est avant tout de faire des concessions, toujours.</p>


<h2>Conventions</h2>


<p>Capitaliser sur l'apprentissage externe en misant sur les conventions acquises.</p>


<p>L'ergonomie ne permet pas de se démarquer, il faut passer par le design, le contenu, l'expérience utilisateur générale. Ne pas oublier que l'on préfère ce que l'on connaît, tout simplement.</p>


<h2>Information</h2>


<p>Informer l'internaute c'est de la politesse&nbsp;! L'information ponctuelle et contextuelle est très importante et doit être associée à la notion de feedback&nbsp;: l'ordinateur doit acquiescer. Mais attention&nbsp;: <em>avec qualité</em>&nbsp;! Il doit être <strong>visible</strong> à tout moment par l'internaute.</p>


<h2>Compréhension</h2>


<p>Choix des mots et symboles&nbsp;: <strong>75% du travail d'ergonomie, c'est ce qui va faire cliquer l'internaute ou pas !</strong></p>


<p>Utiliser les mots&nbsp;: les icônes ne suffisent pas, bien choisir ces mots. Par exemple expliquer ce qu'est un fil RSS. Notre avis est toujours biaisé, demander à de vrais visiteurs grâce aux tests.</p>


<h2>Assistance</h2>


<p>On doit guider l'internaute&nbsp;:</p>
<ul>
<li>explicitement&nbsp;: mots (à défaut d'autre chose)&nbsp;;</li>
<li>implicitement&nbsp;: organisation visuelle, format et comportement des objets.</li>
</ul>

<p>Notion d'<a href="http://fr.wikipedia.org/wiki/Approche_%C3%A9cologique_de_la_perception_visuelle#Affordances">affordances</a> = possibilités d'action suggérées par un objet. Sur le web, cela se résume à la question suivante&nbsp;: <em>est-ce que je peux interagir avec ?</em></p>


<p><strong>Attention aux contre-affordances</strong>&nbsp;: ne pas simuler un lien, sinon c'est une impasse qui amène à une déception. La déception est <em>GRAVE</em> en ergonomie.</p>


<h2>Gestion des erreurs</h2>


<p>Postulat&nbsp;: <strong>l'internaute va se tromper</strong>.</p>


<p>3 manières de gérer&nbsp;:</p>
<ul>
<li>avant l'erreur&nbsp;: protéger&nbsp;;</li>
<li>après l'erreur&nbsp;: repérage et compréhension de l'erreur&nbsp;;</li>
<li>au-delà de l'erreur&nbsp;: faciliter la correction.</li>
</ul>

<p>Attention à la surprotection&nbsp;: exemple de <a href="http://www.rememberthemilk.com/signup/">Remenber The Milk</a> qui donne une erreur lorsque le champ est vide lors de l'inscription, il y a aussi le problème de la distraction lors de la frappe (petite parenthèse au passage, je préfère la boulangerie d'Amélie, ceux qui étaient là comprendront ;-)).</p>


<p>Le rechargement de la page est un indicateur suffisant de validation.</p>


<h2>Rapidité</h2>


<p>L'internaute ne dois pas perdre son temps&nbsp;: faciliter les clics et les interactions.</p>


<p>La <a href="http://fr.wikipedia.org/wiki/Loi_de_Fitts">loi de Fitts</a>&nbsp;: une cible est d'autant plus rapide à atteindre qu'elle est proche et grande, ne pas recourir à la mémoire (libellés au hover par exemple). Ne pas demander à l'utilisateur de faire les choses plusieurs fois (champs de formulaire qui se vident lors d'erreurs). Penser à mettre des raccourcis pour aller plus vite lorsque l'utilisateur est un habitué.</p>


<h2>Liberté</h2>


<p><strong>Donner</strong> l'impression <strong>à l'internaute</strong> qu'il a <strong>le pouvoir</strong>&nbsp;: on ne doit pas lui imposer des choses et donc respecter les contrôles utilisateurs de base.</p>


<p>Attention aux actions au survol (à ce sujet l'atelier de l'après-midi sur l'accessibilité était très intéressant, je n'avais jamais eu l'occasion d'entendre ce que donnait un rendu sous synthèse vocale mais ça fait réfléchir...) L'internaute est un acteur&nbsp;! Ne pas le rendre passif ou lui imposer des pubs comme s'il était devant la télévision.</p>


<h2>Accessibilité</h2>


<p>Physique (surtout visuelle) et technologique.</p>


<h2>Satisfaction de <em>votre</em> internaute</h2>


<p>Utilité&nbsp;: micro-fonctionnalités sur mesure qui démarquent le site de façon positive. Il faut attribuer une grande importance à l'esthétique et à l'expérience utilisateur globale&nbsp;: un site plus facile à utiliser s'il est beau.</p>


<p>Ne pas oublier l'importance de la qualité du service résultant de la puissance et de la fiabilité technique&nbsp;: <em>il faut que ça marche !</em> (excellente transition avec la conférence suivante de la <a href="http://devteam.skyrock.com/">devteam</a>).</p>


<h2>Au-delà des règles</h2>


<p>Il faut bien sûr pondérer ces règles en fonction du type d'utilisateur et de la problématique. <strong>C'est un guide mental et non une check-list !!!</strong> Enfin il faut savoir qu'il est possible de transgresser les règles en cas de besoin mais il faut en être conscient.</p>


<p>Cette conférence s'est terminée par quelques exemples en live de revues ergonomiques de sites. Malheureusement <a href="http://voyages-sncf.fr">mon site préféré</a> n'a pas pu être audité à ce moment là... mais bon il manquait sûrement une bonne journée pour pouvoir relever toutes les énormités ergonomiques ;-). Au final, la meilleure conférence de cette édition de mon point de vue.</p>