skip to Main Content
+48 606 628 628 info@zgred.pl
Menu Jaskrawe Basia

17 rzeczy na które warto zwrócić uwagę projektując menu w serwisie WWW

Zawsze mi się wydawało, że w MENU to niewiele można zrobić czy też zepsuć. Poniżej siedemnaście rzeczy, na które warto zwrócić uwagę projektując czy też audytując menu w serwisach internetowych. Niektóre błey są oczywiste do uniknięcia ale nadal można je spotkać.

1. Pole Kontakt

Pozycja „kontakt” to chyba nadal obowiązkowe pole w MENU. Co prawda w sklepach internetowych kupujący najczęściej sięgają po telefon (więc numer telefonu musi być zawsze i wszędzie dostępny) o tyle KONTAKT to jednak jest coś nieodzownego na stronie. Jest to tak naturalne, że zabranie tego  użytkownikowi powoduje niemalże płacz jak u małego dziecka ;) Zmiana nazwy tego pola na np „Bądźmy w  kontakcie” to już nie to samo – po prostu nawyk użytkownika do nazwy nie powinien być zmieniany. Chyba, że damy coś lepszego w zamian.

2. Pole Blog

Blog jest narzędziem, dzięki któremu ludzie szukający czegoś w Internecie mają znaleźć Twój serwis. Blog nie może być docelową podstroną serwisu, na którą mają wchodzić użytkownicy poruszający się po Twoim serwisie.

Obrazowo rzecz ujmując: jeśli Twój sklep coś sprzedaje, to blog jest tylko dodatkiem i użytkownicy nie powinni być tam kierowani za wszelką cenę. Natomiast jeśli blog stanowi podstawową funkcjonalność serwisu – nie należy go ukrywać u musi być na widoku.

Tym samym w sklepach internetowych link do bloga z reguły ląduje w stopce a w serwisach takich jak mój (ten co czytacie) blog stanowi integralną część i link do niego znajduje się w top-menu :)

3. Pola Usługi / Produkty

Jeżeli na Twojej stronie liczba głównych produktów czy usług jest mała warto je „wylistować” w górnym MENU po to aby użytkownik/klient miał do tego szybki dostęp za pomocą jednego kliknięcia (im krótsza ścieżka dostępu dla leniwego klienta tym lepiej).

Na moim blogu usługi są w menu rozwijanym więc „wylsitować” ich bezpośrednio na belce nie mogę ale w sklepach np z konkretnym asortymentem już można – skracajac ścieżkę dostępu – przykłąd poniżej.

szybkie-menu-ux

Czyli przy projektowaniu menu pamiętamy o SEO ale też o UX (no i UI też też)

4. Za długie MENU, za krótkie pole

Trafiają się witryny (sporadycznie) gdzie w menu jest upchanych tyle linków do usług, produktów iż nie miesići się i rozjeżdża. Szczególnie widać to na wąskich stronach. Wygląda to nieestetycznie.

menu-rozjechane-seo-ux

Powyższy przykład:

  • pole KONTAKT „wyskoczyło” do drugiego wiersza z powodu zastososwanego jednego „tricku” SEO
  • pole wyszukiwarki (lupka) też się nie mieści

Warto o tym pamiętać – szczególnie tutaj widać, że użytkownik może stwierdzić, iż w menu nie ma linka do kontaktu.

5. Menu przyciąga uwagę

Twoje MENU nie powinno przyciągać uwagi użytkownika. W sklepach (np z branży ero) menu jest np różowe, fioletowe, czerwone (dość jaskrawe) w stosunku do całego serwisu – po prostu przyciąga uwagę. Klient ma się skupić na zawartości, treści a nie na elementach nieistotnych. Tutaj blogerzy też mają trochę za uszami – przykład z bloga Basi ;) – kolor czerwony i czarny fatalnie dobrany :P

menu-jaskrawe-basia

6. Menu nie jest responsywne

