Webbplatsstruktur: 7 visuella exempel som illustrerar webbplatsens struktur för designers

Strukturen på din webbplats avgör hur lätt det är för användarna att navigera på din webbplats och hitta den information de söker. I den här artikeln förklaras varför webbplatsstrukturen är viktig för designers och hur designers kan skapa effektiva webbplatsstrukturer.

Vad är webbplatsstruktur?

Din webbplatsstruktur är hur de olika sidorna på din webbplats är sammankopplade och deras hierarki. Det är hur informationen på din webbplats är organiserad och presenterad. En bra webbplatsstruktur underlättar enkel navigering för både användare och crawlers, vilket förbättrar din webbplats SEO-ranking.

Varför är webbplatsstrukturen viktig för designers?

En designers roll är att skapa en webbplats som har en bra UX och är lätt att använda. En bra webbplatsstruktur förbättrar användbarheten eller användarvänligheten på din webbplats genom att göra det lätt för användarna att hitta det de letar efter. För att skapa en webbplatsstruktur måste du kartlägga hur du ska organisera innehållet på din webbplats (hemsida, kategorier, enskilda sidor, blogginlägg).

Det är därför som strukturering av webbplatsen bör vara det första steget i varje webbdesignprojekt.

Hur du väljer den bästa strukturen för din webbplats

Den underliggande principen för en bra webbplatsstruktur är informationsarkitektur (IA). IA ser till att innehållet organiseras, struktureras och märks på ett effektivt och konsekvent sätt. För att du ska kunna skapa den bästa informationsarkitekturen för din webbplats måste du ta hänsyn till följande faktorer:

• Användarresan: Eftersom webbplatser skapas för att betjäna användare är det viktigt att ta hänsyn till hur de kan uppleva eller interagera med din webbplats och deras förväntningar på hur din webbplats ska fungera. Du kan fastställa dina användares resa genom att intervjua dem eller genom att göra en sortering av kort.
• Innehåll: Webbplatsens struktur bestäms också till stor del av typen och volymen av innehåll på webbplatsen. Strukturen för en webbplats för e-handel skiljer sig från strukturen för en akademisk webbplats.
• Kontext: Kontexten för en webbplats bestäms av dess affärsmål, den kulturella kontext som den existerar i och de resurser som finns tillgängliga. Det är viktigt att ta hänsyn till detta faktum när du strukturerar din webbplats.

Element för en bra webbplatsstruktur (plus visuella exempel)

Den vanligaste webbplatsstrukturen är en hierarkisk struktur som bygger på en överordnad sida (huvudsida) och underordnade sidor (kategorier och underkategorier) som utgår från huvudsidan.

Låt oss titta på var och en av dessa element och hur du kan optimera dem under designprocessen:

Hemsida

Hemsidan är den översta sidan i webbplatsens hierarki och den centrala platsen där användare navigerar din webbplats från. Se till att alla viktiga sidor på din webbplats är länkade från denna sida. Förhållandet mellan din startsida och de viktigaste kategorisidorna representeras av din webbplats meny eller huvudnavigering.

Här får du veta hur du utformar en användbar navigering/meny för din webbplats:

Navigation/meny

Dina webbplatsbesökare kommer att använda navigeringen för att förstå hur informationen är strukturerad på en webbplats och för att hitta det de letar efter. Se till att alla dina huvudkategorisidor finns representerade i din meny eller huvudnavigation. Använd dessutom följande regler när du skapar din navigering:

• Använd korta fraser eller till och med ett ord för varje element.
• Använd ett enkelt språk som dina användare kan förstå.
• Du får inte göra din navigering rörig.

Apples huvudnavigering följer dessa regler för att skapa en enkel men superanvändbar meny.

Om din webbplats har några underkategorier som är användbara för användarna, t.ex. deras kontoinformation, kan du skapa en sekundär vertikal meny som den som Asos har.

