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

„Przed roz­po­czę­ciem pro­jek­to­wa­nia menu na­le­ży zro­zu­mieć jego po­szcze­gól­ne kom­po­nen­ty. Te me­cha­ni­zmy to pod­sta­wo­we ce­gieł­ki. Gdyby na­wi­ga­cja po wi­try­nie była opo­wie­ścią, me­cha­ni­zmy by­ły­by zda­nia­mi i aka­pi­ta­mi, które się na nią skła­da­ją”.

To frag­ment książ­ki „Pro­jek­to­wa­nie na­wi­ga­cji stro­ny WWW” au­tor­stwa Ja­me­sa Kal­ba­cha. Wszyst­ko się zga­dza, cho­ciaż zo­sta­ła ona na­pi­sa­na bli­sko dzie­sięć lat temu, a to w pro­jek­to­wa­niu epoka. Cho­ciaż coś jed­nak się zmie­ni­ło – w cza­sach, kiedy in­ter­nau­ci zo­sta­li jesz­cze bar­dziej roz­piesz­cze­ni, menu musi być jesz­cze bar­dziej in­tu­icyj­ne. A naj­le­piej, kiedy bę­dzie też za­pa­da­ją­ce w pa­mię­ci.  

Za­pro­jek­to­wa­nie menu nie jest ła­twym za­da­niem, szcze­gól­nie jeśli cho­dzi o bar­dziej skom­pli­ko­wa­ny ser­wis zło­żo­ny z wielu pod­stron. Ten ele­ment musi z jed­nej stro­ny być bo­wiem atrak­cyj­ny, z dru­giej zaś do­brze pro­wa­dzić klien­ta przez sek­cje, które naj­bar­dziej go in­te­re­su­ją.

Dobre menu jed­no­cze­śnie po­zwo­li Ci zmniej­szyć współ­czyn­nik od­rzu­ceń (bo­un­ce rate), czyli sy­tu­acji, w któ­rych użyt­kow­nik przed wyj­ściem wy­świe­tli tylko jedną stro­nę. Bo to może su­ge­ro­wać, że nie wszyst­ko miał tam po­da­ne jak na tacy.     

Po­ziom, a może pion?

Menu po­zio­me - naj­częst­sze dziś roz­wią­za­nie ma­ją­ce formę gór­ne­go paska, gdzie po lewej stro­nie umiesz­cza się logo, a po pra­wej naj­waż­niej­sze sek­cje. To forma, do któ­rej oczy użyt­kow­ni­ków przy­zwy­cza­iły się naj­bar­dziej, po­nie­waż daje ona szyb­ki prze­gląd tre­ści na stro­nie. Je­że­li pasek po­zio­my jest przy­kle­jo­ny lub wy­su­wa się przy scrol­lo­wa­niu, to z każ­de­go miej­sca wi­try­ny można w łatwy spo­sób przejść do wy­ma­ga­nej sek­cji. To dobre roz­wią­za­nie szcze­gól­nie w pro­jek­cie, który nie ma zbyt wielu pod­stron. Za­le­ca się jed­nak, aby zbyt­nio nie kom­pli­ko­wać menu pro­jek­tu­jąc wie­lo­stop­nio­we roz­wi­nię­cia. Cza­sa­mi wy­star­czą dwa-trzy po­zio­my, dzię­ki czemu unik­nie się cha­osu.

Menu bocz­ne – to menu zde­cy­do­wa­nie naj­czę­ściej spo­ty­ka­ne w róż­ne­go ro­dza­ju sys­te­mach, pro­gra­mach i bar­dzo roz­bu­do­wa­nych ser­wi­sach. Powód jest pro­sty: można zmie­ścić tam nieco wię­cej tre­ści niż w pasku po­zio­mym. Tego typu menu może być wy­su­wa­ne lub pod­cze­pio­ne na stałe, może także funk­cjo­no­wać w for­mie uzu­peł­nio­nej o pasek górny lub po­je­dyn­cze ikony. Mi­nu­sy? „Bo­czek” może za­sła­niać nam część tre­ści, jeśli wcze­śniej nie za­dba­my o to, żeby au­to­ma­tycz­nie prze­su­wał resz­tę stro­ny.

