7 conseils pour créer un en-tête de site Web qui impressionne
Un en-tête de site Web est souvent la première chose qu'un utilisateur voit. Cela peut faire ou défaire l'expérience utilisateur, votre image de marque et bien plus encore!
Pour aider à fidéliser les utilisateurs et à les faire avancer dans la conception, vous devez créer un en-tête de site Web impressionnant. Et pas seulement sur la page d'accueil. Sur chaque page unique du design. (N'oubliez pas qu'un nombre important d'utilisateurs ne se rendent pas d'abord sur votre page d'accueil.) Voici comment procéder.
1. Utilisez une superbe image
Une grande image fait toujours une première impression stellaire. Que vous optiez pour une photo, une vidéo, une animation ou un autre élément «artistique», chaque en-tête doit être accompagné d'images que les utilisateurs voudront regarder.
L'image d'en-tête est plus qu'une simple image. C'est la passerelle vers tout le contenu de cette page, et peut-être même plus profondément dans la conception.
Une image seule est un excellent point de départ, mais vous devez la coupler avec d'autres éléments pour tirer le meilleur parti du contenu. D'autres éléments qui peuvent apparaître dans un en-tête incluent:
- Texte ou titre
- Logo ou identifiant de marque
- Bouton ou appel à l'action
- Éléments de navigation
- Chercher
Optez pour des images nettes, de haute résolution et offrant beaucoup de contraste pour d'autres éléments tels que du texte ou des boutons. Les gens aiment voir des visages, alors pensez à montrer aux gens 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 engageant.
2. Intégrer des éléments de navigation
Il n'y a aucune raison de considérer 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 une navigation de menu complète ou quelque chose qui ressort 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 pensez à l'en-tête et à la navigation, envisagez également un modèle de navigation collant. Même si les utilisateurs s'éloignent de l'en-tête principal - qui peut être aussi petit qu'une barre de navigation ou aussi grand qu'un affichage plein écran - ils peuvent rapidement contourner la conception du site.
Les éléments de navigation dans l'en-tête feront autre chose que vous ne pourriez pas attendre. Comme 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, montrant aux utilisateurs comment interagir avec la conception.
3. Créez une messagerie distincte
Il ne suffit pas de faire apparaître une grande image dans l'en-tête. Ça dit quoi?
Considérez comment le message de l'en-tête communique aux utilisateurs.
- Est-ce que cela leur dit 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 une typographie surdimensionnée
La typographie surdimensionnée est un excellent moyen d'ajouter de l'emphase à un en-tête. Même si les mots sont de simples identifiants d'emplacement, l'utilisation de caractères gras peut aider à attirer l'œil vers le haut de l'écran avant que l'utilisateur ne commence à lire d'autres informations.
Bien que les emplacements de typographie 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 lettrage plus dramatique ou de type différent que sur les autres pages.
- Option toutes les autres pages avec un cadre de type simple qui est cohérent sur toutes les pages intérieures.
5. Envisagez des schémas de lecture
Selon les recherches du Nielsen Norman Group, la lecture sur les sites Web a tendance à suivre trois modèles différents de mouvements oculaires. Et tous ces schémas 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, en termes simples, est un regroupement de parties liées dans le flux visuel.
Les deux études sur la façon dont les utilisateurs regardent et assimilent le contenu sont importantes car elles peuvent vous aider à comprendre comment et où placer les éléments dans la conception et en particulier dans l'en-tête.
Dans un premier temps, réfléchissez aux schémas de base:
- Motif F: les utilisateurs lisent en haut, puis à mi-chemin sur la page et enfin verticalement sur le côté gauche en forme de F.
- Diagramme de Gutenberg: Il y a quatre zones actives pour la lecture, en commençant par deux arrêts horizontaux en haut de gauche à droite, puis en haut à droite en bas à gauche et en bas. (Forme une forme az.)
- Motif en Z: l'œil se déplace d'avant en arrière de gauche à droite et en arrière de haut en bas du motif pour former plusieurs motifs en Z.
Placez les éléments - en particulier les éléments clés - dans les zones les plus chaudes des schémas de lecture communs pour la plus forte probabilité d'interaction avec l'utilisateur. Réfléchissez ensuite à l'endroit où l'utilisateur est le plus susceptible de regarder ensuite - pour une action liée au contenu qui vient d'être digéré.
6. Inclure un élément cliquable
L'image d'en-tête de votre site Web est-elle interactive? Comprend-il des éléments cliquables (ou exploitables) pour encourager l'engagement des utilisateurs?
Un en-tête peut être l'emplacement idéal pour un bouton d'appel à l'action ou une action simple telle qu'un formulaire de collecte d'adresse e-mail. N'allez pas trop loin avec des éléments sur lesquels cliquer, car cela peut nuire au message global, mais un simple élément à une action peut être efficace dans cette zone de la conception.
Vous ne savez pas quel élément l'en-tête doit inclure? Considérez une action souhaitée qui est cohérente tout au long de la conception avec un bouton qui est toujours disponible (un peu comme la navigation). Un bouton de panier, un accès aux informations de compte ou un bouton Contactez-nous sont d'excellentes options à considérer.
7. Utilisez des calques simples
Comment rassemblez-vous tous les éléments mentionnés ci-dessus (ou de petits groupes d'entre eux) dans l'en-tête? L'astuce est la superposition simple. Le meilleur en-tête - un en-tête qui impressionne les utilisateurs - semble simple. Il suit les règles de la théorie de la conception et utilise un élément dominant pour attirer les utilisateurs et soutenir les techniques de conception pour les aider à atteindre des objectifs réalisables.
La superposition d'objets est un moyen d'y parvenir.
Non seulement les calques simples vous aideront à créer des espaces distincts pour chaque élément, mais ils fourniront également une concentration visuelle à l'utilisateur. Ils sauront par où commencer la conception et quels éléments méritent leur attention et quels éléments peuvent être écrémés.
Cela ne se produit pas toujours avec succès avec une première tentative non plus. Plusieurs révisions et tests sont souvent nécessaires pour créer un groupe d'éléments qui fonctionnent ensemble efficacement et impressionnent les utilisateurs en haut d'une page.
Conclusion
Bien que la création d'un en-tête de page d'accueil soit quelque chose qui est souvent au premier plan du processus de conception, le travail sur les en-têtes des pages intérieures se perd souvent dans le processus. Le contenu des pages «internes» peut être tout aussi important que la page d'accueil, car de nombreux utilisateurs accéderont à la conception de votre site Web grâce à la recherche, pas en tapant une URL et en suivant les liens de navigation envisagés par l'équipe de conception.
Pensez aux deux types d'en-tête indépendamment et ensemble pour atteindre l'harmonie du design, l'unité et un visuel qui épate les utilisateurs lorsqu'ils atterrissent sur la page.
