Benvenut* e bentornat* in questa nuova lezione di Web Design!
Oggi voglio parlarti delle call to action e dei form.
Iniziamo subito!
Call to action
Come ci suggerisce il suo nome (call to action = chiamata all'azione), deve invitare l'utente a compiere un'azione, che può essere un acquisto, un preventivo o una richiesta di contatto.
L'azione in questione ha come fine ultimo di vendere un prodotto o un servizio, perciò deve pubblicizzare la nostra attività e dare la possibilità di rendere subito fruibile il nostro lavoro.
È tipicamente composta da uno o più brevi testi e da un bottone; nulla ci vieta però di ampliarla e aggiungere un'immagine e più tasti.
Abbiamo accennato alla call to action nella prima lezione riguardante l'anatomia di una pagina web, quando abbiamo parlato della hero image. Possiamo infatti inserirla in cima, proprio sotto l'header, ma anche più in basso, sopra il footer o in una colonna di lato, ricordandoci sempre di renderla ben visibile e distinguibile.
In basso un esempio tratto da un sito di streaming.
In questo caso la call to action è stata concepita per invogliare l'utente a seguire un nuovo k-drama usufruendo di un pass (testo in alto a sinistra). La sezione è composta da un'immagine che ricopre tutta l'area, il titolo della serie, due tasti, la scritta sopra citata e il numero degli episodi (in alto a destra).
Una composizione piuttosto semplice e scarsamente didascalica, il ché la rende più efficace. Inserire troppi testi o frasi lunghe e complesse rende la call to action pesante e sgradevole.
Di seguito quattro call to action per hero image semplificate. Per leggere meglio i testi clicca sull'immagine.
Per le call to action da inserire in spazi più ridotti non devi seguire strategie molto lontane da quelle già viste, è sufficiente gestire meglio l'area a tua disposizione ed economizzare con gli elementi da inserire.
Ricorda che in ogni caso deve attirare l'attenzione, quindi usa colori accesi per il bottone e testi ben visibili.
Per la versione responsive, non devi fare troppi cambiamenti, valgono i consigli appena dati.
Form
In informatica i form sono dei moduli in formato digitale da compilare.
I dati inseriti servono per iscriversi a una newsletter, richiedere un preventivo, creare un account o abbonarsi a un servizio. Le informazioni inserite vengono inviate al server del sito e salvate in un database.
In basso un esempio tratto da un mio progetto.
Abbiamo i campi da compilare, come quelli del nome e cognome, il campo in cui selezionare un opzione presente e delle caselline da spuntare (notare i link ad alcune informazioni). Infine troviamo i tasti per inviare i dati inseriti o per cancellarli.
In linea generale il form è situato in basso per dar spazio al menu principale, alla hero image e alla call to action, ma nulla vieta di posizionarlo più in alto (per quanto io te lo sconsigli). Ti consiglio di inserirlo poco sopra il footer, in maniera tale che l'utente possa comprendere quali servizi offre il sito e l'identità dell'azienda.
L'aspetto dei form varia di poco l'uno dall'altro, perché il visitatore deve concentrarsi nella compilazione e qui l'estetica conta davvero poco. È buona norma dargli uno sfondo di un solo colore, possibilmente chiaro e discreto come il grigio o il bianco. Puoi usare anche un'immagine come sfondo o sovrapporre a uno sfondo di un unico colore dei loghi e delle icone.
Qui di seguito ti lascio alcuni esempi.
Come sempre, ti suggerisco di visitare più siti possibile per lasciarti ispirare dai lavori degli altri.
Per la versione responsive, ti suggerisco di distribuire i vari campi in maniera tale che ognuno possa avere almeno un rigo intero a propria disposizione.
Per tutto il resto il tuo intuito è sufficiente.
Concludo qui la lezione.
A presto!