12 règles pour optimiser l'ergonomie de votre site

Chapitre 05 - Les bases et critères de l'ergonomie web

» Règle n°1. Architecture : le site est bien rangé» Règle n°2. Organisation visuelle : la page est bien rangée» Règle n°3. Cohérence : le site capitalise sur l’apprentissage interne» Règle n°4. Conventions : le site capitalise sur l’apprentissage externe» Règle n°5. Information : le site informe l’internaute et lui répond» Règle n°6. Compréhension : les mots et symboles sont choisis minutieusement» Règle n°7. Assistance : le site aide et dirige l’internaute» Règle n°8. Gestion des erreurs : le site prévoit que l’internaute se trompe» Règle n°9. Rapidité : l’internaute ne perd pas son temps» Règle n°10. Liberté : c’est l’internaute qui commande» Règle n°11. Accessibilité : un site facile d’accès pour tous» Règle n°12. Satisfaire votre internaute» En bref : 12 règles à utiliser à bon escient

http://www.ergonomie-sites-web.com/

Règle 2

Organisation visuelle : la page est bien rangée

Libérer l’esprit de votre internaute, en limitant la charge mentale liée au traitement de ce qu’il voit à l’écran

Rappels sur le système visuelLes photorécepteurs de la rétine captent les longueurs d'ondes et les transforment en influx nerveux, qui via le nerf optique sera traité par le thalamus, puis par le cortex.

- voie dorsale (lobe pariétal) responsable de la discrimination spatiale : localisation et mouvement

- voie ventrale (lobe temporal) opère à la discrimination d'objets : dirige vers les zones du langage

Où ?

Quoi ?

Recommandations à suivre :

● Éviter le trop-plein d’informations● Diviser la quantité de mots par deux● N'afficher que les principaux éléments de navigation et

d'interaction● Afficher les éléments optionnels seulement si nécessaire● Supprimer les éléments d'interaction inutiles● N'afficher que les éléments d'interaction les plus utiles● Différencier les quantités d'information réelles et perçues● L'hétérogénéité visuelle augmente la charge informationnelle● Les images de fond augmentent la charge informationnelle● Les animations augmentent la charge informationnelle

1 - Éviter le trop-plein d’informations

Supprimer l'information inutile

bruit visuel : tout élément graphique qui ne transmet pas d'information, surcharge la présentation, ou entre en compétition avec l'information.

Il est évident qu'il vaut mieux se passer de ce genre de nuisance sur une page web.

2 - Diviser la quantité de mots par deux

● Conseil récurrent, constat empirique● Valable pour les pages navigantes non pour les pages de

contenu● Tout particulièrement pour les éléments de navigation

(barre, menu)

Trois types de lecture selon le contexte d'utilisation, l'expertise de l'internaute

● Repérage : survol ● Balayage : survol + synthèse, « scan visuel »● Lecture en profondeur : décortication, « mot à mot »

J. Nielsen → grands principes pour l'écriture Web * concision : nous lisons 25 % plus lentement à l'écran.

* balayabilité : quand nous lisons, nous "scannons", nous lisons « en diagonale » 79 % balaient les textes. 16% lisent mot à mot tout le contenu qui leur est présenté.

* morcellement des pages : les internautes n'utilisent pas systématiquement l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement des informations importantes en haut de la page.

● On peut supprimer texte Cliquez sur les puces rouges pour faire apparaître les caractéristiques détaillées du centre de votre choix ou pour obtenir un plan d’accès

● Composition : difficulté à trouver stabilité horizontale

● Site actuel : http://www.unepieceenplus.com/

● page d'accueil enrichie● grille 3 colonnes

3 - Différencier les quantités d'information réelles et perçues

La quantité d’informations seule ne peut suffire à définir la charge Informationnelle de votre site. Cette dernière peut paraître plus Importante pour l’internaute en fonction des animations, images de fond et de l’hétérogénéité visuelle. (p102)

● Hétérogénéité : plus il y a de typographies et de couleurs différentes plus la charge informationnelle de la page augmente

alors que la quantité d'informations calculée en pixels ne change pas

● Théorie du traitement de l'information :la charge cognitive

Approche STI – Système de traitement de l'information

● Confort visuel : combinaison de sensation et d'information

éblouissement gênant : perte de lisibilitééblouissement inconfortable : gêne visuelle, fatigue

● Les images de fond augmentent la charge informationnelle

Les éléments de navigation primordiaux sont presque invisibles : Genre, Recherche, Catalogue (au centre)

Optimiser deux aspects :

● legibility pour désigner la lisibilité matérielle, visuelle d'un texte. On réfère donc au niveau perceptif

● readability pour désigner la lisibilité cognitive, la façon dont un texte peut être intégré au niveau cognitif et compris par l'utilisateur.

