Placering och uppbyggnad

När vi frågar respondenten om SCB har någon mall för sidornas uppbyggnad, för att de ska se likadana ut, svarar hen att det finns mallar för hur typsnitt och rubriker ska användas, men att på grund att att sidorna är byggda vid olika tillfällen i deras CMS (Content Management System, författarnas anm.) så ser de strukturellt sett ganska olika ut. Även för detta finns det under rubriken

“Designsystem” i varumärkeshandboken tydligt utformade beskrivningar för format och mallar.

För webbplatsanalysen gjordes en kartläggning av sidornas uppbygnad, som följer här.

På startsidan för ”Sverige i siffror” finns överst SCB:s logotyp, den globala navigationsmenyn och en breadcrumb som gör det tydligt för användaren vart hen på sidan befinner sig på sidan. I övre högra hörnet finns det också

möjlighet att översätta sidan till engelska, ett index i alfabetisk ordning, genväg till lättläst version, kontakt och en sökruta. Att använda sig av en traditionell global navigering skapar igenkänning och en förutsägbarhet hos användarna,

27

något som både Benyon (2019) och Nielsen Norman Group (2020) menar är något positivt då det ger användaren en känsla av kontroll.

Figur 1. SCB. (2020) Inledning [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/

Inleder varje sida gör en rubrik med seriffer i stor punktstorlek, och en ingress i sans seriffer som kort förklarar innehållet (se figur 1). Detta är det inledande elementet på samtliga sidor som finns på temasidorna. Att ha samma inledning på samtliga sidor skapar även det förutsägbarhet för den som besöker

webbplatsen (Benyon, 2019).

Därefter är de fyra huvudkategorierna placerade, som presenteras liggande horisontellt med bilder i fyrfärg och tillhörande understruken text, som har en bakgrundsplatta i lila. De är placerade med lite mellanrum och dessa fungerar som länkar till underkategorierna (se figur 2).

Figur 2. SCB. (2020) Temaområden [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/

När användaren hovrar över respektive bild, skuggas bilden och när

användaren hovrar över länktexten blir också understrykningen tydligare (se till vänster på figur 2), vilket gör att användaren får respons på var hen befinner sig. Pilen som pekar ändras också och får utseendet av en hand när den står på ett klickbart element. Denna funktion är gemensam för alla texter, bilder eller andra element som fungerar som länkar på temasidorna. Detta är ett

typexempel på vad Benyon (2019) menar med att låta användaren veta vad systemet gör just nu. Systemet ger omedelbar respons för att tala om vad som fungerar som en länk och inte.

Näst på sidan finns två olika drop down- menyer (se figur 3). De är placerade på ljusgrå bakgrundsplattor och med lite mellanrum, vilket gör dem lätta att skilja åt. I den ena kan användaren fylla i och jämföra två kommuner och i den andra kan användaren göra en prisomräkning av hur mycket 1000 kronor var värt ett specifikt år.

28

Figur 3. SCB. (2020) Drop down- menyer [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/

Båda informerar besökaren med ett förifyllt värde och ger en ledtråd om var användaren förväntas interagera och har markerade pilar för att visa detta.

Jämför/ beräkna- knappar är färgade i den blå primärfärgen och även här skuggas knapparna när användaren hovrar över dem som en återkoppling på vad som händer (Benyon, 2019). För en besökare som är ovan vid att använda denna typen av verktyg, kan det dock upplevas som oklart vad som förväntas av hen.

Följande element på sidan är “Statistik i skolan”, som också är en klickbar länk i den blå primärfärgen. Den har rubriken “Sverige i siffror för lärare”. Intill finns ett monotonefoto i lila och en kort beskrivande text (se figur 4).

Figur 4. SCB. (2020) Statistik i skolan [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/

Därefter kommer delen “På tal om Sverige”, med rubriken “SCB:s siffror berättar om Sverige” i blått.

Figur 5. SCB. (2020) På tal om Sverige [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/

I bilden finns en knapp för att spela upp en film, som har en klassisk ikon för

“play” och förtydligas med texten “Spela” (se figur 5). Hela bilden är dock

29

klickbar och knappen ändrar nyans, samtidigt som pekaren ändras till en hand när användaren håller muspekaren någonstans på bilden. Klickar användaren här, kommer hen till en sida som visar filmen “På tal om Sverige - en film från statistikmyndigheten SCB”.

Den nedre delen av sidan ser likadan ut på samtliga sidor på temasidorna (se figur 6). Ovanför sidfoten finns en text “Dela sidan” som följs av två blå ikoner för sociala medier och en för kontakt, där användarna kan klicka för att dela innehållet på sidan. Dessa är de klassiska symbolerna, vilka SCB troligtvis förväntar sig att användarna känner igen då de inte har någon ytterligare förklaring eller beskrivning.

Figur 6. SCB. (2020) Ikoner och sidfot [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/

Underst finns sidfoten, med genvägar till flera olika sidor, indelade i fyra huvudkategorier. Här återkommer vi till förutsägbarhet (Benyon, 2019), eftersom detta är en klassisk vy för sidor som har djupa strukturer och som underlättar för användaren att snabbt hitta genvägar till det som kan antas vara SCB:s mest frekvent besökta sidor.

Sidorna under “Sverige i siffror” ser upptill ut på samma sätt som startsidan för temasidorna och inleds med rubrik och ingress för området. Undantaget här är dock att under den globala navigeringen finns en ikon med rubrik “Lyssna”.

Här kan användaren välja att få innehållet uppläst för sig, vilket gör att sidan kan användas även av någon med synnedsättning och höjer användbarheten avsevärt för besökare med funktionsvariationer.

Efter inledningen finns sidor med områdets underkategorier som synliggörs med lila bakgrundsplattor (se figur 7). Dessa varierar i antal men presenteras visuellt på samma sätt, med vit text mot lila bakgrundsplattor. De är tydligt avgränsade från varandra med mellanrum, men skapar ändå en sammanhållen del på sidan genom sin gemensamma utformning. Här visas exempel från

“Samhällets ekonomi”.

30

Figur 7. SCB. (2020) Kategorier samhällets ekonomi [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/samhallets-ekonomi/

Nästa element på sidan är nyckeltal för hela kategorin, som presenteras med stora siffror och text i vitt mot färgade bakgrundsplattor, monotonefoton med tillhörande text i svart och länktexter i primärfärgen (se figur 8).

Figur 8. SCB. (2020) Nyckeltal och kategorier [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/samhallets-ekonomi/

Färgerna har hög kontrast och visibility vilket i kombination med storlek gör både bilder och texter framträdande på sidan. Kategorierna skiljs främst åt genom att ha olika bakgrundsfärg, men även det visuella språket är olika för de kategorier som visas med bilder jämfört med de utan. Kategorierna är

placerade med lite mellanrum så att sidans vita bakgrundsfärg skiljer dem åt.

Även här är det tydligt vad som är länkar eftersom den text som muspekaren ställs på blir understruken.

Nästa element på sidan är två kategorier; “Få perspektiv på statistiken”, som illustreras med ett duotonefoto samt “Statistik i skolan” med ett monotonefoto (se figur 9). Eftersom de har skilda färger och är placerade på varsin ljusgrå bakgrundsplatta är det lätt för användarna att skilja dem åt.

31

Figur 9. SCB. (2020) Två katogier [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/samhallets-ekonomi/

Texten är vänsterställd och det finns på så vis inte heller någon risk att texten blandas ihop. Båda har en kort beskrivande text och rubrikerna i den blå primärfärgen. Dessa är också länkar till respektive sida.

På informationssidorna som ligger under de åtta underkategorierna skiljer sig sidorna åt eftersom de är anpassade efter kategorins innehåll. De är generellt strukturerade på samma sätt sinsemellan och inledningsvis också på samma sätt som sidorna på nivån ovanför. Innehållet varierar dock i form av att

informationen presenteras omväxlande med förklarande text, olika diagram och på vissa ställen finns utfällbara faktarutor eller länkar till tillhörande kategorier.

Även mängden information skiljer sig åt på sidorna, men visuellt talar de samma språk då även dessa sidor utgår från varumärkeshandboken vad gäller hela den grafiska utformningen.

Längre ner på sidorna skiljer sig dock informationssidorna åt jämfört med nivån ovanför. Innan sidfoten finns det länkar med “Relaterade snabba fakta”

och “Relaterad fördjupning”, kopplade till respektive område (se figur 10).

Dessa skiljer sig åt i antal beroende på hur många relaterade ämnen som finns till den aktuella sidan. Varje fakta- och fördjupningsområde har en länkrubrik i den blå primärfärgen och texten är placerad på en ljusgrå bakgrundsplatta. De är skilda åt med mellanrum som visar sidans vita bakgrund.

32

Figur 10. SCB. (2020) Relaterade länkar [skärmdump]. Hämtad från https://www.scb.se/hitta-statistik/sverige-i-siffror/samhallets-ekonomi/arbetsloshet-i-sverige/

Undre delen av sidan ser även den ut som sidorna på nivån över, men avslutas med frågan ”Hittade du svar på din fråga på denna sida?” (se figur 18) mot lila bakgrundsplatta, samt blå ikoner för delning på sociala medier, kontakt och sidfot (se figur 6).