7 suggerimenti per la creazione di un'intestazione del sito Web che stupisce
Un'intestazione del sito Web è spesso la prima cosa che un utente vede. Può creare o distruggere l'esperienza dell'utente, il tuo marchio e molto altro!
Per aiutare a fidelizzare gli utenti e farli muovere attraverso il design, è necessario creare un'intestazione del sito Web che stupisca. E non solo sulla homepage. Su ogni singola pagina del design. (Ricorda, un numero significativo di utenti non va prima nella tua home page.) Ecco come lo fai.
1. Usa un'immagine mozzafiato
Una grande immagine fa sempre una prima impressione stellare. Sia che tu scelga una foto, un video, un'animazione o qualche altro elemento "artistico", ogni intestazione dovrebbe portare a immagini che gli utenti vorranno guardare.
L'immagine dell'intestazione è molto più di una bella immagine. È la porta di accesso a tutto il contenuto di quella pagina e forse anche al contenuto più profondo nella progettazione.
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 identificativo del marchio
- Pulsante o invito all'azione
- Elementi di navigazione
- Ricerca
Opta per immagini nitide, ad alta risoluzione e che offrono un sacco di contrasto per altri elementi come testo o pulsanti. Alla gente piace vedere i volti, quindi considera di mostrare alle 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 mockup per renderlo più interessante e coinvolgente.
2. Incorporare elementi di navigazione
Non c'è motivo di pensare all'intestazione e alla navigazione come elementi separati; fanno spesso parte dello stesso concetto visivo. Sia che tu ami una navigazione a menu completo o qualcosa che emerge 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 navigatore, considera anche un modello 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 aggirare rapidamente la progettazione del sito.
Gli elementi di navigazione nell'intestazione faranno qualcos'altro che potresti non aspettarti. Poiché questi sono spesso frammenti di testo o icone più piccoli, può aiutare a stabilire la gerarchia all'interno dell'intestazione, mostrando agli utenti come interagire con il design.
3. Creare messaggi distinti
Basta scattare una grande immagine nell'intestazione non è sufficiente. Cosa dice?
Considera come comunica il messaggio dell'intestazione agli utenti.
- Dice loro cosa fare o cosa aspettarsi dal contenuto della pagina?
- Tutti gli elementi comunicano un singolo messaggio unificato che è facile da capire?
- Fa sapere agli utenti 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 sovradimensionata
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 ad attirare l'attenzione sulla parte superiore dello schermo prima che l'utente inizi a leggere altre informazioni.
Mentre i posizionamenti tipografici possono variare, prova a rispettare due posizionamenti di base per la tipografia nell'intestazione.
- Opzione home page con più tipografia o caratteri più drammatici o tipi diversi rispetto ad altre pagine.
- Opzione per tutte le altre pagine con un framework di tipo semplice coerente su tutte le pagine interne.
5. Considera la lettura di schemi
La lettura sui siti Web tende a seguire tre diversi modelli di movimento degli occhi, secondo una ricerca del Nielsen Norman Group. E tutti questi schemi di lettura vengono quindi adattati per tenere conto dell'attività su cui l'utente è concentrato 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 nel design e in particolare nell'intestazione.
Inizialmente, pensa ai modelli di base:
- F-Pattern: gli utenti leggono nella parte superiore, quindi a metà della pagina e infine verticalmente lungo il lato sinistro a forma di F.
- Diagramma di Gutenberg: ci sono quattro zone attive per la lettura, che iniziano con due arresti orizzontali nella parte superiore da sinistra a destra, quindi dall'alto in alto a destra in basso e in fondo. (Forma una forma az.)
- Z-Pattern: l'occhio si sposta avanti e indietro da sinistra a destra e viceversa dall'alto verso il basso del disegno formando più z-pattern.
Posiziona gli elementi, in particolare gli elementi chiave, nelle zone più calde nei modelli di lettura comuni per la massima probabilità di interazione dell'utente. Quindi pensa a dove è più probabile che l'utente guardi in seguito, per un'azione relativa al contenuto digerito.
6. Includi un elemento cliccabile
L'immagine dell'intestazione del tuo sito Web è interattiva? Include elementi cliccabili (o toccabili) per incoraggiare il coinvolgimento degli utenti?
Un'intestazione può essere la posizione perfetta per un pulsante di invito all'azione o semplice azione come un modulo di raccolta dell'indirizzo e-mail. Non esagerare con gli elementi su cui fare clic perché può rimuovere il messaggio generale, ma un semplice elemento a una azione può essere efficace in questa 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 (proprio come la navigazione). Un pulsante del carrello, l'accesso alle informazioni sull'account o un pulsante di contatto sono ottime opzioni da considerare.
7. Usa livelli semplici
Come si raccolgono tutti gli elementi sopra menzionati (o piccoli gruppi di essi) nell'intestazione? Il trucco è semplice stratificazione. La migliore intestazione - un'intestazione che stupisce gli utenti - sembra semplice. Segue le regole della teoria del design e utilizza un elemento dominante per attirare gli utenti e supportare le tecniche di progettazione per aiutarli a raggiungere obiettivi attuabili.
La stratificazione di oggetti è un modo per raggiungere questo obiettivo.
Non solo i semplici livelli ti aiuteranno a creare spazi distinti per ogni elemento, ma forniranno anche attenzione visiva per l'utente. Sapranno da dove cominciare con il design e quali elementi meritano la loro attenzione e quali elementi possono essere scremati.
Non succede sempre con successo nemmeno con un primo tentativo. Revisioni e test multipli sono spesso necessari per creare un gruppo di elementi che collaborano efficacemente e stupiscono 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 si perde il lavoro su intestazioni per pagine interne. Il contenuto delle pagine "interne" può essere altrettanto importante della home page perché molti utenti accedono al design del tuo sito Web grazie alla ricerca, non digitando un URL e seguendo i collegamenti di navigazione come previsto dal team di progettazione.
Pensa a entrambi i tipi di intestazione in modo indipendente e insieme per ottenere armonia nel design, unità e un aspetto visivo che stupisca gli utenti quando arrivano sulla pagina.
