Article(s) de mars 2008 :

Les espaces blancs

Introduction

Les espaces blancs aussi appelés espaces négatifs en dessins, correspondent aux espaces vides laissés entre les éléments. Nous allons voir que ces espaces vides ont autant d’importance, dans le processus de mise en page, que les éléments eux-mêmes .
Introduction

Depuis des siècles en Orient, les artistes prennent en considération qu’une création se définit autant par l’absence de ses éléments que par ceux qui la constituent (Scott McCloud, L’art invisible). Cette idée se retrouve facilement dans le symbole du Ying et du Yang. En art appliqué, cela est aussi vrai. Bien que le lecteur n’y face pas attention, il perçoit les espaces. En effet, sans les espaces vides, la lecture d’un document où d’une page web serait impossible.

L’espace est partout

En typographie, nous distinguons plusieurs type d’espaces blancs :

– L’interlignage, espace entre les lignes, espace vertical séparant les lignes de texte.
– L’interlettrage ou approche, espace entre les caractères d’un texte.
– L’espace, espace séparant les mots d’un texte.
– Les marges ou blancs tournants, espaces vierges qui entourent dans les quatre directions une page, un bloc de texte, une illustration …

Toutes ces familles de blancs participent à faciliter la lisibilité d’un texte ou d’une mise en page. Un subtil équilibre entre la répartition des espaces blancs et des éléments confère une meilleure lisibilité aux informations. En effet, ces espaces blancs contribuent à faciliter la perception de ces informations et diminue l’effort que l’utilisateur doit fournir pour appréhender une mise en page.

Exemple : le site Apple

La perception visuelle se fait de manière globale puis en parcourant les différentes zones unitaires. Se sont les espaces blancs qui permettent de distinguer les éléments que se soit une lettre, un mot, un paragraphe ou un groupe d’éléments.

Plus la mise en page est complexe et l’information dense, plus la lecture est difficile. Plus il y a de choses sur votre écran, plus l’information se noie dans un tout et moins elle devient visible.

En design, une large utilisation des espaces blancs apporte de l’élégance, une impression de qualité et une certaine sophistication que l’on rencontre souvent dans la communication des marques de luxe.

Exemple : le site de Chanel

Conclusion

Une utilisation subtile des espaces blancs améliore le confort de lecture et apporte une certaine harmonie au design. Les espaces blancs sont aussi un moyen habile pour isoler un élément, lui donner un poids visuel plus important et attirer l’attention du lecteur.

N’ayez pas peur d’utiliser les blancs dans vos mises en page afin qu’elles respirent. N’oubliez pas que plus vous surchargerez votre écran d’informations, plus elles auront du mal à se distinguer, plus elles seront difficiles à lire.

Sources :

– AlistApart – Whitespace
– SmashingMagazine – White Space and Simplicity: An Overview

Zoning et wireframe

Après avoir réalisé le brief créatif, l’architecture de l’information de votre site (hiérarchisation du contenu en rubriques, arborescence de navigation …) l’étape suivante s’intéresse à la conception et l’organisation de vos pages.

Cette étape de conception des pages est réalisée à l’aide, dans un premier temps, de la technique de « zoning ». Puis les choses s’affineront avec l’établissement d’une représentation des pages plus aboutie : les wireframes.

Le zoning

Le zoning est une technique simple qui consiste a représenter une page de votre site à l’aide de boites qui symbolisent les grandes fonctionnalités et les zones principales de contenu. Cette étape est primordiale pour décider le l’organisation générale de vos pages. On ne résonne ici qu’en terme de zones (boites), le détail des éléments qui rempliront ces zones ne sera abordé qu’à l’étape des wireframes.

Chaque boite (carrés, rectangles …) représente une entité majeure de votre site qui doit trouver sa place sur l’écran en fonction deux critères principaux :

* Son importance hiérarchique.
* Son encombrement spatial.

L’encombrement spatial est matérialisé par la forme des boites, l’importance hiérarchique par une valeur de gris par exemple.

Bien sure vous devez, lors de cette étape, avoir déjà une idée approximative de la taille qu’occuperont vos éléments sur la page. Cela suppose que vous ayez débroussaillé le travail lors de l’étape de rassemblement de votre contenu et de l’architecture de l’information.

