Zoning web

Définir les principes ergonomiques à l'aide du zoning

Le zoning web préfigure les grands espaces fonctionnels de votre site web. Il s'agit d'un travail de conception d'interface utilisateur antérieur à tous les travaux de conception - production de votre dispositif digital.

Qu'est-ce qu'un zoning ?
A quel moment faut-il concevoir un zoning ? Combien de zonings doivent être réalisés ? Comment faire pour réaliser un zoning d'interface utilisateur ?
Nous allons apporter des réponses à toutes ces questions qui concernent le fonctionnement de l'interface utilisateur. Dans cet article, vous pourrez visualiser des exemples de zoning et découvrir toutes les méthodes pour la conception des zonings de votre dispositif digital.
L'élaboration de zoning relève du design d'information. Sur les plans des disciplines digitales connexes, on se situe dans le design d'interface (UI design pour user interface design) qui appelle également de bonnes compétences en architecture de l'information et en design d'interaction. Le zoning est une technique de conception qui a un impact direct sur l'expérience utilisateur.

Un zoning donne à voir les grandes zones de l'interface. Le designer de l'information clarifie l'occupation de l'espace dans l'interface utilisateur. Chaque zone se voit attribuée une fonction. C'est un travail qui exige une excellente vision du fonctionnement du dispositif digital. En effet, il faut être capable de visualiser le périmètre fonctionnel dans son ensemble pour calibrer efficacement chaque zone de l'interface.

Intérêts des zonings

La matérialisation du zoning de l'interface est une intervention réalisée en amont de la conception. Le zoning web ou zoning fonctionnel prend en compte tous les paramètres et toutes les dimensions de l'expérience à intégrer dans l’interface : stratégie, marketing, communication, éditorial, technique, accessibilité, technologie, fonctionnel, publicitaire.

L’approche de conception par le zoning apporte des gains de temps dans la conception détaillée et dans la formalisation des composantes fonctionnelles de chaque gabarit. Travailler sur la base de zoning, en attribuant des fonctions à chaque zone, permet d’anticiper les cas marginaux et les problématiques d’encombrement de l’interface. C'est aussi un des meilleurs moyen pour proposer une expérience de consultation cohérente en matière d'ergonomie.

Le zoning donne une vision macro de l'interface

Le zoning de l'interface pose les bases fonctionnelles du dispositif. C'est un travail qui relève de la conception macro, c'est à dire qu'il donne une vue globale et générale du fonctionnement de l'interface. On peut presque dire, une vue générique. Le zoning ne se substitue pas à la conception micro et à la modélisation du fonctionnement détaillé de chaque écran. En effet, la conception détaillée de l'interface est une étape à part entière, qui va s'appuyer sur les zoning. En phase de wireframing (conception détaillée des écrans), on s'attache à préciser la ventilation des éléments à l'écran de façon très détaillée.

En bref, le zoning représente la première étape d'un travail de conception. On ne modélise pas un zoning pour chaque écran, au contraire. On définit les zones à l'écran dans le but de rationaliser le fonctionnement de l'interface, pour proposer des codes stables qui constitueront des repères dans le guidage de l'utilisateur.
Concrètement, si on prend l'exemple d'un site ecommerce, on commence par modéliser un zoning pour définir les grandes zones de l'interface utilisateur à l'échelle de tout le site marchand. On pourra ensuite compléter l'approche de conception macro par l'élaboration d'un zoning de la page d'accueil, la modélisation d'un zoning pour le processus de commande, ou encore un zoning pour la fiche produit... Il s'agit simplement de définir les grandes zones de l'interface. On détaillera le fonctionnement de chaque écran dans l'étape suivante, au moment du wireframing.

Ainsi, il est rare que la mise en scène du dispositif digital donne à voir plus de 5 Zonings. On réalise uniquement un zoning pour maquetter des écrans fonctionnellement très différents. Le contexte d'utilisation et la fonction de l'écran doivent être suffisamment originaux pour justifier d'un ajustement des zones.
En effet, rappelons que sur le plan ergonomique, il est important de proposer des repères pérennes à l'utilisateur. Or, le zoning fixe les fonctions de chaque zone à l'écran. Ainsi, maintenir des repères fixe sur toute la durée d'utilisation est une qualité ergonomique importante pour un dispositif digital. Le zoning n'a donc pas vocation à bouger fortement d'un écran à l'autre, puisque l'interface doit procurer une expérience de consultation solide, c'et à dire continue, fixe, invariable autant que faire se peut.

