Internett er fullt av apper og digitale tjenester som aldri brukes. Noe av det viktigste designere kan bidra med, er å forhindre at vi lager tjenester ingen bruker, eller som lastes ned og kun brukes et par ganger. Forfatteren av boken Word Wide Waste, Gerry McGovern, trekker frem slående statistikker:

«We download the free app, try it maybe once, and then never again. Research by mobile intelligence firm Quettra found that the average app loses 77% of its users within the first three days after the install, 90% within the first 30 days, and 95% within the first 90. All that effort, expense and energy that went into creating things that nobody is using.»
— Gerry McGovern

I hvert prosjekt bør vi derfor stille spørsmål ved om tjenesten bør lages. Er det en tjeneste som svarer på et kundebehov? Gjennom innsiktsarbeid, prototyping, testing og brukerinvolvering kan vi lage tjenester som løser kundenes problemer og ikke støver ned etter første gangs bruk.

Tenk over om du kan hjelpe kunden med å ta valg som er bedre for miljøet i prosjektet du er i. Gjør så de bærekraftige valgene enkle og lett tilgjengeligelige. Kan du for eksempel fremheve de grønne valgene foran «gråere» tilbud? Tilby et «nedstrippet» nettsted som default, så kan kunden selv velge å slå på funksjoner.

Eksempel

Oda innførte klimaavtrykk på kvitteringen. Dette gjør det enkelt for kundene å se hvilke av varene de kjøper som har lavt, middels og høyt klimagassutslipp. Ved hjelp av en enkel visualisering bevisstgjør de kunden om matvarers klimagassutslipp. Ingen pekefingre, men en vennlig dulting i en mer klimavennlig retning. Kanskje kunden dropper chorizoen neste gang hen handler?

God brukeropplevelse og universell utforming er ikke bare bedre for brukerne – det er bedre for kloden også.

«… the idea of accessibility is essential for digital sustainability. Accessibility is inclusive. It provides clean aesthetics, rich content formatting, and ease of use. For a client, this translates into increased web performance and visibility online. For sustainability, it means fewer data transfers.»

Hjelp brukeren med å finne frem med god navigasjon, struktur, presentasjon og navngivning. Slik unngås unødvendig energibruk i form av sidelastinger.

Et enkelt typesnitt i én vekt kan tilføre en nettside så mye som 250kb. Det er flere ting designere og utviklere kan gjøre for å komprimere størrelsen på fontfilene. Når du har mulighet, velg moderne fontfiler som WOFF og WOFF2. Disse komprimerer fontfilene i høyere grad enn TTF, OTF og SVG-filformater, ifølge Wholegrain Digital.

En annen mulighet, er å benytte fonter som allerede finnes online, som Google Fonts. Disse skrifttypene kommer med en rekke valgmuligeter, og er dermed et grønnere valg.

Vurder om dere trenger flere ulike fonter i prosjektet, og om alle trenger å være spesialfonter. Å droppe spesialfonter til fordel for systemfonter som Arial og Times New Roman er kanskje ikke en designers drøm, men det er definitivt det grønneste alternativet – fordi disse fontene allerede ligger på brukernes enheter.

Spør deg selv:

• Kan jeg bruke en standardfont i dette prosjektet?

• Kan vi bruke én spesialfont istedenfor to?

• Kan vi kutte ned antall vekter og fontfamilier?

• Kan vi optimalisere fontfilene(i samarbeid med utvikler)?

Les mer om å optimalisere ytelsen og størrelsen på skrifttyper.

I tillegg til å være bra for universell utforming, kan gode fargekontraster i designet gjøre at brukerne kan se innholdet med lavere lysstyrke på skjermen. Det sparer energi. Noen telefoner kan faktisk halvere energiforbruket ved å redusere lysstyrken på skjermen ned 20 prosent.

Strekk deg mot AAA-kontrastrate. Du kan sjekke kontrasten med verktøy som Colorable eller Figma-pluginen Stark.

Design i mørk modus (dark mode) kan også spare energibruk: Et theme som bruker mørkere farger kan redusere batteribruken med opp til 63 prosent på AMOLED-skjermer, selv om skjermen er på maksimal lysstyrke.

Fargene du velger kan også ha noe å si for strømbruken: Visse farger krever mer skjermlys, med hvitt og blått som verstingene. Selv om lysere themes gjerne er standard, er mørk modus bedre for både batteritiden, miljøet og øynene.

Få med dark mode fra begynnelsen når du jobber med designsystemer. Lag noen regler for enkel «oversettelse» fra light til dark mode, for eksempel at fargen blå i light mode blir hvit i dark mode.

Et nettsted med mye innhold tar mer plass på internett, og bruker derfor mer energi enn et mindre nettsted. Unngå å ha med unødvendige sider, bloggposter, tekster, bilder og videoer på nettstedet – ha kun med det som gir verdi for sluttbrukeren.

Søkemotoroptimalisering (SEO) handler om å gi brukerne det de faktisk spør etter. Da sørger søkemotorene for at brukerne finner nettstedet raskt. Dermed reduseres både antall søk og antall nettsider som lastes inn – noe som igjen reduserer energiforbruket.

Bruk søkeordsanalyser

En søkeordsanalyse gir deg svar på hvilke ord og fraser brukerne søker på. Dermed kan du lage innhold som besvarer brukernes spørsmål, slik at de ikke trenger å klikke seg til et annet nettsted for å få svar. Gjør du det godt, vil du også rangere høyere på disse ordene og frasene i Google.

