Zacznij od zadania, które użytkownik chce wykonać
Na telefonie wypełnianie formularza wymaga więcej uwagi niż na dużym ekranie. Klawiatura zasłania część strony, łatwiej też dotknąć niewłaściwego miejsca. Dlatego przed poprawianiem wyglądu formularza ustal, jakie dane są potrzebne do wykonania konkretnego zadania. W formularzu kontaktowym może wystarczyć adres e-mail i treść wiadomości. Jeśli odpowiedź ma przyjść wyłącznie e-mailem, numer telefonu nie musi być polem obowiązkowym.
Przejdź przez każde pole i zapytaj: do czego służy, kto z niego skorzysta i czy można pozyskać tę informację później? Rozdziel dane niezbędne od opcjonalnych, a opcjonalność jasno oznacz. Nie dodawaj pola „potwierdź e-mail” tylko dlatego, że występuje w innych serwisach. Gdy wpis wymaga określonego formatu, pokaż prosty przykład przy polu, zanim użytkownik wyśle formularz. Krótszy formularz nie zastąpi poprawnej obsługi zgłoszenia, ale ogranicza pracę potrzebną do jego wysłania.
Dobierz pola i klawiaturę do rodzaju danych
Każde pole powinno mieć widoczną etykietę, która pozostaje zrozumiała także po rozpoczęciu pisania. Sam tekst zastępczy wewnątrz pola nie wystarczy: znika po wpisaniu wartości i trudno wtedy sprawdzić, czego dotyczy odpowiedź. Ustaw pola w logicznej kolejności, najlepiej w jednej kolumnie. Pole wiadomości powinno dawać miejsce na kilka zdań, a przyciski i opcje wyboru powinny być łatwe do dotknięcia bez powiększania strony.
Typ pola wpływa na klawiaturę wyświetlaną przez telefon. Dla adresu e-mail użyj pola przeznaczonego na e-mail, a dla numeru telefonu pola typu tel. Nie traktuj jednak każdego ciągu cyfr jak liczby do obliczeń: kod pocztowy czy numer zamówienia może zawierać zera na początku lub znaki. Tam, gdzie to odpowiednie, włącz autouzupełnianie danych, takich jak imię, adres czy e-mail. Użytkownik powinien też móc wkleić wartość zamiast przepisywać ją ręcznie.
Jeśli pole ma ścisłe wymagania, wyjaśnij je obok etykiety. Przykładowo przy identyfikatorze zamówienia napisz, gdzie go znaleźć. Unikaj wymuszania spacji, myślników lub nawiasów, jeśli system może samodzielnie zinterpretować wpis. Takie ograniczenia szczególnie przeszkadzają osobie korzystającej z telefonu.
Pokaż błąd tam, gdzie można go naprawić
Komunikat „Nieprawidłowe dane” nie mówi, co zrobić dalej. Lepszy jest opis konkretnego problemu przy właściwym polu, na przykład „Wpisz adres e-mail w formacie nazwa@domena.pl”. Po próbie wysłania warto dodatkowo wskazać na początku formularza, że wystąpiły błędy, i umożliwić przejście do wymagających poprawy pól. Nie opieraj informacji wyłącznie na czerwonym kolorze: tekst pozostaje czytelny również dla osób, które nie rozróżniają barw.
Nie kasuj poprawnie wpisanych danych po błędzie. Sprawdź również, czy komunikat nie pojawia się zbyt wcześnie, gdy użytkownik dopiero zaczyna pisać. Błędy formatu można sygnalizować po opuszczeniu pola albo przy próbie wysłania, zależnie od sytuacji. Po poprawieniu wpisu usuń nieaktualny komunikat. Jeśli wysyłka się nie powiedzie, odróżnij problem z danymi od problemu technicznego i powiedz, czy można spróbować ponownie.
Zadbaj o płynne działanie na słabszym połączeniu
Wygodę formularza obniża nie tylko układ, ale też sposób jego działania. Jeśli użytkownik musi czekać na załadowanie dodatkowych skryptów, zanim będzie mógł wybrać pole, sprawdź, czy wszystkie są potrzebne. Ogranicz zbędne efekty i nie przesuwaj pól w trakcie wpisywania. Przycisk wysyłki powinien mieć jednoznaczną nazwę, na przykład „Wyślij zapytanie”, oraz wyraźny stan po dotknięciu.
Po wysłaniu pokaż zrozumiałe potwierdzenie albo informację o niepowodzeniu. Jeżeli operacja trwa, poinformuj, że zgłoszenie jest przetwarzane; jednocześnie ogranicz przypadkowe wielokrotne wysłanie. Nie sugeruj sukcesu, zanim formularz rzeczywiście otrzyma potwierdzenie. Sprawny formularz może ułatwić korzystanie ze strony, lecz sam w sobie nie gwarantuje lepszych pozycji w wyszukiwarce.
Krótka lista kontroli przed publikacją
Otwórz formularz na telefonie i spróbuj wypełnić go bez pomocy osoby, która go projektowała. Sprawdź po kolei: czy każde pole jest potrzebne; czy etykiety są widoczne; czy telefon pokazuje właściwą klawiaturę; czy da się korzystać z autouzupełniania i wklejania; czy po otwarciu klawiatury widać aktualne pole i jego wskazówki. Przetestuj także powiększenie widoku oraz przechodzenie między polami za pomocą klawiatury.
Następnie wyślij pusty formularz, wpisz błędny e-mail i popraw go. Upewnij się, że komunikaty wskazują problem, pozostają czytelne i nie usuwają pozostałych odpowiedzi. Na koniec sprawdź zachowanie przy wolnym połączeniu i nieudanej wysyłce. Przeprowadź te próby dla typowych formularzy w serwisie, nie tylko dla strony kontaktowej: formularz zapytania o produkt lub rejestracji może mieć inne trudności.
