Accueil Recherche Page précédente Page suivante Haut de page(aller au contenu) liens d'évitement et raccourcis clavier Droits de copie Aller au menu

contrasteJouez avec le contraste

Guidez l'oeil de vos visiteurs
sur les points forts de vos pages

Chez l'animal comme chez l'homme, l'oeil a une sensibilité instinctive aux contrastes.

L'esthétique, la clarté et l'ergonomie de votre site dépendent de votre talent à maîtriser les différentes formes de contraste et à les utiliser avec intelligence.

Cette page s'inspire d'un article de RankSpirit : Contrastes et design

Sélection de liens concernant les contrastes

Introduction
au Web Design

Parmis d'autres notions, cet article aborde les questions de couleur et de contraste, ainsi que le bon choix et le bon positionnement des éléments servant de repères aux visiteurs.

L'attention
Sébastien Billard interview Rafael Mizrahi sur son logiciel de suivi d'attention.

Bonnes et mauvaises mises en page
Jean-Marc Hardy nous parle du découpage des pages Web et de la gestion des équilibres. Les exemples proposés sont édifiants.

Mise en page, Typographie
et contrastes

Une réflexion du site Ergologique sur les bases d'une bonne lisibilité.

Capter et garder l'attention

Pour réussir à capter, puis à garder l'attention des lecteurs, vous allez devoir doser vos contrastes en tenant compte de deux règles essentielles :

pour le meilleur et pour le lireLe contraste doit être dosé pour attirer l'attention sur les zones les plus intéressantes de votre page.

Arrrggghhh !Trop de contrastes tue le contraste !

Vos visiteurs sont, dans la plupart des cas, à la recherche d'informations précises. Il n'accorderont que quelques secondes à vos pages pour juger de leur intérêt (lire, à ce sujet, notre article sur le zapping).

couleurs complémentaires
Noir sur blanc, orange sur bleu ou vert sur jaune :
les couleurs complémentaires sont celles
qui présentent le plus fort contraste
pour l'oeil humain.

Quelques variations possibles

Voici quelques possibilités pour créer des contrastes sur une page Web :
la couleurLa couleur : dans le texte, dans les cadres, dans les fonds

la lumièreLa luminosité : dans les fonds, dans les images

la formeLes formes : dans la mise en page du texte. Vous pouvez changer les dimensions ou le nombre des colonnes, créer des encadrés, dégager des zones sans texte

les dimensionsLa taille : pour le texte

le jeu de caractèresLes police de caractère et le style : gras, italique

bouger Le Mouvements : gifs animés ou  animations flash

Toutes ces variations peuvent "attraper" l'attention de vos lecteurs... ou les agacer si elles sont employées à mauvais escient.

Commencer par créer des pages neutres, équilibrées et homogènes. Ne rajoutez les contrastes qu'en fonction du contenu de la page (et après une bonne réflexion). Le fond doit dicter la forme et non l'inverse.

Pour vérifier si vos contrastes sont bien placés, essayez de parcourir vos pages en quelques fractions de secondes et notez sur quelles zone votre oeil à tendance à s'accrocher. Ces zones sont-elles intéressantes ? Informatives ? Donnent-elles envie d'en savoir plus ?

L'approche du CCDMD

Le Centre collégial de développement de matériel didactique (CCDMD), géré par le collège de Maisonneuve au Québec a édité en 2007 un guide du design ("Notions de design de l’interface utilisateur") comportant une section sur "La mise en évidence".

Voici ce que nous dit cette section :

La mise en évidence est une technique qui vise à attirer l’attention de l’utilisateur sur certains objets.

On y arrive de différentes façons : clignotement, graisse d’un texte, couleur, caractères plus gros ou en italique, surbrillance du texte, puces, etc. Il faut surtout ne pas en abuser, au risque de surcharger l’écran et de submerger l’utilisateur dans une mer d’informations inutiles.

Quelques recommandations :

Il y a plusieurs façons de mettre en évidence un objet ou une commande. Toutes n’ont pas la même signification ni la même valeur.

Évidemment, il faut éviter d’utiliser toutes ces techniques de mise en évidence sur une même page.

Ce site vous a plu ? Visitez aussi : L'annuaire ultra-sélectif pour webmasters  et  Le design des sites Web



Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Accueil