17 tipuri de opțiuni de navigare pe blog și site-uri web

Publicat: 2019-07-04

O persoană care navighează printr-un site web receptiv pe o tabletă.

Știi că 67% dintre vizitatorii tăi vor părăsi site-ul tău dacă navigarea îi enervează? Un blog și o navigare bună pe site-ul web sunt esențiale pentru succes, deoarece afectează traficul, cât timp o persoană petrece pe site-ul tău și ratele de conversie.

Datorită progresului internetului, există multe speculații cu privire la diferitele tipuri de meniuri de navigare. Navigarea este unul dintre elementele majore care afectează experiența utilizatorului și un blog sau un site web fără navigare este de neimaginat.

Cuprins

  • De ce este navigarea atât de importantă pentru un site web?
  • Opțiuni de navigare
    • Navigare interactivă
    • Bare de navigare lipicioase
    • Bara laterală verticală Navigare statică
    • Navigare cu alunecare verticală
    • Navigare Parallax
    • Meniu Hamburger
    • Meniu bazat pe multimedia
    • Cuprins
    • Navigare postare conexă
    • Mega meniuri drop-down
    • Navigare cu puncte pe o singură pagină
    • Navigație universală
    • Navigare pe breadcrumb
    • Navigare Fat Footers
    • Meniuri Subnav receptive
    • Carusele de top
    • Meniu glisant

De ce este navigarea atât de importantă pentru un site web?

Consideră că site-ul tău web este un oraș. Tocmai ați aterizat la Singapore, Dubai, Roma sau orice altă destinație dorită la alegere. Știi ce locuri vrei să vezi, dar nu ai idee cum să ajungi acolo. Majoritatea orașelor au indicatoare care pot ajuta oamenii să îndrume într-un anumit loc. Semnele ajută și la implicarea oamenilor. Poate nu te-ai gândit să vizitezi Colosseumul, dar dacă vezi un semn care arată că este în apropiere, s-ar putea să fii convins să-l vizitezi.

Navigarea pe bloguri și pe site-uri web este concepută având în vedere același principiu. Fără navigare, vizitatorii nu își pot da seama unde să meargă sau ce pagini merită văzute. Ei nu vor putea să găsească pagina dvs. de înregistrare a produselor sau pagina de abonament.

Scopul navigării este de a ajuta la explorarea site-ului în continuare. Trebuie să inspire curiozitatea oamenilor și să-i convingă să facă clic pe linkuri. Navigarea bună pe site va permite vizitatorilor să treacă de la o pagină la alta fără nicio frustrare. Dacă ați făcut o treabă bună, vizitatorii vă vor părăsi site-ul cu intenția de a reveni din nou, de a se abona la un buletin informativ sau chiar de a cumpăra un produs sau serviciu.

Opțiuni de navigare

Iată câteva dintre noile opțiuni moderne de navigare care pot funcționa ca magic pentru blogul sau site-ul tău web:

Navigare interactivă Exemplu de site cu navigare interactivă

Aceste tipuri de meniuri de navigare interactive constau de obicei dintr-o bară orizontală cu elemente care oferă interacțiune atunci când un vizitator trece cu mouse-ul peste link. Acesta este unul dintre cele mai interesante tipuri de opțiuni de navigare, deoarece oferă un amestec de elemente statice, dinamice și interactive, care sunt toate amestecate pentru a atrage atenția. Promite utilizatorului o experiență captivantă, inspirată și interactivă. Cu toate acestea, din cauza numeroaselor elemente în mișcare, aceste opțiuni de navigare nu sunt foarte compatibile cu tot felul de browsere sau dispozitive mobile.

Bare de navigare lipicioase Revista SUA cu o bară de navigare lipicioasă

După cum indică și numele, o bară de navigare lipicioasă este un meniu pentru site-ul web, de obicei afișat orizontal în partea de sus, care rămâne pe loc și nu dispare când derulați în jos site-ul web. Acest lucru vă împiedică să mergeți înapoi până la antetul site-ului web și să vă pierdeți locul în pagina de derulare. Ajută utilizatorii să navigheze pe site de oriunde pe pagină.

