Efektywna i czytelna nawigacja na stronach. Narracyjny drop down, a może coś innego?

Stwórz nawigację na stronie, która mówi sama za siebie.

Zadaniem menu nawi­ga­cyj­ne­go stro­ny, 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 oni dodat­ko­wej pomo­cy.

Projektanci czę­sto pró­bu­ją dość jasno wytłu­ma­czyć jakie opcje są dostęp­ne i cze­go odwie­dza­ją­cy powi­nien się spo­dzie­wać po poszcze­gól­nych sek­cjach stro­ny, jeśli klik­nie na odpo­wied­nie odno­śni­ki. Wydaje się pro­ste, jed­nak w prak­ty­ce wca­le takie nie jest. Jak więc zapro­jek­to­wać efek­tyw­ną i czy­tel­ną nawi­ga­cję na stro­nach?

Krótkie wprowadzenie do tworzenia czytelnej zawartości.

Aby uła­twić zro­zu­mie­nie nowej zawar­to­ści, nawi­ga­cja jest podzie­lo­na na blo­ki. W jed­nych pro­jek­tach dają one lep­sze rezul­ta­ty w innych osła­bia­ją nawi­go­wa­nie. Najlepsze rezul­ta­ty uzy­sku­ją Ci pro­jek­tan­ci, któ­rzy odro­bi­li zada­nie domo­we i opra­co­wa­li wcze­śniej sche­mat archi­tek­tu­ry infor­ma­cyj­nej.

Jednak w prak­ty­ce, zawsze będzie­my wie­dzieć tyle ile prze­te­sto­wa­li­śmy. I nie ma tu wyjąt­ków od regu­ły. To co spraw­dzi­ło się w skle­pie sie­ci Amazon, nie przy­nio­sł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.

Poznaj nawigację drop-down. Najsłynniejszą na świecie.

Idea, 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 jed­nym zda­niu moż­na by opi­sać naj­po­pu­lar­niej­szą for­mę nawi­ga­cji na świe­cie “Drop-Down”. Która spraw­dza się dosko­na­le, zarów­no na stro­nach Intela, IBM, jak i w Białym Domu czy u Owocnych.

Chodź wie­lu twór­ców stron WWW, a zwłasz­cza miło­śni­ków uży­tecz­no­ści uwa­ża, że roz­wi­ja­ne menu jest złą prak­ty­ką, ponie­waż bywa nie­zro­zu­mia­łe i dys­funk­cyj­ne, to trud­no o lep­szą ideę, któ­ra pomo­gła by upo­rząd­ko­wać ogrom­ne zaso­by infor­ma­cji.

Jak zaprojektować nawigację drop-down, na stronie?

Jeśli dobrze to zor­ga­ni­zu­je­my, roz­wi­ja­ne menu może stać się naj­lep­szym z moż­li­wych narzę­dziem do nawi­ga­cji. Pełnym fascy­nu­ją­cych histo­rii i atrak­cyj­nych smacz­ków. Dowiedz się o czym nale­ży pamię­tać pro­jek­tu­jąc dobre menu drop down.

A, jak atrakcyjne ikony

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ść. Za przy­kład niech słu­ży nowy, uprosz­czo­ny czy­li ulep­szo­ny zestaw ikon Google.

B, jak bardzo uproszczone

Intel, umie­ścił w nowym menu ponad 150 pozy­cji i zamknął wszyst­ko w jed­nym guzi­ku. Aby nawi­ga­cję wśród tysię­cy mate­ria­łów uczy­nić bar­dziej efek­tyw­ną, pro­jek­tan­ci z Intela posta­wi­li na pierw­szo­pla­no­wą wyszu­ki­war­kę rodem z Google. Oto przy­kład uprosz­cze­nia, któ­re zasłu­gu­je na medal. Prościej się po pro­stu nie da.

C, jak ciekawa historia

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ę. Już samo menu zaczy­na “sprze­da­wać” pod­sta­wo­we infor­ma­cje o pro­duk­cie i reko­men­da­cje wia­ry­god­nych part­ne­rów. Nawet jeśli użyt­kow­nik zapo­zna się tyl­ko z samym menu, to i tak będzie wie­dział spo­ro o całej fir­mie i jej pro­duk­tach.

