Jag och kollegan Kajsa Söderberg (främst Kajsa) har från Ehälsoenhetens sida stöttat pilotprojektet KOL-skolan. Idén kom som sig bör från verksamheten själva, de ville på något digitalt sätt komplettera sin patientutbildning och erbjuda stöd även mellan utbildningstillfällena, och inte minst efter utbildningen.
Pilotprodukten blev att jag tog fram en så kallad mikrowebb. Alltså en webbplats i miniatyr, en webbplats utan alla de distraktioner som många mer generellt designade webbplatser ofta har. Det som efterfrågades var mer en digital broschyr, som självklart skulle fungera minst lika bra på en mobil pryl eller uppkoppling som under mer ergonomiska förhållanden på kontor, vid en snabb dator, bra uppkoppling och en stor fin skärm.
Ett försök till inkluderande design
Du som stött på mig tidigare, läst några blogginlägg eller böcker jag skrivit vet hur fokuserad jag är på allt kring en webbplats prestanda. Då tolkar jag prestanda väldigt brett. Jag inkluderar användarens prestation, hur snabbt användaren kan börja tolka, förstå och interagera med webbplatsen.
Jag är också en nörd som har en knepig förkärlek till extremer, generaliseringar och att påvisa de kontraster som livet kan erbjuda. I sammanhang kring webbanalys brukar jag ironisera med att beskriva exempelanvändare (kallade personas) för att illustrera min poäng om att vi behöver visa särskild omsorg för de som har det svårt.
Persona 1: Ergonomiska Egon
Den ena extremen kallar jag Ergonomiska Egon. Han har alltid en bra dag, är alltid på bra humör, alltid utsövd, använder bara din webbplats från bästa tänkbara tekniska utrustning. Självklart är det kontor han är på helt perfekt utformat så inget blänk finns i hans skärm. På tal om skärmen så är den förstås svindyr, ämnad för grafiska formgivare och har färgkalibrerats på plats på Egons kontor. Egon har förstås inte en enda funktionsnedsättning.
Dessvärre är Egons egenskaper väldigt representativa när man tar fram webbplatser. Man lägger sitt fokus på att ha personas som inte har den varierande funktion som vi alla har varje vecka. Jag själv blir många dagar ganska kognitivt nedsatt. Vissa dagar är det knappt jag kommer ihåg kollegornas namn. Andra personer lever med en migrän som de ofta måste uthärda under flera dagar i sträck, det sänker också ens förmåga att tänka klart. För att inte tala om alla kollegor (till skillnad från undertecknad) som håller på att få ett mentalt sammanbrott varje dag precis innan lunch. Nu endast exempel på kognitiva funktionsnedsättningar. Du känner garanterat någon som lider av dessa utmaningar att tänka klart dygnet runt.
Anti-persona med alla tänkbara svårigheter
Min motsats till Egon har jag kallat för Salongsberusade Sanjay. Kanske inte det mest lämpliga av namn, men som alla namngivna personas bör namnet vara ganska beskrivande. En persona ska gärna ha ett sammanhang så man förstår den. Han är som du förstått salongsberusad, just nu i Sverige som utbytesstudent och firar midsommar. Under stövelkastningen snubblade han och landade på sin mobiltelefon. Så nu är skärmen spräckt och visar massor med konstiga linjer och färger (motsvarar defekt färgseende och nedsatt syn). Midsommar firas givetvis bäst i Dalarnas värsta tänkbara glesbyggd (tveksam mobil uppkoppling = långsamt internet = nedsatt kognition på grund av väntan).
Han har precis börjat begripa lite svenska (språklig utmaning) och är just nu lite orolig för en vän som gått hårt åt flaskan med beska droppar. Hur mycket sprit klarar egentligen en svensk midsommarfirare redan vid lunchtid?
Så han försöker lite i smyg söka fram information om hur farligt detta kan vara. Nu har han bara sin mobil och endast ansluten till det tröga mobila nätet Edge, med spräckt skärm, tveksam språkförståelse och en datakvot om 500 Mb per månad. När hans kvot är slut kräver det ett besök i en fysisk butik för påfyllning, något han inte är i närheten av.
Hur hushåller vi som bygger webbplatser om Salongsberusade Sanjays möjligheter att komma åt, förstå och använda det vi erbjuder på webben? De flesta av oss är helt oförberedda till merparten av de utmaningar våra användare har.
KOL-patienten Kalle?
Nu hade vi i detta pilotprojekt ingen unik persona. Men vi tog definitivt höjd för att inte göra det svårt att förstå den mikrowebb vi erbjöd, eller att man skulle bli distraherad av väntan på att webbsidan skulle dyka upp.
För egen del är det väldigt enkelt att sätta mig in i ett flertal dimensioner av utmaningar som gäller en användare inom Västra Götalandsregionens upptagningsområde och den verksamhet som vi har. Jag är frekvent i glesbygden i Dalsland, jag rent utav uppehåller mig ofta i områden där jag stundtals inte har täckning på mobilen. Antingen i jakt på svamp eller cyklandes cross-country/MBT på någon skogsväg. Många av dessa mindre vägar trafikeras av kollektivtrafiken Västtrafik sköter.
Grannar till min sommarstuga pendlar varje arbetsdag via buss eller bil dessa vägar. Så kan våra patienter och medborgare se ut, utöver att de kan ha en diagnostiserad funktionsnedsättning som gör det hela ännu viktigare!
Walk the walk…
Som du förstår måste jag försöka leva som jag lär. Det är inte alltid lätt. Så när jag tog fram prototypen för mikrowebben under 2014 blev jag tvungen att hålla igen med den högst mänskliga egenskapen att vilja dekorera och designa. Istället utgick jag från ett mikro-ramverk som kallas Skeleton. Det innehåller inte mer än nödvändigt. Det får innehållet att fungera bra på en mobil, men också på en dator. Med mindre justeringar fick jag till en bas jag kunde leva med. Lite intrimmande senare fanns samma mikrowebb för användning av våra webbredaktörer med behörighet till att skapa mikrowebbar – likt KOL-skolan.
Hur gick det sen?
Ja, jag håller på och byter måttstock. Men tills vidare är Googles Pagespeed en väsentlig del av hur jag utvärderar webbprestanda på jobbet. Så även här.
Lite läsanvisning till nedan statistik om den genomsnittliga sidan på det som blev KOL-skolan är att varje fil kan i Dalsland, mellan Åmål och Bengtsfors, ta över en sekund innan den ens börjar tas emot av en användare som sitter på en buss. Dessutom har jag själv mätt upp i dessa områden som åtminstone har åtkomst till Edge-nätet att hastigheten är sämre än de modem på 56 Kbit/s vi hade på 1990-talet. Skillnaden är att då råkade man inte ut för att var och varannan webbplats hade högupplösta utsmyckningsbilder, eller flera Mb med Javascript eller CSS. Så ser en valfri responsiv webbplats ut idag.
En annan läsanvisning är att nedan nämnda textfiler skickats Gzipat, vilket innebär att de bara är cirka en tiondel av angiven storlek i faktisk överföring.
Vill man få en grovt förenklad sanning, eller möjligen inte är intresserad av webbteknik, så summerar nedan siffror webbplatsens 75 undersökta sidor ur en mobilanvändares perspektiv:
- Användbarhet – 99,7 av 100 möjliga. Alltså finns möjligen någon länk som är för nära placerad inpå en annan, men nästan fläckfritt.
- Pagespeed mobile – 77,5 av 100 möjliga. Vilket är högre än nästan samtliga samtida webbplatser.
I den prestandabudget som (härligt nog) beslutades ett år senare av Västra Götalandsregionens kommunikationsdirektör Erik Lagersten höjdes lägstanivån till 85 av 100 i mobil Pagespeed.
Lite statistik om KOL-skolans mikrowebb – med faktiskt innehåll:
- 75 st undersökta sidor
- Javascript-filernas storlek – 633 Kb
- CSS-filerna – 107 Kb
- Annat, typ cookies, teckensnitt, etc – 41 Kb
- Bilders tyngd – 41 Kb
- HTML-filers tyngd – 15 Kb
- Förfrågans tyngd, exempelvis cookies – 1,8 Kb
- Antal filer per sidvisning – 13 st
- Antal statiska filer – 9 st
- Antal Javascript-filer – 5 st
- Antal värdar – 4 st
- Antal CSS-filer – 1,3 st
Om man istället kollar på den förbättringspotential som Google Pagespeed pekar ut kommer man fram till följande bedömning:
- Minimera blockerande CSS- och Javascript – 24
- Prioritera synligt innehåll – 2,56
- Använd webbläsarens bufferminne – 0,99
- Minska serverns svarstid – 0,4
- Matcha innehåll till tillgängligt utrymme – 0,16
- Knappar och länkar ska ha tillräckligt avstånd från varandra – 0,045
- Optimera bilder storlek och formart – 0,014
Anledningen till den första punkten är primärt de videoklipp vi placerat på Youtube. Och den plattformen är förhållandevis bra på video, men vi som användare kan alltid bättra på oss när det gäller att texta våra videoklipp.
Bloggpostens länkar
- Vill du titta till KOL-skolan? Den finns på kolinfo.vgregion.se
- Ladda ner mikrowebben på Github – det är öppen källkod!
- Ramverket Skeleton som var basen till mikrowebbens responsivitet och mobilfokus.
- Västra Götalandsregionens prestandabudget.
- Provkör Google Pagespeed, eller sätt en utvecklare på att utvärdera
- Sitespeed.io om du vill kolla in ditt intranät