Webbplatsnavigering är en sak som ofta hamnar i skuggan av skapandet av sidor och innehåll. I en nyligen genomförd undersökning kunde endast 50 % av internetanvändarna förutsäga var relevant innehåll skulle vara i en standardnavigerings-struktur för webbplatser.

website navigation research
Var hittar man svar på specifika frågor

Det är ett otroligt stort UX-problem, om hälften av dina besökare inte kan hitta den sida de söker.

Detta kommer att leda till högre avvisningsfrekvens, lägre tid på webbplatsen, och lägre konverteringsfrekvens.

Om du hanterar en e-handelsbutik, kan dålig navigering även påverka dina intäkter.

I det här inlägget går jag igenom webbplatsnavigering från A till Ö. Det innebär att du lär dig bästa praxis, olika typer av navigering och exakt vad du bör göra för att skapa den perfekta navigeringen för webbplatsen.

Vi kör igång!

Vad är webbplatsnavigering?

Webbplatsnavigering är processen för att navigera på sidor, appar och webbplatser på internet. Tekniken bakom detta kallas hypertext eller hypermedia.

Hypertext eller media är textbaserade webbsidor som använder hyperlänkar för att ansluta dem till andra sidor på internet. En hyperlänk är en länk som leder din webbläsare till en webbadress.

Webbadressen anger vilken fil som webbläsaren ska komma åt från servern och hämtar och återger data så att användaren kan se den.

Interna länkar leder till olika sidor på samma domän. Externa länkar leder till olika sidor på en annan domän, en helt separat webbplats och server.

Webbplatsnavigering använder menyer med interna länkar som gör det enkelt för besökare att hitta den sida som de söker. Bra navigering är en väsentlig del av en användarvänlig webbplats.

Vad är en navigeringsmeny på webbplatsen?

En navigeringsmeny på webbplatsen är en uppsättning länkar, vanligtvis till interna sidor, som är organiserade i en meny. De flesta webbplatser, inklusive vår egen, har en meny högst upp på hemsidan.

website navigation menu header example
Kinsta´s sidhuvudsmeny

Denna sektion kallas ”header” på en webbplats i webbdesign och utveckling. Några av de vanligaste sidorna som är länkade till dessa menyer är:

  • Om oss.
  • Blogg.
  • Kontakta.
  • Funktioner.
  • Planer/Prissättning.

Menyn kan naturligtvis även innehålla länkar till andra sidor.

Vad är en webbplats navigeringsstruktur?

Navigeringsstrukturen på en webbplats beskriver hur olika sidor på webbplatsen är organiserade och anslutna till varandra.

Vissa sidor och visst innehåll kan exempelvis endast nås genom att man besöker en viss sida. Designers och webbutvecklare planerar ofta navigeringsstrukturen när de skapar en ny webbplats.

website navigation structure example
Navigeringsstruktur för webbplatsen

I det här exemplet länkas det till sidorna Om, Planer, Kontakt och Blogg från hemmenyn. För att komma åt uppdrags– och Team-sidorna måste du besöka Om-sidan först.

Varför är navigering viktigt på en webbplats?

I det här inläggets introduktion, fick du lära dig att 50% av Internet-användare inte kan använda en standardmeny korrekt. Tänk hur få människor som skulle hitta rätt innehåll utan nån navigering.

Med rätt justeringar av navigering och menyer kan du få ner detta till under 50%. Det kommer att minska din avvisningsfrekvens, öka genomsnittlig tid på webbplatsen, och leda till mer trafik, leads, och kunder.

Olika typer av webbnavigering

Det finns tre huvudsakliga typer av webbplatsnavigering, nämligen:

När de kombineras på rätt sätt, kan de hjälpa dina besökare att navigera på din webbplats och hitta sin destination utan problem. Låt oss titta närmare på var och en.

1. Global webbplatsnavigering

