Pole saladus, et ettevõtte igal veebisaidil on neli peamist eesmärki: brändi lojaalsuse edendamine, liikluse suurendamine, põrkemäärade vähendamine ja müügivihjete või müügi konversioonimäärade suurendamine! Siin sõltub palju sellest, kui mugavalt tunnevad end teie saidile tulnud kasutajad.

Seetõttu räägime oma tänases artiklis sellest, mis on saidi navigeerimine, tänu millele luuakse "hubane õhkkond". Või õigemini selle arendamise ajal tehtud levinumate vigade kohta.

Viga nr 1: kohandatud stiil

Juhtus nii, et kasutajad on harjunud nägema saidi navigeerimist lehe üla- või vasakpoolses osas, nii et ärge sundige neid selle otsimisel saidil ringi tiirutama, sest neile ei pruugi need peitusemängud meeldida. mõjutavad negatiivselt konversioonimäärasid ja suurendavad põrkemäära.

Jah, lehtede / saitide arendamisel soovitatakse alati loomingulist lähenemist, kuid saitidel navigeerimine ei ole ilmselgelt see juhtum, kus peaksite oma kujutlusvõimele vabad käed andma. Selliste katsetega häirite kasutajate tähelepanu, kes on sunnitud uurima uut navigeerimisstiili, mitte ressursi põhisisu.

Viga nr 2: üldised menüüelementide sildid

Veel üks kuldne reegel veebisaidi navigeerimiseks on see, et navigeerimismenüü sildid peaksid olema informatiivsed. Nii näiteks on menüüelementide „Tooted“ või „Teenused“ kasutamine tavaline kõigile ettevõtetele ja sellised nimed ei tähenda kasutajatele suurt midagi. Siin on veel üks näide: "Mida me teeme" - sama näota fraas.

Kuidas sel juhul saidi navigeerimist parandada? Proovige navigeerimismenüüst leida iga ikooni jaoks kõige täpsemad sildid ja näete, kuidas need kasutajaid kõnetavad. Saidi külastajad tulid teie juurde oma küsimustele vastust otsides, seega ärge jätke neid stereotüüpsete fraaside ja sõnadega kõrvale.

Nõus, et teie kliendid ei otsi abstraktseid tooteid või teenuseid ning selliste ikoonidega navigeerimine ei mõjuta teie saidi reklaamimist otsingutulemustes. Kas tundsite ennast ära? Seega on aeg end parandada! Saidi menüü ja selle struktuur tervikuna tuleks optimeerida otsingumootorite jaoks ja rääkida sihtrühmale arusaadavas keeles. Pärast meie artikli lõpuni lugemist näete, kui paljud ettevõtted selle probleemi lahendavad.

Viga nr 3: rippmenüü

Rippmenüü on navigatsioonielemendina muutunud äärmiselt populaarseks, kuid sellel on kaks head põhjust, miks seda tuleks kasutada ülima ettevaatlikkusega.

Paljud teist on ilmselt pidanud rippmenüüd sõna otseses mõttes tabama. Üks ebamugav liigutus - ja see jookseb teie eest ära! Ja nüüd, kui olete oma jõu kogunud, otsite uuesti, klõpsate ja seal - üllatus! - teine ​​tegevusvõimaluste loend. Sellised järelejõudmised on kohutavalt tüütud! Mõelge, äkki ei peaks te oma potentsiaalseid kliente veel kord vehkima?

Teine põhjus rippmenüüst keeldumiseks: vähene liiklus saidi järgmistele lehtedele või vaate sügavus. Kui teil on probleeme tipptasemel lehtede vähese liiklusega, on võimalik, et põhjus peitub rippmenüü kasutamises. Kuid reeglitest on alati erandeid. Sel juhul kehtivad erandid suurte ja paljude sektsioonidega saitide puhul, kuna siin on sellise menüü kasutamisel saidi kasutatavus oluliselt paranenud.

Viga nr 4: suur hulk menüüelemente

