En sak som en väldesignad navigeringsfunktion kommer att göra är att ge besökarna en överblick på hög nivå över vad de kan förvänta sig att hitta. Samtidigt kommer det att hjälpa besökarna att orientera sig så att de kan manövrera runt på webbplatsen snabbt och enkelt, inte gå vilse och agera snabbt när de tvingas göra det.
Smidig navigering är också bra för SEO.
Kort sagt, när du utformar webbplatsnavigeringselement bör besökarnas välbefinnande vara högsta prioritet.
I den här artikeln ska vi i detalj utforska fem bästa metoder att tänka på när du utformar element för webbnavigering. BeTheme-exempel har inkluderats så att du kan få en tydlig uppfattning om vad dessa bästa praxis innebär.
Hur man designar bra webbplatsnavigering, med exempel
Det är lätt att ta webbplatsnavigeringsfunktioner för givet. Hem, Om, Produkter, etc. visas högst upp på sidan, var och en med en lämplig länk som tar dig till den plats du hoppas att åka till.
Det kan inte bli enklare, och det är så vi vill ha det, men det måste utformas med omsorg. Det sista du vill att en besökare ska se är “” eller något liknande.
Här är fem tips som du bör känna till och följa.
Tips #1: Få logotypen att sticka ut
Logotypen fungerar som ett företags digitala ansikte utåt. Det kan ses som välkomnande och spelar en nyckelroll för att skapa varumärkeskännedom och etablera förtroende och lojalitet.
Logotypen kan representera företaget på en mängd olika plattformar: sociala medier och e-postsignaturer, för att nämna några.
Följaktligen måste den placeras korrekt i rubriken på webbplatsen.
- Länk: Logotypen måste vara länkad till hemsidan. Det bör i allmänhet placeras i det övre vänstra hörnet eftersom det är där folk tenderar att leta efter det, enligt en studie utförd av NNG.
- Placering: Att placera logotypen i mitten kan vara ett acceptabelt alternativ, där Hem-länken placeras längst till vänster. han BeBaker 3 fördesignad webbplats illustrerar ett exempel på detta.
- Storlek: Logotypen ska vara tillräckligt stor så att detaljerna är lätta att se eller läsa. 250 x 100 pixlar och 160 x 160 pixlar är idealiska storlekar för rektangulära respektive fyrkantiga logotyper. Kontrollera att navigeringslänkarna i rubriken inte är röriga.
Som ett exempel stillasittare 4 Logotypen mäter 166 x 60 pixlar, är längst till vänster och det finns gott om plats för navigeringslänkar.
Att placera och dimensionera din logotyp kan vara en balansgång. Om logotypen är stor kan teckenstorleken på navigeringslänkarna behöva utökas så att de inte “försvinner i rymden” och samtidigt inte verkar röriga.
Tips #2 – Använd en Sticky Header
Detta kan gälla alla webbplatser som har en stor mängd innehåll. För att förhindra att besökare måste läsa innehållet som om de läser det i en bok, bör innehållet delas in i hanterbara sektioner åtskilda av ett omdömesgillt användande av blanksteg.
En klibbig rubrik kan göra det lättare för läsaren att rulla till toppen av sidan.
Att använda en sticky header kan vara ännu viktigare när innehåll visas på en smartphone.
BePizza5 ger ett utmärkt exempel på hur man effektivt använder en sticky header.
När besökaren rullar nedåt på sidan krymper det distinkta navigeringsfältet; den är dock fortfarande läsbar och användbar.
Ett alternativt tillvägagångssätt, som illustreras i Stuga 2 färdigbyggd tomtanvänder en fast vänsterjusterad navigering.
Logotypen är fortfarande välplacerad och stör inte innehållet, liksom navigeringslänkarna, som fortfarande är synliga.
Tips #3: Markera sidan som besöks
När du surfar på en webbplats, eller nästan vad som helst annat, är det bra att veta var du är. Innehållet på den besökta sidan skulle normalt ge en tydlig indikation, men så är kanske inte alltid fallet.
En synlig navigeringsmarkör skulle kunna ge en referenspunkt som skulle hjälpa besökare att veta var de är och ta sig till nästa plats de vill åka till, som en karta i ett köpcentrum som visar “”
Det finns flera sätt att markera “Du är här” på en webbplats. BeTheme erbjuder dig en mängd olika arbetssätt. Ett sådant tillvägagångssätt är att ändra textfärgen på sidan som för närvarande besöks som i Jag vet e-bok 3 navigeringsexempel.
Eller så kan du välja att placera en färgad linje under den aktuella sidan.
För vissa målgrupper skulle en djärvare metod att markera den aktuella sidan vara lämplig; som metoden som visas i Färdigbyggd tomt för ett äldreboende.
För en webbplats som riktar sig till äldre användare kan detta tillvägagångssätt vara vettigt.
Tips #4: Använd igenkännbara ikoner och endast igenkännbara ikoner
Ikoner kan vara användbara webbdesignelement. De kan kombineras med text för att kommunicera innebörden av vissa punkter eller användas som fristående element.
Fristående ikoner bör dock användas med försiktighet, eftersom deras betydelse bör vara uppenbar och det bara finns cirka två dussin ikoner som omedelbart känns igen för de flesta, och endast ett fåtal av dem har något med navigering att göra.
Du kan hitta fyra ikoner som är vettiga i BeDietShop fördesignad webbplats:
De är, läser från vänster till höger:
- Användarprofil för kontoinställning.
- Hjärta för likes eller favoriter.
- Shoppingväska för vagn/väska sida.
- Sök förstoringsglas.
Det finns andra ikoner som du kommer att stöta på då och då, ett välbekant exempel är en e-handelsvarukorg.
Även om fristående ikoner kan vara användbara som navigeringsgenvägar, vill du vara säker på att de flesta av dina webbplatsbesökare vet vad de betyder och att användningen av dem kommer att göra navigeringen enklare snarare än svårare.
Tips #5: Organisera megamenyer så att de är lätta att läsa och använda
Större webbplatser tar i allmänhet mer tid att organisera, och när det väl har uppnåtts bör webbplatsnavigeringen återspegla det systemet eller organisationen.
Större webbplatser, de som definieras som flersidiga webbplatser som har ett dussin eller fler länkar, kan dra nytta av att använda megamenyer som grund för sin navigeringsdesign. När den är välorganiserad kan en megameny vara extremt användbar och effektiv.
Organiseringen av en megameny följer vanligtvis en kategoriseringsprocess som involverar användning av:
- Rubriker i fetstil.
- Kolumner för relaterade sidor.
- Bilder för att markera viktiga sidor.
han Bétheme Store Megamenyn illustrerar detta organisatoriska tillvägagångssätt.
Lägg märke till hur lätt det är att bläddra i de olika kategorierna för att hitta en sida eller ett ämne av särskilt intresse.
Vissa webbplatser, eftersom de är för stora eller inte särskilt välorganiserade, kanske inte är bra kandidater för att använda megamenyer. När så är fallet fungerar vanligtvis filtrerings- och söktekniker, som fallet är med BeClothingstore.
Denna typ av “navigering” på webbplatsen tenderar att hålla antalet tillgängliga alternativ för en besökare till ett hanterbart minimum.
Få navigeringen att fungera för dina besökare med BeTheme
Utan ett organiserat navigationssystem kan besökarna behöva spendera orimligt mycket tid på att försöka utnyttja din webbplats på bästa sätt. Ett av de värsta fallen kan vara att behöva söka för att hitta en kundvagn!
En rad länkar överst på sidan är ofta till hjälp, men det kanske inte alltid räcker.
Det är därför det är så viktigt att du tar dig tid att designa din sajts navigering och gör det med dina besökare i åtanke.
Ett enkelt sätt att få praktisk, mycket användbar navigering igång och spara mycket tid i processen är att börja med en av BeThemes förbyggda sajter. De är designade och byggda med hjälp av de bästa metoderna som nämns ovan. Samtidigt är de anpassningsbara, så att du kan blanda och matcha stilar för att skapa det navigationssystem som bäst passar dina behov.
