Nawigacja na stronie internetowej – 11 porad dotyczących projektowania

Nawigacja na stronie internetowej

Elementy nawigacyjne są absolutną podstawą każdej strony internetowej. To właśnie dzięki nim mamy szansę poruszać się pomiędzy poszczególnymi podstronami oraz sekcjami wewnątrz nich.

Jednak czy nawigacja na stronie internetowej jest czymś, co wdraża się z marszu?

Absolutnie nie. A przynajmniej nie powinno tak być.

Wszystko dlatego, że wygoda użytkowania danej strony internetowej powinna być na pierwszym miejscu. Jej niezwykle istotną częścią jest to, w jaki sposób po danej stronie można się poruszać. Zatem, mając swoją własną witrynę, musisz uczynić wszystko, co w Twojej mocy, by wszelkie elementy nawigacyjne były przystępne odwiedzającym.

Rzuć okiem na poniższą listę jedenastu wskazówek, dzięki którym nawigacja na stronie internetowej będzie nie tylko ładnie wyglądała, lecz także przede wszystkim spełniała swoją funkcję.

Jak powinna wyglądać i działać odpowiednia nawigacja na stronie internetowej?

1. Zacznij od porządnego planu.

Podstawą jest wiedza na temat tego, jakie dokładnie podstrony wchodzą (lub będą wchodzić) w skład Twojej witryny.

Rozrysuj sobie wszystko dokładnie. Bez znaczenia, czy zrobisz to z użyciem oprogramowania wspomagającego tworzenie diagramów, czy też zdecydujesz się na mariaż kartki z długopisem.

Mając niezbędną wiedzę teoretyczną, jesteś w stanie przejść krok dalej.

2. Ustal kolejność pozycji w menu.

Mówi się, że największą uwagę zwracamy na początek oraz na koniec przekazu. Zarówno jeśli chodzi o pozycje w menu, jak i np. o kierowane do nas zdania w trakcie rozmowy.

Kolejność pozycji w menu

Źródło: Riyo.

Co prawda, powyżej mamy przykład menu w stopce, jednak zwróć uwagę na hierarchię prezentowanych informacji.

Ktoś, kto dotrze na sam dół strony, zazwyczaj oczekuje znaleźć tam bardziej szczegółowe informacje o firmie lub też bezpośredni kontakt. Widzimy to w pierwszej oraz w ostatniej kolumnie stopki. W środku znajdują się pozostałe, mniej istotne linki nawigacyjne.

Więcej przydatnych informacji na ten temat znajdziesz w naszym wpisie o tym, jak zaprojektować menu na stronie www.

3. Nadaj pozycjom odpowiednie etykiety.

Rzuć okiem na poniższy obrazek:

Etykiety w menu

Źródło: Apple.

Apple ma kilka flagowych produktów. Dlatego też każdy z nich ma swoją własną pozycję w menu. Nie mamy ogólnika w stylu „Produkty” z menu rozwijanym. Takie rozwiązanie dokładałoby jeszcze jeden krok, przez który użytkownik musiałby przejść, by wejść na podstronę dotyczącą interesującego go urządzenia.

Chodzi o to, aby etykiety (czyli po prostu nazwy, za którymi kryją się poszczególne podstrony) znajdujące się w menu były możliwie najbardziej precyzyjne.

Dzięki temu zarówno użytkownicy będą wiedzieli, z czym dokładnie mają do czynienia, jak i roboty wyszukiwarek zaznajomią się z bardziej szczegółowymi frazami, których obecność będzie korzystna dla SEO.

4. Nie przesadzaj z liczbą elementów w menu.

Nawigacja na stronie internetowej powinna być możliwie najprostsza. Należy zatem unikać przeładowania menu zbędnymi elementami.

Najlepiej jest zamieścić jedynie kilka najważniejszych podstron. Jeśli któraś z nich ma pod sobą bardzo istotne gałęzie, które koniecznie chcesz zamieścić, lecz ich obecność w menu na tym samym poziomie byłaby przesadą, umieść je przy pomocy prostego menu rozwijanego.

W ostateczności możesz także skorzystać z tzw. mega-menu:

Mega menu - UX sklepu internetowego

Źródło: ThemeForest.

Aczkolwiek powinno się je stosować tylko na tych stronach internetowych, gdzie faktycznie istnieje wiele istotnych podstron.

5. Działaj według standardów.

Owszem, nowatorskie rozwiązania nawigacyjne są fajne. A przynajmniej tak się wydaje wielu projektantom stron internetowych, którzy gustują w innowacjach.

Jednak czy coś, co znacząco łamie powszechnie przyjęte standardy, będzie podobało się większości użytkowników?

W niektórych przypadkach śmiem wątpić.

Najlepiej jest stosować takie rozwiązania, do których przywykliśmy. Jeśli koniecznie chcesz wprowadzić jakąś innowację nawigacyjną, najlepiej sprawdź jej skuteczność przy pomocy testu A/B. Dzięki temu dowiesz się, jak zareagują na nią sami użytkownicy.

Temat ten poruszyliśmy także w naszym tekście zawierającym wskazówki dla web designerów.

6. Rozważ skorzystanie z tzw. sticky menu.

Sticky menu, czyli menu „przyklejone” do górnej części obszaru roboczego, już od dobrych kilku lat coraz częściej spotyka się na różnych stronach internetowych.

Zwolennicy tego rozwiązania podkreślają przede wszystkim możliwość szybszej nawigacji po stronie.

Z kolei przeciwnikom nie do końca podoba się fakt, że takie menu cały czas zajmuje pewien obszar strony, redukując tym samym miejsce na inne elementy.

Osobiście jestem zwolennikiem stosowania tego rodzaju menu. Jeżeli jest ono przejrzyste i nie przytłacza swoim rozmiarem, warto jest rozważyć jego wykorzystanie.

