• Tweet
• 
• 

L’ergonomie des sites web est un éternel problème. Je me suis donc penché sur un des secrets qui fait que votre site est clair tout en mettant en avant votre contenu : les white spaces.

Les white spaces sont le fer de lance de l’ergonomie web. Ces «espaces blancs» servent à la fois à dynamiser visuellement une page et aussi organiser le contenu. Prenons l’exemple d’une pièce. Elle est  meublée et agencée de telle sorte qu’il est difficilement possible d’aller fermer la fenêtre se trouvant à l’opposé de la porte d’entrée. L’espace dans cette pièce est mal géré et par conséquent, y vivre devient vite impossible. Il se passe la même chose pour une page web et l’une des solutions est la gestion intelligente des white spaces.

Le blanc : couleur vecteur de sens

Le blanc est hautement symbolique. Couleur éternelle de la pureté, de l’innocence, de la spiritualité,… elle est également associé au vide, à l’absence. Dans le web, il prend une autre dimension : celle du luxe, du design, de l’exclusivité et de la sobriété. C’est principalement les marques de mode, de parfum ou d’automobile qui sont les plus friands de white spaces. Prenons l’exemple du site de Porsche. Le blanc et le vide sont omniprésents comme on le voit avec des larges photographies où aux miniatures des voitures placés dans un environnement vide accentué par une ombre.

A contrario, le site internet de Fiat (ci-dessous), www.fiat.fr est un bon exemple de mauvaise gestion des white spaces. On y compte pas moins de 3 menus différents (un horizontal et deux autres verticaux). De plus, le nombre d’entrée est très important ce qui peut avoir pour conséquence de perdre l’internaute rapidement et surtout les « novices » du web. Les marges sont également mal gérées, surtout dans la box Nouveautés et Événements où ces dernières déstructures l’ensemble du contenu et lui font perdre son sens implicite.

WhiteSpace : faire parler son contenu sans même avoir à le lire

La grande force des white spaces est qu’ils organisent et agencent votre contenu sans aucun élément graphique à proprement parlé. Leur simple présence permet de mettre en évidence certaines parties de votre contenu et à leur donner visuellement un sens. Regardez la colonne de gauche. Le texte est écrit au kilomètre formant ainsi un bloc assez lourd. En le comparant avec la colonne de droite on remarque facilement que l’ensemble devient plus léger avec de simple retour à la ligne. On peut également remarquer que le simple fait d’ajouté un saut de ligne et d’indenté le texte sur la droite permet de mettre cette partie en valeur par exemple pour une citation.

Ce principe de séparation s’applique également aux listes. Le fait de retourner à la ligne après chaque mot permet de visuellement savoir que c’est une liste sans même en avoir lu le contenu. L’exemple ci-dessous nous le confirme. Nous pouvons aller encore plus loin en séparant certains mots de la liste dans le but de faire des groupes ayant le même thème.

Les white spaces peuvent aussi être utilisé à l’intérieur même du contenu, notamment au niveau de la hauteur de la ligne. Nous voyons clairement sur l’image que selon le line height, un même texte est beaucoup plus lisible et plus agréable à lire que l’autre.

Les outils pour gérer au mieux vos whites spaces

• line-height

La commande css line-height est incontournable pour régler la hauteur de la line du votre texte. Même si la valeur de votre line-height est calculé automatiquement avec la taille de la police utilisée, il est parfois judicieux de l’augmenter un peu plus pour rendre le texte plus lisible et plus agréable à lire. Je vous conseil néanmoins de toujours fixer la hauteur de la ligne à au moins 150% de la taille de la police. Avec un texte à 10px, le line height sera à 15px; à 12px, le line-height sera fixer à 16px. Pensez donc à fixer le line-heigh avec l’unité em et non pixel pour que celle-ci s’adapte quelque soit la taille du texte.

• les grids

Concernant la gestion des white spaces entre les différentes zones de votre page, vous pouvez utiliser le système de grids. Le principe de ce système est de diviser votre écran en un nombre x de colonnes pour pouvoir agencé graphiquement votre contenu (le plus connus étant le 960 grid system). De nombreux sites proposent de télécharger gratuitement des grids. D’autres vous permettent même d’en générer selon vos besoins en les personnalisant avec vos propres paramètres comme le site www.tinyfluidgrid.com

• l’évaluation de l’importance du contenu

Attribuer des points à chaque zone de votre contenu afin d’en faire ressortir les plus importantes. Cette technique marche assez bien pour élaborer un menu par exemple. En supprimant les entrées superflues , vous allez mettre en valeur le contenu le plus important et ainsi désengorger votre menu afin de l’aéré. Il sera plus visible et donc identifiable mais aussi plus pertinent.

Vous l’aurez donc compris, les white spaces sont bien plus que des éléments graphiques. Codés et très symboliques, ces espaces blancs sont un des piliers de l’ergonomie web. Ils informent implicitement l’internaute sur le type de contenu qu’il voit, s’il se trouve en début d’article ou au milieu d’une liste. En les utilisant intelligents vous ne pourrez qu’améliorer votre ergonomie et garder l’internaute plus longtemps sur votre site .