Med global webbplatsnavigering är menyn och länkarna identiska på alla sidor på webbplatsen. Många moderna menyer är utformade på detta sätt, inklusive menyn på vår alldeles egna webbplats här på Kinsta: om du bläddrar neråt på sidan, ”följer” menyn med dig.

website global navigation menu
Kinsta´s globala sidhuvudmeny

I skärmbilden kan du se vår enkla och lättförståeliga header-meny. Den ser likadan ut på alla våra sidor och leder till några av våra viktigaste sidor och innehåll.

Vi vet vilken avgörande information som en presumtiv kund vill ha om en hosting-leverantör innan ett beslut. Vi har därför gjort det enkelt för potentiella kunder att hitta våra planer, funktioner och kontakta oss. Och existerande användare kan logga in på MyKinsta´s instrumentpanel.

Vår sidfotsmeny är också global och belyser väsentliga delar av vår hemsida och en del presenterat innehåll.

website navigation: Footer menu
Sidfots-meny

Globala menyer är standard för de flesta CMS-lösningar.

Varje WordPress-tema låter dig skapa olika typer och områden för navigeringsmenyer. Om du behöver mer, kan du använda ett meny-plugin för ännu fler alternativ.

2. Hierarkisk webbplatsnavigering

Hierarkisk navigering innebär att menyerna ändras beroende på varje sidas kontext.

De flesta tidningar och innehållsbaserade webbplatser har hierarkisk navigering. Om du exempelvis besöker den översta sidan i en tidning, kommer du vanligtvis att se länkar till de översta nyhetskategorierna i huvudmenyn.

Example of hierarchical navigation from the NYT
Exempel på hierarkisk navigering från NYT

Om menyn var global skulle den förbli densamma efter att du klickat till en annan kategori. Men eftersom den är hierarkisk avslöjar den nya länkar som leder till underkategorier av den kategorisida som vi besöker.

website navigation: hierarchical navigation example
Exempel på hierarkisk navigering

På New York Times vetenskaps-sida ser du inte menyn på den översta nivån överhuvudtaget. Du ser istället länkar till olika under-sektioner av vetenskaplig forskning och artiklar.

Detta skiljer denna meny från en vanlig global meny som du hittar på de flesta mindre webbplatser.

3. Lokal webbplatsnavigering

I motsats till både hierarkisk och global navigering hänvisar lokal webbplatsnavigering till interna länkar som ingår i själva innehållet. Vanligtvis ges användaren alternativ på samma hierarkiska nivå eller en nivå djupare, eller ser länkar som leder till andra relevanta sidor.

Ett bra exempel är nyhetswebbplatser, som ofta använder länkar för att hjälpa läsarna att utforska djupare sammanhang av en viss artikel. Om de nämner en incident som de har skrivit om tidigare, kommer de att länka till den artikeln, istället för att förklara den på djupet.

Website navigation: local navigation
Exempel på relaterat innehåll som har länkats på en sida

Men detta är inte endast reserverat för tidskrifter och nyhetswebbplatser. E-handelsbutiker är starkt beroende av denna typ av navigeringsmeny för att visa upp produkter i samma kategori.

Website navigation: ecommerce
Exempel på lokal navigering i e-handel

Intern länkning är även en avgörande aspekt när det gäller SEO i allmänhet, och mer specifikt WordPress SEO. Det är numera standardpraxis för alla som hanterar en webbplats.

Exempel på webbplatsnavigering

Istället för att endast prata teori, ska vi göra en djupdykning i några exempel. Jag kommer att gå igenom en nyhetswebbplats och WordPress-temat Twenty Twenty.

Nyhetswebbplats: New York Times

website navigation example from NYT
NYT hemside-meny

När man tittar lite snabbt, kan det se ut som att New York Times huvudsakligen använder en enda, global rubrikmeny för sina kategorier.

Men detta är inte hela sanningen. NYT använder alla typer av navigering över sina hundratals kategorisidor och miljontals artiklar.

