Menu Jaskrawe Basia

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

VN:F [1.9.22_1171]
Ocena: 3.5/5 (liczba ocen: 14)

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/

VN:F [1.9.22_1171]
Ocena: 3.5/5 (liczba ocen: 14)
17 rzeczy na które warto zwrócić uwagę projektując menu w serwisie WWW, 3.5 out of 5 based on 14 ratings

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.

Dodaj komentarz

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

Przeczytaj poprzedni wpis:
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...

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