Rôle de l'image

La nature et l’organisation des éléments graphiques contenus dans une page web conditionnent le parcours visuel des utilisateurs.

Les images sont peu ou pas consultées pour elles-mêmes :

  • elles ont un effet directeur
  • elles structurent la lecture des informations textuelles qui leurs sont liées

Une image peut servir :

  • À naviguer (image/map: organigrammes gérés par le BIC, cartes interactives)
  • A informer (infographies, photos de catalogues, organigrammes interactifs mais aussi photos support du texte)
  • A structurer (zones d’information, respiration)
  • A capter (points d’entrée de la page)

Intégrer au moins une image par page

  • Pour reposer l'oeil du surfeur perdu dans le texte et capter son intérêt
  • Pour structurer la page :
    Par la simple présence d’images, une page sera perçue comme divisée en plusieurs blocs visuels ce qui déterminera le parcours de l’utilisateur

Avoir le visiteur à l’œil !

Une page web est parcourue en 50 millisecondes par l’œil
Ce premier contact détermine l'intérêt de l'internaute pour le site

Il est important de veiller à l'équilibre de la page:

  • Balance entre les pleins et les vides: éviter les surcharges d’infos et d’éléments
  • Répartition des données: favoriser des zones claires d’information
  • Adéquation texte/image: être strict sur la pertinence des images

Il est important de veiller à la qualité des images:

  • Contrastes convenables des photos: vérifier les niveaux de luminosité 
  • Grain et précision: éviter les flous
  • Equilibre du nombre d'images: éviter d'alourdir la page
    Le temps de chargement d'une page dépent de la quantité et du "poids" des photos.
     
  • Optimisation pour le web: respecter les règles

L’utilisation des éléments de contenu Texte/Image dans Typo3 permet toutes sortes de permutations : il est toujours temps de changer les dispositions.
La simplicité et la clarté de la présentation assurera l’efficacité de la page.

 

Vérifier la page!

Faire le test d’eye-tracking pour vos pages !

L'oculométrie ou eye-tracking permet de suivre le parcours de l'oeil sur une page web et d'en donner une "carte"

En savoir+

Jared M. Spool et Matthew Klee: User Interface Engineering