Login / Registratieformulier Ideeën en mooie voorbeelden

Overal in het moderne web zien we een groeiend aantal plaatsen voor gebruikersinput. Dit zijn onder meer winkelwagentjes, interactieve webgames en zeker ook website-registratieformulieren. Het lijkt erop dat ontwerpers niet alleen moeten focussen op het ontwerpen van pagina's, maar esthetiek is ook een even belangrijke rol.

Overweeg hoeveel formulieren je hebt ingevuld in de loop van je internetgeschiedenis. Er zijn talloze voorbeelden hiervan van forums, prikborden, blogs en nog veel meer. In dit artikel bekijken we enkele geweldige trucs voor het ontwerpen van uw formulieren op de pagina.

Het is verstandig om sommige items hier vanuit een objectief perspectief te beschouwen. Hoewel veel aanmeldings- en registratieformulieren goed werken met één type site, is er geen definitief oordeel over wat het is “het beste” oplossing. Gebruik je ontwerpintuïtie om stukjes en beetjes toe te passen van vormen waarnaar je streeft.

Overweeg meerdere ingangen

Om een ​​begin te maken, kunt u een klein contactformulier van Foundation Six Web Design overwegen. Ja, dit is geen aanmeldingsformulier, dus het kan een beetje van het onderwerp afwijken. Hun paginaontwerp is echter zeer indrukwekkend en laat zien wat een beetje creativiteit kan bereiken.

Elk van de invoervelden biedt ruimte voor u om persoonlijke contactinformatie te typen - naam, e-mail, enz. De stijlen gaan veel verder dan gewoon en bieden gebruikersinvoer in een soort handgeschreven kalligrafie. Deze vorm van formatteren zal uw gebruikers in een staat van verwondering houden en een doel bereiken met veel hogere ontwerpnormen.

U wilt stijlen zoals deze implementeren die lijken op al uw inlogpagina's. Ik zou het zeker niet aanbevelen om met dezelfde stijl van invoertekst en optie / selectiemenu's te blijven plakken. Wanneer je je hersenen aanspoort voor creativiteit, overweeg dan hoe elk element moet worden ingedeeld: veel ruimte tussen lagen, grote, gemakkelijk leesbare tekst en zelfs zijbalklinks naar hun directe e-mailregel.

jQuery-inlogboxen

Dit is in het verleden op ontelbare websites gebruikt en zal zeker te zien zijn in new-age-ontwerpen. Lang geleden zijn de dagen waarop standaardpraktijken gebruikers naar een nieuwe pagina brengen voor elke stap van het inlogproces. Normaal gesproken zou dit een pagina betekenen om uw gegevens in te voeren en ook een nieuwe pagina voor het verwerken van aanmeldingsgegevens.

Pixel2Life biedt een fantastisch inzicht in een nieuw veld van gegevensinvoer. Vanaf hun startpagina kun je op de login-link klikken en een dynamisch jQuery-powered inlogvenster openen. Dit formulier bevat een Ajax-oproep naar een extern PHP-script dat de inloggegevens van uw aanmeldingsgegevens controleert en, na verwerking, de toegang verleent of weigert.

Als u nog een stap verder gaat, ziet u mogelijk een registratielink direct onder het aanmeldingsvak. Dit biedt een veel vlottere gebruikerservaring voor mensen die zich willen aanmelden voor de website, maar niet in staat zijn om de registratielink te vinden.

Als een gebruiker geen account heeft maar er wel een wil maken, brengt dit deze naar de registratiepagina zonder fouten in de fouten van de pagina. Het inlogvak is nog steeds een haalbare optie voor toegang tot uw eigen account, maar de optie geeft ruimte voor meer rendement en hogere volumes nieuwe registranten.

Simpele registraties van één pagina

Een ander veranderend paradigma dat we zien, is het ontbreken van details voor nieuwe accountregistraties. Dit is niet noodzakelijkerwijs een slechte statistiek, ervan uitgaande dat gebruikers ongeduldig worden over het invullen van gegevens. De cijfers suggereren eigenlijk websites met kortere registratiepagina's zwaardere lijsten met nieuwe gebruikers op dagelijkse basis.

Sikbox biedt een lichtgewicht optie voor bezoekers om hun eigen zoekvak voor een website te maken. De enige vereiste is uw eigen aangepaste domein waarmee u zoekresultaten kunt opgeven. De invoervelden zijn groot, tekst is heel eenvoudig te lezen en er zijn er absoluut geen advertenties om gebruikers af te leiden van de taak om hun zoekformulier te bouwen!

Dit is niet de beste vorm om uit te bouwen bij het maken van uw eigen registratiepagina voor een forum- of blogarchief. Deze zullen, per standaarddefinitie, ten minste een soort e-mailadres / gebruikersnaam combinatie vereisen samen met een wachtwoord. Sommige webtoepassingen voor nieuwe leeftijden zullen dynamische wachtwoorden voor gebruikers genereren om het registratieproces sneller te laten verlopen.

Natuurlijk is de uitruil hier geen controle aan het eind van de gebruiker om een ​​eigen wachtwoord te genereren waar veel mensen aan gewend zijn.

Bouw flitsende effecten op

Een van de grootste aanmeldingservaringen die ik ooit heb gehad, was het maken van mijn eerste Tumblr-account. De startpagina van hun site biedt zowel een login- als een aanmeldingsformulier dat direct onder elkaar is geplaatst met nieuwe CSS3-highlight / fade-effecten.

Deze systematische aanpak is vergelijkbaar met het jQuery-inloggebied van Pixel2Life. Het verschil met Tumblr is echter dat het netwerk geen inhoud kan bieden aan mensen zonder een blog (behalve het doorbladeren van andere accounts). Het echte voordeel van tumblr is om je eigen blog te maken en anderen te volgen - dus je belangrijkste doel op de voorpagina is om een ​​account aan te maken of in te loggen.

Er zijn een aantal bugs met dit systeem. Met name binnen IE6 / IE7 die deze nieuwe CSS-eigenschappen niet ondersteunen. Op de startpagina wordt ook een systeem gebruikt voor het toevoegen van labelelementen aan formulierinvoerwaarden - in feite het overnemen van de “standaard” tekens die worden gebruikt voor e-mail- / wachtwoordvakken.

Deze labels verdwijnen in focus in moderne browsers zoals Chrome / Firefox. Maar niet zo'n geluk met de verouderde browsers die, zoals je je kunt voorstellen, behoorlijk vervelend zijn om je eigen invoer opnieuw te lezen!

20+ voorbeelden van mooi formulierontwerp

Hieronder ziet u een snelle verzameling van enkele fantastische ontwerpen van aanmeldingsformulieren. Deze zijn gekozen uit het hele internet en bevatten talloze vormen van webapplicaties. Als je suggesties voor andere sites hebt, kun je deze delen via het gedeelte 'Opmerkingen' hieronder!

Snoggle Nieuws

Robo.to

Virb

Grooveshark

Storenvy

Dropbox

Green Globe-ideeën

FreshBooks

Themeforest

MailChimp

Basiskamp

Test vlucht

AwesomeJS

Unlocking

Popscreen

Gowalla

Kontain

MobileMe

Laterthis

Launchlist

Theidealist