Tego chyba nawet nie trzeba tłumaczyć – menu MUSI być responsywne. Potem okazuje się, że użytkownik nie może trafić w menu, menu zajmuje mu całą przestrzeć na komórce czy tablecie lub cała strona po prostu „krzywo” wyświetla się.

7. Menu zawiera przycisk do strony głównej

Tutaj są dwie szkoły, a może nawet czterdzieści ;) Wszystko zależy od branży, strony, kontekstu i tak dalej. Są zwolennicy, którzy przycisk strony głównej (domowej) pomijają opierając się na fakcie, że logotyp na stronie zawsze jest klikalny i za jego pomocą można zawsze wrócić na stronę główną. Dodatkowo wychodzą z założenia, że klient ma nawyk klikania w logotyp – stąd też można wysnuć wniosek, że w przypadku małej ilosci miejsca w menu ten przycisk można pominąć.

Z drugiej strony ten przycisk może być ważny – nie każdy dezajn musi mieć klikalne logo, nie każdy użytkownik lubi klikać w ikonkę domku.

Nie mniej jednak – NIE MA przymusu stosowania przycisku w menu.

8. Strony ze słabymi statystykami odwiedzin

Nie ma potrzeby wciskać na siłę do menu górnego stron, które z założenia będą rzadko (lub wcale) odwiedzane. Wskazane jest aby po zaprojektowaniu serwisu i puszczeniu go do indeksacji sprawdzić, które z podstron w menu są rzadko odwiedzane i przesunąć je w inne miejsce np do stopki. Przykładem takim może być FAQ, Regulamin, Reklama etc…

Przykład (mój ulubiony, wychwycony ostatnio):

menu-nietestrony-seo-ux

Jako klient wchodząc pierwszy raz na tę stronę miałem problem z odnalezeniem się gdzie co klikać. Co prawda pełne menu było po lewej ale ktoś przy projektowaniu próbował (chyba) zmienić nawyki klientów… Przecież to jest dramat i utrata konwersji. Zmiana miejsca tych stron pod kątem SEO nic nie robi ale pod kątem konwersji i UX już sporo :)

9. Brak podświetlenia sekcji

Jeżeli klikasz i wchodzisz na jakąś podstronę chciałbym zapewne wiedzieć gdzie się znajdujesz. Wzrokowo patrzysz się zawsze na MENU (bo jest duże i ostatnio tam klikałeś). Podświetlenie danego bloku na menu powoduje, że wiesz w jakiej kategorii/podkategorii czy też na jakieś podstronie jesteś. Brak tego powoduje lekkie zagubienie się klienta.

Wskazane jest abu to podświetlenie było też MEGA wyraźne. U mnie na blogu gdy wejdziesz na dowolną podstronę poprzez górne menu jest ono podświetlone – ale tak ledwo ledwo i wygląda to jak kończąca się świeczka. To powino być wyraźniejsze.

10. Zbyt długie nazwy

W menu należy stosować nazwy tekstowe krótkie. Najczęściej stosujemy jednowyrazowe oznaczenia bloków. Natomiast nie należy stosować wrzucania do menu pełnych zdań. Wygląda to mało estetycznie, tracimy miejsce na rzeczy istotne.

menu-zbytdlugienazwy

11. Źle dobrany sposób wyświetlania i wybierania menu

To chyba jest dość często spotykany sposób prezentowania menu. Według różnych źródeł dobry i zły – kwestia może gustu ale bardziej wygody. Dlatego też zawsze warto zastanowić się czy zamiast menu „schodkowego” nie lepiej wybrać „grube menu”

Menu „schodkowe” – wyzwanie to próba wybrania końcowego produktu ;)

menu-sprobujnawigacji

Menu „grube” – ostatnio coraz bardziej popularne:

menu-grube

 

Od razu dodam, że w „grubym” nie powinno się stosować H1, H2, H3 :)

12. Niestandardowe położenie

To zdarza się bardzo rzadko ale przykład z punktu 8 jest bardzo dobrym przykładem na to, że menu z belki górnej powinno znaleźć się w stopce i część menu bocznego (sidebar menu) powinna zostać zaimplementowana do menu górnego.

