|
Pourquoi utiliser des images sur un site Web ?
Voyons d'abord les mauvaises
raisons : pour rendre la présentation du site
plus attrayante, pour donner un aspect plus "professionnel",
voire pour que le site soit plus "fun" !
Contrairement à ce
que mes écrits peuvent laisser paraître, je
ne suis pas un triste sire ou un odieux réactionnaire
qui traque et bannit avec véhémence toutes
traces de frivolité sur les sites professionnels.
Mais, bon, il faut savoir ce que l'on veut et la présente
rubrique a pour vocation d'expliquer les différentes
façons de rendre son site plus efficace...
Ceci étant dit, quelles sont les bonnes raisons
d'avoir recours aux images sur un site ?
Principalement pour présenter
du contenu (photo d'un produit par exemple) mais aussi
pour aider à la navigation. La première
raison se passe de commentaire tellement elle est évidente.
S'il est vrai "qu'une image vaut mille mots", alors les
utilisateurs seront prêts à patienter afin
de charger une photo présentant le produit ou l'élément
recherché.
Pour ce qui est de la navigation, cela pose à nouveau
la question initiale "les images sont-elles des liens
efficaces ?".
Une fois encore, penchons-nous
sur les résultats des nombreux tests pratiqués
par Jared Spool et menés avec de véritables
utilisateurs. Les enseignements de ces tests sont utiles
pour comprendre dans quel cas utiliser des images comme
liens et comment...
Souvent, les images sont utilisées pour constituer
les barres de menus/navigation que l'on trouve habituellement
en haut ou sur le côté des pages d'un site.
Cependant, les images sont aussi mises à contribution
comme liens de contenu en prenant la forme de "boutons".
Afin de décider si
ces utilisations des images sont appropriées au Web,
gardons en mémoire, les
inconvénients identifiés par Spool sur les
images-liens :
- les images sont longues
et donc coûteuses à réaliser ; en
conséquence, les erreurs de design sont plus rarement
corrigées
- les liens qui "parlent"
aux utilisateurs sont ceux qui contiennent une description
du contenu visé, le graphisme permet de communiquer
cette relation mais demande plus de compétence
que la rédaction d'une phrase explicite.
- Il est toujours difficile
de dire a priori combien de liens contient une image ou
même si elle contient un lien... Pour s'en assurer,
il faut "survoler" l'image avec le pointeur alors que
ce dernier est également utilisé pour activer
l'ascenseur vertical afin de parcourir la page (les deux
usages sont alors en compétition...).
- les images-liens ne changent
pas d'aspect quand les liens qu'elles désignent
ont été visités (au contraire des
liens HTML qui donnent un feed-back visuel sur le parcours
déjà effectué sur le site...). Cette
absence peut conduire l'utilisateur à explorer
plusieurs fois la même page par erreur (source de
frustration puis d'exaspération) !
- le chargement des images
est parfois aléatoire (en dehors du temps nécessaire)...
Cette incertitude peut conduire à une grande confusion
si le designer n'a pas pris soin de documenter les textes
alternatifs (les fameux "tag alt" et notre expérience
nous démontre chaque jour que c'est trop rarement
le cas !).
- En plus de tous ces problèmes,
il faut encore rajouter la délicate question des
animations (les images gif animés et les "roll
over"). Délicate car opposant radicalement deux
populations : les designers d'une part, les utilisateurs
d'autre part.
Commençons par les
designers. Ceux-là adorent les animations et, frustrés
de ne pouvoir y avoir recours par des moyens techniques
raffinés (Java a fait long feu, Flash n'est pas encore
tout à fait assez répandu), ils se rabattent
massivement sur le gif animé qui présente
l'immense intérêt d'être tout à
fait standard.
Les images animées
au format gif sont principalement utilisées dans
les bandeaux publicitaires mais pas seulement. On en trouve
aussi dans les pages pour mettre l'accent sur tel ou tel
contenu. Les "roll over" sont d'une autre nature : il s'agit
de substituer une image par une autre grâce à
quelques lignes de JavaScript lorsque le pointeur est au-dessus
de l'image par défaut. Cette astuce est très
utilisée (par les designers branchés et fiers
de l'être !) pour produire un effet visuel dynamique
dans les barres de menus/navigation.
Parlons maintenant des
utilisateurs. Ces derniers détestent les animations,
quelles que soient leurs formes ou leurs natures !
Cette constatation formelle (désolante pour la
communauté des designers aimant la frime...) revient
sans cesse dans les travaux de Jared Spool aux USA ou de
Frédéric Gaillard, plus près de nous
en France (voir son site www.axance.com
). Les utilisateurs
sont tellement perturbés par les animations que Spool
en a même vu qui utilisaient des feuilles de papier
pour les masquer !
Moi-même, sur le site de CNET, j'utilise systématiquement
l'ascenseur dès que j'arrive sur une nouvelle page,
ceci afin de masquer le bandeau de pub supérieur
et ainsi pouvoir lire tranquillement...
Tout cela pour dire que le
recours aux images pour les liens doit être soigneusement
pesé et qu'il faut se garder de vouloir trop en faire
(comme d'habitude sur le Web). Il y a quand même quelques
domaines où les images sont bien plus efficaces que
les liens textuels pour orienter l'utilisateur dans votre
site, en particulier quand votre contenu est classé
selon un critère géographique. Dans ce dernier
cas, l'utilisation d'une carte (avec autant de zones sensibles
qu'il y a de régions) sera tout à fait adaptée.
En conclusion, la
règle devrait être de se poser la question
suivante : si je ne peux expliquer ou justifier la présence
de telle image, devrait-elle rester sur le site ? Et la
réponse est presque toujours "non".
|