Jak poprawnie zaprojektować menu strony internetowej?

Menu strony internetowej to centralna, najważniejsza część jej nawigacji. Istnieje ono po to, aby pomóc użytkownikom znaleźć na stronie treści, które go interesują oraz umożliwić szybkie i proste poruszanie się po serwisie. Powinno być więc proste i jak najbardziej intuicyjne. Niestety – chociaż zasady UX mają coraz większe znaczenie w projektowaniu (nie tylko stron internetowych), a menu jest kluczowym elementem witryny – często zawodzi ono oczekiwania użytkownika.

Przy jego projektowaniu warto pomyśleć także od razu o pozycjonowaniu. Może to znacznie ułatwić podwyższenie pozycji strony w wynikach wyszukiwania.

Na wstępie naszego artykułu nie sposób nie wspomnieć o architekturze informacji. Definicji tego pojęcia jest wiele, jednak ta odnosząca się do stron internetowych mówi, że jest to pewnego rodzaju metoda projektowania witryn www tak, aby treści w niej zawarte były odpowiednio uporządkowane – by każdy odwiedzający stronę użytkownik znalazł na niej to, czego właśnie szuka. W skład architektury informacji na stronie wchodzi więc:

Siła AI (nie mylić ze sztuczną inteligencją 😉 ) jest wielka. Dobrze dopracowana architektura informacji ma bowiem ogromny wpływ na konwersję strony. Pomaga wręcz wykreować zachowania użytkownika. Dlatego tak ważne jest, aby zaprojektować ją jak najlepiej. Słynne słowa twórcy firmy Apple Inc, Steve’a Jobs’a  „Ludzie często nie wiedzą czego chcą, dopóki im tego nie pokażesz”, sprawdzają się tutaj idealnie.

Dobra architektura informacji to również jeden z czynników rankingowych Google. Wyszukiwarka potwierdziła, że najlepiej rankują strony, które zawierają unikatowy, wartościowy content, który jest odpowiednio uporządkowany i przyjazny dla użytkownika. To kolejny przykład, dzięki któremu widać wpływ UX na SEO.

Rozumiemy już, dlaczego prawidłowa architektura informacji sklepu czy witryny jest taka ważna. Więc teraz skupmy się już na głównym zagadnieniu dzisiejszego artykułu, sercu nawigacji – menu strony.

Projektując swoje menu, musisz pamiętać o kilku kluczowych kwestiach:

Zanim zdecydujesz się na rodzaj menu warto przemyśleć, w którym miejscu strony powinno się ono znajdować. Po lewej, a może po prawej stronie? U góry? A może na dole? Oczywiście możemy mówić o pewnych przyzwyczajeniach użytkowników, jednak nie ma i nigdy nie będzie istniał idealny przepis na menu, które sprawdzi się na każdym rodzaju strony. Dlatego podkreślaliśmy, jak ważne jest dokładne określenie celu strony. Poza tym jeśli chcesz mieć pewność, że Twoja witryna i jej nawigacja nie zawiedzie użytkowników – przeprowadź na reprezentacyjnej grupie osób profesjonalne badania użyteczności. Menu musi bowiem pasować do strony idealnie oraz być stworzone z myślą o jej użytkownikach.

1. Menu poziome – spotykane głównie na niewielkich stronach, ma postać belki, umieszczonej na górze strony, zaraz przed polem treści.

Takie rozwiązanie, choć jest dość często spotykane, ma zarówno zalety jak i wady. Plusem na pewno jest przejrzystość i fakt, że menu takie jest doskonale zauważalne od razu po wejściu na stronę. Poza tym, nie zajmuje dużo miejsca przeznaczonego na content strony głównej. Jest naturalne. Jeśli chodzi o minusy: musi być z góry doskonale zaplanowane, ponieważ zwykle takie menu ma ograniczoną ilość pozycji – ciężko jest rozbudować je o kolejne kategorie, jeśli chcemy, aby ciągle wyglądało dobrze w różnych skalach i na różnych urządzeniach. Standardowo umieszcza się w nim 6-8 pozycji. Poza tym, link umieszczony w takim menu musi być krótki – najlepiej jednowyrazowy. Można je stosować zarówno jako jedyne rozwiązanie lub w połączeniu z np. menu bocznym (jeśli na stronie znajdują się np. podkategorie).

2. Pull-down menu, fly-out menu, pop-up menu itp. – czyli menu poziome, z podmenu umieszczonym w rozwijanych zakładkach. To rozwiązanie jest używane bardzo często, zwłaszcza w e-commerce. Główne kategorie mają postać menu poziomego, po najechaniu na nie kursorem (lub czasem dopiero po kliknięciu) rozwija się podmenu z podkategoriami.