Prenons un exemple concret : la conception d'un dispositif ecommerce. Un site marchand d'une enseigne nationale compte généralement entre 50 et 100 gabarits d'interface type (templates). Le travail de design d'interaction et de design d'information modélise le fonctionnement détaillé de chacun des écrans dans les wireframes (on parle aussi de storyboard ou de mockup). Dans ce cas de figure, on établit un zoning transversal permettant de visualiser les grandes zones de l'interface à l'échelle de tout le dispositif marchand. C'est un premier type de zoning que l'on pourrait nommer la définition de l'interface. Le processus de commande est une interaction spécifique, suffisamment originale pour justifier un nouvel équilibre des règles de l'interface à l'écran : on modélisera alors un zoning particulier pour le fonctionnement du tunnel d'achat. La fiche produit, par la densité des informations qu'elle doit faire figurer, exige aussi, souvent, le recours à un travail de zoning pour préfigurer les grandes zones à l'écran : photo du produit, prix, fonction d'ajout au panier, avis, caractéristiques détaillées du produit, etc.).

Zoning et grille de travail

Le zoning est l'allié du concepteur car il vous oblige à prendre du recul sur le fonctionnement général de l'interface. Un zoning est souvent dépouillé sur le plan visuel. Cela ne signifie pas pour autant que l'interface soit vide et que le travail soit simple...

En effet, la modélisation du zoning implique d'avoir réfléchi à la grille générale de l'interface sur laquelle viendront se fixer les différents composants fonctionnels. On parle souvent de grille modulaire ou encore de webgrids voire de grid system (système de grille). De quoi s'agit-il ? La grille modulaire représente les grandes lignes de force sur laquelle le concepteur va concevoir chacun des modules de l'interface, de façon détaillée. Plus les modules fonctionnels sont proches sur le plan visuel et interactionnel, moins l'utilisateur devra faire d'effort pour apprendre les règles et les codes de l'interface. Une grille modulaire efficace permet donc de rationaliser la conception. D'optimiser la taille des modules.

Sur le plan visuel, les lignes de force s'appuient sur un quadrillage : le designer d'information figure les traits de coupe les plus forts de la grille. C'est un travail qui vise à aligner les éléments à l'écran. Le zoning macro de l'interface est donc plus subtile qu'il ne le laisse entrevoir. Etablir le zoning de l'interface, c'est déjà effectuer un travail de conception stratégique, dans la mesure où un système de grille est un élément très structurant de la conception et du design graphique d'un dispositif digital.

Le designer d'information n'est cependant pas obligé de définir le fonctionnement du système de grille. Il peut laisser le designer graphique libre de l'interprétation des zones en lui laissant le choix de définir les étalons qui permettront de fixer les grands principes d'alignement du site.

Il existe une infinité de système de grille :

• La grille traditionnelle aujourd'hui obsolète, de l'ancienne école : colonne de gauche, corps de page, zone de rebond en colonne de droite.
• La grille immersive : un en-tête, un corps de page, et pas de colonne.
• La grille en mosaïque : comme un magazine, elle fragmente les codes par juxtaposition des éléments.

Plus la grille répond au critère ergonomique d'homogénéité et de coéhrence des codes, plus l'utilisateur bénéficiera d'une expérience de consultation homogène.

Un design d'information figure en général des règles sur le nombre d'éléments pouvant être affichés à l'horizontale et à la verticale : combien de modules allons-nous empiler verticalement, combien de modules peuvent occuper la largeur de l'écran ? 1 module, 2 modules, 3 modules, 4 modules ? C'est une bonne pratique que de fixer, dès le zoning, les problématiques liées au dimensionnement des éléments ventilés à l'écran... Ce qui pose une question fondamentale à l'heure du design adaptatif...
Avertissement aux adeptes du Tetris : vous perdez quand votre interface est pleine ;). En effet, comme dans le jeu, le concepteur perd s'il le zoning ventile des fonctions dans toutes les zones de l'écran. L'interface sera trop chargée.

Zoning et problématique responsive

