Co ja tu miałem wpisać, czyli czego wystrzegać się w formularzach mobilnych?

Prawdziwym celem większości stron internetowych nie jest zachęcenie użytkowników do naciśnięcia przycisku Call To Action (np. załóż konto, kup, zarezerwuj itp.) na stronie docelowej, lecz wypełnienie i przesłanie formularza, który pojawia się na kolejnym ekranie. Ułożenie elementów formularza względem siebie ma duży wpływ na łatwość, z jaką użytkownicy je wypełniają. Jest to szczególnie istotne na urządzeniach dotykowych.

Każdy formularz składa się z tych samych elementów – pól, w które użytkownicy wpisują dane i etykiet, które informują, jakie informacje mają być wpisane w konkretne pola. W artykule tym zostaną omówione wady i zalety 3 najpopularniejszych metod konstrukcji formularzy, tj.:

1. Ułożenie wertykalne, w którym etykieta znajduje się nad polem, które opisuje.

Rysunek 1. Wertykalne ułożenie formularza rejestracji w aplikacji Pizzaportal.pl

2. Ułożenie horyzontalne, w którym etykieta znajduje się obok pola.

Rysunek 2. Wertykalne ułożenie elementów formularza w aplikacji Doz.pl

3. Etykiety umieszczone są wewnątrz pól formularza (ang. Inline Labels)

Rysunek 3. Inline labels zastosowany w aplikacji Getin  Banku

Wspomniane metody zostały ocenione według wyglądu oraz łatwości wprowadzania danych na urządzeniu dotykowym.

Wygląd formularza

Jedną z głównych barier, które zniechęcają użytkowników do wypełnienia formularzy, jest ich wielkość – im więcej pól należy wypełnić, tym mniej chętnie pochodzimy do zadania. W zależności od tego, którą metodę tworzenia formularzy wybierzemy, ten sam formularz może wydawać się prostszy lub bardziej skomplikowany.

Metodą, która w najefektywniejszy sposób wykorzystuje przestrzeń jest Inline Labels. Dzięki umieszczeniu etykiet wewnątrz pól formularza ograniczona zostaje liczba elementów i formularz staje się wizualnie prostszy. Poniżej znajdują się zrzutki ekranów zakładania konta aplikacji Cleartrip, Photobucket oraz Skype, które wymagają wpisania bardzo podobnych danych:

Na każdym z powyższych ekranów użytkownik musi uzupełnić po 6 pól. Na pierwszym ekranie (aplikacja Cleartrip) znajduje się najmniej elementów, natomiast najbardziej skomplikowany wydaje się być proces zakładania konta w aplikacji Skype. Metodą, którą można umieścić „pomiędzy”, jest horyzontalne ułożenie elementów formularza w aplikacji Photobucket. Wprawdzie liczba elementów pozostaje taka sama jak w przypadku ułożenia wertykalnego, formularz sprawia wrażenie „krótszego”.

Poprawne wypełnienie i wysłanie formularza zależy jednak w dużej mierze nie od wyglądu ale od łatwości wprowadzania danych.

Łatwość wprowadzania danych

Formularze o wiele chętniej uzupełniamy na urządzeniach wyposażonych w tradycyjną klawiaturę. Jeśli już robimy przelew przy pomocy bankowej aplikacji mobilnej, to głównie do odbiorców zdefiniowanych w systemie. Uzupełnienie wszystkich wymaganych pól przy pomocy klawiatury dotykowej (numer konta, nazwa odbiorcy itp.) jest po prostu zbyt czasochłonne. Którą metodę tworzenia formularza wybrać, aby jego uzupełnienie było najłatwiejsze?

Największe problemy użytkownicy napotykają podczas wypełniania formularza z inline labels. Powodem tych problemów jest utrata kontekstu podczas wpisywania danych. Wielokrotnie podczas badań z użytkownikami obserwowałem sytuację, kiedy badani dekoncentrowali się i nie wiedzieli jakie pole uzupełniają. Jedynym rozwiązaniem w takiej sytuacji jest usunięcie wpisanych znaków. Jeśli formularz jest poprawnie zaprojektowany, po wykasowaniu wszystkich znaków etykieta pojawi się ponownie jak np. w aplikacji dropbox.

Rysunek 4. Po wykasowaniu wszystkich znaków użytkownik może ponownie zobaczyć etykietę uzupełnianego pola

Problem utraty kontekstu nie występuje w prostych, typowych formularzach np.  w formularzu logowania, w którym występują dwa pola: login i hasło. W takim przypadku można zastosować tę metodę bez obaw jak np. w aplikacji pracuj.pl.

Rysunek 5. W prostych formularzach można bez obaw stosować inline labels

Horyzontalne ułożenie elementów formularza również ma poważną wadę. W pionowym ustawieniu smartfonów przestrzeń na etykietę i pole formularza jest bardzo ograniczona. Etykiety nie mogą składać się ze zbyt wielu znaków i muszą być napisane niewielką czcionką. Nawet wtedy jesteśmy narażeni na sytuację, że wpisywane dane nie mieszczą się w polu, co utrudnia sprawdzenie poprawności wpisanych danych. Na problemy takie natrafić można np. podczas rejestracji w aplikacji PeoPay.

Rysunek 6. Pełen adres e-mail nie jest widoczny

Problem ten nie występuje, kiedy trzymamy smartfona poziomo. Przestrzeń na etykietę i pole formularza jest wtedy o wiele większa. W tej orientacji klawiatura ekranowa przysłania jednak znaczą część ekranu, a czasem, jak w aplikacji Photobucket jest jedynym elementem widocznym na ekranie.

Rysunek 7. Jedyną informacją jaka jest widoczna na ekranie jest wymagalność danego pola

Metodą, która najefektywniej wspiera użytkownika w uzupełnieniu danych jest wertykalne ułożenie elementów formularza. Oprócz tego, że jest ona pozbawiona wymienionych wyżej wad, umożliwia umieszczenie w polu formularza podpowiedzi sposobu formatowania wpisywanych danych lub innych informacji wspierających użytkownika np. saldo w aplikacji IKO.

Rysunek 8. Zanim użytkownik poda wartość czeku widzi, jaką sumę może na niego przeznaczyć

Podsumowanie

Najlepszym sposobem rozmieszczenia pól formularza w urządzeniach mobilnych jest układ wertykalny. Jest on szczególnie wskazany w bardziej rozbudowanych formularzach, w których występują nieszablonowe etykiety np. ulica i numer domu w jednym polu. Jeśli już chcemy wykorzystać inline labels możemy to zrobić w prostych formularzach logowania, których elementy są intuicyjne i trudno jest o utratę kontekstu. Zdecydowanie należy unikać formularzy, w których etykiety umieszczone są obok powiązanych pól. Jest to najmniej wydajny sposób rozmieszczenia elementów formularza ze względu na ograniczone rozmiary urządzeń mobilnych.