Energi-effektiv web design

Rolle: Dette var et selvstendig designprosjekt som jeg planla og gjennomførte på egen hånd.

Oppgaven: Det er svært få som er bevisst på miljøpåvirkningen til internettbruk. Det produserer faktisk mer CO2 enn flyindustrien. Som en web designer ligger det også et ansvar for å bidra til et bærekraftig internett. Jeg ønsket å utforske hvordan en energi-effektiv nettside kunne se ut, hvordan det påvirker brukeropplevelsen og ulike metoder for at brukerne velger mest mulig energibesparende innstillinger.

Innsikt:

I parallell med prosjektet hadde jeg emnet TPD4505 Designteori, der jeg gjorde en litteraturstudie om internettets energiforbruk og "Sustainable web design guidelines". Det viktigste for en bærekraftig nettside er at den krever minst mulig nedlastninger, da trengs det mindre energi og dermed blir det mindre utslipp. Basert på retningslinjene valgte jeg å teste ut disse design-elementene på en nettside med mer energi-effektive alternativer:

Skrifttype: endre fra web-font til system-font
Bilder: lavere kvalitet, uskarphet, svart-hvit, vektoriserte illustrasjoner
Videoer: kort ned lengde, ingen auto-play, erstatt med bilder/illustrasjoner
Farger: svart, rød og grønn krever mindre energi enn hvit og blå (OLED-skjerm), bruke færre farger (også i bilder)
Animasjoner/effekter: erstatt med enklere CSS typer eller fjern

I all hovedsak enten 1) simplifisere, 2) modifisere eller 3) fjerne innhold.

Til inspirasjon har Snøhetta sin nettside tre innstillinger som gjør den mindre energi-krevende: "Dark-mode", "Simplified" og "Low-res". Med alle aktivert blir nettsiden mørk, ingen spesielle effekter og bildene får lavere kvalitet med et spesielt og stilig uttrykk.

Gjennom en spørreundersøkelse med 71 svar fikk jeg kartlagt folks atferd og kunnskap om internettbruk. De viktigste funnene:

Over halvparten tenker de har "mye" eller "veldig mye" kunnskap om hvordan internett fungerer.
75% tenker de besøker 30 eller mindre forskjellige nettsider om dagen
Mest brukte nettside-type er søkemotorer som Google.com.
Mellom bruk av flere bilder, videoer, flere farger, animasjoner/effekter og stilige/unike fonter, er det bilder og farger som får høyest score på viktighet på en nettside. Videoer fikk lavest score.
Av bilder, videoer, farger, animasjoner/effekter og fonter, tror de at videoer og animasjoner/effekter krever mest energi på en nettside.
50% har ikke tenkt på miljøpåvirkningen til deres internettbruk i det hele tatt eller i liten grad.
65% ble i stor eller i noen grad overrasket av å høre at internett forurenser mer enn flyindustrien.
Hvis en nettside tilbød en mer bærekraftig versjon, svarte 64% at det var "veldig sannsynlig" eller "sannsynlig" at de ville brukt den.

Samskapingsworkshop:

Sammen med tre andre studenter evaluerte vi ulike nettsider hos tre nettsteder: Matprat.no, Zalando.com og Tripadvisor.com. Dette gikk ut på å vurdere hvilke innhold som er nødvendig og ikke, og om det er nødvendig, kan det simplifiseres/modifiseres til noe mer energi-effektivt?

Vi diskuterte de forskjellige elementene og plasserte fargekodede post-it lapper på dem: oransje - "kan fjernes", blå - "modifiser eller forenkle", grønn - "nødvendig", rosa - "nice to have", gråblå - "annet".

Nøkkelfunn:

Nettsider har ofte for mye innhold som ikke egentlig trengs, spesielt på hjemmesiden. Folk scroller som oftest ikke helt ned uansett. F.eks. Matprat.no har flere rader med oppskrifter, der de nederste ble sett på som unødvendig.
Videoer er viktigere å ha på produktsider på Zalando enn av enkle oppskrifter på Matprat. Men de trenger ikke spille av automatisk.
For å skille mer på innhold kan det være fordelaktig å gjøre om noen bilder til illustrasjoner, som artiklene på Matprat.no.
Det er generelt viktig med bilder, men man trenger ofte ikke så mange. F.eks. over 100 000 bilder av Eiffeltårnet på Tripadvisor er overdrevent.
Zoom-in effekter når man tar pilen over noen utvalgte bilder er unødvendig.
Noen stemningsbilder på Zalando.com kunne vært i svart-hvit.

Fra evalueringen av MatPrat sin hjemmeside.

Prototyping og testing:

Videre valgte jeg å redesigne to av Matprat sine nettsider i Figma: hjemmesiden i PC-format og en oppskriftside i mobil-format. Dermed ville disse prototypene kun simulere en mer bærekraftig versjon av sidene, og ikke bli det på ekte. Jeg brukte en plug-in for å omgjøre dagens nettsider til Figma designs for raskere prototyping. For hver nettside lagde jeg fire versjoner med ulik grad av energi-effektivitet. Disse representerte ulike kombinerte innstillinger.

