En sak som en v\u00e4ldesignad navigeringsfunktion kommer att g\u00f6ra \u00e4r att ge bes\u00f6karna en \u00f6verblick p\u00e5 h\u00f6g niv\u00e5 \u00f6ver vad de kan f\u00f6rv\u00e4nta sig att hitta. Samtidigt kommer det att hj\u00e4lpa bes\u00f6karna att orientera sig s\u00e5 att de kan man\u00f6vrera runt p\u00e5 webbplatsen snabbt och enkelt, inte g\u00e5 vilse och agera snabbt n\u00e4r de tvingas g\u00f6ra det.<\/p>\n
Smidig navigering \u00e4r ocks\u00e5 bra f\u00f6r SEO.<\/p>\n
Kort sagt, n\u00e4r du utformar webbplatsnavigeringselement b\u00f6r bes\u00f6karnas v\u00e4lbefinnande vara h\u00f6gsta prioritet.<\/p>\n
I den h\u00e4r artikeln ska vi i detalj utforska fem b\u00e4sta metoder att t\u00e4nka p\u00e5 n\u00e4r du utformar element f\u00f6r webbnavigering. BeTheme-exempel har inkluderats s\u00e5 att du kan f\u00e5 en tydlig uppfattning om vad dessa b\u00e4sta praxis inneb\u00e4r.<\/p>\n
Det \u00e4r l\u00e4tt att ta webbplatsnavigeringsfunktioner f\u00f6r givet. Hem, Om, Produkter, etc. visas h\u00f6gst upp p\u00e5 sidan, var och en med en l\u00e4mplig l\u00e4nk som tar dig till den plats du hoppas att \u00e5ka till.<\/p>\n
Det kan inte bli enklare, och det \u00e4r s\u00e5 vi vill ha det, men det m\u00e5ste utformas med omsorg. Det sista du vill att en bes\u00f6kare ska se \u00e4r “” eller n\u00e5got liknande.<\/p>\n
H\u00e4r \u00e4r fem tips som du b\u00f6r k\u00e4nna till och f\u00f6lja.<\/p>\n
Logotypen fungerar som ett f\u00f6retags digitala ansikte ut\u00e5t. Det kan ses som v\u00e4lkomnande och spelar en nyckelroll f\u00f6r att skapa varum\u00e4rkesk\u00e4nnedom och etablera f\u00f6rtroende och lojalitet.<\/p>\n
Logotypen kan representera f\u00f6retaget p\u00e5 en m\u00e4ngd olika plattformar: sociala medier och e-postsignaturer, f\u00f6r att n\u00e4mna n\u00e5gra.<\/p>\n
F\u00f6ljaktligen m\u00e5ste den placeras korrekt i rubriken p\u00e5 webbplatsen.<\/p>\n
Som ett exempel stillasittare 4<\/a> Logotypen m\u00e4ter 166 x 60 pixlar, \u00e4r l\u00e4ngst till v\u00e4nster och det finns gott om plats f\u00f6r navigeringsl\u00e4nkar.<\/p>\n Att placera och dimensionera din logotyp kan vara en balansg\u00e5ng. Om logotypen \u00e4r stor kan teckenstorleken p\u00e5 navigeringsl\u00e4nkarna beh\u00f6va ut\u00f6kas s\u00e5 att de inte “f\u00f6rsvinner i rymden” och samtidigt inte verkar r\u00f6riga.<\/p>\n Detta kan g\u00e4lla alla webbplatser som har en stor m\u00e4ngd inneh\u00e5ll. F\u00f6r att f\u00f6rhindra att bes\u00f6kare m\u00e5ste l\u00e4sa inneh\u00e5llet som om de l\u00e4ser det i en bok, b\u00f6r inneh\u00e5llet delas in i hanterbara sektioner \u00e5tskilda av ett omd\u00f6mesgillt anv\u00e4ndande av blanksteg.<\/p>\n En klibbig rubrik kan g\u00f6ra det l\u00e4ttare f\u00f6r l\u00e4saren att rulla till toppen av sidan.<\/p>\n Att anv\u00e4nda en sticky header kan vara \u00e4nnu viktigare n\u00e4r inneh\u00e5ll visas p\u00e5 en smartphone.<\/p>\n BePizza5<\/a> ger ett utm\u00e4rkt exempel p\u00e5 hur man effektivt anv\u00e4nder en sticky header.<\/p>\n N\u00e4r bes\u00f6karen rullar ned\u00e5t p\u00e5 sidan krymper det distinkta navigeringsf\u00e4ltet; den \u00e4r dock fortfarande l\u00e4sbar och anv\u00e4ndbar.<\/p>\n Ett alternativt tillv\u00e4gag\u00e5ngss\u00e4tt, som illustreras i Stuga 2 f\u00e4rdigbyggd tomt<\/a>anv\u00e4nder en fast v\u00e4nsterjusterad navigering.<\/p>\n Logotypen \u00e4r fortfarande v\u00e4lplacerad och st\u00f6r inte inneh\u00e5llet, liksom navigeringsl\u00e4nkarna, som fortfarande \u00e4r synliga.<\/p>\n N\u00e4r du surfar p\u00e5 en webbplats, eller n\u00e4stan vad som helst annat, \u00e4r det bra att veta var du \u00e4r. Inneh\u00e5llet p\u00e5 den bes\u00f6kta sidan skulle normalt ge en tydlig indikation, men s\u00e5 \u00e4r kanske inte alltid fallet.<\/p>\n En synlig navigeringsmark\u00f6r skulle kunna ge en referenspunkt som skulle hj\u00e4lpa bes\u00f6kare att veta var de \u00e4r och ta sig till n\u00e4sta plats de vill \u00e5ka till, som en karta i ett k\u00f6pcentrum som visar “”<\/p>\n Det finns flera s\u00e4tt att markera “Du \u00e4r h\u00e4r” p\u00e5 en webbplats. BeTheme erbjuder dig en m\u00e4ngd olika arbetss\u00e4tt. Ett s\u00e5dant tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r att \u00e4ndra textf\u00e4rgen p\u00e5 sidan som f\u00f6r n\u00e4rvarande bes\u00f6ks som i Jag vet e-bok 3<\/a> navigeringsexempel.<\/p>\n Eller s\u00e5 kan du v\u00e4lja att placera en f\u00e4rgad linje under den aktuella sidan.<\/p>\n F\u00f6r vissa m\u00e5lgrupper skulle en dj\u00e4rvare metod att markera den aktuella sidan vara l\u00e4mplig; som metoden som visas i F\u00e4rdigbyggd tomt f\u00f6r ett \u00e4ldreboende<\/a>.<\/p>\n F\u00f6r en webbplats som riktar sig till \u00e4ldre anv\u00e4ndare kan detta tillv\u00e4gag\u00e5ngss\u00e4tt vara vettigt.<\/p>\n Ikoner kan vara anv\u00e4ndbara webbdesignelement. De kan kombineras med text f\u00f6r att kommunicera inneb\u00f6rden av vissa punkter eller anv\u00e4ndas som frist\u00e5ende element.<\/p>\n Frist\u00e5ende ikoner b\u00f6r dock anv\u00e4ndas med f\u00f6rsiktighet, eftersom deras betydelse b\u00f6r vara uppenbar och det bara finns cirka tv\u00e5 dussin ikoner som omedelbart k\u00e4nns igen f\u00f6r de flesta, och endast ett f\u00e5tal av dem har n\u00e5got med navigering att g\u00f6ra.<\/p>\n Du kan hitta fyra ikoner som \u00e4r vettiga i BeDietShop f\u00f6rdesignad webbplats<\/a>:<\/p>\n De \u00e4r, l\u00e4ser fr\u00e5n v\u00e4nster till h\u00f6ger:<\/p>\n Det finns andra ikoner som du kommer att st\u00f6ta p\u00e5 d\u00e5 och d\u00e5, ett v\u00e4lbekant exempel \u00e4r en e-handelsvarukorg.<\/p>\n \u00c4ven om frist\u00e5ende ikoner kan vara anv\u00e4ndbara som navigeringsgenv\u00e4gar, vill du vara s\u00e4ker p\u00e5 att de flesta av dina webbplatsbes\u00f6kare vet vad de betyder och att anv\u00e4ndningen av dem kommer att g\u00f6ra navigeringen enklare snarare \u00e4n sv\u00e5rare.<\/p>\n St\u00f6rre webbplatser tar i allm\u00e4nhet mer tid att organisera, och n\u00e4r det v\u00e4l har uppn\u00e5tts b\u00f6r webbplatsnavigeringen \u00e5terspegla det systemet eller organisationen.<\/p>\n St\u00f6rre webbplatser, de som definieras som flersidiga webbplatser som har ett dussin eller fler l\u00e4nkar, kan dra nytta av att anv\u00e4nda megamenyer som grund f\u00f6r sin navigeringsdesign. N\u00e4r den \u00e4r v\u00e4lorganiserad kan en megameny vara extremt anv\u00e4ndbar och effektiv.<\/p>\n Organiseringen av en megameny f\u00f6ljer vanligtvis en kategoriseringsprocess som involverar anv\u00e4ndning av:<\/p>\n han B\u00e9theme Store<\/a> Megamenyn illustrerar detta organisatoriska tillv\u00e4gag\u00e5ngss\u00e4tt.<\/p>\n L\u00e4gg m\u00e4rke till hur l\u00e4tt det \u00e4r att bl\u00e4ddra i de olika kategorierna f\u00f6r att hitta en sida eller ett \u00e4mne av s\u00e4rskilt intresse.<\/p>\n Vissa webbplatser, eftersom de \u00e4r f\u00f6r stora eller inte s\u00e4rskilt v\u00e4lorganiserade, kanske inte \u00e4r bra kandidater f\u00f6r att anv\u00e4nda megamenyer. N\u00e4r s\u00e5 \u00e4r fallet fungerar vanligtvis filtrerings- och s\u00f6ktekniker, som fallet \u00e4r med BeClothingstore<\/a>.<\/p>\n Denna typ av “navigering” p\u00e5 webbplatsen tenderar att h\u00e5lla antalet tillg\u00e4ngliga alternativ f\u00f6r en bes\u00f6kare till ett hanterbart minimum.<\/p>\n Utan ett organiserat navigationssystem kan bes\u00f6karna beh\u00f6va spendera orimligt mycket tid p\u00e5 att f\u00f6rs\u00f6ka utnyttja din webbplats p\u00e5 b\u00e4sta s\u00e4tt. Ett av de v\u00e4rsta fallen kan vara att beh\u00f6va s\u00f6ka f\u00f6r att hitta en kundvagn!<\/p>\n En rad l\u00e4nkar \u00f6verst p\u00e5 sidan \u00e4r ofta till hj\u00e4lp, men det kanske inte alltid r\u00e4cker.<\/p>\n Det \u00e4r d\u00e4rf\u00f6r det \u00e4r s\u00e5 viktigt att du tar dig tid att designa din sajts navigering och g\u00f6r det med dina bes\u00f6kare i \u00e5tanke.<\/p>\n Ett enkelt s\u00e4tt att f\u00e5 praktisk, mycket anv\u00e4ndbar navigering ig\u00e5ng och spara mycket tid i processen \u00e4r att b\u00f6rja med en av BeThemes f\u00f6rbyggda sajter. De \u00e4r designade och byggda med hj\u00e4lp av de b\u00e4sta metoderna som n\u00e4mns ovan. Samtidigt \u00e4r de anpassningsbara, s\u00e5 att du kan blanda och matcha stilar f\u00f6r att skapa det navigationssystem som b\u00e4st passar dina behov.<\/p>\n Table of Contents<\/p>\nToggle<\/span><\/span>Tips #2 \u2013 Anv\u00e4nd en Sticky Header<\/span><\/h4>\n
<\/span>Tips #3: Markera sidan som bes\u00f6ks<\/span><\/h4>\n
<\/span>Tips #4: Anv\u00e4nd igenk\u00e4nnbara ikoner och endast igenk\u00e4nnbara ikoner<\/span><\/h4>\n
\n
<\/span>Tips #5: Organisera megamenyer s\u00e5 att de \u00e4r l\u00e4tta att l\u00e4sa och anv\u00e4nda<\/span><\/h4>\n
\n
<\/span>F\u00e5 navigeringen att fungera f\u00f6r dina bes\u00f6kare med BeTheme<\/span><\/h4>\n