Strona główna » Wzorce projektowe

Formularze rejestracji i logowania na mobile

15 listopada 2011 napisała Iga [ Brak odpowiedzi ] Drukuj wpis

O formularzach webowych napisano wiele (z książką Luka Wroblewskiego – Web Form Design: Filling in the Blanks na czele). Bez problemu znajdziecie też liczne galerie pięknych (częściej) i użytecznych (rzadziej) webowych formularzy logowania, np. 40 attractive login registration form designs, 100 sites with outstanding login forms. Jednak narzędzia mobilne dostarczają nowych ograniczeń, przy których nawet tak proste formularze, jak logowania, mogą sprawić projektantom problemy. O jakich sprawach nie powinniśmy zapominać przy tworzeniu formularzy rejestracji i logowania na smartfony?

Wyraźnie odróżnij logowanie od rejestracji

Użytkownikom zdarza się mylić rejestrację z logowaniem (jak pokazuje doświadczenie z różnych testów z użytkownikami). Dlatego warto wyraźnie odróżnić obie akcje dodatkowym komunikatem, czego dobry przykład daje Kik.

Aplikacja Kik - ekran startowy

Stosuj zawsze widoczne etykiety

W przypadku ograniczenia dostępnej powierzchni kuszące jest, aby etykiety zawrzeć w samych polach formularza. Powoduje to jednak znikanie opisów w trakcie wprowadzania danych. Gdy coś przerwie użytkownikowi wypełnianie formularza, może już nie pamiętać, jaką daną miał wpisać. Bardziej użytecznym rozwiązaniem jest więc prezentacja etykiet ponad polami (jak robią to aplikacje Viddy i Pageonce) lub obok edytowalnych pól (jak w przypadku Evernote czy Airbnb).

Aplikacje Viddy i Pageonce
Aplikacje Airbnb i Evernote

Mów językiem użytkownika

Aby uniknąć stosowania trudnych terminów, jak rejestracja, można powiedzieć „stwórz konto” lub „dołącz”, albo – jak robi to Dropbox – „I’m new to Dropbox” . Zamiast trudnych opisów błędu można zwrócić się do użytkownika po ludzku, na wzór aplikacji Soundcloud, która mówi „Oooops! We couldn’t log you in”. Czy na pewno użyłeś prawidłowego maila i hasła?

Aplikacje Dropbox i Soundtrack

Wyraźnie odróżnij akcje pierwszo od drugorzędnych

W przypadku prezentacji kilku przycisków na jednym ekranie należy wyróżnić pierwszorzędny przycisk, tak aby ułatwić użytkownikowi interakcję. Dlatego Viddy niebieskim kolorem wyróżnia przycisk akceptacji (Create), a kolorem szarym prezentuje dodatkową opcję wyboru zdjęcia. Z kolei Soundcloud kładzie wyraźnie większy nacisk na logowanie przez Facebook, zachęcając tym samym do takiej formy łączenia się z aplikacją. Użytkownicy Facebooka nie muszą sobie „zawracać” głowy dodatkowymi opcjami logowania/rejestracji.

Aplikacje Viddy i Soundcloud

Skracaj procesy

Nikt nie lubi wypełniać formularzy, szczególnie na komórce, dlatego należy maksymalnie uprościć i skrócić ten proces. Dobrym rozwiązaniem jest zachęcanie do logowania przy użyciu posiadanych kont Facebooka czy Twittera (jak robią to Pinterest i Gowalla). Z kolei aplikacja Path postawiła nacisk na akcję logowania, jako częstszą aktywność niż rejestracji. Użytkownik domyślnie widzi formularz logowania, co w większości przypadków skraca jego interakcję o jeden krok. Dobrą koncepcją jest także połączenie formularza rejestracji i logowania – niezależnie od wybranej opcji użytkownicy Runtastic wprowadzają takie same dane.

Aplikacje Pinterest i Gowalla

Aplikacja Path

Aplikacja Runtastic

Informuj o statusie systemu

Użytkownik zawsze powinien być informowany o tym, że system wykonuje jakąś akcję. Przy wysyłaniu danych na serwer powinien więc zostać wyświetlony komunikat wraz z wizualizacją procesu (preloader), tak jak na przykładach Evernote i Last.fm.

Aplikacje Evernote i Last.fm

Zapobiegaj błędom

W aplikacjach przyjęło się wyłączać przyciski akcji do czasu wypełnienia wszystkich wymaganych pól formularza. Wyraźne odróżnienie wyglądu przycisku i jego nieaktywność  w aplikacjach Dropbox i Gowalla w nieinwazyjny sposób komunikują użytkownikowi, że nie wypełnił jeszcze wszystkich pól. Takie rozwiązanie wymusza jednak na użytkowniku, aby sam domyślał się, co jest przyczyną nieaktywności przycisku.

Zapobieganie błędom to także stosowanie się do standardów, do których przyzwyczajeni są użytkownicy. Antyprzykładem jest tu Hashable, który w standardowym miejscu potwierdzania akcji (prawy górny róg menu nawigacyjnego) umieścił przycisk Reset, powodując prawdopodobnie wiele frustrujących interakcji, kiedy zamiast wysłać wypełniony formularz, użytkownicy kasują wprowadzone przez siebie dane.

Aplikacja Dropbox i Gowalla

Aplikacja Hashable

Efektywnie komunikuj o błędach

