Sitemap Footer

Vad är det?

En sitemap footer är som namnet antyder en mix mellan en sitemap och en footer, och innebär att användarna utöver den globala menyn längst upp, även har tillgång till en global navigering längst ner på sidan i dess footer. En sitemap footer placeras på varje sida av en webbplats och är en del av den globala navigationen samt ett komplement till webbplatsens header.

Genom att ha en sitemap footer längst ner på en webbplats kan användaren navigera vidare direkt från footern istället för att behöva scrolla allra längst upp till den globala menyn, vilket medför både användarvänlighet och reducerad ansträngning för användaren.

En sitemap footer passar bra för en komplex webbplats med många olika sidor och tillåter plats för fler navigationslänkar. Footern är den del dit användaren kommer när de har läst klart allt innehåll på en sida och genom att lägga intressanta länkar där kan det få användaren att stanna kvar på sidan och fortsätta navigera.

Med hjälp av en sitemap kan användaren bilda en uppfattning över hur webbplatsen är konstruerad och hitta relevanta funktioner.

När används det?

Designmönstret sitemap footer kan med fördel användas när:

  • En webbplats är innehållsrik/komplex.
  • Navigationen får inte ta upp för mycket utrymme i sidhuvud eller sidomenyer 
  • Den globala navigeringen behöver förtydligas eller kompletteras.
  • Användaren behöver/vill kunna se alla viktiga navigationsalternativ – både menyer och undermenyer. 
  • Användaren behöver/vill kunna gå till önskad undersida med ett enda klick.
  • Det finns intressanta underlänkar att visa upp som kan få användaren att stanna kvar på webbplatsen, efter att denna scrollat ner till botten på sidan.  

Sitemap footer passar när en webbplats är innehållsrik och komplex. På komplexa sidor blir det ofta för skrymmande att ha med alla undermenyer och underlänkar i toppmeny och/eller sidomeny. Samtidigt finns det viktiga funktioner även i undermenyerna som användaren behöver kunna nå via den globala navigeringen, om än inte lika ofta som de primära funktionerna i toppmenyn. Exempelvis så används funktionen ”kontakta oss” generellt relativt sällan – men när användaren väl behöver denna funktion vill denna hitta den snabbt! 

I en Sitemap footer kan alla viktiga navigationsalternativ visas på en gång – både menyer och undermenyer. Genom att användaren får se webbplatsens fulla menysystem och hur menyerna är strukturerade hierarkiskt får denna en bra överblick av webbplatsen och hur den är uppbyggd. Detta hjälper användaren att orientera sig på webbplatsen. Det är vanligt att menyerna är kondenserade till enbart de viktigaste underrubrikerna i Sitemap footer – även detta hjälper användaren att navigera då de rubriker som visas är sådana som kompletterar de som syns i toppmeny och/eller sidomeny.

Sitemap footer lämpar sig när användaren behöver/vill kunna gå till önskad undersida med ett enda klick. Detta är särskilt viktigt när tillgängligheten behöver vara hög. För användare av touch-enheter är det exempelvis ofta smidigare att klicka in sig på rätt sida via en direktlänk än att leta igenom att djupt menysystem som kräver flera klick för att nå önskad sida. 

Sitemap footer passar också när användaren har scrollat ner till botten på sidan och är på väg att lämna webbplatsen. Genom att visa upp intressanta underlänkar i Sitemap footer kan användaren lockas att stanna kvar och titta vidare på webbplatsen.

Hur används det?

En Sitemap footer placeras längst ner på en webbplats och är lika bred som själva sidan. Sitemap footer kan ses som ett komplement till webbplatsens huvudmeny och i Sitemap footern hittas lätt nödvändig information som inte finns i headern eller sido-navigationen. Har du exempelvis en webbshop med en stor mängd produkter så är headern samt sido-navigeringen fylld av länkar för det som användaren huvudsakligen vill göra på webbplatsen – hitta produkter. Därför är det bra att placera alla andra länkar i Sitemap footern så som val av språk, copyright och länkar till sociala medier.

Men det vanligaste användningsområdet för en Sitemap footer är att visa webbsidans hierarkiska struktur där sidans alla huvudrubriker presenteras samt de viktigaste underrubrikerna. Detta för att underlätta för användaren att hitta bland sidorna och få en överblick på webbsidans innehåll. 

