Menu na stronie internetowej

Menu na stronie internetowej jest jak GPS. Z tym, że zamiast mówić, gdzie skręcić, podpowiada kolejne kliknięcia. Upewnij się, że Twój GPS działa, jak należy. W przeciwnym wypadku fundujesz swoim odbiorcom jazdę bez trzymanki.

Ten artykuł opowiada o menu na stronie internetowej. Jeśli szukasz informacji na temat menu Landing Page, podpowiemy od razu, że na tego typu stronach unika się umieszczania paska nawigacji. Więcej na ten temat piszemy tutaj.

Dlatego nie stać Cię na źle zaprojektowane menu.

Nawigacja na stronie internetowej powinna być bezwysiłkowa i intuicyjna. Jej zadaniem jest towarzyszyć odbiorcy w odkrywaniu Twoich produktów za pomocą dobrze oznaczonych ścieżek.

Menu prowadzi w głąb strony internetowej i oferuje możliwość powrotu w dowolnej chwili. Jego zadaniem jest pro­wa­dze­nie odwie­dza­ją­cych przez roż­ne czę­ści stro­ny
w taki spo­sób, aby nie potrze­bo­wa­li dodat­ko­wej pomo­cy.

Tak funkcjonuje cała profesjonalnie zaprojektowana strona internetowa. Menu powinno dobrze działać nie tylko dla wygody użytkownika. To podstawowe wsparcie w zwiększeniu jego zaangażowania.

Aby zaoszczędzić Ci konieczności testowania wszystkiego samodzielnie, zebraliśmy najważniejsze wskazówki na temat tworzenia czytelnego menu stron internetowych.

Menu nawigacyjne na wpływ na ruch poprzez współpracę z wyszukiwarkami.

Mówiąc językiem marketingowym, menu nawigacyjne jest kluczowe w generowaniu leadów (pozyskiwaniu klientów), zwiększając współczynnik konwersji (liczbę złożonych zamówień, przesłanych formularzy lub innych akcji, na jakich Ci zależy).

To podstawowy wyznacznik tego, czy witryna jest funkcjonalna.

Struktura menu na stronie internetowej ma duży wpływ na praktycznie wszystkie aspekty związane z jej użytecznością.

Wciąż w wielu menu stron internetowych można odnaleźć takie sekcje jak "Produkty" lub "Usługi". Tymczasem, aby zapewnić najlepsze wyniki SEO oraz wysoką skuteczność, należy użyć opisowej nawigacji, która zawiera frazy kluczowe, na jakie pozycjonuje się Twoja marka!

W ten sposób odwiedzający mogą szybko zrozumieć, co oferuje Twoja firma – bez marnowania czasu na próby zorientowania się, czym faktycznie się zajmujesz.

Wyszukiwarki uwielbiają opisowe etykiety.

Nikt nie wpisuje do wyszukiwarki frazy "produkty" lub "usługi". Takie etykiety nie wspomogą Twojego SEO. Menu strony internetowej jest kluczowe pod względem istotności dla algorytmów wyszukiwania.

Dzieje się tak z dwóch powodów.

Po pierwsze dlatego, że jest umieszczone w nagłówku H1, a po drugie, ponieważ pojawia się na każdej podstronie, co wpływa na jego znaczenie.

Dlaczego to ważne?

SEO to Twój największy przyjaciel w pozyskiwaniu klientów.

Dobra optymalizacja strony pod SEO zwiększa sprzedaż nawet
o kilkadziesiąt procent.

Twój pasek nawigacyjny wizualnie się wyróżnia. Powinien więc komunikować istotne rzeczy natychmiast.

Używaj języka, który jest jasny i konkretny. Odwiedzający (lub roboty Google) będą mogli szybko się odnaleźć i zaklasyfikować Twoją markę.

Pamiętaj, że uwaga odbiorców w Internecie jest bardzo krótka. Masz niewiele ponad 2 sekundy, aby ich zainteresować. Użytkownicy nie chcą się domyślać, czym się zajmujesz. Jeśli nie będziesz komunikować się skutecznie, odpłyną do konkurencji.

