Sisäänkirjautuminen / rekisteröintilomake Ideat ja kauniit esimerkit
Kaiken kaikkialla nykyaikaisessa verkossa näemme yhä enemmän paikkoja käyttäjätietoja varten. Näitä ovat ostoskärryt, interaktiiviset nettipelit ja varmasti verkkosivujen rekisteröintilomakkeet. Näyttää siltä, että suunnittelijoiden ei pitäisi vain keskittyä sivusuunnitteluun, vaan myös esteettisyys ovat yhtä tärkeitä.
Harkitse, kuinka monta lomaketta olet täyttänyt Internet-historian aikana. Näistä on lukemattomia esimerkkejä foorumeista, ilmoitustauluista, blogeista ja paljon muuta. Tässä artikkelissa tarkastelemme joitakin hienoja temppuja, jotka suunnitellaan sivulomakkeissa.
On järkevää tarkastella joitakin kohtia objektiivisesta näkökulmasta. Vaikka monet kirjautumis- ja rekisteröintilomakkeet toimivat hyvin yhden tyyppisellä sivustolla, lopullista tuomiota ei vaadita, mikä on “parhaat” ratkaisu. Käytä suunnittelun intuitiotasi, jos haluat käyttää bittejä ja kappaleita lomakkeista, joihin pyritte.
Harkitse useita tuloja
Voit aloittaa asiat harkitsemalla pienen yhteydenottolomakkeen Foundation Six Web Designista. Kyllä tämä ei ole kirjautumislomake, joten se voi ohjata hieman pois aiheesta. Niiden sivusuunnittelu on kuitenkin erittäin vaikuttava, ja se näyttää, mitä vähän luovuutta voi saavuttaa.
Jokainen syöttökenttä tarjoaa tilaa henkilökohtaisten yhteystietojen kirjoittamiselle - nimi, sähköposti jne. Tyylit ylittävät tavallisen, tarjoavat käyttäjän syöttämisen käsinkirjoitetun kalligrafian tyypille. Tämäntyyppinen muotoilu pitää käyttäjääsi ihmeellisenä ja saavuttaa tavoitteen, joka on paljon korkeampi.
Haluat toteuttaa tällaisia tyylejä samanlaisia kuin kaikki kirjautumissivusi. En todellakaan suosittele, että käytät samaa tyyliä syötetekstillä ja valinnais- / valintavalikoilla. Ajaessasi aivojasi luovuuteen, mieti, miten jokainen elementti tulisi sijoittaa: runsaasti välilyöntiä kerrosten, suuren helposti luettavan tekstin ja jopa sivupalkin linkkien välillä niiden suoralle sähköpostiviivalle.
jQuery-kirjauskentät
Tätä on käytetty aikaisemmin lukemattomilla verkkosivuilla, ja se näkyy varmasti uudenikäisissä malleissa. Pitkään menneet ovat päivät, jolloin tavanomaiset käytännöt tuovat käyttäjille uuden sivun kirjautumisprosessin jokaiselle vaiheelle. Normaalisti tämä tarkoittaisi sivua syöttää tietojasi ja myös uuden sivun kirjautumistietojen käsittelyyn.
Pixel2Life tarjoaa hienoa tietoa uuteen tietokentän kenttään. Kotisivuilta voit napsauttaa kirjautumislinkkiä ja tuoda esiin dynaamisen jQuery-virtalähteen. Tämä lomake sisältää Ajax-puhelun ulkoiseen PHP-komentosarjaan, joka tarkistaa kirjautumistietosi käyttöoikeudet ja, kun se on käsitelty, se myöntää tai estää pääsyn.
Toisen askeleen ohella järkevä voi huomata rekisteröintilinkin suoraan kirjautumisruutuun. Tämä tarjoaa paljon sujuvamman käyttökokemuksen niille, jotka haluavat rekisteröityä verkkosivustoon, mutta eivät löydä rekisteröintilinkkiä.
Jos käyttäjällä ei ole tiliä, mutta hän haluaa tehdä sen, se tuo ne rekisteröintisivulle ilman virheellisiä sivun häiriöitä. Kirjautumisruutu olisi silti kannattava vaihtoehto omalle tilillesi pääsyä varten, mutta mahdollistamalla vaihtoehdon annetaan lisää tuottoja ja suurempia määriä uusia rekisteröijiä.
Yksinkertaiset yhden sivun rekisteröinnit
Toinen muutosparadigma, jota näemme, on tällaisten yksityiskohtien puuttuminen uusien tilien rekisteröinnistä. Tämä ei välttämättä ole huono tilasto olettaen, että käyttäjät kasvavat kärsimättömästi tietojen täyttämisessä. Numerot viittaavat tosiasiallisesti sivustoihin, joissa on lyhyemmät rekisteröintisivut painavampi luetteloita uusista käyttäjistä päivittäin.
Sikbox tarjoaa kevyen vaihtoehdon, jonka avulla kävijät voivat luoda oman hakukentän verkkosivustolle. Ainoa vaatimus on oma mukautettu toimialue, joka tarjoaa hakutuloksia. Syöttökentät ovat suuria, tekstiä on helppo lukea ja siellä on mitään mainoksia ei ole häiritä käyttäjiä hakumuodon rakentamisen tehtävästä!
Nyt tämä ei ole paras keino rakentaa omaa rekisteröintisivuasi foorumille tai blogiarkistolle. Nämä edellyttävät tavanomaisen määritelmän mukaan ainakin jonkinlaista sähköpostiosoitetta / käyttäjätunnusta ja salasanaa. Jotkut uudenikäiset web-sovellukset luovat käyttäjille dynaamisia salasanoja vain rekisteröintiprosessin nopeuttamiseksi.
Tässä tapauksessa kompromissi ei tietenkään riitä hallitsemaan käyttäjän päätä tuottamaan omat salasanansa, jonka monet ihmiset ovat tottuneet siihen.
Rakenna Flashy Effects
Yksi suurimmista kirjautumiskokemuksista, joita olen koskaan ollut, on luoda ensimmäinen Tumblr-tili. Sivuston kotisivu tarjoaa sekä kirjautumis- että kirjautumislomakkeen, joka on sijoitettu suoraan toistensa alle uuden CSS3-korostus- / häivytysefektin avulla.
Tämä järjestelmällinen lähestymistapa on samanlainen Pixel2Life: n jQuery-kirjautumisalueella. Kuitenkin ero Tumblr on verkko ei voi tarjota mitään sisältöä niille, joilla ei ole blogia (lukuun ottamatta muiden tilien selaamista). Tumblrin todellinen hyöty on luoda oma blogisi ja seurata muita - näin pääsivusi etusivulla on joko luoda tili tai kirjautua sisään.
Tässä järjestelmässä on joitakin vikoja. Etenkin IE6 / IE7: ssä, joka ei tue näitä uusia CSS-ominaisuuksia. Myös kotisivulla käytetään järjestelmää, jonka avulla voidaan lisätä tarraelementtejä lomakkeen syöttöarvoihin - periaatteessa ylittämällä “oletusarvo” kirjaimet, joita käytetään sähköposti- / salasana-ruutuihin.
Nämä tarrat haalistuvat nykyaikaisissa selaimissa, kuten Chrome / Firefoxissa. Mutta tällaista onnettomuutta vanhentuneilla selaimilla, jotka, kuten voitte kuvitella, on aivan ärsyttävää yrittää lukea uudelleen omaa panostasi!
20+ esimerkkejä kauniista muotoilusta
Alla on lyhyt galleria, jossa on upeita sisäänkirjautumislomakkeita. Nämä on valittu verkosta ja ne sisältävät useita web-sovellusten muotoja. Jos sinulla on ehdotuksia muille sivustoille, voit jakaa ne kommenteissa alla!
Snoggle News
Robo.to
Virb
Grooveshark
Storenvy
Dropbox
Green Globe Ideas
Freshbooks
ThemeForest
MailChimp
BaseCamp
TestFlight
AwesomeJS
Lukituksen
PopScreen
Gowalla
Kontain
MobileMe
Laterthis
Launchlist
Theidealist
