En UX/UI design, l’expérience utilisateur prime et une structure cohérente et lisible de vos contenus est indispensable. Elle va fluidifier la lecture et concentrer le regard de l’internaute sur les informations importantes.

Pour concevoir des pages structurées, les séparateurs de contenu sont donc des éléments indispensables.

On vous explique comment utiliser les séparateurs de section pour rendre votre interface agréable à l’œil !

Les séparateurs de section traditionnels

Les lignes horizontales et verticales font partie des séparateurs de section les plus courants. Elles permettent de diviser efficacement les contenus denses. Pourtant, ces séparateurs de contenu peuvent vite surcharger votre interface s’ils ne sont pas employés avec parcimonie…

Les lignes horizontales

Ni trop épaisse, ni trop fine, la taille parfaite d’une ligne horizontale discrète et efficace est de 1 pixel. Elle doit se fondre dans le décor, n’oubliez pas que son but est de séparer vos contenus, pas de faire partie intégrante de vos éléments visuels.

Pour une structure équilibrée, la ligne horizontale va, soit correspondre à la largeur de votre contenu, comme sur les deux exemples suivants :

Soit se fondre jusqu’aux extrémités de la page, on parle alors de diviseur de section à fond perdu, comme ici :

Les lignes verticales

Tout aussi efficaces que les lignes horizontales, les lignes verticales vont vous permettre de séparer des blocs de contenus côte à côte.

Vous pouvez également agrémenter votre séparateur vertical d’un petit mot explicatif pour couper le côté rigide de votre ligne.

Des séparateurs de section plus modernes

Bien que les lignes restent des éléments de séparation efficaces, elles peuvent alourdir un contenu et ont un côté un peu désuet. Pour des interfaces au design plus moderne, privilégiez des séparateurs de section qui donnent un aspect plus fluide à votre contenu.

Jouez avec les espaces blancs

Souvent délaissés, les espaces blancs sont pourtant essentiels en UX/UI design. Ils ont l’avantage de permettre à l’œil de se reposer et surtout aérer vos contenus, donc de les séparer !

Jouez avec les espaces blancs pour démarquer vos différents éléments et désencombrer votre interface pour une meilleure lisibilité.

Voyez dans cet exemple comment le designer a travaillé les espaces blancs, les différentes sections sont parfaitement démarquées, l’ensemble est fluide et agréable à regarder.

Misez sur le contraste des couleurs

Le contraste des couleurs est un élément puissant pour séparer vos différentes sections, mais attention à l’utiliser habilement !

Premièrement, le contraste doit amener de la clarté pour que l’utilisateur puisse identifier rapidement le contenu important. Voici une parfaite illustration d’un contraste bien pensé, avec des sections bien définies :

Deuxièmement, les couleurs doivent respecter votre charte graphique si vous voulez donner de la cohérence à votre interface. Ne perdez pas l’internaute dans une multitude de couleurs, restez sobre.

Les couleurs sont très souvent utilisées pour séparer les menus sur les interfaces mobiles, le contraste aide à la navigation en séparant efficacement les sections comme sur l’exemple ci-dessous :

Encore un exemple d’une bonne utilisation du contraste des couleurs comme séparateur de section, avec une mise en évidence du CTA intelligente.

Jonglez avec les ombres et les volumes

Les ombres et les volumes vont donner une profondeur à votre interface tout en remplissant leur rôle de séparateurs de section.

L’application Calendrier de Google en est un parfait exemple, il jongle avec les contrastes et les ombres sans avoir recours aux lignes :

Les ombres portées, comme sur l’exemple ci-dessous, donnent un effet d’élévation visuelle et créent une sensation de profondeur. Le résultat est visuellement efficace, les sections sont parfaitement séparées et l’ensemble est harmonieux.

Adoptez les formes arrondies

Pourquoi vouloir utiliser des séparateurs de section rectilignes ? Les formes arrondies sont très tendance, notamment dans des univers plutôt froid et rigide comme la finance.

Du rose et des formes imparfaites pour séparer le contenu d’une application mobile bancaire… c’est original et on pourrait même finir par aimer faire ses comptes !

Encore des courbes pour cette application bien-être, les différentes sections sont bien délimitées et l’ensemble invite à la douceur de vivre.

Vous l’aurez compris, le mot d’ordre est de structurer ses sections tout en aérant le contenu. Créer une interface cohérente est un travail minutieux et exigeant. Des graphistes professionnels sauront utiliser les séparateurs de section pour mettre votre site en valeur et améliorer l’expérience utilisateur, pensez-y !