Paski nawigacyjne.
Niby prosta rzecz, ale łatwo przedobrzyć. Więc oto kilka porad jak zrobić fajny pasek i dlaczego :)
1. Gdzie ustawić logo w nawigacji?
Logo z lewej.Absolutny must-have. Nie mam statystyk, ale z 90% logotypów na stronach jest w górnym lewym rogu. Dobrze je mieć w tym miejscu, nauczyliśmy się, że tam szukamy początku (Jacobs law). Dobrze jak logo jest podlinkowane i prowadzi do strony głównej.
Dobrze, jeżeli logo wstawimy na stronie w formacie SVG. W tym formacie jest lekkie i pozwala na skalowanie logotypu do dowolnego rozmiaru bez utraty jakości (pixelozy).
2. Jak powinno wyglądać menu na stronie?
Obok loga dajemy menu.Menu powinno być krótkie, zwięzłe i na temat. Nikt Was nie będzie ścigać jak dacie za dużo linków do menu, ale 5 linków to już jest DUŻO (Hicks law, im więcej opcji tym szybciej głupieje użytkownik). Pamiętajmy o Millers law w UX. Zwykły szary człowiek może zapamiętać +/- 7 rzeczy na raz.
W menu wstaw linka do tej jednej głównej rzeczy, którą robisz, podstronę o tym, aby potwierdzić swoją wiarygodność i to, co robisz, no i strona ze sposobem kontaktu z Tobą.
Masz sklep lub stronę, która ma tysiące podstron, kategorii lub działów? Pogrupuj je i wstaw w submenu lub mega menu. Menu może być zaraz obok loga albo na środku lub z prawej.
3. Dlaczego warto wyróżnić jeden link w menu?
Wyróżnij główny CTA w pasku nawigacji.Tu zadziała efekt izolacji. Ten element, który się wyróżnia, zostanie zapamiętany. Zwykle wystarczy zmienić w button jeden z linków albo wyróżnić kolorem, by uzyskać ten efekt.
4. Dobre menu zaznacza pozycje użytkownika
Wyróżnij obecnie oglądaną stronę.Aby użytkownik się nie pogubił dobrze zaznaczyć pozycję w menu, ale musi być inaczej wyróżniona niż CTA (o którym mowa w pkt. 3). Daj coś delikatnego, nie trzeba przesadzać. Robimy to dlatego by nie wprowadzać użytkowników w błąd, to raczej dziwne zobaczyć dwa tak samo wyróżnione elementy w menu.
5. Nie upychaj rzeczy w nawigacji
Nawigacja powinna mieć miejsce na oddech.Dobierz wysokość i padding. Większe odległości sprawią, że użytkownik łatwiej trafi w linka. Jeżeli mamy np. input szukajki w nawigacji, tym bardziej zadbajmy o zdrowe odległości, aby dobrze się korzystało.Ścisk sprawia że gorzej nam się korzysta z strony.
6. Czy warto przylepiać menu?
Można ustawić pasek nawigacyjny w pozycji fixed, czyli przylepi się do góry strony, a treści schowają się pod menu podczas scrollowania. Z jednej strony użytkownik ciągle widzi menu i może dalej z niego korzystać (wypalamy też brand), ale trwale zabiera ono miejsce na ekranie.
Można sprawić, że menu się chowa, a pojawi się, dopiero gdy zaczniemy scrollować do góry. To fajne rozwiązanie, ale programistycznie nieprzyjemne do ogarnięcia. Często simpler is better.
Bonus: Jak zrobić menu na smartfonie?
Na mobilnym urządzeniu chowamy menu.Na smartfonie walczymy o miejsce, nie zmieścimy pełnego menu, dlatego często zamieniamy menu i inne funkcje na ikony. Menu pojawi się w postaci ikony hamburgera. Dopiero po kliknięciu u��ytkownik zobaczy wszystkie linki, które się pod nim kryją.
To tylko kilka porad, które najczęściej się sprawdzają. Oczywiście to nie znaczy, że nie można zrobić coś inaczej, coś bardziej fancy, czy pod prąd. O ile to jest nadal funkcjonalne i nie frustruje użytkownika, to śmiało eksperymentuj!