Typer av navigering som används:

  • Hierarkisk.
  • Global.
  • Lokal.

Låt oss ta en titt på de olika rubriknavigeringarna för varje sida.

Hemsida

I rubrikdelen på webbplatsen, finns det två menyer, en utbyggbar global meny ovanför logotypen och en hierarkisk meny under rubriken. Det fungerar i huvudsak som en rubrik och underrubriks-meny.

NYT's website navigation
NYT hemsida – rubriks-menyer

Om du expanderar rubrikens hamburgermeny, förvandlas den till en sidomeny på vänster sida, där det finns en bred marginal med de flesta moderna lösningarna.

Inget innehåll på hemsidan blir oskarpt / har ett överlägg.

Hemsida (Mobil)

Låt oss undersöka samma rubriksavsnitt på mobilen. Majoriteten av internet-användare nyttjar nyhetswebbplatser via sina smartphones, så den mobila upplevelsen kan vara viktigare än den stationära.

Website navigation of NYT homepage (mobile)
NYT hemsida – mobile

Underrubriks-menyn för nyhetskategorier är inte en del av hemsidan i mobilen. Där finns endast det utbyggbara alternativet tillgängligt.

När det utvidgas blir det en helskärmsmeny med allt innehåll på startsidan.

Website navigation of NYT homepage (mobile)
Utökad meny – NYT hemsida (mobil)

Den innehåller alla alternativ från huvudmenyn på stationära datorer och länkarna är prydligt organiserade efter kategori.

Kategorisida

På kategorisidan, under huvudrubrikens hamburgermeny, ser du en länk till ytterligare en delmängd av kategorier.

website navigation examples from the NYT
NYT vetenskapssida – huvudmenyn

Detta gör det lättare att hitta artiklar för människor som endast är intresserade av ett visst område inom det bredare ämnet. De kan helt enkelt hitta artiklar som är i linje med deras intressen.

Kategorisida (Mobile)

På mobilen innehåller dessa kategorisidor samma hamburgermeny och struktur som dator-versionen. Den sekundära sidhuvudmenyn är inte dold överhuvudtaget, allt för att göra navigering och innehållsidentifiering enklare.

website navigation examples from NYT
NYT vetenskapssida – huvudmenyn (mobil)

En annan orsak kan vara att många mobila upplevelser börjar via sökning eller sociala medier, snarare än att man direkt besöker NYT´s hemsida.

Enstaka artikel

För enstaka artiklar visar det flytande sidhuvudet den sektion som du för närvarande befinner dig i, men har endast den expanderbara globala menyn (tillsammans med sökrutan).

website navigation examples form NYT
NYT-artikel – rubrikmenyn

Enstaka artikel (Mobil)

På mobilen hålls navigeringen ren eftersom den enda menyn är huvudrubrikens hamburgermeny.

website navigation examples
NYT-artikel – huvudmenyn (mobil)

Sidfot

NYT´s sidfotsmeny är densamma över hemsidan, kategorisidorna, och de enstaka artiklarna.

Website navigation - NYT
NYT-artikel – sidfotsmenyn

Sidfot (Mobile)

website navigation examples form NYT
NYT-artikel – sidfotsmeny (mobil)

På mobilen visar sidfotsmenyn endast fem menyalternativ, som alla expanderar till undersektioner när de har klickats på.

Om du exempelvis klickar på sektionen Konst kan du bläddra igenom dessa undersektioner:

website navigation examples form NYT
NYT artikel – utvidgad sidfotsmeny(mobil)

Eftersom webbplatsen använder JavaScript för att dynamiskt ladda mer innehåll när du scrollar ner, kan det verka som att sidfoten inte existerar alls.

Detta är ett snyggt trick som kan hjälpa till med att hålla kvar besökare på webbplatsen och få läsarna att läsa fler artiklar. Det gör dock även hemsidan lite svårare att navigera på.

