Jak zaprojektować menu główne? Prosto, ale kreatywnie

Zdjęcie główne artykułu pochodzi z pl.depositphotos.com

Dlatego podpowiadamy, jakie trendy są najpopularniejsze, o czym koniecznie musisz pamiętać, a o czym dla dobra swojego biznesu zapomnieć.

„Przed rozpoczęciem projektowania menu należy zrozumieć jego poszczególne komponenty. Te mechanizmy to podstawowe cegiełki. Gdyby nawigacja po witrynie była opowieścią, mechanizmy byłyby zdaniami i akapitami, które się na nią składają”. To fragment książki „Projektowanie nawigacji strony WWW” autorstwa Jamesa Kalbacha. Wszystko się zgadza, chociaż została ona napisana blisko dziesięć lat temu, a to w projektowaniu epoka.

Chociaż coś jednak się zmieniło – w czasach, kiedy internauci zostali jeszcze bardziej rozpieszczeni, menu musi być jeszcze bardziej intuicyjne. A najlepiej, kiedy będzie też zapadające w pamięci.

Zaprojektowanie menu nie jest łatwym zadaniem, szczególnie jeśli chodzi o bardziej skomplikowany serwis złożony z wielu podstron. Ten element musi z jednej strony być bowiem atrakcyjny, z drugiej zaś dobrze prowadzić klienta przez sekcje, które najbardziej go interesują.

Dobre menu jednocześnie pozwoli Ci zmniejszyć współczynnik odrzuceń (bounce rate), czyli sytuacji, w których użytkownik przed wyjściem wyświetli tylko jedną stronę. Bo to może sugerować, że nie wszystko miał tam podane jak na tacy.

Poziom, a może pion?

Menu poziome – najczęstsze dziś rozwiązanie mające formę górnego paska, gdzie po lewej stronie umieszcza się logo, a po prawej najważniejsze sekcje. To forma, do której oczy użytkowników przyzwyczaiły się najbardziej, ponieważ daje ona szybki przegląd treści na stronie. Jeżeli pasek poziomy jest przyklejony lub wysuwa się przy scrollowaniu, to z każdego miejsca witryny można w łatwy sposób przejść do wymaganej sekcji. To dobre rozwiązanie szczególnie w projekcie, który nie ma zbyt wielu podstron. Zaleca się jednak, aby zbytnio nie komplikować menu projektując wielostopniowe rozwinięcia. Czasami wystarczą dwa-trzy poziomy, dzięki czemu uniknie się chaosu.

Menu boczne – to menu zdecydowanie najczęściej spotykane w różnego rodzaju systemach, programach i bardzo rozbudowanych serwisach. Powód jest prosty: można zmieścić tam nieco więcej treści niż w pasku poziomym. Tego typu menu może być wysuwane lub podczepione na stałe, może także funkcjonować w formie uzupełnionej o pasek górny lub pojedyncze ikony. Minusy? „Boczek” może zasłaniać nam część treści, jeśli wcześniej nie zadbamy o to, żeby automatycznie przesuwał resztę strony.

Sidebar menu (pionowa organizacja tekstu) – rodzaj paska bocznego, najczęściej przybierający formę napisów na krawędziach strony. W odróżnieniu do typowego menu pionowego, napisy projektuje się tam również w pionie (przykład). Jest to może rozwiązanie nieco mniej przyjazne w użytkowaniu, ale wykorzystuje miejsce na boku strony, które często jest puste. Warto jednak pamiętać, aby nie upychać tam zbyt wielu pozycji.

Menu-paginacja – skrojone przede wszystkim pod proste strony, takie jak produktowy landing page. Menu ma wówczas formę np. samych wypunktowań lub cyferek.

“Hamburger” jest rozchwytywany

W dobie stron responsywnych “hamburger” (trzy blisko siebie ustawione poziome kreski) to zdecydowanie najpopularniejsze rozwiązanie. Jeśli potrzebujesz więc minimalistycznego menu, które pozwoli Ci zachować dużo przestrzeni na stronie i uczyni serwis jeszcze bardziej praktycznym, sięgnij po niego.

