‹ Blogi

Vihreiden visuaalisten elementtien pikaopas

03.10.2023

Viisaasti suunniteltu visuaalinen sisältö on hyvä keino paloitella digitaalinen palvelu osiin ja välittää informaatiota käyttäjälle, mutta se tuottaa huomattavan osan digipalvelun päästöistä. Palvelun sisällön päästökuormaa voi kuitenkin suhteellisen pienellä vaivalla vähentää tinkimättä sen ulkomuodon tasosta.

Visuaalisilla elementeillä tarkoitetaan esimerkiksi värejä, muotoja, teksti- ja kuvaelementtejä sekä tilankäyttöä. Ne ovat oleellinen osa mitä tahansa digipalvelua ja auttavat käyttäjää navigoimaan suunniteltua palvelupolkua. Kuitenkin nykyajan visuaalisen informaation ähkyssä on hyvä pohtia, tuovatko palvelun visuaaliset elementit siihen todellista lisäarvoa.

Yhä useampi vähähiilisten digipalveluiden puolestapuhuja on kannustanut palveluja kehittäviä tahoja tarjoamaan käyttäjille mahdollisuuden vaihtaa tumman tilan kaltaiseen low energy -tilaan. Esimerkiksi kehittäjä Tom Jarrett kehitti kokeilun vähäpäästöisestä Instagramista, jossa käyttäjän vaihdettua low energy -tilaan kuvien tilalla oli vain vaihtoehtoinen teksti värialueen päällä. Kuvaa napauttamalla käyttäjä sai halutessaan sen näkyviin. Tällaiset vähähiiliset tai –energiset tilat voivat tukea palvelun käyttöä esimerkiksi alueilla, joissa verkko on tavallista hitaampi. Tulevaisuudessa low energy -tila tai responsiivisesti sähköverkon vihreän sähkön saatavuuteen reagoivat käyttöliittymät voivat olla arkipäivää.

Optimoi käyttöliittymän kuvaelementit ja värivalinnat

Joidenkin näyttötyyppien (esim. OLED-näytöt) eri väri- ja kirkkausasetuksilla voi olla huomattava vaikutus käyttöliittymän energiankulutukseen. Näin ollen vähähiilisyys olisi hyvä huomioida mahdollisimman aikaisessa vaiheessa esimerkiksi brändivärejä suunnitellessa. Esimerkiksi videopalvelu YouTuben tumman teeman huomattiin testeissä vievän keskimäärin jopa 60 % vähemmän energiaa. Musta onkin väreistä kaikista vähäenergisin. Vastaavasti valkoisen on huomattu olevan joillekin näytöille pahin energiasyöppö, erilaiset sinisen sävyt sen vanavedessä. Jo saavutettavuussyistä on hyvä suosia mahdollisimman korkeakontrastisia väriyhdistelmiä, mutta korkeakontrastista, selkeärakenteista käyttöliittymää on kaikkien helpompi navigoida haastavammissakin olosuhteissa.

Monessa palvelussa esimerkiksi brändi-identiteettiä, tuotteen informaatiota tai palvelun käytön ohjeistusta tuetaan kuvamateriaalilla. Nämä kuvat ovat usein korkealaatuisia valokuvia, vaikka kyseessä olisi mobiililla luettava verkkopalvelu ja usein kuvat tuovat lähinnä silmäniloa välttämättömän informaation sijaan. Tiedostomuodon, skaalautuvuuden ja laadun optimoinnin lisäksi on hyvä pohtia, mikä pohjimmainen tarkoitus kuvalla oikeastaan on. Voisiko saman tiedon välittää vaikkapa ikonilla, fonttielementillä, vektorigrafiikalla tai jopa pelkällä värialueella?

Video on usein raskas ja esteellinen

Tällä hetkellä viestinnässä on havaittavissa selkeä lyhyiden videoiden trendi. Video on kuitenkin vielä kuviakin raskaampi tiedostomuoto ja sen välittämän informaation saa monesti välitettyä esimerkiksi kuvan tai tekstin avulla. Videon katsominen vaatii myös käyttäjältä edellä mainittuja enemmän, esimerkiksi tarpeeksi hiljaisen ympäristön ja enemmän keskittymiskykyä. Saavutettavuusvaatimusten mukaan videot tulisi myös tekstittää julkisen sektorin palveluissa, joten niiden hyödyntäminen on myös tekijöille työlästä.

Mikäli videon käyttäminen on tarpeen, esimerkiksi opetusvideoiden tapauksessa materiaali kannattaa jakaa pienempiin osiin ja otsikoida asianmukaisesti. Lisäksi autoplay on syytä jättää pois. Tällöin yksittäistä asiaa tutkiakseen ei videosta tarvitse ladata kuin oleellinen pätkä ja käyttäjä pystyy kontrolloimaan palvelussa etenemistään paremmin. Olisi myös viisasta asettaa videon laatu automaattisesti HD-laatua huonommaksi ja antaa käyttäjälle mahdollisuus ladata videosta vain audio.

Vihreä on viisaasti tehty 

Ympäristöystävällinen digitaalinen sisällöntuotto vaatii tekijältään totuttelua ja vaivannäköä. Lopputulos on kuitenkin usein perinteistä lähestymistapaa virtaviivaisempi ja helppokäyttöisempi. Suunnitteluprosessissa kannattaa hyödyntää muilta lainattuja tai itse koottuja tarkistuslistoja. Palvelujen erilaiset low energy –tilat tukevat myös käyttäjän autonomiaa ja tuovat joustavuutta käyttökokemukseen.

Kun asennoituu tekemään suunnitteluprosessin jo lähtökohtaisesti vihreästi, ovat ratkaisut helpommin ymmärrettäviä myös asiakkaille. Optimoimalla palvelun visuaaliset elementit suunnittelija kuitenkin kerryttää säästöjä niin kustannustehokkuuden kuin päästöjenkin kannalta.

Lue lisää käytännön vinkkejä ympäristöystävälliseen käyttöliittymäsuunnitteluun pian ilmestyvästä Green Design -oppaastamme!


Minnaleena Jaakkola
minnaleena.jaakkola@netum.fi

Lähteet 

Slashgear, “Google’s big Android battery ‘oops’ and future dark modes’”, Chris Burns, 8.11.2018
https://www.slashgear.com/googles-big-android-battery-oops-and-future-dark-modes-08553037  
Tom Jarrett “Low Energy Instagram”, 2020
https://tomjarrett.earth/Low-Energy-Instagram  
Climate.tech opas kuvien optimointiin
https://climateaction.tech/actions/create-low-carbon-images/  
Dodonut Agency artikkeli vastuullisista web design elementeistä, Justyna Weronika Labadz, 26.9.2022
https://dodonut.com/blog/how-to-design-a-sustainable-website-quiz/  

 

Haluatko lisätietoja? Ota meihin yhteyttä.

Tagit:
Green Design, vastuullisuus, vihreä kehittäminen, vihreä koodaus, vihreät toimintamallit