Najczęściej spotykaną formą prezentacji komunikatów błędów w formularzach logowania czy rejestracji są wyskakujące na nowej warstwie okna dialogowe. Ich poważnym minusem jest zasłanianie treści – użytkownik widzi albo komunikat, albo treść którego komunikat dotyczy. Evernote stosuje użyteczną formę walidacji, którą kojarzymy z sieci – źle wypełnione pola są oznaczone intuicyjną ikoną, a w pobliżu pola pojawia się dymek ze stosownym komunikatem. Z kolei Kik posiada dynamiczną walidację formularza rejestracji, sprawdzając na bieżąco poprawność wprowadzonych danych i komunikując wynik za pomocą ikon. Niestety w przypadku źle wypełnionego pola użytkownik nie dostaje na bieżąco informacji o przyczynie problemu.

Aplikacje MyNetDiary i Evernote

Aplikacja Kik

Logowanie – dostosuj wymiary do ograniczeń urządzenia

Formularze logowania powinny być maksymalnie krótkie i w pełni widoczne w trakcie wprowadzania danych. Dotyczy to zarówno pól, ich etykiet, jak i przycisku zatwierdzania. Zarówno LinkedIn, jak i Evernote prezentują dwa krótkie pola oraz duży, wyróżniający się przycisk akcji. Z kolei Hipster wykorzystuje standardowy przycisk akceptacji w pasku nawigacyjnym.

Aplikacje LinkedIn, Evernote i Hipster

Logowanie – nie zapomnij o przypominaniu hasła

Wszyscy mamy pamięć dobrą, ale krótką, dlatego każdemu z nas zdarzyło się kiedyś zapomnieć hasła do jakiejś e-usługi. Obowiązkowo więc przy formularzu logowania powinna być opcja odzyskiwania hasła. Oczywiście jako akcja drugorzędna względem akceptacji logowania.

Aplikacje Groupon i Instagram

Rejestracja – umożliwiaj czytanie regulaminów i polityki prywatności

Podawanie danych wiąże się z bezpieczeństwem, a zakładanie konta – zwykle z akceptacją regulaminu e-usługi. Dostęp do tych dokumentów powinien być łatwy i zawsze w zasięgu ręki użytkownika, tak jak na przykładzie aplikacji SoundCloud, gdzie zastosowano odnośniki do obu treści. Należy też zadbać o odpowiednio duży obszar klikalny, o czym więcej pisała Basia.

Aplikacja Soundcloud

Rejestracja – odróżniaj pola wymagane od opcjonalnych

Ogólna zasada mówi, aby nie stosować w formularzach rejestracji pól, których wypełnienie nie jest wymagane do założenia konta. Jeśli jednak musisz zastosować takie pole, warto je opisać dodatkową informacją (opcjonalne), jak na przykładach Instagram i Foursquare.

Aplikacje Instagram i Foursquare

Rejestracja – informuj o korzyściach

To, że ktoś pobrał aplikację, nie oznacza jeszcze, że skorzysta z usługi. Ludzie mają spore opory przed tworzeniem kolejnych kont w kolejnych aplikacjach/serwisach. Dlatego warto komunikować o korzyściach, jakie płyną z rejestracji. Hipster robi to w formie graficznych slajdów informujących o funkcjonalnościach, a Gowalla – w formie krótkich opisów wyróżnionych stosownymi ikonami. Obie aplikacje kładą duży nacisk na informowanie nowych użytkowników o założeniach aplikacji. W przypadku programów Dropbox (link do filmu video o aplikacji) i Instagram (zwięzły opis tekstowy) komunikaty te mają mniejszą wagę.

Aplikacje Hipster i Gowalla

Aplikacje Dropbox i Instagram

Nie wymagaj logowania, jeśli nie ma takiej potrzeby

A na końcu coś, od czego właściwie powinnam zacząć – nie należy wymagać rejestracji i logowania, jeśli/dopóki nie jest to naprawdę konieczne. Warto chociaż zaplanować tzw. leniwą rejestrację, o której pisała już Ewa. Zanim użytkownik poproszony zostanie o wypełnienie formularza, ma możliwość wypróbowania aplikacji, czy  to poprzez dostęp do wersji testowej, czy to do pełnej wersji aplikacji. Alternatywą jest też automatyczne tworzenie konta, które może być uzupełnione  lub edytowane w dowolnej chwili przez użytkownika – tak robi np. Posterous. Manifest, nawołujący do rezygnacji z rejestracji, Luke Wroblewski napisał już w 2008 roku, jednak wymóg tworzenia konta nadal jest wszechobecny. Jeśli musimy faktycznie skorzystać z tych formularzy, to warto chociaż zaprojektować je dobrze.

Aplikacje RunKeeper i Posterous

Warto poczytać

Wroblewski, L. (2008) Sign Up Forms Must Die. A List Apart Magazine No. 255

Lehtimaeki, J. (2011) Dos and don’ts: Don’t force user to login. Android UI Design Patterns

 

Autorka

Iga Mościchowska

www: http://witflow.com
Managing Partner i UX Director w firmie WitFlow. Z zamiłowania projektant interakcji i badacz użyteczności, z wykształcenia socjolog. Szkoli, wykłada na AGH, występuje na konferencjach branżowych. Pracowała m.in. dla marek: Amica, Agora, eBay Classifieds, Egmont, Maspex Wadowice, MSZ, Polskapresse, PWN.pl, Vattenfall, a także dla licznych startupów. Czytaj więcej
Tagi: , , , , , ,