Innehållslayout

Vissa skulle kunna hävda att det inte endast är menyn som är det primära navigeringsverktyget för nyhetswebbplatser och bloggar. Det är själva tidnings- layouten som skapar navigationsstamnätet för NYT och andra liknande webbplatser.

NYT's content layout
NYT´s hemsida

Alla markerade element är klickbara och leder till olika interna sidor inom New York Times webbplats.

Innehållslayout är ett annat centralt inslag i webbplatsnavigeringen som de implementerar på startsidan och i kategorisidorna.

WordPress-temat Twenty Twenty

Varje år är det ett nytt standardmässigt WordPress-tema som gäller. Den här gången är det Twenty Twenty, och vi ska göra en djupdykning för att se vad som har förändrats med navigeringen.

Jag kommer att undersöka om utvecklarna har gjort något annorlunda med menyer och interna länkar i denna nyaste instans av WordPress.

Sidhuvud-menyn

Precis som hos alla standardmässiga WordPress-teman, har den nya officiella utgåvan en väldigt enkel meny i rubriksektionen. Du kan välja olika visningsplatser och så här ser alternativet Vågrät meny ut:

Website navigation examples
Exempel på rubrikmeny i temat Twenty twenty

Å andra sidan kommer alternativet Expanderad meny att lägga till möjligheten att utöka dina meny-länkar i en justerad ruta på den övre högra sidan.

Example of header menu in Twenty Twenty theme
Exempel på expanderad sidhuvudmeny i temat Twenty Twenty

Det huvudsakliga innehållsområdet är tonat med mörkgrått, vilket driver användarens fokus till menyn på länkarna.

Sidfot

Website navigation examples
Exempel på sidfotsmeny i temat Twenty Twenty

I sidfoten finns det inga länkar för intern navigering, förutom en enkel ”Till toppen”-länk som tar dig tillbaka till toppen av sidan.

Vad skapar en bra webbplatsnavigering?

Bra webbplatsnavigering är alltid utformad med användaren i åtanke. Den använder ett tydligt, lättförståeligt språk och länkar till de viktigaste sidorna.

Den använder sig av gott om blankrum, färgförändringar eller andra designtekniker för att tydligt skilja sig från huvudinnehållet. Dessutom är den lättare att läsa och använda på alla enheter (mobila och stationära).

Användarfokuserad navigering innebär även att den är kontextuell. Den tar användarens upplevelse och förväntningar i beaktande. Detta kan vara en anledning till att nättidningar fortfarande inte kan komma bort från sin ”trånga” design.

När det gäller att läsa en tidning, är detta vad deras användare och potentiella kunder förväntar sig, vilket inkluderar deras mycket omfattande menyer av kategorier och underkategorier.

I nästa avsnitt kommer jag att gå igenom grunderna för hur man skapar bra navigering för sin webbplats.

8 Principer för förbättrad webbplatsnavigering

Även om du är en komplett nybörjare, kommer du att kunna få till en bra navigering för din webbplats genom att följa tipsen nedan.

1. Planera din sidas struktur och navigering

Innan du överhuvudtaget börjar skriva innehåll för din webbplats, ska du planera hur din sidas struktur och navigering kommer att se ut.

Planering är en väsentlig del av processen när det gäller att ge dina besökare en tillfredsställande navigering. Du kan använda en skapare av webbplatskartor för att snabbt skapa prototyper för hur du vill att användarupplevelsen ska vara.

Ett exempel på ett bra verktyg för webbplatskartor är GlooMaps.

GlooMaps
GlooMaps

Du kan skapa så många dokument som du behöver helt kostnadsfritt. Vart och ett kommer att ha en unik webbadress som du sedan kan dela för att samla in feedback och låta andra redigera. När din webbadress har skapats blir den tillgänglig i 14 dagar om inte den har besökts på nytt. Varje nytt besök förlänger länklivet i ytterligare 14 dagar.

