Poprzednio skupiłem się na technicznych aspektach oznaczania elementów formularza. Jak obiecałem pociągnę ten temat dalej (trochę mi to zajęło niecierpliwych przepraszam  ).

Grupowanie elementów

Tak jak istotna do zrozumienia idei jest najczęściej kolejność pól formularza tak, zwłaszcza w przypadku bardziej rozbudowanych, konieczny staje się ich podział na logicznie powiązane ze sobą grupy. Na fali zainteresowania użytecznością często w warstwie wizualnej podział formularza jest realizowany, i dobrze. Ale czy przy okazji pamiętamy o użytkownikach, którzy z tej warstwy nie korzystają?

W poprzednim wpisie wspomniałem o znacznikach <fieldset> i <legend>. To dwa powiązane ze sobą elementy często ignorowane, prawdopodobnie ze względu na pewne niedogodności w stylowaniu. To właśnie one najlepiej nadają się do organizowania formularzy.

Poprawnie użyty <fieldset> zbiera objęte sobą elementy powiązane znaczeniowo. A <legend> wnosi dodatkową informację w postaci etykiety grupy W domyślnym stylowaniu oba te elementy reprezentowane są przez ramkę otaczającą pola formularza z etykietką na górnej krawędzi do jakich przywykliśmy korzystając z wszelakich menu opcji systemów okienkowych:AdresUlica, nr domuKod pocztowyMiasto

Para fieldset/legend doskonale nadaje się do zgrupowania opcji reprezentowanych za pomocą pól jednokrotnego (radio) czy wielokrotnego (checkbox) wyboru:Wiek< 1818-2525-5050+

Daje w ten sposób klarowny opis (w warstwie wizualnej i dla użytkowników screenreaderów) zarówno poszczególnych opcji jak również znaczenia pola (złożonego z kilku elementów) jako całości.

Zapewnić jednoznaczne / intuicyjne etykiety

Jeśli zaś chodzi o przekaz, to biorąc pod uwagę dostępność pod kątem osób o obniżonej zdolności rozumienia tekstu, ludzi mniej obytych z terminologią czy językiem obcym warto tak konstruować opisy by były one szybko rozumiane przez jak najszerszą rzeszę użytkowników. Najpopularniejszym przykładem jest chyba pole do wprowadzania nazwy użytkownika, które opisywane jest na wiele sposobów:

• login – anglicyzm, dość powszechnie rozumiany, ale osobom 50+ musiałem czasem tłumaczyć co to
• user – nie dość, że zwrot obcojęzyczny, to w dodatku podobnie jak czasem spotykany polski odpowiednik:
• nick – podobnie jak user
• użytkownik – może nie być rozpoznane na pierwszy rzut ucha jako etykieta zachęcająca do wpisania nazwy
• nazwa użytkownika – etykieta chyba najlepiej oddająca istotę pola tekstowego, które poprzedza

To tylko przykłady, które mają zwrócić uwagę na istotę sprawy. Dobierając określenia / etykiety trzeba zawsze kierować się zdrowym rozsądkiem. Jeśli użytkownikami serwisu w blisko 100% są użytkownicy dobrze obyci z internetem, to nie oszukujmy się – “login” powie im więcej niż “nazwa użytkownika”. Jednak uczulam – podchodźmy bardzo ostrożnie do zawężania grupy odbiorców, jeśli charakter serwisu jednoznacznie tego nie czyni, ani nie bazujemy na danych z badań. Warto się zastanowić, czy np. z serwisu nie korzystają przedstawiciele jakiejś grupy dlatego, że nie są zainteresowani, czy dlatego, że jest po temu jakaś bariera.

“Prawie 100% naszych użytkowników używa Internet Explorera” może oznaczać, że serwis zawiera porady dla użytkowników tej konkretnej przeglądarki lub że w innych przeglądarkach serwis (ze skryptem do zbierania statystyk na czele) nie działa.

Wracając do etykiet – zdaję sobie sprawę, że czasem ilość miejsca przewidziana przez grafika jest koszmarnie mała, by zmieścić dłuższy tekst, ale po to jest title, czy metoda ukrywania części tekstu, by wilk był syty i owca cała. Projekt graficzny nie może determinować rezygnacji z właściwego opisania formularza.

Na koniec być może truizm, ale niestety często zapominany – etykieta ma informować CO należy wpisać, a nie, ŻE należy. Dlatego title brzmiącym “tu wpisz tekst” mówimy nasze stanowcze nie. Jeśli zamiast tego title brzmi “tu wpisz treść wiadomości”, to co innego. Użytkownik trafiając na pole tekstowe dobrze wie, że nie służy ono do rysowania, czy klikania. Natomiast nie zawsze może być pewien naszych intencji co do oczekiwanej zawartości.

Konwencja rozmieszczenia

Intuicyjność etykiet, a właściwie szybką identyfikację relacji między etykietą a polem, zdecydowanie podnosi stosowanie pewnej konwencji ich wzajemnego rozmieszczania:

Etykiety pól tekstowych (input i textarea) i list wyboru umieszczamy powyżej lub po lewej stronie pola do którego się odnoszą, natomiast etykiety pól pojedynczego (radio) i wielokrotnego (checkbox) wyboru po prawej stronie pola.

Jednocześnie zwłaszcza pola typu radio odpowiadające jednemu parametrowi warto umieścić jedno pod drugim tak by szybko można było zidentyfikować wszystkie dostępne opcje i ułatwić nawigowanie pomiędzy nimi. Jest to zwłaszcza istotne gdy opisy poszczególnych opcji wyboru znacząco różnią się długością. Zresztą oceń sam(a), który z poniższych jest czytelniejszy?