Zoning : définir l’organisation d’une interface
Un des premiers éléments à définir dans une interface, c’est l’architecture de l’information ! Chaque élément, du menu aux boutons d’action en passant par le contenu doit être intégré de manière cohérente pour offrir une architecture de l’information claire pour votre utilisateur. D’ailleurs, l’organisation du contenu fait partie des critères ergonomiques de Bastien et Scapin :
- Guidage
1.2. Groupement / Distinction entre Items
1.2.1. Groupement / Distinction par la localisation
1.2.2. Groupement / Distinction par le format
Comment formaliser l’organisation des différentes zones de contenu ? C’est là que le zoning entre en jeu ! Penser correctement l’ergonomie commence par la réalisation de ce livrable… Alors sans plus attendre, passons en revue les 3 objectifs d’un zoning
Définition d’un zoning
Le zoning est une technique de maquettage qui consiste à produire un schéma très simplifié d’une page web ou d’un écran. Cette étape permet de définir l’organisation globale en organisant les grandes zones de contenu (navigation, header, zone de contenu principale, footer etc.).
Pour illustrer les différents objectifs du zoning, nous allons tout au long de l’article prendre l’exemple d’un site e-commerce . Pourquoi ? Ce type de site est très complet pour aborder cette thématique et il y a quelques années, j’ai eu l’occasion de travailler sur la refonte d’une page produit. À quoi sert plus concrètement un zoning, quels sont ses objectifs ?
Objectif n°1 : formaliser l’inventaire du contenu
Le zoning est généralement réalisé juste après la phase d’inventaire du contenu (content inventory). Il permet de formaliser les réflexions et de vérifier que l’ensemble du contenu / des fonctionnalités est bien présent. Son aspect schématique permet de se focaliser sur l’aspect organisationnel sans être distrait par les différents détails d’une interface. Son rôle est de définir la localisation des fonctionnalités et du contenu.
Lorsque j’ai travaillé sur la refonte d’une page produit, il n’y avait pas moins de 30 blocs à organiser ! J’ai d’abord démarré par un card sorting pour définir l’ensemble des contenus à intégrer puis formalisé le tout sous forme de zoning. Il a fait l’objet de plusieurs retours avec le responsable marketing et le traffic manager avant d’aller plus en détails dans les wireframes. Cette approche progressive nous permis de bien aligner les objectifs marketing et SEO tout en proposant une architecture de l’information cohérente.
Objectif n°2 : organiser les grandes zones de l’interface
Le zoning possède l’avantage de se concentrer sur la disposition globale des éléments avant d’ajouter plus de détails. Voyez une page web ou une application mobile comme un puzzle. Chaque élément doit trouver sa place et cette place doit être soigneusement choisie pour répondre aux besoins utilisateur et aux objectifs business. Nous verrons ces deux aspects dans un prochain article !
Qu’allez-vous déterminer dans un zoning ? Les emplacements où se situeront : la navigation principale, le contenu principal, les zones d’action et autres zones clés comme le cross-selling dans le cadre d’un site e-commerce. En structurant correctement l’information, on met en place les bases solides pour le déroulement d’une expérience utilisateur agréable.
Tip #1 : dans votre zoning, n’hésitez pas à distinguer graphiquement les blocs de contenu en fonction de leur niveau d’importance. La hiérarchie visuelle peut être apportée par différentes nuances de gris.
Objectif n°3 : assurer la cohérence des pages
Le zoning permet de définir les templates de chaque typologies de pages. Qu’est-ce qu’un template ? Dans l’approche ⚛️ atomic design, le template ou le layout, c’est un modèle de mise en page commun à plusieurs pages.
Réfléchir en mode template garantie la cohérence sur l’ensemble des pages et évite les redondances ou les incohérences. Les devs vous remercieront Si on reprend notre exemple, un site e-commerce est constitué de plusieurs types de page :
- la page d’accueil
- les pages catégories
- les pages produits
- les pages de résultat de recherche, etc.
Pour chacun de ces types de page, il est possible de définir un zoning qui aura son équivalent côté code.
Tip #2 : pensez en mode responsif, prévoyez la hiérarchie des blocs pour toutes les tailles d’écran (desktop, tablette, mobile, etc.).
À retenir
Le zoning est un excellent support de communication pour démarrer un projet car il permet :
- d’avoir une vision globale sur le contenu
- d’aligner les différentes parties prenantes
C’est une étape nécessaire lorsqu’il y a beaucoup de contenu à organiser. Pour des interfaces moins complexes, il peut simplement être esquissé sur papier pour gagner du temps. Tout dépend de la complexité du projet !
Une fois le zoning terminé, l’étape suivante est… le wireframe ! Ce livrable apporte un niveau de détail supplémentaire : le contenu textuel et les composants de chaque zone. On se retrouve pour la suite dans cet article Qu’est-ce qu’un wireframe ?