A propos | Dossiers | Blog

Dossiers : bonnes pratiques

Le recours aux images

[Février 2005]

Les images ont plusieurs rôles à jouer sur Internet : elles peuvent enrichir les contenus, soutenir la mise en page, servir à la navigation ou renforcer l'attractivité des sites web. Cependant, il serait faux de croire que les images ont automatiquement plus d'impact que du simple texte. Les images ralentissent les temps de chargement et demandent certaines compétences pour être manipulées efficacement. Voici quelques exemples de recours aux images — pour le meilleur et pour le pire.


4 exemples à suivre


advalvas.be
 
L'attrait d'un visage en gros plan

Le site web advalvas.be

[Prise d'écran - 5 février 2005 -
www.advalvas.be
]

Une étude de suivi du regard ("eye tracking study"), menée en 2004, aux Etats-Unis, par l'Institut Poynter, semble démontrer que les photographies de visages humains constituent des éléments particulièrement accrocheurs dans une page web. Tout particulièrement lorsque ces visages sont présentés en gros plan.
Le portail AdValvas utilise quasi quotidiennement des photos de visages en page d'accueil. En page intérieure, AdValvas utilise volontiers des photos de taille moyenne. Comme sur cette prise d'écran, où le portrait de Zinedine Zidane fait 345 pixels de largeur et 173 pixels de hauteur. La taille des images compte : entre une petite vignette de la taille d'un timbre-poste et une photographie occupant près de la moitié de la largeur de l'écran, le taux d'exposition varie de 10 à 70%. Une image d'environ 200 x 200 pixels a beaucoup de chances d'être vue par plus de la moitié des visiteurs. Bien entendu, notamment pour des raisons de performances, il n'est pas conseillé de multiplier, dans une même page, les photographies imposantes.

lalibre.be
 
Des images à valeur informative
 

Le site web de La Libre

[Prise d'écran - 6 février 2005 -
www.lalibre.be]

Il y a quelques années, Jared Spool et Matthew Klee — fondateurs de la société User Interface Engineering ont mis en évidence quatre rôles fondamentaux joués par les images sur un site web : l'image comme élément de navigation, comme élément de mise en page, comme élément ornemental ou comme élément informatif. C'est ce dernier rôle qui semble le plus apprécié par les internautes, lesquels sont demandeurs d'images informatives.
Les infographies, comme celles que vous pouvez trouver sur le site web du quotidien La Libre, sont, par définition, des images ayant une valeur informative. Dans notre exemple, une carte géographique représente le déroulement des élections de janvier 2005 en Irak. Les chiffres clés et les villes concernées sont clairement mis en évidence. L'infographie est interactive : l'utilisateur peut décider d'afficher ou non les différentes couches de la carte : relief, fleuves, villes, régions,... A la différence de nombreuses infographies recyclées sur Internet après avoir été grossièrement numérisées, celle-ci a visiblement été créée pour le web. Elle est parfaitement lisible et légère à télécharger.

skynet.be
 
Les pictogrammes au service de la navigation

Les pictogrammes utilisés sur le site web skynet.be

[Prise d'écran - 5 février 2005 -
www.skynet.be]

En 1992, le professeur Johnson a comparé trois types d'interfaces : celles qui basent la navigation sur des liens hypertextes, celles qui utilisent des icônes visuelles, et les interfaces mixtes, qui associent du texte à un pictogramme. Il a été démontré qu'en moyenne, ce sont les interfaces mixtes qui obtiennent les meilleurs résultats en termes d'ergonomie. Les textes sont plus explicites, mais les images permettent d'agripper l'oeil plus facilement. Après quelques visites d'un site contenant des icônes, les utilisateurs finiront par naviguer du coin de l'oeil, sans même plus avoir à lire les intitulés.
Le portail Skynet nous semble faire un bon usage de cette technique. Les pictogrammes utilisés sont très intuitifs et graphiquement cohérents. Ce qui est original et intéressant, c'est le fait que certains pictogrammes apparaissent de manière occasionnelle. Sur notre prise d'écran, apparaît ainsi une petite icône en forme de coeur, laquelle correspond à une rubrique "Saint Valentin". Un marketing saisonnier qui a la subtilité de s'intégrer dans l'interface elle-même.

ikea.be Un excellent rapport précision/compression
 

Le site web ikea.be

[Prise d'écran - 6 février 2005 -
www.ikea.be
]

Sur le site Ikea, les produits sont présentés de manière très claire, systématiquement sur fond blanc. Le fait de détourer les objets nous semble doublement intéressant. Non seulement l'espace attire l'oeil vers l'objet, mais cette technique permet également de produire des images très légères. Dans notre exemple, la photo de la chaise, bien que mesurant tout de même 250 x 250 pixels, pèse à peine 5 Ko. L'utilisateur a la possibilité de visualiser le produit dans tous les coloris disponibles. Il peut également agrandir l'image, sous la forme d'une fenêtre qui s'ouvre en avant-plan, contenant une photo de 500 x 500 pixels, cette fois, dont le poids reste sous la barre des 15 Ko. Comparez avec les 35 Ko que pèse la pauvre photo de 81 pixels sur 112, sur le site Aucarillon.be (voir ci-dessous), et vous comprendrez qu'Ikea fait du bon travail sur le plan des performances et de l'ergonomie. Sur la page générique des produits, les différentes catégories (chaises, tables, lits,...) sont présentées de manière totalement stylisées. Ce qui, à nouveau, permet un rapport impact/légèreté optimal.