Optimaliser metadata

Når du designer et nettsted, inneholder hver enkelt side metadata mellom head-taggene. Denne dataen beskriver hva siden handler om. Det er viktig å holde disse taggene oppdaterte med korrekt info, og å optimalisere dem med de riktige ordene fra søkeordsanalysen. Da øker sjansen for at siden rangerer på de riktige søkeordene i søkemotorene, slik at brukerne får den informasjonen de ønsker med få klikk.

• Metatittel: Metadata-feltet «title» bestemmer tittelen som vises på toppen av nettleservinduet(i fanen). Den vises også som overskrift på resultatsiden for søket i f.eks. Google. Hvis metadatatittelen er automatisert slik at den blir lik sidetittelen, er det viktig å bruke gjennomtenkte sidetitler som inkluderer nøkkelordet for siden.

• Metabeskrivelse: Metadata-feltet «description» er en tekstlig beskrivelse av siden, som søkemotorene kan velge å bruke på resultatsiden. Teksten bør være en kort og korrekt beskrivelse av hva nettsiden inneholder, inkludert viktige søkeord og/eller søkefraser.

Lag beskrivende lenketekster

Lenker knytter nettsider sammen og er en av kjernefunksjonene på et nettsted. Lenk gjerne, men bare til sider brukerne faktisk har behov for, slik at de ikke kaster bort energi på å klikke seg videre unødvendig.

Både av hensyn til søkemotoroptimalisering, universell utforming og generell brukervennlighet skal lenketekster være presise, tydelige, beskrivende og meningsbærende. Unngå generiske lenketekster som «Les mer» og «Klikk her». Lenkens mål skal fremgå tydelig i teksten, slik at brukerne får hjelp til å se om lenken er relevant for dem.

Legg inn alternative tekster for bilder og videoer

Beskriv meningsbærende bilder, videoer og andre visuelle medier med«alt»-taggene, slik at en tekstlig beskrivelse av disse kan vises når mediene ikke lastes inn. Dette er spesielt viktig for de som bruker skjermoppleser eller en nettleser som kun laster inn tekst (text-only browsers). Teksten forklarer også søkemotorene hva bildet eller videoen viser, noe som spiller inn på rangeringen.

Klarspråk er tekst med en så tydelig ordlyd, struktur og visuell utforming at brukerne finner det de trenger, forstår det og kan bruke det. Klarspråk skaper effektive digitale tekster og er helt avgjørende for god brukeropplevelse og mer bærekraftig innhold.

Usikker på hvordan du gjør det? Her er 6 enkle tips:

• Skriv kort og poengtert.

• Sett nøkkelinformasjon først.

• Fjern all overflødig informasjon.

• Strukturer teksten i lett fordøyelige avsnitt (i en logisk rekkefølge).

• Lag informative og dekkende overskrifter.

• Unngå «stammespråk» (og forklar fremmedord hvis du MÅ ha dem med).

Unngå autoplay av film, store filstørrelser og lange filmer. Videoer som spilles av automatisk er unødvendig energibruk/innlastning av data.

Spør deg selv:

• Tilfører filmen virkelig verdi for brukeren?

• Kan samme effekt oppnås med et bilde, en illustrasjon eller en infografikk?

• Kan filstørrelsen reduseres uten at det går ut over kvaliteten?

• Kan du redusere mengden video som streames ved å fjerne automatisk avspilling?

• Kan filmene kortes ned/klippes?

Hvis du ønsker animasjoner på siden, anbefaler vi at du bruker svg-filer og CSS-kode fremfor å laste opp en gif.

Store bilder og filer er med på å gjøre nettsiden tyngre. Faktisk er bilder ofte et av de tyngste elementene på en nettside – i snitt utgjør de hele 21 prosent av den totale tyngden. Du som er designer eller innholdsprodusent kan ta flere beslutninger som reduserer filstørrelsen på bildene, noe som automatisk også reduserer både energiforbruket og lastetiden for siden:

• Spør deg selv om bildet tilfører brukeren verdi.

• Last opp bilder i riktig skala istedenfor å lene deg på at CSS endrer størrelsen.

• Bruk verktøy som TinyPNG eller ShortPixel for å komprimere bilder uten synlig tap av kvalitet.

• Bruk det mest effektive filformatet for hvert bilde, for eksempel WebP istedenfor jpeg.

• Bruk vektorgrafikk og CSS-effekter for å skape en visuelt engasjerende opplevelse med mye mindre filer enn jpeg og gif (se under).

Videre lesning

How to optimize images for web and performance

Bildeformater som jpeg og png bygger bildene ved å bruke kvadratiske piksler. Jo større bildet er, desto flere piksler trengs for å vise det. Dette fører til tyngre filer. Du må dessuten kanskje laste opp bildet i flere størrelser for at det skal fungere på forskjellige skjermtyper og enheter.

Bruk derfor svg-filer (scalable vector graphic) fremfor jpeg og png der du kan. Skalérbar vektorgrafikk har mindre filstørrelse og er klar uansett hvilken størrelse den vises i.

Er innholdet fortsatt relevant? Hvis ikke, slett det.

• Bruk årshjul for vedlikeholdsoppgaver.

• Opprett rutiner for å slette eller optimalisere sider som får lite trafikk.

• Sett dato for avpublisering hvis mulig, og slett avpubliserte sider som ikke skal republiseres.

• Slett også bilder og filmer som kun brukes på sidene du sletter.