Idee per il modulo di login / registrazione e bellissimi esempi

In tutto il web moderno, stiamo assistendo a una crescente quantità di posti per l'input dell'utente. Questi includono i carrelli della spesa, i giochi web interattivi e quasi certamente i moduli di registrazione del sito web. Sembra che non solo i designer debbano concentrarsi sul design delle pagine, ma anche l'aspetto estetico è altrettanto importante.

Considera quanti moduli potresti avere compilato nel corso della tua cronologia di Internet. Ci sono innumerevoli esempi di questi da forum, bacheche, blog e molti altri. In questo articolo daremo un'occhiata ad alcuni trucchi per progettare i moduli in-page.

È saggio considerare alcuni degli articoli qui da una prospettiva oggettiva. Sebbene molti moduli di login e registrazione funzionino bene con un tipo di sito, non esiste una chiamata definitiva su ciò che è “migliore” soluzione. Usa la tua intuizione progettuale per applicare pezzi e pezzi dalle forme a cui aspiri.

Considera più ingressi

Per iniziare, prendi in considerazione un piccolo modulo di contatto di Foundation Six Web Design. Sì, questo non è un modulo di accesso in modo che possa guidare un po 'fuori tema. Tuttavia, il loro design della pagina è molto impressionante e ti mostra ciò che un po 'di creatività può ottenere.

Ciascuno dei campi di input offre spazio per la digitazione di informazioni di contatto personali - nome, e-mail, ecc. Gli stili vanno ben oltre l'ordinario, offrendo input dell'utente in un tipo di calligrafia manoscritta. Questo tipo di formattazione manterrà gli utenti in uno stato di meraviglia e raggiungerà l'obiettivo di standard di progettazione molto più elevati.

Dovrai implementare stili come questi simili a tutte le tue pagine di accesso. Certamente non consiglierei di attenersi allo stesso stile di testo di input e di opzioni / menu di selezione. Quando fai jogging per la tua creatività, pensa a come ogni elemento dovrebbe essere disposto: un sacco di spazio tra gli strati, un testo facilmente leggibile e persino i collegamenti della barra laterale alla loro linea di posta elettronica diretta.

jQuery Login Boxes

Questo è stato usato in innumerevoli siti web in passato e sarà sicuramente visto all'interno di progetti new age. Sono lontani i tempi in cui le pratiche standard portavano gli utenti su una nuova pagina per ogni fase del processo di accesso. Normalmente questo significherebbe una pagina per inserire i tuoi dati e anche una nuova pagina per l'elaborazione delle informazioni di accesso.

Pixel2Life offre alcune informazioni fantastiche su un nuovo campo di input dei dati. Dalla loro homepage è possibile fare clic sul collegamento di accesso e visualizzare una casella di accesso dinamica basata su jQuery. Questo modulo contiene una chiamata Ajax a uno script PHP esterno che controlla le credenziali delle informazioni di accesso e, una volta elaborato, concede o nega l'accesso.

Facendo un altro passo avanti, l'astuto potrebbe notare un link di registrazione direttamente sotto la casella di login. Ciò offre un'esperienza utente molto più agevole per coloro che desiderano registrarsi per il sito Web ma non sono in grado di individuare il collegamento di registrazione.

Se un utente non ha un account ma desidera crearne uno, questo li porta sulla pagina di registrazione senza errori di buggy page. La casella di accesso sarebbe comunque un'opzione valida per accedere al proprio account, tuttavia l'opzione consente di ottenere maggiori rendimenti e volumi più elevati di nuovi dichiaranti.

Semplici registrazioni a una pagina

Un altro paradigma mutevole che vediamo è la mancanza di tali dettagli per le registrazioni di nuovi account. Questa non è necessariamente una statistica errata se si presume che gli utenti siano sempre più impazienti di riempire i dati. I numeri in realtà suggeriscono un numero di siti web con pagine di registrazione più brevi più pesante elenchi di nuovi utenti su base giornaliera.

Sikbox offre un'opzione leggera per i visitatori di creare la propria casella di ricerca per un sito web. L'unico requisito è il tuo dominio personalizzato per fornire risultati di ricerca. I campi di input sono grandi, il testo è molto semplice da leggere e ce ne sono assolutamente nessuna pubblicità per distrarre gli utenti dal compito di costruire il loro modulo di ricerca!

Ora questo non è il miglior modulo da compilare quando crei la tua pagina di registrazione per un forum o un archivio di blog. Questi, per definizione standard, richiedono almeno un qualche tipo di combinazione indirizzo email / nome utente insieme a una password. Alcune applicazioni web di nuova generazione generano password dinamiche per gli utenti solo per rendere più rapido il processo di registrazione.

Ovviamente, il trade-off qui manca di controllo sulla parte dell'utente per generare la propria password a cui molte persone sono abituate.

Costruisci effetti vistosi

Una delle più grandi esperienze di registrazione che abbia mai avuto è stata la creazione del mio primo account Tumblr. La home page del loro sito offre sia un login che un modulo di iscrizione posti direttamente l'uno sotto l'altro con i nuovi effetti highlight / dissolvenza CSS3.

Questo approccio sistematico è simile per quanto riguarda l'area di accesso jQuery di Pixel2Life. Tuttavia, la differenza con Tumblr è che la rete non può offrire alcun contenuto a chi non ha un blog (oltre a consultare altri account). Il vero vantaggio di tumblr è creare il tuo blog e seguire gli altri - quindi il tuo obiettivo principale in prima pagina è creare un account o accedere.

Ci sono alcuni bug con questo sistema. In particolare all'interno di IE6 / IE7 non supporta queste nuove proprietà CSS. Utilizzato anche nella home page è un sistema per aggiungere elementi di etichetta nei valori di input della forma, in pratica superando il “predefinito” caratteri usati per caselle email / password.

Queste etichette svaniscono in primo piano nei browser moderni come Chrome / Firefox. Ma nessuna fortuna con i browser deprecati che, come puoi immaginare, è abbastanza fastidioso cercando di rileggere il tuo input!

20+ esempi di Beautiful Form Design

Di seguito una breve raccolta di alcuni fantastici disegni di login. Questi sono stati scelti da tutto il web e comprendono numerose forme di applicazioni web. Se hai suggerimenti per altri siti, sentiti libero di condividerli nella sezione commenti qui sotto!

Snoggle News