Użytkownicy korzystają z pasków nawigacyjnych, aby znaleźć potrzebne informacje. Jeśli etykiety i stany przycisku nawigacji nie są jasne, będą mieli problemy z nawigacją. Poniżej znajduje się 5 najczęstszych błędów popełnianych przez projektantów na przyciskach paska menu. Jeśli popełniasz te błędy, nadszedł czas, aby poprawić pasek nawigacyjny, zapewniając mu większą jasność.

1. Nie podświetlanie wybranego przycisku

Wielu projektantów nie podświetla wybranego przycisku na pasku nawigacji. Gdy użytkownik kliknie przycisk, potrzebuje wizualnej informacji zwrotnej na temat tego, co wybrał.

Bez tego nie będzie wiedział gdzie jest. Mógł pomylić stronę, na której się znajduj z inną podobną stroną.

Użyj kontrastu kształtu i koloru, aby wyróżnić wybrany przycisk. Używanie tylko koloru może utrudnić użytkownikom rozróżnianie kolorów.

Standardowym sposobem podkreślenia kształtu jest umieszczenie silnego podkreślenia pod etykietą. Możesz również umieścić kontur wokół etykiety. Upewnij się jednak, że nie konkuruje z żadnymi przyciskami wezwania do działania (CTA) na pasku.

Etykieta przycisku powinna również pojawić się jako nagłówek strony głównej. Ale podkreślenie go w pasku nawigacji sprawia, że jest on bardzo jasny, aby zapobiec wszelkim pomyłkom


2. Niski kontrast kolorów na wybranym przycisku

Wiele witryn używa niskiego kontrastu kolorów, aby odróżnić wybrany przycisk. Jest to błąd, ponieważ spowalnia użytkowników od rozpoznania, gdzie znajdują się w hierarchii witryny.

Niski kontrast kolorów sprawia, że etykieta przycisku jest trudna do odczytania. Zmusza to użytkownika do przypomnienia sobie, co kliknęli. O wiele szybciej będzie, jeśli użytkownicy mogą rozpoznać wybrany przycisk za pomocą wizualnego wskaźnika.

Wybrany przycisk powinien mieć najwyższy kontrast kolorów wszystkich przycisków. Pozwala to użytkownikom szybko rozpoznać aktywny przycisk.

Użyj wskaźnika kontrastu, aby uzyskać współczynnik kontrastu między etykietą przycisku a tłem.


3. Niski kontrast kolorów na nieaktywnych przyciskach

Kontrast kolorów nieaktywnych przycisków powinien mieć niższy kontrast niż wybrany. Ale nie tak nisko, że etykiety są trudne do odczytania. Zbyt niski kontrast może sprawić, że użytkownicy pominą przyciski z myślą, że są wyłączone.


4. Nie zaznaczanie obszaru wokół etykiety Kliknięcie

Przyciski paska menu mają biały znak wokół, oddzielający je od innych przycisków. Powinieneś uczynić z każdej tej przestrzeni obszar klikalny. Dzięki temu przyciski będą miały większy cel kliknięcia, dzięki czemu użytkownicy będą mogli szybciej nawigować.


5. Brak efektu Hover i Focus na przyciskach

Umieszczenie efektu Hover na przyciskach nawigacyjnych ułatwia klikanie. Dzięki temu użytkownicy wiedzą, kiedy ich kursor myszy znajduje się w obszarze klikalnym. Bez efektu Hover użytkownicy zakładają, że ich kursor zawsze musi trafić na etykietę tekstową, aby aktywować przycisk. Dzięki temu cel trafienia jest mniejszy, co wymaga większej precyzji od użytkownika.

Nie każdy użytkownik używa myszy. Użytkownicy czytników ekranu, którzy używają klawiatury do nawigacji, potrzebują efektu Focus, gdy przechodzą między opcjami. Efekt Focus jest dobrą praktyką dostępności dla wszystkich typów elementów klikalnych.


Wizualne wskaźniki na pasku nawigacyjnym

Pasek nawigacji jest często pierwszą rzeczą, którą użytkownik klika, aby nawigować po witrynie. Użytkownicy potrzebują wskazówek wizualnych, gdy klikną przycisk, aby wiedzieć, gdzie się znajdują i dokąd mogą się udać.

Uczyń przyciski intuicyjnymi, unikając tych typowych błędów. Zaniedbanie wizualnych wskazówek na pasku nawigacji może wpłynąć na zaangażowanie użytkownika. Bez wyraźnych wskazówek wizualnych użytkownicy poruszają się w ciemności.

Te i inne zasady stostujemy w naszym kreatorze stron. Jak chcesz możesz go wypróbować za darmo.