Versjon 1: originalen
Versjon 2: illustrerer innstillingene "Endre skrifttype", "Slå av effekter og animasjoner" og "Bytt ut noen bilder til illustrasjoner"
Versjon 3: illustrerer i tillegg innstillingene "Kort ned innhold" og "Lavere bildekvalitet" (uskarpe og mørkere kanter)
Versjon 4: legger til innstillingene "Svart-hvite bilder" og "Dark-mode", og deaktiverer "Lavere bildekvalitet"

Venstre: versjon 3 av hjemmesiden (PC). Andre fra venstre: versjon 4 av hjemmesiden (PC). Tredje fra venstre: versjon 2 av oppskriftsiden (mobil). Fjerde fra venstre: versjon 4 av oppskriftsiden (mobil).

A/B testing ble utført der halvparten testet med å starte med originalen med pop-up'en, mens den andre halvdelen startet med full lav-energi modus (alle innstillinger aktivert) uten pop-up. Dette ble gjort for oppskriftsiden på mobil også.

Innsikten ble samlet og organisert i et "affinity diagram". Det endte med 32 grupper som jeg igjen organiserte til syv overgrupper.

Øverst: innstillingsboksen (pop-up) til PC-versjonen. Nederst til venstre: knapp som tilgjengeliggjør innstillingsboksen, fast plassert på nettsiden. Nederst til høyre: knappens utvidelse ved hover (pilen plassert over knappen).

Affinity diagrammet dannet etter A/B testingen med 32 grupper.

Sitater fra testerne angående brukervennligheten til innstillingene:

Den eneste innstillingen som fikk negative tilbakemeldinger fra nesten alle var svart-hvite bilder. Dermed ble denne fjernet fra innstillingsboksen.

"Lavere bildekvalitet er uproblematisk"

"Likte dark-mode versjonen best, den er elegant", "Det er mer behagelig"

"La ikke merke til at fonten endret seg"

"Illustrasjonene funker fint", "skiller seg også ut fra resten"

"Å kutte ned innhold går fint, synes det oftest er for mye innhold"

Tredje og siste iterasjon av mobil-prototypen. Dette er startskjermen.

I andre iterasjon fokuserte jeg først på mobilversjonen med en oppskrift, siden disse sidene blir oftest brukt. Her blir man introdusert med en kortere pop-up med et interessant spørsmål som illustrerer problemet, forklaring på hva som skjer og om brukeren vil fortsette å bruke lav-energi modus eller endre innstillingene.

I tredje og siste iterasjon ble valget endret til "Bruk originalen" og "Bruk denne versjonen" av hensyn til brukerens autonomi.

Siste iterasjon av innstillingsboksen (mobil).

Siste runde med brukertesting var gjennom et digitalt tilbakemeldingsskjema. Testpersonene fikk et scenario og kunne se gjennom og teste ut prototypen i Figma. Etterpå svarte de på diverse spørsmål og kunne vurdere ulike versjoner av innstillingsboksen i Nettskjema.

Hovedfunn:

Det var mange ulike reaksjoner til den første pop-upen: - fra usikkerhet til nysgjerrighet til "cookie"-vaner.
Alle valgte å fortsette med lav-energi modus.
Informasjonen i innstillingsboksen var sett på som klart, forståelig og brukbart.
Halvparten testet ikke ut innstillingsboksen fra start da de tenkte at ingenting var rart eller manglet.
En person synes det var enklere å forstå oppskriften med bilder/illustrasjoner for hvert steg.
Om å starte med full lav-energi modus: "viser at MatPrat tenker på miljøet", "nettsiden og oppskriften fungerer like bra med innstillingene som originalen".
Om innstillingene ville alle brukt de, men kun halvparten valgt å aktivere alle.

Mellom tilnærming A og B var det B som var mest effektivt for at brukerne fortsatte med mest mulig energi-effektive innstillinger. Det var hovedsakelig tre grunner:

Brukeren ønsket å bidra til energisparing.
Brukeren så ikke på det som et problem å fortsette med denne versjonen.
Brukeren tar seg ikke tida til å bli kjent med funksjonen og velger det som ligner "godta" for å raskt nå målet sitt på nettsiden.

Forbedring og videreutvikling:

Større representasjon i spørreundersøkelsen, workshopen og i brukertestingen.
Kode en nettside med innstillinger for lav-energi modus, og teste forskjeller på karbonavtrykket, samt teste i en virkelig brukssituasjon.
Teste ut andre tilnærminger for å påvirke brukeratferden som kan være mer effektivt.
Se på konkurransedyktigheten til en slik nettside.
Teste ut muligheter for slike innstillinger på nettleser-nivå.

Læringsutbytte:

Hvordan web design kan påvirke karbonavtrykket til internettbruk, og hva man kan gjøre for å redusere det.
Fått utforske metoden A/B testing.
Mer erfaring med både fysiske og digitale brukertester.
Mer selvstendig planlegging og gjennomføring av en samskapingsworkshop.
Utnytting av flere verktøy i Figma, som plug-ins, for raskere prototyping.

Til toppen