4 exemples à ne pas suivre


gardenparty.be
Guirlandes et cotillons
 

Le site web GardenParty.be

[Prise d'écran - 7 février 2005 -
www.gardenparty.be]

Sur cette page du site Garden Party, on ne compte plus les couches. Le fond d'écran, trop présent, diminue la lisibilité des textes. Des objets s'animent aux quatre coins de la page. Le tout, programmé en Flash. "Cool !", diront certains qui découvrent les joies du logiciel ; "Naïf !" diront les professionnels. Car ce n'est jamais en multipliant les effets spéciaux qu'on augmente l'impact d'une communication.
Le logiciel Macromedia Flash est puissant pour qui l'utilise finement. Mettez-le dans les mains d'un novice et il vous produira guirlandes et cotillons, déforçant l'ergonomie et le message. Sur le plan graphique, tout l'intérêt du logiciel Flash réside dans l'exploitation du format vectoriel, lequel permet de produire des effets visuels de qualité moyennant des taux de compression imbattables. Malheureusement, le concepteur du site Garden Party a fait exactement l'inverse, intégrant des photos entières au format "bitmap" plutôt que vectoriel.

papierpresent.com
 
Graphisme lourd, divorcé du texte
 

Le site web de la société Papier Present

[Prise d'écran - 7 février 2005 -
http://www.papierpresent.com
]

Le site Papier Present est spécialisé dans la vente de sacs imprimés de luxe. Après une page d'entrée plutôt bien faite, vous tombez sur des pages produits qui ne manquent pas d'attrait, mais qui présentent un double désavantage. D'une part le design est très lourd : plus de 200 Ko pour certaines pages. Soit des temps de téléchargement rébarbatifs pour les visiteurs utilisant des connexions à débit moyen (environ un visiteur sur trois, en Belgique, et un visiteur sur deux, en France). D'autre part, la mise en page n'est pas parvenue à intégrer harmonieusement la partie graphique avec la partie textuelle. L'utilisateur se trouve face à deux blocs séparés : la partie supérieure de l'écran, très graphique à l'image d'une plaquette de présentation, et la partie inférieure, qui contient des informations textuelles, fournies à l'état brut. Un tel design ne favorise pas la lecture des informations textuelles, pourtant importantes, car elles concernent ici notamment les conditions de livraison ou la prise de contact commercial.

aaaadiamond.com
 
Où sont passées les images ?
 

Le site web de la société AAAA Diamond

[Prise d'écran - 7 février 2005 -
www.aaaadiamond.com]

Après une animation Flash d'entrée, aussi peu élégante qu'inutile, sur un fond de musique en boucle qui a le mérite de rapidement vous agacer, vous atterrissez sur la page d'accueil du site aaaadiamond.com, spécialisé dans la vente de diamants, bruts ou travaillés. Autant certains en font trop au niveau visuel (voir le site Garden Party, ci-dessus), autant ici, on a affaire à une présentation fort aride. Il n'y a pratiquement que le bandeau en haut de page qui contient des illustrations parlantes. Mais il est animé à un rythme très saccadé. Soit on l'ignore en l'assimilant à de la publicité, soit on tente d'y jeter un oeil mais sans pouvoir vraiment s'y reposer en raison de ce mouvement constant qui ne favorise pas la lisibilité. Par comparaison, le site diamond.com nous semble plus efficace, intégrant des images fixes attrayantes à une architecture de navigation consistante. Quel que soit votre domaine, sans tomber dans l'excès, il est toujours utile d'illustrer vos produits par des exemples visuels en page d'accueil, qui donnent d'emblée de la substance.

aucarillon.be Mauvaise optimisation et éclatement visuel
 

Le site web aucarillon.be

[Prise d'écran - 7 février 2005 -
www.aucarillon.be
]

Voici un site web aux nombreux signes d'amateurisme : une palette de couleurs non contrôlée, une mise en page éclatée, des visuels hétéroclites et mal optimisés. Dommage, car le copywriting est de qualité et le contenu ne manque pas, qui pourrait être richement exploité. Cliparts, photographies et logos se marient douloureusement et rendent la navigation confuse. La petite photographie présente sur notre prise d'écran pèse 35 Ko à elle seule. En réalité, elle a été grossièrement redimensionnée. Nul doute qu'on pourrait produire une photo de bien meilleure qualité tout en la rendant plus légère. Bien sûr, une certaine indulgence est indispensable en fonction du contexte. Mais où s'arrête la frontière entre l'amateurisme et le professionnalisme ? Ce site se veut-il réellement amateur ? Son manque de finesse ne risque-t-il pas de dépeindre sur l'appréciation du travail de bijoutier ?


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 !