Võitva navigatsioonimenüü ideede ja inspiratsioonide kujundamine

Veebisaidi navigeerimismenüü on nagu tänava või kaubanduskeskuse taseme kataloogi liiklusmärk. Sa ei saa oma sihtkohta jõuda ilma, et oleksite teadnud, kus sa oled. Nagu reaalses elus, on veebidisaini navigeerimine väga oluline ja mängib olulist rolli nii veebisaidi kasutatavuses kui ka kasutajate kogemustes.

Tänapäeval näete palju erinevaid navigatsioonimenüüid huvitavate, loominguliste ja ebatavaliste kujundustega. Aga kuidas oleks tulemuslik navigatsioon veebilehel, mis see välja näeb? kuidas see välja näeb?

Täna tahaksin jagada oma tähelepanekuid ja teadmisi navigeerimise tähtsusest veebidisainis. Ma avaldan mõned lihtsad nõuanded, mida saate oma veebisaidi navigeerimise ja kasutatavuse parandamiseks kasutada. Samuti on mõningaid näiteid tõhusatest navigeerimismenüüdest, et anda teile mõni järgmine plaan.

Teabearhitektuur

Navigeerimisplaneerimine peaks algama teabearhitektuuriga. Oluline on istuda ja ajurünnak veebisaidi teabearhitektuuri kohta. Te peate välja selgitama, milliseid funktsioone veebisait pakub, mis on kõige olulisem ja mida saaks hierarhia alammääradesse paigutada.

Teabearhitektuur sisaldab funktsioonid, kasutajate vajadused, saidikaart, testimine ja traadiraamid. Informatsiooniarhitektuuri kohta saate lugeda Cameron Chapmani artiklist Information Architecture 101: tehnikad ja parimad tavad.

Kasutades kasutajate võimaldatud tehnoloogiaid

Vältige Flashi, JavaScripti, jQuery'i või midagi muud, mis ohustab navigeerimisriba ehitamisel juurdepääsu teie veebisaidi navigeerimisele, või vähemalt veenduge, et nad suudavad halastamatult halveneda.

Rohkem viiteid javascripti graatsiline lagunemine, vaadake seda postitust 10 kasuliku tagastamismeetodiga CSS ja Javascript jaoks.

Kasutage lihtsaid, kasutajasõbralikke termineid

Parem on kasutada lihtsad, ilmsed ja mõisted, mida on kerge selgitada kui navigeerimismenüüs ainult tööstuse tingimustel. Iga link, mis võtab kasutajaid rohkem kui sekundit või kaks välja selgitama, on ilmselt kasutamiskõlbmatu.

Kui kasutajal on vaja klõpsata lingile, et selgitada välja, mida link toob kaasa, aitab see kaasa teie külastajate halbale kogemusele.

Näited

Larissa Nessi veebisaidi navigatsioonimenüüs kasutatavad mõisted on kergesti mõistetavad ja piisavad. Kasutajad ei leia seda segadusse, sest neil on juba sellised menüüd.

Siin on veel üks hea näide puhtast ja selgest veebisaidi navigatsioonimenüüst, kus kasutatakse tavalisi termineid aadressil csupport.

Loovagentuur Eighty8Four kasutab mõistet "müügisalong", mis võib külastajatele segadust tekitada. See mõiste võib tähendada portfelli või tööd, kuid ei ole selge ja külastajad ei saa muud valikut kui klõpsata, et seda kontrollida.

Standardige navigeerimiskava

Kasutage sama navigatsioonimudelit kõigis oma lehtedes. See on väga oluline, sest ilma järjepideva disainita võib kasutaja tegelikult arvata, et ta on teises veebisaidis. Veenduge, et kasutate sama navigeerimismudelit, et kasutajad saaksid oma veebisaidi hõlpsalt ilma kaduma minna.

Bluegg, Allpool näidatud lihtsas ja puhtas navigeerimisdisainis jääb see kõikidele alamlehekülgedele samaks. Ainus erinevus on värviindikaator, mis näitab lehekülge, mille külastaja on hetkel.

Märkige, kus sa oled

On oluline, et kasutaja teaks, kus ta on alati. Seda saate teha lingi tausta muutmine, lehekülje nime värv või keerake teksti paksus kirjas navigeerimismenüüs, et muuta see teistest erinevaks.

Austin Eastciders kasutab erinevat värvi ja tausta, et näidata lehekülge, kus kasutaja on sisse lülitatud. See näitaja võib toimida ka peene disaini muutusena, näiteks kasutades a erineva navigatsioonitaustaga mis tekitab tunde, et teised menüüelemendid on põhjalikud.