Rozwiązanie niby typowe dla wersji mobilnych, ale nie tylko. Niekiedy stosowane jest w wersji desktopowej jako uzupełnienie widocznego paska z głównymi sekcjami. W hamburgerze zostają wówczas zamknięte informacje poboczne (przykład). Hamburger bywa czasami nawet jedyną formą menu na stronie desktopowej. Jest tak zazwyczaj wtedy, kiedy chcemy mieć na stronie czyste obrazy lub gdy ta jest scrollowana i wszystkie treści znajdziemy zwyczajnie przewijając witrynę.

Z drugiej jednak strony, menu „hamburgerowe” na desktopie bywa też czasami pewną niedogodnością. Zawsze jest to przecież dodatkowe kliknięcie dla użytkownika. Wszystko zależy jednak od specyfiki całej strony: dla rozbudowanego serwisu może to nie być najlepsze rozwiązanie, ale już dla strony-wizytówki tak.

Przy hamburgerze na pewno można też trochę poszaleć. Chodzi oczywiście o sposób rozwijania menu, który można uatrakcyjnić chociażby ciekawą animacją.

Hybryda? Czemu nie

Rodzaj menu głównego zawsze jest oczywiście uzależniony od specyfiki strony, ale niekiedy dobrym rozwiązaniem jest mieszanie ze sobą różnych stylów.

Wspomnieliśmy już o połączeniu hamburgera z paskiem poziomym, ale podobnych przykładów jest więcej. Popularne jest chociażby zastosowanie w tym samym projekcie zarówno menu poziomego, jak i pionowego. Wówczas pierwsze pełni rolę tablicy z głównymi sekcjami, a drugie z bardziej szczegółowymi.

W niektórych projektach pionowe menu bywa również „przyklejone” do strony i towarzyszy użytkownikowi podczas scrollowania (tzw. sticky menu). To mechanizm warty rozważenia, ale tutaj trzeba mieć świadomość, że w niektórych przypadkach może on wyglądać nieco komicznie. Najczęściej stosuje się to bowiem w przypadku długich, rozbudowanych stron, dzięki czemu czytelnik nie musi tracić czasu na odkopywanie paska. Jeśli więc witryna jest tak naprawdę wizytówką firmy lub produktu, daj sobie spokój z przyklejaniem.

A jak ktoś chce zaszaleć jeszcze bardziej, kilka nietypowych pomysłów może podpatrzeć na awwwards.com.

Ułatw klikanie i nie komplikuj

Dobry układ menu to jednak nie wszystko. Podczas projektowania koniecznie musisz zwrócić też uwagę na inne ważne kwestie.

Przede wszystkim zadbaj o odpowiednio szerokie pole klikalności każdego elementu. Daj użytkownikom pewien margines, nie wymagaj od nich precyzyjnego najeżdżania kursorem w każde okienko. Kolejna sprawa to nazewnictwo. Tutaj nie ma miejsca na fajerwerki: ma być prosto i czytelnie. W menu nie liczą się efekty językowe, ale szybkość odnalezienia konkretnej informacji.

Ważna jest też kolejność poszczególnych zakładek w menu. Chodzi o to, żeby tworzyły one pewien schemat (pamiętasz historię Kalbacha?). Dlatego postaw się w roli użytkownika i zadaj sobie pytanie, których informacji szukałbyś w pierwszej kolejności, a których dopiero później.

Na koniec jeszcze jeden istotny element. Niby oczywisty, ale jak pokazują przykłady niektórych stron, nie dla każdego – klikalne logo. Internauci przyzwyczaili się już do pewnych zachowań i jednym z nich jest właśnie to, że znak marki automatycznie odsyła do strony głównej. Po pierwsze, jest to najwygodniejsze rozwiązanie, a po drugie zyskujesz dzięki temu nieco przestrzeni, bo nie musisz planować pola „Strona główna”.

I jak? Wiesz już co będzie dla Ciebie najlepsze?

–

Łukasz Dudko

Założyciel agencji interaktywnej Bloomnet

Od 2009 r. zajmuje się wspieraniem startupów w budowaniu aplikacji, tworzeniu marek oraz prowadzeniu działań wizerunkowych. Wcześniej na Cyprze projektował systemy informatyczne dedykowane branży finansowej.