La conception adaptative, communément entendu sous le nom de responsive webdesign complexie le travail de zoning de l'interface. Il est effectivement plus délicat de concevoir une interface qui doit s'adapter au terminal de consultation. Le système de grille retenu doit être dynamique pour s'adapter efficacement aux spécificités de chaque grande typologie de terminal de consultation (écran panoramique, petit ordinateur portable, tablette, smartphone, etc.).

Le design adaptatif exerce une contrainte forte sur le concepteur. Mais il représente aussi une opportunité : en effet, les grilles adaptatives exigent un travail de zoning pour préfigurer le comportement des zones dans le cas du redimensionnement.
Le zoning de l'interface représente, à cet effet, une solution efficace pour gérer la problématique du design adaptatif sur le plan de la conception macro.

Déterminer les fonctions de chaque zone de l'écran

Concevoir le zoning revient à poser les principes de la ventilation des contenus et des fonctionnalités à l'écran. Les règles de zoning régissent l'espace alloué à chaque fonction du site. La définition d’une grille d’interface au travers du zoning permet également d’anticiper et de gérer efficacement l’intégration des messages et des bannières publicitaires (pour le cas des dispositifs ayant un modèle publicitaire intégrés à leur business).
Ainsi, modéliser un zoning permet de :

• Préparer la conception détaillée du dispositif digital.
• Affecter une fonction à chaque zone critique de l'écran.
• Définir le rôle de chaque zone.
• Anticiper les problématiques d'encombrement (publicité, incitation ergonomique, repérage).
• Fixer des repères ergonomiques stables à l'échelle du dispositif digital.
• Aligner les éléments autour d'un système de grille.
• Fournir des réponses et des scénarios dynamiques pour répondre aux défis du design adaptatif.

La définition d’une grille de travail et la réalisation de zoning macro doit, à minima, couvrir les objectifs suivants :

• Préparer le travail de storyboard haute-fidélité (wireframing détaillé).
• Valider les principes généraux de conception avant d’entrer dans le détail.
• Définir une grille permettant de réaliser une conception homogène.
• Prévoir l’intégration d’espaces publicitaires (ou de tout autre fonction importante).

Les éléments fonctionnels du zoning

Sur le plan de la conception pure et dure, votre zoning doit faire figurer :

• L'identification de l'émetteur (logo, branding).
• Le slogan ou baseline, ou élément différenciateur sur le plan communicationnel.
• L'emplacement de la navigation.
• Le positionnement des fonctions de recherche quand elles existent.
• Des éléments de repérage et de localisation permettant à l'internaute de savoir où il se situe dans le dispositif digital (marquage, titraille, chemin de navigation fil d'ariane).
• Les zones de communication éditoriales (événement, annonce éditoriale, rotation des contenus...).
• Les zones commerciales (accroche, incitation, animation commerciale, promotion...).
• Les modules fonctionnels.
• Les zones de rebond (poursuivre l'expérience vers d'autres sections du dispositif).
• Les emplacements pour rassurer l'internaute (rassurance, paiement sécurisé, données sécurisées etc.).
• Les modalités de mise en relation (contact, FAQ, SAV, support).
• La présentation et - ou l'agrégation des données issues des réseaux sociaux.
• L'emplacement des autopromotions.
• L'encombrement de la publicité externe.
• Les interactions avec le compte utilisateur - l'espace client (prix préférentiel, cagnotage, fidélité...).
• Les mécaniques fonctionnelles de la gamification quand elle existe.
• Des repères stables pour des fonctions récurrentes (trier, filtrer, comparer, ajouter au panier...).

La mise en place de votre grille de zoning doit soutenir des principes d'interfaces cohérents : les tailles des zones, les encombrements et les espaces dédiés à chaque fonction doivent être homogènes et proportionnels à l'importance de la fonction considérée.
Nous vous recommandons particulièrment de recourir à un travail de conception macro pour les projets suivants :

• Projet à forte dominante fonctionnelle : beaucoup de fonctionnalités à ventiler à l'écran.
• Projets internationaux multilingues, multi-pays, multiservices : problématique de navigation au sein d'un écosystème digital.
• Projets responsive complexes (site éditorial de grande envergure ou dispositif ecommerce de taille critique).
• Dispositifs dont les enjeux portent fortement sur la modularité de l’interface (simulateurs...).
• Support interactif dans lesquels l'interaction principale se fait au travers d'un seul écran ou d'un nombre de templates très limités (Youtube, Google...)
• Projets impliquant les problématiques de gestion de la publicité.