Exemple de zoning de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Cette étape tient généralement compte de la résolution cible de vos utilisateurs.

Il faut également tenir compte de la zone au dessus du « fold » (zone visible de l’écran sans avoir à scroller). Le fold représente une ligne virtuelle qui se situe en bas de votre écran et délimite la zone à partir de laquelle les informations sont accessibles uniquement par défilement. En effet, les éléments les plus importants devront se situer au dessus du fold où à cheval sur celui-ci pour suggérer leurs présences.

Il est important de comprendre (et de faire comprendre au client) que la réflexion se porte uniquement sur l’organisation générale des grandes zones d’influence du site et non sur le choix des couleurs où des icônes. Le client ne doit donc pas être frustré par le niveau d’abstraction élevé de représentation des pages de son site à cette étape.

Ce travail se concrétise par l’établissement d’un livrable qui servira de document de discussion avec le client pour correction puis validation.

Les wireframes

Une fois que l’organisation générale des pages a été validé à l’aide de la technique du zoning, nous pouvons commencer à affiner les choses en réalisant des wireframes.

Attention, le terme wireframe possède de nombreux synonymes que vous rencontrerez sûrement selon les personnes avec qui vous travaillerez :

* Maquette ergonomique
* Maquette fonctionnelle
* Prototype
* Storyboard
* Mockup
* Layout …

Les wireframes sont des maquettes dans lesquelles on détail le contenu des boites définies dans l’étape de zoning. Il s’agit de réfléchir non pas sur le graphisme mais sur les aspects fonctionnels et ergonomiques des éléments qui rempliront ces boites. C’est pourquoi il est conseillé de réaliser les wireframes en noire et blanc pour ne pas distraire le client des objectifs principaux de ce type de document. Vous pouvez tout de même représenter les liens hypertetxes en bleu. En aucun cas les aspects purement graphiques ne doivent être abordés lors de cette étape.

Le document qui va réunir l’ensemble des fonctionnalités d’un site sous forme de wireframes est appelé story-board.

Chacune des boites qui composent notre zoning contient par exemple du contenu texte, des éléments de navigation, des formulaires, des listes, des images … Ce sont ces éléments que vous devez maintenant décrire sur votre maquette. Vous devez connaître la taille précise en pixel de ces éléments, décrire visuellement et par écrit le fonctionnement et les différents états des éléments fonctionnels tel que les menus où les formulaires.

Une réflexion approfondie doit être entamée sur le vocabulaire des rubriques, des titres, des liens, des libellés de bouton, des champs de formulaire, des messages d’erreurs … Pour le corps du texte, si possible utilisez du vrai texte, celui qui sera utilisé pour le site, à défaut utilisez les « Lorem ipsum ».

Vous devez également être attentif à décrire l’apparence des objets dans leurs différents états :

Pour les éléments cliquables quel sera leur aspect à l’état nominal, survolé, activé.

Pour le workflow d’un panier d’achat quel sera l’apparence des différents boutons.

Toutes ces descriptions vont permettre de faciliter le travail des intégrateurs, des développeurs et des graphistes en levant les ambigüités.

Exemple de wireframes de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)

Comme pour le zoning, l’établissement des wireframes se concrétise par la réalisation de livrables qui seront communiqués au client afin de débattre, corriger puis valider la conception des pages du site avant de passer au design graphique.

Conclusion

L’erreur classique est de vouloir se précipiter sur l’aspect graphique des pages du site sans porter attention à l’ergonomie et à la conception de la mise en page. Cette erreur se paye généralement en retours successifs qui couterons chère en temps et en argent. Les étapes de zoning et wireframe sont donc indispensables dans le process logique de la construction d’un site internet et il faut y porter une attention particulière. Cela sera d’autant plus vrai que le projet sera important.

Travailler avec le client et l’équipe projet à partir de ce type de documents (zoning, wireframe) permet de se concentrer sur le fond (fonctionnalités, interactions, contenus) sans se laisser distraire par la forme (design).

Sources :

Ouvrage : Ergonomie web, pour des sites efficaces – Amélie Boucher – Ed. Eyrolles