Att i footern ha med sidans sitemap är också ett sätt att få bättre sökträffar eftersom det är ord som sökmotorerna hittar. Det är viktigt att tänka igenom vad man väljer att placera i sin Sitemap footer så enbart det nödvändiga som fyller en funktion för användaren visas där.

Innehåll somt är bra att i ha i en Sitemap footer:

  • De största innehållskategorierna
  • Information om organisationen eller sidan
  • Partner- eller syskonsidor, exempelvis andra webbsidor som ägs av samma företag
  • Länkar till communities och sociala medier
  • Hjälp och support
  • Kontaktinformation
  • Pågående kampanjer
  • Donationer eller information om ideellt arbete om det är den typen av organisation

Det är också viktigt att innehållet i en Sitemap footer är lättöverskådligt med tydliga rubriker och grupperingar av innehållet. 

Eget exempel

“Konserthuset”

https://tgw0hn.axshare.com – Footern som presenteras kompletterar huvudmenyn genom att visa viktiga underrubriker till huvudmenyn som användaren inte ser direkt i huvudmenyn, även om de går att nå den vägen också. Länkarna som valts ut är sådana som användare ofta letar efter på den aktuella sidan och också sådana länkar som användare överlag förväntar sig ska finnas i en footer, t.ex. kontaktuppgifter, sociala medier-länkar och språkval. Genom att presentera länkarna i fyra block med tydliga rubriker blir det lättare för användaren att hitta det den söker efter.

Bra exempel

Klarna

https://www.klarna.com/se/ – Innehåller det som en sitemap footer ska innehålla. Den återupprepar de viktigaste rubrikerna i huvudmenyn med tydliga rubriker och viktiga länkar under, man kan välja land/språk och det finns länkar till sociala medier samt copyright.

Liseberg

https://www.liseberg.se – Kompletterar huvudmenyn på ett smart sätt eftersom huvudmenyn är mer uppgiftsorienterad. De länkar som visas i footern är tydligt rubricerade i olika kategorier och verkar vara sådan information som många besökare förmodligen letar efter vid besök på webbplatsen. De väljer också att visa fyra bildlänkar till olika utvalda saker, säsongsjobb, Valkyria, boendepaket och Lisepedia, som kan hjälpa användaren att hitta nya delar av siten som den tidigare kanske missat och som kan få den att fortsätta surfa runt. Typisk information som användare förväntar sig att hitta finns också med, så som sociala medier-länkar, “mer om oss” och möjligheten att prenumerera på nyhetsbrev.

Komplett– grupp 1, distans

Använder sig av sin sitemap footer på ett effektivt sätt då man får en överblick över hemsidan. Detta då den globala menyn fokuserar på deras produkter.

Zalando – grupp 2, distans

Zalando har en bra sitemap i footern som erbjuder många relevanta navigationsalternativ. Rubrikerna är både tydliga och minimalistiska. Den task-oriented top-of-page globala navigation som finns hjälper med kundernas förstahands uppgifterna och sitemap footern hjälper med de sekundära uppgifterna.

IKEA – grupp 3, distans

www.ikea.se – Ikeas webbsida är ett bra exempel på en Sitemap footer. Kategorierna är tydligt uppdelade och har även tillhörande ikoner för att förtydliga ytterligare för användaren. En del av informationen i footern återfinns även under rubriken ”Kundservice” i den globala navigeringen i sidans överkant, men här får man en snabbare överblick än i huvudmenyn och det skadar inte att ha denna information på två ställen.

Helsingborgshem – grupp 4, distans

https://www.helsingborgshem.se/

Footer av helsingborgshems webbsida. Den är tydlig och innehåller de viktigaste länkar. Den är inte överlastat med information och länkar utan bara det viktigaste finns med. Alla rubriker är klickbara och de får man till önskade sida för mer information. Kontaktuppgifter finns direkt tillgängliga.

ICA – grupp 5, distans

Figur 1. Footer av www.ica.se.

www.ica.se – Footer av Ica:s webbplats har en tydlig struktur och är informativ utan att överbelasta användaren. Ica:s footer presenterar några av de viktigaste huvudkategorierna som det flesta användare behöver (t.ex. handla online, matkassen, kontaktuppgifter till kundservice mm.). Samtidigt kombineras de kategorierna med sekundära uppgifter som kanske inte behövs av användare i första hand men ändå är viktiga för Ica att presentera och för användare att veta t.ex. Icas appar, Icas miljöarbete osv. Informationen i footer är samlad i lite större grupper (E-handel, Ica kort, Kundservice osv.) vilket ger användaren en snabb överblick över hur informationen är strukturerad. 

