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 |
|
[Prise d'écran - 5 février 2005 - |
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. |
| lalibre.be |
Des images à valeur
informative |
|
[Prise d'écran - 6 février 2005 - |
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. |
| skynet.be |
Les pictogrammes au service de la navigation |
|
[Prise d'écran - 5 février 2005 - |
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. |
| ikea.be | Un excellent rapport précision/compression |
|
[Prise d'écran - 6 février 2005 - |
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 |
|
[Prise d'écran - 7 février 2005 - |
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. |
| papierpresent.com |
Graphisme
lourd, divorcé du texte |
|
[Prise d'écran - 7 février 2005 - |
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 ? |
|
[Prise d'écran - 7 février 2005 - |
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 |
|
[Prise d'écran - 7 février 2005 - |
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 !







