Login / Registration Form Ideer og Smukke Eksempler
Alt i hele det moderne web ser vi en stigende mængde steder til brugerindgang. Disse omfatter indkøbsvogne, interaktive webspil og helt sikkert hjemmesideregistreringsformularer. Det lader til, at designere ikke kun skal fokusere på sidedesign, men også æstetik er lige vigtig.
Overvej hvor mange former du måske har udfyldt i løbet af din internethistorie. Der er utallige eksempler på disse fra fora, opslagstavler, blogs og så mange flere. I denne artikel tager vi et kig på nogle gode tricks til at designe dine in-side-formularer.
Det er klogt at overveje nogle af elementerne her fra et objektivt perspektiv. Selv om mange login og registreringsformularer fungerer godt med en type websted, er der ingen endelig domskald på, hvad der er “bedst” opløsning. Brug din designintuition til at anvende bits og stykker fra former, du stræber efter.
Overvej flere indgange
For at starte tingene skal du overveje en lille kontaktformular fra Foundation Six Web Design. Ja dette er ikke et login-formular, så det kan styre lidt af emnet. Men deres side design er meget imponerende, og det viser dig, hvad en lille kreativitet kan opnå.
Hvert af indtastningsfelterne giver plads til at skrive personlige kontaktoplysninger - navn, e-mail osv. Stilene går langt ud over det almindelige, der giver brugerindgang i en type håndskrevet kalligrafi. Denne formatering vil holde dine brugere i en undre situation og opnå et mål med meget højere designstandarder.
Du vil gerne implementere stilarter som disse ligner alle dine login-sider. Jeg vil bestemt ikke anbefale at holde fast i samme stil med indgående tekst og valgmulighed / vælg menuer. Når du jogger din hjerne for kreativitet, skal du overveje, hvordan hvert element skal lægges ud: masser af plads mellem lag, stor letlæselig tekst og endda sidebar links til deres direkte e-mail-linje.
jQuery logonbokse
Dette er blevet brugt på utallige hjemmesider i fortiden og vil helt sikkert ses inden for new-age designs. Langt væk er de dage, hvor standardpraksis ville bringe brugerne på en ny side for hvert trin i loginprocessen. Normalt vil det betyde en side til at indtaste dine data og også en ny side til behandling af loginoplysninger.
Pixel2Life tilbyder nogle fantastiske indblik i et nyt felt dataindgang. Fra deres hjemmeside kan du klikke på login-linket og oprette en dynamisk jQuery-powered login box. Denne formular indeholder et Ajax-opkald til et eksternt PHP-script, som kontrollerer legitimationsoplysningerne for din login-info og, når den er behandlet, enten giver eller nægter adgang.
Går et andet skridt videre kan den stødige opleve et registreringslink direkte under logonboksen. Dette giver en meget glattere brugeroplevelse for dem, der ønsker at tilmelde sig hjemmesiden, men ikke kan finde registreringslinket.
Hvis en bruger ikke har en konto, men gerne vil lave en, bringer den dem til registreringssiden uden fejl i buggy side. Login-feltet vil stadig være en levedygtig mulighed for at få adgang til din egen konto, men det gør det muligt at give mulighed for større afkast og større mængder nye registranter.
Simple One-Page Registrations
Et andet skiftende paradigme, vi ser, mangler i så høj grad til nye kontoregistreringer. Dette er ikke nødvendigvis en dårlig statistik, idet brugerne vokser utålmodigt mod at udfylde data. Tallene foreslår faktisk websteder med kortere registrerings sider garner tungere lister over nye brugere dagligt.
Sikbox tilbyder en let løsning for besøgende at oprette deres egen søgefelt til en hjemmeside. Det eneste krav er dit eget brugerdefinerede domæne, som skal give søgeresultater til. Indtastningsfelter er store, tekst er meget enkelt at læse og der er absolut ingen annoncer at distrahere brugere fra opgaven med at opbygge deres søgeformular!
Nu er det ikke den bedste form at opbygge, når du opretter din egen registreringsside til et forum eller blogarkiv. Disse vil efter standard definition kræve en eller anden type e-mail-adresse / brugernavn kombination sammen med et kodeord. Nogle nylige webapplikationer vil generere dynamiske adgangskoder til brugere for blot at gøre registreringsprocessen hurtigere.
Selvfølgelig mangler handeln her kontrol over brugerens ende for at generere deres eget kodeord, som mange mennesker er vant til.
Afvikle Flashy Effects
En af de største tilmeldingsoplevelser, jeg nogensinde har haft, var at skabe min første Tumblr-konto. Hjemmesiden på deres hjemmeside tilbyder både en login og tilmeldingsformular placeret direkte under hinanden med nye CSS3 fremhæve / falme effekter.
Denne systematiske tilgang er ens i forhold til Pixel2Lives jQuery login-område. Forskellen med Tumblr er imidlertid, at netværket ikke kan tilbyde noget indhold til dem uden en blog (bortset fra at browse andre konti). Den reelle fordel ved tumblr er at oprette din egen blog og følge andre - dermed er hovedformålet på forsiden enten at oprette en konto eller logge ind.
Der er nogle fejl med dette system. Mest specielt inden for IE6 / IE7, der ikke understøtter disse nye CSS egenskaber. Også brugt på hjemmesiden er et system til at tilføje etiketelementer til formindgangsværdier - overordnet overrulning af “Standard” tegn, der bruges til email / password bokse.
Disse etiketter falder væk på fokus i moderne browsere som Chrome / Firefox. Men ikke så held med de afskedigede browsere, som som du kan forestille dig, er ret irriterende, forsøger at genlæse dine egne input!
20 + eksempler på smuk form design
Nedenfor er et hurtigt roundup galleri af nogle fantastiske login form designs. Disse er blevet hentet fra hele internettet og omfatter mange former for webapplikationer. Hvis du har forslag til andre websteder, kan du dele dem i kommentarfeltet nedenfor!
Snoggle News
Robo.to
virB
Grooveshark
Storenvy
Dropbox
Green Globe Ideas
FreshBooks
ThemeForest
MailChimp
Base Camp
TestFlight
AwesomeJS
Frigørelse
PopScreen
Gowalla
Kontain
MobileMe
Laterthis
Launchlist
Theidealist
