Jouez avec le contraste

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 :

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

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

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 couleur : dans le texte, dans les cadres, dans les fonds

La luminosité : dans les fonds, dans les images

Les 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

La taille : pour le texte

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

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 :

• L’exception est de mise.
• Tout au plus cinq éléments mis en évidence par page.
• Une seule façon de mettre en évidence les objets pour un même logiciel ou un même site.
• La signification d’un objet ne doit pas être affectée par la mise en évidence.
  

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.

• Le clignotement sert surtout à attirer l’attention de l’utilisateur. Il est plus efficace en périphérie du champ de vision. Le clignotement est un des bons moyens de mise en évidence, mais il peut aussi agresser. Son utilisation abusive peut nuire plus qu’autre chose. Il est donc important de l’utiliser avec parcimonie et seulement si c’est la seule façon de mettre en évidence. Son usage a tendance à être distrayant et peu utile.
• L’inversion vidéo, le négatif ou la surbrillance sont d’autres façons de mettre en évidence, mais de manière beaucoup moins agressive. Ces méthodes sont surtout utilisées pour faire ressortir une chaîne de caractères d’un ensemble de caractères. Toutefois, ces façons de faire sont peu efficaces sur des fonds d’écran de couleur foncée et peuvent parfois amener une certaine confusion.
• Les encadrements et la proximité sont deux méthodes de mise en évidence qui se complètent très bien. Par la proximité, on met en évidence les informations qui sont connexes et qui se complètent. En les encadrant, on augmente la mise en évidence en les isolant visuellement de l’ensemble des éléments qui composent l’écran. Ils deviennent importants.
• Les changements de police, de graisse, de taille et le soulignement d’un caractère ou d’une chaîne de caractères, peuvent remplir la même fonction de mise en évidence que l’inversion vidéo et ses dérivés. Toutefois, elles sont un peu moins efficaces pour attirer l’attention. Cette façon de modifier les caractères pour la mise en évidence est très nuancée et maintient la fluidité de la lecture. En contrepartie, il peut arriver qu’une information importante ne soit pas suffisamment distincte et passe inaperçue. Un bon design devrait permettre d’éviter ces erreurs.
• Les puces sont une autre façon de mettre en évidence qui permet de structurer visuellement un texte et de le rendre attrayant. Cette façon de faire a comme principal intérêt de ne pas surcharger l’écran.
• La forme et la couleur sont une autre façon de mettre en évidence. Mais il faut être sensible aux codes culturels qui peuvent parfois être associés aux formes.
• Le son est aussi une méthode de mise en évidence. C’est un moyen très efficace d’attirer l’attention, surtout quand l’utilisateur n’a pas toujours le regard sur l’écran. Toutefois, en classe, lorsque 30 ordinateurs émettent un signal sonore... cela peut être un élément de distraction plus que d’attention.

É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 :  et 

-