Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Nawigacja na stronie internetowej. Jak poradzić sobie z menu?

Menu jest jednym z najważniejszych elementów na stronie internetowej. Daje użytkownikowi możliwość zapoznania się ze strukturą serwisu oraz łatwego dotarcia do jego zawartości. Jednak często stanowi problem dla webdeveloperów i projektantów. My podpowiadamy, jakie rozwiązania są najskuteczniejsze.

notcomplex
Zrzut ekranu z notocomplex.com

Ograniczenia

Budowa menu przede wszystkim zależy od struktury serwisu oraz jego celów biznesowych. Są proste strony-wizytówki lub blogi, gdzie menu jest dość proste. Istnieją też rozbudowane serwisy (na przykład porównywarki cenowe lub sklepy), które mają bardzo rozbudowaną strukturę i pole manewru jest dość ograniczone.

Coraz częściej ograniczeniem są też technologia oraz sprzęt, z którego korzystają nasi użytkownicy. W dobie mobile każde użycie i zastosowanie hovera na stronie powinno być dokładnie przeanalizowane, a jest on wciąż jednym z ulubionych rozwiązań projektantów.

Również z tego samego powodu trzeba zadbać o elastyczność menu a nawet o kilka jego wersji. Dotyczy to serwisów responsywnych, gdzie nawigacja może przyjmować różne kształty w zależności od urządzenia, na jakim wyświetlana jest strona.

Menu poziome, czy pionowe?

Wybór zależy przede wszystkim od zawartości strony. Menu poziome jest łatwiejsze do zaimplementowania w serwisach responsywnych oraz pozwala na łatwe zapoznanie się przez użytkownia z zawartością serwisu, o ile nie zawiera zbyt wielu elementów. Zalecane jest umieszczenie pięciu pozycji w menu, chociaż jest to wartość orientacyjna.

Dobrze zrobione menu pionowe może być równie dobrze funkcjonale jak menu poziome, a w niektórych przypadkach będzie nawet lepsze, gdyż pozwala na umieszczenie większej ilości pozycji. Łatwiej jest przeglądać dużą ilość kategorii ułożonych jedna pod drugą niż obok siebie.

Często trzeba zastosować rozwiązanie hybrydowe albo oba menu równocześnie. Menu poziome wtedy spełnia rolę podstawowej nawigacji na stronie, rozprowadzającej po kilku kategoriach, natomiast menu pionowe oferuje filtrowanie/kategoryzację szczegółową.

A może hamburger icon?

Coraz więcej serwisów celowo nie eksponuje rozwiniętego menu i ukrywa je pod ikoną “hamburgera”. Takie menu ma sporo zalet, gdyż będzie działać dobrze zarówno na urządzeniach stacjonarnych jak i mobilnych. Jednak wielu użytkowników będzie leniwych i nie kliknie w ikonę w celu zapoznania się z zawartością strony. Z kolei inna, dość duża grupa, nie rozpoznaje jeszcze tej ikony. Dlatego zalecane jest umieszczenie obok ikony hamburgera napisu “menu”.

Dodatkową zaletą “hamburgera” jest oszczędność miejsca. Dzięki temu można wykorzystać jedno z najbardziej atrakcyjnych miejsc na stronie na umieszczenie innych elementów. Jednakże jest to też wadą, gdyż pojedynczą ikonę jest trudniej dostrzec niż standardowy pasek z menu.

Zadbaj o nazewnictwo

Długie nazwy? Kreatywne hasła? Same ikony? Odpuść sobie. Być może znajomym w branży spodoba się twoja kreatywność, lecz użytkownik tego nie doceni. On oczekuje jak najszybszego odnalezienia pożądanego elementu. Dlatego nazewnictwo powinno być do bólu standardowe i mówiące wszystko o zawartości strony docelowej.

Podobnie kolejność elementów w menu powinna być taka, jak to oczekuje użytkownik. Zobacz, jak są rozmieszczone elementy na podobnych stronach. Czasami może być to kolejność alfabetyczna (dobrze się sprawdza przy dużej ilości pozycji), ale z reguły sortuje się pozycje w menu według ich przydatności, popularności lub rangi.

Podsumowanie

Projektując menu trzeba przede wszystkim pamiętać o użytkownikach, którzy będą ten serwis przeglądać. Spodziewają się oni standardowych rozwiązań, które znają z innych serwisów. Dlatego menu powinno być zaprojektowane zgodnie z obowiązującymi na rynku trendami, przy czym należy szczególnie zadbać o jego prawidłowe działanie, czytelność oraz dostępność z urządzeń mobilnych.

Inspiracje

Na koniec zamieszczamy inspiracje przy tworzeniu nawigacji. Są tu umieszczone rozwiązania zarówno użyteczne jak i rozwiązania mniej użyteczne, ale warte obejrzenia choćby pod kątem designu. Większość tych stron jest responsywna i zachęcamy do oglądania ich w różnych wariantach.

thesmithbrothers.com:

smithbros


visitutah.com:

visitutah


alessandrogiammaria.com:

alessandrogiammaria


ferix.sk:

ferix


aids.gov:

aids


wholefoodsmarket.com:

wholefoodsmarket


andpizza.com:

andpizza


dadaabstories.org:

dadaabstories


traveloregon.com:

traveloregon


time.com:

time


hellomichael.com:

hellomichael