L’Organisation d’une page web

organisation page web

Le découpage de la page web ou le « zoning web »

Après la mise en page de chaque contenu du site web, il convient maintenant de regrouper tous les éléments pour former un contenu cohérent, facile à lire et à comprendre par tous les internautes. L’organisation page web est une étape cruciale dans la conception de sites web même si certains ne lui accordent pas souvent beaucoup d’attention. Dans la pratique, une page web peut être découpée en plusieurs zones différentes selon leur ordre d’importance. Cette technique de découpage ou « zoning  » permet de séparer l’emplacement de tous les éléments d’une page web, à savoir les zones de navigation, le logo, la zone de recherche en interne ou moteur de recherche, les contenus, le pied de page, ou encore le fil d’Ariane.

Pour commencer, l’idéal est de réaliser un zoning général. Cela permet de faire apparaître toutes les zones de manière identique sur l’intégralité des pages du site. Le travail suivant consiste à réaliser le zoning des pages essentielles quasi identiques et procéder de la même manière avec les pages moins importantes. Une fois le zoning de toutes les pages effectué, il faut le tester avant de finaliser la première organisation page web. Cette vérification est importante, surtout s’il s’agit de réaliser un site web avec un menu contenant plusieurs onglets et sous-rubriques différentes. Pour ce faire, il suffit de positionner tous les éléments pour avoir une idée précise de leur véritable emplacement lors de la conception de la maquette du site.

La description des fonctionnalités ou le « storyboard »

Le zoning web n’est qu’une étape préliminaire indispensable dans l’organisation page web. Il consiste tout simplement à définir l’emplacement de chaque élément qui doit composer chaque page du site web. Pour insérer les contenus, il faut encore réaliser un « storyboard » en tenant compte des fonctionnalités et de l’ergonomie du site. À ce niveau, le graphiste et le directeur artistique sont tenus de mettre en place une hiérarchie visuelle grâce au « storyboard ». Il s’agit de décrire clairement et précisément le contenu de la page en indiquant l’emplacement de tous les éléments, leur comportement et leur taille. Le story-board permet par exemple de définir les états que doivent avoir les éléments du menu principal du site comme à l’état vierge si l’utilisateur n’a rien exécuté, un état cliqué, un état visité ou un état survolé.

D’une manière générale, la réalisation du storyboard permet d’attribuer des comportements aux différents éléments du site. Pour faciliter la lecture et la compréhension des utilisateurs par exemple, certains liens peuvent être spécifiés par des infos bulles mentionnant des textes précis lorsque ceux-ci sont survolés par le curseur. Il est également possible de différencier le niveau de la surface d’un logo lorsqu’on clique dessus. Pour un site marchand proposant la fonction « panier d’achat », l’organisation page web s’effectue de la même manière. Le storyboard peut décrire toutes les étapes réalisées par le visiteur lors du processus d’achat : de l’ajout au panier d’un article à l’ajout en cours jusqu’à la validation de l’achat.

Après la conception de tous les contenus nécessaires à son site web et la réalisation de son arborescence, le prochain travail du webmaster consiste à organiser les différents éléments, par ordre d’importance, pour faciliter la lecture et la navigation des utilisateurs. Les défauts d’organisation d’une page web peuvent dégrader l’expérience des utilisateurs et compromettre l’achat. MP6 vous aide à améliorer l’organisation de vos pages afin de rendre plus agréable la navigation de vos visiteurs et faciliter la mise au panier et l’achat.