Datorită pluginurilor CSS și jQuery, o mulțime de teme de site-uri sunt acum încorporate cu meniul lipicios ca caracteristică implicită. Acest tip de navigare funcționează excelent și pentru dispozitivele mobile, deoarece ecranul este mai lung și mai subțire acolo.

Dacă site-ul dvs. are o mulțime de pagini în care să navigați, este o idee bună să utilizați un meniu de navigare lipicios, deoarece ajută la implicarea utilizatorilor și îi menține pe vizitatori mai mult timp pe site. Unele bare de navigare lipicioase se micșorează, de asemenea, pe măsură ce derulați în jos, astfel încât să devină mai puțin invazive și să vă permită să vedeți mai bine conținutul paginii.

Bara laterală verticală Navigare statică

Navigare statică din bara laterală verticală Amazon

Navigarea statică din bara laterală este în tendințe de câțiva ani. Deși majoritatea designerilor spun că aceste meniuri funcționează mai bine pentru site-uri web compacte și elegante, există o mulțime de bloguri și reviste care încă folosesc acest stil de navigare.

Majoritatea site-urilor web folosesc un panou static colorat în partea stângă a paginii, care poate afișa toate linkurile rapid și eficient. Între timp, puteți derula în jos pe pagina web fără ca bara laterală să meargă nicăieri. Acest lucru asigură o experiență excelentă pentru utilizator, deoarece toate linkurile relevante sunt disponibile la îndemâna dumneavoastră.

Navigare cu alunecare verticală

Navigare cu bară laterală glisantă verticală Akris

Foarte similar cu bara laterală statică, cu excepția că această opțiune de navigare vine cu o opțiune de defilare sau de glisare în jos, astfel încât vizitatorii să poată vizualiza o listă mai mare de pagini decât ceea ce poate fi văzut cu o bară statică. Un număr mare de site-uri web moderne folosesc acum tendința de navigare cu alunecare verticală și funcționează foarte bine. Această opțiune de navigare este foarte populară în rândul agențiilor creative sau al site-urilor web de portofoliu care împing limitele designului tradițional de site-uri web.

Acest design funcționează bine pe un aspect pe ecran complet, mai degrabă decât pe un design web cu grilă. O bară laterală glisantă verticală nu este ușor de proiectat și, uneori, funcționarea acesteia poate fi destul de dificilă dacă utilizați un dispozitiv mobil sau tactil. Totuși, dacă sunteți curios să încercați idei noi de navigare, o bară de glisare verticală poate fi o idee grozavă.

Navigare Parallax Site-ul web Walking Dead a folosit navigarea paralaxă la maximum

Navigarea paralaxă sau derularea paralaxă implică un aspect web cu fundalul principal al paginii care se mișcă mai lent decât alte elemente din prim-plan. Această opțiune de navigare este bazată pe grafic și oferă paginii web un efect tridimensional.

Împreună cu mai multe elemente vizuale și în mișcare, site-ul paralax păstrează lucrurile interesante și împiedică vizitatorii să se piardă în site.

În funcție de tipul de site web, paralaxul poate fi folosit și cu moderație în site-uri web pentru a oferi o notă de dimensiune adăugată și pentru a ajuta prim-planul și elementele importante să iasă în evidență.

Meniu Hamburger Meniul de hamburgeri de pe Mic

Pictograma hamburger este butonul de meniu care se găsește de obicei în colțul din stânga sus sau din dreapta sus al unui site web. Este numit astfel deoarece pictograma constă din trei linii orizontale scurte stivuite una peste alta, dând aspectul unui sandviș cu hamburger. Acest lucru se găsește de obicei în site-urile web compatibile cu dispozitivele mobile sau site-urile web moderne de desktop techno-vibe.

Acesta este unul dintre cele mai populare tipuri de butoane de navigare, deoarece reunește toate linkurile într-un singur loc, fără a adăuga multă dezordine. Acest tip de meniu este foarte discret, elegant și dinamic. Chiar dacă acum este un standard de vârf în navigarea mobilă, unor persoane mai puțin cunoscătoare de tehnologie le este greu să găsească acest tip de opțiuni de navigare ascunse. Prin urmare, adăugarea cuvântului meniu lângă buton poate facilita navigarea pentru astfel de vizitatori.

