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.

Articles sur le même sujet

• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Quelques notes — Programme de formation HTML & CSS
• Webdesign — L'essence précède l'existence (Wireframe, Mockup et Mood Board)
• Quelques notes sur la balise h1 avec HTML5
• Quel tarif pour un thème WordPress ?

En typographie, on appelle ça la gestion des veuves et des orphelines. En général ces termes s’appliquent plutôt à la première ligne d’un paragraphe qui se retrouve seule à la fin d’une page (opheline) ou la dernière ligne d’un paragraphe qui se retrouve seule en haut d’une page (veuve) cf. Wikipedia.

Le site Learning jQuery propose trois méthodes pour appliquer un espace insécable   entre les deux derniers mots d’un titre pour les solidariser sur la deuxième ligne afin d’éviter d’avoir un titre disgracieux comme celui que vous avez sous les yeux :D

Parmi les trois solutions proposées, j’ai choisi celle qui reposait sur le traitement des chaines de caractères string, mais rien ne vous empêche de choisir la méthode utilisant les tableaux (Array) ou les Expressions régulières.

$(document).ready(function() {
    var h2all, h2a, h2b;
        $('h2 a').each(function() {
        h2all = $(this).text();
        h2a = h2all.slice(0, h2all.lastIndexOf(' '));
        h2b = ' ' + h2all.slice(h2all.lastIndexOf(' ')+1);
         $(this).html(h2a + h2b);
     });
});

La fonction s’applique uniquement aux liens contenus dans la balise de titre de niveau H2 sur l’ensemble de la page.

MAJ : Pour intégrer cette fonction dans WordPress, voici un fichier .zip à décompresser et à placer dans le dossier plugins de votre thème.

Articles sur le même sujet

• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• 139 ressources Javascript et jQuery
• jQuery Splitter — divisez votre contenu en plusieurs parties redimensionnables
• Mise-à-jour de la grosse grosse liste pour webdesigner
• 1000 ressources pour le développement web et WordPress