Strona internetowa musi posiadać intuicyjną nawigację. Menu strony www pomaga odnaleźć się użytkownikowi w danej przestrzeni, odpowiada na jego potrzeby, ale i nakierowuje go na podstrony, usługi i produkty, które chcesz, by zobaczył. Dowiedz się, jak zaprojektować menu strony, poznaj jego niezbędne elementy oraz zobacz przykłady.
Czego dowiesz się z artykułu?
Rodzaje menu strony
Menu strony powinno wyróżniać się, a jednocześnie być spójne z całym projektem strony internetowej. Zazwyczaj znajduje się u góry strony internetowej lub zostaje umieszczone z boku. Służy do nawigacji, musi być widoczne i czytelne dla każdego, kto odwiedza daną witrynę. Wyróżnia się kilka rodzajów menu strony www.
Poziome menu
Poziome menu strony internetowej zazwyczaj stosuje się przy mało skomplikowanych projektach. Nie powinno ono zawierać zbyt wielu elementów. Najlepiej, by składało się z maksymalnie 7 zakładek i dwóch poziomów rozwijania. Do tego typu menu użytkownicy są najbardziej przyzwyczajeni.
Pionowe menu
W przypadku, gdy mamy dużo treści, można skorzystać z pomysłu na pionowe menu. W nim można umieścić więcej elementów, nie tracąc na jego czytelności. Menu pionowe często sprawdza się przy filtrowaniu czy kategoryzacji treści. Jednak należy pamiętać, że przeładowane menu contentem nigdy nie będzie w 100% czytelne. Warto dopasować menu do wyglądu strony, ale przede wszystkim należy skupić się na jego przejrzystości.
Hamburger menu
Hamburger jest często używany na mobilnych wersjach strony. To ikona, która składa się z trzech oddzielonych od siebie linii. Pozwala na sprytne ukrycie menu głównego, sprawdza się szczególnie w sytuacji, gdy zależy nam na konkretnym wyglądzie www, umieszczeniu na stronie głównej obrazu czy animacji, skupieniu uwagi użytkownika właśnie na nim.
Hamburger to rozwijane menu, które nie jest widoczne na pierwszy rzut oka. Współczesny konsument jest do niego przyzwyczajony i raczej orientuje się, jak ono wygląda. Jednak warto przy znaku hamburgera dopisać tekst (np. “MENU”), dla tych kilku procent zagubionych osób. Hamburger menu jest najmniej polecane, ze względu na jego ukrycie – ostatecznie nie każdy może je zauważyć, poza tym, aby je rozwinąć, klient musi kliknąć, co zwiększa liczbę czynności do wykonania przez użytkownika na stronie. Mimo to hamburger jest obecnie często używany na nowych stronach www, głównie z powodu responsywności witryn.
Które menu strony wybrać?
To, jakie menu wybierzemy, powinno zależeć od ilości treści, które chcemy umieścić na stronie, poziomu jej skomplikowania oraz specyfiki użytkowników. Istnieją strony www, na których zastosowane są jednocześnie np. dwa rodzaje menu. Ważne, by korzystanie ze strony było proste i przejrzyste. Tak, aby użytkownik łatwo się na niej odnalazł, a zarówno strona, jak i menu nie były przeładowane treścią.
Niezbędne elementy menu strony internetowej
Menu główne strony internetowej powinno zawierać kilka niezbędnych elementów, do których użytkownicy są przyzwyczajeni i które znacząco uporządkują stronę oraz ułatwią poruszanie się po niej.
Elementy menu strony internetowej to:
- spis kategorii – szczególnie w przypadku sklepu internetowego warto w menu zawrzeć pogrupowane kategorie produktów, które klient może kupić na danej www,
- strona główna – nie zawsze musi znajdować się w menu strony, często wystarczy zastosowanie klikalnego logotypu,
- blog – jeśli dana firma prowadzi bloga, to odnośnik do bloga powinien znaleźć się w głównym menu strony,
- kontakt – warto by kontakt był na liście, często klienci go szukają i ważne, by w łatwy sposób mogli do niego dotrzeć.
Menu strony nie powinno zawierać wielu elementów, warto dążyć do jego uproszczenia, jak i uproszczenia całej struktury www. Taka strona jest bardziej czytelna, użytkownikowi lepiej się z niej korzysta. Ważne, by pamiętać, że w menu strony nie liczy się tylko jego wygląd, ale funkcjonalność – ma ono w prosty sposób umożliwiać poruszanie się po stronie każdemu użytkownikowi – zarówno temu, który jest na niej po raz pierwszy, jak i osobom odwiedzającym stronę wielokrotnie, na różnych urządzeniach.
Od czego zacząć projektowanie menu strony internetowej?
Projektowanie menu należy zacząć od przemyślenia całej nawigacji strony www. Ważne, aby ustalić jakie funkcje oferuje dana strona internetowa, które z elementów są kluczowe i w jakiej hierarchii je uporządkować. Należy sobie zadać pytanie, czego szuka użytkownik na stronie, bądź co powinien na niej znaleźć, dokąd chcesz go zaprowadzić.
Warto pamiętać o responsywności. Są firmy, które z tej przyczyny decydują się na menu z ikonką hamburgera, są takie, które do pewnej rozdzielczości ekranu posiadają menu klasyczne, następnie zamieniają je w hamburgera. Na początkowym etapie projektowania menu warto również zastanowić się, czy ma być ono przyklejone na stałe, czy znikać. Tak zwane lepkie menu jest zablokowane i nie znika w miarę przesuwania strony przez użytkownika. Jest funkcjonalne i sprawdza się w wielu przypadkach.
Przy projektowaniu menu należy zwrócić także uwagę na język. Powinien być czytelny i prosty. Menu musi być zrozumiałe dla użytkownika. Projektując menu strony www, pomyśl o wyglądzie belki głównej – powinien być spójny z resztą strony, a jednocześnie czytelny. Jednym słowem – użytkownik nie powinien szukać menu, najlepiej by było ono zaprojektowane tak, aby w sytuacjach, kiedy będzie go potrzebował, zawsze miał je pod ręką.
Dobre praktyki tworzenia menu strony
Tworząc menu strony internetowej, warto korzystać ze sprawdzonych rozwiązań. Menu musi być użyteczne.
Dobrą praktyką jest:
- klikalne logo – logo powinno być umieszczony w lewym górnym rogu lub na środku góry strony i podlinkowane w taki sposób, by jednym kliknięciem można było wrócić na stronę główną,
- podświetlane menu – umożliwi pokazanie klientowi, gdzie aktualnie znajduje się na stronie,
- linki dofollow – menu strony powinno zawierać przekierowania, które pozytywnie wpływają na SEO strony,
- krótkie nazwy – które dobrze wyglądają graficznie oraz są czytelne dla klienta,
- monitorowanie klikalności – warto zbierać informacje dotyczące klikalności w poszczególne elementy na stronie, w tym wybranych buttonów w menu.
Błędy w tworzeniu menu strony www
Przygotowując menu na stronę, warto wyeliminować często powtarzające się błędy:
- nieaktualne linki w menu – menu służy do przedstawienia najważniejszych miejsc na stronie, nie warto umieszczać w nim linków do podstron, które są na stronie chwilowo. Ważne, by menu było stałe i zawierało niezmienne elementy, klienci przyzwyczajają się do niego,
- brak responsywnego menu strony – użytkownicy korzystają ze strony zarówno na smartfonach, tabletach, jak i komputerach stacjonarnych. Menu powinno dostosowywać się do wielkości ekranu, być uniwersalne,
- wielopoziomowe menu – w nieuzasadnionych sytuacjach może prowadzić do za dużego skomplikowania strony,
- jaskrawa kolorystyka – nie jest mile widziana w przypadku menu strony, może być mało czytelna i rozpraszać użytkownika,
- umieszczenie grafiki w menu strony – może spowodować nieprawidłowe wyświetlanie się menu oraz problemy z przejrzystością,
- niestandardowa lokalizacja menu – prowadzi do zakłopotania u klienta oraz negatywnych odczuć względem strony, jak i prezentowanej marki.
Menu główne i dolne strony internetowej
Jeżeli klient w menu głównym nie znajdzie tego, czego szuka, to znaczy, że witryna jest źle zaprojektowana. Dolna stopka w przypadku prostych stron nie powinna być rozbudowana. Jeśli jednak strona zawiera dużo informacji, można część z nich przenieść na sam dół. W stopce mogą znaleźć się:
- dane kontaktowe firmy: adres, adres e-mail, telefon, formularz kontaktowy, mapka dojazdu,
- mapa strony, która ułatwia poruszanie się po stronie robotom Google,
- ikonki z odnośnikami do social media,
- zapisy do newslettera,
- call to action,
- regulamin, polityka prywatności,
- informacje o dostawie,
- informacje o autorze strony internetowej.
Warto, aby stopka strony była użyteczna i standardowa. To takie miejsce, w które nie każdy użytkownik dotrze, ale niektórzy klienci szukają w nim typowych informacji – takich jak dane teleadresowe, linki do social media czy autora projektu danej witryny. Projektując stronę, warto myśleć właśnie o potrzebach i przyzwyczajeniach jej użytkowników.
Menu stron internetowych w praktyce – wybrane przykłady
Nadrzędną zasadą jest to, że menu powinno być proste i przejrzyste. Przykładów stron z różnymi rodzajami menu jest wiele. Niektóre menu są bardzo interaktywne, inne stateczne i minimalistyczne – ważne, by były funkcjonalne, a użytkownik dzięki nim potrafił szybko odnaleźć się na nowej stronie.
Przykłady menu poziomego
Strona wrocławskiego teatru Capitol to przykład strony z prostym i przejrzystym menu poziomym.
Strona Politechniki Krakowskiej posiada bardziej rozbudowane menu poziome. Najpierw użytkownik widzi belkę poziomą, a po najechaniu kursorem myszki na nią, menu się rozszerza.
Przykłady menu pionowego
Można je często spotkać na blogach, np. tych kulinarnych jak Kuchnia Domowa.
Przykłady hamburger menu
Sklep Medicine posiada hamburger menu, które w tym przypadku jest uzasadnione. Ze strony korzysta klient młody, który intuicyjnie kliknie w dane menu, a sam hamburger nie zasłania głównej treści strony, czyli reklamy ubrań.
Strona po kliknięciu w hamburger menu:
Przykład menu hybrydowego
Strona Muzeum Sztuki Współczesnej w Krakowie to przykład witryny, która zawiera dużo treści, a jednocześnie jest bardzo czytelna. Zastosowano tutaj podwójne menu. Po wejściu na stronę użytkownik widzi poziome menu, gdy w nie kliknie, po lewej stronie wyświetla się menu pionowe boczne. Dodatkowo użytkownik wie, w jakiej zakładce się znajduje ze względu na podświetlenie tej wybranej.
Strona po kliknięciu w jedną z zakładek:
Przykłady oryginalnych projektów menu strony
Blog Natalii Hatalskiej posiada interesujące rozwiązanie menu. Klikając na jeden z napisów, ten zmienia się w ikonkę i to koloru różowego, dzięki czemu użytkownik wie, na jaką zakładkę kliknął.
Strona internetowego sklepu Zara jest bardzo interaktywna. Menu w postaci hamburgera zamienia się w boczne menu, w którym wyróżnienia osiągane są na różne sposoby: wielkimi wyboldowanymi literami czy zaznaczeniem na intensywny kolor.
Strona marki Moonie nie posiada menu. Ostatecznie właścicielowi marki zależy na tym, by użytkownik odwiedził jego sklep internetowy. Brak menu to ryzykowne posunięcie, może to irytować klienta i spowodować jego wyjście ze strony. Jest przykładem decydowania za klienta, jaka będzie jego ścieżka.
Jak stworzyć menu strony internetowej – podsumowanie
W przypadku budowania menu strony internetowej warto korzystać z gotowych pomysłów. Niekonwencjonalne, oryginalne menu sprawdzą się tylko w nielicznych i uzasadnionych sytuacjach. Niejednokrotnie wymagają testów A/B, pochłaniają więcej czasu przy wdrożeniu. Jednym z plusów zastosowania popularnego formatu menu jest jego czytelność. Jeśli projekt działa u innych, jest przejrzysty i funkcjonalny – warto go zastosować na swojej stronie www. Plusem praktycznego menu jest to, że nawiguje w intuicyjny sposób – bez względu na język użytkownika, ten odnajdzie się na stronie. A przecież menu właśnie po to jest. Ma ułatwiać poruszanie się po www, nawigować konsumenta.
