Non tutti i footer dei siti Web sono resi uguali. Sebbene il footer design non sia una parte sexy del processo di web design, un ottimo footer può aiutare gli utenti a trovare informazioni, contattarti e interagire meglio con un sito web. Ecco come si progetta uno che è funzionale e bello.
Un grande footer può anche aiutare a organizzare le informazioni e rendere la navigazione in un sito Web complicato che è molto più semplice - pensa al massiccio footer multilivello sul sito web di Amazon.
Il trucco per un grande footer è l'organizzazione dei contenuti. Una volta individuato il comportamento del piè di pagina che deve aiutare gli utenti, è più semplice progettare un elemento di fondo alla pagina di cui essere orgogliosi. Diamo un'occhiata ai suggerimenti per la progettazione di piè di pagina.
1. Dagli uno scopo
Prima di poter effettivamente progettare un footer di un sito Web di grandi dimensioni, decidere in che modo gli utenti dovrebbero effettivamente utilizzarlo. Un buon footer design non è un luogo in cui scaricare tutti i link e le informazioni che non sai cosa fare. (Anche se molti siti web lo usano in questo modo.)
Un buon design del footer ha uno scopo intenzionale, proprio come ogni altra parte del design.
Gli usi comuni del piè di pagina includono:
- Sitemap o elenco delle pagine / link più popolari
- Contatto o altro modulo di invio
- Hub dei social media con anteprime e collegamenti a account social
- Invito all'azione o ultima possibilità di agire
- Mappa per mostrare la tua posizione (importante per le imprese di mattoni e malta o ristoranti)
- Contenuto correlato (ottimo per i blog)
2. Rendilo reattivo
Non dimenticare di fare attenzione con l'aspetto reattivo, le sensazioni e le interazioni di questo elemento di design del sito web. Utilizza un formato basato su colonne in modo che il piè di pagina si comprima e impili facilmente in un formato reattivo. Questo diventa più importante all'aumentare della dimensione del footer.
Mentre un piè di pagina a una colonna può sembrare bello su un dispositivo desktop, può trasformarsi in un pasticcio sul cellulare. Non dimenticare di fare attenzione con l'aspetto reattivo, le sensazioni e le interazioni di questo elemento di design del sito web.
Ricorda, non è necessario includere diversi tipi di contenuto in un formato a più colonne. Il design è principalmente per aiutarti a organizzare quello che potrebbe essere un gran numero di elementi nel footer.
Salvo che? stai adottando un altro approccio con un footer di dimensioni maggiori per un singolo elemento. Questa può essere un'opzione popolare per un grande modulo di contatto o inviti all'azione, come Hustle Panda (sopra). In questo caso, l'area del contenuto è così grande che un'opzione a colonna singola può collassare piacevolmente a dimensioni più piccole. (Assicurati solo che testo e inviti all'azione siano sufficientemente grandi per poterli leggere con facilità).
3. Includere le informazioni che gli utenti si aspettano
La maggior parte degli utenti si aspetta di trovare determinati tipi di informazioni nel piè di pagina del sito web. Includere le cose in un luogo che gli utenti si aspettano possono rendere il design molto più facile da usare.
Anche se non tutti questi elementi devono essere presenti in ogni piè di pagina del sito web, ecco alcune delle cose comuni che gli utenti scorreranno fino alla fine di una pagina per trovare:
- Sitemap o navigazione espansa
- Informazioni di contatto, indirizzo o mappa
- Link o widget di social media
- Iscrizione tramite e-mail o newsletter
- Ricerca
- Missione o informazioni
- Testimonianze
- Notizie, post recenti del blog o elenchi di eventi
Ci sono anche alcuni piccoli elementi che possono essere facilmente inseriti nel footer. Non tutti gli utenti cercano questi elementi, ma sono spesso più articoli per la gestione dei siti web.
- Informazioni sul copyright
- Link a termini o informativa sulla privacy (ottimo per gli aggiornamenti di GDPR)
- Affiliazioni o associazioni professionali
4. Organizza collegamenti
Organizzando i collegamenti, puoi aiutare gli utenti a trovare la parte del sito più pertinente per loro. I siti web con molti contenuti o tipi diversi di informazioni dovrebbero considerare un ampio footer con collegamenti raggruppati in categorie di risorse. Organizzando i collegamenti, puoi aiutare gli utenti a trovare la parte del sito più pertinente per loro. (Pensa allo stesso modo di quei vecchi mega menu che erano popolari nella navigazione principale per un po '.)
Questa è una tecnica abbastanza comune per progetti su larga scala e può essere molto utile per gli utenti. I rivenditori online fanno un ottimo lavoro nell'organizzare le informazioni per i grandi piedi.
Il piè di pagina di The Home Depot, sopra, include più livelli di informazioni stratificate nel footer. La riga superiore include categorie popolari (questo è il? Hai trovato tutto ciò che cercavi? Elemento per la vendita online), quindi gruppi di link per il servizio clienti (in base a ciò che l'utente deve fare), risorse, informazioni sul società e una chiamata all'azione. Infine, il piè di pagina include collegamenti ad altri marchi all'interno dell'azienda, informazioni sul copyright e termini e link di accordo.
5. Mantieni la voce e il branding
Non trattare la microcopia nel footer come un ripensamento. (Questo è un difetto comune.)
La voce e lo stile di questo contenuto dovrebbero rispecchiare il tono del resto del design del sito web. Includere la stessa combinazione di colori, elementi di design e voce unica che vengono utilizzati nel resto del progetto. Gli utenti non devono indovinare o pensare a dove si trovano sul Web quando si trovano nel footer.
Il provider di posta elettronica Emma, sopra, include un invito all'azione nel footer con i volti e lo stesso atteggiamento amichevole del resto del design del sito Web: "Saluta il tuo nuovo team di marketing." Il tono è leggero, c'è molto spazio tra gli elementi (sottolineando visivamente quella sensazione di luce) e facce felici per attirare gli utenti, facendo sentire la compagnia come qualcuno che conosci.
6. Dagli un sacco di spazio
Un testo piccolo e uno spazio ristretto possono essere una ricetta per il disastro. Assicurati che gli elementi abbiano molto spazio per respirare nel footer in modo che le informazioni siano ancora facili da scansionare e fare clic.
Gli stessi principi applicati allo spazio, alla leggibilità e alla scansione si applicano anche al piè di pagina. (Più grande è il piè di pagina, più importanti sono questi elementi.)
Ricorda, se non è utilizzabile, non va bene.(Puoi avere una buona idea di cosa è e cosa non funziona utilizzando le informazioni di analisi e seguendo i percorsi di clic: quali link nel footer vengono effettivamente cliccati?)
7. Keep It Separated
Un cambiamento di contrasto può essere un forte segnale visivo che stabilisce il senso del luogo nel design. Per sfruttare al massimo il design di un footer di grandi dimensioni, assicurati che si distingua dal contenuto sopra di esso. Mentre un piè di pagina dovrebbe apparire come parte del progetto generale, dovrebbe anche includere abbastanza contrasto in modo che l'utente capisca che questo è il fondo della pagina in cui si trovano le informazioni chiave (e previste).
Una tecnica comune per aiutare a stabilire questo contrasto consiste nel mettere il piè di pagina in un elemento contenitore - come una scatola colorata - che è un colore diverso dal resto dello sfondo. (Se il design del sito web ha uno sfondo per lo più chiaro, ad esempio, il footer potrebbe essere contenuto in uno sfondo scuro.)
Questo contrasto addizionale è un'indicazione visiva che questa parte del design è diversa. Rende l'utente in pausa e pensa alle informazioni sullo schermo. Un cambiamento di contrasto può essere una forte spinta visiva che stabilisce il senso del luogo nel design, nonché uno strumento di usabilità.
Conclusione
Ma quando è un footer troppo grande?
Durante la ricerca di questo articolo, mi sono imbattuto in un sacco di grandi disegni a piè di pagina. Più designer stanno creando grandi (e anche più grandi footer) di quanto pensassi quando ho iniziato questo percorso. Ma c'è un tipo di big footer che ho trovato fastidioso - i footer che scorrono.
Mentre il footer è un luogo ideale per organizzare molte informazioni, come utente, volevo vedere tutto a colpo d'occhio. Quindi tienilo a mente quando crei anche il tuo design. (O forse è solo il mio animaletto da sballo dopo aver visto tanti disegni di piè di pagina.) Buona fortuna con i tuoi grandi progetti di footer!