Należy zwrócić uwagę (to jest zarówno od strony SEO jak i UX) aby w menu górnym znajdowały się najbardziej pożądane rzeczy. Usunięcie górnego MENU i przesunięcie go np na bok lub do stopki też spowoduje, że użytkownikowi będzie trudno nawigować po serwisie.

13. Zła kolejność

Tego jeszcze nie spotkałem ale odwracanie kolejności poszczególnych stron w menu nie jest właściwe. Np przesunięcie pole KONTAKT na początek menu a np przycisku z ofertą na koniec nie jest dobrym rozwiązaniem.

Aczkolwiek jeśli serwis jest duży i rozbudowany a użytkownicy są przyzwyczajeni do takiego rozwiązania to czemu nie ;)

14. Zmiana pól w menu

NIE ZMIENIA się pól w menu w zależności od strony na jakiej znajduje się użytkownik. Taka zmiana powoduje, że użytkownik gubi się w nawigacji. Spotkałem się z tym faktem na jednym z większych portali turystycznych (niestety nie mogę wskazać jakim – poszukajcie sobie, chyba że to zmienili)

15. Nie analizujesz danych

W sklepach internetowych warto pokusić się o wykonanie analizy klikalności w poszczególne sekcje związane z MENU. Stosując podmiany, testy A/B można stwierdzić, które sekcje w menu są popularne a które mniej. Słabo klikalne usunąć lub przesunąć w inne miejsce – pozostawiajac te najpopularniejsze.

menu-statystyka

Analizując moje menu można by dojść do wniosków:

  • „sklep” jest mało popularny – przenieść do stopki
  • „katalogi są” mało popularne – przenieść do stopki

Co w takim razie w to miejsce można wstawić ? A to już zostawiam Wam czytaelnicy – do stestów :)

16. Grafika vs Tekst

Wykorzystanie tekstu w przyciskach ma swoje zalety: zawsze w dowolnym momencie (szybko i bez stresu) można nazwę przycisku zmienić; Google czyta tekst; lepsze linkowanie wewnętrzne i jeszcze kilka rzeczy. Z przyciskami w formie graficznej za wiele nie da się zrobić i od strony SEO też przeważnie jedną z rekomendacji jest „zrobić przyciski tekstowe”.

17. Brak CTA

Przycisk CTA (Call TO Action) może być różny w zależności od branży, potrzeb etc… Na moim blogu w nagłówku nie ma takiego (wprost) ale na samej górze są dwie rzeczy: z prawej jest telefon i email, z lewej zaś social. Telefon i email można potraktować jako CTA – bo albo ktoś napisze albo zadzwoni ;) Wcześniej istniał taki przycisk – ekran poniżej prezentuje poprzednią skórkę z bloga.

menu-ctabutton

W sklepie internetowym takim przyciskiem CTA mogą być promocje (po kliknieciu przenosi Nas na stornę z promocjami), pole kontakt czy inne… Sugestia jest taka, że takie CTA powinno być.

 

Jakies inne uwagi związane z menu ??? Zapraszam do dyskucji.

Ekrany pochodzą ze sklepów, które przeglądałem i są realnymi przykładami na dzień powstania tego artykułu.

Źródło natchnienia: http://mysiteauditor.com/blog/17-main-menu-mistakes/

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (16 głosów, średnia: 3,69 z 5)

Paweł Gontarek

Paweł Gontarek - Zgred - pasjonat SEO, staram się zrozumieć czym jest i jak działa SEM oraz UX.

