Comment utiliser vos images et photos sur le web ?

Utiliser vos images et photos sur le web !Une image vaut 1000 mots ! Les images sont essentielles aux page Web et il est très facile d’intégrer une image, d’ailleurs, la plupart des sites web en sont remplis. Il y a quelques très bons exemples sur la façon de traiter les images d’un site web via différents critères, mais la plupart des sites ne sont pas des bons exemples. Et même si ce n’est pas pénalisant pour le fonctionnement du site, un mauvais traitement des images peut décourager les lecteurs, diminuer vos chances de vendre…

Jakob Nielsen, expert en ergonomie Web, a mené une étude de Eye Tracking et a conclu avec un article publié sur leur site, intitulé « photos de contenu Web ». Les résultats d’étude ont surpris l’industrie du design et ont répondu aux questions des experts qui n’étaient pas en mesure de répondre avant la réalisation de cette étude.

Le traitement des images

En général, les visiteurs apprécient les photos sur le web, lorsque celles ci sont pertinentes. A choisir, ils préféreraient une page Web qui ne possède pas d’images ou photos, plutôt qu’une page Web pleine de photos qui pénalise la lecture et ralentie l’ouverture des pages . Voici, comment utiliser des images, en suivant les règles fondamentales du web :

  • Les éléments de base d’une image  – la taille, la composition, la qualité, l’exposition sont 4 critères importants à optimiser pour une bonne image. Les gens cherchent des images de qualité, alors qu’il suffit parfois de régler le contraste pour faire la différence.
  • Efficacité – cela dépend de 3 critères :
    • Attrait émotionnel – est-ce que le produit a l’air bien dans l’image et donne envie d’acheter ?
    • Attrait rationnelle – est-ce que l’image montre les avantages du produit ?
    • Attrait de la marque – est-ce que l’image présente bien votre marque ?
  • Message transmis– est-ce que l’image envoie le bon message aux visiteurs ?
  • Prévoir la réponse des visiteurs  – l’image doit aider la prise de décision et donner envie du produit.

Plusieurs études d’eye-tracking démontrent qu’il est important d’avoir des images très détaillées des produits, meilleurs seront les résultats. Car les images juste décorées ont tendance à être ignorées par notre cerveau.

Vous présentez une entreprise, présenter le personnel en photos. Les internautes veulent connaître l’entreprise, investissez dans un bon photographe et essayez de rester loin de photos stock. Il serait un peu coûteux, mais il va ajouter beaucoup de valeur à votre site Web.

Qualité et pertinence des images et photos dans Eye Tracking

Voici les résultats de différentes études, dans cette photo il y a plusieurs zones rouges. Les zones rouges indiquent les endroits fixés par les yeux des visiteurs, tandis que les zones bleues indiquent les zones ignorés par les yeux des visiteurs

Outre le fait qu’il s’agit d’une conception obsolète, vous pouvez voir clairement qu’aucune des zones rouges sont sur les images.

C’est parce que toutes les images intégrées dans leur page web sont purement remplissages. S’ils avaient utilisé des photos pertinentes, les zones rouges auraient été fixé sur les photos.

La section du restaurant de New York Magazine (voir en bas à droit) a également fait partie de l’étude d’eye-tracking, des chefs mondialement connus sont en vedette dans les photos,

Dans cet exemple la photo est pertinente, mais prendre en compte la qualité de la photo ; un contraste faible et des images trop petites sont simplement ignorés.

La qualité des photos est aussi importante que la convenance de la photo utilisée. Il doit y avoir un équilibre, où la qualité et la pertinence sont les 2 facteurs essentiels !

Bien choisir vos images et photos pour orienter l’œil du lecteur !

Les mêmes études d’eye-tracking montrent que notre lecture (concentration) peut facilement être influencé et modifié par les images. James Breeze  a montré comment les images peuvent être pertinentes pour l’écoulement d’un site web.

Il a fait une étude d’eye-tracking sur 106 personnes en utilisant un site de fabricant de couches pour bébé. Comme vous pouvez voir sur les 2 images ci-dessous, quand le bébé fait face aux visiteurs, la plupart des internautes ont tendance à regarder son visage.

Toutefois, lorsque la même annonce, avec le même texte, le même bébé, mais une position différente est présenté à 106 personnes, les résultats sont nettement mieux.

Non seulement les gens se concentrent principalement sur le texte, mais une plus grande attention à la marque et même pour les petits textes dessous.

Donnez du sens pratique et informatif à l’image et aux photos

Les images aident les visiteurs et donnent beaucoup d’informations sur le produit en quelques secondes – mieux que des mots pourraient décrire. Un exemple très connu est montré ci-dessous, comment Apple fait de la publicité pour leur produit MacBook Air. Nous savons tous qu’il est petit, léger et beau. Mais si vous ne le connaissiez pas, vous aurez une idée en 1 milliseconde en regardant la publicité minimaliste ci-dessous.

image descriptive

Optimisation des images et photos en volume octet

Selon les données de Interesting stats, 61,9% d’une page web est constitué d’images, le volume moyen d’une page Web étant 1.29MB. D’après les spécialistes des images trop lourdes prennent beaucoup trop de temps à s’afficher. Selon Jakob Nielsen, l’affichage d’une seconde est la limite à respecter pour les visiteurs qui naviguent ils aiment se sentir libre dans une espace de commande sans être obligé d’ attendre.

statistiques images

Conclusion

Bonne utilisation d’images est cruciale pour un site Web réussi, surtout quand votre objectif est la présentation et la vente. Comme vous avez vu dans les exemples ci-dessus, les mauvaises images sont souvent ignorées par les visiteurs. Toutefois, si vous parvenez à réaliser les bonnes photos et les optimiser pour le web, les intégrer dans les emplacement stratégiques, cela devrait faire la différence pour votre site web !


Source:  « How to Use Images Successfully – Web Design Usability Guide » par Christian Vasile

Nos articles complémentaires:

« Comment réaliser le plan de votre site web»

« Comment fusionner texte et design d’une page web !»

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

douze + deux =