UX design

Zoning : définir l’organisation d’une interface

Qu’est-ce qu’un zoning ?

Le zoning est une technique de maquettage consistant à produire un schéma simplifié d’une page web ou d’un écran. Cette étape permet de définir l’organisation globale de l’interface en plaçant les grandes zones de contenu (navigation, header, contenu, footer etc.). C’est un document très général.

Faire l’inventaire du contenu

Commencer par le zoning permet de faire l’inventaire de l’ensemble du contenu. Il permet de vérifier si aucune fonctionnalité ne manque. Le zoning est généralement établi après avoir lister l’ensemble du contenu sous forme de card sorting par exemple.

Il sert de base de travail sur laquelle les différents acteurs d’un projet peuvent échanger (client, UX designer etc.).

Définir la localisation des éléments

Son aspect volontairement simplifié est un avantage. Il permet de se focaliser uniquement sur l’aspect fonctionnel sans être distrait par la mise en forme graphique. Son rôle est de définir la localisation des fonctionnalités et du contenu.

Hiérarchiser les informations

Les blocs de contenu sont disposés en fonction de leur niveau d’importance dans la page ou l’écran. Sur le plan graphique, il est possible de rendre compte de la hiérarchie visuelle avec différentes nuances de gris. Mais comment hiérarchiser les blocs de contenu sur le fond ?

La ligne de flottaison pour les éléments importants

La ligne de flottaison est une ligne virtuelle délimitant la limite inférieure d’un écran. Une page web n’est pas visible dans son ensemble. L’affichage se fait donc écran par écran en fonction du scroll (défilement). Ce qui est dessous de la ligne de flottaison n’est pas immédiatement visible. Il faut garder en tête que cette ligne est variable selon la taille de l’écran, le navigateur utilisé etc.

Sur desktop, la ligne de flottaison est un élément stratégique pour les sites e-commerce. Les éléments décisifs sont généralement positionnés au dessus de cette ligne (prix, promotion, informations de livraison, bouton d’ajout au panier etc.).

La thumb zone pour l’accessibilité

La thumb zone est un terme employé pour définir la zone de confort du pouce lorsque nous tenons un smartphone d’une seule main.

Sur mobile, choisir la position des différents blocs en fonction de la thumb zone est primordial pour assurer un confort de navigation.

Un zoning est-il toujours nécessaire ?

Le zoning est une étape nécessaire lorsqu’il y a beaucoup d’éléments à positionner et à prioriser. Pour des interfaces moins complexes, il peut être rapidement esquissé sur papier pour gagner du temps.

Récemment, j’ai eu l’occasion de travailler sur la refonte d’une fiche produit. Il y avait pas moins de 30 blocs d’information à organiser ! Le zoning a fait l’objet d’un livrable et de plusieurs retours avec le client avant de poursuivre sur les wireframes.

Comment avez-vous trouvé cet article ?

Note moyenne 0 / 5. Nombre de vote : 0

Soyez le premier à donner votre avis 🙂

Que pensez-vous de cet article ?