Nii oli see ka varem, kuid te ei tohiks täna sellest traditsioonist ilma kiire vajaduseta kinni pidada, sest mõnikord on isegi 8 punkti liiga palju. Püüdke piirduda nende arvuga vähem, kuid mitte üle 5: mida vähem sekundaarseid punkte, seda harvemini kasutajad nende otsa komistavad ja seda valjemini räägivad kõige olulisemad.

See reegel töötab ka kogu saidi sisu puhul, mitte ainult navigeerimise korral. Iga eemaldatud element muudab ülejäänud elemendid paremini nähtavaks. SEO jaoks on oluline ka lühike navigeerimine. Kuna enamasti järgivad kasutajad linki kodulehele, mitte saidi siselehtedele, on see otsingumootorite jaoks "autoriteetne". Kui teie navigeerimine on linkidega üle koormatud, muutub saidi avaleht sisemistega võrreldes vähem autoriteetseks.

Viga nr 5: tellimiseks sobimatu menüüelemendi paigutus

Psühholoogilised uuringud on näidanud, et iga loendi esimest ja viimast elementi on lihtsam meelde jätta kui keskmist. Sarnane toiming toimub ka kasutajatega. Seda nähtust nimetatakse "jadapositsiooni kõveraks" ja see on graafiliselt väljendatud graafiku kujul:

Tähelepanu kontsentratsioon on nimekirja alguses (ülimuslikkuse efekt) ja lõpus (uudsuse mõju) palju suurem. Sellepärast on õige paigutada kõige olulisemad punktid navigeerimise algusesse, teisejärgulised - keskele. Menüüelement „Kontakt” tuleks paigutada TOP -navigeerimise lõppu paremasse nurka.

Boonuse näpunäide: lingid igavesti, nupud mitte kunagi!

Kui olete veebidisaini suundumustest 8 aastat maas ja kasutate tekstilinkide asemel siiski graafilisi navigeerimisnuppe, siis siin on viis põhjust, miks peaksite oma harjumused uuesti läbi vaatama.

• Nuppude tekst pole otsingumootoritele nähtav.
• Nuppude värskendamine on keerulisem kui tekstilingid.
• Nupud laadivad aeglasemalt, mistõttu on need mobiilirakenduste jaoks vastuvõetamatud.
• Kõne- ja tekstibrauserid ei saa nuppe lugeda.
• Nupud pole vajalikud isegi siis, kui soovite kasutada mittestandardseid fonte, näiteks selliste tööriistadega nagu TypeKit.

Ja nüüd, nagu lubasime: 5 näidet saidi navigeerimisest ilma vigadeta.

Navigeerimine on mis tahes veebisaidi kõige olulisem aspekt. See, kas kasutaja leiab enda jaoks asjakohast teavet ja kas ta soovib tagasi pöörduda, sõltub teie veebis navigeerimise tõhususest.

Navigeerimist ei reguleeri miski: selle saab muuta läbipaistvaks ja intuitiivseks või mitmetasandiliseks ja mittestandardseks.

Kuidas muuta veebisaidi navigeerimine võimalikult tõhusaks ja milline disain sobib teile?

Veebiarendusettevõtteskõikidele teie küsimustele on vastused.

Aga kõigepealt asjad.

MIS ON NAVIGATSIOON?

Saidi navigeerimine või veebis navigeerimineKas tarkvara ja visuaalsete tööriistade süsteem, mis aitab kasutajal saidil navigeerida ja vajalikku teavet leida.

PLANEERIMISNAVIGATSIOON

Kõige tõhusam veebis navigeerimine põhineb kolmel sambal:

• Struktuur
• Lühidus
• Disain

• Struktuur:navigeerimine algab üksikasjaliku uuringuga infoarhitektuur (IA), mis võimaldab teil luua saidile optimaalse juurdepääsu ja struktureerida sisu kasutaja vaatenurgast. Ideaalis koosneb saidi IA minimaalsest navigeerimiskihist ja annab kasutajale vaid mõne klõpsuga juurdepääsu soovitud jaotisele. Samas on osade jaotus selge, loogiline ja etteaimatav.

