• Action-redaction.com »
• Contenu web » Le travail de l’ergonome : dessiner les zonings et maquettes

Le travail de l’ergonome : dessiner les zonings et maquettes

Comment agencer l’information sur les pages ?

Zonings

Un zoning est un document qui représente les grands espaces d’information des pages principales : page d’accueil, page de rubrique, liste, page produit, page d’article, etc. Le but est de choisir l’emplacement des différents éléments comme la barre de navigation, les différentes parties de la page, les outils, etc.

Les éléments du zoning à afficher :

• l’identité du site : logo, baseline
• les espaces de navigation
• les espace de contenus
• les outils et la navigation générique
• les espaces publicitaires

Cette répartition doit se faire le plus justement en tenant compte de la résolution cible d’écran pour optimiser l’affichage et la répartition.
Les éléments essentiels doivent être visibles sans scroller, c’est-à-dire être au-dessus de la ligne de flottaison (ou fold = espace de l’écran visible sans scroller). Il s’agit de l’identité (logo, baseline), la navigation du site, les outils fonctionnels, les informations cruciales pour les visiteurs, les actions les plus fréquentes. Pour hiérarchiser l’importance visuelle des contenus, jouez sur les différents degrés de couleurs, du plus foncé au plus clair par exemple.

Calcul de l’espace disponible en fonction des résolutions:

Résolution Largeur maximale Hauteur visible à l’écran
a x b pixels	(a-20) pixels	(b-200) pixels
		a = largeur de l’écran b = longueur de l’écran
800 x 600	780 pixels	400 pixels
1024 x 768	1000 pixels	570 pixels
1280 x 1024	1260 pixels	820 pixels

Maquettes

Basée sur le zoning, la maquette ergonomique détaille chaque bloc du zoning au niveau du contenu et de sa présentation. Il s’agit pour les pages principales (page d’accueil, page produit, page finale, etc.) d’en faire une description la plus précise que possible tant schématique que textuelle.

Cette maquette va vous permettre de faire valider la conception par le client sur base d’un document très visuel avant de passer au graphisme et d’offrir un document de travail au graphiste et au développeur.
Basée sur le zoning, la maquette intègre la notion de pixels afin de tenir compte des proportions dès le début.

Les éléments à afficher :

• textes :
  longueur, principes de mise en forme
• intitulés :
  titres, libellés des boutons, liens (état nominal, survolé, cliqué, visité, balise TITLE), légendes, libellés de champs de formulaires, etc.
• règles d’écriture (utilisation d’infinitif, etc.)
• objets :
  apparence (emplacement, alignement, taille, couleurs, contraste, fond/caractères) des principaux objets et classes d’objets, comportements des objets et explication à l’aide de notes.

Travaillez avec une charte ergonomique qui spécifie les règles de conception des éléments : titre de page, niveaux de texte, module de mise en avant, lien hypertexte, titre cliquable, chapeau, bouton d’action, barre de navigation, image, message système, champ de formulaire, balise ALT, balise TITLE, etc.

Pour toute information complémentaire : contactez-nous

Services

• Rédaction de contenu web optimisé pour le référencement naturel
• Formation en rédaction web et stratégie de contenu
• Stratégie de contenu web : notre offre de service
• Audit de site web
• Consultance en architecture de l’information et contenus web
• Gestion de projet web
• Coaching pour vos contenus web

Livre

© action-redaction.com 2007 - 2012