Andra användbara kategorier, t.ex. användbarhetssidor (sekretesspolicy, ansvarsfriskrivningar och juridisk information) kan placeras i sidfoten på webbplatsen.

Kategorier och underkategorier

Använd kategorier för att gruppera webbplatsens sidor som har liknande innehåll vilket gör det enkelt för användarna att komma åt innehållet. Blogginlägg kan grupperas i kategorier som ”marknadsföring” och sedan delas upp ytterligare i underkategorier som ”landningssidor” och ”e-postmarknadsföring.”

Om du utformar en webbplats för e-handel kan du gruppera dina produkter i kategorier som ”män” och ”kvinnor”. Om dina kategorier är för många kan du dela in dem ytterligare i underkategorier. Om vi fortsätter med vårt exempel på en e-handelsbutik kan kategorin kvinnor ha underkategorier som ”kläder”, ”skor” och ”handväskor”.

Ett bra exempel på detta är webbplatsen Asos Marketplace där deras klädkategori har en underkategori som visar vilka typer av kläder som finns tillgängliga på marknadsplatsen, t.ex. badkläder, tröjor, träningsoveraller och hoodies.

Individuella sidor/inlägg

Det är viktigt att strukturera de enskilda sidorna eller blogginläggen på din webbplats på ett sätt som gör det lätt för användarna att hitta det de söker, att hitta liknande innehåll och att förstå var de befinner sig på din webbplats. Brödsmulspår, taggar och kontextuella länkar används för att strukturera informationen på enskilda sidor.

Brödsmulspår

Du kan lägga till navigering på dina sidor eller inlägg i form av ett brödsmulspår. En brödsmultronspår består av klickbara länkar som visar användarna exakt var de befinner sig på din webbplats plus din webbplatsstruktur. Breadcrumb trails som den som Mailchimp använder förbättrar användbarheten och användarupplevelsen.

Tags

Tags är ett annat användbart sätt att gruppera liknande innehåll på en specifik sida. Skillnaden mellan taggar och kategorier är att kategorier har en hierarki och kan delas in ytterligare i underkategorier, medan taggar inte har någon hierarki. De grupperar helt enkelt liknande innehåll.

Till exempel använder Grammarlys blogg taggar som ”how to”, ”product” och ”inspiration” för att gruppera blogginnehåll.

Nyttan av dessa taggar visas när en användare klickar på ett av inläggen som är taggat med ”how to” och de visas andra inlägg som också är taggade ”how to” i slutet av blogginlägget. Detta är ett utmärkt exempel på hur webbplatsens struktur gör det lätt för användarna att hitta information.

Taggar kan också användas på webbplatser för e-handel för att gruppera produkter efter märke och styra användarna till liknande produkter.

Här är de bästa metoderna för att skapa taggar:

• Skapa inte för många taggar eller en ny tagg för varje inlägg.
• Placera taggar på en plats där webbplatsens besökare lätt kan se dem, t.ex. i sidofältet eller i slutet av dina blogginlägg/produktsidor.

Kontextuella länkar

Detta är länkar på webbsidor eller blogginlägg som pekar på annat relevant innehåll på andra webbsidor. Kontextuella länkar är användbara för att visa användarna relaterat innehåll. I samband med ett blogginlägg kan kontextuella länkar användas för att hänvisa användare till andra blogginlägg med liknande innehåll. Grammarly gör detta i sitt blogginlägg som visas nedan.

Kontextuella länkar kan också användas på e-handelssidor för att länka till sidor med relaterade artiklar, vad andra personer har köpt eller vilka produkter som ofta köps tillsammans.

Integrera enkelt webbplatsstruktur i din design

Webbstruktur är hur information är organiserad och sammankopplad på en webbplats. En effektiv webbplatsstruktur förbättrar användbarheten och användarupplevelsen, vilket gör webbstrukturering till ett viktigt steg i webbdesignprocessen. UXPin-plattformen gör det enkelt för dig att designa, skapa prototyper och strukturera din webbplats samtidigt som du samarbetar med andra teammedlemmar och designers.