Meniu bazat pe multimedia Site-ul multimedia al antreprenorilor

Un meniu bazat pe multimedia constă din mai multe elemente vizuale, cum ar fi imagini și videoclipuri, care sunt prezente în elementele unui meniu de navigare. Această opțiune minunată și captivantă se datorează progreselor tehnologice care ne permit să adăugăm o mulțime de conținut multimedia fără a compromite funcțiile, accesibilitatea și performanța site-ului. Prin urmare, acest tip de navigare atractivă, modernă și la modă devine rapid un must-have pentru site-urile web dinamice și elegante.

Navigarea bazată pe multimedia folosește o varietate de opțiuni de navigare diferite, cum ar fi meniul hamburger și navigarea subsol și evidențiază doar partea cea mai importantă a descrierii.

Cuprins Un cuprins pe pagina de mitologie greacă din Wikipedia

Știm că Google iubește conținutul de lungă durată și, prin urmare, bloggerii se străduiesc acum să scrie conținut mai lung și mai lung. Deși aceasta este o practică excelentă conform motorului de căutare, poate lăsa cititorii în imposibilitatea de a se orienta. Pentru a simplifica lucrurile, multe site-uri web adaugă un tabel de conținut la începutul articolelor lor, care le clasifică în diferite secțiuni. În acest fel, utilizatorii pot doar să facă clic pe linkul secțiunii pe care doresc să o acceseze și vor fi aduși acolo fără nicio derulare nesfârșită în jos pe pagină. Acest lucru ajută articolul să arate mai puțin intimidant și face minune pentru experiența utilizatorului.

Cel mai proeminent exemplu este cel al Wikipedia care a folosit tabele de conținut încă de la crearea sa.

Navigare postare conexă Navigare a postărilor asociate în Gizmodo

Unul dintre cele mai importante tipuri de opțiuni de navigare, folosit de obicei în bloguri, site-uri de știri și listări de produse, este navigarea postărilor aferente . Acest tip de navigare constă în link-uri către alte postări de blog, știri sau produse, introduse între, deasupra sau sub conținutul principal.

Cel mai mare avantaj al acestei opțiuni de navigare este că oferă conținut similar pe care vizitatorii îl pot găsi interesant. Navigarea postărilor aferente încurajează vizitatorii să răsfoiască alte oferte și postări similare de pe site, crește implicarea, reduce rata de respingere și solicită o achiziție.

Mega meniuri drop-down Meniul derulant al Adidas

Meniurile drop-down sunt cunoscute a fi controversate. În primul rând, pot fi dificil de accesat cu crawlere pentru roboții motoarelor de căutare. Pe de altă parte, acestea pot fi enervante pentru vizitatorii care nu sunt interesați să se uite la o listă lungă de pagini web. De asemenea, îi fac pe vizitatori să rateze pagini importante. Cu toate acestea, un tip de meniu derulant funcționează foarte bine. Acesta este mega meniul drop-down.

Mega meniurile drop-down funcționează întotdeauna foarte bine pe site-urile web care prezintă anumite industrii, cum ar fi sport, știri online și magazine de comerț electronic. Mega meniul drop-down este o componentă multifuncțională, cu mai multe coloane, care se întinde pe aproape toată lățimea ecranului. De asemenea, poate echilibra elemente precum videoclipuri, imagini și chiar coșuri de cumpărături. Deoarece este o componentă foarte complexă, uneori poate face ca pagina să nu răspundă, mai ales pe browserele mobile. Cu toate acestea, este una dintre cele mai bune opțiuni dacă site-ul dvs. oferă o gamă largă de servicii sau produse diverse.

Cel mai mare avantaj oferit de mega meniuri derulante este că vizitatorii își pot face o idee despre tipul de conținut oferit de un site web divers. Prin urmare, există un număr mare de utilizatori care iubesc acest stil de navigare.

Navigare cu puncte pe o singură pagină Navigare cu puncte pe o singură pagină folosită de autorul Robin Hobb

