I moduli di iscrizione sono disponibili in diverse forme e dimensioni. Alcuni sono un singolo campo, altri sono un processo multi-step che si estende su più schermi.
Oggi daremo un'occhiata a 20 forme attraenti e funzionali per vedere se possiamo trovare idee utili che puoi applicare la prossima volta che crei un modulo di registrazione.
300 pixel
Molti degli esempi che vedremo oggi provengono da moduli di registrazione beta come questo. In genere queste pagine forniscono solo una grafica teaser e poche o nessuna informazione su cosa sarà effettivamente il sito.
Mi piace molto la grafica del pulsante 3D e come si anima quando si fa clic su di esso. Questo è fatto con immagini e Javascript, ma lo stile mi ricorda BonBon Buttons, un esperimento CSS3 liberamente scaricabile.
Un'altra cosa interessante di questa pagina è che fa un grande uso degli sprite delle immagini. Controlla la fonte per vedere l'immagine originale.
PROVA Scelta dei colori
Lo stile semplice e lineare su questo è semplicemente bellissimo. Mi piace il riempimento extra su ogni riga e quanto il campo del modulo selezionato si distingue dagli altri.
Questo è in realtà un aspetto importante dell'usabilità. Le forme possono essere un problema per gli utenti e l'aggiunta di piccoli tocchi come un'evidente evidenziazione sul campo può davvero aiutarli a seguirli nel processo.
lodevole
Adoro il modo in cui questo tipo di persone galleggia nell'oceano. C'è anche molto stile molto bello e sottile qui. Controlla l'ombra interna sui campi e come i bordi del campo sono più scuri in alto a sinistra rispetto a quelli in basso a destra. Ci sono anche alcune funzioni di feedback davvero interessanti incorporate in questo modulo, l'importanza della quale discuteremo in un esempio successivo.
CertTime
Le finestre modali sono sempre fresche. Sovrascrivono il contenuto corrente invece di portarti su una pagina diversa. In qualche modo è solo meno inquietante di essere portato in un posto nuovo, che sembra un'interruzione.
Oscurando la grafica della home page e facendo apparire un modulo di registrazione del segno modale, si ha la sensazione che il processo sarà rapido e indolore e che si tornerà alla navigazione in pochissimo tempo.
Le liste delle idee
Questo è molto più lungo delle precedenti e ha diversi campi da compilare. Tuttavia, il contenuto è diviso in tre parti gestibili, il che aiuta a non sentirsi come una grande forma.
Inoltre, mi piace molto il modo in cui il design sembra sentirsi come una forma stampata, puoi facilmente vederti scrivere nelle risposte!
Puleggia
Non ho molto da dire su questo a parte questo mi piace il modo in cui la pagina appare. La piccola casella nell'indirizzo archiviato è un bel tocco. Questo campo controlla automaticamente la scelta del nome utente per vedere se è già stata presa.
ACosmin.com
L'uso di pattern e texture su questo sito è fantastico. Il conteggio dei rettangoli sul modulo di posta elettronica è divertente, c'è il campo stesso e un bordo sul campo, che è circondato da un motivo a punti, circondato da un bordo bianco, quindi c'è un altro bordo grigio più scuro su quello e infine una grande scatola per contenere tutto.
Descrivendolo, penseresti che il risultato sarebbe occupato e brutto, ma è stato bellissimo.
Bloom Health
Qui mi è piaciuta la messaggistica amichevole sul testo del modulo:? Teniamoci in contatto? Troppo spesso giriamo dritto verso qualcosa di semplice e noioso quando pochi minuti di riflessione possono portarci a un'alternativa molto più interessante.
Avanti
Il modulo Avanti è tutto su quel grande pulsante. La dimensione ingrandita e la scelta dei colori in grassetto attirano la tua attenzione proprio su di essa, dove vedi una semplice frase semplice che non è un invito all'azione, ma indica invece quale sarà il pulsante dal punto di vista dell'utente, "Registrami." Questo non lascia dubbi su cosa succede quando si preme il pulsante.
Logica audio
Audio Logic ha scelto di avere un buffo personaggio illustrato regge il loro modulo di iscrizione. Porta molto carattere alla pagina e ti fa sorridere quando lo vedi; una tecnica che vale la pena esplorare con le tue illustrazioni dei personaggi!
Cultura culinaria
Adoro il rinforzo visivo che questo sito utilizzava per i campi del modulo. Questo tipo di icone semplici può essere trovato in uno dei centinaia di set di icone gratuiti online e aggiunge molto al modulo, potresti quasi riempirlo senza nemmeno leggere il testo!
Vediamo questo tipo di icona-uso abbastanza spesso in navigazione ed è abbastanza rinfrescante vedere qualcuno portarlo a un modulo.
Gowalla
La forma di Gowalla ha un messaggio interessante da insegnare: semplice è buono. Ecco un sito con un design fantastico, fuori dalla scatola, che pubblicizza un'app allo stesso modo, ma non hanno scelto di fare qualcosa di stravagante o confuso sul loro modulo di iscrizione.
Invece, è solo una semplice scatola bianca con bei campi grandi. Si noti come hanno bloccato i primi due campi sulla stessa linea, ma mantenuto l'allineamento stretto giustificato. Questa è una bella tecnica salva-spazio che non infrange il layout.
bufalo
A volte una forma enorme può essere incredibilmente scoraggiante. Vedi tutti quei campi da riempire e il tuo primo istinto è solo quello di chiudere la finestra del browser e farli andare via.
Come mostra il sito sottostante, a volte può aiutare a suddividere questi campi in più passaggi. Vedete solo un piccolo pezzo alla volta, in modo da non scoraggiarvi e potete tenere d'occhio i vostri progressi con le briciole di pane in alto.
Kontain
Ecco cosa odio: compilare venti moduli e premere invio solo per scoprire che ho fatto un errore da qualche parte. Poi devo cercare nella pagina piccoli asterischi che indicano dove ho sbagliato. Non sono solo io, tutti nel mondo odiano questo! Indipendentemente dal fatto che tu abbia tre campi o cinquanta, l'esperienza dell'utente sarà infinitamente migliore fornendo un feedback vivo e intelligente per ogni campo.
Lo vediamo in azione sul modulo di Kontain qui sotto.Ho inserito una password lunga solo tre lettere e un enorme segno è apparso per dirmi che ho fatto qualcosa di sbagliato, lo stesso accade se inserisci un'e-mail non valida. La chiave qui non è semplicemente quella di fornire feedback, ma un feedback chiaramente visibile e facilmente comprensibile che l'utente può correggere prima di premere il pulsante di invio.
zzz
Gowalla ha un sito divertente e un noioso modulo di registrazione, che ha i suoi meriti. Tuttavia, non esiste una regola inviolabile che tu non possa divertirti un po 'con le tue forme.
Controlla il modulo sottostante, non solo la grafica è pazzesca, ma i campi del modulo stessi vengono ruotati leggermente per aumentare l'aspetto fuori dall'ordinario. Questo sicuramente non sarebbe appropriato in molte situazioni professionali, ma su un sito pieno di pecore che fanno pubblicità a una bevanda che ti fa dormire, funziona perfettamente.
Vimeo
I ragazzi di Vimeo hanno deciso di dedicare una grande pagina a una piccola forma. Lo hanno bloccato in alto a destra e hanno riempito il resto della pagina con un'isola illustrata e alcune nuvole galleggianti animate.
Come nell'esempio precedente, questo sicuramente non è appropriato per tutte le situazioni, ma funziona bene qui ed è un'implementazione piuttosto divertente di una forma altrimenti noiosa.
Round di tè
Questo rappresenta un aspetto interessante del pensiero fuori dagli schemi. The? Sign Me Up? il pulsante sulla destra è stato allungato verticalmente per adattarsi all'altezza dei due campi.
Non siamo abituati a premere pulsanti quadrati sul web, quindi devi stare attento a implementare qualcosa di simile, ma mi piace quello che hanno fatto qui.
13 creativo
Quando si dispone di un sito altamente stilizzato che segue un chiaro tema visivo, l'introduzione di un modulo con uno stile predefinito può rovinare l'integrità dell'intero tema.
Invece, devi trovare un equilibrio tra il far risaltare l'area del tuo modulo e farlo corrispondere al tema generale del sito. Penso che la 13 forma creativa qui sotto sia un perfetto esempio di questa tecnica in azione.
Obama
La forma di Obama usa la stessa tecnica dell'esempio Avanti sopra. Si noti quanto quel pulsante rosso risalta sulla pagina altrimenti molto blu. Questa volta il testo del pulsante è un chiaro invito all'azione, "Ulteriori informazioni." Sia che tu ami o odi la sua politica, è sicuramente il caso che Obama abbia avuto finora il miglior marchio visivo di qualsiasi presidente americano, una tendenza che sospetto abbia fissato uno standard che continuerà per i futuri detentori della posizione.
Prendi Brewin '
Questo ultimo esempio ha sia pro che contro. Nel complesso, la pagina è super attraente. Tuttavia, sembra un sacco di contenuti per un allineamento del centro, che è abbastanza debole per qualcosa di più di poche righe.
La lezione qui è che a volte i progetti più semplici sono i più difficili da progettare. Quando c'è un sacco di contenuti, hai molto da lavorare e puoi costruire allineamenti forti e chiari. Con un po 'di contenuto, tuttavia, che non si avvicina a riempire la pagina, spesso devi lottare per un po' prima di atterrare sulla soluzione ideale.
Mostraci il tuo!
Ciascuno dei venti moduli di iscrizione sopra riportati può insegnarti qualcosa su come costruire in modo efficace il tuo. Lascia un commento qui sotto con un link ad alcuni moduli che hai creato. Quali tecniche hai usato per rafforzare la forma visivamente e funzionalmente?