Dzisiaj chciałbym Ci przybliżyć nieco temat etykiet oraz symboli zastępczych w formularzach. Jak za chwilę zobaczysz, istnieje pewien dylemat związany z ich użytecznością.
➡️ Co to są etykiety i symbole zastępcze?
Etykiety zazwyczaj znajdziesz nad polem wprowadzania. Etykieta opisuje do czego służy dane pole np. “Adres email”.
Natomiast symbol zastępczy znajduje się w środku pola i opisuje przykładową treść wypełnienia np. jan@kowalski.pl. Można powiedzieć, że symbol stanowi instrukcję wypełnienia.
Zastosowanie etykiety oraz symbolu zastępczego przy polu formularza ułatwia zrozumienie danego pola. Dodatkowo osoby słabo widzące, korzystające z czytnika ekranu, mogą (nie zawsze czytnik zauważa to pole) łatwo je usłyszeć. Połączenie symbolu oraz etykiety odpowiada na pytania:
- co to jest za pole? – Adres email
- jaki jest wzór wypełnienia? – jan@kowalski.pl
➡️ Etykieta wewnątrz pola zamiast symbolu
Etykiety oraz symbole zastępcze zestawione wspólnie, poprawiają zrozumienie pola. Niestety dzisiejsze, minimalistyczne projektowanie, w duchu jak najmniejszej ilości elementów, często całkowicie usuwa symbole zastępcze i przenosi etykietę do środka pola w miejsce symbolu zastępczego. Tym sposobem oszczędza się miejsca nad polami, a formularz staje się krótszy.
Jednak zauważ, że gdy zaczynasz pisać, etykieta w środku pola znika ( tak jak robią to symbole zastępcze). Użytkownik może być zdezorientowany, gdy zapomni czego dotyczyło to pole. Ponadto nie widzi wzorca, jak ma wypełnić dane pole, ponieważ symbol zastępczy nie istnieje.
Znikająca etykieta obciąża pamięć krótkotrwałą użytkowników. Użytkownik po najechaniu na pole, nie widzi etykiety opisującej to pole, może więc zastanawiać się, jak miało być wypełnione. Czy w przypadku loginu był to adres email czy nazwa użytkownika?
Zauważ również, że użytkownik nie jest w stanie sprawdzić, czy wszystkie pola zostały poprawnie wypełnione, ponieważ nie widzi etykiet, które opisują pola. Wszak zniknęły one w momencie uzupełniania pól.
➡️ Etykieta na zewnątrz, symbol wewnątrz
Dlatego w tym wypadku, warto trzymać się wypracowanych standardów i zastosować wzorzec znany od dawna. Czyli etykieta nad polem lub z lewej oraz symbol zastępczy w środku.
Pamiętaj również, że symbole zastępcze działają tylko, jeśli faktycznie pokazują jak ma zostać wypełnione dane pole. Zauważ jak wiele formularzy posiada powtórzenie etykiety w symbolu zastępczym. To błąd i niepotrzebna duplikacja treści.
➡️ Czy symbole faktycznie działają?
W kontrze do powyższych słów, stoją badania, które w większości wypadków mówią, że symbole zastępcze bardziej przeszkadzają niż ułatwiają.
Musisz wiedzieć, że puste pola bardziej przyciągają wzrok niż te wypełnione. Minusem stosowania symboli zastępczych jest sytuacja, gdy użytkownik przeoczy jakieś pole, ponieważ będzie myślał, że pole zostało już uzupełnione. Tymczasem będzie to tylko symbol zastępczy. Przy długich formularzach łatwo o takie przeoczenie pola.
Inne minusy stosowania symboli zastępczych:
- zazwyczaj słabszy kontrast tekstu
- nie wszystkie czytniki zauważą symbole zastępcze
- często trzeba wymazać symbol zastępczy ręcznie. Nie znika on po ustawieniu autofokusa w polu.
➡️ Jakie jest najlepsze rozwiązanie?
Jeśli jakieś pole wymaga dodatkowego wyjaśnienia, to zamiast wpisywać je w środku pola jako symbol zastępczy, pozostaw to pole puste. Instrukcję natomiast umieść po za tym polem. Dzięki temu pozbywasz się powyższych problemów z symbolami zastępczymi. Instrukcja będzie zawsze widoczna przy polu.
+ użytkownik zawsze widzi instrukcję, nawet podczas pisania
+ użytkownik zawsze widzi etykietę, nawet podczas pisania
+ etykieta oraz symbol zawsze zostaną przeczytane przez czytniki mowy
+ instrukcja może być dłuższa niż w przypadku zastosowania wewnątrz pola jako symbol zastępczy
+ mniejsza szansa, że użytkownik przeoczy jakieś pole myśląc, że zostało już wypełnione
➡️ A co z etykietą pływającą?
Możesz też zastosować tzw. etykiety pływające, czyli w momencie pisania, etykieta opisowa zostaje przeniesione na górę pola. Pozwala to zaoszczędzić miejsce w formularzu i jednocześnie użytkownik nie musi zastanawiać się co miał wpisać w danym polu. Jednak w tym wypadku nadal pozostaje problem rozpoznania pól, które nie zostały wypełnione.