7. Wskaż użytkownikom, gdzie obecnie się znajdują.

Nawigacja to nie tylko menu. Jej elementami są również tzw. okruszki oraz inne obiekty, które pomagają użytkownikom orientować się w ich aktualnym położeniu na stronie internetowej.

Okruszki i nawigacja na stronie www

Źródło: Webankieta.

Dobrze jest informować odwiedzających, jak „głęboko” zabrnęli. Dzięki temu wiedzą, na jakim poziomie szczegółowości się znajdują. Mogą również cofnąć się o odpowiednią liczbę kroków, korzystając z linków w okruszkach.

Co więcej, umiejętnie wdrożone okruszki widoczne są także bezpośrednio w wynikach wyszukiwania Google.

Tę kwestię poruszyliśmy również w tekście o typowych błędach na stronach internetowych.

8. Na logo nałóż link do strony głównej.

Link w menu pod postacią „Strony głównej” jest prawdziwą zmorą wśród polskich stron internetowych. Na szczęście odchodzi się już od tego.

Dodatkowa pozycja „Strona główna” jest zbędna, gdyż zajmuje zbyt dużo miejsca i „rozrzedza” znaczenie pojęć w menu. Niektórzy próbują wykorzystywać do tego celu „Home”, jednak angielski zwrot nie bardzo jednak pasuje pod kątem językowym.

Alternatywą jest zamieszczenie w menu pozycji, gdzie etykietę stanowi jedynie ikonka domu. Jednak i to rozwiązanie ma swój minus, gdyż powierzchniowo zajmuje zbyt mało miejsca, by było dostatecznie dobrze „dotykalne” na urządzeniach mobilnych.

Stąd też przyjęło się nakładać link do strony głównej na logo. I tego się trzymajmy.

9. Jeśli prowadzisz bloga, ułatw znalezienie archiwalnych treści.

Bardzo często jest tak, że świetne teksty są z czasem wypierane przez nowe, a użytkownicy mają przed oczami jedynie te ostatnio dodane wpisy.

Tak też jest z artykułami m.in. na naszym blogu.

Jak zatem sprawić, aby starsze teksty były nadal możliwe do odszukania?

Proponuję dwie opcje. Pierwsza z nich to dodanie np. w tzw. sidebarze (czyli w pasku bocznym, o ile go wykorzystujesz na swoim blogu) sekcji „Najpopularniejsze wpisy”, dzięki czemu istotne z Twojego punktu widzenia treści będą nadal łatwo dostępne.

Drugą z opcji jest z kolei wprowadzenie wyszukiwarki. Sprawdź nasz wpis w całości poświęcony wyszukiwarce na stronie internetowej.

10. Umiejętnie wykorzystuj kategorie i tagi.

Kontynuując przyglądanie się typowo blogowym elementom, warto jest zatrzymać się na chwilę przy kategoriach i tagach.

To właśnie one dzielą wpisy na swoiste „worki”, grupując je tematycznie.

Przyjrzyj się tagom i kategoriom wykorzystywanym na swoim blogu, odpowiadając sobie na poniższe pytania:

  • czy jest ich dostatecznie dużo, czy też może za mało?
  • czy są odpowiednio szczegółowe, czy też wypadałoby je uogólnić?
  • czy znajdują się w nich rzadko wykorzystywane elementy, które można by było usunąć?
  • czy występowanie jakiegoś tagu jest na tyle częste, że być może wypadałoby zamienić go w kategorię?

Dzięki temu lepiej zrozumiesz strukturę tagów i kategorii na swojej stronie internetowej oraz naniesiesz właściwe zmiany.

11. Przemyśl rolę stopki.

Nawigacja na stronie internetowej to także stopka. Przez wielu zupełnie ignorowana lub też sprowadzana do roli swoistego śmietnika. Czy słusznie?

Absolutnie nie.

Stopka stanowi świetne uzupełnienie nawigacyjne na stronie internetowej. Można podzielić ją na odpowiednie sekcje i kolumny, odpowiadające za poszczególne akcje.

Stopka na stronie internetowej z danymi do kontaktu

Źródło: Morele.net.

Zobacz, jak wiele informacji znajduje się na powyższym przykładzie. Mimo tego, że jest ich naprawdę sporo, przyjemny dla oka oraz logiczny podział jest w zupełności czytelny.

Jeśli chcesz szerzej zgłębić ten temat, przeczytaj nasz artykuł o stopce na stronie internetowej.

Nawigacja na stronie internetowej – jej rola i funkcje

Jak widzisz, nawigacja na stronie internetowej potrafi odgrywać niezwykle istotną rolę.

Wielu – zupełnie niewłaściwie – traktuje ją po macoszemu i jej projektowaniu nie poświęca należytej uwagi.

Mam nadzieję, że zawarte w tym tekście porady sprawią, że poruszanie się po Twoim serwisie od tego momentu będzie jeszcze szybsze i bardziej intuicyjne.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

Bądź pierwszą osobą, która skomentuje ten artykuł! 😉

Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Michał Ziółkowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

5 lat temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Jakub Ozorowski

5 lat temu

Brak konwersji w sklepie internetowym – 10 typowych przyczyn

Brak konwersji w sklepie internetowym to niewątpliwie ogromny problem dla właścicieli stron e-commerce. Jakie są najczęstsze przyczyny tego stanu rzeczy?

Michał Ziółkowski

5 lat temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

5 lat temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Co irytuje użytkowników stron internetowych? – 14 kwestii

Czy wiesz, co irytuje użytkowników stron internetowych? Jakie są to elementy? W naszym wpisie wymieniamy kluczowe sprawy, na które musisz zwrócić uwagę.