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.

Co znajdziesz w artykule

    Dobra nawi­ga­cja to fun­da­ment każ­dej, uwiel­bia­nej stro­ny inter­ne­to­wej. Decyduje nie tyl­ko o tym, czy sta­ran­nie przy­go­to­wa­ne infor­ma­cje zosta­ną odna­le­zio­ne, ale tak­że wpły­wa na war­tość współ­czyn­ni­ka odrzu­ceń (boun­cing rate) oraz czas jaki użyt­kow­ni­cy spę­dza­ją na stro­nie. W więk­szo­ści przy­pad­ków, spraw­dza­ją się pro­ste, intu­icyj­ne i kon­wen­cjo­nal­ne roz­wią­za­nia. W tym arty­ku­le pod­po­wia­da­my któ­re roz­wią­za­nia spraw­dza­ją się dobrze i pre­zen­tu­je­my kil­ka wyjąt­ko­wych przy­kła­dów, któ­re ocza­ro­wa­ły świat.

    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?

    Czy wiesz, że…
    Źle zapla­no­wa­nej archi­tek­tu­ry infor­ma­cji nie ura­tu­je ani intu­icyj­na obsłu­ga ani świet­ny wygląd.

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

    super-nawigacja-1

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

    menu-nick-ad

    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.

    drop-down-3

    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.

    super-menu-4

    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.

    menu-5

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

    avatar
    Autor:

    Ś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.
    Podobne tematy

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

    • 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.
    Na górę
    Tworzymy świetne
    strony internetowe uwielbiane przez ludzi i Google
    Wyceń za darmo
    Są z nami, już 6 238 osoby
    Dołącz do nas na Google+
    Śledź nas na Facebook
    Zapisz się na newsletter
    Piękny umysł
    Fakt: 45
    Osiągnięcia
    Jesteśmy bar­dziej skłon­ni anga­żo­wać się w dzia­ła­nia, w któ­rych osią­gnię­cia są doce­nia­ne i nagra­dza­ne.
    Osiągnięcie cze­goś zna­czą­ce­go na polu jest satys­fak­cjo­nu­ją­ce, jed­nak gdy jest w jakiś spo­sób doce­nio­ne, cie­szy jesz­cze bar­dziej.

    W śro­do­wi­sku gier kom­pu­te­ro­wych osią­gnię­cia są pre­zen­to­wa­ne za pomo­cą punk­tów, odznak, pozio­mów i inne­go rodza­ju uzna­nia. W innych sytu­acjach, osią­gnię­cia są sygna­li­zo­wa­ne poprzez awan­se, człon­kow­stwo, przy­wi­le­je i doro­bek. Jakie wyzwa­nia – powią­za­ne z pożą­da­ny­mi zacho­wa­nia­mi – mają miej­sce w Twoim przy­pad­ku i jakie są zwią­za­ne z nimi osią­gnię­cia?

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

    David Ogilvy
    Prawdziwy geniusz w dziedzinie
    marketingu. Właściciel
    Ogilvy&Mather.
    Otrzymaj ofertę