show menu
+ Menu

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

Odkryj moc narracji w 'drop down menu' i stwórz stronę, po której chętnie się porusza.

    • Nawigacja-stron-internetowych
Co znajdziesz w artykule

    Dobra nawi­ga­cja to fun­da­ment każ­dej, uwiel­bia­nej strony inter­ne­to­wej. Decyduje nie tylko o tym, czy sta­ran­nie przy­go­to­wane infor­ma­cje zostaną odna­le­zione, ale także wpływa na war­tość współ­czyn­nika odrzu­ceń (boun­cing rate) oraz czas jaki użyt­kow­nicy spę­dzają na stro­nie. W więk­szo­ści przy­pad­ków, spraw­dzają się pro­ste, intu­icyjne i kon­wen­cjo­nalne roz­wią­za­nia. W tym arty­kule pod­po­wia­damy które roz­wią­za­nia spraw­dzają się dobrze i pre­zen­tu­jemy kilka wyjąt­ko­wych przy­kła­dów, które ocza­ro­wały świat.

    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?

    Czy wiesz, że…
    Źle zapla­no­wa­nej archi­tek­tury infor­ma­cji nie ura­tuje ani intu­icyjna obsługa ani świetny wygląd.

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

    super-nawigacja-1

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

    menu-nick-ad

    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.

    drop-down-3

    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.

    super-menu-4

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

    menu-5
    Na górę
    Tworzymy świetne
    strony internetowe uwielbiane przez ludzi i Google
    Wyceń za darmo
    Sekwencje
    Chętniej podej­mu­jemy dzia­ła­nia, gdy skom­pli­ko­wane czyn­no­ści roz­bite są na mniej­sze zadania.
    Trudno jest ukoń­czyć skom­pli­ko­wane zada­nie, jak na przy­kład „załóż konto ban­kowe”, „uzu­peł­nij swój pro­fil”.

    Zamiast tego, roz­bij skom­pli­ko­wane zada­nia na małe, łatwe do ukoń­cze­nia czyn­no­ści. Może to być sekwen­cja kro­ków albo po pro­stu lista rze­czy, które musza być wyko­nane, by posu­nąć się naprzód w systemie.

    Mądrego miło posłuchać

    Szanowny ekspercie.
    Podziel się wiedzą i odbierz zapłatę.

    Sprawdź to - kliknij tutaj.

    Lubisz nasze treści i to co robimy?
    Możesz publikować je u siebie, sprawdź
    także jak jeszcze możesz nas wesprzeć.

    Ojciec Apple inc. Ikona
    rewolucji w marketingu,
    biznesie i designie.
    x
    Będziemy Ci bardzo wdzięczni za
    sugestie lub informację o napotkanym
    błędzie. Każdego dnia wkładamy wiele
    pracy, aby te strony były lepsze.

    Pozwól nam Tobie podziękować:
    no-spam