Inloggning / Registreringsformulär Idéer och vackra exempel

Allt under hela den moderna webben ser vi en växande mängd platser för användarinmatning. Dessa inkluderar kundvagnar, interaktiva webbspel och säkert webbplatsformulär. Det verkar som att inte bara designers bör fokusera på siddesign, men formens estetik är också lika viktig.

Tänk på hur många former du kan ha fyllt i under Internethistoriken. Det finns otaliga exempel på dessa från forum, meddelandekort, bloggar och så många fler. I den här artikeln tar vi en titt på några bra knep för att utforma dina formulär på sidan.

Det är klokt att överväga några av föremålen här ur ett objektivt perspektiv. Även om många inloggnings- och registreringsformulär fungerar bra med en typ av webbplats, finns det ingen slutgiltig bedömning av vad som är “bäst” lösning. Använd din designintuition för att applicera bitar och bitar från former du strävar efter.

Tänk på flera ingångar

För att starta saker och ting överväga en liten kontaktformulär från Foundation Six Web Design. Ja det här är inte ett inloggningsformulär så det kan styra lite av ämnet. Men deras siddesign är mycket imponerande och det visar dig vad en liten kreativitet kan uppnå.

Var och en av inmatningsfälten ger plats för att du skriver in personlig kontaktinformation - namn, e-post, etc. Stilen går långt bortom vanligt och erbjuder användarinmatning i en typ av handskriven kalligrafi. Denna typ av formatering kommer att hålla dina användare i ett underverk och uppnå ett mål med mycket högre designstandarder.

Du vill implementera stilar som dessa liknar alla dina inloggningssidor. Jag skulle verkligen inte rekommendera att hålla i samma stil med inmatad text och alternativ / välj menyer. När du joggar din hjärna för kreativitet, överväga hur varje element ska läggas ut: gott om utrymme mellan lager, stor lättläsbar text och till och med sidabar länkar till deras direkta e-postlinje.

jQuery inloggningsrutor

Detta har använts på otaliga webbplatser tidigare och kommer säkert att ses inom nyåldersdesign. Långt borta är de dagar då standardpraxis skulle föra användare till en ny sida för varje steg i inloggningsprocessen. Normalt innebär det att en sida ska mata in dina data och även en ny sida för behandling av inloggningsinformation.

Pixel2Life erbjuder en del fantastisk inblick i ett nytt fält av dataingång. Från deras hemsida kan du klicka på inloggningslänken och ta fram en dynamisk jQuery-powered login box. Denna formulär innehåller ett Ajax-samtal till ett externt PHP-skript som kontrollerar inloggningsuppgifterna och, när de behandlas, antingen beviljar eller nekar åtkomst.

Går ytterligare ett steg längre kan den akuta märka en registreringslänk direkt under inloggningsrutan. Detta ger en mycket mjukare användarupplevelse för dem som vill anmäla sig till webbplatsen men inte kan hitta registreringslänken.

Om en användare inte har ett konto men skulle vilja göra en, leder det dem till registreringssidan utan några buggy-sidfel. Inloggningsrutan skulle fortfarande vara ett lönsamt alternativ för att få tillgång till ditt eget konto, men låter alternativet ge plats för större avkastning och högre volymer av nya registranter.

Enkla engångsregistreringar

Ett annat skiftande paradigm vi ser är att det saknas i detalj för nya kontoregistreringar. Detta är inte nödvändigtvis en dålig statistik förutsatt att användarna blir otåliga mot att fylla i data. Siffrorna föreslår faktiskt webbplatser med kortare registreringssidor garner tyngre listor över nya användare dagligen.

Sikbox erbjuder ett lättalternativ för besökare att skapa en egen sökruta för en webbplats. Det enda kravet är din egen anpassade domän som ska ge sökresultat för. Inmatningsfälten är stora, texten är mycket enkel att läsa och det finns absolut inga annonser att distrahera användare från uppgiften att bygga deras sökformulär!

Nu är det inte den bästa formen att bygga upp när du skapar en egen registreringssida för ett forum eller bloggarkiv. Dessa kommer, enligt standarddefinition, åtminstone att kräva någon typ av e-postadress / användarnamnskombination tillsammans med ett lösenord. Vissa nyåriga webbapplikationer kommer att generera dynamiska lösenord för användare bara för att göra registreringsprocessen snabbare.

Naturligtvis saknar handeln här kontrollen över användarens slut att skapa sitt eget lösenord som många människor är vana vid.

Bygg av Flashy Effects

En av de största registreringsupplevelser jag någonsin har haft skapade mitt första Tumblr-konto. Hemsidan på deras hemsida erbjuder både en inloggnings- och registreringsblankett placerad direkt under varandra med nya CSS3-höjdpunkter / blekna effekter.

Detta systematiska tillvägagångssätt är liknande med Pixel2Lives jQuery-inloggningsområde. Skillnaden med Tumblr är dock att nätverket inte kan erbjuda innehåll för dem utan blogg (bortsett från att du surfar på andra konton). Den verkliga fördelen med tumblr är att skapa din egen blogg och följa andra - så är huvudmålet på framsidan antingen att skapa ett konto eller logga in.

Det finns några buggar med detta system. Mest synnerligen inom IE6 / IE7 som inte stöder dessa nya CSS egenskaper. Används även på hemsidan är ett system för att lägga till etikettelement i forminmatningsvärden - överstiger i princip “standard” tecken som används för e-post / lösenordslådor.

Dessa etiketter döljer sig i fokus i moderna webbläsare som Chrome / Firefox. Men ingen sådan tur med de avvecklade webbläsarna som, som du kan tänka dig, är ganska irriterande att försöka läsa din egen inmatning igen!

20 + exempel på vacker formdesign

Nedan följer ett snabbt roundup galleri med några fantastiska inloggningsformulär. Dessa har blivit plockade från hela webben och innehåller många former av webbapplikationer. Om du har förslag på andra webbplatser kan du dela dem i kommentarfältet nedan!

Snoggle News