En genomtänkt struktur hjälper besökaren att hitta det den söker. Vi tittar på hur sidor, navigation och interna länkar hänger ihop.
Tänk på din webbplats som ett bibliotek
Föreställ dig att du går in på ett bibliotek för att hitta en bok om att odla tomater.
Du behöver inte veta exakt var boken står. Biblioteket är organiserat för att hjälpa dig. Det finns avdelningar med olika ämnen, hyllor som grupperar böckerna och ett register där du kan söka efter något särskilt.
Du förväntar dig inte att behöva gå igenom varenda bok för att hitta rätt.
En webbplats behöver fungera på ungefär samma sätt.
Det finns sidor med olika innehåll, adresser som hjälper oss att identifiera dem och länkar som hjälper besökaren att ta sig mellan dem.
Om du erbjuder flera tjänster vill besökaren förmodligen kunna se vilka de är och läsa mer om den som är intressant. Om du säljer produkter behöver det finnas sätt att hitta bland dem.
Du behöver inte berätta allt på startsidan. Däremot behöver startsidan hjälpa besökaren att upptäcka vad som finns och hitta vidare.
Det här är en viktig skillnad: Att organisera information handlar inte bara om var vi lägger den, utan också om hur vi hjälper människor att hitta den.
Tillbaka till grävmaskinerna
Vi har tidigare pratat om ett företag som både utför markarbeten och hyr ut grävmaskiner.
Föreställ dig att företaget har en startsida som berättar om verksamheten, en sida med genomförda projekt och en kontaktsida.
Men var hittar jag information om maskinuthyrningen? Och hur ser jag vilka typer av markarbeten företaget utför?
Kanske finns all information redan på webbplatsen, men utan någon tydlig struktur. Eller så har företaget inte skapat några egna sidor för sina viktigaste tjänster.
En möjlig struktur skulle kunna se ut så här:
Startsida
- Maskinuthyrning
- Grävmaskiner
- Hjullastare
- Markarbeten
- Schaktning
- Grundläggning
- Om oss
- Kontakt
Det här är en sitemap, alltså en karta över webbplatsens sidor.
En sitemap kan vara ett diagram med rutor och streck, en lista som den ovan eller en enkel skiss på ett papper.
Det viktiga är att du kan se vilka sidor som finns och hur du har organiserat dem.
Hård struktur och mjuk struktur
Här finns två begrepp som är användbara att känna till.
Den hårda strukturen handlar om sidorna och deras adresser.
En webbplats består av sidor med olika URL, alltså webbadresser. Om du arbetar med en tydlig struktur kan den exempelvis se ut så här:
- /
- /maskinuthyrning/
- /maskinuthyrning/gravmaskiner/
- /markarbeten/
- /markarbeten/schaktning/
- /kontakt/
Här kan vi se hur adresserna är organiserade. Vi har en sida om maskinuthyrning och under den en mer specifik sida om grävmaskiner.
Det är den här strukturen vi ska arbeta med i dagens övning.
Den mjuka strukturen handlar om hur vi länkar mellan sidorna.
Sidan om grävmaskiner kan exempelvis ha en länk i huvudmenyn. Den kan också finnas på startsidan, i en lista över maskiner och som ett relaterat erbjudande på en sida om markarbeten.
Det är fortfarande samma sida med samma webbadress. Men besökaren har flera sätt att hitta dit.
En viktig tjänst kan alltså ligga flera nivåer ner i URL-strukturen och samtidigt ha en framträdande plats i huvudmenyn.
Den hårda strukturen är en stabil grund. Den mjuka strukturen hjälper oss att skapa olika vägar genom innehållet.
Vi ska inte försöka rita alla dessa länkar i vår sitemap. Det skulle snabbt bli en ganska komplicerad karta. I dag koncentrerar vi oss på vilka sidor som finns och vilka adresser de har.
Vi återkommer till interna länkar längre fram i utbildningen.
En liten hemlighet från webbbranschen
Vi som arbetar professionellt med webbplatser har ritat sitemaps i alla tider.
Det är inte alltid den roligaste delen av jobbet. Det kan vara ganska tidskrävande att gå igenom innehåll, sortera sidor och fundera på hur allt ska organiseras.
Men det är också här man upptäcker saker som annars är lätta att missa.
Kanske har två sidor nästan samma innehåll. Kanske finns en viktig tjänst bara beskriven i ett stycke på startsidan. Eller så har webbplatsen vuxit med nya sidor under flera år utan att någon har tittat på helheten.
Att rita en sitemap är ett sätt att få syn på allt det här.
Och det fina är att du inte behöver vara designer eller utvecklare för att göra jobbet. Du behöver bara vara beredd att lägga lite tid på att förstå din webbplats.
Gör det lätt att känna igen sig
Vi har alla lärt oss en hel del om hur webbplatser fungerar genom att använda dem. När vi besöker en ny webbplats har vi därför vissa förväntningar på hur informationen är organiserad.
Om ett företag erbjuder flera tjänster förväntar vi oss ofta att kunna hitta dem under en gemensam rubrik, exempelvis Tjänster. Om företaget säljer produkter förväntar vi oss att kunna bläddra bland olika produktkategorier.
Det betyder inte att alla webbplatser ska se likadana ut eller organiseras på exakt samma sätt. Men det är ofta klokt att dra nytta av sådant besökaren redan känner igen.
Det är också därför vi ska jämföra din webbplats med en annan webbplats i dagens övning.
Du kanske upptäcker att konkurrenten har en avdelning som du saknar. Eller att du själv har en smartare lösning som du vill fortsätta utveckla.
Det handlar inte om att kopiera, utan om att förstå vilka förväntningar besökaren kan ha.
Ditt tredje pass: Rita din sitemap
Tid: cirka 30 minuter
Den här veckan ska du skapa en karta över din webbplats och använda den för att hitta en möjlig förbättring.
Du behöver bara papper och penna, eller ett digitalt verktyg där du kan rita rutor och streck.
Steg 1. Rita webbplatsen som den ser ut i dag – 10 minuter
Börja med startsidan högst upp på ett papper.
Gå sedan igenom webbplatsens viktigaste sidor och skriv upp deras adresser. Gruppera dem efter URL-strukturen. Sidor med adresser som /tjanster/markarbete/ och /tjanster/maskinuthyrning/ kan exempelvis placeras under /tjanster/.
Du behöver inte ta med varenda artikel eller produkt om du har en stor webbplats. Börja med de viktigaste avdelningarna och några representativa exempel.
Fundera på:
- Vilka huvudsidor finns?
- Vilka sidor ligger under andra i URL-strukturen?
- Finns det sidor som saknas eller som verkar svåra att placera?
Om dina URL är ganska platta, exempelvis /gravmaskiner/ och /markarbeten/, ska du rita dem så. Försök inte hitta på en hierarki som inte finns i adresserna.
Rita webbplatsen som den faktiskt är organiserad i dag, inte som du önskar att den såg ut.
Nu har du din första sitemap!
Steg 2. Jämför med en annan webbplats – 5 minuter
Välj en webbplats i samma eller en närliggande bransch. Gärna en konkurrent som erbjuder liknande tjänster eller produkter.
Titta på vilka sidor den har och hur de är organiserade. Du behöver inte rita en fullständig sitemap över konkurrentens webbplats.
Fundera på vilka sidor du själv skulle förvänta dig att hitta hos ett företag i den branschen.
Har konkurrenten en tydlig avdelning för tjänster? Presenteras olika erbjudanden på egna sidor? Finns det något i strukturen som gör det lättare att förstå vad företaget erbjuder?
Jämför med din egen karta. Det räcker att upptäcka en intressant skillnad.
Steg 3. Rita en förbättrad version – 10 minuter
Ta fram din sitemap igen.
Föreställ dig en ny besökare som vill hitta en viss tjänst eller produkt. Finns det en sida som beskriver den? Har sidan en naturlig plats i din struktur?
Kanske ser du en möjlighet att skapa en ny sida. Kanske finns det två sidor som skulle passa bättre tillsammans. Eller så upptäcker du att dina URL inte riktigt följer den struktur du vill ha.
Välj en förbättring och rita in den på kartan.
Men ändra inte befintliga webbadresser ännu.
Viktigt! Rita om först, bygg om sedan.
En sitemap är ett utmärkt verktyg för att planera förändringar, men att ändra adresser på en befintlig webbplats kräver lite eftertanke.
Om du exempelvis flyttar en sida från /gravmaskiner/ till /maskinuthyrning/gravmaskiner/ ändras sidans webbadress.
Det kan finnas länkar till den gamla adressen från andra webbplatser, från Google och från dina egna sidor. Om den gamla adressen slutar fungera riskerar besökare att mötas av ett felmeddelande, och din synlighet i sökmotorer kan påverkas.
När en sida får en ny permanent adress behöver den gamla normalt pekas vidare till den nya med en 301-ompekning, även kallad redirect. Man behöver också se över interna länkar och andra tekniska detaljer.
Det är inget du behöver göra i dag.
Den här veckan räcker det att rita, undersöka och planera. Det är betydligt bättre att förstå förändringen först än att flytta runt sidor och försöka reda ut konsekvenserna efteråt.
Däremot kan du redan nu förbättra hur befintliga sidor går att hitta, exempelvis genom att göra en viktig tjänst synligare i navigeringen eller länka till den från startsidan, utan att ändra dess adress.
Steg 4. Spara din sitemap – 5 minuter
Titta på din färdiga karta.
Nu har du en översikt över vilka sidor som finns, hur deras adresser är organiserade och vilka förbättringar du skulle vilja göra.
Spara gärna två versioner: en som visar hur webbplatsen ser ut i dag och en som visar hur du skulle vilja att den såg ut.
Det här är ett arbetsmaterial som du kan fortsätta utveckla när du lägger till nya sidor, produkter och tjänster.
Och vi ska använda det redan nästa vecka.
Bra jobbat! Tre pass genomförda.
Bocka av det du har gjort:
Nu har du arbetat med tre grundläggande delar av en begriplig webbplats: vad besökaren uppfattar, vilka ord du använder och hur innehållet är organiserat.
Du har också fått prova ett arbetssätt som används av professionella UX-designers och webbutvecklare.
Det är ett riktigt bra resultat av tre halvtimmar!
Nästa vecka: Vi vänder på kartan
Hittills har vi utgått från startsidan när vi undersökt din webbplats.
Men tänk om besökaren aldrig ser startsidan?
Nästa vecka börjar vi med området Bli hittad. Då ska vi ta fram din sitemap igen och vända på perspektivet.
För den som kommer via Google kan en undersida vara det allra första mötet med ditt företag.
Vilka av dina sidor fungerar som ingångar? Och vad händer om någon kommer direkt till en av dem?
Det ska vi undersöka nästa gång.
Vi ses i inkorgen!