|
Le
design graphique, source d'ergonomie
:
Ce
point est essentiel : un bon design graphique doit
permettre de repérer facilement les choix de
navigation offerts à l'internaute, et de
distinguer clairement les zones
dédiées au contenu des zones
"fonctionnelles" :
- navigation
« contextuelle » (c'est à dire
en rapport avec le contenu, par exemple les
« liens associés »)
- navigation
structurelle (les liens qui seront invariants
tout au long du site, qui servent de
repère permanent à
l'internaute)
- moteur
de recherche
- fonctions
supplémentaires liées à une
page (ex : le panier d'achat, l'envoi de la page
à une relation, etc... )
Trop
de sites rendent difficile cette distinction par
des mauvais choix de polices, de contraste entre
fond et texte, par un mauvais design des boutons,
etc...
De
plus, certains sites, en voulant « en mettre
trop » sur chaque page, rendent la navigation
peu compréhensible et réduisent
considérablement l'espace-écran
dédié au contenu. Mettre en valeur le
contenu et simplifier la navigation suppose, au
contraire, de s'en tenir à un nombre
raisonnable de zones fonctionnelles. Les pages ou
les choix de navigation sont les plus nombreux
doivent être dédiées à
cela (ex : yahoo
et de nombreux portails) et dans ce cas, les choix
de navigation deviennent le contenu du site : la
navigation devient alors très "contextuelle"
et donc efficace. (cf veblog, comment
naviguent les
internautes)
Quand
le design graphique donne plus de force aux
contenus
Ce
point est crucial sur la plupart des sites de
commerce électronique : pour vendre un
produit, la description n'est pas suffisante, il
faut souvent le montrer. Force est de constater que
les photos censées faire vendre les produits
sont parfois médiocres. Une bonne photo doit
non seulement être agréable à
regarder, mais doit donner une bonne idée de
la taille et de l'aspect matériel du produit
(toucher, « grain ») lorsque ce produit
n'est pas complètement standardisé
comme une boite de conserve. Ci dessous, un
excellent exemple, dans lequel les matériaux
sont bien rendus, et les éléments
"connus" comme le clavier et la souris donnent une
idée de la taille de l'élément
principal, le "cube". (pris sur apple.com)
comme
toujours sur le site d'apple, la photo est
excellente
L'illustration
peut souvent être un excellent
complément de l'information textuelle : une
bonne image vaut mieux qu'un long discours. Un
exemple souvent donné (cité par
Edward
Tufte,
grand maître de la communication visuelle)
est ce dessin de Charles Minard retraçant la
progression de la grande armée lors de la
campagne de Russie en 1812 :
Ce
graphique communique un nombre impressionnant
d'informations de façon parfaitement
intelligible et compréhensible en un coup
d'œil. Essayez d'imaginer la même image
sous forme de texte : La longue litanie des pertes
de la grande armée au fur et à mesure
des batailles serait sans doute fastidieuse et pas
réellement mémorisable. De même
les indications géographiques sur son
parcours seraient sans doute inintelligibles.
Lorsque
une photo, un schéma, un dessin, ou trois
scènes de bande dessinée illustrent
en un coup d'oeil des concepts difficiles à
décrire en mode textuel, alors le
procédé vaut d'être
employé.
Le
coté obscur du design graphique : source de
perturbation
Mal
utilisé, le design graphique d'un site peut
annihiler les bons côtés vus
précédemment en
détériorant l'expérience
utilisateur :
- détérioration
du confort d'utilisation : La plupart des
internautes accèdent à internet
par modem, et il en sera ainsi pendant encore
quatre ans (40 à 60% des internautes
utiliseront encore une liaison
téléphonique pour accéder
au net en 2004, d'après plusieurs
instituts de prévision). Utiliser trop
d'images mal compressées ralentit le
chargement des pages et conduit à
accroître le taux d'abandon des pages en
cours de chargement. Les internautes sont
impatients et tendent à l'être de
plus en plus : les sites trop longs à
charger sont condamnés une certaine
marginalité, sauf si leur contenu est
particulièrement exclusif et
indispensable (ce qui est rare...).
Cela
signifie-t-il que dans quelques années, l'on
pourra « se lâcher » et enluminer
toutes les pages web pour en faire des œuvres
d'art, lorsque la capacité du réseau
rendra ces questions de poids des images secondaire
? Hélas pour les esthètes, il n'en
est rien. La surcharge graphique amène
d'autres perturbations :
- perturbation
par la fatigue : des choix de couleurs trop
vives, des contrastes trop brutaux
(caractères verts sur fond rouge) ou au
contraire trop mous (caractères marron
clairs sur fond blanc « cassé
»), ou encore trop d'animations sur les
pages vont engendrer une fatigue visuelle rapide
de l'internaute, qui ne sera pas ainsi
incité à approfondir sa navigation
sur le site. De plus, trop de richesse
colorimétrique finit par contrarier la
lecture des pages.
- la
multiplication excessive des signaux ("bruit de
fond visuel") : Trop d'images,
spécialement trop d'images
animées, non directement reliées
au contenu, réduisent les facultés
de bien percevoir les informations utiles.
Des
études dans lesquelles des caméras
suivaient le mouvement des
yeux
de l'internaute ont montré que celui ci
recherche prioritairement le texte qui
l'intéresse lorsqu'il arrive sur une
page. Aussi si ces renseignements textuels sont
noyés au milieu d'autres signaux visuels,
l'internaute risque-t-il de ne pas les voir par
effet de saturation.
Toutefois,
Il convient de préciser que l'internaute
développe assez vite des réflexes de
défense contre ces perturbations visuelles :
la même étude a montré que
celui ci ignore spontanément tout ce qui
s'apparente à une bannière de
publicité (même si ce n'en est pas...)
dans les pages qu'il visite. Malgré tout, la
présence d'images animées trop
étroitement imbriquées dans le
contenu constitue une réelle barrière
à la visibilité des informations.
Les
images hors contenus doivent donc être
limitées au maximum : l'identification,
le look professionnel des pages et la clarification
entre zones décrites
précédemment doivent s'opérer
avec un minimum de recours au graphisme. La
sobriété est un facteur souvent
déterminant de l'utilisabilité d'un
site, et donc de la qualité de
l'expérience vécue par
l'utilisateur.
- les
images non compréhensibles ou induisant
en erreur: une des principales erreurs que
commettent certains concepteurs de sites web est
de s'en remettre à des icônes pour
suggérer une navigation vers certaines
parties du site. En effet, la signification des
icônes laisse une large place aux
interprétations individuelles, et par
conséquent, il y a un risque important
que de nombreux utilisateurs n'associent pas
à une image ce que son utilisateur avait
prévu pour elle. Cela est
particulièrement vrai lorsqu'un site
essaie de remplacer des « standards de
faits » de l'interface utilisateur (comme
les ascenseurs dans les barres de
défilement) par ses propres
éléments d'interface graphique
(fréquent sur les sites en flash) : le
fonctionnement du site devient alors difficile
à comprendre pour l'internaute, ou pire,
induit des erreurs d'interprétation :
rien n'est pire, pour un internaute, de croire
que son clic va provoquer une action, et qu'une
autre se produise. De même, un visiteur
n'aime pas cliquer sur un lien et se retrouver
sur une page différente de celle qu'il
attendait : une étude de J.Spool a
montré que de tels sites accroissaient
chez les utilisateurs la sensation de perte de
temps.
D'une
façon générale, il semble que
tant en terme de facilité de perception,
qu'en terme d'efficacité, la
hiérarchie des meilleures façons de
créer des liens soit la suivante
:
- liens
textuels bleus soulignés (parfaitement
standard - l'efficacité dépend de
la qualité du texte)
- liens
textuels soulignés d'une couleur
différente du texte, non
bleus
- boutons
textuels ou liens textuels bleus non
soulignés
- liens
textuels soulignés de même couleur
que le texte (assez perturbants)
- liens
textuels non bleus non soulignés
(à éviter)
- liens
en icônes fixes avec un rappel textuel
(classement variable selon la qualité du
texte)
- liens
en icônes fixes sans texte (à
éviter absolument )
- liens
par gifs animés (à
proscrire)
Conclusion
: comment inclure des éléments de
design visuel dans votre site.
Comme
pour chaque élément de votre projet
web, vous devez faire preuve de rigueur quant
à l'intégration des
éléments de charte graphique dans
votre site web. Pour chacun d'entre eux, vous
devrez vous poser les questions suivante
:
Ce
choix graphique contribue-t-il fortement à
:
- identifier
l'émetteur du site ?
- donner
une apparence professionnelle au site
?
- clarifier
les différentes zones de contenu et
fonctionnelles des pages du site ?
- donner
une place suffisante au contenu ?
- illustrer
intelligemment le contenu ?
Pour
chaque élément, vous devrez aussi
vous demander s'il n'est pas source de perturbation
:
- par
le temps de chargement qu'il nécessite,
- par
la fatigue visuelle engendrée,
- par
la multiplication des signaux,
et
vous devrez déterminer si sa signification
est compréhensible de façon identique
par toute personne, et n'induira pas l'internaute
en erreur.
Vous
devrez à chaque fois retenir des
solutions qui maximisent les avantages et diminuent
les inconvénients. Si un
élément graphique ne reçoit
aucune réponse franchement positive aux cinq
premières questions, alors considérez
le comme une perturbation et bannissez le de votre
design. D'expérience, ce sont les partis
pris les plus sobres et simples (sans être
simplistes) qui donnent les meilleurs
résultats. Voici deux exemples à mon
avis réussis : grenouille.com,
service-public.fr
Et
n'oubliez pas qu'une fois ces choix faits, seul
un véritable test utilisateur
(cf.veblog, pourquoi
et comment tester votre
site)
vous permettra de savoir s'ils ont
été pertinents. Une conception
excellente sur le papier peut se
révéler mauvaise vue de
l'utilisateur, même si vous croyez avoir mis
tous les atouts méthodologiques de votre
côté. Trouver le bon compromis entre
apparence visuelle et efficacité du design
peut être une démarche
nécessitant plusieurs tâtonnements
avant de parvenir à l'équilibre
idéal.
|
