Nav noslēpums, ka katrai uzņēmuma vietnei ir četri galvenie mērķi: veicināt zīmola lojalitāti, palielināt datplūsmu, samazināt atlēcienu līmeni un palielināt potenciālo pirkumu vai pārdošanas reklāmguvumu līmeni! Šeit daudz kas ir atkarīgs no tā, cik ērti jūtas lietotāji, kuri apmeklē jūsu vietni.
Tāpēc mūsu šodienas rakstā mēs runāsim par to, kas ir vietnes navigācija, pateicoties kurai tiek radīta "mājīga atmosfēra". Pareizāk sakot, par visbiežāk pieļautajām kļūdām tās izstrādes laikā.
Kļūda # 1: pielāgots stils
Tā notika, ka lietotāji ir pieraduši redzēt vietnes navigāciju lapas augšdaļā vai kreisajā pusē, tāpēc nepiespiediet viņus klīst pa vietni, meklējot to, jo viņiem var nepatikt šīs paslēpes spēles, kas negatīvi ietekmēt reklāmguvumu līmeni un palielināt atlēcienu līmeni.
Jā, lapu / vietņu izstrādē vienmēr tiek veicināta radoša pieeja, taču navigācija vietnēs nepārprotami nav tas gadījums, kad jums vajadzētu ļaut vaļu iztēlei. Ar šādiem eksperimentiem jūs novēršat lietotāju uzmanību, kuri būs spiesti izpētīt jaunu navigācijas stilu, nevis resursa galveno saturu.
Kļūda # 2: vispārīgas izvēlnes vienumu etiķetes
Vēl viens zelta noteikums, kā pārvietoties vietnē, ir tas, ka navigācijas izvēlnes etiķetēm jābūt informatīvām. Tā, piemēram, izvēlnes vienumu "Produkti" vai "Pakalpojumi" izmantošana ir izplatīta visiem uzņēmumiem, un šādi nosaukumi lietotājiem ir maz. Šeit ir vēl viens piemērs: "Ko mēs darām" - tā pati frāze bez sejas.
Kā šajā gadījumā uzlabot vietnes navigāciju? Mēģiniet navigācijas izvēlnē atrast visprecīzākās etiķetes katrai ikonai, un jūs redzēsit, kā tās uzrunā lietotājus. Vietnes apmeklētāji nāca pie jums, meklējot atbildi uz saviem jautājumiem, tāpēc neatlaidiet tos ar stereotipiskām frāzēm un vārdiem.
Piekrītiet, ka jūsu klienti nemeklē abstraktus produktus vai pakalpojumus, un navigācija ar šādām ikonām neietekmēs jūsu vietnes reklamēšanu meklēšanas rezultātos. Vai atpazini sevi? Tāpēc ir pienācis laiks uzlabot! Vietnes izvēlnei un tās struktūrai kopumā jābūt optimizētai meklētājprogrammām, un tai ir jārunā mērķauditorijai saprotamā valodā. Izlasot mūsu rakstu līdz galam, jūs redzēsiet, cik uzņēmumu atrisina šo problēmu.
Kļūda # 3: nolaižamā izvēlne
Nolaižamā izvēlne ir kļuvusi ārkārtīgi populāra kā navigācijas elements, taču ir divi labi iemesli, kāpēc tā jāizmanto ar vislielāko rūpību.
Iespējams, daudziem no jums ir nācies burtiski noķert nolaižamo izvēlni. Viena neērta kustība - un tā aizbēg no jums! Un tagad jūs, savākuši savus spēkus, atkal meklējat, klikšķiniet, un tur - pārsteigums! - vēl viens rīcības iespēju saraksts. Šādi panākumi ir šausmīgi kaitinoši! Padomājiet par to, varbūt jums nevajadzētu vēlreiz pamocīt savus potenciālos klientus?
Vēl viens nolaižamās izvēlnes atteikuma iemesls: zema datplūsma uz šādām vietnes lapām vai skata dziļums. Ja jums ir problēmas ar zemu datplūsmu augstākā līmeņa lapās, iespējams, iemesls ir nolaižamās izvēlnes izmantošana. Bet vienmēr ir izņēmumi no noteikumiem. Šajā gadījumā izņēmumi attiecas uz lielām vietnēm ar daudzām sadaļām, jo šeit, izmantojot šādu izvēlni, vietnes lietojamība ir ievērojami uzlabojusies.
Kļūda # 4: liels izvēlnes vienumu skaits
Tā tas bija arī agrāk, taču šodien nevajadzētu pieturēties pie šīs tradīcijas bez steidzamas vajadzības, jo dažreiz pat 8 punkti ir par daudz. Mēģiniet aprobežoties ar mazākām no tām, nepārsniedzot 5: jo mazāk sekundāro punktu, jo retāk lietotāji uz tiem paklups un jo skaļāk runās vissvarīgākie.
Šis noteikums darbojas arī visam vietnes saturam, nevis tikai navigācijai. Katrs noņemtais elements padara pārējos redzamākus. Īsa navigācija ir svarīga arī SEO. Tā kā lielāko daļu laika lietotāji seko saitei uz mājas lapu, nevis uz vietnes iekšējām lapām, tāpēc meklētājprogrammām tā ir "autoritatīva". Ja jūsu navigācija ir pārpildīta ar saitēm, vietnes sākumlapa kļūst mazāk autoritatīva salīdzinājumā ar iekšējām.
Kļūda # 5: neatbilstošs izvēlnes vienuma izvietojums pasūtīšanai
Psiholoģiskie pētījumi ir parādījuši, ka jebkura saraksta pirmo un pēdējo elementu ir vieglāk atcerēties nekā vidējo. Līdzīga darbība notiek ar lietotājiem. Šo parādību sauc par “Sērijas pozīcijas līkni”, un to grafiski izsaka grafika veidā:
Uzmanības koncentrācija ir daudz lielāka saraksta sākumā (pārākuma efekts) un beigās (jaunuma efekts). Tāpēc ir pareizi novietot vissvarīgākos punktus navigācijas sākumā, sekundāros - centrā. Izvēlnes vienums "Kontaktpersona" jāievieto TOP navigācijas beigās labajā stūrī.
Bonusa padoms: saites uz visiem laikiem, pogas nekad!
Ja jūs atpaliekat no tīmekļa dizaina tendencēm 8 gadus un teksta saišu vietā joprojām izmantojat grafiskās navigācijas pogas, tad šeit ir 5 iemesli, kāpēc jums vajadzētu pārskatīt savus ieradumus:
- Pogas teksts nav redzams meklētājprogrammām.
- Pogas atjaunināt ir grūtāk nekā teksta saites.
- Pogas tiek ielādētas lēnāk, tāpēc tās nav pieņemamas mobilajām lietotnēm.
- Pogas nav lasāmas runas un teksta pārlūkprogrammās.
- Pogas nav vajadzīgas pat tad, ja vēlaties izmantot nestandarta fontus, piemēram, ar tādiem rīkiem kā TypeKit.
Un tagad, kā mēs solījām: 5 vietnes navigācijas piemēri bez kļūdām.
Navigācija ir vissvarīgākais jebkuras vietnes aspekts. Tas, vai lietotājs varēs atrast sev atbilstošu informāciju un vai viņš vēlas atgriezties, ir atkarīgs no jūsu tīmekļa navigācijas efektivitātes.
Navigāciju neregulē nekas: to var padarīt caurspīdīgu un intuitīvu vai daudzlīmeņu un nestandarta.
Kā padarīt vietnes navigāciju pēc iespējas efektīvāku un kāds dizains jums ir piemērots?
Tīmekļa izstrādes uzņēmumāir atbildes uz visiem jūsu jautājumiem.
Bet vispirms lietas.
KAS IR NAVIGĀCIJA?
Navigācija vietnē vai tīmekļa navigācijaIr programmatūras un vizuālo rīku sistēma, kas palīdz lietotājam pārvietoties vietnē un atrast nepieciešamo informāciju.
PLĀNOŠANAS NAVIGĀCIJA
Visefektīvākā tīmekļa navigācija ir balstīta uz 3 pīlāriem:
- Struktūra
- Kodolīgums
- Dizains
- Struktūra:navigācija sākas ar detalizētu izpēti informācijas arhitektūra (IA), kas ļauj izveidot optimālu piekļuvi vietnei un strukturēt saturu no lietotāja viedokļa. Ideālā gadījumā vietnes IA sastāv no minimāliem navigācijas slāņiem un nodrošina lietotājam piekļuvi vēlamajai sadaļai tikai ar dažiem klikšķiem. Tajā pašā laikā pats sadaļu sadalījums ir skaidrs, loģisks un paredzams.
- Īsums:praktiskā tīmekļa navigācija vienmēr ir vienkārša un intuitīva. Vietnes izvēlnē iekļaujiet tikai tos elementus, kas nepieciešami efektīvai saziņai. Panākumu atslēga ir izvēlne, kas sastāv no minimāla skaita līdzvērtīgu sadaļu, kas neatstāj iespēju kļūdīties.
- Dizains:Izvēloties dizainu, koncentrējieties uz lasāmību, konsekvenci un konsekvenci. Dodiet priekšroku parastajiem navigācijas elementiem. Sarežģīta sistēma Pielāgotas ikonas, pogas un etiķetes ir slikta ideja un var negatīvi ietekmēt jūsu vietnes lietojamību un lietojamību. Jo mazāk nevajadzīgu aktīvo elementu, jo vairāk apmierināti lietotāji.
WEB NAVIGĀCIJAS DIZAINA TENDENCES
Tīmekļa navigācijas dizains ir ļoti mainīgs, taču daži tā elementi ir ieguvuši lielāku popularitāti nekā citi. Umbrella IT ir atlasījis 10 veiksmīgāko tīmekļa navigācijas dizainu piemērus, kas darbojas gan atsevišķi, gan kopā. Katram no tiem ir savas priekšrocības un trūkumi, un kurš no tiem ir labākais, ir atkarīgs no jums.
1. HORIZONTĀLĀ NAVIGĀCIJA
Horizontālā navigācija ir klasisks dizains, kas apvieno ērtības ar funkcionalitāti.
Plusi:
- Organisks risinājums lielākajā daļā monitoru standarta ekrāna orientācijai;
- Visi navigācijas izvēlnes elementi ir aktīvi un pieejami vienlaicīgi;
- Iespēja paplašināt sadaļu sarakstu, izmantojot nolaižamo izvēlni, virzot kursoru virs vai noklikšķinot.
Mīnusi:
- Liels skaits sadaļu un apjomīga nolaižamā izvēlne var pārklāties ar svarīgu saturu;
- Jaunu izvēlnes vienumu pievienošana ir sarežģīta.
2. VERTIKĀLĀ NAVIGĀCIJA
Vertikālā navigācija ir tieša alternatīva horizontālajai navigācijai - izvēlne, kas atrodas lapas kreisajā kolonnā.
Plusi:
- Ērta izvēlnes rediģēšana un neierobežota paplašināmība ir lieliska iespēja sarežģītiem daudzfunkcionāliem pakalpojumiem un e-komercijai;
- Optimāli dažādām ierīcēm.
Mīnusi:
- Izvērsts var pārklāties ar saturu;
- Apakšējie navigācijas elementi ir gandrīz nemanāmi.
3. CUT OUT MENU
Nolaižamā izvēlne vai slaidu izvēlne ir viens no veidiem, kā saglabāt pilnu funkcionalitāti un ekrāna telpu. Izvēlne ir paslēpta aiz ekrāna kreisās malas un tiek parādīta, noklikšķinot vai pieskaroties.
Plusi:
- Kompaktais vietnes organizēšanas veids;
- Dizains var būt atsaucīgs, kas kombinācijā ar hamburgera ikonu ir lieliska iespēja vietnes mobilās versijas saskarnei;
- Slēptā izvēlne ļauj lielu uzsvaru likt uz saturu;
- Ērta piekļuve izvēlnei no jebkuras vietas vietnē.
Mīnusi:
- Slēptā navigācija apgrūtina piekļuvi izvēlnei;
- Paplašinot, izvēlne pārklājas ar saturu.
4. IESĒŠANĀS
Galvenā lapa ir vienas lapas vietne ar garu vai bezgalīgu ritināšanu, kas optimizēta konkrētiem mērķiem.
Plusi:
- Ritināšana ātrāk nekā noklikšķināšana - piemērota iespēja ziņu pakalpojumiem, tiešsaistes veikaliem un vietnēm, kas atjaunina saturu reālā laikā;
- Bezgalīga ritināšana saglabā lietotāja uzmanību;
- Ļauj ievietot lielu daudzumu vizuālās informācijas;
- Ērts interfeiss mobilajām platformām.
Mīnusi:
- Lietotāja ierobežota brīvība: nav iespējams kontrolēt informācijas secību un satura pasniegšanas veidu;
- Nevar izmantot kājeni;
- Palielina servera slodzi;
- Samazina SEO rādītājus.
5. FIKSĒTA IZVĒLNE
Fiksēta vai lipīga navigācija statiski piesaista izvēlnes joslu noteiktai lapas daļai, sniedzot lietotājam pastāvīgu piekļuvi izvēlnes opcijām.
Plusi:
- Ērta piekļuve visām sadaļām no jebkuras vietas vietnē ir optimālākais risinājums vienas lapas vietnēm;
- Ļauj nostiprināt zīmola atpazīstamību, izmantojot galvenē pareizi fiksētu logotipu;
- Uzlabo analītiku, palielinot skatīto lapu skaitu vienā vietnes apmeklējumā.
Mīnusi:
- Pārslogota un uzmācīga galvene apgrūtina navigāciju tīmeklī un pārklājas ar saturu.
6. HAMBURGERU IZVĒLNE
Hamburgera izvēlne ir navigācijas izvēlne, kas sākotnēji tika izstrādāta viedtālruņiem, bet arvien biežāk parādās klēpjdatora ekrānos. Tā ir ikona, kas slēpj plašu iespēju un kategoriju klāstu. Izvēlne savu nosaukumu ieguva no ikonas līdzības ar hamburgeru - trīs horizontālās ēdienkartes joslas simbolizē trīs slavenās sviestmaizes slāņus.
Plusi:
- Hamburgera ikona ir pieejama no jebkuras vietas vietnē ar vienu klikšķi vai pieskārienu;
- Ļauj ievietot neierobežotu skaitu iespēju;
- Cik vien iespējams ietaupa vietu un perfekti tiek parādīta mobilajās ierīcēs;
- Palīdz kompakti izvietot sekundārās opcijas (piemēram, vēsturi un iestatījumus), nepārslogojot ekrānu vai lietotāju.
Mīnusi:
- Neskatoties uz izplatību, lietotājiem ne vienmēr ir viegli atrast slēpto izvēlni;
- Hamburger ir neizteikta standarta izvēlne Android platformā, un, izmantojot to iOs, tiek sadalīti pamata navigācijas elementi un pārslogota navigācijas josla.
7. ADAPTĪVĀ NAVIGĀCIJA
Adaptīvā navigācija ir mainīgs dizains, kas automātiski pielāgojas dažādiem ekrāna platumiem un mobilajām platformām.
Plusi:
- Vairāku platformu: vietne sākotnēji bija paredzēta augstas kvalitātes attēlošanai gan datoros, gan mobilajās ierīcēs;
- Viens URL: izmantojot adaptīvu navigāciju, jums nav jāizveido vietnes mobilā versija, un novirzīšanas neesamība palielina meklētājprogrammas optimizāciju.
Mīnusi:
- Aktīvie elementi, kas raksturīgi vietņu galddatoru versijām (iegultās kartes, video, animācija), palēnina vietnes ielādi mobilajās ierīcēs;
- Dizaina mobilā versija var izrādīties nelasāma un pārslogota, jo mobilo ierīču lietotāji parasti izmanto šaurāku vietnes funkcionalitāti;
- Prombūtne alternatīvas: atsevišķas mobilās versijas gadījumā vienmēr ir iespējams atgriezties vietnes pilnajā versijā. Atsaucīgais dizains to neļauj: ja pielāgotais izkārtojums ir neērts vai slēpj svarīgu navigācijas elementu, vienīgā iespēja ir meklēt klēpjdatoru vai doties uz konkurenta vietni.
8. MEGA-IZVĒLNE
Mega izvēlne ir plaša navigācijas josla, kas parādās, virzot kursoru vai noklikšķinot. Mega izvēlne ne tikai strukturē saturu grupās un kolonnās teksta formātā, bet arī aktīvi izmanto dažādus uzskates līdzekļus.
Plusi:
- Visas iespējas ir pieejamas vienlaicīgi: ātrākais iespējamais lietotāja virziens ir liels pluss tiešsaistes veikaliem un vietnēm ar plašu iespēju, kategoriju un pakalpojumu klāstu;
- Izvērš un slēpj, virzot, klikšķinot vai pieskaroties, neapdraudot saturu.
Mīnusi:
- organizēšanas principa pārkāpums var sarežģīt navigāciju;
- grūti ieviest mobilajās ierīcēs.
9. PAPILDU KĀJAS
Vietnes kājene vai kājene ir lapas kājene. Standarta kājenē parasti ir papildu informācija: kontaktpersonas, saites, paziņojums par autortiesībām un sociālo mediju pogas. Papildus šiem datiem paplašinātajā kājenē ir pilna navigācijas izvēlne, ko var izmantot kā primāro vai alternatīvo navigācijas sistēmu. Paplašināta kājene ir vienkāršs veids, kā pārsniegt standarta dizainu un uzlabot savas vietnes funkcionalitāti.
Plusi:
- Nodrošina alternatīvu vai papildu izvēlni tiem, kuri neatrada vēlamo saturu galvenajā;
- Ļauj ievietot svarīgu saturu, bet neietilpst galveno lapu saturā;
- Papildu iespējas klasiskajā kājenē (kas satur tikai kontaktinformāciju) ļauj paplašināt klientu loku;
- Uzsver uzmanību uz noteiktu informāciju.
Mīnusi:
- Parasts lietotājs bieži nelasa kājeni.
10. PILNA EKRĀNA NAVIGĀCIJA
Atšķirībā no visām šeit piedāvātajām dizaina iespējām pilnekrāna navigācijas mērķis nav ietaupīt vietu ekrānā. Turpretī navigācija pilnekrāna režīmā 100 % izmanto ievadlapu, apvienojot tekstu ar grafiku.
Plusi:
- Nodrošina skaidru vietnes struktūru;
- Paver plašas iespējas vizuālajam dizainam;
- Pārslogotās mājas lapas dēļ galvenajās apakšnodaļās ir tikai saturs, kas ievērojami ietaupa ekrāna vietu;
- Vienkārša ieviešana mobilajās platformās;
- Ideāli piemērots ļoti specializētām vietnēm.
Mīnusi:
- Iespējams lejupielādes ātruma samazinājums;
- Neracionāla izvēle vietnēm ar sarežģītu navigācijas karti.
Un tradicionālais bonuss no Umbrella IT, kas vienmēr ir gatavs piedāvāt jums vairāk - 11. iespēja - Animēti navigācijas elementi .
Racionāla animētu elementu izmantošana kā primārais vai sekundārais navigācijas līdzeklis ļauj dažādot konservatīvo dizainu un piesaistīt lietotāju uzmanību.
Plusi:
- Piesaistīt lietotāju uzmanību;
- Strukturējiet izvēlni;
- Tie uzlabo vietnes lietojamību un orientē lietotāju.
Mīnusi:
- Pārmērīgs vizuālais juceklis apgrūtina navigāciju vietnē;
- Var palēnināt vietnes ielādes ātrumu.
Tīmekļa navigācijas dizaina izvēles un izstrādes stadijā ir grūti paredzēt, kura opcija būs uzvarētāja. Katra konkrētā gadījuma panākumi ir atkarīgi no vairākiem faktoriem: no uzņēmējdarbības mērķa, vietnes mērķiem un uzdevumiem, satura rakstura, mērķauditorijas un jūsu personīgajām vēlmēm.
Piedāvātie piemēri ir tikai neliela daļa no tā, kas ļauj īstenot mūsdienīgu tīmekļa dizainu.Vai jums joprojām ir jautājumi?, Un mēs mēs palīdzēsim jūsu drosmīgākos projektus pārvērst realitātē.
Labdien, dārgie abonenti!
Es tikko pabeidzu darbu pie nākamā projekta. Papildus galvenajai izvēlnei tajā bija arī navigācija... Un es domāju, ka būtu jauki jums parādīt, kā šāda veida lietas var izdarīt tikai dažās koda rindās. Un tas tiek darīts tikai ar html un css palīdzību.
Šāda navigācija parasti tiek novietota vietnes kreisajā pusē. Tās attīstībā nav nekā sarežģīta. Katrs navigācijas vienums ir ievietots tagā
…
... Tajā ir ievietota saite.PSD maketsšo vienumu apmācībai var lejupielādēt.
Šī nodarbība ir pieejama arī video versija kuru var lejupielādēt šeit:
Nu, vispār, viss! Apskatīsim kodu un beidzot viss kļūs skaidrs.
PAR CENTRU
FOTO GALERIJA
CENRĀDIS
KONTAKTI
Pārējo mēs darīsim ar stiliem.
.Bar-menu klasei tiek piešķirti stili, kas nepieciešami, pamatojoties uz blakus esošo bloku atrašanās vietu. Manā piemērā lapā nav nekas cits kā šī navigācija, tāpēc es vienkārši iestatīšu platumu.
Tā kā teksts ir centrēts, vienkāršākais veids, kā to centrēt, ir iestatīt tagu
teksta izlīdzināšana centrā.
Attēli ir izgriezti, mēs sākam rakstīt css kodu navigācijai. Precīzāk par navigācijas saitēm! Mums jau ir pārējie stili.
fontu saime: Tahoma;
fonta svars: treknraksts;
Un ko mēs redzēsim?
Kāpēc ir tā, ka? Fakts ir tāds, ka fona attēls atrodas saitē tieši tik daudz, cik to atļauj teksts. Tas ir, saites platumu un augstumu nosaka teksts, kas tajā atrodas. Starp citu, tā ir skaidra zīme par iekļautajiem tagiem. Iestatīsim platumu un augstumu:
fons: url (attēli / bg-menu-main.jpg) centra centrs;
fontu saime: Tahoma;
fonta svars: treknraksts;
platums: 190 pikseļi;
augstums: 27 pikseļi;
Joprojām nekas nav mainījies.
fons: url (attēli / bg-menu-main.jpg) centra centrs;
fontu saime: Tahoma;
fonta svars: treknraksts;
displejs: bloks;
Šķiet, ka navigācija sāk veidoties mums vajadzīgajā formā:
Katras saites apakšā pievienojiet polsterējumu. Katrai saitei mēs pievienojam arī polsterējumu un neaizmirstami atņemam to no augstuma:
fons: url (attēli / bg-menu-main.jpg) centra centrs;
fontu saime: Tahoma;
fonta izmērs: 10 pikseļi; krāsa: # 056e04;
fonta svars: treknraksts;
augstums: 21 pikseļi;
apakšējā mala: 10 pikseļi;
polsterējums: 6 pikseļi;
Mēs iegūstam to, kas mums nepieciešams:
Bāra izvēlne h2 a : virziet kursoru{
fons: url (attēli / bg-menu.jpg) centra centrs;
fontu saime: Tahoma;
krāsa: #ffffff;
fonta svars: treknraksts;
apakšējā mala: 10 pikseļi;
polsterējums: 6 pikseļi;
teksta dekorēšana: nav;
Šeit ir mūsu navigācijas izvēlne:
Ceru, ka šī apmācība jums noderēs. Andrejs bija ar jums. Paldies par jūsu uzmanību. Uz tikšanos nākamajās nodarbībās!
Laba navigācijas sistēma palīdzēs jums orientēties. Ir ārkārtīgi svarīgi, lai laba navigācijas sistēma palīdzētu jums orientēties tīkla objektos (vietnēs :)) bez galvassāpēm. Lai gan ir daži izņēmumi, lielākā daļa vietņu būtu salauztas vai vispār pazustu bez smalkas lapu pārvaldības.
Vai jums ir pieejams jūsu vietnes plāns? Darīsim vienu nejauku lietu. Izņemiet to atsevišķā logā un turiet logu atvērtu, kamēr lasāt šo rakstu. Ir pienācis laiks pārbaudīt jūsu lapu pārvaldības sistēmu. Mēs uzzināsim, vai jūs zaudējat potenciālos lietotājus, dezorientējat un maldināt.
Gatavs? Pārbaudīsim jūsu vietni, atbildot uz dažiem pamatjautājumiem.
Svarīgi jautājumi
Cik daudz jāuztraucas un jāuztraucas, lai atrastu pareizo navigācijas stilu vietnes lapu izkārtojumam? Apspriežot tīmekļa vietnes lietojamību, jūs, iespējams, dzirdēsit, ka efektīvai pārvaldības sistēmai jāatbild uz vairākiem pamata jautājumiem, kas var rasties lietotājam:
''Kur es esmu?''
Vidējam vietnes apmeklētājam šis jautājums ir pirmais. Šķiet, varbūt uz sekundes tūkstošdaļu, jo visi, sekojot saitei, vispirms cenšas atrast savu ceļu. Tāpēc viens no galvenajiem navigācijas sistēmas uzdevumiem ir pievērst uzmanību vietnes lapas vietai, kur atrodas atbilde uz šo jautājumu.
Ja navigācijas sistēma nespēj orientēt apmeklētāju, viņa apmulsums liek apšaubīt vietnes piemērotību.
Jautājums tiem, kuriem tagad ir atvērta vietne: vai pašreizējā lapa ir atzīmēta jūsu izvēlnes vienumos?
Vienkāršākais veids, kā pateikt par lietotāja atrašanās vietu, ir atzīmēt atbilstošo izvēlnes vienumu vai izcelt pogu citā krāsā.
Atkārtošana dara brīnumus!
Pat ja pašreizējai lapai ir virsraksts, grafiski mainīt atbilstošo izvēlnes vienumu vispār nebūs lieki, jo atkārtošana rada brīnumus.
'' Kur es biju? ''
Apmeklēto saišu krāsas maiņa vai aptumšošana ne vienmēr ir vienīgais un labākais veids, kā atzīmēt apmeklētās lapas.
Rīvmaize veic lielisku darbu, lai apmeklētājs varētu ātri un viegli noteikt savu pašreizējo atrašanās vietu vietnē.
Vietne Wufoo tos visefektīvāk izmanto ceļojumu lapās:
Pateicoties hierarhiskajai navigācijai, jauna lapas slāņa pievienošana ir vienkārša. Tas vienkārši nokļūst ķēdes beigās. Visticamāk, jūs neuzņemsities pats salikt mašīnrakstus, izmantojot šāda veida navigācijas sistēmu. Rīvmaize ir vairāk orientēšanās rīks nekā navigācija pa vietnes objektiem. Izmantojiet tos kā papildu elementu, bet, lai iegūtu kaut ko mazāk dinamisku, atstājiet galveno navigācijas sistēmu.
'' Kur es varu doties? ''
Lietotājam ir jāzina, kur viņš var doties no pašreizējās lapas. Tas kļūst īpaši svarīgi, ja apmeklētājs meklē kaut ko īpašu. Un tā ir vilšanās, ka tas ir pareizais veids, kā izvest apmeklētāju no vietnes.
'' Kāpēc man vajadzētu sekot šai saitei? ''
Vienkārši norādot izvēlnes vienumus, ne vienmēr pietiek. Papildu informācija par katru izvēlnes vienumu sniegs lietotājam informāciju par lapas saturu. Papildu informācija var būt zemteksta vai mājienu rindas veidā, kas parādās, kad kursors tiek pārvietots uz jebkuru izvēlnes vienumu.
Piemērs ir SimpleBits.com. Es vēlos atzīmēt, ka, ja zem vienuma SimpleBits nebūtu paraksta “nesenie ieraksti”, es diez vai būtu uzminējis, ka šī saite atver emuārus:
Kā Stīvs Krugs raksta grāmatā Nelieciet man domāt (nelieciet man domāt) ka lietojamība ne vienmēr nozīmē pārmērīgu skaidrojumu. Viņš arī atzīmē, ka vidusmēra interneta lietotājam, kad viņš vēlas izmantot meklēšanas lodziņu, vairs nav jāraksta "Ievadiet šeit atslēgvārdu". Šeit standarti un konvencijas darbojas kopā.
Izvairieties no neskaidrībām
Mystery Meat navigācija balstās uz neskaidru vai neskaidru ēdienkartes dizainu. Līdzīgi kā stūre griežas, attīstās arī dažādi virzieni navigācijas sistēmu dizainā. Un šī tendence parādījās arī iemesla dēļ. Izmantojot izvēlni “noslēpumainā gaļa”, lietotājam pašam jāpārvietojas, uzminot un eksperimentējot. Intuīcija un inteliģence vispār nav nepieciešama.
Kā redzat, jūs varat kļūt radošs, turpinot pieturēties pie tradīcijām. Bet šāda veida navigācija ir tālu no abiem:
Secinājums
Vēlreiz apskatiet savu vietni. Tagad, pamatojoties uz vairākiem īpašiem rādītājiem, jūs varēsit novērtēt savas vietnes lietderību. Vai dažām lapas sadaļām trūkst papildu skaidrības?
Es ceru, ka jums patika šis raksts :) un jūs nekad neveidosit šādas vietnes: un :)
P.S. Bildes var noklikšķināt;)
Pēdējā gada laikā tīmekļa dizaina pasaulē esam redzējuši daudzas jaunas tendences. Šajā rakstā es pievērsīšos vietnes navigācijai, ko mūsdienu tīmekļa dizaineri ievieš, lai padarītu vietni ne tikai pievilcīgu, bet arī saprotamu apmeklētājiem. Šīs navigācijas tendences labi darbojas dažāda veida vietnēs. Arī šāda veida izvēlnes ir labi atspoguļotas dažādās ekrāna formās un izmēros.
Apskatiet šo šķirni un atrodiet interesantas idejas nākamajiem projektiem!
Lipīga navigācija
Navigācija ir izstrādāta, lai palīdzētu lietotājiem pārvietoties no punkta A uz visiem citiem vietnes punktiem. Turot navigācijas izvēlni fiksētā vietā, lietotāji var pārvietoties vietnē no jebkuras vietas lapā. Daudzas vietnes savu galveno navigāciju “piesprauž” ekrāna augšdaļai. Kad lietotājs ritina uz leju, lai izpētītu saturu, izvēlne vienmēr ir viņa acu priekšā.
To atvieglo CSS un jQuery spraudņi, un tagad daudzām vietņu tēmām pēc noklusējuma ir lipīga navigācijas josla. Fiksētā navigācija ir lieliski piemērota arī mobilo ierīču lietotājiem, kur vietne ir garāka un plānāka.
Kā to izmantot?
Ja jums ir vietne ar daudz navigācijas elementiem, šī opcija jums būs piemērota. Tas ir drošs veids, kā ilgāk noturēt vietnes apmeklētājus un palielināt kopējo lapas skatījumu skaitu.
Tomēr pārliecinieties, ka navigācijas josla neaizņem pārāk daudz vietas. Tam nevajadzētu būt tik lielam, lai tas bloķētu lielāko daļu lapas satura. ASV žurnāls apiet šo problēmu, samazinot navigācijas joslas izmēru - tas padarīja to mazāk uzbāzīgu.
Mega izvēlne
Mega izvēlnes ir kļuvušas populāras, palielinoties žurnālu stila vietnēm. Mega izvēlnes atšķiras no parastajām nolaižamajām izvēlnēm un parasti satur vairākas satura slejas. Šī metode darbojas labi, ja to izmanto saprātīgi, taču tā nedarbojas katrā vietnē.
Kāpēc tos izmantot?
Apmeklētāji var iegūt priekšstatu par jūsu emuāru vai vietni, apskatot saistīto saturu. Ja mega izvēlnē varat nodrošināt vairāk satura, tad kāpēc ne?
Šī tendence nedarbojas mobilajās ierīcēs, jo ekrānā nav pietiekami daudz vietas. Bet daudzi cilvēki joprojām pārlūko internetu galddatoros un klēpjdatoros, tāpēc arī mega izvēlnei ir plaša auditorija.
Universāla navigācija
Daži uzņēmumi darbojas vai tiem pieder vairāki zīmoli, un tie ietver universālu navigāciju visā vietnē. Piemēram, Disnejam pieder atrakciju parki, viņš veido spēles un producē filmas kopā ar TV šoviem. Ir jēga saglabāt šo daudzpusīgo navigāciju katrā lapā neatkarīgi no zīmola, lai pievērstu uzmanību citiem Disney produktiem.
Un šī tendence neaprobežojas tikai ar konglomerātiem vai kontrolakciju sabiedrībām. To dažreiz izmanto tādu vietņu tīklos kā New York Media. Vēl viens labs piemērs ir virsraksts Mashable, kurā ir saites uz visām zīmola starptautiskajām vietnēm.
Kāpēc to izmantot?
Ja strādājat ar lielu produktu vai zīmolu tīklu, var būt noderīgi tos visus savienot, lai izveidotu vienotu zīmola identitāti. Universālā navigācija var mudināt apmeklētājus apskatīt citus produktus.
Vertikālā bīdāmā navigācija
Arvien vairāk vietņu izmanto vertikālu navigāciju, un dažos gadījumos tā patiešām darbojas labi. Tas ir īpaši populāri portfeļa vietnēs vai radošajās aģentūrās, kas pārsniedz tradicionālā tīmekļa dizaina robežas.
Iepriekš minētais AWARD piemērs ir fantastisks vertikālās navigācijas izmantošanas gadījums. Tajā pašā laikā tā redzamība saglabājas jebkurā laikā. Šeit nav kaitinoša hamburgera - sānos var redzēt skaidras ikonas. Šī ir eksperimentāla pieeja navigācijas dizainam, taču tā var darboties vietnēs ar radošām mērķauditorijām.
Kāpēc to izmantot?
Izmēģiniet šo paņēmienu tikai tad, ja plānojat izmantot pilnekrāna izkārtojumu, kas atšķiras no tradicionālā dizaina.
Darbīgu vertikālu navigāciju nav viegli izveidot no nulles, un ir grūti panākt, lai tā darbotos atsaucīgos projektos. Tomēr, ja jūs interesē eksperimentēšana un vēlme izmēģināt jaunas idejas ir ļoti spēcīga, tad vertikālās izvēlnes var būt labs risinājums.
Slēptā izvēlne
Ikvienam tīmekļa dizainerim būtu jāzina par hamburgeru ikonām un to izmantošanu adaptīvajos dizainos. Bet, cilvēkiem tuvojoties hamburgera ikonai, arvien vairāk vietņu nepārtraukti slēpj navigāciju.
Mazliet dīvaini: hamburgers nepadara lietotāja dzīvi vieglāku, neļauj viņam nekavējoties atvērt saites uz citām vietnes lapām. Tomēr tas atbrīvo vietu ekrānā, noņemot navigāciju no skata. Ir veikti dažādi pētījumi, kas liecina, ka lielākajai daļai lietotāju nepatīk slēptās izvēlnes. Taču šī tendence varētu mainīties, jo vairāk cilvēku izmantotu viedtālruņus un zinātu šīs ikonas nozīmi.
Kāpēc to izmantot?
Labākais slēptās izvēlnes skripts ir augsto tehnoloģiju auditorija. Šie apmeklētāji atpazīs hamburgera ikonu un zinās, ko tas nozīmē "noklikšķiniet šeit, lai atvērtu izvēlni". Tātad, ja veidojat tehnoloģiju emuāru vai veidojat B2B tiešsaistes aģentūru, tas varētu noderēt. Bet, ja nē, pirms šīs pieejas rūpīgi padomājiet un pārliecinieties, ka neupurējat ērtības stila labā.
Atsaucīgas ēdienkartes
Izstrādājot vietni, nekādā veidā nevar izvairīties no mobilās navigācijas izmantošanas - jo jūsu vietne, iespējams, ir 100% skatāma no mobilās ierīces. Dizaineri bieži slēpj dažas navigācijas saites mobilajās ierīcēs, lai palīdzētu izvēlnēm labāk darboties mazos ekrānos.
Bet daudzas vietnes ievēro jauno tendenci saglabāt visus navigācijas elementus ar nolaižamajām izvēlnēm. Parasti tam ir nepieciešama hamburgera ikona ar pārslēgšanas ikonām nolaižamajām saitēm.
Šo tehniku redzēsit tikai mobilo ierīču ekrānos vai mazos pārlūkprogrammas logos. Piemēram, vietne Politico mobilajām ierīcēm izmanto pluszīmes (+), lai blakus katrai saitei norādītu apakšizvēlnes.
Kāpēc to izmantot?
Apmeklētājiem vajadzētu būt iespējai apskatīt visu vietni neatkarīgi no izmantotās ierīces. Saglabājot apakšizvēlnes, varat piedāvāt vairāk apskates iespēju.
Vienkārši pārliecinieties, ka katra apakšizvēlne ir skaidri marķēta ar ikonu, krāsas maiņu vai kaut ko vizuālu. Apmeklētājiem jāzina, vai izvēlne tiek atvērta, noklikšķinot uz saites, vai arī tā tiek nosūtīta uz jaunu lapu.
Karuseļa raksti
Šī tendence kļūst arvien populārāka emuāros un lielākajās ziņu vietnēs. Daudzas no šīm vietnēm katru dienu var publicēt desmitiem, ja ne simtiem jaunu rakstu.
Vienkārša karuseļa pievienošana lapas augšdaļai dod apmeklētājiem iespēju iepazīties ar jaunākajiem rakstiem. Šos stāstus var dinamiski atjaunināt. Tos var izveidot kā sīktēlus vai visu, kas jums patīk. Jūs varat redzēt piemērus jebkurā Vogue rakstā.
Kāpēc to izmantot?
Ja jūs veidojat emuāru ar lielu saturu, šī tendence palīdzēs radīt brīnumus lietotājam. Apmeklētāji var apskatīt jaunākos rakstus, un šī izvēlne mudina apmeklētājus izpētīt vairāk nekā vienu stāstu vienā apmeklējumā. Tā rezultātā palielināsies vidējais kopējais vietnē pavadītais laiks. Lielākā daļa emuāru, kuros tiek publicēts daudz satura, vēlas iegūt lielāku datplūsmu, un karuseļi ir lielisks veids, kā to izdarīt.
Google mīl longreadus, un tas liek autoriem publicēt detalizētākas rokasgrāmatas par gandrīz visu. Tas lieliski darbojas tīmekļa saturā, taču var sabojāt lasīšanas pieredzi. Lai vienkāršotu lietas, izmantojiet satura rādītāju - saites uz raksta sadaļām pašā sākumā. Spilgtākais piemērs ir Wikipedia, kurā no sākuma tiek izmantots ToC.
Kāpēc to izmantot?
Galvenais satura rādītāja izmantošanas iemesls ir lietojamības uzlabošana. Garāki raksti kļūst par normu, taču lietotājam, iespējams, nevajadzēs izlasīt visus 5000 vārdus. Tie ir noderīgi arī SERP klasifikācijā, jo Google, pamatojoties uz satura rādītāju, var ieteikt novirzīšanas saites. Šī ir abpusēji izdevīga pieeja.
Leņķiskās saites
Šī ir interesanta navigācijas tendence un strauji izplatās. Šķiet, ka ikviens jaunizveidots uzņēmums un profesionāls bizness izmanto šo stilu, lai izveidotu navigāciju, kas izrādās intuitīva un simetriska.
Parasti tiek izmantoti šādi stili:
- Mazie burti
- Sans-serif fonti
- Papildu horizontālie attālumi
- Balta vai ļoti gaiša nokrāsa
Šī dizaina tendence ir kļuvusi par zīmola identitāti tīrai, kraukšķīgai un profesionāla izskata navigācijai.
Kāpēc to izmantot?
Šī ēdienkarte izskatās tikai profesionāli; tas ir pamanāms un neuzkrītošs, un tas iedvesmo uzticības sajūtu. Ja veidojat starta vai korporatīvo vietni, šī tendence, iespējams, ir labākais navigācijas dizaina stils. Bet esiet piesardzīgs: vietnei nevajadzētu izskatīties bez dvēseles vai līdzināties citu projektu kopijai.
Vienas lapas punktu navigācija
Vienas lapas vietņu popularitātes pieaugums ir izraisījis daudzas jaunas tendences. Viens no tiem ir punktu navigācija: apaļu ikonu sērija, kas atrodas ekrāna kreisajā vai labajā pusē. Katrs no šiem punktiem attēlo atšķirīgu vietnes sadaļu. Un tā kā izkārtojums ir viena gara lapa, šīs saites ir iezīmētas, lai norādītu lietotāja pašreizējo atrašanās vietu. Man ļoti patīk šī ideja, bet jautājums ir, vai cilvēki saprot, ko šie punkti nozīmē un kā tos izmantot.
Kāpēc to izmantot?
Ja izstrādājat vienas lapas izkārtojumu, ieteicams izmantot lipīgu navigāciju. Tādējādi ir vieglāk redzēt, kas ir katrs slaids un kāda informācija ir lapā.
Bet, ja nevarat (vai nevēlaties) izmantot augšējo navigācijas sistēmu, tad arī šie punkti ir laba lieta. Vai vēl labāk: apvienojiet abus! Vai pat iekļaujiet tekstu blakus punktiem. Ir daudz iespēju, un tās var labi darboties.
Kāda veida navigācija jums patīk?
