Copywriting - teksty
Uczta dla oczu i wyobraźni
Branding - Marka i logo
Światowe symbole perfekcji
Design - Projektowanie i DTP
Jak poprawia się doskonałe?
Wskazówki ekspertów
Blog, biblioteczka, odpowiedzi.
Nasze
usługi:

eMarketing

Agencja Marketingowa

Copywriting

Pisanie treści

Branding

Projektowanie logo

Naming

Tworzenie nazw

Efektywna nawigacja na stronach

Stwórz stronę, po której chętnie się porusza.

Odkryj moc narracji
w drop down menu.

Spis treści:

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?

Krótkie wprowadzenie do tworzenia czytelnej zawartości.

Dobra organizacja daje dobre rezultaty

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.

Fajne menu przyciąga klientów

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 IntelaIBM, jak i w Białym Domu czy u Owocnych.

Drop-down w naszym menu

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

Atrakcyjne ikony na stronie Bonlook

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

Przejrzyste menu Intela

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 w nawigacji

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.

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.

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.

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

Benthebodyguard

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

NickAd

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.

Bankwest

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.

TnTrailSandbyWays

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.

ipolecat
Dobry pomysł na
firmę jest warty
dobrego logo.
Dobry projekt, najlepiej zacząć
od znalezienia dobrych ludzi.
Jesteś w świetnym miescu.
Bardzo łatwo zacząc tutaj.
Zróbmy razem
coś fajnego
X
X

Napisz kilka słów o swoim projekcie
i otrzymaj niezobowiązującą ofertę.

Imię:
Mój email to:
Tel. Opcjonalnie
Napisz kilka słów o swoim projekcie

Napisz kilka słów o swoim projekcie
i otrzymaj niezobowiązującą ofertę.

Imię:
Mój email to:
Tel. Opcjonalnie
Napisz kilka słów o swoim projekcie