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:

Projektowanie stron

Web design

Marketing internetowy

Agencja marketingowa

Projektowanie logo

Branding

Tworzenie nazw

Naming

Przekonujące treści

Copywriting

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