Zoning et wireframe

Après avoir réalisé le brief créatif, l’architecture de l’information de votre site (hiérarchisation du contenu en rubriques, arborescence de navigation …) l’étape suivante s’intéresse à la conception et l’organisation de vos pages.

Cette étape de conception des pages est réalisée à l’aide, dans un premier temps, de la technique de « zoning ». Puis les choses s’affineront avec l’établissement d’une représentation des pages plus aboutie : les wireframes.

Le zoning

Le zoning est une technique simple qui consiste a représenter une page de votre site à l’aide de boites qui symbolisent les grandes fonctionnalités et les zones principales de contenu. Cette étape est primordiale pour décider le l’organisation générale de vos pages. On ne résonne ici qu’en terme de zones (boites), le détail des éléments qui rempliront ces zones ne sera abordé qu’à l’étape des wireframes.

Chaque boite (carrés, rectangles …) représente une entité majeure de votre site qui doit trouver sa place sur l’écran en fonction deux critères principaux :

* Son importance hiérarchique.
* Son encombrement spatial.

L’encombrement spatial est matérialisé par la forme des boites, l’importance hiérarchique par une valeur de gris par exemple.

Bien sure vous devez, lors de cette étape, avoir déjà une idée approximative de la taille qu’occuperont vos éléments sur la page. Cela suppose que vous ayez débroussaillé le travail lors de l’étape de rassemblement de votre contenu et de l’architecture de l’information.

Exemple de zoning de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Cette étape tient généralement compte de la résolution cible de vos utilisateurs.

Il faut également tenir compte de la zone au dessus du « fold » (zone visible de l’écran sans avoir à scroller). Le fold représente une ligne virtuelle qui se situe en bas de votre écran et délimite la zone à partir de laquelle les informations sont accessibles uniquement par défilement. En effet, les éléments les plus importants devront se situer au dessus du fold où à cheval sur celui-ci pour suggérer leurs présences.

Il est important de comprendre (et de faire comprendre au client) que la réflexion se porte uniquement sur l’organisation générale des grandes zones d’influence du site et non sur le choix des couleurs où des icônes. Le client ne doit donc pas être frustré par le niveau d’abstraction élevé de représentation des pages de son site à cette étape.

Ce travail se concrétise par l’établissement d’un livrable qui servira de document de discussion avec le client pour correction puis validation.

Les wireframes

Une fois que l’organisation générale des pages a été validé à l’aide de la technique du zoning, nous pouvons commencer à affiner les choses en réalisant des wireframes.

Attention, le terme wireframe possède de nombreux synonymes que vous rencontrerez sûrement selon les personnes avec qui vous travaillerez :

* Maquette ergonomique
* Maquette fonctionnelle
* Prototype
* Storyboard
* Mockup
* Layout …

Les wireframes sont des maquettes dans lesquelles on détail le contenu des boites définies dans l’étape de zoning. Il s’agit de réfléchir non pas sur le graphisme mais sur les aspects fonctionnels et ergonomiques des éléments qui rempliront ces boites. C’est pourquoi il est conseillé de réaliser les wireframes en noire et blanc pour ne pas distraire le client des objectifs principaux de ce type de document. Vous pouvez tout de même représenter les liens hypertetxes en bleu. En aucun cas les aspects purement graphiques ne doivent être abordés lors de cette étape.

Le document qui va réunir l’ensemble des fonctionnalités d’un site sous forme de wireframes est appelé story-board.

Chacune des boites qui composent notre zoning contient par exemple du contenu texte, des éléments de navigation, des formulaires, des listes, des images … Ce sont ces éléments que vous devez maintenant décrire sur votre maquette. Vous devez connaître la taille précise en pixel de ces éléments, décrire visuellement et par écrit le fonctionnement et les différents états des éléments fonctionnels tel que les menus où les formulaires.

Une réflexion approfondie doit être entamée sur le vocabulaire des rubriques, des titres, des liens, des libellés de bouton, des champs de formulaire, des messages d’erreurs … Pour le corps du texte, si possible utilisez du vrai texte, celui qui sera utilisé pour le site, à défaut utilisez les « Lorem ipsum ».

Vous devez également être attentif à décrire l’apparence des objets dans leurs différents états :

Pour les éléments cliquables quel sera leur aspect à l’état nominal, survolé, activé.

Pour le workflow d’un panier d’achat quel sera l’apparence des différents boutons.

Toutes ces descriptions vont permettre de faciliter le travail des intégrateurs, des développeurs et des graphistes en levant les ambigüités.

Exemple de wireframes de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Comme pour le zoning, l’établissement des wireframes se concrétise par la réalisation de livrables qui seront communiqués au client afin de débattre, corriger puis valider la conception des pages du site avant de passer au design graphique.

Conclusion

L’erreur classique est de vouloir se précipiter sur l’aspect graphique des pages du site sans porter attention à l’ergonomie et à la conception de la mise en page. Cette erreur se paye généralement en retours successifs qui couterons chère en temps et en argent. Les étapes de zoning et wireframe sont donc indispensables dans le process logique de la construction d’un site internet et il faut y porter une attention particulière. Cela sera d’autant plus vrai que le projet sera important.

Travailler avec le client et l’équipe projet à partir de ce type de documents (zoning, wireframe) permet de se concentrer sur le fond (fonctionnalités, interactions, contenus) sans se laisser distraire par la forme (design).

Sources :

Ouvrage : Ergonomie web, pour des sites efficaces – Amélie Boucher – Ed. Eyrolles