Ten wpis ma 26 komentarzy
  1. Dobra lista pokazująca, że zaprojektowanie dobrego menu to wcale nie jest takie hop siup. Ale i tak wielu markieterów stwierdzi, że przecież menu to żadna filozofia, a ostatecznie liczy się to żeby napędzić ruch na stronę i wystarczy.

  2. A odnośnie wspomnianego linku do strony głównej, pomijając wersję graficzną (logo lub ikonka domku) to w wersji tekstowej anhaorem ma być „Strona Główna”, czy może to być nazwa brandu czy słowo/fraza na jaki się pozycjonujemy?

  3. Przeczytane od dechy do dechy. Nawet się zgadzam z 16 punktami a z 1 nie. Brak jeszcze rozbicia klientów na grupy (płeć, wiek itd). Sam robiłem testy i wiem, że czasem kolor czerwony w menu pomaga a różowy jeszcze lepiej. No chyba że mamy usługi pogrzebowe to czarny jak najbardziej jest wskazany.

    Jak zwykle celowe literówki wrzucone w SentiOne po to by namierzyć kopiujących – sprytnie.

  4. Na stronie Intela jest tzw. ‚Flyout’ menu. Jakie macie opinie na temat takiego menu? Flyout menu wygláda jak poáczenie drop-down ze wspomnianym tu ‚brubym’ menu.

  5. Świetny tekst. Jeszcze dodałam: 1) Puste strony/ zakładki (puste, w sensie, bez tekstu, a klikalne np. jak zakładka ma podstronę i jest klikalna ta zakładka to czasem zdarzają się takie zakładki bez tekstu, a podstrony już tekst mają). 2) Nie działająca zakładka w menu, np. dodana do menu, ale w ersji roboczej i jeszcze nigdzie nie linku (ostatnio zwróciłam uwagę na taką zakładkę jednej osobie, która prowadziła blog i od razu się jej pozbyła). 3) Polecam jeszcze zakładkę/ pole np. „Porady” z wpisami z bloga lub w postaci zwykłej podstrony – do tych postów/ podstron można wrzucać też frazy i cta do kontaktu.

  6. Kontakt – niby takie oczywiste, a wejdźcie na stronę zalando :) giganta, który na testy przeznacza grubą forsę, czy to specjalny zabieg?

  7. Jeśli chodzi o optymalizację to np. kliknięcie na Kontakt czy to w górnej belce czy dolnej czy z sidebaru zawsze powinno prowadzić na tę samą podstronę. Niby oczywista oczywistość a różnie to bywa, ostatnio widziałem że Joomla potrafi wygenerować kilka różnych adresów do tego samego…

    Nie da się czegoś zrobić z tą czcionką?? Tragicznie się to czyta, polskie znaki są „w innej” czcionce

  8. Tak samo częste jest zmienianie elementów menu w obrębie jednej witryny w zależności od strony – no koszmar. Jakbym wszedł do labiryntu. Automatycznie mam ochotę opuścić taką stronę. Cel chyba jeden – utrudnianie życia użytkownikom ;-)

  9. W sumie, żyjemy w czasach kiedy wszystko się upraszcza, dąży się do pokazywania obrazów. Zdarza się, że znajdę gdzieś w sieci menu złożone z piktogramów. O ile większość piktogramów jest zrozumiała, to bywają kwiatki, gdzie np. piktogram oznaczający download jest zastosowany np. do oferty. To już jest słabe i prowadzi do opuszczenia strony, bo użytkownik najczęściej się gubi… Jestem zwolennikiem tekstu. Ew. tekst + piktogram. Mariusz Kołacz ma to bardzo fajnie zrobione na swojej stronie.

  10. Wiadomo, że responsywne menu ułatwia korzystanie z witryny na urządzeniach mobilnych. Zastanawiam się czy jest to czynnik mający wpływ na wyniki wyszukiwania?
    Pytam, bo mam kilka stron i w niektórych przypadkach zaprojektowanie responsywnego menu to delikatnie mówiąc karkołomne zadanie.

  11. Mam takie krótkie pytanie dot. grubego menu – czemu nie warto tam wstawiać h1,h2,h3? Czy zatem cena takiego rozwiązania jest nie do końca wykorzystany potencjał mocy?

    1. Teoretycznie można w tym grubym menu szastać Hx … ale trzeba robić to z głową i ostrożnie – trzeba patrzeć na całą stronę globalnie bo MENU przecież będzie takie samo na wszystkich podstronach serwisu. I wtedy dojdziesz do wniosku że oprócz fraz kluczowych w kategorii podstrona rankuje jeszcze na słowa niezwiązane z daną kategorią – wiec po co ?

  12. Cześć, grube menu zdecydowanie bardziej mi odpowiada gdy przegladam obszerny serwis, jednak male strony wytarczy ze maja zwykła liste (bar) u góry lub z boku. Niektórzy stosujá dwa menu, co nie kiedy sprawia zdezorientowanie.

  13. Za sklepy raczej się nie biorę ale zastawia mnie jedna rzecz, jak google traktuje opcję zmiany wyglądu strony z wynikami wyszukania lub podstrony kategorii gdzie można wybrać: full (opis i zdjęcia), krótka lista (miniatura + krótki opis) lub kafelki (tylko miniaturki). Oraz możliwa zmiana ilości wyników (produktów) Dodam, że w opisanym przypadku URL się nie zmienia a kod źródłowy owszem. Może pytanie banalne ale człowiek uczy się całe życie.

    1. Nikt, nic?! Szkoda. Bo pytanie nurtuje mnie nadal. Przy 3 typach prezentacji i 3 możliwościach wyboru ilości pokazywanych wyników daje 9 możliwości. Wg mnie domyślne ustawienie powinno być: pełen opis z obrazkiem i maksymalna liczba wyników (max. jest 72). Kolejne podstrony mają już dodane w url /s=X

  14. Mam kilka pytań,
    1. dlaczego mniej popularne linki przenosimy z menu głownego do stopki?i co to daje?
    2. czy na stronie głównej powinno umieszczać tylko najpopularniejsze linki (do najbardziej poczytnych miejsc serwisu)-> popularna książka Shari Thurow o optymalizacji radzi maksymalnie zlinkować strony serwisu(linki z głównej do każdej podstrony)
    3. co myslicie o praktyce dawania nofollow do linków wewnetrznych, które nie stanowią wartości dodanej dla seo? praktyka stosowana np przez alibabe
    4. Czy w stopce mogą występować linki znajdujące się również w menu głownym tylko z innym anchorem?

    1. Ad.1 zwiększamy sobie CTR na popularnych produktach, klienci tam częściej wchodząi częściej je kupują
      Ad.2 on podchodzi hurtowo, inni analizują co tak naprawdę zrobić na głównej i jak, żeby zmaksymalizowac wynik. Nie idźmy w ilość tylko jakość
      Ad.3 Jestem ZA !
      Ad.4 po co ? chcesz zdenerwować wujka Google ?

  15. Wszystko idzie do przodu i się zmienia. W dzisiejszych czasach i tak każdy zrobi wszystko po „swojemu” lub jak „ten drugi”.

  16. Co do CTA mam pytanie,. Co uważasz na temat wyskakujących pup upów z promocjami za na ten przykład podanie maila na newsletter?

  17. Projektując menu zawsze trzeba mieć na uwadze, że ktoś może korzystać ze strony na urządzeniach mobilnych gdzie kliknięcie w footerze na kontakt może okazać się nie lada wyzwaniem dlatego umieszczanie menu kontakt w głównym menu uważam za priorytetową rzecz.

  18. U Pawła zawsze wszystko rzeczowo i na temat. Zbudowanie dobrego menu niby rzecz bardzo prosta, jednak kreując poprawne Topical Aythority można naprawdę dużo sobie pomóc.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Back To Top
Przeczytaj poprzedni wpis:
img 0
Czy współczynnik klikalności (CTR) jest czynnikiem wpływającym na pozycję strony w organicznych wynikach wyszukiwania?

Bartosz Góralewicz z agencji SEO Elephate przedstawia wyniki swojego eksperymentu, które pokazują, że CTR z wyszukiwania nie jest czynnikiem wpływającym...

uxd-swps
User Experience Design – studia UXD na Uniwersytecie SWPS

Przez jakiś czas szukałem możliwości poszerzenia swojej wiedzy w zakresie użyteczności ale jest to temat rzeka i nie bardzo mogłem...

Zamknij