BONNES PRATIQUES
La lisibilité, votre force de frappe
[Février 2008]
Vous désirez vous faire entendre ? Dans
ce cas, il va vous falloir maîtriser certains détails :
les choix typographiques, les contrastes de couleur, les alignements,
les espaces, la densité d’information,… sont
autant de paramètres qui détermineront votre capacité
à capter l’attention de vos lecteurs. Mettons quelques
sites web côte à côte et voyons lesquels
sortent gagnants.
|
4 exemples à suivre
| startpeople.be |
Une entrée en matière
limpide
|
| 
[Prise d'écran - 13 février 2008 -
www.startpeople.be] |
Startpeople (anciennement Creyf’s Interim) joue la
carte de la simplicité. Comparativement à Manpower
(voir l’exemple plus bas qui fait partie du même
secteur), Startpeople s’est concentré sur l’essentiel.
Les deux premières entrées (« Vous
cherchez du travail » ou « Vous cherchez
un collaborateur ») résument, en termes
on ne peut plus simples, les services de l’entreprise.
Les couleurs (orange, noir et blanc) sont très contrastées
et les titres, bien grands. Y compris dans les pages intérieures.
La ligne est claire et la mise en page, bien soutenue. Les
photos viennent efficacement supporter la navigation. Elles
ajoutent une touche humaine à cette page d’entrée
très efficace.
|
 |
