Unul dintre primele lucruri pe care le faci când începi un blog nou este să creezi o bară de navigare sau un meniu. Dar ce linkuri ar trebui să conțină? Și, mai important, unele linkuri performează mai bine decât altele?
Mi-am petrecut puțin timp experimentând cu asta și am fost destul de surprins de ceea ce funcționează și ce nu.
Este interesant de remarcat că cele cinci linkuri „tradiționale” pe care aproape toată lumea le include în partea de sus nu sunt întotdeauna cele mai bune.
Să aruncăm o privire la ce fac unele site-uri web cu barele lor de navigare și ce lecții putem învăța pentru ale noastre.
Bara de navigare tradițională
De la începuturile site-urilor web, oamenii au pus aceleași cinci linkuri în barele de navigare: Acasă, Despre, Servicii, Știri/Blog, Contact.
Și asta e în regulă.
Dar cu siguranță nu este perfect.
În zilele noastre, putem face mult mai multe cu acel spațiu premium de pe site. Nu mai este doar un loc pentru a naviga prin secțiunile principale – este un loc care poate răspunde diferiților vizitatori, se poate schimba pentru diverse platforme, poate afișa fotografii etc.
Am putea fi puțin mai creativi.
Câteva bare de navigare excelente de pe web
Să începem prin a arunca o privire la câteva dintre cele mai bune bare de navigare pe care le-am putut găsi, apoi vom încheia cu câteva idei, resurse și un plan de atac pentru ale tale.
1. Airbnb – meniul răspunde la starea de autentificare și la interacțiuni
Primul exemplu este de la Airbnb, care are o bară de navigare superioară excelentă ce afișează informații diferite în funcție de dacă ești conectat sau dacă ai făcut deja rezervări, salvări etc.
Aceasta este o funcționalitate avansată foarte interesantă, care ar putea fi implementată în diverse moduri, în funcție de ce conținut dorești ca oamenii să observe cel mai mult pe site-ul sau blogul tău.
De exemplu, ați putea avea o mică secțiune în meniul dvs. care să arate oamenilor articolele salvate sau articolele cu care au interacționat de mai multe ori. Ați putea chiar să aveți o secțiune care să arate articolele populare în acest moment și să permită oamenilor să le voteze sau să le distribuie pe rețelele sociale. Poate există o idee de plugin în asta?
2. Smart Passive Income – funcționalități animate
Următorul exemplu provine de la Smart Passive Income, unde Pat atrage atenția asupra veniturilor sale lunare folosind un grafic animat foarte elegant, care crește pe măsură ce pagina se încarcă.
Aceasta este o modalitate foarte inteligentă de a evidenția una dintre cele mai importante zone ale site-ului dvs. Pat își folosește rapoartele de venituri ca un constructor de brand real și ca inspirație pentru oamenii care doresc să obțină un venit pasiv online, iar adăugarea unei funcționalități proeminente ca aceasta ar contribui mult la atragerea cititorilor mai adânc, promovarea altor zone ale site-ului, a afiliaților etc.
A observat cineva și folosește noul meniu de navigare de pe SPI? Am implementat noi strategii pentru o mai bună orientare, bazate pe feedback-ul dvs.
— Pat Flynn (@PatFlynn) 9 decembrie 2016
Partea interesantă este că, deoarece Pat este Pat, el testează constant performanța configurației sale. Am observat acest tweet despre bara sa de navigare la câteva zile după ce am început să cercetez și să scriu acest articol.
3. Starlight – grafică și branding în bara de navigare
Organizația caritabilă pentru copii Starlight și-a integrat foarte bine brandingul în meniul lor. După cum puteți vedea, există niște ilustrații mici și frumoase care însuflețesc meniul și îl fac mai interesant și mai captivant.
O altă caracteristică a acestui meniu care îmi place destul de mult este modul în care restul site-ului se întunecă, astfel încât accentul să rămână pe meniul în sine – cam ca un lightbox. Acest lucru ajută, de asemenea, la atragerea atenției asupra celor trei butoane galbene, care sunt poate elementele principale, spre deosebire de simpla navigare.
Barele de navigare și meniurile nu trebuie să fie doar zone simple. Putem încorpora elemente de branding și design pentru a face site-ul mai memorabil și distinctiv.
4. Treasury of Lives – cronologie care funcționează și ca meniu de navigare
Am vrut să includ acest exemplu deoarece arată că o bară de navigare nu trebuie să apară deloc ca o bară de navigare tradițională. Site-ul Treasury of Lives colectează biografii ale profesorilor budiști din Himalaya și, ca atare, este util să se arate perioada în care au trăit, în relație unii cu alții.
Dacă vizitați site-ul, veți observa că folosesc o bară de navigare tradițională, dar mă gândeam cum ar exista cazuri în care ar fi foarte unic să se folosească acest tip de stil de cronologie pentru a funcționa ca principalul mod de a naviga pe site.
Desigur, nu trebuie să ai o istorie lungă pentru a folosi acest format. Mă gândeam, de exemplu, să fac ceva similar în ceea ce privește progresul unui blog și etapele la care ar trebui să instalezi un plugin, să adaugi o temă, să ajustezi asta, să schimbi asta, etc.
5. Google Fonts – meniu economizor de spațiu
Google face de obicei lucrurile destul de bine (scuze Google Wave, bleah) și la Google Fonts ai un exemplu excelent de meniu care economisește mult spațiu, nefiind vizibil până când nu decizi să interacționezi mai mult cu conținutul.
Îmi place această opțiune deoarece lasă accentul pe conținutul în sine – mai ales având în vedere că conținutul lor pe acest site este interactiv. Având o bară laterală care îți permite să schimbi modul în care este afișat conținutul poate fi uneori un truc (nu cred că schimbarea culorilor de fundal este atât de utilă), dar alteori poate fi o modalitate foarte bună de a îmbunătăți ceea ce este disponibil (nu rata ghidul meu complet despre cum să-ți editezi bara laterală WordPress).
Deci, ce ar trebui să pun în bara mea de navigare?
După toate acestea, s-ar putea să te întrebi ce naiba să pui în bara ta de navigare!
Ei bine, vestea bună este că nu prea contează – nu există reguli stricte.
Vestea proastă este că singura modalitate de a afla combinația ideală este să faci niște teste – iar asta poate dura. Site-uri precum Visual Website Optimizer te pot ajuta.
Fii strategic cu alegerea ta
Un lucru pe care vrei să-l faci este să te gândești cu atenție la ce conținut/pagină specifică vrei ca vizitatorii să găsească ușor și apoi să construiești bara de navigare în jurul acestuia, eliminând tot ce este în plus.
Amintește-ți, tu îți cunoști conținutul mai bine decât cititorii tăi și, ca atare, ar trebui să îi ajuți să găsească lucrurile potrivite. Aceasta face parte din această strategie de blogging.
De exemplu, testez în prezent un buton activat prin scroll în partea dreaptă sus, care poate trimite oamenii către diferite pagini pe care vreau să le vizez. Am eliminat chiar și elemente precum Contact din meniul meu și le-am pus în subsol, deoarece e-mailurile nu sunt o prioritate pentru mine și consumă mult timp.
Fii de ajutor cu alegerea ta
Următorul lucru pe care ai putea dori să îl iei în considerare este cum să îți servești cel mai bine cititorii în nișa particulară în care te afli.
De exemplu, dacă ești un magazin online, ar putea fi mai bine să ai un mega-meniu uriaș cu toate categoriile, stilurile de produse, opțiunile de expediere etc. disponibile, astfel încât întregul magazin online să fie accesibil într-un clic sau două. Etsy este un exemplu de cum se face acest lucru bine.
Cu meniuri mai complicate, trebuie să te asiguri că funcționează în continuare perfect pe mobil și pentru utilizatorii cu diferite dimensiuni de ecran, pentru a evita orice confuzie. Uneori, un mega-meniu pe mobil va adăuga multe clicuri.
Fii distinctiv cu alegerea ta
Ultima opțiune despre care vreau să vorbesc este ideea de a face pur și simplu ceea ce funcționează pentru brandul tău și îl va ajuta să iasă în evidență față de concurență.
Dacă blogul tău are o scurtă biografie a ta în bara laterală de pe fiecare pagină, atunci poate nu ai nevoie să creezi o legătură către o pagină Despre în bara de navigare. Sau, dacă logo-ul tău funcționează ca un buton de pornire, atunci nu ocupa spațiu cu o altă legătură Acasă. Sau, dacă serviciile tale sunt puțin mai complicate decât majoritatea, gândește-te să pui o pagină Începe sau Încearcă.
Ce se află în bara ta de navigare?
Am lăsat acest articol destul de deschis, deoarece cred cu sinceritate că cel mai bun mod de a determina ce intră într-o bară de navigare este să o testezi pentru fiecare blog sau site web individual pe care îl administrezi și să vezi ce funcționează.
That being said, I’d love to know what is in your menu, how you decided on those links, and how they’ve been working out for you. Please leave a comment below and let me know.
Postare utilă. Avem o navigare interesantă când derulezi în jos, ce părere ai despre asta? Mulțumesc.
Salut John. Îmi plac pictogramele. Există un mic spațiu în partea de sus pe ecranul meu. Este intenționat să fie acolo?
Ești sigur că există un spațiu? Dacă este o linie albă de 1px, este doar browserul tău? Sau poate poți arăta o captură de ecran ca să o pot repara
Macbook Pro 15 inch + cel mai recent Firefox: http://imgur.com/a/QeStg
Ok. Ar putea exista un milion de motive pentru care se întâmplă asta la tine, dar nu la mine, însă m-am uitat la codul meu și am ales o soluție mai bună. Înainte foloseam margin-top: pixeli negativi. Poate fi o problemă de rezoluție.
Soluția mult mai bună decât pixelii negativi este top: 0;
Încearcă acum, te rog spune-mi dacă s-a rezolvat.
LOL, din nou livrezi conținut doar pentru mine, cu un timing aproape perfect! Mă pregătesc să lansez în februarie (sper), și m-am gândit mult la navigație în ultimele zile... Am o dorință puternică de a rupe cu tradiția, și aici sunt niște idei bune de luat în considerare 🙂
Super! Sper să te ajute!
Acestea sunt idei grozave! Îmi plac #2 și #3. Bara mea de navigație este elegantă și tradițională, dar o diferențiez folosind un ton conversațional. Exemplu:
Bun venit! | Prezintă-te. | Salutare din nou! | Meriti asta! | Ai nevoie de resurse? | Păstrează legătura.
După ce vei da clic pe fiecare pagină, vei găsi titlurile tipice ale paginilor pentru orice clarificare necesară. (De asemenea, am publicat primul meu articol cu ajutorul tău și ți-am mulțumit. Mulțumesc!)
Salut Carmen. Doar ca să știi, comentariul tău a fost în spam – ar putea fi din cauza adresei web bit.ly.
Mulțumesc pentru menționare! Voi arunca o privire.
Mulțumesc că m-ai anunțat. Îmi pare rău pentru asta.
Pe vremuri, numem asta „navigație misterioasă”. În general, se recomandă ca linkurile tale de navigație să fie clare și concise. Majoritatea linkurilor tale nu-mi spun ce să mă aștept să găsesc când dau clic pe ele. Pe de altă parte, dacă nu e stricat...
Mi-ai dat multe de gândit. Sunt cu siguranță un începător la toate acestea și sunt de acord. Aș prefera mult mai mult un site clar decât vizitatori confuzi. Mulțumesc pentru critica constructivă!
Salut, Ramsay,
Recent am schimbat lucrurile pe site-ul meu de autor. Nu mai am o bară de navigare. Cu toate acestea, am imagini care sunt legate de toate informațiile mele.
Ce părere ai?
Jennifer
Salut Jennifer.
Îmi place conceptul.
Aș sugera poate să folosești fotografii de o calitate mai bună și să le faci mai proeminente. Cred că vrei cu adevărat să te prezinți în cea mai bună lumină dacă asta este abordarea pe care o adopți. Imaginile sunt destul de neclare pentru mine pe un ecran retina.
Aș sugera, de asemenea, poate un font care să fie în concordanță cu brandingul cărții tale, astfel încât totul să fie consecvent pe toate platformele.
Ultimul lucru! În scopuri SEO și de claritate, cred cu adevărat că ai nevoie de un fel de logo sau antet care să explice unde se află oamenii.
Sper că aceste sugestii nu sunt prea nedorite.
Mulțumesc!
Un feedback grozav! Mulțumesc mult.
Sfatul tău este întotdeauna binevenit...
Jennifer
A avea aceleași opțiuni de navigare pe fiecare pagină este o necesitate. Dacă cineva ajunge pe altceva decât pagina ta de pornire, nu va avea (o modalitate ușoară) de a ajunge la o altă pagină.
Eram pe punctul de a adormi când am primit emailul tău… M-am gândit că ar trebui să-l citesc acum în pat sau voi uita de el…. Sunt complet de acord cu tine că depinde în totalitate de ceea ce funcționează pentru cineva… Am observat și un grafic animat pe site-ul lui Pat când l-am vizitat și a atras foarte mult atenția…. de ce nu folosești upgrade-uri de conținut în postările tale? Toată lumea le folosește…
Salut Abdullah.
Nu am găsit upgrade-urile de conținut deosebit de utile pentru conversii pe termen lung și necesită mult timp pentru a le pregăti.
Doar adaugă liste de verificare la postările de tip listă sau la cele mai populare postări... nu necesită prea mult timp pentru a le crea...
Mulțumesc pentru răspuns, Ramsay..
Unul dintre motivele pentru care revin mereu… nu îi agasezi pe oameni cu upgrade-uri de conținut inutile sau pop-up-uri obositoare și/sau solicitări insistente.
Aceasta este o parte critică a oricărui site web – am adoptat o abordare deliberat simplă, folosind o temă foarte simplă – meniul este un text simplu, poate ar trebui să optez pentru un aspect mai frumos și mai cool! Mă gândesc să folosesc o temă radical diferită, toate acestea sunt motive de reflecție. Postare grozavă, Ramsay!
Salut Michael. Mă bucur că ți-a plăcut. Aș lua cu siguranță în considerare eliminarea linkurilor din meniul tău, astfel încât să nu depășească o singură linie.
Bună idee, uneori devin orb la propriile mele probleme de dezvoltare! Ajustez chiar acum. Mulțumesc Ramsay.
De fapt, tocmai am terminat bara de navigație pentru noul meu site, așa că acest post vine la momentul potrivit.
Am ales așa: Începe Aici, Cumpără, Blog, Ce Îmi Place, Lucrează Cu Mine
Pentru brandul meu (învățând mamele cum să facă bani din blogging), cred că ordinea mea de navigație funcționează.
Apropo, ÎMI PLACE mult butonul „CINE?” de pe bara ta de navigație. Nu l-am mai văzut niciodată. Foarte creativ! Și presupun că pagina ta „instrumente” este pagina ta de resurse?
Alegeri bune! Da, pagina Aceasta pare să funcționeze bine.
Salut Ramsey,
Blogul meu este simplu, dar totuși convertește nebunește.
Un lucru pe care l-ai subliniat este să ai două pagini de start (logo și bazate pe text)
Ce părți convertesc nebunește?
Există trei pagini care convertesc destul de bine.
Despre | Pagina de resurse | Începe aici.
Noroc!
Ramsay,
Este un post de blog minunat. Acum aproape doi ani, am încetat să mă concentrez pe Marketingul Afiliat și Google Adsense după ce am adăugat un link text de genul „Angajează-mă”...
Oferteam serviciul meu de scriere freelance. S-a dovedit a fi un pas care mi-a schimbat viața, deoarece mi-a dat peste cap strategia de blogging. Apoi, am continuat să o testez. Am reușit să atrag potențiali clienți și să obțin clienți fără să mă preocup despre numărul de vizitatori.
Mă bucur că ai vorbit despre asta.
Îmi place! Felicitări.
Încă o mină de aur! Cum te gândești la aceste idei rare de postări, nu știu, dar voi spune, acest blog mă împinge la limită. Continuă munca bună Ramsay!
Mulțumesc. De obicei, apar din lucrurile la care lucrez.
Aceasta este o perspectivă unică!
Adesea mă uit la elementele mici ale site-urilor web și admir eficacitatea lor – fie sub formă de conținut, design de site sau idei – sunt inovatoare.
Deși mă gândesc să implementez unele dintre ele pe blogul meu, nu o fac, deoarece modificarea blogului meu se dovedește întotdeauna a fi o treabă dezordonată.
Uneori l-am stricat încercând să fac tot felul de lucruri la întâmplare pe cont propriu, după care încerc să-l păstrez obișnuit.
În acest moment, bara mea de navigare este similară cu cea care ar fi putut exista în Epoca de Piatră. Poate că voi putea face toate lucrurile interesante odată ce voi fi capabil să le fac, până atunci așa merge.
În ceea ce privește barele de navigare de pe alte site-uri, îmi plac cele care facilitează accesibilitatea, cum ar fi barele de contact de pe site-uri precum The Minimalists sau Webby Awards – nu te redirecționează în altă parte doar pentru a te urmări sau a da like, ceea ce cred că face mai ușor să câștigi mai mulți urmăritori.
Sau când alte elemente dispar într-un anumit caz când plasezi cursorul peste o anumită opțiune – nimic special, dar arată cool.
Există o mulțime de alte lucruri drăguțe cu care oamenii au experimentat. Ah! Nu-mi amintesc acum.
Sunt de acord cu elementele care dispar. Îmi place foarte mult site-ul Vanity Fair pentru modul în care fac asta într-un mod plăcut vizual, dar care are totuși un scop.
La fix, Ramsay. M-am uitat la meniul meu gândindu-mă că trebuie să se schimbe. În loc de o bară neagră între antet și conținut, o mut într-un meniu secundar deasupra.
Sus e bine.
Mulțumesc, omule
Anunță-ne cum merge!
Asta e unic, Ramsay. Continuă așa.
Mulțumesc.
Postare grozavă, Ramsey! Acesta este ceva despre care nu am văzut cu adevărat alți experți în blogging să vorbească. Singurul lucru pe care l-aș adăuga este că elementele de navigare ar trebui să fie clare și concise. Nu încerca să fii drăguț sau inteligent. Ultimul lucru pe care ți-l dorești este ca vizitatorii tăi să fie confuzi sau să plece pentru că nu realizează că „Contactează-mă” (de exemplu) este pagina ta de contact.
Acesta este un punct bun – mai ales că mulți cititori ai blogurilor în limba engleză acum nu sunt vorbitori nativi de engleză.
Salut Ramsay,
Ai făcut o treabă bună în a aduna câteva idei excelente pentru a ajusta bara de navigare. Ca și majoritatea bloggerilor, și eu am una tradițională cu Contact, Despre mine și Categorii.
Sunt de acord cu punctul tău de vedere că trebuie să adăugăm creativitate pentru a atrage atenția. Îmi place navigarea grafică de pe smartpassiveincome.
Mulțumesc pentru sugestiile grozave, o zi bună!
Salut Ramsay,
O distribuire bună. Cel puțin învăț ceva nou de fiecare dată când îți vizitez blogul.
Mulțumesc pentru distribuire.
Și La mulți ani.
Salut Ramsay,
Lucrez ca blogger cu normă întreagă de mult timp. Te-am urmărit și am îmbunătățit multe dintre tehnicile pentru a trăi bine din blogging. Mai am mult de parcurs. 2017 va fi anul meu și am idei noi pe care le voi implementa.
Ramsay, urează-mi noroc și mulțumesc pentru contribuția ta.