Zoning d’interfaces

Introduction :

Le zoning est un document monochrome qui schématise l’organisation visuelle des principales pages constituant une interface.

Cette étape suit directement l’arborescence dans laquelle le contenu est ordonné. Ici, il s’agit de l’organiser dans l’espace de la page web, en prenant en compte la résolution de l’écran notamment.

Que représente le zoning ?

Il décrit l’interface du site en découpant l’espace en plusieurs zones.

Il s’agit de positionner notamment les systèmes et éléments de navigation, les images, les textes, les outils et fonctionnalités nécessaires au parcours de l’utilisateur à travers l’interface.

Contenu du zoning

Pour être suffisamment efficace, le zoning représente généralement les éléments suivants :

  • Logo,
  • Baseline,
  • Navigation,
  • Contenu,
  • Outils,
  • Publicités,
  • Fil d’Ariane,
  • Champ de recherche,
  • Images et/ou photos

Représentation du zoning

Ces différents éléments sont représentés par des blocs, tous teintés avec une nuance de gris plus ou moins forte, ce qui illustre leur niveau dans l’arborescence.

L’ensemble de ces blocs spécifie ainsi une hiérarchie visuelle de l’information par proportions des nuances de gris.

Exemple de zoning
Zoning d’interface avec ligne de flottaison

Un zoning pour chaque page ?

Non, il n’est pas nécessaire de réaliser un zoning pour chaque page de l’application. Le zoning ne rentre pas dans le détail et donne uniquement les lignes directrices de l’organisation visuelle de l’information.

Toutefois, il se peut qu’un seul document ne suffise pas à organiser l’ensemble de l’interface. C’est pourquoi il est conseillé de réaliser autant de zoning qu’il y a de pages structurellement différentes.

Exemples :

  • Page d’accueil
  • Page de présentation des produits
  • Page de recherche
  • Page de contact

 

Contraintes de l’environnement web

C’est la première fois depuis le début du processus de conception centrée utilisateur que les contraintes environnementales du web sont prises en compte de facto.

Résolution

Dans la mesure du possible, le zoning sera dimensionné à une résolution d’écran standard du web.

Ceci permettra de positionner tous les blocs uns à uns et d’effectuer un premier contrôle de la visibilité suivant la résolution effective de l’écran. Ainsi, si des blocs d’une certaine importance se retrouvent sous la ligne de flottaison ce sera le moment idéal pour revoir le zoning et, de ce fait, l’organisation de l’ensemble de la page.

Calcul de la résolution effective :

Résolution d’écran = a X b pixels, où a=largeur et b=hauteur

Largeur maximale = a – 20 px

Hauteur maximale = b – 200 px

Importance du zoning

C’est le gabarit de la page web et, par conséquent, un outil très utile dans la suite du processus, tant pour l’ergonome, que pour le designer graphique ou encore l’équipe de développement.

L’étape de création de zoning permet de partir sur une base de travail consensuelle, en accord avec l’ensemble du staff.

C’est aussi un tournant dans le processus ergonomique de conception centrée utilisateur car le designer graphique intègre le cycle pour désormais travailler de paire avec l’ergonome et débuter sa planche d’inspiration (ou moodboard). De cette façon, chacun se concentre sur son domaine d’expertise pour plus d’efficacité.

Mots-clefs :, , , , , , , ,

Pas encore de commentaire.

Laisser un commentaire

Dinghy22zane |
Bush3carson |
Cashonthedayuk |
Unblog.fr | Créer un blog | Annuaire | Signaler un abus | Mary7virgil
| Carlfang28
| Eyes21toast