Zadaj sobie pytanie, jak odwiedzający mogą przeszukiwać Twoją witrynę. Postaw się w ich sytuacji — jaki rodzaj menu ułatwi im znalezienie dokładnie tego, czego potrzebują szybko i bez kłopotów? Jakie menu pomoże zrealizować zamówienie lub wypełnić formularz kontaktowy?

Tak jak nikt nie wpisuje słowa “produkty” w wyszukiwarkę, tak też nikt nie szuka “wideo”, “wpisów blogowych”, “artykułów” czy “infografik”. Nawigacja oparta na formacie nie daje wystarczającej informacji o tym, jakich treści można się spodziewać.

Nasze menu mówi, czego możesz się po nas spodziewać!

Wyjątkiem od tej reguły bywa “case studies”, ponieważ niektórzy użytkownicy mogą być zainteresowani dokładnym opisem postępowania z danym produktem. To pomaga zapoznać się z efektami, jakie uzyskuje się dzięki narzędziu czy współpracy z daną marką.

Wyróżnij się! Nie masz pewności, jak to zrobić? Skontaktuj się z nami.

Staraj się wystrzegać jednej ogólnej strony "usługi" i linkowania jej w menu strony internetowej. Nie pomoże to ani odwiedzającym ani optymalizacji witryny. Za to etykiety opisowe mogą pomóc Ci w segmentacji Twoich produktów i usług.

Jakie więc pozycje powinny znaleźć się w menu?

Te, które są najbardziej istotne z punktu widzenia Twojego biznesu. Nie staraj się tam umieścić wszystkiego.

Początek i koniec listy to miejsca, na których uwaga odbiorców skupia się najbardziej. Upewnij się, że najważniejsze dla Ciebie pozycje są umieszczone strategicznie po obu stronach menu.

Odpowiadają za to dwa zjawiska:

Projektanci czę­sto pró­bu­ją dość jasno wytłu­ma­czyć, jakie opcje są dostępne i cze­go odwie­dza­ją­cy powi­nien się spo­dzie­wać po poszcze­gól­nych sekcjach stro­ny, jeśli klik­nie na odpo­wied­nie odno­śni­ki.

To zadanie wydaje się być pro­ste, jed­nak w prak­ty­ce wca­le takie nie jest. Jak więc zapro­jek­to­wać efek­tyw­ną, czy­tel­ną nawi­ga­cję na stro­nach i jakie rodzaje menu na stronie brać pod uwagę?

Ograniczenie liczby opcji w głównej nawigacji jest przyjazne dla użytkownika. Co więcej, znowu okazuje się kluczowe dla wyszukiwarek.

Najwyższy autorytet w oczach Google ma Twoja strona główna. Jeśli jednak znajduje się na niej zbyt wiele odnośników, potencjał SEO znacznie spada.

Jeżeli nie prowadzisz portalu informacyjnego, to na Twojej stronie głównej nie powinno być więcej, jak kilkanaście-kilkadziesiąt odnośników. Liczą się wszystkie linkowania: również te z menu!

Zbyt wiele elementów nawigacji może być przytłaczające dla odwiedzających i utrudniać znalezienie tego, czego szukają.

Potrzebujesz więcej, niż siedem kategorii? Podziel swoje usługi na grupy.

To zrozumiałe, ponieważ niezależnie od tego, jak wiele dzieje się na stronie, logotyp jest zazwyczaj stałym elementem.

Odpowiednio zaprojektowane menu strony internetowej pomaga użytkownikom zrozumieć cel Twojej witryny i nawigować po niej.

Przycisk kontaktowy powinien być widoczny w Twoim nagłówku. To standardowa praktyka.

Olbrzymie znaczenie ma jednak to, co napiszesz na tym przycisku. Wzrost współczynnika klikalności zobaczysz wychodząc poza schemat i oferując unikalną wartość.

Ikony social media w menu zmniejszają ruch na Twojej stronie.

Skup się na stworzeniu wciągającego projektu, który zachęci odwiedzających do pozostania u Ciebie na dłużej, a social media umieść w mniej widocznym miejscu (jeśli Ci na tym zależy).