GlooMaps är inte det enda verktyg som du kan använda, det finns många fler som exempelvis Octopus, VisualSitemaps, Creately, bara för att nämna några.

2. Följ fastställda standarder

Försök inte uppfinna hjulet på nytt. Webbplatsnavigering handlar mer om användbarhet än kreativitet.

Följ kända standarder när det gäller väsentliga designelement som exempelvis var du ska placera din meny, och hur du anger att den är utbyggbar.

Tre horisontella ränder, eller ”hamburgar” ☰ tecken, är en av de mest igenkända ikonerna för att identifiera en expanderbar meny. Den andra är de tre punkterna som skapar en vågrät linje.

Om du försöker att bli kreativ och utveckla en anpassad ikon, finns risken att många besökare inte kommer att förstå syftet med din design och har problem med att hitta i din meny.

3. Nyttja dina användares ordförråd

Undvik att bara länka till samma gamla sidor och använda en standardmässig webbutvecklar-jargong, eller ett alltför kreativt språk. Använd istället ett språk som är mer likt dina användares.

Detta tillvägagångssätt är fördelaktigt för både SEO och användbarhet. Skapa sidor som speglar det som användarna söker efter online.

Du kan sedan länka till samma sidor genom att använda samma ord och fraser som hjälper användarna att hitta din webbplats på Google.

4. Använd responsiva menyer

Eftersom över 52% av all online-trafik nu sker via mobilen, har responsiv/mobilanpassad design blivit ett absolut måste.

I stället för menyer som fortsätter ut ur ramen i den mobila webbläsaren eller blir för röriga, ska du se till att du implementerar expanderbara mobila menyer.

Detta har blivit en branschstandard av en anledning. Vågräta menyer med pytteliten text är svåra att läsa, klicka på och använda korrekt på mobilen.

Den goda nyheten är att alla förstklassiga WordPress-teman kommer med responsiv design och responsiva menyer som standard. Såvida du inte designar din WordPress-webbplats från grunden, kan WordPress hjälpa dig med detta.

5. Dra nytta av din sidfotsmeny

Läsare som fortsätter att läsa och bläddra till botten av din webbplats är mer engagerade än den genomsnittliga användaren. Dra nytta av detta och använd utrymmet längst ned på varje sida för att markera värdefullt innehåll.

Eftersom sidfoten inte äter upp utrymmet ”ovanför luckan”, kan du bli väldigt detaljerad och inkludera flera kategorier, och även belysa viktiga sidor, eller artiklar.

Som ett exempel, kan du titta på hur vi hanterar vår sidfot på just denna sida. Vi täcker väsentliga funktionssidor, vårt företag, våra resurser och mycket mer.

Sidfoten tillåter dig att belysa innehållet som du ”helt enkelt inte rymdes” i ditt sidhuvud.

6. Använd färg och blankt utrymme för att separera navigering från andra element

Använd färg, teckensnitt och blanktecken för att separera dina menyer från ditt huvudinnehåll och dina sidofält. Tydliggör var navigeringen startar och slutar.

Det spelar ingen roll vilket språk du använder i dina menyer, eller vilka sidor du länkar till om dina webbplatsbesökare inte ens kan hitta menyn.

7. Undvik rullgardins-menyer

För de flesta webbplatser (inte alla), är rullgardins-menyer inte nödvändiga eller användbara. När användarna ser en länk i en meny kommer de anta att den är klickbar. Om designen inte skiljer den från klickbara länkar, kan detta leda till förvirring.

Att ha för många länkar i din huvudmeny kan också påverka användbarheten av din webbplats negativt.

Implementering av hierarkisk och lokal navigering i stället för rullgardins-menyer kan leda till smidigare användarflöde. Detta gör det även möjligt för användare att interagera med flera sidor och spendera mer tid på din webbplats, istället för att bläddra igenom en gigantisk lista med länkar.

8. Platta till din struktur