• Lühidus:praktiline veebis navigeerimine on alati lihtne ja intuitiivne. Lisage saidi menüüsse ainult need elemendid, mis on vajalikud tõhusaks suhtlemiseks. Edu võti on menüü, mis koosneb minimaalsest arvust samaväärsetest sektsioonidest, mis ei jäta vigu.

• Disain:Kujunduse valimisel keskenduge loetavusele, järjepidevusele ja järjepidevusele. Eelistage tavalisi navigeerimiselemente. Keerukas süsteem Kohandatud ikoonid, nupud ja sildid on halb mõte ning võivad negatiivselt mõjutada teie saidi kasutatavust ja kasutatavust. Mida vähem tarbetuid aktiivseid elemente, seda rohkem rahulolevaid kasutajaid.

VEEBI NAVIGATSIOONI DESIGN TRENDS

Veebinavigatsiooni disain on uskumatult mitmekülgne, kuid mõned selle elemendid on populaarsust kogunud rohkem kui teised. Umbrella IT on välja valinud 10 näidet kõige edukamatest veebinavigatsioonikujundustest, mis töötavad nii individuaalselt kui ka koos. Igal neist on oma eelised ja puudused ning milline neist on parim, on teie otsustada.

1. HORISONTAALNAVIGATSIOON

Horisontaalne navigeerimine on klassikaline disain, mis ühendab mugavuse ja funktsionaalsuse.

Plussid:

• Orgaaniline lahendus enamiku monitoride ekraani standardseks orientatsiooniks;
• Kõik navigeerimismenüü elemendid on aktiivsed ja saadaval korraga;
• Võimalus jaotiste loendit laiendada, hõljutades kursorit või klõpsates rippmenüüd.

Miinused:

• Suur hulk sektsioone ja suur rippmenüü võivad olulise sisuga kattuda;
• Uute menüüelementide lisamine on keeruline.

2. VERTICAL NAVIGATION

Vertikaalne navigeerimine on otsene alternatiiv horisontaalsele navigeerimisele - menüü, mis asub lehe vasakus veerus.

Plussid:

• Menüü lihtne redigeerimine ja piiramatu laiendatavus on suurepärane võimalus keeruliste multifunktsionaalsete teenuste ja e-kaubanduse jaoks;
• Optimaalne erinevate seadmete jaoks.

Miinused:

• Laiendatud sisu võib kattuda;
• Alumised navigeerimiselemendid on vaevumärgatavad.

3. CUT OUT MENÜÜ

Rippmenüü või slaidimenüü on üks viis täisfunktsionaalsuse ja ekraaniruumi säilitamiseks. Menüü on peidetud ekraani vasaku serva taha ja kuvatakse klõpsamisel või puudutamisel.

Plussid:

• Kõige kompaktsem viis saidi korraldamiseks;
• Disain võib olla tundlik, mis koos hamburgeriikooniga on suurepärane võimalus saidi mobiiliversiooni liideseks;
• Peidetud menüü võimaldab sisule suurt rõhku panna;
• Mugav juurdepääs menüüle saidi kõikjalt.

Miinused:

• Varjatud navigeerimine raskendab menüüle juurdepääsu;
• Laiendamisel kattub menüü sisuga.

4. LANDUMINE

Sihtleht on üheleheline sait, millel on pikk või lõpmatu kerimine ja mis on optimeeritud konkreetsetel eesmärkidel.

Plussid:

• Kerimine kiiremini kui klõpsamine - sobiv valik uudiste teenuste, veebipoodide ja reaalajas sisu värskendavate saitide jaoks;
• Lõpmatu kerimine hoiab kasutaja tähelepanu;
• Võimaldab postitada suurel hulgal visuaalset teavet;
• Mugav liides mobiiliplatvormidele.

Miinused:

• Kasutaja piiratud vabadus: teabe järjekorda ja sisu esitusviisi on võimatu kontrollida;
• Jalust ei saa kasutada;
• Suurendab serveri koormust;
• Vähendab SEO mõõdikuid.

5. Fikseeritud menüü

