Consultant E-commerce & Webmarketing

Je suis abonné à la newsletter de la Fondation Nicolas Hulot (FNH), et je lis dans le dernier envoi qu'une nouvelle version du site est sortie. Depuis le temps que ce projet était dans les cartons à la FNH, je clique immédiatement sur le lien pour voir le résultat.

Et je découvre... un site horizontal ! Quelle évolution par rapport à l'ancien site ! L'approche est intéressante, et représente un bon sujet d'étude en matière d'ergonomie et de webdesign.

Qu'est-ce qu'un site horizontal ?

C'est simple : 99 % des sites ont une structure verticale, dont le contenu se lit de haut en bas.

Un site horizontal est donc, par opposition au site vertical, un site dont le contenu se lit de gauche à droite. Il faut donc scroller horizontalement pour prendre connaissance du contenu non visible dans la page.

Le site horizontal représente donc un véritable changement pour nos habitudes de navigation dans un site, avec ses avantages et ses inconvénients.

Quid du site de la Fondation Nicolas Hulot sur cet exercice d'horizontalité ?

En réalité, seule la page d'accueil du site a été travaillée sur le mode horizontal. Elle permet de poser un design général réussi, qui fait la part belle à la clarté et la lisibilité des informations. Le fond blanc fait ressortir les titres, les pavés de textes et les visuels.
L'horizontalité du site permet de mettre en valeur une belle frise graphique qui illustre bien l'environnement naturel sous ses différents aspects.

La prise en main du scrolling horizontal n'est pas évidente au premier abord, car ce n'est pas le fonctionnement des sites standards auquel nous sommes tous habitués depuis les débuts du web. De plus, en l'absence de signalétique évidente sur ce mode de fonctionnement inhabituel, nos yeux ne se portent pas sur la partie basse du navigateur qui affiche l'ascenseur horizontal.
Eventuellement, on pourrait vouloir essayer une manœuvre de scrolling vertical, mais comme rien ne se passe, le visiteur peut en déduire hâtivement que tout le contenu de la page d'accueil est déjà sous ses yeux.

Heureusement, une (petite) astuce met la puce à l'oreille : une longue phrase qui traverse le site de gauche à droite, oriente l'œil vers le bas du site et semble se couper subitement. Le visiteur comprend alors qu'il peut dérouler le site pour continuer à lire ce qui est en réalité un discours fleuve de Nicolas Hulot sur la nécessite de changement de nos comportements de consommation.

Cette looooongue phrase joue aussi le rôle de séparateur visuel entre les différents contenus de la page d'accueil, de manière originale.

Quant à essayer de la lire entièrement, il faut être très motivé ! Le choix de la typographie, avec des lettres tassées, de différentes tailles, mêlant majuscules et minuscules, n'est pas adapté pour la lecture sur écran. Il faut en plus tourner la tête dans tous les sens pour suivre le fil de l'histoire...

Les concepteurs du site ont dû se faire la même remarque, car ils ont eu l'excellente idée de mettre une fonction de lecture audio de la phrase, synchronisé avec un défilement automatique du site. Malheureusement, le discours prononcé par Nicolas Hulot lui même, est sur un ton tellement monotone, grave, voire presque effrayant, que c'en est insupportable, et je l'ai coupé au bout de 5 secondes. Quand on connaît les qualités d'orateur de l'homme, et la conviction qu'il met d'habitude dans ses discours, on se demande comment il a pu produire ça ?

Que retenir cette initiative de site horizontal ?

Il est toujours délicat de bousculer les habitudes en matière d'ergonomie et d'usabilité web. Le site de la Fondation Nicolas Hulot est une belle initiative en la matière, qui reste tout de même perfectible. D'autant plus que la page d'accueil d'un site ne doit négliger absolument aucun détail pour jouer son rôle de vitrine, d'aiguillage, vers les différents contenus du site. Une page d'accueil mal conçue = c'est tout le reste du site qui en souffre.

A partir du moment ou l'on touche aux habitudes des internautes, il faut être extrèmement vigilant sur la signalétique de l'interface, afin de les aider dans la prise en main du nouveau site. Il faut donc indiquer clairement la marche à suivre pour explorer le site :

1. En mettant des flèches cliquables indiquant le sens du scrolling, bien en évidence, comme par exemple sur http://deanoakley.com.

2. En positionnant la ligne de coupe, de manière nette sur des éléments graphiques ou une zone texte, pour attirer attirer l'œil et faire comprendre que la suite se passe à droite (ou à gauche). Comme par exemple sur http://www.bluevertigo.com.ar.

3. En faisant les 2 systèmes à la fois, comme sur http://www.publicidadeviva.com.