Unul dintre cele mai la modă tipuri de navigare văzute în zilele noastre este navigarea cu puncte pe o singură pagină . Aceasta implică o serie de pictograme circulare drăguțe situate în stânga, dreapta sau centrul ecranului. Fiecare punct reprezintă o secțiune diferită a paginii. Când un vizitator trece cu mouse-ul peste un punct sau dă clic pe un punct, el este adus la o secțiune a paginii web sau la un diapozitiv care este legat de acel punct. Punctul pe care face clic pe vizitator este evidențiat pentru a marca poziția utilizatorului pe site.

Acest tip de navigare este excelent atunci când doriți să afișați un număr mare de produse pe o singură pagină, dar nu doriți să ocupați mult spațiu. De fapt, navigarea cu puncte pe o singură pagină funcționează foarte bine împreună cu alte navigații, cum ar fi meniurile derulante și barele de navigare superioare.

Navigație universală Navigație universală

Unele companii sunt conglomerate și au mai multe mărci sub numele lor. Aceste companii au adesea un meniu de navigare universal pe întregul site. După cum sugerează și numele, această opțiune de navigare include toate mărcile, serviciile și produsele diferite pe care marca-mamă le oferă.

Unul dintre cele mai bune exemple ale unui astfel de tip de navigare este Disney, care deține un canal TV, filme, parcuri tematice, jocuri și multe altele. Navigarea universală are sens în această situație, deoarece atrage atenția asupra tuturor produselor Disney. Această navigare nu include, de asemenea, conglomeratele. Este, de asemenea, utilizat pe rețele de site-uri web precum cele deținute de Univision Communications, inclusiv Jezebel, Deadspin și Lifehacker și legăturile de navigare către toate cele șapte mărci care au fost deținute anterior de Gawker Media.

Un avantaj al acestui tip de navigare este că permite utilizatorilor să știe ce alte site-uri fac parte din rețeaua site-ului web și ajută la crearea unei identități de brand de succes și a cunoașterii mărcii. Acest lucru poate ajuta vizitatorii să polenizeze încrucișat în rețea către toate site-urile web.

Navigare pe breadcrumb Navigare pe breadcrumb

În povestea „Hansel și Gretel”, copiii lasă o urmă de pesmet pentru a-și găsi drumul înapoi acasă. Navigarea pe firul de pâine, sau traseul pe ruta de navigare, funcționează pe același principiu. Acestea sunt link-uri de navigare ierarhice care apar în partea de sus a unei pagini web cu fonturi mici și arată vizitatorului locația lor pe site.

Schema breadcrumb arată legăturile categoriei căreia îi este atribuită pagina în care vă aflați, secțiunile site-ului în care aceasta există și duce înapoi la pagina de pornire. Uneori, navigarea pe breadcrumb afișează și numele paginii pe care vă aflați, dar care nu are hyperlink.

În cazul exemplului nostru Amazon, cartea aparține categoriei „Gen Fiction”, care face parte din secțiunea „Literature & Fiction” și duce înapoi la secțiunea principală „Cărți” de pe site-ul Amazon.

Navigare Fat Footers Navigare Fat Footers

Navigarea în subsol este similară ca aspect cu bara de meniu tradițională din partea de sus a site-ului. Cu toate acestea, principala diferență este că acesta se află în partea de jos a paginii web. Din acest motiv, se numește navigare subsol.

În multe site-uri, navigarea în subsol constă, de obicei, în contactarea noastră, confidențialitate și linkuri legale; cu toate acestea, acum a devenit destul de obișnuit să afișați câmpuri de înscriere pentru e-mail, link-uri de rețele sociale și chiar link-uri la paginile produsului în meniul de subsol.

Majoritatea vizitatorilor scanează prin meniul de subsol ca ultimă soluție. O mulțime de site-uri web, în ​​special site-uri de vânzare cu amănuntul, folosesc meniul de subsol pentru a afișa link-uri către pagini care nu au putut fi afișate în meniul de antet.

Meniuri Subnav receptive Meniuri Subnav receptive

