Formularz logowania / rejestracji Pomysły i piękne przykłady

W całej nowoczesnej sieci widzimy coraz więcej miejsc do wprowadzania danych przez użytkowników. Należą do nich wózki sklepowe, interaktywne gry internetowe, a na pewno formularze rejestracyjne. Wygląda na to, że projektanci nie tylko powinni skupiać się na projektowaniu strony, ale również estetyka formy jest równie istotna.

Zastanów się, ile formularzy wypełniłeś w trakcie swojej historii internetowej. Istnieją niezliczone przykłady z forów, forów dyskusyjnych, blogów i wielu innych. W tym artykule przyjrzymy się kilku świetnym sztuczkom do projektowania formularzy na stronie.

Dobrze jest rozważyć niektóre elementy tutaj z obiektywnej perspektywy. Chociaż wiele formularzy logowania i rejestracji działa dobrze z jednym typem witryny, nie ma ostatecznej oceny tego, co jest “Najlepiej” rozwiązanie. Użyj swojej intuicji projektowej, aby zastosować fragmenty z form, do których dążysz.

Rozważ wiele wejść

Aby rozpocząć, rozważ niewielki formularz kontaktowy od Foundation Six Web Design. Tak, to nie jest formularz logowania, więc może on nieco odciąć temat. Jednak ich wygląd strony jest imponujący i pokazuje, co można osiągnąć dzięki odrobinie kreatywności.

Każde z pól wejściowych oferuje miejsce na wpisanie osobistych informacji kontaktowych - imię i nazwisko, adres e-mail itp. Style wykraczają daleko poza zwykłe, oferując wkład użytkownika w rodzaju odręcznej kaligrafii. Ten typ formatowania zachowa użytkowników w stanie zdumienia i osiągnie cel, jakim jest znacznie wyższy standard projektowania.

Będziesz chciał zaimplementować style podobne do wszystkich stron logowania. Z pewnością nie poleciłbym trzymać się tego samego stylu tekstu wejściowego i opcji / menu wyboru. Podczas biegania po mózgu dla kreatywności, zastanów się, jak każdy element powinien być ułożony: dużo miejsca między warstwami, duży, łatwy do odczytania tekst, a nawet linki boczne do ich bezpośredniej linii e-mail.

Pola logowania jQuery

Zostało to wykorzystane w niezliczonej liczbie stron internetowych w przeszłości i na pewno będzie widoczne w projektach nowej epoki. Dawno minęły czasy, w których standardowe praktyki przyniosłyby użytkownikom nową stronę na każdym etapie procesu logowania. Normalnie oznaczałoby to stronę do wprowadzenia danych, a także nową stronę do przetwarzania informacji logowania.

Pixel2Life oferuje fantastyczny wgląd w nowe pole wprowadzania danych. Na swojej stronie głównej możesz kliknąć link logowania i wywołać dynamiczne pole logowania oparte na jQuery. Ten formularz zawiera wywołanie Ajax do zewnętrznego skryptu PHP, który sprawdza poświadczenia danych logowania i po przetworzeniu udziela lub odmawia dostępu.

Idąc o krok dalej, bystry może zauważyć link rejestracyjny bezpośrednio pod polem logowania. Zapewnia to znacznie łatwiejszą obsługę użytkownikom, którzy chcą zarejestrować się w witrynie, ale nie mogą zlokalizować linku rejestracyjnego.

Jeśli użytkownik nie ma konta, ale chciałby je założyć, przenosi je na stronę rejestracji bez żadnych błędów. Pole logowania nadal byłoby realną opcją dostępu do własnego konta, jednak dopuszczenie opcji daje większe zyski i większą liczbę nowych rejestrujących.

Proste rejestracje jednostronicowe

Kolejny zmienny paradygmat, jaki widzimy, to brak takich szczegółów dla nowych rejestracji kont. Niekoniecznie jest to zła statystyka zakładająca, że użytkownicy stają się coraz bardziej niecierpliwi w wypełnianiu danych. Liczby faktycznie sugerują strony internetowe o krótszym czasie rejestracji cięższy listy nowych użytkowników codziennie.

Sikbox oferuje lekką opcję dla odwiedzających, aby stworzyć własne pole wyszukiwania dla strony internetowej. Jedynym wymogiem jest własna domena niestandardowa, w której mają być wyświetlane wyniki wyszukiwania. Pola wejściowe są duże, tekst jest bardzo prosty do odczytania i istnieje absolutnie żadnych reklam odciągnąć użytkowników od zadania tworzenia formularza wyszukiwania!

Teraz nie jest to najlepsza forma do tworzenia podczas tworzenia własnej strony rejestracji dla forum lub archiwum blogów. Będą one, zgodnie ze standardową definicją, wymagały przynajmniej pewnego rodzaju kombinacji adresu e-mail / nazwy użytkownika wraz z hasłem. Niektóre nowe aplikacje internetowe generują dynamiczne hasła dla użytkowników, aby przyspieszyć proces rejestracji.

Oczywiście kompromisem jest brak kontroli po stronie użytkownika generowania własnego hasła, do którego wielu ludzi jest przyzwyczajonych.

Zbuduj efekt Flashy

Jednym z największych doświadczeń rejestracji było stworzenie mojego pierwszego konta Tumblr. Strona główna ich witryny zawiera zarówno formularz logowania, jak i formularz rejestracyjny umieszczony bezpośrednio pod sobą z nowymi efektami wyróżniania / zanikania CSS3.

To systematyczne podejście jest podobne do obszaru logowania jQuery w Pixel2Life. Jednak różnica w stosunku do Tumblr polega na tym, że sieć nie może oferować żadnych treści osobom bez bloga (oprócz przeglądania innych kont). Prawdziwą korzyścią z tumblr jest tworzenie własnego bloga i śledzenie innych - zatem głównym celem na pierwszej stronie jest utworzenie konta lub zalogowanie się.

W tym systemie jest kilka błędów. W szczególności w IE6 / IE7 nie obsługujących tych nowych właściwości CSS. Na stronie głównej jest również używany system dodawania elementów etykiety do wartości wejściowych formularza - zasadniczo zastępujący “domyślna” znaki używane w polach e-mail / hasło.

Etykiety te zanikają w nowoczesnych przeglądarkach, takich jak Chrome / Firefox. Ale nie ma szczęścia z przestarzałymi przeglądarkami, które, jak można sobie wyobrazić, są dość denerwujące, próbując ponownie odczytać własne dane!

20+ przykładów pięknego wzornictwa

Poniżej znajduje się szybka galeria obłożenia niektórych fantastycznych projektów formularzy logowania. Zostały one wybrane z całej sieci i zawierają liczne formy aplikacji internetowych. Jeśli masz sugestie dotyczące innych witryn, możesz je udostępnić w sekcji komentarzy poniżej!

Snoggle News