Vous êtes sur Barbablog et tu kiffes jeune. Cherche sur ce blog...

95% du webdesign c’est de la typographie. Et le reste alors ?

Webdesign is 95% typography entend-on souvent. Mais les 5 autres %, c'est quoi ?

Mise à jour

Je viens de voir chez Lemeur un post sur l’article dont je parle ci-dessous. C’est juste que je l’aborde sous un angle… différent

Webdesign is 95% typography [1] entend-on souvent. Mais les 5 autres %, c’est quoi ? Les images.
Dans leur dernière étude eyetrack (qui date de 2005 quand même) Jakob Nielsen et Tara Pernice Coyne consacrent tout un chapitre à ce sujet. The online journalism review vient de publier un article qui reprend et approfondi quelques points clés de cette étude.

Certains sont archi connus :

  • un texte struturé à l’aide de titres et de puces se lit et se retient mieux qu’un pavé non structuré;
  • sur le web on scanne plus qu’on ne lit, il faut donc adapter son design à ce genre de comportement;
  • en terme de navigation la simplicité paie;

d’autres le sont un peu moins.

La partie la plus intéressante de l’article de The Online Journalism Review concerne les images. Pas les images de fond, les boutons ou tout autre élément de présentation qu’on range habituellement dans les css… Les images au sens propre, celles qui illustrent un texte. Petite précision, ce cas d’étude est tiré de l’étude d’un site de news.Quelle image pour illustrer un texte?

Image et contenu

D’après les résultats de l’étude eyetrack de Jakob Nielsen et Tara Pernice Coyne, les utilisateurs ne s’attardent pas sur les images qui n’ont pas de rapport avec le contenu. Vous aurez beau faire le plus beau bandeau du monde et le mettre bien en vue en haut de votre page, si il n’y a pas de rapport avec le texte en dessous, les utilisateurs ne le verront même pas. The OJR préconise de remplacer ces images inutiles par des images en rapport avec le contenu, voire par un espace vide (et l’espace vide, c’est vraiment un élément de design).

Quelle image pour illustrer un texte ?

Lorsque votre image est un élément d’illustration du contenu, celles qui retiennent le plus l’attention sont celles qui mettent en scène des personnes, qui sourient face caméra – si possible. Des personnes ça veut dire des vrais gens (en plus les vrais gens c’est à la mode en ce moment – surtout dans les émissions politiques), pas des mannequins car les images de ces objets sexuels créatures de rêve représentants d’une profession fort honorable sont assimilées à de la pub et souvent zappées par l’utilisateur.

En résumé, l’image idéale, c’est :

  • dans le cadre d’une interview
  • la photo du bonhomme
  • qui sourit face à l’appareil
  • et qui ne soit pas un habitué des pubs pour shampoings
  1. A supposer que l’on soit d’accord avec cette conception du webdesign qui compare le travail des webdesigners d’aujourd’hui à celui des typographes des années 70, alors qu’il y aurait tant à en dire.


Reagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. En matière d’eyetrack, n’oublions pas cette étude intéressante :
    http://www.fluctuat.net/blog/4944-Les-hommes-sous-la-ceinture
    😉

  2. 95% pour la typo, 4% pour les blancs tournants, reste 1% à partager entre le graphiste webdesigner et le neveu du client qui a déjà travaillé (un peu) sur le logo :p

  3. Les images, ça claque - Barbablog - Webdesign et digressions

    […] design, c’est 95% de typo, mais parfois, des images bien placées, ça claque […]

  4. Higherweb ::: Le Blog » Blog Archive » Le webdesign, c’est 95% de typographie ? oui… et non !

    […] France, sur le site Barbablog, l’auteur est moins convaincu (un peu comme moi). Il revient (en lien avec un article de The […]

  5. eric delcroix

    95% du webdesign c’est de la typographie. Et le reste alors ?: Tags: rédaction contenu Posted by: erdelcroix http://bit.ly/8KDZx

  6. La typographie inclut aussi la macro-typographie, donc les marges, l’emplacement des illustrations, filets, cadres, les blancs tournants, bref la mise en page. Anne-Sophie Fradier en parle très bien : http://www.paris-web.fr/2010/programme/macrotypographie-page-web.php
    Ça nécessite bien d’y consacrer l’essentiel du webdesign, non ?

Haut de la liste
Votre commentaire