L'intestazione di un sito Web è spesso la prima cosa che un utente vede. Può creare o distruggere l'esperienza utente, il tuo marchio e molto altro!
Per aiutare a mantenere gli utenti e mantenerli in movimento attraverso il design, è necessario creare un'intestazione di sito Web che wows. E non solo sulla homepage. Su ogni singola pagina del design. (Ricorda, un numero significativo di utenti non accede prima alla tua home page.) Ecco come lo fai.
1. Utilizzare un'immagine stupenda
Una grande immagine fa sempre una prima impressione stellare. Se si opta per una foto, video, animazione o qualche altra? Arte? elemento, ogni intestazione dovrebbe condurre con immagini che gli utenti vorranno guardare.
L'immagine dell'intestazione è molto più di una bella immagine. È la porta di accesso a tutti i contenuti di quella pagina e forse anche i contenuti più profondi nel design.
Un'immagine da sola è un ottimo punto di partenza, ma devi abbinarla ad altri elementi per sfruttare al massimo il contenuto. Altri elementi che potrebbero apparire in un'intestazione includono:
- Testo o titolo
- Logo o identificatore del marchio
- Pulsante o invito all'azione
- Elementi di navigazione
- Ricerca
Optate per immagini nitide, ad alta risoluzione e che offrono molto contrasto per altri elementi come testo o pulsanti. Le persone amano vedere i volti, quindi considera di mostrare le persone che usano o interagiscono con il tuo prodotto o servizio, se possibile. Vuoi mostrare il tuo ultimo progetto di portfolio? Usa un modello di simulazione per renderlo più interessante e coinvolgente.
2. Incorporare elementi di navigazione
Non c'è motivo per cui devi pensare all'intestazione e alla navigazione come elementi separati; spesso fanno parte dello stesso concetto visivo. Sia che tu ami un menu di navigazione completo o qualcosa che spunta da un'icona di hamburger, gli elementi di navigazione dovrebbero far parte del piano di progettazione dell'intestazione.
E mentre stai pensando all'intestazione e al nav, considera anche un pattern di navigazione appiccicoso. Anche se gli utenti si allontanano dall'intestazione principale, che può essere piccola come una barra di navigazione o grande come una visualizzazione a schermo intero, possono rapidamente aggirare il design del sito.
Gli elementi di navigazione nell'intestazione faranno qualcos'altro che potresti non aspettarti. Poiché si tratta spesso di parti più piccole di testo o icone, può aiutare a stabilire la gerarchia all'interno dell'intestazione, mostrando agli utenti come interagire con il progetto.
3. Crea messaggi distinti
Basta scattare una grande immagine nell'intestazione non è abbastanza. Cosa dice?
Considerare come il messaggio dell'intestazione comunica agli utenti.
- Dice loro cosa fare o cosa aspettarsi dal contenuto della pagina?
- Tutti gli elementi comunicano un messaggio singolo e unificato facile da capire?
- Permette agli utenti di sapere quali azioni intraprendere sulla pagina o dove fare clic su Avanti?
Assicurati di combinare più elementi per creare un effetto complessivo con un singolo messaggio.
4. Prova la tipografia oversize
La tipografia sovradimensionata è un ottimo modo per aggiungere enfasi a un'intestazione. Anche se le parole sono semplici identificatori di posizione, l'uso di caratteri in grassetto può aiutare a disegnare l'occhio nella parte superiore dello schermo prima che l'utente inizi a leggere altre informazioni.
Mentre i posizionamenti della tipografia possono variare, prova ad attenersi a due posizionamenti di base per la tipografia nell'intestazione.
- Opzione di home page con più caratteri tipografici o più drammatici o di tipo diverso rispetto ad altre pagine.
- Opzione Tutte le altre pagine con un tipo di framework semplice che è coerente su tutte le pagine interne.
5. Considerare la lettura di modelli
La lettura dei siti web tende a seguire tre diversi modelli di movimento degli occhi, secondo la ricerca del Nielsen Norman Group. E tutti quelli che leggono i pattern sono poi aggiustati per tenere conto del compito su cui si focalizza l'utente al momento della lettura, che in termini semplici è un raggruppamento di parti correlate nel flusso visivo.
Entrambi gli studi su come gli utenti guardano e digeriscono il contenuto sono importanti perché possono aiutarti a capire come e dove posizionare gli elementi nella progettazione e in particolare nell'intestazione.
Inizialmente, pensa ai modelli di base:
- F-Pattern: gli utenti leggono in alto, poi a metà della pagina e infine verticalmente lungo il lato sinistro in una forma a F.
- Diagramma di Gutenberg: ci sono quattro zone attive per la lettura, a partire da due arresti orizzontali nella parte superiore da sinistra a destra, quindi da in alto a destra in basso a sinistra e in basso. (Forma una forma z.)
- Modello Z: l'occhio si muove avanti e indietro da sinistra a destra e viceversa dall'alto verso il basso del disegno formando più modelli z.
Posiziona gli elementi, in particolare gli elementi chiave, nelle zone più calde nei modelli di lettura comuni per la maggiore probabilità di interazione dell'utente. Quindi pensa a dove l'utente è più probabile che guardi dopo - per un'azione relativa al contenuto appena digerito.
6. Includere un elemento cliccabile
L'immagine dell'intestazione del tuo sito web è interattiva? Include elementi cliccabili (o intercettabili) per incoraggiare il coinvolgimento degli utenti?
Un'intestazione può essere la posizione perfetta per un pulsante di invito all'azione o un'azione semplice come un modulo di raccolta di un indirizzo e-mail. Non esagerare con gli elementi per fare clic perché possono portare via dal messaggio generale, ma un semplice elemento a un'azione singola può essere efficace in quest'area del progetto.
Non sei sicuro di quale elemento dovrebbe includere l'intestazione? Considera un'azione desiderata coerente in tutto il design con un pulsante sempre disponibile (simile alla navigazione). Un pulsante del carrello della spesa, l'accesso alle informazioni sull'account o un pulsante Contattaci sono ottime opzioni da considerare.
7. Usa livelli semplici
Come trascini tutti gli elementi sopra menzionati (o piccoli gruppi di essi) nell'intestazione? Il trucco è semplice stratificazione. L'intestazione migliore, un'intestazione che entusiasma gli utenti, sembra semplice. Segue le regole della teoria del design e utilizza un elemento dominante per invogliare gli utenti e supportare le tecniche di progettazione per aiutarli a raggiungere gli obiettivi perseguibili.
La stratificazione degli oggetti è un modo per ottenere ciò.
Non solo i livelli semplici ti aiuteranno a creare spazi distinti per ogni elemento, ma forniranno anche un focus visivo per l'utente. Sapranno da dove cominciare con il design e quali elementi meritano la loro attenzione e quali elementi possono essere sfogliati.
Nemmeno succede con successo con un primo tentativo. Revisioni e test multipli sono spesso necessari per creare un gruppo di elementi che funzionino insieme efficacemente e stupire gli utenti nella parte superiore di una pagina.
Conclusione
Mentre la creazione di un'intestazione di homepage è qualcosa che è spesso in prima linea nel processo di progettazione, spesso il lavoro sulle intestazioni per le pagine interne viene perso. Il contenuto su? Dentro? le pagine possono essere importanti quanto la home page perché molti utenti raggiungeranno il design del tuo sito web grazie alla ricerca, non digitando un URL e seguendo i link di navigazione come previsto dal team di progettazione.
Pensa a entrambi i tipi di intestazione in modo indipendente e insieme per raggiungere l'armonia del design, l'unità e un elemento visivo che sorprende gli utenti quando atterrano sulla pagina.