Z dużym prawdopodobieństwem nie wygrasz z powiadomieniami od znajomych i zabawnymi filmikami o kotach.

Zastanawiasz się, które menu sprawdza się lepiej: klasyczny hamburger czy pasek nawigacyjny?

Nielsen Norman Group, uznany lider w dziedzinie badań doświadczeń użytkowników i projektowania, postanowił przyjrzeć się tej kwestii, testując ukryte menu (hamburger) zarówno wśród użytkowników mobilnych, jak i stacjonarnych.

Chociaż nie jest jasne, na jakiej stronie internetowej przeprowadzili swój eksperyment, uzyskane wyniki okazały się fascynujące!

Nie oznacza to jednak, że wszystko powinno być zawsze na widoku. Najlepiej jest tak projektować system nawigacji, aby wykorzystać zarówno widoczne, jak i ukryte elementy.

Jej idea jest pro­sta jak przy­cisk start w Windows. Najeżdżasz kur­so­rem na kate­go­rię w menu, aby zoba­czyć co kry­je się w pod­ka­te­go­riach. Tak w jednym zda­niu moż­na by opi­sać naj­po­pu­lar­niej­szą for­mę nawi­ga­cji na świecie “Drop-Down”.

Sprawdza się ona dosko­na­le, zarów­no na stro­nach Intela, IBM, jak i w Białym Domu, czy u Owocnych.

Zapewnia optymalną równowagę pomiędzy użytecznością a estetyką, dzięki czemu odwiedzający mogą szybko znaleźć to, czego szukają, ciesząc się jednocześnie ciekawą wizualnie stroną.

Z dużym prawdopodobieństwem Twoja strona jest odwiedzana co najmniej tak często za pośrednictwem smartfona, jak i komputera. Zadbaj o to, aby doświadczenie było równie dobre dla obu sprzętów.

Twoje mobilne menu powinno być maksymalnie szerokie. Dzięki temu tekst jest łatwiejszy do odczytania, a przyciski wygodniejsze do kliknięcia. Dotyczy to zarówno menu w formie paska, jak i wysuwanego hamburgera.

We wspomnianym wyżej badaniu Nielsena sprawdzono, jak kwestia ukrytego i widocznego menu wpływa na zadowolenie użytkowników smartfonów.

Pozostałe najlepiej ukryć w dobrze widocznym i znanym odbiorcom hamburgerze.

Warto zapamiętać:

Nikt nie lubi wybierać numeru na swoim telefonie. Projektując menu na urządzenia mobilne nie przegap okazji, aby ułatwić odwiedzającym wykonanie połączenia. Zamień numer tekstowy w klikalny numer telefonu.

Aby nawi­ga­cję uczy­nić bar­dziej efek­tyw­ną, pro­jek­tan­ci korzy­sta­ją
z atrak­cyj­nych ikon. W takich przy­pad­kach war­to upew­nić się, że iko­na jest łatwo roz­po­zna­wal­na, jasno prze­ka­zu­je wia­do­mość, odsy­ła do wła­ści­we­go lin­ku i ma odpo­wied­ni roz­miar.

Złe, prze­sy­co­ne tre­ścią iko­ny, obni­ża­ją kli­kal­ność.

Wyrazisty kolor lub efekt typu hoover w menu daje precyzyjny i jasny komunikat: "Jesteś tutaj". Warto wykorzystać kolorystykę ze swojego brand booka do tego, aby budować spójne doświadczenie wizualne.

Zastanawiasz się nad tym, czy Twoja identyfikacja wizualna jest spójna? Wahasz się nad nowym logo? Napisz do nas, o czym myślisz!

Dobrym przykładem wykorzystania barw w menu jest platforma Netflix, która do nawigowania użytkownika wykorzystuje kolor biały.

Jeżeli Twoja firma zajmuje się np. sprzedażą produktów, które można łatwo przedstawić graficznie, możesz dać szansę menu uzupełnionymi o ikony.