Si­de­bar menu (pio­no­wa or­ga­ni­za­cja tek­stu) – ro­dzaj paska bocz­ne­go, naj­czę­ściej przy­bie­ra­ją­cy formę na­pi­sów na kra­wę­dziach stro­ny. W od­róż­nie­niu od ty­po­we­go menu pio­no­we­go, na­pi­sy pro­jek­tu­je się tam rów­nież w pio­nie (przy­kład). Jest to może roz­wią­za­nie nieco mniej przy­ja­zne w użyt­ko­wa­niu, ale wy­ko­rzy­stu­je miej­sce na boku stro­ny, które czę­sto jest puste. Warto jed­nak pa­mię­tać, aby nie upy­chać tam zbyt wielu po­zy­cji.

Menu-pa­gi­na­cja – skro­jo­ne przede wszyst­kim pod pro­ste stro­ny, takie jak pro­duk­to­wy lan­ding page. Menu ma wów­czas formę np. sa­mych wy­punk­to­wań lub cy­fe­rek. 

Ham­bur­ger jest roz­chwy­ty­wa­ny

W dobie stron re­spon­syw­nych zde­cy­do­wa­nie naj­po­pu­lar­niej­sze roz­wią­za­nie. Jeśli po­trze­bu­jesz więc mi­ni­ma­li­stycz­ne­go menu, które po­zwo­li Ci za­cho­wać dużo prze­strze­ni na stro­nie i uczy­ni ser­wis jesz­cze bar­dziej prak­tycz­nym, się­gnij po ham­bur­ge­ra.

Roz­wią­za­nie niby ty­po­we dla wer­sji mo­bil­nych, ale nie tylko. Nie­kie­dy sto­so­wa­ne jest w wer­sji de­sk­to­po­wej jako uzu­peł­nie­nie wi­docz­ne­go paska z głów­ny­mi sek­cja­mi. W ham­bur­ge­rze zo­sta­ją wów­czas za­mknię­te in­for­ma­cje po­bocz­ne. Ham­bur­ger bywa cza­sa­mi nawet je­dy­ną formą menu na stro­nie de­sk­to­po­wej. Jest tak za­zwy­czaj wtedy, kiedy chce­my mieć czy­ste ob­ra­zy lub gdy stro­na jest scrol­lo­wa­na i wszyst­kie tre­ści znaj­dzie­my zwy­czaj­nie prze­wi­ja­jąc wi­try­nę. 

Z dru­giej jed­nak stro­ny, menu „ham­bur­ge­ro­we” na de­sk­to­pie bywa też cza­sa­mi pewną nie­do­god­no­ścią. Za­wsze jest to prze­cież do­dat­ko­we klik­nię­cie dla użyt­kow­ni­ka. Wszyst­ko za­le­ży jed­nak od spe­cy­fi­ki całej stro­ny: dla roz­bu­do­wa­ne­go ser­wi­su może to nie być naj­lep­sze roz­wią­za­nie, ale już dla stro­ny-wi­zy­tów­ki tak.  

Przy ham­bur­ge­rze na pewno można też tro­chę po­sza­leć. Cho­dzi oczy­wi­ście o spo­sób roz­wi­ja­nia menu, który można uatrak­cyj­nić cho­ciaż­by cie­ka­wą ani­ma­cją.  

Hy­bry­da? Czemu nie

Ro­dzaj menu głów­ne­go za­wsze jest oczy­wi­ście uza­leż­nio­ny od spe­cy­fi­ki stro­ny, ale nie­kie­dy do­brym roz­wią­za­niem jest mie­sza­nie ze sobą róż­nych sty­lów.