Om du vill göra det så enkelt som möjligt för besökare att utforska alla sidor på din webbplats, ska du upprätthålla en så platt navigeringsstruktur som möjligt.

I stället för att länka till en handfull sidor från startsidan, och sedan expandera med allt fler undersidor och kategorier, ska du hålla det enkelt.

Se till att länka till betydande kategorier från din hemsida, och länka till ett enda lager av underkategorier eller enstaka artiklar därifrån.

flat structure example
Platt webbplatsstruktur

Det finns bevis för för att tillplattning av strukturen på detta sätt har en positiv inverkan på SEO och kan leda till Google´s webbplatslänkar. Så låt inte din webbplatsstruktur blir för rörig!

Meny-trender för webbplatsnavigering år 2024

De bredare webbdesigntrenderna under de senaste åren inkluderar saker som 3D-designelement och införlivandet av skräddarsydda fotografier i kreativ design. Men menyerna hade trots detta inte ett speciellt spännande år.

Det betyder dock inte att ingenting har förändrats. Här är en snabbtitt på meny-trender under de senaste åren.

Expanderbara kategorier i helskärmsbaserade mobil-menyer

Uber - menu mobile
Uber – meny för mobil

Uber och andra jätteföretag med uppfräschad, modern design, har uppdaterat sina menyer för att bli mer användbara.

Ett problem för dessa företag är att de har så många olika produkter och kategorier att det kan vara omöjligt att ta med dem i en enda meny på ett snyggt sätt.

Detta leder till tydliga, kategoriserade och utbyggbara mobila menyer, istället för en oändlig lista med länkar.

Flytande sidhuvuds-menyer

Den universella trenden för menyer under de senaste åren är flytande sidhuvuds-menyer.

En flytande sidhuvuds-meny är en meny som fastnar längst upp i ditt webbläsarfönster när du scrollar ner på sidan (som den vi använder för kinsta.com). Detta är vanligtvis en del av ett rubrikavsnitt som innehåller en liten logotyp och kanske även ett sökfält.

Det är svårt att ha nån invändning mot detta, eftersom en ständig tillgång till en meny gör intern navigering så mycket enklare. Denna typ av meny ingår i många WordPress-teman och trenden visar inga tecken på att ändras.

Överliggande rullgardins-menyer på skrivbordet

Ett av de mest grundläggande tipsen när det gäller webbplatsnavigering är att hålla sig borta från rullgardins-menyer. Det finns en anledning till detta.

Men det betyder inte att de enbart är fruktansvärda. Rullgardins-menyer är bara lite knepiga att implementera på en datorskärm.

Med en färgöverlagring på huvudinnehållet kan de leda 100% av användarens uppmärksamhet till menyn. Du har även bättre alternativ för utbyggbara kategorier än att visa ytterligare länkar under ett hovrande.

Dessa faktorer har gått samman för att göra detta till en växande trend under 2019. Faktum är att många innovativa webbplatser och mallar inkluderar överliggande rullgardins-menyer på skrivbordet.

Sammanfattning

Detta inlägg borde ha gett dig en klar förståelse om vad webbplatsnavigering är och några av dess viktigaste punkter.

Webbplatsnavigering bör alltid vara inriktad på enkelhet och tydlighet, snarare än på intensiva färger och kreativ design. Eftersom webbplatsens navigering och menyer måste ta hänsyn både till stationära och mobila användare, kan saker och ting bli lite krångliga. Det kan med andra ord vara klokt att anlita en webbutvecklare.

Försök alltid att följa bästa praxis för designen av webbsidans meny för att säkerställa att dina besökare och sökmotorerna enkelt kan bläddra igenom ditt innehåll.

Användbarhet och tydlighet kommer alltid att vara viktigt. Så om du kan lära dig dina användares språk och skapa en struktur som är vettig för dem, kommer du att kunna framtidssäkra dina menyer.

Matteo Duò Kinsta

Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.