Ciekawym rozwiązaniem może okazać się również wykorzystanie zdjęć w nawigacji.

Kreatywna nawigacja wykorzystująca animacje i kolory to wyższa szkoła jazdy.

Jeśli decydujesz się na takie rozwiązanie upewnij się, że działa bez zarzutu na każdym urządzeniu i popularnych przeglądarkach.

Warto przy okazji wspomnieć o menu w formie pop-up/slide-out, które dobrze sobie radzą z przyciągnięciem uwagi odwiedzających. Niekiedy jednak znacznie gorzej radzą sobie z podstawowym zadaniem, jakim jest nawigacja po stronie.

Marzy Ci się oryginalna strona z różnorodnymi animacjami, ale nie wiesz, jak wcielić swoją wizję w rzeczywistość? Chętnie Ci w tym pomożemy!

Storytelling, czy­li nar­ra­cja już na pozio­mie nawi­ga­cji w menu to jed­no
z naj­bar­dziej atrak­cyj­nych roz­wią­zań, któ­re war­to wziąć pod uwa­gę.

Nawet jeśli użyt­kow­nik zapo­zna się tyl­ko z samym menu, to i tak będzie wiedział spo­ro o całej fir­mie i jej pro­duk­tach.

Jest to chy­ba naj­gor­sza krzyw­da, jaką możesz zro­bić roz­wi­ja­ne­mu menu.

Nawet jeśli masz wie­le infor­ma­cji do prze­ka­za­nia, nie musisz poka­zać wszyst­kie­go w menu. Rozwijanie wie­lo­po­zio­mo­we nigdy się nie spraw­dza.

Często, gdy użyt­kow­nik prze­su­nie wskaź­nik myszy lek­ko poza roz­wi­nię­te menu, całość zni­ka natych­miast. Opóźnij tro­chę ten efekt. Dzięki temu użytkownicy nie będą sfru­stro­wa­ni wyłą­cza­ją­cym się menu, gdy zda­rzy im się wyje­chać kur­so­rem poza ramy.

Wystarczą dwie sekun­dy opóź­nie­nia w wyłą­cza­niu, aby zli­kwi­do­wać ten przy­kry efekt.

Włączenie hoovera powo­du­je, że użyt­kow­nik będzie wie­dział dokład­nie, któ­ry przy­cisk nawi­ga­cyj­ny w menu ma zazna­czo­ny, co z pew­no­ścią mu pomo­że.

Rozwijanie się menu ma być miłe dla oka, ale przede wszyst­kim powin­no być bły­ska­wicz­ne. Pamiętaj, aby ewen­tu­al­ne pod­po­wie­dzi do odno­śni­ków, umiesz­czo­nych w roz­wi­nię­tym pane­lu nie prze­sła­nia­ły pozo­sta­łych odnośników.

W prak­ty­ce, zawsze będzie­my wie­dzieć tyle ile prze­te­sto­wa­li­śmy. Nie ma tu wyjąt­ków od regu­ły. To co spraw­dzi­ło się w skle­pie sie­ci Amazon, nie przyniosło odpo­wied­nich rezul­ta­tów w skle­pie inter­ne­to­wym Reebok i odwrot­nie. Ot, cały para­doks pro­jek­to­wa­nia.

Przestrzeganie złotych zasad UX i ufanie swojemu instynktowi z pewnością jest dobrym wstępem do projektowania, ale nie gwarantuje sukcesu.

Aby upewnić się, że konkretne rozwiązanie przekłada się na konwersję, należy przeprowadzić testy A/B na wszelkich zmianach nawigacyjnych.

Testować warto wszystko: liczbę linków w menu, kolorystykę, lokalizację linków i rozmiar czcionki. Testom warto poddać również zmiany CTA.

Nim sięgniesz po płatne narzędzia do testów, możesz wypróbować Google Analytics. Upewnij się jednak, że Twoja strona jest zoptymalizowana pod kątem GA.

Czujesz, że utknąłeś z tworzeniem swojej strony internetowej? Pozwól nam ją wypielęgnować i udoskonalić. Działamy?