Du bon usage de l'espace négatif sur les sites e-Commerce

La gestion de l'espace négatif est une méthode extrêmement puissante utilisée par les professionnels du design. Le minimalisme et les zones neutres susciteraient la contemplation. Mais le vide est devenu un aspect incontournable de toute bonne conception graphique pour bien d’autres raisons ... explications

Sur Internet un lecteur n'accorde en moyenne pas plus de 30 secondes à une page. En aérant votre contenu vous aidez les acheteurs à distinguer immédiatement l’essentiel du superflu. Résultat : les gens qui apprécient cet effort de synthèse et d'efficacité associent instinctivement ces espaces négatifs à une notion de qualité.

Espace négatif ou blanc : différences ?

L'espace négatif et le blanc c'est exactement la même chose. Le terme "espace blanc" trouve son origine dans le jargon des imprimeurs. Le blanc étant la couleur de papier la plus répandue, le terme désigne les zones sur les pages qui ne sont pas recouvertes d'encre. Le terme "espace négatif" englobe lui toutes les autres couleurs de fond pour désigner les zones qui séparent divers objets sur un canevas.

Micro et macro espace négatif

L'espace négatif se distingue habituellement en deux catégories : les micro espaces et les macro espaces. Les micro espaces négatifs désignent les zones de vide entre divers éléments de petite taille dans une charte graphique. Les macros espaces quant à eux concernent les blancs entre des éléments de la charte plus importants.

Prenez le site d'ecommerce-pratique.info par exemple. Les micros espaces négatifs qui séparent les articles, instaurent les marges ( ci-dessous en bleu). Les macros espaces qui séparent les éléments de la charte tels que le bandeau, l'inscription à la newsletter et le contenu à proprement parler sont en vert.

Intérêt de l'espace négatif en ergonomie web

Qu'il s'agisse de micros ou de macros espace négatif, les zones de vide jouent un rôle fondamental dans la conception de pages web. L’intérêt des macros espaces c’est qu’ils structurent le site tandis que les micros espaces améliorent la lisibilité et la convivialité.

Le minimalisme et ses enjeux

Pour faire simple disons qu’un design minimaliste a la prétention de chercher à en dire long avec très peu. Voilà donc pourquoi les conceptions minimalistes ont recours à un maximum d'espaces négatifs. Le but recherché est de concentrer l'attention des internautes sur quelques éléments seulement sur la page. C’est ainsi qu’on associe souvent l'espace négatif à une conception dite minimaliste du design. Reconnaissons toutefois qu’il est presque impossible de mettre en page quoi que ce soit (en particulier un site Web) - sans une certaine quantité d'espace négatif. Le vide a pour but de mettre en avant des éléments spécifiques à travers la mise en page. Il crée un équilibre entre les divers éléments présents et capte l’attention vers les informations les plus importantes.

Au fait qu'en est-il sur votre propre site marchand ? Comment utilisez-vous l'espace négatif pour attirer l'attention sur certains produits ou certaines fonctions de votre boutique ? Votre bouton "ajouter au panier" est-il noyé dans la masse d'informations de second plan ? Les éléments les plus importants sont-ils bien isolés et bénéficient-ils de suffisamment d'espace négatif environnant ?

Une affaire d’équilibre…

Il est extrêmement facile de succomber à l'abus d'espace négatif. Faire le vide est avant tout une affaire de pondération. Vous ne devriez pas complètement isoler votre bouton ajouter au panier (ou tout autre élément d'appel à l'action important). Les sites e-Commerce ont cette particularité d'avoir beaucoup de contenu à organiser et présenter. Le but de l'espace négatif n'est pas d'éliminer complètement certains éléments et d'en glorifier d'autres. Il est plutôt question de trouver un juste équilibre entre tous les éléments de la charte graphique et de les prioriser. Il va de soi que cet équilibre dépend beaucoup de la quantité de contenu que vous avez à fournir.

C’est pour cette raison que l'espace négatif devrait être utilisé à bon escient. A savoir un interlignage des textes, un espacement entre les lettres, des marges et des sauts de lignes uniformes pour les micros espace négatif. Utilisez également un espacement harmonieux entre les blocs plus important de la charte graphique pour les macros espace négatif.

Exemples d'espace négatif en web design

Voici deux exemples de sites qui ont très bien compris l’intérêt de l'espace négatif.

Google : Le site est célèbre pour sa gestion légendaire de l'espace négatif. Sur Google l'accent est mis sur un objectif unique : le champ recherche.

Apple : Le site à la pomme est un cas d'école de graphisme dans l'utilisation de l'espace négatif. A la limite du minimalisme, tous les éléments de design les plus importants sont extrêmement bien organisés et bien rangé pour que les visiteurs puissent trouver ce qu'ils recherchent. Fait intéressant, les Apple store (boutiques en dur d'Apple) exploitent eux aussi l'espace négatif.

En résumé

Les espaces négatifs sont un facteur important qui dictent le ton de votre site. Un nombre important de zones neutres permet de renvoyer une image plus "haut de gamme". Les blancs permettent à l’œil de l'acheteur de se reposer et surtout d’instaurer une hiérarchie visuelle dans le contenu. Néanmoins… il est important de ne pas en abuser et de trouver le juste équilibre. Car un site minimaliste est peut-être agréable à regarder mais les vrais acheteurs (ceux qui ne sont pas venus pour contempler le graphisme de votre site) mais pour acheter un produit cherchent des informations qui feront qu’ils passent à l’acte ou non. A ce stade, les beaux effets graphiques et la beauté du vide ne les intéressent pas vraiment. Il est toutefois très important d'isoler suffisamment les éléments d'appel à l'action (par exemple le bouton " achat immédiat ", " en savoir plus ", " appelez-nous ") pour les guider vers un point de chute unique et prédéfini.

Rappel et conseils pratiques :

Un site e-commerce trop « léché », faisant preuve d'un design trop créatif pourrait distraire les visiteurs et finir par attirer davantage l'attention sur le site en lui-même au détriment des produits. Le but d’un site e-commerce est d’attirer un maximum de visiteurs et de les transformer en acheteurs. Supprimez tous les éléments qui ne servent pas cette cause.

Un beau site minimaliste n'est pas forcément un site qui fait vendre pour autant...un site bien référencé - des informations utiles et claires font que les acheteurs passent à l’acte. Le temps investi à réinventer des designs hasardeux est plus rentable s'il est investi sur le référencement et les descriptions produits.

Ce qui fera la différence avec ceux de vos concurrents ce n'est pas tant son squelette mais le soin apporté aux photos (ex achetées sur Fotolia), les couleurs que vous choisissez et l'harmonie que vous y créez. Pour un site e-Commerce un beau bandeau bien travaillé par un infographiste professionnel devrait suffire pour faire comprendre à vos acheteurs que vous êtes sensible à la qualité.

Même si on est tenté de vouloir toucher à une grande partie de la charte, mieux vaut opter pour des modèles prêts à l'emploi et personnalisables disponibles dans votre solution d’e-Commerce. Vous préserverez ainsi tous les dispositifs prévus pour le merchandizing, la compatibilité avec les navigateurs et les mobiles, et bénéficierez d’une migration plus souples (et moins coûteuse) pour faire évoluer votre boutique dans le temps.