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

Stwórz nawi­ga­cję na stro­nie, która mówi sama za siebie.

Zadaniem menu nawi­ga­cyj­nego strony, jest pro­wa­dze­nie odwie­dza­ją­cych przez rożne czę­ści strony w taki spo­sób, aby nie potrze­bo­wali oni dodat­ko­wej pomocy.

Projektanci czę­sto pró­bują dość jasno wytłu­ma­czyć jakie opcje są dostępne i czego odwie­dza­jący powi­nien się spo­dzie­wać po poszcze­gól­nych sek­cjach strony, jeśli klik­nie na odpo­wied­nie odno­śniki. Wydaje się pro­ste, jed­nak w prak­tyce wcale takie nie jest. Jak więc zapro­jek­to­wać efek­tywną i czy­telną nawi­ga­cję na stronach?

Krótkie wpro­wa­dze­nie do two­rze­nia czy­tel­nej zawartości.

Aby uła­twić zro­zu­mie­nie nowej zawar­to­ści, nawi­ga­cja jest podzie­lona na bloki. W jed­nych pro­jek­tach dają one lep­sze rezul­taty w innych osła­biają nawi­go­wa­nie. Najlepsze rezul­taty uzy­skują Ci pro­jek­tanci, któ­rzy odro­bili zada­nie domowe i opra­co­wali wcze­śniej sche­mat archi­tek­tury informacyjnej.

Jednak w prak­tyce, zawsze będziemy 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 sieci 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 projektowania.

Poznaj nawi­ga­cję 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 kryje się w pod­ka­te­go­riach. Tak w jed­nym zda­niu można by opi­sać naj­po­pu­lar­niej­szą formę nawi­ga­cji na świe­cie “Drop-Down”. Która spraw­dza się dosko­nale, zarówno na stro­nach Intela, IBM, jak i w Białym Domu czy u Owocnych.

Chodź wielu 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­jane menu jest złą prak­tyką, ponie­waż bywa nie­zro­zu­miałe i dys­funk­cyjne, to trudno o lep­szą ideę, która pomo­gła by upo­rząd­ko­wać ogromne zasoby informacji.

Jak zapro­jek­to­wać nawi­ga­cję drop-down, na stronie?

Jeśli dobrze to zor­ga­ni­zu­jemy, roz­wi­jane 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 atrak­cyjne ikony

Aby nawi­ga­cję uczy­nić bar­dziej efek­tywną, pro­jek­tanci korzy­stają z atrak­cyj­nych ikon. W takich przy­pad­kach warto upew­nić się, że ikona jest łatwo roz­po­zna­walna, jasno prze­ka­zuje wia­do­mość, odsyła do wła­ści­wego linku i ma odpo­wiedni roz­miar. Złe, prze­sy­cone tre­ścią ikony, obni­żają kli­kal­ność. Za przy­kład niech służy nowy, uprosz­czony czyli ulep­szony zestaw ikon Google.

B, jak bar­dzo uproszczone

Intel, umie­ścił w nowym menu ponad 150 pozy­cji i zamknął wszystko w jed­nym guziku. Aby nawi­ga­cję wśród tysięcy mate­ria­łów uczy­nić bar­dziej efek­tywną, pro­jek­tanci z Intela posta­wili na pierw­szo­pla­nową wyszu­ki­warkę rodem z Google. Oto przy­kład uprosz­cze­nia, które zasłu­guje na medal. Prościej się po pro­stu nie da.

C, jak cie­kawa historia

Storytelling, czyli nar­ra­cja już na pozio­mie nawi­ga­cji w menu. To jedno z naj­bar­dziej atrak­cyj­nych roz­wią­zań, które warto wziąć pod uwagę. Już samo menu zaczyna “sprze­da­wać” pod­sta­wowe 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ę tylko z samym menu, to i tak będzie wie­dział sporo o całej fir­mie i jej produktach.

3 zasady, o któ­rych warto pamię­tać pod­czas projektowania.

1. Unikaj roz­wi­ja­nia w wię­cej niż dwóch poziomach.

   Jest to chyba naj­gor­sza krzywda, jaką możesz zro­bić roz­wi­ja­nemu menu. Nawet jeśli masz wiele infor­ma­cji do prze­ka­za­nia, nie musisz poka­zać wszyst­kiego w menu. Rozwijanie wie­lo­po­zio­mowe, nigdy się nie sprawdza.

2. Opóźnij wyłą­cza­nie się hovera.

   Często gdy użyt­kow­nik prze­su­nie wskaź­nik myszy lekko poza roz­wi­nięte menu, całość znika natych­miast. Opóźnij tro­chę ten efekt. Dzięki czemu użyt­kow­nicy nie będą sfru­stro­wani wyłą­cza­ją­cym się menu, gdy zda­rzy im się “wyje­chać” kur­so­rem poza ramy. Wystarczą dwie sekundy opóź­nie­nia, w wyłą­cza­niu, aby zli­kwi­do­wać ten przy­kry efekt.

3. Dodaj hover do menu opcji,
   zop­ty­ma­li­zuj szyb­kość i usuń podpowiedzi.

   Włączenie hovera powo­duje, że użyt­kow­nik będzie wie­dział dokład­nie, który przy­cisk nawi­ga­cyjny w menu ma zazna­czony, co z pew­no­ścią mu pomoże. Rozwijanie się menu ma być miłe dla oka, ale przede wszyst­kim powinno być bły­ska­wiczne. Pamiętaj, aby ewen­tu­alne pod­po­wie­dzi do odno­śni­ków, umiesz­czo­nych w roz­wi­nię­tym panelu nie prze­sła­niały pozo­sta­łych odnośników.

5 nawi­ga­cji, które wykra­czają poza wszel­kie standardy.

Benthebodyguard.com - To już nie nawi­ga­cja, a praw­dziwy spa­cer po mie­ście.
Jeśli jesz­cze nie pozna­łeś naj­słyn­niej­szego ochro­nia­rza w Sieci, warto to nadrobić.

NickAd.com - Nawigacja jest total­nie nie­zręczna, 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­wija się w mniej lub bar­dziej kre­atyw­ny­ych for­mach, od lewej do prawej.

TnTrailSandbyWays.com - Tennessee z nawi­ga­cją, któ­rej nie wsty­dził by się NYC.
W sumie cała ta strona sta­nowi jedną wielką nawi­ga­cję. Warto zaj­rzeć też do dropów.

ipolecat.com - Doskonała strona 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

• 
  Elegancko zdyscyplinowane projekty. Efekt minimalizmu w projektowaniu stron.
  Uprościć swoje projekty. W tym przypadku mniej oznacza zdecydowanie więcej.
• 
  Kobieca ręka w projektowaniu stron www. 10 projektantek, które musisz poznać.
  Zobacz jak dobrze radzi sobie płeć piękna w zawodzie zdominowanym przez mężczyzn.

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ź.

Powiadom o odpowiedzi

• 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.