Aviez-vous déjà remarqué que les sites corporate des grands groupes US se ressemblent tous ? Nous savions déjà que le public américain est très friand de mises en page sobres (fond blanc, grille de lecture symétrique, typo unifiée…) mais de là à adopter une structure quasi identique… Jugez plutôt :
Dans cette série nous retrouvons ainsi une structure à 5 niveaux qui facilite grandement le décryptage de la page et permet de bien exploiter la largeur de la page pour laisser un maximum de place à l’image centrale.
Nous avons donc une structure qui ressemble à ça :
La structure générique des sites corporate US
Cette uniformité est-elle due à un processus Darwinien ? Possible car je ne peux que reconnaitre l’efficacité de cette structure qui privilégie l’émotion (très large bandeau identitaire) tout en proposant un contrat de lecture limpide.
Est-ce cela que nous pouvons appeler une convention ? Peut-être : cette structure conviendra au plus grand nombre sans toutefois être une figure de style imposée.
Avec les années la taille des écrans augmente, mais pas nécessairement celle de la surface d’affichage utile. Comprenez par là que si les résolutions d’écrans supérieures à 1024 px sont majoritaires (plus de 55% d’après le W3 Counter), les utilisateurs n’exploitent pas forcément la totalité de l’espace disponible. Résultat : la norme est indiscutablement de faire des mises en page de 1024 px de large (en fait 1005 px quand on tient compte de la barre de défilement verticale).
Problème : Comment faire pour afficher un maximum de choses dans la limite de visibilité (sans scroll de la page) ?
Dans ce très bon article, l’auteur nous livre ainsi différentes techniques pour virtuellement gagner de la place en jouant notamment sur les couches (layers en anglais) et sur une interface plus dynamique (entre autre) :
Le roll-over qui affiche un panneau de contenu (ex. : Miro)
Un exemple de panneau affiché en roll-over
La mise en page progressive qui fait apparaître le contenu au fur et à mesure des clics (ex. : Sursly)
Un exemple de mise en page progressive
Les grilles de lecture marquée qui autorisent une très grande densité d’information sur une seule page tout en assurant une bonne lisibilité (ex. : Neutron Creations)
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 :
Le sub-header du NY Times
Pour Twitter cette zone peut servir à faire de l’animation saisonnière :
Le sub-header de Twitter
Ce bandeau peut également être exploité pour diffuser des liens sponsorisés comme sur le blog du Capitaine Commerce :
Le sub-header du Capitaine Commerce
Les groupes peuvent également s’en servir pour faciliter le basculement d’une marque à une autre comme chez Land’s End :
Le sub-header de Land
Les plus audacieux enfin s’en servent même pour faire panier commun comme GAP :
Le sub-header de 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.
A la question quelle est la largeur d’écran idéale ? (800 ou 1024 pixels) la réponse de Jared Spool est sans ambiguïté : Il est bien plus important d’avoir du contenu pertinent. On n’a jamais vu une société faire faillite parce qu’elle avait une mauvaise largeur d’écran sur son site web, par contre l’inverse n’est pas vrai. Le plus pertinent est dans un premier temps de se concentrer sur le contenu et dans un deuxième temps de passer du temps avec les utilisateurs finaux pour savoir quelle largeur d’écran leur correspond le mieux.