Wspo­mnie­li­śmy już o po­łą­cze­niu ham­bur­ge­ra z pa­skiem po­zio­mym, ale po­dob­nych przy­kła­dów jest wię­cej. Po­pu­lar­ne jest cho­ciaż­by za­sto­so­wa­nie w tym samym pro­jek­cie za­rów­no menu po­zio­me­go, jak i pio­no­we­go. Wów­czas pierw­sze pełni rolę ta­bli­cy z głów­ny­mi sek­cja­mi, a dru­gie z bar­dziej szcze­gó­ło­wy­mi.   

W nie­któ­rych pro­jek­tach pio­no­we menu bywa rów­nież „przy­kle­jo­ne” do stro­ny i to­wa­rzy­szy użyt­kow­ni­ko­wi pod­czas scrol­lo­wa­nia (tzw. stic­ky menu). To me­cha­nizm warty roz­wa­że­nia, ale tutaj trze­ba mieć świa­do­mość, że w nie­któ­rych przy­pad­kach może on wy­glą­dać nieco ko­micz­nie. Naj­czę­ściej sto­su­je się to bo­wiem w przy­pad­ku dłu­gich, roz­bu­do­wa­nych stron, dzię­ki czemu czy­tel­nik nie musi tra­cić czasu na od­ko­py­wa­nie paska. Jeśli więc wi­try­na jest tak na­praw­dę wi­zy­tów­ką firmy lub pro­duk­tu, daj sobie spo­kój z przy­kle­ja­niem.  

A jak ktoś chce za­sza­leć jesz­cze bar­dziej, kilka nie­ty­po­wych po­my­słów może pod­pa­trzeć na aww­wards.com.

Ułatw kli­ka­nie i nie kom­pli­kuj

Dobry układ menu to jed­nak nie wszyst­ko. Pod­czas pro­jek­to­wa­nia ko­niecz­nie mu­sisz zwró­cić też uwagę na inne ważne kwe­stie.

Przede wszyst­kim za­dbaj o od­po­wied­nio sze­ro­kie pole kli­kal­no­ści każ­de­go ele­men­tu. Daj użyt­kow­ni­kom pe­wien mar­gi­nes, nie wy­ma­gaj od nich pre­cy­zyj­ne­go na­jeż­dża­nia kur­so­rem w każde okien­ko. Ko­lej­na spra­wa to na­zew­nic­two. Tutaj nie ma miej­sca na fa­jer­wer­ki: ma być pro­sto i czy­tel­nie. W menu nie liczą się efek­ty ję­zy­ko­we, ale szyb­kość od­na­le­zie­nia kon­kret­nej in­for­ma­cji.

Ważna jest też ko­lej­ność po­szcze­gól­nych za­kła­dek w menu. Cho­dzi o to, żeby two­rzy­ły one pe­wien sche­mat (pa­mię­tasz hi­sto­rię Kal­ba­cha?). Dla­te­go po­staw się w roli użyt­kow­ni­ka i zadaj sobie py­ta­nie, któ­rych in­for­ma­cji szu­kał­byś w pierw­szej ko­lej­no­ści, a któ­rych do­pie­ro póź­niej.

Na ko­niec jesz­cze jeden istot­ny ele­ment. Niby oczy­wi­sty, ale jak po­ka­zu­ją przy­kła­dy nie­któ­rych stron, nie dla każ­de­go – kli­kal­ne logo. In­ter­nau­ci przy­zwy­cza­ili się już do pew­nych za­cho­wań i jed­nym z nich jest wła­śnie to, że znak marki au­to­ma­tycz­nie od­sy­ła do stro­ny głów­nej. Po pierw­sze, jest to naj­wy­god­niej­sze roz­wią­za­nie, a po dru­gie zy­sku­jesz dzię­ki temu nieco prze­strze­ni, bo nie mu­sisz pla­no­wać pola „Stro­na głów­na”.   

I jak? Wiesz już co bę­dzie dla Cie­bie naj­lep­sze?