La lisibilité

Quelques recommandations

● mettre en valeur les informations importantes, les mots-clés : utiliser des enrichissements typographiques, gras ou l'italique (moins lisible qu'un style classique)● jouer sur les tailles de caractères ● bien distinguer les mots-clés des liens (ne pas utiliser le même format)

● Séparer le texte en parties significatives, leur attribuer des titres et sous-titres, fournir un sommaire pour les longs textes

Catégoriser les informations et faire ressortir cette catégorisation, soit par la localisation physique des éléments (on sépare ce qui ne se ressemble pas), soit par le format (on présente dans un format différent les éléments qui sont différents), soit par la couleur

● Employer la voix active, rédigez le plus possible au présent de l'indicatif Des lignes de texte ni trop longues ni trop courtes, environ 80 caractères

● Ecrire en minuscules plutôt qu'en majuscules (les mots écrits en lettres minuscules sont plus faciles à lire que ceux écrits en lettres capitales). On peut toutefois se permettre d'écrire en majuscules pour des informations brèves (intitulé d'un bouton, titre de page, titre de rubrique, etc.).● Contre-exemple http://www.gaite-lyrique.net/ Cf diapo suivante

Le droit d'écrire long● Dès que le contenu recherché est identifié, le processus de lecture n'est

plus de type "scan" et le parcours oculaire revient à la normale. 75% du texte est alors lu et non parcouru. ( Fournir un format imprimable )

● Découper le texte en plusieurs pages ? discutable ● a priori, il est plus facile de lire des pages courtes, sans avoir besoin de

scroller pour lire la suite d'un texte. Cependant, la nature même du web fait que le découpage d'un texte en plusieurs pages nécessite le chargement successif de ces pages. Cette façon de présenter l'information nuit à une lecture continue du texte, puisque normalement, l'oeil passe inconsciemment d'une ligne à l'autre de manière non séquentielle.

● de plus, la lecture est une activité cognitive très contextuelle. On a souvent besoin de "remonter" de quelques paragraphes pour comprendre ce que nous sommes en train de lire. En effet, on ne lit pas des mots isolés, mais on met en relation les mots et phrases les uns avec les autres.

Couleurs

● Cf. Pdf Cédric Dumas● tester contraste de couleur selon déficience

http://www.vischeck.com/vischeck/vischeckURL.php● tester palette de couleur de votre page

http://www.checkmycolours.com/● générer une palette de couleur à partir photo

http://bighugelabs.com/colors.php

Page d'accueil : Tout se joue en 50 ms !

● Mettre un minimum de contenu textuel : 2 ou 3 § (indexation et positionnement correct)

● Evitez le logo occupant une grande partie de la page sans autre commentaire

● Proposer un outil de recherche ● Des liens utiles : plan, contact - adresse, choix de langue, annonce,

actualités, nouveauté ● Permettez l'interruption de l'animation d'intro. ● La page d'accueil doit être appréhendée d'emblée, d'un seul coup

d'œil : pas d'ascenseur

● scinder en plusieurs ensembles les menus trop longs (supérieur à 10 rubriques, MCT : Miller 7+/- 2 items)

● les informations les plus importantes qui sont contenues dans le site doivent pouvoir être accessibles rapidement en deux ou trois étapes maximum.

● pas trop « dense » (page tunnel à éviter). ● Les liens vers " Quoi de neuf ? ", " News", " Nouveautés" sont

insuffisants. ● date de création, ainsi que la date de mise à jour et

éventuellement la périodicité● Attention au message "page en construction" (discrédit du site).

Quand la date de mise à disposition est connue, précisez-la et respectez la.

● URL courtes, faciles à retenir (moins de 10,12 lettres, pas de tirets)

La mise en page● Le titre > attractif, court : 4 à 10 mots

> informatif/explicite

> contenant les mots clés

> visible - central - en gros caractère

● Les sous-titres Ils ressortent lorsqu'ils sont composés dans une police de caractère différente de celle du texte, s'ils sont composés en caractères gras ou italiques.

Les sous-titres peuvent être centrés, alignés à gauche ou alignés à droite

● Les légendes Les titres et les légendes sont souvent les seuls éléments lus dans un document. Utilisez les légendes pour résumer les points importants du texte.

La largeur de la légende doit être établie en fonction de la largeur de l'illustration

Les sous-titres, les légendes les en-têtes accélèrent le temps de lecture ● Le pied de page de chaque page-écran doit contenir :

> la barre de navigation,

> le nom de l'auteur;

> l' adresse d'un contact ( e-mail),

> l' identification de l'organisme,

> la date de mise à jour

Cf le pdf en ligne

Macrotypographie