Dovresti mantenere i principi di progettazione above the fold?
Il campo del web design e dello sviluppo ti prepara molti dilemmi: usare uno stile pulito o meno, incorporare o meno le ultime tendenze sul tuo sito web, porre l’accento sul fronte visivo o sulla funzionalità, rendere il design reattivo o meno, ecc.
Non possiamo rispondere a tutte queste domande in una volta; invece inizieremo con un aspetto molto importante: la piega.
Cosa significa la piega?
La piega è un termine utilizzato dai proprietari e dagli sviluppatori di siti Web per identificare la parte del contenuto del sito che viene mostrata senza scorrere verso il basso. Questa è un’area visibile proprio quando un utente entra in un sito web.
Origine del giornale
Da dove vengono le origini? Tutto è semplice: la stampa ha fissato questo termine molto prima che il web design diventasse un campo così importante e sviluppato. I giornali stampati avevano gli articoli più sensazionali in cima alla pagina in modo da coinvolgere i lettori a sfogliare l’intero giornale.
Varietà di risoluzioni dello schermo
Il problema con la piega oggi è la risoluzione. L’iPad ha una risoluzione di 1024×768, l’iPhone 4 ha una risoluzione di 960×640, il mio monitor da 22 pollici ha una risoluzione di 1920×1080, e ancora oggi il più comune è 1280×720. Non è più un tipo di computer che tutti hanno, ma oggi c’è una massa di design e dimensioni di monitor per computer, quindi è difficile costruire un design generale above the fold. Ad ogni modo, alcuni utenti vedranno di più, altri meno, dov’è allora una media aurea? Suppongo che sia nella piega negazione, perché il termine generale è morto ora.
I dispositivi mobili stanno cambiando la piega
Vi abbiamo parlato della risoluzione dello schermo solo poche righe sopra, ma vale anche la pena ricordare che non sappiamo quali dispositivi appariranno domani, tra un mese o tra un paio d’anni. Oggi le persone usano tablet e smartphone, ma alcuni decenni fa erano fuori dalla nostra conoscenza.
Epoca di scorrimento
Scrolling soprattutto: è così che vengono creati i siti web in questi giorni. Era normale navigare in un sito web above the fold e non sapere come agire ulteriormente quando i browser web erano inesplorati. Oggi gli utenti vivono online, comunicano, fanno acquisti, fanno pubblicità e fanno affari su Internet e ne sanno tutto. Un’altra cosa è che agli utenti non piace leggere e prestano troppa attenzione a una sezione del sito, quindi scorrono, scorrono e scorrono ancora. È tuo compito farli fermare a questo o quell’elemento, e come capisci non si tratta della piega. Sono solo pochi secondi quando gli utenti guardano l’area hero del sito, quindi non è necessario inserire tutto in una zona della pagina. Dovresti mettere una giusta proporzione di contenuto su tutta la pagina, e così facendo raddoppierai le tue possibilità di essere notato e letto.
Esempi di come coinvolgere gli utenti a scorrere
Una volta deciso di rendere attivo lo scorrimento del tuo sito Web, devi pensare a tutte le opzioni possibili per farlo funzionare ed essere coinvolgente. In che modo gli utenti capiranno che devono scorrere? Perché devono scorrere? Cosa otterranno se scorri?
Path trail to scroll – Questo è quando usi alcuni elementi per mostrare la strada attraverso il tuo sito web. Qui intendo sia frecce elementari che soluzioni creative come mongolfiera, sneak, qualsiasi cosa tu possa solo immaginare.
Sito web Beach Boar con racchetta da ping pong
Scintille Studio
Layout delle colonne: questa funzione può aiutare molto a incuriosire gli utenti, in particolare se una delle colonne è rotta dalla piega. Quindi, gli utenti iniziano a scorrere per leggere fino alla fine della sezione e quindi arrivano inconsapevolmente al piè di pagina e ottengono un’altra porzione di informazioni che hai preparato.
La navigazione è una pietra miliare per qualsiasi sito Web e non è una sorpresa che dovrebbe avere la migliore posizione e la funzionalità più user-friendly. La posizione migliore è above the fold, questo è senza dubbio. Come mai? Perché gli utenti potrebbero non voler scorrere l’intera home page, ma hanno un obiettivo concreto e hanno bisogno di vedere una pagina particolare, come chi siamo, contatti, pagamenti, portfolio, ecc. Se li fai scorrere per sfogliare più pagine, daranno via tutto e troveranno un altro sito. Molti sviluppatori commettono un errore progettando enormi aree degli eroi con immagini che occupano tutto lo spazio sopra la piega (e la grande area degli eroi è di tendenza oggi). Faresti meglio a mettere la barra di navigazione sopra questa immagine in alto, piuttosto che renderla sotto la sezione e visibile solo dopo un po’ di scorrimento.
Progettazione di siti Web con navigazione superiore
Dove sono più efficaci gli inviti all’azione?
La risposta a questa domanda dipende da molti fattori: che tipo di servizi/prodotti offrite, un cliente può prendere una decisione immediatamente o dovrà leggere di più prima, avete uno o un paio di inviti all’azione da inserire nel pagina. Ora, descriviamo ogni punto uno dopo l’altro.
Il pulsante di invito all’azione (CTA) è efficace above the fold, quando fornisci informazioni esaustive sul tuo prodotto nell’intestazione. Potrebbe trattarsi di una presentazione di diapositive, elenchi puntati con i vantaggi del tuo prodotto, qualsiasi statica, ecc. Quindi, l’utente ha formato un’impressione della tua azienda e può prendere una decisione. In questo caso, i bottoni above the fold agiranno a tuo favore.
Sito web di una pagina con CTA Button above the Fold
Se hai una lunga storia da raccontare ai tuoi clienti e vuoi che conoscano tutti i pro e i contro del tuo prodotto, devi posizionare il tuo CTA below the fold, e meglio farlo nel footer. In tal modo, quando i clienti sono sicuri di averne bisogno, vedranno una spinta proprio di fronte a loro. Tuttavia, dovresti rendere la tua storia attraente, interessante, coinvolgente e propositiva, in caso contrario non avrai alcuna risposta.
Quando puoi utilizzare più inviti all’azione? Solo quando li rendi diversamente propositi e inseriti in diverse sezioni di contenuto. Inoltre, è meglio creare vari design per tutti per differenziarli l’uno dall’altro. Se hai tutti gli stessi pulsanti posizionati ovunque, rovinerai la tua presenza online e peggiorerai i tuoi risultati finali.
Sito Web con più inviti all’azione
Come mettere CTA nel mezzo? Ci sono alcuni trucchi che dovresti sapere:
- metti l’invito all’azione su una barra laterale, preferibilmente sul lato sinistro perché di solito leggiamo da sinistra a destra e tutto ciò che è a sinistra viene visualizzato per primo:
- rendere evidente il design dell’invito all’azione, colorarlo in modo brillante e utilizzare caratteri grandi;
- usa lo spazio bianco attorno al tuo invito all’azione per farlo risaltare tra gli altri contenuti.
L’errore più grande che puoi fare è mescolare CTA con altri elementi di contenuto. Quindi non metterlo mai su un layout disordinato e disordinato, non funzionerà di sicuro.
Informazioni di contatto: Above o Below the Fold?
Non a tutti gli utenti piace navigare in lunghi siti Web con molti contenuti, alcuni di loro trovano questi siti solo per ottenere contatti dell’azienda per effettuare una chiamata. Ecco perché è meglio che i contatti siano above the fold, possono essere una singola riga con il numero di telefono o un blocco compatto con informazioni più dettagliate. Oltre a questo, non dimenticare una pagina Contatti separata, è un must per qualsiasi sito.
Above the Fold è ancora importante: home page e destinazione
Il principio del design above the fold non è uguale per tutte le pagine del sito web. Sebbene non sia importante e non sia necessario nelle pagine di contenuto, è piuttosto vitale per il design della home page e le pagine di destinazione. Qui hai la possibilità di attirare gli spettatori con una bella sezione dell’eroe con immagini o con una presentazione di diapositive. Tuttavia, attenersi alle regole di tutti per l’azione e la progettazione della navigazione di cui abbiamo discusso in precedenza.
Suggerimenti finali: elementi da presentare above the fold e below it
Speriamo che tu non ti sia confuso con l’articolo; comunque ti daremo brevemente i punti chiave del design above the fold e riassumeremo il tutto in semplici consigli da seguire:
- Presenta il tuo nome above the fold. Il logotipo ha un grande impatto sulla consapevolezza del marchio ed è proprio per questo che viene creato il sito Web: per promuovere il tuo nome/la tua azienda.
- Usa la navigazione in alto. Questo è l’elemento più vitale di un sito Web multipagina, quindi i principi di piegatura contano davvero qui.
- Posiziona le notizie principali above the fold. Consenti ai clienti di essere subito consapevoli dei tuoi eventi e dei nuovi prodotti, non lasciarli indovinare.
- I pulsanti dei social media funzionano bene sia above che below the fold. Se la pagina del tuo sito Web ha uno scorrimento lungo, non fare una scelta: metti semplicemente i pulsanti di condivisione sui social in alto e in basso. I pulsanti di intestazione sono utili per i visitatori che già ti conoscono e stavano cercando il tuo sito Web esattamente per trovare questi pulsanti di seguito. I pulsanti a piè di pagina sono fantastici, perché se gli utenti sono interessati ai tuoi contenuti, scorreranno comunque verso il basso.
- Trova la posizione di invito all’azione appropriata per il tuo particolare sito web. Ogni azienda e fornitore di servizi ha obiettivi diversi nell’avere un sito Web, quindi anche gli inviti all’azione sono diversi per loro. In questo post, diamo un buon chiarimento su questo problema di design, speriamo che tu lo legga attentamente, torna in caso contrario.
- Non mettere tutto sopra la piega. In altri casi, otterrai un sito Web terribile con un layout disordinato, inoltre con un design vuoto e noioso sotto la piega.
- Trascura i principi above the fold, se il tuo sito web è utilizzato principalmente da utenti mobili. Le persone sono abituate a scorrere quando navigano sui siti tramite smartphone o tablet.
- Lo scorrimento è di tendenza, quindi dai una migliore esposizione ad esso piuttosto che al design above the fold, che non è un must nel moderno mondo digitale.