Fikseeritud või kleepuv navigeerimine ankurdab staatiliselt menüüriba kindlale lehe osale, andes kasutajale pideva juurdepääsu menüüvalikutele.

Plussid:

• Mugav juurdepääs kõikidele jaotistele saidi kõikjalt on üheleheküljeliste saitide jaoks kõige optimaalsem lahendus;
• Võimaldab tugevdada bränditeadlikkust päisesse õigesti kinnitatud logoga;
• Parandab analüüsi, suurendades saidi külastuse kohta vaadatud lehtede arvu.

Miinused:

• Ülekoormatud ja pealetükkiv päis muudab veebis navigeerimise keeruliseks ja kattub sisuga.

6. HAMBURGI MENÜÜ

Hamburgerimenüü on navigeerimismenüü, mis on algselt välja töötatud nutitelefonide jaoks, kuid ilmub üha enam sülearvutite ekraanidele. See on ikoon, mis peidab endas palju erinevaid valikuid ja kategooriaid. Menüü sai oma nime ikooni sarnasusest hamburgeriga - kolm horisontaalset menüüriba sümboliseerivad kuulsa võileiva kolme kihti.

Plussid:

• Hamburgeriikoon on ühe klõpsuga või puudutusega ligipääsetav kõikjal saidil;
• Võimaldab paigutada piiramatu arvu valikuid;
• Säästab ruumi nii palju kui võimalik ja kuvatakse ideaalselt mobiilseadmetes;
• Aitab kompaktselt paigutada teiseseid valikuid (näiteks ajalugu ja seaded) ilma ekraani ega kasutajat üle koormamata.

Miinused:

• Vaatamata levimusele ei ole kasutajatel alati lihtne peidetud menüüd leida;
• Hamburger on Androidi platvormi ütlemata standardmenüü ja selle kasutamine iOs -is toob kaasa põhiliste navigeerimiselementide lagunemise ja navigeerimisriba ülekoormamise.

7. ADAPTIVE NAVIGATION

Vastutulelik navigeerimine on muutuv disain, mis kohandub automaatselt erinevate ekraani laiuste ja mobiilplatvormidega.

Plussid:

• Platvormideülene: sait oli algselt mõeldud kvaliteetseks kuvamiseks nii arvutites kui ka mobiilseadmetes;
• Üks URL: reageeriva navigeerimise korral ei pea te looma saidi mobiiliversiooni ja ümbersuunamiste puudumine suurendab otsingumootori optimeerimist.

Miinused:

• Saitide töölauaversioonidele tüüpilised aktiivsed elemendid (manustatud kaardid, video, animatsioon) aeglustavad saidi laadimist mobiilseadmetesse;
• Disaini mobiiliversioon võib osutuda loetamatuks ja ülekoormatud, kuna mobiilseadmete kasutajad kasutavad reeglina kitsamat saidi funktsionaalsust;
• Puudumine alternatiivid: eraldiseisva mobiiliversiooni puhul on alati võimalik naasta saidi täisversiooni. Vastutulelik disain ei võimalda seda: kui kohandatud paigutus on ebamugav või peidab olulist navigeerimiselementi, on ainus võimalus otsida sülearvuti või minna konkurendi veebisaidile.

8. MEGA-MENÜÜ

Megamenüü on ulatuslik navigeerimisriba, mis ilmub hõljutamisel või klõpsamisel. Megamenüü mitte ainult ei struktureeri sisu tekstivormingus rühmadeks ja veergudeks, vaid kasutab aktiivselt ka erinevaid visuaalseid abivahendeid.

Plussid:

• Kõik valikud on saadaval korraga: kasutaja kiireim võimalik suund on suur pluss veebipoodidele ja laia valikut, kategooriaid ja teenuseid pakkuvatele saitidele;
• Laiendab ja peidab hõljutamise, klõpsamise või puudutamise korral sisu kahjustamata.

Miinused:

• korralduspõhimõtte rikkumine võib navigeerimise keeruliseks muuta;
• raske rakendada mobiilseadmetes.