Oamenii își folosesc acum mai mult dispozitivele mobile decât computerele desktop. Ținând cont de acest lucru, dezvoltatorii au venit cu un sistem de navigare nou și mai eficient, numit meniu subnav receptiv. Acest meniu subnav pare mic - ceea ce este bun pentru ecranele mobile - dar poate fi extins pentru a afișa categorii ascunse prin apăsarea unui buton.

Site-urile cu meniuri subnav receptive constau dintr-o pictogramă plus mică, un semn săgeată sau o schimbare de culoare, care indică faptul că meniul conține subcategorii.

Carusele de top Carusele de top

Opțiunea de navigare în carusel de top devine rapid o tendință pe site-urile și blogurile de știri cu trafic ridicat. Multe dintre aceste site-uri majore pot publica zeci de postări în fiecare zi, iar adăugarea unui carusel simplu în partea de sus a paginii le poate oferi vizitatorilor șansa de a se uita la cele mai recente postări. Articolele din carusele sunt actualizate și organizate dinamic și pot fi stilate astfel încât să arate ca imagini în miniatură.

Acest tip de navigare este perfect pentru site-uri web și bloguri cu volum mare și poate oferi un impuls experienței utilizatorului. În timp ce se află pe o pagină, vizitatorii pot afla despre mai multe povești diferite de care ar putea fi interesați și vor găsi mai mult timp pentru a explora site-ul. Acest lucru crește timpul de interacțiune, îmbunătățește reținerea utilizatorilor și reduce rata de respingere.

Meniu glisant Meniu glisant

Aceasta este încă una dintre acele navigații „ascunse”, similară cu butonul hamburger. Meniurile glisante sunt populare pentru dispozitivele mobile care au un ecran mai subțire și nu au spațiu suficient pentru a afișa conținutul, precum și meniul. Prin urmare, au primit o mare popularitate, iar designerii le implementează acum și pe site-urile desktop.

Meniul glisant este indicat de un indiciu vizual, cum ar fi o pictogramă, de exemplu, o săgeată sau un text mic, care, atunci când este apăsat, scoate meniul în evidență. De obicei, meniul glisant apare în partea stângă, deși în prezent poate veni din dreapta, sus și chiar din jos.

Navigarea este o parte esențială a designului oricărui site web, iar designerii trebuie să acorde o atenție deosebită tipului de navigare care nu se potrivește doar nevoilor clientului, ci reflectă și vocea companiei. În afară de aceasta, iată câteva sfaturi pe care trebuie să le urmați pentru a vă asigura că navigarea funcționează în cele mai bune moduri posibile:

  • Trebuie să vă planificați harta site-ului la începutul fiecărui proiect. Mai simplu spus, o hartă a site-ului este o listă de adrese URL și pagini web de pe un site web. Aceasta înseamnă că este unul dintre cele mai bune instrumente de navigare posibile, din perspectiva motorului de căutare.
  • Navigarea unui site ar trebui să asigure că toți utilizatorii săi trebuie să cunoască poziția lor pe site, unde îi va conduce site-ul și prin ce pagini au trecut.
  • Cele mai bune site-uri web nu vin cu un singur tip de navigare, ci oferă o combinație de mai multe site-uri moderne de navigare. De exemplu, un site web compatibil cu dispozitivele mobile poate avea un buton hamburger, plus un meniu glisant, un subsol și un antet lipicios pentru o navigare ușoară.
  • Toate opțiunile de navigare ar trebui să respecte și convențiile web, astfel încât vizitatorii să știe unde să găsească anumite funcționalități.
  • Este o idee bună să utilizați elemente de navigare pe site-uri web receptive, cum ar fi butoanele hamburger și meniurile glisante pe site-uri web, acolo unde este cazul.

Deși există mai multe tipuri diferite de opțiuni de navigare, atât tradiționale, cât și moderne, este alegerea utilizatorului să decidă ce navigație dorește să pună pe site-ul său, după ce le cântărește beneficiile și limitările. Când vine vorba de navigare, tendințele sunt cu adevărat dinamice și fiecare an nou vede o gamă complet nouă de meniuri uimitoare. Ce tip de navigare merită site-ul tău depinde în întregime de tine.