Dåliga exempel

Zooplus

https://www.zooplus.se/ – Ett rörigt och osammanhängande helhetsintryck där upplevelsen blir överväldigande med all text. Rubrikerna i den övre delen är otydliga där exempelvis underrubrikerna “rabatter”, “erbjudanden” och “säsongsrabatter” verkar handla samma sak . Det känns även onödigt att visa alla länders flaggor på en gång – det hade varit bättre med en drop down-meny där besökaren får välja/ändra språk. I den gröna listen längst ned finns kompletterande länkar som är oklara – hur skiljer sig “om oss” mot “om företaget”? “Leverans” finns även redan länkat i den första kolumnen högre upp. Överlag verkar innehållet alltså inte vara helt genomtänkt och slarvigt strukturerat.

Bangerhead

https://www.bangerhead.se/ – Även om footern ser ganska snygg ut och innehåller bra information är den för lång/hög. Det tar ett tag att scrolla igenom hela, den går alltså inte att se i en enda överblick. Det gör det svårt för användaren att veta vad som är footer och vad som är lokal information på den aktuella sidan, och sådan information som användaren förväntar sig att hitta genom att scrolla längst ned på sidan kanske ligger längre upp. Innehållet i footern är också ostrukturerad. Det hade varit enklare att förstå hierarkin och ta in informationen om alla länkarna varit strukturerade under tydliga rubriker.

Cdon– grupp 1, distans

Använder sig av en sitemap footer men även valt att länka innehåll precis ovanför som gör det hela till en rörig upplevelse.

Valmyndigheten – grupp 2, distans

Valmyndigheten ( http://www.val.se ) använder länkar i en typ av sitemap för hela webbplatsen. Dock missar de en av de viktigaste poängerna med en sitemap – att bidra med en ytterligare översikt över de djupare nivåerna av navigationen. Istället har Valmyndigheten valt att kopiera den globala menyn och klistrat in samma länkar i footern. Ett till problem är att länkarna är okategoriserade vilket i slutändan gör det svårt att hitta länkar man letar efter.

Linnéuniversitetet – grupp 3, distans

www.lnu.se – LNU:s webbsida är ett dåligt exempel på en sitemap footer. Kontaktinformationen till vänster borde följa mönstret och endast finnas under en rubrik med namnet ”Kontakt”, där kontaktinformationen som telefonnummer och e-mail blir synlig först då man klickar på rubriken ”Kontakt” och inte som här visas på en gång. Om det nu istället är viktigt att informationen visas direkt, borde den skiljas från övriga länkar och inte klumpas ihop med kategorierna ”Press” och ”Om personuppgifter” som den är nu. Som footern visas nu känns den obalanserad. Rubriken ”Genvägar” känns alltför generell och säger inte mycket om innehållet under. Den skulle därför helt kunna tas bort, eller så skulle länkarna kunna delas upp i mer meningsfulla kategorier. Mittstrecket som delar av sidfoten vertikalt är tjockare upptill än nedtill. Att alla länkar är centrerade gör de dessutom svårlästa.

UI – grupp 4, distans

https://www.ui.se/landguiden/

Landguidens webbsida har en dålig footer. Även om den innehåller de viktigaste länkarna av hemsidan, den ä inte designat på ett bra sätt. Den är avlång trotts att det finns plats att dela upp det på ett bättre sätt. Den slutar vara responsiv vid bred större än 1050 px. En till anledning är den förklarande texten till sociala medier. Den tar för mycket plats och är inte av stort vikt till användaren.

KI (Karolinska Institutet) – grupp 5, distans

Figur 1. Footer på www.ki.se

Figur 2. Header med global navigering på http://www.ki.se

www.ki.se – KI:s footer har en tydlig, avgränsad design på webbplatsen och är enkelt att hitta. Dock har footer väldigt begränsat med information och visar inte de viktigaste kategorierna besökare av webbplatsen kan ha. 

KI:s webbplats har en väldigt varierad grupp av besökare såsom studenter, forskare, patienter, allmänhet, bidragsgivare mm. som behöver en snabb överblick över webbsidans struktur utan att behöva navigera mycket. Eftersom KI:s webbsida använder en väldigt kompakt global navigering i header (se figur 2), kunde footer ha använts som ett ytterligare hjälpmedel för att leda användare bland de viktiga rubrikerna. KI:s footer skulle gynnas av att innehålla mer information. 

Källor och länktips