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
    Na górę
    Tworzymy świetne
    strony internetowe uwielbiane przez ludzi i Google
    Wyceń za darmo
    Kompletowanie zestawu
    Im bli­żej jeste­śmy skom­ple­to­wa­nia całej kolek­cji, tym bar­dziej chce­my mieć wszyst­kie jej ele­men­ty.
    Ta zasa­da ma zasto­so­wa­nie tak­że w przy­pad­ku nie­do­koń­czo­nych puz­zli i obraz­ków – chce­my zoba­czyć cały, ukoń­czo­ny obra­zek.

    Poszukaj logicz­nych zesta­wów (jak rodza­je infor­ma­cji), któ­re mogą suge­ro­wać kom­ple­to­wa­nie kolek­cji. Co ludzie mogą zbie­rać w Twoim sys­te­mie? Jak moż­na pogru­po­wać te ele­men­ty w odręb­ne zesta­wy by stwo­rzyć łatwiej­sze do osią­gnię­cia cele (i moty­wa­cję do dal­sze­go zbie­ra­nia więk­szej kolek­cji)?

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

    Guru reklamy i sprzedaży.
    Twórca międzynarodowej
    potęgi Leo Burnett, Inc.
    Otrzymaj ofertę