agriculture.gouv.fr
|
Des zones bien
contrastées |
| 
[Prise d'écran - 13 février 2008 -
http://agriculture.gouv.fr] |
Le ministère français de l’agriculture
et de la pêche et notre portail belge de l’agriculture
(voir plus bas) ont certainement autant de choses à
dire l’un et l’autre. Seulement, l’un se
noie et l’autre pas. La page d’accueil du ministère
français possède une qualité essentielle
que ne possède pas le portail belge : une architecture
d’information bien pensée, matérialisée
par des zones visuellement contrastées. Les entrées
thématiques, la web TV, les services en ligne, les
rendez-vous ou les actualités sont autant d’espaces
qui se détachent clairement au sein de la page d’accueil
du ministère français. La densité d’information
reste raisonnable pour un portail, compte tenu de l’efficacité
du découpage.
|
 |
radio-canada.ca
|
La maîtrise
du détail |
| 
[Prise d'écran - 13 février 2008 -
www.radio-canada.ca/nouvelles/] |
La plupart des médias en ligne ont tendance à
faire remonter de nombreuses actualités en page d’accueil.
Les Nouvelles de Radio Canada disposent d’une mise en
page sur quatre colonnes. C’est dense. Mais Radio Canada
parvient à faire rimer densité et lisibilité.
Les textes apparaissent en noir sur fond blanc : pas
besoin de chercher plus loin, il s’agit là du
meilleur contraste. Les titres cliquables et autres hyperliens
se démarquent en bleu, tandis que les surtitres sont
rouges. Et ce, à travers l’ensemble du site.
La police de caractère choisie est l’Arial, connu
pour sa lisibilité à l’écran. Les
titres et les photos sont rigoureusement alignés. Quant
aux barres de navigation, elles sont parfaitement contrastées
et permettent immédiatement à l’utilisateur
de se situer.
|
 |
| dotemplate.com |
La lisibilité de
l'offre |
| 
[Prise d'écran - 13 février 2008 -
www.dotemplate.com] |
S’il y a bien une chose essentielle pour un acteur
de la nouvelle économie, c’est de faire comprendre
en 10 secondes la valeur de son offre de service. Le site
dotemplate.com y parvient assez bien. Trois petites flèches
colorées résument l’intérêt
du site en un coup d’œil : « Pick
a template >> Customize it >> Download
it for free » (traduisez : Choisissez un gabarit >>
Personnalisez-le >> Téléchargez-le
gratuitement). Un médaillon « Free »
insiste sur la gratuité du service. On aurait pu être
tenté d’accueillir le visiteur par un discours
verbeux, du genre : « Bienvenue sur ce nouveau
site. Après 5 ans de recherche et développement,
toute notre équipe a le plaisir de vous livrer un outil
qui devrait vous faciliter la vie, bla bla bla ».
Rien de tout cela ici. On rentre tout de suite dans le vif
du sujet.
|
 |
4 exemples à ne pas suivre
manpower.be |
Navigation à rallonge
et perte d'énergie rédactionnelle |
| 
[Prise d'écran - 13 février 2008 -
www.manpower.be]
|
33 liens cliquables, 1 menu déroulant, 3 onglets,
5 champs de recherche et d’inscription : c’est
le tableau de bord auquel le visiteur de Manpower est confronté.
Sous l’onglet « Je cherche une solution HR »,
nous avons déroulé 48 rubriques dans la colonne
de gauche, avec un tri parfois aléatoire. Même
prolixité au niveau du texte d’accueil :
« Bienvenue dans le monde du travail contemporain »,
« Manpower vous offre le conseil et la vision qui
rendent le travail toujours plus intéressant »,
« Voilà ce que nous sommes. Voilà
ce que nous faisons »,… autant de phrases
abstraites qui noient le visiteur. Comparez avec les quatre
entrées proposées par Startpeople. Certes, le
positionnement des deux entreprises n’est sans doute
pas identique. Mais nous sommes convaincus que Manpower gagnerait
à épurer son offre.
|
 |
Portail belge de l'agriculture |
Aride, épais, broussailleux,
impénétrable
|
| 
[Prise d'écran - 13 février 2008 -
www.statbel.fgov.be/...] |
Le portail belge de l’agriculture ferait bien de s’inspirer
de son homologue français (voir plus haut). Un simple
coup d’œil sur nos prises d’écran
suffira à vous en convaincre. D’emblée
le portail belge nous assomme par une masse de texte compacte
et totalement indigeste, une quantité phénoménale
d’hyperliens et un puzzle de sous-rubriques même
pas triées alphabétiquement. Seule tentative
d’égayer un peu la page : l’insertion
d’une petite photo de tracteur, à peine lisible
et mal alignée. Pour corser le tout, une légende
est mise à disposition dans le bas de la page, nécessaire
pour décoder certains acronymes. En matière
de lisibilité, difficile de faire pire.
|
 |
| france2.fr
|
Une soupe de
contenus à dominante tomate |
| 
[Prise d'écran - 13 février 2008 -
www.france2.fr]
|
Page d’accueil ou puzzle de 200 pièces ?
C’est un peu la question qu’on se pose lorsqu’on
atterrit sur le site web de la chaîne de télévision
France 2. Tout comme Radio Canada (voir plus haut), France
2 fait remonter de nombreux contenus en surface. Mais la mise
en page manque ici de finesse. Le jeu des couleurs est plus
limité. L’éditeur abuse de la couleur
rouge, utilisée partout dans la page dans différentes
fonctions : les titres, les hyperliens, les barres de rubrique.
Du coup, rien ne se différencie vraiment. Le colonage
est nettement moins strict que chez Radio Canada : les
colonnes fusionnent, s’imbriquent, mordent les unes
dans les autres. Une véritable épreuve que de
balayer une information à ce point morcelée.
|
 |
jalons.be |
Contrastes de couleur insuffisants
|
| 
[Prise d'écran - 13 février 2008 -
www.jalons.be]
|
Du texte blanc sur un fond rose pale… Cela constituerait
un bon test de la vue pour un pilote d’avion. Mais pour
faire connaître son entreprise par le web, on peut faire
mieux, non ? En cette matière, il ne faut pas
chercher très loin : du texte noir sur fond blanc est
ce qu’on fait de mieux. Un gris très foncé
sur un fond très clair peut s’avérer efficace
et reposant. Mais il faut conserver un fort contraste. Le
bleu et le jaune, le vert et l’orange,… sont des
couleurs qui contrastent bien. Mais elles sont moins sobres
et vite lassantes. Vous désirez vérifier la
lisibilité de votre site web en termes de contrastes
de couleurs ? Il existe une
extension Firefox prévue à cet effet.
|
 |
| Vous
désirez faire analyser votre propre site web ? |
NDLR : L'objectif de la présente rubrique
est de mettre en évidence certaines faiblesses et certains
points forts ponctuels d'une série de sites internet. Il
ne s'agit en aucun cas d'une évaluation globale et définitive
des sites web.
|