Dostępność formularzy: etykiety i opisy pól w praktyce
Formularz na stronie internetowej bywa jednym z najbardziej niedocenianych elementów interfejsu. Użytkownik trafia na niego w konkretnym celu: chce się zapisać, kupić produkt albo wysłać zapytanie. Jeśli już na tym etapie napotyka przeszkody, rezygnuje. Najczęstszym problemem nie jest wcale zbyt duża liczba pól, lecz brak czytelnego powiązania między opisem a samym polem. Kiedy etykieta nie jest klikalna, osoba korzystająca z myszki musi precyzyjnie trafić w niewielki obszar inputu, a to irytuje zwłaszcza na ekranach dotykowych.
Rozwiązanie jest proste i dobrze udokumentowane. Wystarczy zadbać o to, by każda etykieta była poprawnie skojarzona z odpowiadającym jej polem. Mechanizm ten opisano szczegółowo w artykule o tym, jak działa label powiązany z polem — kliknięcie w tekst etykiety ustawia kursor w polu, które można wtedy od razu wypełniać. Z perspektywy użytkownika to drobiazg, ale realnie skraca czas wypełniania i zmniejsza liczbę pomyłek. Osoby korzystające z czytników ekranu również zyskują, bo aplikacja wie, do czego odnosi się dany opis.
Odpowiednio zaprojektowane opisy pól pełnią jeszcze jedną funkcję: informują, czego dokładnie oczekujemy. Zamiast enigmatycznego „Login” lepiej napisać „Nazwa użytkownika (min. 6 znaków)”. Krótka podpowiedź pod polem, np. o wymaganym formacie daty czy numeru telefonu, ogranicza liczbę błędów walidacji. Warto też pamiętać o kontraście tekstu i odpowiedniej wielkości czcionki — etykieta, której nie da się przeczytać, nie spełnia swojej roli niezależnie od tego, jak dobrze jest technicznie powiązana z polem.
Dostępność formularzy nie jest dodatkiem dla wąskiej grupy odbiorców. To po prostu dobra praktyka projektowa, która przekłada się na wyższą konwersję i mniej frustracji po obu stronach. Zadbaj o widoczne etykiety, sensowne komunikaty pomocnicze i poprawne skojarzenia w kodzie — a użytkownicy odwdzięczą się tym, że dokończą to, co zaczęli.