Concevoir le zoning pour amorcer la conception détaillée

Votre travail de conception doit être initialisé par la matérialisation macro de l’interface via la conception du zoning.
La modélisation du zoning fait généralement suite aux premières réflexions menées sur la définition de l’interface rappelant les contraintes à prendre en compte (accessibilité, technologie, contrainte de l'outil de gestion de contenu CMS, priorisation des composantes de l’interface, etc.). Ceci étant dit, ce sont surtout les projets appelant une conception sur-mesure qui exigent un effort supplémentaire sur le plan du zoning. En effet, les CMS sont prêts à l'emploi et laissent souvent peu de marge de manoeuvre pour modifier l'emplacement des zones à l'écran...

Comme nous l'avons expliqué, la mise en place du zoning vise à définir un système de grille. Vous devez donc opter pour un grid system. Ce choix se fait en fonction de la typologie de votre projet. Un site de nature pédagogique épousera harmonieusement le traditionnel site en 3 colonnes. Le portfolio d'un photographe relèvera d'un zoning plus libre valorisant de grands espaces pour les photographies. Les dispositifs ecommerce appellent des zoning très structurés en réponse à la densité du périmètre fonctionnel. Un site de presse en ligne doit donner la part belle aux espaces publicitaire et aux zones de rebonds pour favoriser le butinage...

Pour matérialiser votre zoning, gardez en tête la problématique du repérage : proposez des repères stables au sein de l'interface utilisateur. Il faut également bien avoir à l'esprit que la définition du zoning est utile pour anticiper les cas spécifiques et les problématiques d’encombrements de l’interface. Vous devez avoir une vision la plus élargit possible du fonctionnement de votre projet digital.

Ensuite, attribuez des fonctions à chaque zone de l’interface en veillant à définir les modalités d’occupation de l’espace. Vous pouvez vous inspirer des exemples pour voir le degré de détail à apporter aux commentaires des zones fonctionnelles. Il ne s'agit en aucun cas de spécifications fonctionnelles. Tout au plus, quelques commentaires d'ordre informatifs sur la nature des fonctions de chaque zone.

Un zoning pour poser les bases de l'interface

Reprenez la liste des fonctions évoquées dans les objectifs du zoning. Commencez par figurer l'emplacement de l'émetteur. Puis de la navigation. Fixez les repères de localisation dans l'interface.

Ensuite, définissez une grille autour de grandes lignes de force : combien de modules souhaitez-vous pouvoir ventiler sur la largeur (1, 2, 3...) ?

Fixez la taille des modules et pensez bien à l'importance d'avoir un nombre limité de zoning. Veillez à ne créer des nouveaux zoning que si les zones fonctionnelles sont suffisamment originales pour justifier un équilibre différent des règles d'interface (par exemple : la page d'accueil est radicalement différente du processus de commande lui-même à l'opposé d'une fiche produit). Pour chaque typologie d'écran très spécifique, procédez à un travail de zoning.

Démarche pour concevoir le zoning de votre projet

Pour concevoir votre zoning, suivez les étapes suivantes :

• Considération du fonctionnement sur le plan global.
• Utilisation de la documentation projet existante (inventaire fonctionnel...).
• Analyse des règles d’interface à prendre en compte.
• Elaboration d’une grille.
• Définition des zones.
• Attribution d’un espace variable ou statique à chaque zone.
• Attribution de caractéristiques dynamiques à chaque zone.
• Projection adaptative.
• Mise en place du zoning macro et de la grille.

Travaux complémentaires à la conception des zoning

L'inventaire fonctionnel qui établit le listing de toutes les fonctions attendues dans le dispositif digital, est une bonne source pour amorcer le travail de conception.

Avant de matérialiser le zoning, on peut prioriser les messages et les parcours au travers de la définition de l'interface utilisateur.

La conception du zoning doit également prendre en compte les problématiques de design de navigation.

Le travail de conception macro du zoning de l'interface débouche sur la conception fonctionnelle micro et détaillée au travers des wireframes haute-fidélité - technique du wireframing.

Plus loin dans la phase de conception, les spécifications fonctionnelles décrivent le fonctionnement détaillé de chaque zone du site, pour chaque écran type.

Écrit par
Julien Muckensturm - spécialiste en design ux