Si votre site Web était une maison, votre en-tête serait la pelouse. C’est la première chose que les utilisateurs voient, et cela dicte s’ils continuent à conduire ou s’arrêtent pour jeter un coup d’œil à la maison. Il peut être tentant de la bourrer de cloches et de sifflets.
Un en-tête peut accomplir les tâches suivantes :
Affichez l’identité de la marque, y compris les photos, les slogans, les logos et les couleurs. Si la marque a un élément visuel, l’en-tête peut l’afficher.
Champs d’interaction pour les options de recherche, d’abonnement et/ou de langue.
Champs d’appel à l’action (c’est-à-dire un bouton indiquant « essayer » ou « acheter »).
Liens de navigation de base.
Liens de réseaux sociaux.
Mais la capacité est-elle suffisante pour justifier de remplir toutes les fonctions ? Non. Si tous les éléments disponibles d’un en-tête sont utilisés, la qualité de l’expérience utilisateur (UX) se dissoudra. Les en-têtes doivent être faciles d’accès et plus faciles à déchiffrer – rappelez-vous, c’est la pelouse du site Web. Si la pelouse était couverte d’arbustes du trottoir à la porte, elle serait inaccessible. De la même manière, un en-tête encombré signale que la navigation et le contenu seront difficiles à atteindre depuis leur emplacement actuel.
Aspects de conception d’en-tête
La définition des fonctions qu’un en-tête doit remplir variera d’un site à l’autre. Si l’objectif du site est de fournir des informations sur un produit, un champ CTA et l’identification de la marque seraient des priorités plus élevées que de relier les réseaux sociaux. Mais si le site était consacré à présenter le travail d’une agence de marketing, les liens vers les réseaux sociaux auraient une priorité bien plus élevée que dans le premier cas.
Cependant, certaines constantes doivent être prises en compte pour la conception de l’en-tête. La plupart des sites Web souhaitent que les utilisateurs s’engagent et explorent le contenu. L’un des aspects les plus importants de la conception de l’en-tête est la façon dont il facilite la navigation sur le site.
Options de navigation
L’option la plus populaire pour fournir une navigation dans l’en-tête est peut-être le bouton hamburger (affiché sous la forme ☰ ). Ce bouton, parfois appelé bouton pancake ou hotdog pour son apparence en couches, présente deux avantages par rapport aux autres styles de navigation.
Le premier avantage est qu’il permet au concepteur d’afficher facilement un menu complet à partir de l’en-tête sans afficher des chemins compliqués, comme dans le style de navigation classique. Au lieu d’afficher une hiérarchie textuelle (c’est-à-dire accueil > galerie > chats > gifs), les utilisateurs peuvent utiliser une hiérarchie visuelle pour accéder à la page de fin qu’ils souhaitent en moins de clics.
Le deuxième avantage, et probablement la raison pour laquelle le menu hamburger abrite autant de coins en haut à gauche, est qu’il est hautement compatible avec l’affichage mobile. Ces menus compressés permettent aux utilisateurs mobiles d’apprécier le style et le contenu d’un en-tête sans que des quantités importantes d’espace à l’écran ne soient occupées par le volet de navigation.
Typographie
Une typographie propre et intelligente est la moitié de la bataille visuelle pour un en-tête. Le texte doit être visuellement distinct sans perdre en lisibilité. Si la police de caractères d’un en-tête est trop stylisée, cela peut nuire à la crédibilité d’un site et décourager les utilisateurs de poursuivre leur lecture. En revanche, si la police est tellement générique qu’elle en est banale, ce qu’elle gagne en lisibilité peut le perdre en intérêt.
Mais dans la bataille de la forme contre la fonction, la typographie privilégiera toujours la fonction. Il est plus important que le texte soit lisible que pour établir l’identité de la marque à travers la police de caractères.
Bien sûr, dans une situation idéale, la police de caractères peut accomplir en même temps la marque et la lisibilité . Mais en cas de doute, concentrez-vous sur l’acuité visuelle avant toutes les autres facettes de la typographie des en-têtes.
Illustrations et photos
Il fut un temps où un en-tête était défini comme l’image statique derrière la navigation d’un site. Bien qu’un en-tête puisse toujours être défini de cette façon, l’utilisation de l’imagerie a considérablement changé ces dernières années. Les illustrations sont plus populaires que jamais pour les conceptions de sites Web et peuvent offrir le bon niveau d’abstraction pour améliorer l’esthétique sans diminuer la lisibilité.
Les photos et les illustrations utilisées sur l’en-tête doivent être suffisamment grandes pour accueillir les écrans les plus larges tout en conservant un rapport d’aspect permettant de réduire au plus petit d’entre eux.
Styles d’en-tête tendance
Ces derniers temps, deux styles d’en-tête ont occupé le devant de la scène dans les tendances de conception de sites Web : Hero et video. Les deux tendances ont des avantages et des inconvénients à utiliser. En fin de compte, le style d’en-tête (le cas échéant) idéal pour un site Web sera déterminé par la recherche des utilisateurs et les données démographiques cibles.
La conception de l’en-tête du héros présente une grande image, souvent la vue totale ou presque totale de l’espace au-dessus du défilement qu’un utilisateur voit, avec des éléments de navigation superposés. À condition qu’il s’agisse d’un fichier image standard, ces en-têtes sont faciles à charger pour les utilisateurs et se traduisent souvent bien sur un affichage mobile. Pour les sites Web marchands, les en-têtes de héros peuvent faire forte impression en présentant des produits phares derrière la navigation et en encourageant les utilisateurs à approfondir leurs recherches.
L’inconvénient d’un style d’en-tête de héros est que l’image choisie définit la première impression de l’utilisateur : s’il s’agit de la mauvaise image ou d’une photo d’archive, il se peut qu’elle ne laisse pas une impression positive ou aucune impression du tout ; les sites Web ont rarement la chance d’en faire une seconde. Si vous choisissez d’incorporer la conception de l’en-tête du héros, consacrez plus de temps à la sélection et au test des images.
Vidéo
Les en-têtes vidéo, qui font généralement partie d’une mise en page de héros, sont une nouvelle tendance passionnante dans la conception de sites Web. Ces en-têtes permettent aux concepteurs de sites Web d’afficher des clips vidéo qui peuvent faire une impression saisissante et garder les utilisateurs intrigués plus longtemps que les images statiques. Cependant, cette tendance est une émergence relativement récente pour une raison : les vidéos doivent être d’une qualité d’au moins 720p.
La haute définition se traduit par des temps de chargement plus longs. Sur un ordinateur de bureau avec une connexion Internet haut débit, ce n’est généralement pas un problème, mais les utilisateurs mobiles auront des problèmes pour charger et lire des vidéos quel que soit le système d’exploitation de leur téléphone.
Si votre site Web utilise un en-tête vidéo, de style héros ou non, désactivez-le pour les utilisateurs mobiles. Ils apprécieront.
Affiner la conception de votre en-tête
Déterminer quelles cloches inclure dans votre en-tête et quels sifflets couper peut être un long processus, mais cela se résume à une question importante :
« Quel est le but de ce contenu ? »
Lorsque vous affinez ce que vous voulez que votre site Web fasse, dise et signifie pour les utilisateurs, le choix des attributs d’en-tête viendra naturellement.
Rappelez-vous, ce n’est pas la forme contre la fonction. C’est la forme comme fonction.
Si vous souhaitez que nous vous aidions dans cette tâche importante, n’hésitez pas à nous contacter