To rozwiązanie posiada wszystkie zalety i wady standardowego menu poziomego. Dodatkowym plusem jest jego przejrzystość, wszystkie podkategorie umieszcza się zwykle pod główną kategorią, w jasny sposób, który wyraźnie zaznacza, gdzie dokładnie jest na stronie użytkownik. Poza tym jest intuicyjne – jeśli jest dobrze zaprojektowane, każdy bez problemu zauważy związek pomiędzy głównymi kategoriami a ich podstronami. Jeśli chodzi o wady – może zajmować dużo miejsca na stronie głównej (spychając treść niżej), ale jeśli jest rozwijane – zwykle nie sprawia to dużego problemu. Dobrze sprawdza się zwłaszcza przy dwupoziomowej strukturze nawigacji – jeśli tych stopni jest więcej, menu może stawać się nieczytelne.

3. Menu boczne – w formie listy, zwykle jedna kategoria pod drugą. Czasem podkategorie rozwijają się z nich w bok (co nie jest idealnym rozwiązaniem – wymaga dobrej koordynacji, aby trafić w odpowiedni link, szczególnie jeśli menu ma kilka stopni zagłębienia), jak w przypadku sklepu Empik. Menu boczne jest często spotykane, zwłaszcza w e-commercach z szerokim asortymentem. Może wspierać menu górne lub być odrębnym elementem. Zwykle umieszczane jest z lewej strony (jako, że w większości krajów świata czytamy od lewej do prawej – więc teoretycznie w pierwszej kolejności trafiamy na menu). Chyba, że zależy Ci na tym, aby użytkownik najpierw przeczytał content strony głównej, a później dopiero ewentualnie szukał menu – wtedy warto zastosować je z prawej strony.

Jak widać, należy pamiętać, że kultura także wpływa na projektowanie skoncentrowane na użytkowniku, więc trzeba doskonale go poznać (ponieważ w niektórych językach czyta się od prawej do lewej, czy np. w niektórych kulturach najpierw wzrokowo ogląda się stronę, a dopiero później przechodzi się do konkretnej kategorii – co może wynikać z przyzwyczajeń, konsumpcjonizmu, itd).

Zaletą menu bocznego jest to, że może pomieścić szeroki asortyment – zmieszczą się tutaj długie listy linków. Pomieści wiele stopni nawigacji i ma możliwość odpowiedniego oznaczenia ich relacji. Długie nazewnictwo nie stanowi tu problemu, kategoria może mieć kilka słów. Ponadto, takie menu jest dobrze skalowane – w razie potrzeby, bez problemów rozbudujemy je o nowe kategorie – to dobry wybór jeśli planujesz rozszerzać asortyment sklepu.

Minusem menu bocznego jest to, że często zajmuje sporo miejsca, poza tym należy dobrze zaznaczyć na nim to, czy podkategorie są rozwijane czy nie – aby było jak najlepiej czytelne dla użytkownika.

Jest to na pewno rozwiązanie bardzo popularne. Często występuje też w formie uzupełnienia menu górnego. Np. na górnej belce mamy kategorie główne, po kliknięciu w które przechodzimy na daną podstronę – a na niej znajduje się także menu boczne z podkategoriami – znacznie ułatwia to użytkownikowi nawigowanie po stronie.

Sklep Galeria Limonka wykorzystuje zarówno menu górne, jak i boczne, a dodatkowo także tzw. breadcrumbs – linki powrotne do podstron, które użytkownik odwiedził, aby dotrzeć do bieżącej podstrony. Dzięki temu, nawigacja na stronie jest jeszcze bardziej intuicyjna.

4. Hamburger menu – czyli graficzne przedstawienie rozwijanego, ukrytego menu. Występuje najczęściej w aplikacjach, stronach mobilnych czy serwisach internetowych (w 2010 roku stała się popularna dzięki Facebookowi, który teraz odszedł od tego rozwiązania). Nazwa wzięła się po prostu z podobieństwa ikonki do popularnego fast fooda. 😉

Oczywiście rodzajów menu jest dużo więcej – wymieniliśmy te najbardziej popularne. Aby zaprojektować doskonałe dla swojego biznesu menu musisz pamiętać przede wszystkim o zasadach User Experience. Źle zaprojektowane menu może wpływać negatywnie na konwersję, warto więc przemyśleć dokładnie odpowiednią nawigację. Jak wspominaliśmy wyżej, najlepiej przeprowadzić w tym celu profesjonalne badania użytkownika, aby mieć pewność, że rozwiązania użyte na naszej stronie będą dla naszej grupy docelowej intuicyjne i przejrzyste. Nie zapominajmy także o SEO i dobrym nazewnictwie poszczególnych kategorii – wtedy osiągniemy złoty środek, trafiając w gusta zarówno użytkowników, jak i wyszukiwarek.