Le principe de proximité dans la conception Web
Récemment, j'ai pris un ancien livre de design que je n'avais pas touché depuis longtemps, et cela me rappelait un principe de conception que beaucoup d'entre nous ont probablement mis en pratique, même inconsciemment, voire pas du tout.
Le livre traite de la conception pour l'impression, mais j'ai pensé que cela ferait un excellent sujet à discuter dans le contexte de la conception de sites Web.
Le principe de proximité exige que les éléments connexes soient regroupés visuellement, créant moins d’encombrement et permettant une disposition plus organisée. Les éléments non liés les uns aux autres doivent être plus éloignés afin de souligner leur manque de relation.
Je discuterai des détails et des manières dont cela peut être mis en œuvre efficacement, mais cette définition devrait suffire à ce que nous discuterons dans cet article.
L'utilisation correcte de la proximité, conjointement avec d'autres principes de conception, a un impact important sur l' expérience utilisateur et, en fin de compte, sur la réussite globale d'un site Web.
Ne craignez pas l'espace blanc
La première étape pour bien mettre en œuvre le principe de proximité consiste à comprendre l’importance de l’espace blanc dans la conception.
Le manque d'espace blanc est un problème courant dans les modèles d'amateur. Le design est un moyen de communiquer des informations, et lorsque les amateurs tentent de transmettre un message à travers le design, leur tendance naturelle est de répartir le contenu de manière uniforme, sans trop réfléchir au potentiel des espaces blancs bien organisés.
L'espace blanc peut affecter le comportement de l'utilisateur autant, sinon plus, que le contenu réel de la page. L'espace blanc guide les yeux de l'utilisateur dans la direction prévue, crée un contraste et crée une impression durable.
Bien que le site Web de W3Avenue ci-dessus contienne une quantité considérable de contenu (avec des articles dans de nombreuses catégories, comme n'importe quel blog de conception) et une série d'annonces dans la barre latérale, il ne submerge pas l'utilisateur visuellement.
La place généreuse dans l'en-tête et les éléments espacés de manière appropriée dans les zones de contenu et de barre latérale contribuent à cet aspect propre et organisé. W3Avenue ne fait rien de particulièrement unique avec son contenu, mais sa conception contribue probablement à la fort trafic il entre dans un courte période de temps .
Donc, ne soyez pas inquiet à propos de l'espace vide dans votre conception. Utiliser correctement les espaces blancs est la première étape dans la mise en œuvre du principe de proximité et, par conséquent, rendre le design plus attrayant.
Éléments liés au groupe visuel
L'espace blanc n'est toutefois qu'une partie de la mise en œuvre de la proximité. Une conception peut avoir beaucoup d'espace blanc, mais si les éléments ne sont pas regroupés correctement , l'espace blanc aura peu d'effet, comme illustré par les deux cartes de visite ci-dessous:
La carte de gauche n'est pas encombrée; il y a des espaces blancs. Mais les éléments ne sont pas regroupés de manière logique, donc l'effet est faible.
Le lecteur est obligé de scanner la carte plusieurs fois. La carte de droite a toutefois un effet visuel plus agréable. Le lecteur doit simplement y jeter un coup d'œil pour prendre en compte les informations (plus à ce sujet plus tard).
Le regroupement des éléments de la carte à droite est également plus logique . Dans le premier ensemble d'éléments, nous voyons le nom de la société en gros caractères avec l'emplacement en dessous. Le deuxième ensemble nous indique comment obtenir des informations sur les services fournis (par exemple, numéro de téléphone et adresse du site Web).
Cet exemple illustre l'importance de la proximité dans la conception d'impression, et une idée similaire peut être utilisée pour les éléments de la conception Web, comme le montre la capture d'écran ci-dessous.
Bien que le site Web d'Arora Designs ne soit ni complexe ni lourd en informations, son utilisation des espaces blancs et la séparation visuelle des éléments groupés sont efficaces. Il convient de noter ici que "espace blanc" ne doit pas nécessairement être blanc; Il peut s'agir de n'importe quel espace vide entre les éléments, quelle que soit la couleur.
Dans le cas d'Arora Designs, bien que l'espace blanc soit coloré, il sert également à séparer visuellement les zones d'en-tête, de navigation et de contenu.
Créer une hiérarchie visuelle
L'utilisation efficace d'espaces blancs et le regroupement d'éléments connexes sont essentiels pour donner à votre site Web une hiérarchie visuelle claire. Bien entendu, l’ architecture et le flux d’informations du site Web constituent la base d’une proximité efficace .
La hiérarchie est véhiculée par la manière dont les éléments sont regroupés et sous-regroupés.
Cette hiérarchie aide l'utilisateur à comprendre où il se trouve et où il souhaite aller et, par conséquent, aide à communiquer le but du site Web. Une liste est un bon exemple d'un élément susceptible de communiquer la hiérarchie visuelle, comme le montre l'image ci-dessous:
En parcourant les deux listes ci-dessus, sans même examiner le contenu, vous verrez que la liste de gauche présente une hiérarchie visuelle claire, montrant les relations entre les éléments (les éléments en retrait sont des sous-catégories des éléments principaux).
Cette hiérarchie ne serait pas possible sans espace blanc (y compris macro et micro espace blanc). La liste de droite est simplement un regroupement aléatoire d'éléments sans relation ni hiérarchie apparente.
La mise en œuvre de ce principe sur un site Web avec quelque chose d'aussi simple qu'une liste HTML est facile. Le défi consiste à utiliser ce principe comme facteur directeur dans la construction du site Web, de la planification à la conception.
Dispositions faciles à numériser et à lire
Le contenu organisé dans une hiérarchie et regroupé de manière logique est plus facile à lire et à analyser .
Les en-têtes, par exemple, devraient permettre à l'utilisateur de numériser en indiquant clairement les points principaux. Inutile de dire que le contenu doit être planifié dès le départ pour refléter une hiérarchie visuelle appropriée; la liste ci-dessus avec les éléments en retrait est un mauvais exemple, car le contenu ne correspond pas à la hiérarchie visuelle.
Un site Web qui utilise la proximité dans son architecture et sa conception ne submerge pas l'utilisateur d'informations.
Ainsi, bien qu'il soit relativement facile de mettre en œuvre les principes de proximité sur des sites Web légers, la proximité est beaucoup plus importante sur les sites Web riches en contenu.
Les sites de nouvelles sont de bonnes études de cas de ce principe. Voici une comparaison de la Los Angeles Times et le Globe and Mail .
Dans l'ensemble, le site Web du LA Times présente un design agréable, principalement en raison du choix des couleurs et de la typographie. Mais il a également un aspect propre et épuré, en particulier dans la section des en-têtes.
Le logo est grand et se distingue, contribuant efficacement à l'image de marque du site. L'objet le plus proche du logo est la barre de navigation horizontale ci-dessous. Comme la barre de navigation est sombre, elle contraste avec le logo.
Les liens de texte au-dessus du logo sont bien rangés, avec beaucoup d'espace entre les deux sections. L'alignement à gauche du contenu de l'en-tête contribue également à l'aspect net.
Chaque bit d'information de l'en-tête LA Times est regroupé avec les éléments associés, à l'exception du logo, qui est le seul. Rien dans l'en-tête ne vous confond ou ne vous demande où il appartient.
Qu'en est-il du site Web du Globe and Mail, illustré ci-dessous?
Le site Web du Globe and Mail comporte une section d'en-tête complexe qui ne parvient pas à appliquer le principe de proximité.
La seule quantité importante d'espace blanc se trouve au centre, à côté du logo, qui ne réalise rien. Deux annonces apparaissent dans l'en-tête, contribuant à l'encombrement. Les annonces peuvent être nécessaires pour des raisons financières, de sorte que les problèmes sont compréhensibles.
Le plus gros problème est la section désordonnée au-dessus de la grande bannière publicitaire. Il n'y a pas de distinction claire entre les éléments de cette section.
Trois lignes verticales en pointillés tentent de séparer la zone en quatre sections, mais le premier séparateur n’a aucun sens. En fait, cette section serait probablement plus attrayante si ces séparateurs en pointillés étaient supprimés.
Les grilles aident à la proximité
Une façon de regrouper des éléments et d'utiliser des espaces blancs de manière appropriée consiste à commencer par une grille .
D'un coup d'œil rapide aux sites Web du LA Times et du Globe and Mail, seul le LA Times semble avoir basé sa conception sur une grille, ou du moins utilisé des principes basés sur la grille au stade de la planification. Le site Web du Globe and Mail montre peu de preuves d'un format de grille.
Une disposition basée sur une grille, avec des tailles de gouttière appropriées, offre beaucoup d'espace entre les sections et, dans de nombreux cas, oblige le concepteur à mettre en œuvre des principes de proximité sans même y penser.
Vous trouverez ci-dessous des captures d'écran de deux sites Web qui ont utilisé le Système de grille 960 . Ils sont tous deux assez simples (c.-à-d. Qu'ils ne contiennent pas beaucoup de contenu, comme les sites d'information mentionnés ci-dessus), mais ils montrent que les grilles donnent de la marge aux éléments de la page.
Utilisateurs principaux sur la bonne voie
Un autre avantage majeur de la proximité est qu’elle aide les utilisateurs à naviguer sur un site Web sans retards ni obstacles inutiles. Lorsque la navigation principale est clairement séparée des autres éléments de la page, elle sera trouvée instantanément et risque moins d'être oubliée.
Une hiérarchie visuelle adéquate par proximité aide les utilisateurs à pénétrer plus profondément dans votre site Web sans se soucier de leur emplacement ou de leur destination.
Ils se sentiront toujours à l'aise et accéderont rapidement et efficacement aux sections les plus importantes de votre site Web.
Les concepteurs de sites Web ayant peu ou pas d’expérience en matière de conception d’imprimés pourraient tirer un grand profit des principes que les concepteurs d’impressions appliquent depuis des années avant le boom du Web.
La proximité n'est pas le seul principe de conception qui aidera un site à être plus utilisable et plus agréable visuellement, mais c'est un facteur important à prendre en compte pour la plupart des raisons que nous venons d'évoquer.
Lectures complémentaires
- Les bases du design: le principe de proximité
- Comment CRAP est la conception de votre site?
- Utilisation du regroupement dans des mises en page Web
Cet article a été écrit exclusivement pour Webdesigner Depot par Louis Lazaris, rédacteur indépendant et développeur web. Louis court Web impressionnant , où il publie des articles et des tutoriels sur la conception de sites Web. Vous pouvez suivre Louis sur Twitter ou entrer en contact avec lui à travers son site web .