3 zasady, o których warto pamiętać podczas projektowania.

1. Unikaj rozwijania w więcej niż dwóch poziomach.

   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.

2. Opóźnij wyłączanie się hovera.

   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 cze­mu użyt­kow­ni­cy 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.

3. Dodaj hover do menu opcji,
   zoptymalizuj szybkość i usuń podpowiedzi.

   Włączenie hove­ra 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­śni­ków.

5 nawigacji, które wykraczają poza wszelkie standardy.

Benthebodyguard.com - To już nie nawi­ga­cja, a praw­dzi­wy spa­cer po mie­ście.
Jeśli jesz­cze nie pozna­łeś naj­słyn­niej­sze­go ochro­nia­rza w Sieci, war­to to nad­ro­bić.

NickAd.com - Nawigacja jest total­nie nie­zręcz­na, ale robi total­nie dobre wra­że­nie.
Otwiera się w miej­scu w któ­rym klik­niesz muszą, wyda­jąc soczy­sty dzwięk. Mniam...

Bankwest.com.au - Ciekawe roz­wią­za­nie jak na Bank.
Całość roz­wi­ja się w mniej lub bar­dziej kre­atyw­ny­ych for­mach, od lewej do pra­wej.

TnTrailSandbyWays.com - Tennessee z nawi­ga­cją, któ­rej nie wsty­dził by się NYC.
W sumie cała ta stro­na sta­no­wi jed­ną wiel­ką nawi­ga­cję. Warto zaj­rzeć też do dro­pów.

ipolecat.com - Doskonała stro­na naszych przy­ja­ciów z Ukrainy.
Doskonały pomysł i jesz­cze lep­sza reali­za­cja. Zapraszamy.

Będzie mi miło, otrzymać Twoje wsparcie.
Dzięki
▼

Autor: Wioleta Saliniewicz

Świeżo upieczona pani magister z piątką od samego prof. Miodka. Pomimo sukcesu, dalej rozwija kompetencje, kończąc logopedię. Recenzuje książki dla Empiku pod nadzorem Kazimiery Szczuki. Owocnych już dawno wspiera słownymi majstersztykami, a to przecież dopiero początek jej kariery.

Jeśli podobał Ci się ten artykuł, zapisz się na następne. (Za darmo!)
Pobieraj darmowe porady o skutercznym marketingu na eMail.

Adres eMail...

Ps: Jak masz na imię?

Imię...

Dziękujemy!

Twój adres został dodany do naszej bazy!

Podobne tematy

• 
  Budowa wiarygodności e-biznesu, czyli jak zdobyć zaufanie klientów w internecie?
  Ludzie nie chcą robić interesów z firmami, które wydają się być wirtualne.
• 
  Przykłady projektów stron edukacyjnych. Czyli witryny dobrze i źle wyszkolone.
  Poznaj świetne przykłady stron politechnik, akademii i uniwersytetów. Również Polskich.

Owocna dyskusja

Bądź pierwszym, który rozwinie ten temat.

Kliknij tutaj, aby anulować odpowiadanie.

Nazywam się... Mój adres e-mail to... Moja strona www to...

Chcę powiedzieć, że...

Tak, poinformuj mnie mailem, gdy pojawi się odpowiedź.

• ZGŁOŚ UWAGĘ
  UDZIEL WSPARCIA
  
  Kliknij tutaj!

Wskazówki do komentarzy:
Zawsze cieszą nas komentarze i przykłady, które odnoszą się ściśle do komentowanych treści, bądź też zawierają dodatkowe, wzbogacające pierwotny materiał informacje. Staramy się blokować wpisy zawierające obelżywy język lub mające charakter spamu, oraz na bieżąco moderować poziom dyskusji, aby odpowiadał on standardom, które wyznaczamy.

Pomocne sugestie:
1. Pozostawmy to miejsce wolne od reklam.
2. Dyskutujemy o ideach, bez zarzutów osobistych.
3. Nie publikujemy multimediów.