Formularze są jednym z najważniejszych elementów każdej strony www – od prostego logowania do skomplikowanych wniosków rejestracyjnych lub kalkulatora, dlatego też przedstawimy Wam, jak powinna wyglądać praca nad formularzem.
W ramach tego artykułu stworzymy formularz rejestracji pacjentów do prywatnej Opieki Zdrowotnej.
W swojej pracy spotkacie się z dwoma przypadkami pracy nad formularzem.
Pierwszy – to sytuacja w której otrzymujemy dokładną (lub mniej dokładną) specyfikacje formularza, czyli co ma on posiadać, jakie informacje zbierać, co przeliczać i jaki wynik powinien zostać wyświetlony.
Druga możliwość, to tylko szczątkowe informacje od klienta lub nasza wizja produktu, jaki chcemy wprowadzić. W tym momencie należy wpisać jakie cele powinien spełniać nasz formularz, a dokładniej jakie informacje chcemy otrzymywać lub jaki wynik ma być zwrócony.
Następnie, jak mamy już zadeklarowane cele, należy się zastanowić jakie informacje są nam potrzebne, aby te cele osiągnąć.
Przykład:
Chcemy wykonać rejestrację pacjentów w prywatnej przychodni. Mamy do dyspozycji lekarza pierwszego kontaktu, stomatologa, chirurga oraz ortopedę. Każdy z lekarzy ma indywidualnie ustalony termin wizyty.
Z tych informacji możemy wywnioskować jakie pola lub jakie informacje użytkownik musi wypełnić, aby zarejestrować się do specjalisty, tak więc:
Jeśli ma to być dobrze zaprojektowany oraz działający formularz, teraz należy zastanowić się jakie informacje mają być pierwsze, a które ostatnie. Ta kolejność będzie wynikać z zależnych od siebie informacji oraz od sortowania danych.
Przykład:
Państwo -> województwo -> miasto -> ulica
Rok -> miesiąc -> dzień -> godzina -> minuta – sekunda
Marka -> rok -> model -> silnik
Wracając, aby wyświetlić terminy jakie są wolne, najpierw trzeba wybrać specjalistę.Bezmyślne będzie wybranie terminu,a B, następnie specjalisty, a ostatnim wynikiem będzie informacja „W tym terminie lekarz nie przyjmuje. Proszę wybrać inny termin” – można też dodać informacje kiedy jest lekarz wolny, ale czy warto tak ratować sytuację?
Tak więc, ścieżka użytkownika powinna wyglądać tak:
Dane pacjenta -> Specjalista -> Termin
W tym przykładzie uznamy, że danymi pacjenta będą:
Jaki specjalista:
Termin:
Wiemy już co chcemy uzyskać, teraz powinniśmy stworzyć szkielet formularza oraz zastanowić się jaki rodzaj pola dobrać do danych oraz łatwe zaznaczenie właściwej odpowiedzi będzie mówić nam o rodzaju inputu.
| Ciąg znaków | Input |
| Czas | Data picker (kalendarz) |
| Opcja wyboru | Select lub lista rozwijalna |
| Potwierdzenie/zaprzeczenie | Checkbox |
| Zakres | Slider |
Nasze pola:
| DANE PACJENTA | Imię i nazwisko | input |
| Telefon | input | |
| Input | ||
| SPECJALISTA | Nazwa specjalisty | Select lub lista rozwijalna |
| TERMIN | Czas | Data picker |
Do tej pory mówiliśmy o teorii, czas na zadania praktyczne. Zaczniemy od stworzenia szkieletu formularza (makiety funkcjonalnej) na poczet testów użyteczności. Jest to czas, aby zastanowić się jak ma wyglądać oraz działać wybór terminu, który jest zależny od wyboru specjalisty. Jest to główne, działanie w naszym przykładzie.
Uznaliśmy, że do terminu należy wykorzystać datapicker, ale potrzebuje on modyfikacji, ponieważ należy rozróżnić wolne terminy. Z wyborem roku, miesiąca oraz dnia, nie będzie problemu, gdyż wykorzystamy do tego kalendarz z oznaczeniem wolnego terminu jako podświetlenie dnia. Kalendarz jest najlepszym sposobem wyboru terminu, daje on szybki podgląd oraz zorganizowanie sobie własnego kalendarza. Dodatkowo jest on często spotykany i nie budzi obaw przed nowymi rzeczami.
Do wyboru danej godziny wykorzystamy selecty. Warto też pokazać wszystkie, nawet te niedostępne godziny, ponieważ lepiej dać pacjentowi możliwość podglądu w które godziny lekarz też jest dostępny, po to, aby szybko zmienić potem na wolny dzień w godzinie która nas najbardziej interesuje.
Mamy już gotowy szkic, teraz pora na pierwsze testy makiety, aby sprawdzić czy to co uznaliśmy za dobre jest w praktyce faktycznie dobre. Można też wykonać też inne alternatywne widoki do testów A/B.
Nie ma nic gorszego niż nieczytelne pola formularza, których nie da się odróżnić od przycisku! Jeżeli użytkownik nie wie, które pole służy do wprowadzania danych, to na pewno nie dokończy rejestracji lub nie wyśle pytania, na którym tak bardzo nam zależy.
Przy doborze odpowiedniej typografii należy również pamiętać o starszych użytkownikach Internetu dla których mały i udziwniony font może być nieczytelny. Dobrze dobrany font da nam pewność, że będzie on czytelny na każdej wersji, czy to desktopowej czy też mobilnej.
Poruszana wcześniej czytelność, dotyczy się przede wszystkim wszelkich przycisków call-to-action.
Zadbaj o odpowiednią kolorystykę przycisków oraz zminimalizuj ich ilość, nic nie utrudnia przechodzenia procesu wypełniania formularza, jak brak jednoznacznej opcji zakończenia. Pamiętaj, aby przycisk był dobrze opisany, tak aby nie wzbudzał u użytkownika obaw co się stanie po kliknięciu.
Jeżeli tylko to możliwe, ogranicz ich ilość do minimum, jeśli nie masz takiej możliwości to wyróżnij przycisk odpowiednim kolorem.
Jeżeli tylko możesz – używaj jednej kolumny. Duże objętościowo teksty na stronach są nieczytane przez użytkowników. Dodatkowo jedna kolumna wpływa na spokojniejsze i wygodne uzupełnianie treści, nie trzeba „ruszać mocno wzrokiem” po całym ekranie, aby coś uzupełnić.
Przy 2 – 3 kolumnach niektóre pola mogą zostać pominięte.
Według badań wynika, że formularze są zakończone szybciej, jeśli etykiety są nad polami, pozwalając zachować tzw. “flow” czyli płynność pracy z formularzem.
Upewnij się też, że jest wystarczająco dużo wysokości pomiędzy polami, dzięki czemu użytkownicy nie będą się mylić. Dodatkowo pola formularza powinny zostać ułożone w intuicyjny sposób.
Jeżeli jesteśmy już przy grupowaniu, to podstawowym zabiegiem ułatwiającym rozróżnienie informacji jest wyraźne i logiczne zaznaczenie grupy do jakiej należeć będą podawane informacje.
Nad każdą grupą umieść etykietę z czytelnym opisem grupy. Dzięki temu, użytkownik nie musi przerywać procesu wypełniania formularza by znaleźć wzrokiem brakujące dane.
Biorąc powyższe porady oraz to co do tej pory wykonaliśmy – tak prezentuje się nasz finalny projekt formularza.
Jest to bardzo ważna część pracy nad formularzami. Musimy zasymulować sytuacje, w której użytkownik będzie wypełniać formularz.
Tak więc, zastanów się w jaki sposób będą wyświetlane błędy walidacji oraz jeśli napotkasz jakieś problemy lub uznasz, że coś mogłoby być niejasne, należy to w jakiś sposób naprawić.
Przy nieprawidłowym wypełnieniu pola pojawia się informacja o błędzie, co umożliwia użytkownikowi szybką poprawę.
Istnieją dwie metody walidacji od strony technicznej:
Dlatego też najlepszym rozwiązaniem jest powiązanie tych metod co sprawi szybką walidacje, pełne bezpieczeństwo oraz lepsze doświadczenia użytkownika z naszym formularzem.
Sam sposób wyświetlania błędu jest bardzo ważny! Pop-up, chociaż często stosowany jest złym pomysłem, ponieważ odrywa użytkownika od formularza, przykrywa go, oraz wymaga dodatkowej akcji aby go zamknąć.
Nie ważne czy w naszym formularzu mamy walidację po stronie serwera czy klienta, dobrą praktyką jest podświetlenie odpowiednich pól. w których pojawiły się błędy na kolor czerwony, który jest zrozumiały i oznacza ostrzeżenie.
Dodatkowo należy dodać informację zaraz pod polem, czego tak naprawdę dotyczy błąd. Musi to być krótka oraz treściwa informacja jak np. zły format e-mail.
Podczas błyskawicznej walidacji warto zwrócić informację, że pole nie zawiera błędów i jest dobrze wypełnione, zwykle poprzez kolor zielony, aby nie wprowadzać niepewności wśród wypełniających formularz, że coś nie działa lub coś się zacięło.
Dodatkowo podczas długiego wysyłania zapowiedzi do serwera (np. pobranie informacji o firmie) warto dodać ikonę ładowania lub informacje “Proszę czekać” w celu poinformowania o dłuższej operacji.
Staraj się jak najbardziej pomagać użytkownikowi we wprowadzaniu danych, zmniejszając tym samym jego irytację. Dobieraj odpowiedniej wielkości pola przy krótkich tekstach, analogicznie odpowiednio powiększaj przy długich.
Warto stosować podpowiedzi do pól, aby szybciej wypełnić formularz oraz uniknąć potencjalnych błędów. Najczęściej podpowiedzi umieszczane są nad lub obok pola, tak aby odróżniały się od etykiet np. mniejszym fontem czy szarym kolorem.
Przy dacie dodaj możliwość skorzystania z kalendarza.
Im łatwiej szybciej i przyjemniej tym większa szansa na ukończenie formularza.
Oprócz ułatwiania wprowadzanych danych zwróć także uwagę na maskowanie formatów w polach. Mówiąc wprost zaznacz jaki format jest preferowany. To nie tylko ułatwi użytkownikowi wypełnienie pola, ale także jest to obopólna korzyść. Wszystkie Twoje dane przechowywane na serwerach będą spójne.
Nie jest to tylko wymuszenie odpowiedniego formatu, ale także poprawa czytelności np. w przypadku kiedy użytkownik podaje numer bankowy bez spacji, warto zadbać aby formularz sam dodawał znaki spacji w odpowiednie miejsca.
Dodawanie przedrostków lub przyrostków przy polach na pewno poprawi też szybsze oraz poprawne wypełnienie formularza.
Jeżeli już raz wypełniał dane osobowe i są identyczne jak dane do faktury – pozwól mu jednym przyciskiem je przekopiować a nie mozolnie przepisywać.
Na końcu formularza jest mnóstwo rzeczy do zaakceptowania? Zaznacz już wszystkie które są obowiązkowe! Jeżeli możesz dodaj przycisk które zaznaczy je wszystkie na raz.
Pamiętaj, dobieraj odpowiednie pola do pytań. Jeżeli możliwa jest jedynie jedna odpowiedź użyj radiobuttonów, jeżeli więcej – checkboxów.
Bardzo ważna część formularza, aby odróżnić człowieka od systemowego bota. Najprostszym sprawdzeniem jest przepisanie jakiegoś słowa albo ciągu znaków.
Nie jest w 100% bezpiecznie, ponieważ niektóre boty potrafią “wyczytać” cyfry lub tekst.
Warto postawić na Google reCaptcha jest to w pełni darmowy plugin do naszej strony, a samo zaznaczenie jest proste dla użytkowników, wystarczy kliknąć w checkboxa “Nie jestem robotem”, natomiast jeśli reCapcha ma wątpliwości poprosi dodatkowo o odczytywanie znaków lub dopasowywanie obrazków na zasadzie „zaznacz podobne zdjęcia”.
Pytaj jedynie o elementy, których potrzebujesz. Jeżeli przy rejestracji pytasz o np. NIP który nie jest informacją potrzebną do rejestracji – na pewno zniechęcisz użytkownika do dalszych działań. Prosty i czytelny przekaz to podstawa.
Na końcu każdego formularza pojawia się przycisk wywołujący wysłanie formularza. Powinno się go umieścić zaraz pod ostatnimi polami, centralnie względem formularza.
Złożone formularze posiadają dodatkowo przycisk “Wstecz” albo “Powrót” co jest naturalne. Należy pamiętać, aby taki przycisk odróżniał się wizualnie od głównego przycisku i nie powinien on być umiejscowiony blisko niego.
Staraj się nie używać ogólnych słów “Wyślij” albo “Zatwierdź”, ponieważ dają one wrażenie ogólnikowe. Zatem kiedy tworzysz formularz rejestracyjny określ co dokładnie zostanie wykonane “Zarejestruj nowe konto” albo co może użytkownik zyskać, aby poprawić konwersję strony “Utwórz moje bezpłatne konto”.
W naszym przykładzie główną akcją jest umówienie wizyty zatem nazwa przycisku będzie brzmiała “Umów wizytę”
Na samym końcu każdego formularza pojawia się informacja odnośnie rejestracji konta, potwierdzenia zgłoszenia czy wysyłania wiadomości.
W naszym przykładzie informacja zwrotną będzie potwierdzenie zgłoszenia, gdzie pokażemy szczegóły wizyty. Jest to też miejsce gdzie ludzie drukują takie strony, aby nie zapisywać wszystkiego na kartce, więc warto zadbać o odpowiednią treść oraz informacje potrzebne dla dalszego działania.
Aby całe UX było dobre, warto zadbać też o to czego w formularzu nie pytaliśmy, a wynika to z po części z danych jakie wybrał użytkownik. Tak więc w naszej informacji możemy umieścić numer gabinetu, adres placówki, telefon do recepcji.
Użytkownicy niechętnie wypełniają długie formularze, dlatego mamy nadzieję, że po przeczytaniu tego artykułu uda się choć trochę poprawić oraz ułatwić wypełnianie waszego formularza. Kilka zmian może przynieść większą konwersję waszej strony oraz ułatwić też pracę wam nad danymi jakie otrzymujecie – chodzi o jeden format danych dzięki zastosowaniu mapowania formatów.
Zawsze wykonuj testy użyteczności, przeprowadzenie kilku testów lub poproszenie znajomych o opinie sprawdzi jak użyteczny jest twój formularz oraz co jest do poprawy.
Staraj się nie wdrażać skomplikowanych formularzy “w biegu” – daj sobie czas na planowanie oraz świeże spojrzenie na temat. Rozłóż prace na np. dwa dni.
Na koniec przygotowaliśmy dla Ciebie małą ściąge dla Twoich prac nad formularzami.
