La hero section, en UX/UI design, est cruciale tout simplement parce que c’est elle qui créé souvent la première impression. Placée en haut de la page d'accueil, elle capte instantanément l'attention des utilisateurs. Du point de vue de l'UX, elle doit clairement communiquer la proposition de valeur du site, facilitant la compréhension du contenu. Du côté de l'UI, la cohérence visuelle renforce l'identité de la marque, établissant une connexion émotionnelle.

La hero section est un espace clé pour les appels à l'action (CTA), guidant les utilisateurs vers des actions spécifiques.  En résumé, la hero section joue un rôle majeur en créant une expérience utilisateur mémorable et engageante dès les premiers instants sur le site. Voici quelques exemples.

La classique

Elle se compose de deux parties : le texte ur la gauche de l’écran et l’image (ou les images) sur la droite, ou inversement (même si cette inversion n’est pas optimale car on lit de gauche à droite ; placer l’image en premier aurait donc tendance à orienter le regard de l’utilisateur vers elle plutôt que vers le message). Sur mobile, on passera sur un affichage haut (texte) / bas (image). 

Pour immerger au mieux le visiteur dans l’univers de la marque, il ne faut pass hésiter à ajuster la taille de l’image à la taille de l’écran (aka. viewport).

L’horizontale

Voilà une mise en page plus créative que l’on voit de plus en plus ces derniers temps. Au-delà du fait qu’elle soit donc très tendance, elle est particulièrement intéressante si l’on se réfère au parcours de lecture très logique qu’elle suggère (gardons en tête que les textes sont généralement plus signifiants que les images sujettes à interprétation) : on commence par le titre, puis on découvre l’accroche et le(ss) CTA avant de voir le(s) image(s).

En jouant sur la taille du visuel, on peut aussi entraîner le visiteur dans la découverte du reste de la page en l’incitant au scroll. Là encore, on peut inverser l’ordre des éléments en plaçant la partie visuelle en haut de la zone.

L’excentrique

On qualifie cette mise en page d’« excentrique » parce qu’elle s’appuie sur une composition originale sur 3 colonnes. Elle n’en est pas moins intéressante, notamment quand on a besoin de dire beaucoup de choses dans cette zone puisqu’elle introduit un 2nd niveau de texte : les infos les plus importantes peuvent être placées sur la gauche et les infos complémentaires sur la droite. Attention toutefois à ne pas surcharger

La tendance

C’est une version que l’on voit apparaître depuis quelques temps et qui consiste à injecter des éléments visuels dans le texte pour appuyer le message. Elle est cependant complexe à décliner en version mobile.

La mise en page centrée

Ce n’est clairement pas celle que l’on va recommander parce que centré du contenu va complexifier la mise ne plage et le parcours de lecture (avec des éléments éparpillés sur tou l’écran).

Mais elle présente l’avantage d’être facilement adaptable sur mobile Et elle incite au scroll en positionnant des éléments sous la ligne de flottaison. N’oublions pas une alternative, plus intéressante visuellement, avec le texte centré, entouré d’images ou éléments graphiques sur sa gauche et sa droite

La version « old school »

Superposer texte et image (voire un background vidéo) était très utilisé il y a quelques années, dans les 2010s notamment (quand on crut comprendre que les capacités de la bande passante autorisaient les images plein écran). Aujourd’hui, elle donne un aspect un peu daté à un site. Elle est d’autant moins recommandée qu’elle pose des problèmes de lisibilité 

Si vous ne deviez retenir que 3 choses…

1. Importance de la hero section
La hero section est essentielle pour la première impression, combinant la proposition de valeur et l'identité visuelle de la marque pour captiver immédiatement les utilisateurs et établir une connexion émotionnelle.

2. Diversité des mises en page
Les configurations de la hero section varient, incluant la classique (texte à gauche, image à droite), l’horizontale (favorisant la lecture logique et le scroll), et l’excentrique (composition originale en trois colonnes), chacune répondant à différents besoins en termes de design et d'engagement utilisateur.

3. Challenges de la conception adaptative
Alors que certaines mises en page comme la centrée sont facilement adaptables sur mobile, d'autres, comme la tendance qui intègre des éléments visuels dans le texte, peuvent s'avérer complexes, soulignant l'importance de la flexibilité et de l'adaptabilité dans le design responsive.