Prihlasovacie / registračné formuláre Myšlienky a krásne príklady

Na celom modernom webe vidíme rastúce množstvo miest pre vstup používateľov. Patria sem nákupné vozíky, interaktívne webové hry a určite aj registračné formuláre na webových stránkach. Zdá sa, že dizajnéri by sa mali nielen sústrediť na dizajn stránky, ale tvoriť aj estetiku majú rovnako dôležitú úlohu.

Zvážte, koľko formulárov ste mohli vyplniť v priebehu vašej histórie internetu. Existuje nespočetné množstvo príkladov z fór, vývesných tabuliek, blogov a mnoho ďalších. V tomto článku sa budeme pozrieť na niektoré skvelé triky pri navrhovaní vašich in-page formulárov.

Je rozumné zvážiť niektoré položky z objektívnej perspektívy. Hoci veľa prihlasovacích a registračných formulárov funguje správne s jedným typom webových stránok, neexistuje žiadny konečný rozsudok na to, čo je “najlepší” Riešenie. Použite svoju dizajnovú intuíciu, aby ste použili kúsky z foriem, ktoré smerujete.

Zvážte viac vstupov

Ak chcete začať niečo zvážiť malý kontaktný formulár od Foundation Six Web Design. Áno, toto nie je prihlasovací formulár, takže môže smerovať trochu mimo tému. Avšak, ich dizajn stránok je veľmi pôsobivý a ukáže vám, čo môže malá kreativita dosiahnuť.

Každé z vstupných polí ponúka priestor na zadanie osobných kontaktných údajov - meno, e-mail atď. Štýly idú ďaleko za hranicami obyčajných a ponúkajú užívateľovi vstup do ručne písanej kaligrafie. Tento formát formátovania udrží používateľov v stave zázraku a dosiahne cieľ oveľa vyšších štandardov návrhu.

Budete chcieť implementovať takéto štýly podobné všetkým vašim prihlasovacím stránkam. Určite by som neodporúčal držať sa s rovnakým štýlom vstupného textu a voľbou / výberom ponúk. Pri jogging mozgu pre kreativitu, zvážte, ako by mal byť každý prvok umiestnený: dostatok priestoru medzi vrstvami, veľký ľahko čitateľný text a dokonca aj postranné pruhy na ich priamu e-mailovú linku.

Prihlasovacie polia jQuery

To bolo použité na nespočetných webových stránkach v minulosti a bude určite vidieť v novom veku vzorov. Dlhé dni sú dni, keď štandardné postupy prinášajú používateľom novú stránku pre každý krok prihlasovacieho procesu. Normálne by to znamenalo stránku na zadanie údajov a tiež novú stránku na spracovanie prihlasovacích informácií.

Pixel2Life ponúka fantastický pohľad na nové pole vstupu dát. Z ich domovskej stránky môžete kliknúť na odkaz na prihlásenie a vyvolať dynamické prihlasovacie okno s podporou jQuery. Tento formulár obsahuje volanie Ajaxu do externého PHP skriptu, ktorý kontroluje poverenia vašich prihlasovacích údajov a po spracovaní buď poskytne, alebo odmieta prístup.

Pokračovaním v ďalšom kroku môže šikovný zaregistrovať prihlasovací odkaz priamo pod prihlasovacím poľom. To ponúka oveľa hladšiu používateľskú skúsenosť pre tých, ktorí sa chcú zaregistrovať na webovú stránku, ale nemôžu nájsť odkaz na registráciu.

Ak používateľ nemá účet, ale chce ho vytvoriť, privedie ho na registračnú stránku bez problémov s chybnými stránkami. Prihlasovacie políčko by bolo stále životaschopnou voľbou pre prístup k vášmu vlastnému účtu, avšak umožnením možnosti dávať väčšiu návratnosť a vyšším počtom nových registrujúcich.

Jednoduché registrácie jednej stránky

Ďalšou zmenou paradigmy je nedostatok takých detailov pri registrácii nových účtov. Nie je to nevyhnutne zlý štatistický údaj za predpokladu, že užívatelia sú čoraz netrpezliví pri vyplňovaní údajov. Čísla skutočne naznačujú, že webové stránky s kratšími registračnými stránkami získavajú ťažšie zoznamy nových používateľov denne.

Sikbox ponúka návštevníkom ľahkú možnosť vytvoriť si vlastné vyhľadávacie pole pre webové stránky. Jedinou požiadavkou je vaša vlastná doména, ktorá vám poskytne výsledky vyhľadávania. Vstupné polia sú veľké, text je veľmi jednoduchý na čítanie a tam sú absolútne žiadne reklamy odvrátiť používateľov od úlohy vybudovať ich vyhľadávací formulár!

Teraz to nie je najlepší spôsob, ako vybudovať pri vytváraní vlastnej registračnej stránky pre fórum alebo blogový archív. Tieto štandardné definície vyžadujú aspoň určitý typ e-mailovej adresy / kombinácie používateľského mena spolu s heslom. Niektoré webové aplikácie v novom veku vytvoria dynamické heslá pre používateľov len preto, aby proces registrácie bol rýchlejší.

Samozrejme, že v tomto kompromisu chýba kontrola na konci užívateľa na vytvorenie vlastného hesla, ktoré si mnohí ľudia zvyknú.

Vytvorte efekty efektov

Jednou z najväčších zážitkov pri registrácii, ktoré som kedy vykonal, bolo vytvorenie prvého účtu Tumblr. Domovská stránka ich stránok ponúka prihlasovacie a registračné formuláre umiestnené priamo pod sebou pomocou nových efektov zvýraznenia / vyblednutia CSS3.

Tento systematický prístup je podobný prihlasovacej oblasti Pixel2Life v jQuery. Rozdiel s Tumblr je však, že sieť nemôže ponúkať žiaden obsah tým, ktorí nemajú blog (okrem prehliadania iných účtov). Skutočným prínosom tumblr je vytvorenie vlastného blogu a sledovanie ostatných - a preto hlavným cieľom na titulnej stránke je vytvoriť účet alebo prihlásiť sa.

Existuje niekoľko chýb s týmto systémom. Najvýraznejšie v rámci IE6 / IE7 nepodporuje tieto nové vlastnosti CSS. Na domovskej stránke sa používa aj systém na pridávanie prvkov popisu do vstupných hodnôt formulára - v podstate prerušenie “štandardné” znaky používané pre polia e-mail / heslo.

Tieto štítky vyblednú pri zaostrení v moderných prehliadačoch, ako sú prehliadače Chrome / Firefox. No takéto šťastie s nepotrebnými prehliadačmi, ktoré, ako si viete predstaviť, je dosť nepríjemné a snažia sa znova čítať vlastné vstupy!

20+ Príklady krásneho dizajnu

Nižšie nájdete prehľadnú galériu niektorých fantastických návrhov prihlasovacích formulárov. Tie boli vybrané z celého webu a zahŕňajú početné formy webových aplikácií. Ak máte návrhy pre iné stránky, neváhajte a zdieľajte ich v sekcii komentárov nižšie!

Snoggle News