# La loi de proximité > La loi de proximité est d'une importance capitale pour les graphistes et UX/UI (+web) designers. On parle de regroupement automatique d'unités en ensembles. Date: 2021-11-29 Authors: Emmanuel Gien Tags: design, lesloisenux, ux --- ## Qu'est-ce que la loi de proximité en design ? La loi de proximité est une des lois de la [Gestalt](https://fr.wikipedia.org/wiki/Psychologie_de_la_forme) (théorie de la forme). Cette loi s’appuie sur la capacité qu’a le cerveau humain à regrouper automatiquement dans un seul et même ensemble les éléments proches les uns des autres. Il n’en fallait pas plus pour que les designers web, graphistes et UX/UI designers s’en emparent afin de mieux hiérarchiser, structurer et clarifier les informations d’une interface web. Cela signifie tout simplement qu’en [UX design](/fr/prestations/ux-design), il faut **réduire l’espace entre des éléments** censés appartenir au même ensemble (et vice-versa) afin que l’utilisateur puisse très rapidement faire la distinction entre les différents groupes.
![](images/la-loi-de-proximite-intro-1024x704.png)
Ici, nous voyons que les groupes de billes sont clairement identifiables car proches les uns des autres
## À quoi sert cette loi de proximité ? L’utilité de cette loi prend tout son sens quand le designer l’utilise lors de la [réalisation d’interfaces](/fr/blog/articles/rex-deroulement-projet-ux-bearstudio). Elle permet de lier **visuellement** des éléments sémantiquement similaires. Ainsi, l’utilisateur pourra **beaucoup plus facilement** scanner les éléments de l’interface. Les objectifs finaux consistent à rendre le contenu de l’interface **plus lisible** et sa consultation plus agréable. Prenons un exemple concret pour comprendre l’utilité de cette loi. Si elle est mal appliquée, elle peut être **rédhibitoire** à l’efficacité d’une interface. Dans cette première image, nous avons une liste de produits dans laquelle **la loi de proximité** n’est pas appliquée.  ![](images/dontux.png) Dans ce grand groupe d’article d’iBanana, il est **difficile** **d’identifier** en un seul coup d'œil les **différents** **groupes** **d'éléments**. Les titres, les images et les prix **se** **mélangent** et rendent le tout **confus**, voire dans certains cas, incompréhensible. L’utilisateur finira par réussir à repérer quel titre renvoi à quelle image, quel prix renvoi à quel titre etc. Néanmoins, cela lui demandera un **effort assez conséquent**. Si toute l’interface a été créée comme ça, il sortira avec un sacré mal de tête ! Tout le but de l’**UX design** est donc de **favoriser** **l’utilisation d’un produit pour l’utilisateur**. Cela passe aussi par la **mise en forme** des éléments qui constituent une **interface**.  ## Comment appliquer la loi de proximité ? Voici la même liste de produits, mais avec une loi de proximité améliorée. Le design est plus aéré, l’utilisation des espaces blancs a été **renforcée**. Cela permet d'agrandir la place au design dans sa **t**otalité et de distinguer les éléments du même groupe. Ainsi, chaque objet de la liste est beaucoup plus identifiable et il est plus agréable de la consulter. ![](images/doux.png) Bien sûr, **la loi de proximité** ne permet pas à elle seule de designer une **interface optimisée** pour l’utilisateur. Il existe de nombreuses autres **règles**, **lois** et **tips** qui permettent de créer de “**bonnes**” interfaces “UX oriented”. Ces éléments feront sûrement l'objet d’autres articles dans le futur. ;) ## Pourquoi la loi de proximité est-elle utile pour les développeurs ? Eh oui, même les développeurs peuvent avoir recours à ce principe d’[UX/UI design](/fr/prestations/ux-design). En effet, la difficulté de retranscrire fidèlement les maquettes en code était l’un de nos **problèmes**. Le schéma classique était le suivant : le designer créait sa **[maquette](/fr/prestations/ux-design)**, son [wireframe](/fr/prestations/ux-design), son composant. Le développeur lui réalisait cet élément en code. Il fallait alors une review design **s**ystématique et nos designers relevaient souvent les mêmes problématiques et erreurs de marges, d’espacement ou autre, le plus souvent liés à la loi de proximité. Il y avait tout une phase d’allers-retours entre développeurs et designers pour que l’élément codé corresponde aux maquettes ou wireframes. En plus de devoir répéter les mêmes litanies (ce qui peut être assez agaçant à force :p), la **quantité** **de temps** passé à répéter ce processus était **monstrueuse**… Nous avons souhaité former nos développeurs ([front](/fr/prestations/developpement-web) et [back](/fr/prestations/developpement-web)) à ces **principes** afin de les **sensibiliser** aux problématiques que les UX/UI designers rencontrent dans la **création** **de wireframes** et autres **maquettes**. En effet, le **concept** de **loi de proximité** étant assez trivial et **accessible** **à tout le monde**, il permettra aux développeurs de mieux identifier tous les petits **problèmes** d’interface et de faire moins **d’erreurs** lors du développement des éléments qui composent ces dernières.  ## Quelques mots pour finir... Continuez de nous suivre pour ne pas louper les prochains articles sur **les autres lois de la Gestalt** et autres sujets design. Ces sujets sont facilement compréhensible et accessible à tous pour améliorer vos connaissances et compétences sur le sujet.  On vous conseille [l'article de Maxime sur le branding identity](/fr/blog/articles/creer-identite-marque) pour apprendre les bases de la création d'une identité de marque ! Merci d’avoir lu cet article jusqu'au bout, j'espère qu’il vous aura plu ;)