Du bon usage du haut de page

Le haut de page est par définition la partie la plus visible d’une page web. Normal puisque vous n’avez pas d’autre choix que de consulter une page en commençant par le haut. Il est donc normal de soigner cette partie de l’écran.

Avoir un header efficace est un art bien maîtrisé par un grand nombre de sites web, mais quand est-il du sub-header ? Mais si enfin, ce bandeau horizontal qui vient se glisser au-dessus du header. Nous parlons bien d’un bandeau de quelques pixels de haut (entre 15 et 20) mais qui peut se révéler particulièrement efficace.

Illustration avec le New York Times qui s’en sert pour faire la promotion des nouvelles fonctionnalités :

sub-header_nyt

Pour Twitter cette zone peut servir à faire de l’animation saisonnière :

sub-header_twitter

Ce bandeau peut également être exploité pour diffuser des liens sponsorisés comme sur le blog du Capitaine Commerce :

sub-header_cc

Les groupes peuvent également s’en servir pour faciliter le basculement d’une marque à une autre comme chez Land’s End :

sub-header_le

Les plus audacieux enfin s’en servent même pour faire panier commun comme GAP :

sub-header_gap

Avec ces différents exemples vous avez donc une panoplie assez large des possibilités offertes par le haut de page. J’espère surtout que ces exemples vous aurons convaincus du potentiel de cette zone de l’écran.

(via Blink)

2 commentaires sur “Du bon usage du haut de page

  1. Que penses tu du « banner blindness » (les internautes aurait appris à ignorer le haut d’une page internet qui contient trop souvent de la pub) ?

    Doit on éviter de mettre des informations importantes dans ce bandeau ?

    Je n’ai jamais fait de user tests sur un site web je ne peux donc pas confirmer le phénomène.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s