Le principe de proximité dans le webdesign

Le « principe de proximité » est un concept issu de la Psychologie de la forme (Gestalt) qui énonce que le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner comme un tout. Pour appliquer ce principe de proximité dans le cadre de la conception d’un site web, on rassemblera les éléments qui partagent un destin sémantique commun au sein d’un ensemble visuellement identifiable.

Dans les faits, ce principe de proximité est relativement simple à mettre en oeuvre : il suffit d’augmenter ou de diminuer la « distance » entre deux ensembles pour que l’utilisateur identifie rapidement les zones principales à parcourir, le faisant passer du statut de « visiteur » à celui de « lecteur ».

Cette notion de proximité est tellement évidente que nous sommes tous plus ou moins experts en « principe de proximité ». Nous apprenons au cours de notre scolarité à rassembler nos idées et à les structurer en parties et sous-parties avec une introduction pour commencer et une conclusion pour finir. Dans le cas d’une dissertation, la « distance » entre deux idées sera souvent exprimée par la longueur de la transition entre deux paragraphes.

Mettez des distances …

En ce qui concerne la composition graphique, nous disposons de plusieurs techniques pour exprimer cette « distance » :

• Ajouter ou retrancher de l’espace,
• Changer la police de caractère ou les styles typographiques,
• Jouer sur les couleurs, les contrastes, les fonds, les textures, etc.
• Augmenter ou diminuer la taille des blocs ou des éléments qu’ils contiennent,
• Utiliser des filets, des bordures ou des cadres,
• Indenter certaines parties du contenu ou décaler les blocs,
• Combiner ces différentes techniques.

… et n’ayez pas peur du blanc.

Pour parvenir à exprimer la distance entre plusieurs ensembles, il ne faut pas avoir peur d’user et d’abuser de l’espace blanc. Il ne coûte pas cher à produire, mais se fait curieusement plus rare à mesure que le talent du Webdesigner diminue. Une composition graphique doit respirer pour vivre ! Inutile donc de disperser les éléments du design comme s’il ne devait plus rester un seul espace vide.

Notez que ce qu’on appelle l’espace blanc n’est pas nécessairement blanc. Il s’agit de n’importe quel espace non rempli, indépendamment de la couleur du fond, fut-ce un dégradé.

Pour regrouper visuellement les élément liés entre eux …

Une profusion d’espace blanc ne garantit pas la lisibilité. Si les éléments d’une adresse postale sont dispersés au quatre coins de la page, il faudra du temps au lecteur pour réunir les informations, à supposer qu’il fasse le lien entre eux.

Au sein d’un même espace, il faudra veiller à utiliser du blanc pour hiérarchiser l’information. Ces micro espaces blancs devront idéalement être en rapport avec les macros espaces blancs qui circulent entre les blocs.

… utilisez les grilles de mise en page …

L’avantage d’utiliser une grille pour structurer une mise en page, c’est de pouvoir compter sur une gamme d’espaces blancs cohérents composés des colonnes et des gouttières. Les grilles permettent de tester rapidement différentes maquettes en laissant plus ou moins de colonnes entre les différentes parties de la page pour exprimer la distance sémantique qui les sépare.

Pour ce faire, il est important que le pas de la grille soit aussi fin que le nombre d’éléments le nécessite. Si les contenus présentent de nombreuses différences et/ou s’il existe des niveaux hiérarchiques en pagaille, il faudra un nombre de colonnes assez conséquent, ou utiliser une partie des éléments cités plus haut pour mettre de l’ordre.

… pour guider le visiteur dans la page …

Le principe de proximité est au service de la lisibilité, elle-même au service de l’action. Le groupement des éléments dans des ensembles, eux-même rassemblés dans des blocs permettra de montrer le chemin à suivre.

… vers le contenu approprié.

Tout les éléments abordés jusqu’ici n’ont finalement qu’un seul but :  permettre au visiteur d’optimiser sa navigation au sein du contenu pour qu’il trouve ce qu’il cherche le plus rapidement possible ou, le cas échéant, qu’il s’aperçoive vite que ce qu’il cherche ne s’y trouve pas. Plus vite il quittera votre site et moins il vous en voudra. Il est même capable de revenir plus tard 😉

Linkographie

En français

• Langage visuel: la Gestalt
• Les principes du design
• Quelques notes sur la conception d’une charte graphique
• Induire un comportement visuel avec la gestalt : principe de proximité

En anglais

• Design Basics: The Proximity Principle
• How C.R.A.P. Is Your Site Design?
• Using Grouping in Web Page Layouts
• Whitespace
• The Language of Design
• The Principles of Design
• Gestalt

Billet inspiré par The Principle of Proximity in Web Design écrit par Louis Lazaris pour Webdesigner Depot.