Un en-tête de site Web est souvent la première chose que voit un utilisateur. Cela peut faire ou défaire l'expérience utilisateur, votre image de marque et bien plus encore!
Pour aider à conserver les utilisateurs et à les maintenir en mouvement dans la conception, vous devez créer un en-tête de site Web époustouflant. Et pas seulement sur la page d'accueil. Sur chaque page de la conception. (Rappelez-vous qu'un nombre important d'utilisateurs ne vont pas d'abord sur votre page d'accueil.) Voici comment procéder.
1. Utilisez une image étonnante
Une bonne image fait toujours une excellente première impression. Que vous optiez pour une photo, une vidéo, une animation ou un autre? Art? élément, chaque en-tête doit être associé à une imagerie que les utilisateurs voudront examiner.
L'image d'en-tête est plus qu'une belle image. C'est la passerelle vers tout le contenu de cette page, et peut-être même plus en profondeur dans la conception.
Une image seule est un bon point de départ, mais vous devez la coupler avec d'autres éléments pour tirer le meilleur parti du contenu. Les autres éléments pouvant figurer dans un en-tête incluent:
- Texte ou titre
- Identifiant de logo ou de marque
- Bouton ou appel à l'action
- Éléments de navigation
- Chercher
Optez pour des images nettes, à haute résolution et offrant beaucoup de contraste pour d'autres éléments tels que le texte ou les boutons. Les gens adorent voir les visages. Vous devriez donc montrer aux personnes qui utilisent ou interagissent avec votre produit ou service si possible. Vous voulez montrer votre dernier projet de portefeuille? Utilisez un modèle de maquette pour le rendre plus intéressant et plus engageant.
2. Incorporer des éléments de navigation
Il n'y a aucune raison pour que vous considériez l'en-tête et la navigation comme des éléments séparés; ils font souvent partie du même concept visuel. Que vous aimiez la navigation dans un menu complet ou quelque chose qui sortait d'une icône de hamburger, les éléments de navigation devraient faire partie du plan de conception de l'en-tête.
Et pendant que vous réfléchissez à l'en-tête et à la navigation, pensez également à un modèle de navigation collant. Même si les utilisateurs s'éloignent de l'en-tête principal, qui peut être une petite barre de navigation ou un affichage plein écran, ils peuvent rapidement se déplacer dans la conception du site.
Les éléments de navigation dans l'en-tête feront autre chose que vous ne pourriez pas vous attendre. Étant donné qu'il s'agit souvent de petits morceaux de texte ou d'icônes, cela peut aider à établir une hiérarchie dans l'en-tête, en montrant aux utilisateurs comment interagir avec la conception.
3. Créer une messagerie distincte
Il ne suffit pas de faire apparaître une belle image dans l'en-tête. Ça dit quoi?
Considérez comment le message de l'en-tête communique avec les utilisateurs.
- Cela leur dit-il quoi faire ou à quoi s'attendre du contenu de la page?
- Tous les éléments communiquent-ils un message unique et unifié, facile à comprendre?
- Est-ce que cela permet aux utilisateurs de savoir quelle action entreprendre sur la page ou où cliquer ensuite?
Assurez-vous de combiner plusieurs éléments pour créer un effet global avec un seul message.
4. Essayez la typographie surdimensionnée
Une typographie surdimensionnée est un excellent moyen de mettre en valeur un en-tête. Même si les mots sont de simples identificateurs de lieu, l’utilisation de caractères gras peut attirer l’attention en haut de l’écran avant que l’utilisateur ne commence à lire d’autres informations.
Bien que les emplacements typographiques puissent varier, essayez de vous en tenir à deux emplacements de base pour la typographie dans l'en-tête.
- Option de page d'accueil avec plus de typographie ou de lettres plus dramatiques ou de types différents de ceux des autres pages.
- Toutes les autres options de page avec un cadre de type simple qui est cohérent sur toutes les pages intérieures.
5. Considérez les modèles de lecture
Selon une étude du groupe Nielsen Norman, la lecture sur des sites Web a tendance à suivre trois types de mouvements oculaires différents. Et tous ces modèles de lecture sont ensuite ajustés pour tenir compte de la tâche sur laquelle l'utilisateur se concentre au moment de la lecture, qui consiste en un regroupement de parties liées dans le flux visuel.
Les deux études sur la manière dont les utilisateurs voient et digèrent le contenu sont importantes car elles peuvent vous aider à comprendre comment et où placer des éléments dans la conception et en particulier dans l'en-tête.
Dans un premier temps, réfléchissez aux modèles de base:
- Motif en F: les utilisateurs lisent en haut, puis à mi-chemin sur la page et enfin verticalement vers le bas à gauche dans une forme de F.
- Diagramme de Gutenberg: Il y a quatre zones actives pour la lecture, commençant par deux arrêts horizontaux en haut de gauche à droite, puis en haut à droite et en bas à gauche. (Forme une forme z.)
- Motif en Z: l'œil se déplace de gauche à droite et de haut en bas du dessin pour former plusieurs motifs en z.
Placez les éléments - en particulier les éléments clés - dans les zones les plus chaudes des modes de lecture courants afin d'obtenir la plus forte probabilité d'interaction de l'utilisateur. Pensez ensuite à l’endroit où l’utilisateur sera le plus susceptible de rechercher une action liée au contenu qui vient d’être digéré.
6. Inclure un élément cliquable
Votre image d'en-tête de site Web est-elle interactive? Inclut-il des éléments cliquables (ou paramétrables) pour encourager l'engagement de l'utilisateur?
Un en-tête peut être l'emplacement idéal pour un bouton d'appel à l'action ou pour une action simple, telle qu'un formulaire de collecte d'adresses électroniques. N'exagérez pas avec des éléments sur lesquels cliquer, car cela peut nuire au message dans son ensemble, mais un simple élément à action unique peut être efficace dans cette zone de la conception.
Vous ne savez pas quel élément l'en-tête doit inclure? Envisagez une action souhaitée qui soit cohérente tout au long de la conception avec un bouton toujours disponible (un peu comme la navigation). Un bouton du panier d'achat, l'accès aux informations sur le compte ou un bouton nous contacter sont d'excellentes options à considérer.
7. Utilisez des couches simples
Comment rassemblez-vous tous les éléments mentionnés ci-dessus (ou de petits groupes ensemble) dans l'en-tête? L'astuce est la superposition simple. Le meilleur en-tête - un en-tête qui séduit les utilisateurs - a l'air simple. Il suit les règles de la théorie de la conception et utilise un élément dominant pour séduire les utilisateurs et des techniques de conception complémentaires pour les aider à atteindre des objectifs concrets.
La superposition d'objets est un moyen d'y parvenir.
Non seulement les couches simples vous aideront à créer des espaces distincts pour chaque élément, mais elles fourniront également un focus visuel à l'utilisateur. Ils sauront par où commencer la conception, quels éléments méritent leur attention et quels éléments peuvent être survolés.
Cela ne se passe pas toujours toujours bien avec une première tentative. Plusieurs révisions et tests sont souvent nécessaires pour créer un groupe d’éléments qui fonctionnent efficacement ensemble et épateront les utilisateurs en haut de page.
Conclusion
La création d'un en-tête de page d'accueil est souvent à l'avant-garde du processus de conception, mais le travail sur les en-têtes des pages intérieures se perd souvent. Le contenu sur? À l'intérieur? les pages peuvent être tout aussi importantes que la page d'accueil car de nombreux utilisateurs accèdent à la conception de votre site Web grâce à la recherche, et non en saisissant une URL et en suivant les liens de navigation tels qu'envisagés par l'équipe de conception.
Pensez à la fois indépendamment et conjointement aux deux types d'en-tête afin de créer une harmonie de conception, une unité et un visuel qui impressionne les utilisateurs lorsqu'ils arrivent sur la page.