Les espaces clés d'un écran
La réussite d'un site s'appuie en partie sur ce que l'utilisateur connait déjà, c'est-à-dire sur l'expérience qu'il aura eu sur d'autres sites.
Il n'existe pas d'organisation type de mise en page. Cependant, le schéma suivant est devenu une convention en terme de localisation des principaux éléments d'une page web. Par conséquent, il reflète les habitudes de lecture.
Le coin supérieur gauche : le logo
Ce coin est l'emplacement privilégié pour le logo / titre du site pour deux raisons :
- Notre sens de lecture va de gauche à droite et de haut en bas
- La fenêtre d'un navigateur se déploie à partir de ce coin supérieur gauche. Cette zone est donc constamment visible.
Cet espace contient souvent les informations capitales permettant d'identifier le sujet du site ; dans une grande majorité des cas, le logo est placé à cet endroit et sert d'accès permanent à la page d'accueil.
Il est conseillé d'y ajouter un lien plus explicite intitulé "accueil" près du logo ou d'inclure ce bouton directement dans la barre de navigation.
A proximité du logo : la baseline
Pour aider l'utilisateur à comprendre rapidement le thème du site, il est recommandé d'apposer quelques mots explicites directement sous le logo ou à sa droite.
A gauche et/ou en haut : la navigation
Après le coin supérieur gauche, ce sont les zones les plus lisibles.
Le visiteur doit identifier quelles sont les rubriques principales du site et comment est réparti son contenu.
En haut, on trouve très souvent le moteur de recherche et l'accès à mon panier / mon compte.
En haut à droite : les fonctionnalités principales
- Mon compte (pour les sites avec un espace personnalisé nécessitant de se connecter)
- Mon panier (pour les sites e-commerce)
- Choix de la langue
- Champ de recherche (pour les sites ayant beaucoup de contenus)
Au centre : le contenu
La partie centrale a également ses zones prioritaires. On placera l'information de premier niveau dans la partie haute, car elle sera lue en premier.
En bas : les informations ou rubriques de moindre importance
Il faut donc éviter de mettre de l'information capitale dans cette zone moins accessible.
On y trouve généralement la "navigation Outils" (contact, plan du site, mentions légales...)
En bas à droite : une zone à risque
C'est l'espace qui a le moins de chance d'être lu, en raison de la façon dont se déploie la fenêtre du navigateur, surtout pour les moniteurs réglés sur une faible résolution d'affichage.
Se différencier des conventions
Tout concepteur est libre de se démarquer de ces conventions d'organisation de l'espace. Attention cependant à ne pas entraver l'utilisabilité du site.
www.rowenta.fr
Du fait de son emplacement et de ses dimensions, la navigation Outils du site Rowenta devient plus importante que la navigation principale en pied de page.
Le logiciel Flash, en raison de ses possibilités d'interaction et d'animation, permet de casser ces règles avec adresse.
QuakeQuizSF (navigation en pied de page)
The Chronicles of Riddick (menu en bas à droite)
Etudes sur la pratique et la répartition des éléments clés d'une page
(effectuées entre 2002 et 2005)
www.webdesignpractices.com/index.html