Meediakirurgia kasutab avatud alamlehe indikaatorina tumedamat värvi. Lihtne, kuid tõhus.

Kasutage veebikonventsioone

See kõik on lihtsalt kasutatav ja intuitiivne veebisaidi navigeerimine. Veebikonverentsid muudavad disainerite jaoks palju lihtsamaks oma disainilahenduste ümber töötamiseks. Enamik kasutajaid klõpsaks kodulehekülje logole, et pöörduda tagasi kodulehele, nii et kujundage oma logo nii, et seda teha.

Kui te seda ei tee, teete neid veetma aega, et midagi uut õppida või mõnel juhul ebamugavusi, kuna nad ei paku üldtunnustatud navigatsioonistandardeid.

Veebikonverentside kohta saate lisateavet siit:

10 Veebidisaini konventsioonid
Ärge taaselustage veebidisaini ratast
Disain veebikonventsioonidega

Süsti disain paigutab logo ülemisse vasakusse nurka, mis sobib täna üheks kõige kasutatavamaks veebikonventsiooniks.

Adams Creation kasutab ühte kõige levinumat veebikonverentsi - logo paigutatakse veebisaidi vasakusse ülanurka ja linke kodulehele.

Testige seda: kaasake kolmas osapool

Kontrollige alati oma navigeerimismudelit iga isikuga, kes on varem Internetti kasutanud. Te võiksite tuua inimesi, kes ei olnud seotud projekteerimise protsessiga, et seda testida. Jälgige nende eelistusi navigeerimisel läbi oma saidi ja analüüsige aega, mis kulus nende leidmiseks vajalike lehtede leidmiseks.

Parema täpsuse saavutamiseks, kaasata rohkem inimesi, koguda andmeid, analüüsida ja kokku võtta paremaks sobivuseks. Tehke katsejärgne uuring, kui see on vajalik. Te võite saada mõningaid ootamatuid ideid ja sisendeid, mis muidu jääksid ilma testita.

Pakkuda konteksti

Oma sisu ja navigatsiooniga vastavusse viimiseks pakub veebisaitide kasutajatele kontekst, mis võimaldab neil kiiresti leida vajalikke asju. Saate paigutada väikesed ikoonid, mis on seotud teie linkitud sisu või lühikeste kirjeldustega, et anda ülevaade sellest, mida lehekülg on.

Minu enda jalgratas kasutab lihtsaid ikoone, et anda kasutajatele rohkem teavet selle kohta, mida nad võivad leida teatud alamlehest.

Sarah Parmenter kasutab põhilistel navigatsioonidel lühikesi ja kena pealkirju, et anda teavet alamlehekülgede kohta, millega põhiline navigatsioon on seotud.

SEO eesmärgid

Google meeldib järjepidev navigatsioon. Hea on järjepidev navigeerimine mitte ainult kasutajate jaoks, et mõista ja saada idee, kuidas oma veebisaiti navigeerida, vaid ka otsingumootorite jaoks, et oma veebisaidi indekseerida.

Otsingumootori robotid indekseerivad teie veebisaiti, et indekseerida oma veebisaiti ja panna lingid otsingumootori tulemuste lehele. Kui soovid olla nähtav, pöörake tähelepanu heale navigatsioonikavandile ja lisage liiklust.

Tasuta navigatsiooniskriptid (CSS ja jQuery)

Siin on lühike nimekiri viimastest navigeerimismenüüdest, mis teie projektidele kasulikuks osutuvad. Need skriptid muudavad teie toote kasutajate kogemused veelgi paremaks, lisades mõningaid kena funktsioone ja kasutades seda rõõmuga.

XML-põhine vertikaalsete uudiste kerimise skript HTML ja jQuery abil: vScroller

Filtrifitseerige

Lehe kerimine

Ajaskaala portfell

HorisontaalneNav

CSS3 minimaalne navigatsioonimenüü

Circle Navigation Effect koos CSS3-ga

Võrgu navigeerimisefektid koos jQueryga

Assensor

Loo elegantne CSS3 navigatsioonimenüü

Ilusat horisontaalset navigatsiooni

Ja viimane, kuid mitte vähem oluline, mõned inspireerivad horisontaalsed navigatsioonimenüüd. Kontrollige neid suurepäraseid veebisaite ja nende navigatsioonimenüü lahendusi, et leida oma projektidele uusi ideid.

Ch3mical