60questions.net - Comment réussir sur le web Accueil > Dossiers   

Qui sommes-nous ?   |   Liens   |   Dossiers  
Audit Benchmarking Conception Test utilisateur Formation Coaching

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
 

Le site web de la société d'intérim StartPeople

[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

Le site web du ministère français de l'agriculture et de la pêche

[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

Les nouvelles de Radio Canada

[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
 

Le site web dotemplate.com

[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
 

Le site web de la société Manpower

[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
 

Le portail officiel belge de l'agriculture

[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
 

Le site web de France 2 (chaîne de télévision)

[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
 

Le site web de la société sprl Jalons

[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.

-> Accéder aux autres dossiers
-> Vous désirez suggérer un thème ? Ecrivez-nous !

 
     
© User Attraction sprl 2003-2008       Dernière mise à jour: 13 mai 2008       [Nous contacter] [Haut de la page]