9. EDASIJALG

Saidi jalus või jalus on lehe jalus. Tavaline jalus sisaldab tavaliselt lisateavet, näiteks kontakte, linke, autoriõiguse teatist ja sotsiaalmeedia nuppe. Lisaks nendele andmetele sisaldab laiendatud jalus täielikku navigeerimismenüüd, mida saab kasutada esmase või alternatiivse navigeerimissüsteemina. Laiendatud jalus on lihtne viis tavapärasest disainist kaugemale jõudmiseks ja saidi funktsionaalsuse parandamiseks.

Plussid:

• Pakub alternatiivset või lisamenüüd neile, kes ei leidnud peamistest soovitud sisu;
• Võimaldab paigutada olulist sisu, kuid ei mahu esilehtede sisusse;
• Lisavõimalused klassikalises jalus (mis sisaldab ainult kontaktandmeid) võimaldavad teil laiendada oma kliendibaasi;
• Rõhutab tähelepanu teatud teabele.

Miinused:

• Tavaline kasutaja ei loe jalusesse sageli.

10. TÄISEKRAANI NAVIGATSIOON

Erinevalt kõigist siin esitatud kujundusvõimalustest ei ole täisekraanil navigeerimise eesmärk ekraani ruumi kokkuhoid. Seevastu täisekraanil navigeerimine kasutab sissejuhatavat lehte 100 protsenti, kombineerides teksti graafikaga.

Plussid:

• Tagab saidi selge struktuuri;
• Avab palju võimalusi visuaalseks kujundamiseks;
• Ülekoormatud avalehe tõttu sisaldavad peamised alajaotised ainult sisu, mis säästab oluliselt ekraanipinda;
• Lihtne rakendamine mobiilplatvormidel;
• Ideaalne väga spetsialiseeritud saitide jaoks.

Miinused:

• Allalaadimiskiiruse võimalik vähenemine;
• Irratsionaalne valik keerulise navigeerimiskaardiga saitidele.

Ja traditsiooniline boonus Umbrella IT -lt, mis on alati valmis teile rohkem pakkuma - valik 11 - ANIMEERITUD NAVIGATSIOONI ELEMENDID .

Animeeritud elementide ratsionaalne kasutamine esmase või teisese navigeerimisvahendina võimaldab mitmekesistada konservatiivset disaini ja meelitada kasutajate tähelepanu.

Plussid:

• Haara kasutajate tähelepanu;
• Struktureerige menüü;
• Need parandavad saidi kasutatavust ja suunavad kasutajat.

Miinused:

• Liigne visuaalne segadus raskendab saidil navigeerimist;
• Võib aeglustada veebisaidi laadimise kiirust.

Veebinavigatsiooni disaini valimise ja arendamise etapis on raske ennustada, milline variant võidab. Iga konkreetse juhtumi edukus sõltub paljudest teguritest: saidi ärilistest eesmärkidest, eesmärkidest ja eesmärkidest, sisu olemusest, sihtrühmast ja teie isiklikest eelistustest.

Esitatud näited on vaid väike osa sellest, mis võimaldab teil kaasaegset veebidisaini rakendada.Kas teil on veel küsimusi?, Ja meie aitame muuta teie kõige julgemad projektid reaalsuseks.

Tere kallid tellijad!

Lõpetasin just järgmise projekti kallal töötamise. Lisaks peamenüüle sisaldas see ka navigeerimine... Ja ma arvasin, et oleks tore näidata teile, kuidas sellist asja saab teha vaid mõne rea koodiga. Ja seda tehakse eranditult html ja css abil.

Selline navigeerimine asetatakse tavaliselt saidi vasakule küljele. Selle arengus pole midagi keerulist. Iga navigeerimisüksus on ümbritsetud sildiga

…

... Selle sisse pannakse link.

PSD makett selle üksuse koolituseks saab alla laadida.

See õppetund on saadaval ka video versioon mida saab alla laadida siit:

No üldiselt kõike! Heidame pilgu koodile ja kõik saab lõpuks selgeks.