Etykieta odpowiada na pytanie: co tu wpisać?
Formularz kontaktowy, zapis na newsletter czy dodawanie wpisu do katalogu powinny prowadzić użytkownika od pola do pola bez konieczności domyślania się, o jakie dane chodzi. Etykieta to widoczna nazwa pola, na przykład „Adres e-mail” albo „Treść wiadomości”. Najlepiej, gdy jest krótka, konkretna i pozostaje widoczna także podczas wpisywania odpowiedzi.
Dobieraj nazwy do tego, czego rzeczywiście potrzebujesz. „Telefon kontaktowy” jest jaśniejsze niż samo „Kontakt”, a „Adres strony internetowej” lepiej opisuje oczekiwany wpis niż „Link”. Jeśli formularz prosi o imię i nazwisko w osobnych polach, nazwij je osobno. Jeżeli wystarczy jedna odpowiedź, użyj jednej etykiety, na przykład „Imię i nazwisko”. Nie wymagaj informacji, których formularz nie potrzebuje do swojego celu.
Nie zastępuj etykiety tekstem wewnątrz pola
Tekst wyświetlany wewnątrz pustego pola, często nazywany tekstem zastępczym, może zniknąć po rozpoczęciu pisania. Wtedy osoba wypełniająca formularz traci wskazówkę, szczególnie jeśli wraca do pola po chwili lub sprawdza odpowiedzi przed wysłaniem. Dlatego nazwa pola powinna znajdować się poza obszarem wpisywania i pozostawać widoczna.
Tekst w polu może służyć jako przykład, ale nie jako jedyna instrukcja. Przy polu „Adres e-mail” przykład „anna@example.com” może pokazać oczekiwany format, choć zwykle sama etykieta wystarcza. Gdy potrzebujesz dłuższego wyjaśnienia, umieść je obok pola jako osobną podpowiedź. Zachowaj też czytelny kontrast tekstu: podpowiedź, którą trudno zobaczyć, nie pomoże użytkownikowi.
Podpowiedzi i pola wymagane opisuj przed wysłaniem
Jeśli odpowiedź ma spełniać określony warunek, powiedz o nim zanim pojawi się błąd. Pod etykietą „Opis działalności” możesz dodać: „Napisz jednym lub dwoma zdaniami, czym zajmuje się firma”. Przy polu dotyczącym pliku podaj dozwolony rodzaj pliku, jeśli formularz narzuca takie ograniczenie. Podpowiedź powinna dotyczyć konkretnego pola, a nie być ukryta w długiej instrukcji na początku strony.
Oznaczaj pola obowiązkowe w sposób zrozumiały bez polegania wyłącznie na kolorze. Możesz dopisać „(wymagane)” przy etykiecie albo wyjaśnić na początku formularza, co oznacza użyty symbol. Jeśli większość pól jest obowiązkowa, rozważ oznaczenie pól opcjonalnych. Ważne, by przyjęta zasada była spójna w całym formularzu i nie zmuszała użytkownika do odkrywania jej metodą prób i błędów.
Łącz nazwę pola z kontrolką i wyjaśniaj wybory
W działającym formularzu sama wizualna bliskość napisu i pola nie wystarcza. Etykieta powinna być technicznie powiązana z właściwą kontrolką, aby osoby korzystające z technologii wspomagających mogły ustalić, czego dotyczy. W typowym formularzu warto używać do tego przeznaczonych elementów HTML lub odpowiednich ustawień kreatora formularzy. Nie pomijaj tego kroku tylko dlatego, że układ wygląda poprawnie na ekranie.
Gdy użytkownik wybiera jedną z kilku odpowiedzi, nadaj nazwę całej grupie, a każdej opcji czytelny opis. Przykładowo pytanie „Jak mamy odpowiedzieć?” może mieć opcje „E-mailem” i „Telefonicznie”. Unikaj etykiet takich jak „Tak” i „Nie”, jeśli bez dodatkowego pytania nie wiadomo, czego dotyczą. Kliknięcie napisu przy opcji powinno ułatwiać jej zaznaczenie, także na małym ekranie.
Sprawdź formularz tak, jak zrobi to odwiedzający
Przed publikacją wypełnij formularz bez dodatkowych wyjaśnień od autora strony. Zobacz, czy na podstawie każdej etykiety wiadomo, co wpisać, czy instrukcje są widoczne we właściwym momencie oraz czy da się wygodnie przejść przez pola klawiaturą. Sprawdź również widok na telefonie: długa etykieta może się zawijać, ale nadal powinna wyraźnie należeć do swojego pola.
Celowo zostaw puste pole wymagane i wpisz odpowiedź w niewłaściwym formacie. Komunikat błędu powinien wskazywać konkretne pole oraz mówić, jak poprawić odpowiedź, na przykład „Wpisz adres e-mail w formacie nazwa@example.com”, zamiast wyświetlać samo „Błędne dane”. Po poprawieniu błędu etykieta i wcześniej wpisane informacje powinny nadal pomagać w dokończeniu formularza. Taki krótki test często ujawnia niejasności, których nie widać podczas projektowania.
