Czym jest fokus i dlaczego trzeba go widzieć
Fokus wskazuje element, który w danej chwili przyjmie działanie z klawiatury. Gdy użytkownik naciska klawisz Tab, fokus zwykle przechodzi kolejno przez linki, przyciski i pola formularzy. Enter może otworzyć link lub uruchomić przycisk, a wpisywane znaki trafiają do pola, które ma fokus. Jeśli nic nie pokazuje jego położenia, użytkownik musi zgadywać, co stanie się po kolejnym naciśnięciu klawisza.
Widoczny fokus pomaga nie tylko osobom korzystającym wyłącznie z klawiatury. Przydaje się również wtedy, gdy ktoś przełącza się między myszą a klawiaturą lub obsługuje stronę w sposób wymagający wyraźnej informacji o bieżącym położeniu. Na stronie firmowej szczególnie ważne będą nawigacja i formularz kontaktowy; na blogu — linki w treści; w katalogu — filtry i przyciski przechodzenia między wynikami.
Fokusu nie należy mylić z zaznaczeniem lub stanem aktywnym. Zaznaczona kategoria może pozostawać wybrana, choć użytkownik przeszedł klawiaturą do innego miejsca. Podobnie podświetlenie po najechaniu myszą nie zastępuje wskaźnika fokusu. Każdy z tych stanów odpowiada na inne pytanie: gdzie jestem teraz, co zostało wybrane i na co wskazuje kursor myszy.
Jak zaprojektować czytelny wskaźnik
Najprostszy punkt wyjścia to wyraźny obrys wokół elementu. Może to być linia z niewielkim odstępem od przycisku lub linku. Ważne, aby dało się ją zauważyć na tle strony i samego elementu. Cienka linia w kolorze zbliżonym do tła łatwo zniknie, zwłaszcza na zdjęciu, gradientowym banerze albo wewnątrz kolorowej karty.
Nie opieraj wskazania wyłącznie na drobnej zmianie koloru. Obrys, podkreślenie linku albo wyraźna zmiana kształtu obramowania tworzą łatwiejszą do rozpoznania różnicę. Sprawdź też, jak wskaźnik wygląda na jasnych i ciemnych tłach oraz po powiększeniu strony. Jeśli obrys jest ucinany przez krawędź karty lub menu, sam dobór koloru nie rozwiąże problemu — trzeba zapewnić mu miejsce.
Wskaźnik powinien pasować do projektu, ale nie musi być ozdobny. Spójny sposób wyróżniania ułatwia naukę obsługi strony: użytkownik szybciej rozpoznaje, czego szukać podczas przechodzenia między elementami. Własny styl warto wprowadzać dopiero po sprawdzeniu, że nie jest mniej czytelny od domyślnego wskaźnika przeglądarki.
Na które elementy zwrócić uwagę
Przejdź przez stronę tak, jak zrobiłaby to osoba bez myszy. Czy fokus widać na logo będącym linkiem, pozycjach menu, przyciskach, odnośnikach w artykule i polach formularza? Sprawdź także mniej oczywiste miejsca: rozwijane menu, przyciski zamykające okna, filtry katalogu oraz link pozwalający pominąć nawigację. W każdym przypadku użytkownik powinien móc rozpoznać bieżący element.
Zadbaj o to, by wygląd fokusu nie usuwał potrzebnych informacji. Jeśli przycisk zmienia tło, jego napis nadal musi być czytelny. Przy polu formularza wskaźnik powinien pozwalać odróżnić aktywne pole od komunikatu o błędzie. Gdy kilka sąsiednich elementów ma podobne obramowania, wyraźnie pokaż, który z nich jest właśnie gotowy na wpisanie tekstu lub uruchomienie.
Nie ukrywaj domyślnego obrysu tylko dlatego, że nie pasuje do projektu. Jeżeli go zastępujesz, przygotuj równie zauważalny odpowiednik. Można użyć stylu pojawiającego się przede wszystkim przy nawigacji klawiaturą, ale warto sprawdzić jego zachowanie także w formularzach i przy różnych sposobach obsługi strony. Celem jest czytelna informacja, a nie samo ograniczenie liczby widocznych obrysów.
Prosty test klawiaturą przed publikacją
Otwórz stronę i odłóż mysz. Naciskaj Tab, obserwując, gdzie pojawia się fokus i czy jego kolejność odpowiada układowi treści. Aby wrócić do poprzedniego elementu, użyj Shift i Tab. Sprawdź początek strony, menu, główną treść oraz formularze. Przy każdym kroku zadaj sobie pytanie: czy bez zgadywania wiem, co uruchomię teraz klawiszem Enter?
Zwróć uwagę na momenty, w których fokus pozornie znika. Może trafić do elementu schowanego poza ekranem, za otwartym oknem albo pod nieruchomym nagłówkiem. Bywa też, że strona przesuwa się w nieoczekiwane miejsce. To sygnały do sprawdzenia nie tylko wyglądu obrysu, lecz także kolejności elementów i działania interfejsu.
Powtórz próbę na kilku podstronach i przy większym powiększeniu. Strona główna może działać poprawnie, a formularz kontaktowy lub panel filtrów już nie. Taki krótki test po zmianie szablonu, menu czy formularza pomaga wychwycić problem, zanim stanie się stałą przeszkodą dla odwiedzających.
