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 :

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 :

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



Laissez un commentaire

* Recopier ce code ici ->

XHTML: Vous pouvez utiliser ces tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Suivez-nous

Services

Livre

"Conseil, astuces et bonnes pratiques en matière de rédaction web et de référencement naturel"

Couverture du livre Bien rédiger pour le Web. Stratégie de contenu pour améliorer son référencement naturel, 2e édition, 2011

« Bien rédiger pour le Web. Stratégie de contenu pour améliorer son référencement naturel », Eyrolles, 2e édition, 2011, 535 pages.
Auteure : Isabelle Canivet, préface et contribution d’Olivier Andrieu et de Sébastien Billard.

Contenu du livre

Consultez le site officiel du livre

Commandez le livre en ligne
Site d'Eyrolles
Site d'Amazon
Site de la Fnac
Isabelle Canivet
Auteure : Isabelle Canivet

Pour toute information complémentaire : contactez-nous



Voir le site officiel du livre.

"30 outils pour vos contenus web : ebook à télécharger"

Audit, stratégie, conception, production et mesure du contenu web

Concevoir, cibler, produire et tester vos contenus en ligne !

Une compilation exclusive de différents outils et méthodes applicables à la gestion d’un site web.
Des conseils pragmatiques éclairés par l’expérience de deux professionnels du contenu :
Jean-Marc Hardy et Isabelle Canivet.

E-book disponible en vente depuis le 7 novembre 2011 au prix de 28 euros !

Auteurs de 30 outils pour vos contenus web



Voir le site officiel du livre.

Suivez-nous