Jak poprawnie zaprojektować menu strony internetowej?

Jak poprawnie zaprojektować menu strony internetowej?

Projektując e-sklep czy stronę internetową, nawet kiedy używamy gotowych CMS-ów lub motywów, warto skupić się na nawigacji strony. Tylko jak poprawnie zaprojektować menu strony internetowej tak, by było ono przyjazne zarówno dla użytkowników jak i wyszukiwarek?

Ostatnio na naszym blogu: Nowe wyszukiwanie hoteli w Google

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.

Tytułem wstępu, czyli co to jest architektura informacji

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:

  • precyzyjna organizacja jej contentu,
  • odpowiednie nazewnictwo (etykietowanie),
  • klarowne polecenia,
  • wyszukiwarka przygotowana z myślą o użytkownikach
  • oraz oczywiście – doskonale zaprojektowane menu strony.

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.

Menu strony – o czym musisz pamiętać, kiedy je projektujesz?

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

  1.  Po pierwsze: ustal z góry cel strony. Czy będzie to duży sklep internetowy, czy może zaledwie witryna z zaledwie kilkoma podstronami? Jest to główny wyznacznik wykonania nawigacji. Jeśli np. tworzysz bloga, menu główne będzie stosunkowo proste – może zawierać informacje o Tobie, o blogu, zakładkę do kontaktu z mediami itp. Jeśli będziesz chciał wprowadzić na stronie także menu boczne (np. przenoszące do wcześniejszych postów) może mieć ono np. formę kalendarza, czy listy miesięcy z poszczególnymi postami – nie zapominaj także o odpowiednim tagowaniu postów lub dzieleniu ich na kategorie.  Jeśli jednak tworzysz nawigację dla dużego e-commerce, sprawa staje się bardziej skomplikowana. Nawigacja strony musi obejmować rozpiskę głównych kategorii, następnie podkategorii itp. – możliwie jasno, aby potencjalny klient znalazł bez trudu to, czego szuka. Nietrudno więc się domyślić, że źle zaprojektowane menu strony najczęściej dotyka właśnie e-sklepów.
  2. Po drugie: ustal strukturę menu strony. Prawidłowo zaprojektowane drzewo nawigacji (które pozwoli na łatwe i intuicyjne przechodzenie między kategoriami a także szybkie znajdowanie poszczególnych towarów) to klucz do sukcesu strony.
  3. Po trzecie: przemyśl nazewnictwo / etykietowanie. Lepiej postawić na prostą zakładkę „blog”, która jest jasna dla każdego (od razu widać, że czeka tam blog firmowy) niż kombinować z enigmatycznymi „inspiracje”, „porady”, czy „wiedza eksperta”.
  4. Po czwarte – myśl o użytkowniku. To on jest tutaj najważniejszy, to dla niego Twoje menu musi być zrozumiałe i intuicyjne.

Rodzaje menu strony – ich zalety i wady

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.

Menu strony internetowej - góra strony
Menu bloga Anny Lewandowskiej, https://hpba.pl/

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.

Pull down menu
Menu główne sklepu internetowego H&M

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).

menu boczne

Menu boczne rozwinięte
Menu boczne empik.com

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.

Menu boczne - Galeria Limonka
Menu sklepu Galeria Limonka. https://www.galerialimonka.pl

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.

  1. 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. 😉

Hamburger menu

Ikonka ta została zaprojektowana przez Norma Cox’a (współzałożyciela Cox&Hall, znanej spółki projektowej) już w latach 80., na potrzeby firmy Xerox.

Ten rodzaj menu sprawdza się doskonale przy aplikacjach i stronach dostosowanych do urządzeń mobilnych – jest bowiem użyteczne na wielu z nich, a także na komputerach. Rozwiązanie to jest dodatkowo nowoczesne i estetyczne. Minimalistyczny design znajduje swoich fanów na całym świecie. Hamburger menu ma także swoich przeciwników, twierdzących, że nie jest to rozwiązanie dostatecznie jasne dla wszystkich.

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.  

  0 / 5 ( 0 )
Autor
SEO Specialist - Asia

SEO Specialist

W Delante od sierpnia 2017 roku. Specjalistka SEO, humanistka o zacięciu marketingowym, zakręcona na punkcie UX. Lubi Pandy i pisanie, wie, że content is king, więc zajęła się u nas też działem copywritingu. A po pracy: kino, planszówki, Heroes III.

Ostatnio na naszym blogu

Jesteś ciekawy, jak wygląda pozycjonowanie sklepów internetowych, a może chcesz wejść na rynek szwajcarski i ciekawi Cię, jak wygląda pozycjonowanie zagraniczne? Na naszym blogu znajdziesz odpowiedzi na te pytania i wiele innych porad ważnych dla rozwoju Twojego biznesu.