OSA 1: Käyttöliittymä- ja käyttäjäkokemus­suunnittelu - UI/UX:n rooli energia­tehokkuudessa

Käyttöliittymä- ja käyttäjäkokemussuunnit­telu suunnitteluprosessin varhaisessa vaiheessa 

Ensimmäinen UI/UX-sääntö: ymmärrys tavoitteista - energiatehokkuus yhdeksi tavoitteeksi  

Käyttöliittymä- ja käyttäjäkokemussuunnittelu, eli UI/UX-suunnittelu, on sovelluskehityksen aikana tapahtuva iteratiivinen työvaihe, jonka avulla määritellään keinot saada sovellus palvelemaan sidosryhmien tavoitteita ja tarpeita mahdollisimman hyvin. Hyvän käyttökokemuksen pohjaksi tulee luoda perusteellinen ymmärrys siitä mitä ollaan tekemässä, miksi ja kenelle.  

Ymmärryksen kartuttaminen tapahtuu suunnitteluprosessin alkuvaiheessa esimerkiksi haastattelujen ja tutkimusten kautta. Nykytilan ja tulevaisuuden tavoitetilan väliset sillat kuvataan esimerkiksi työpajatyöskentelyn tukemana. Ideaalitilanteessa käsissämme on varhaisessa vaiheessa selkeä käsitys mitä halutaan saavuttaa, millaisia mahdollisuuksia ja uhkia kokonaisuus sisältää ja millaisilla resursseilla matkaan lähdetään. 

Ympäristövaikutuksia tulee käsitellä yhtenä tunnistettuna resurssina heti alussa. Esimerkiksi sovelluksen energiatehokkuus on asetettava yhdeksi keskeiseksi tavoitteeksi varhaisesta suunnitteluvaiheesta lähtien, jotta se ohjaa päätöksentekoa koko kehitysprosessin ajan. 

Ymmärrysvaiheen onnistuminen on UI/UX-suunnittelun kulmakivi, sillä ilman sitä ratkaisut ovat parhaimmillaankin vain hyviä arvauksia. Suunnitteluprosessin seuraavissa vaiheissa keskitytään konkreettisempien ratkaisujen ideointiin ja mallintamiseen, prototyypin rakentamiseen sekä lopuksi validointiin erilaisten menetelmien avulla. 

Millaisilla suunnittelumenetelmillä sovelluksen energiatehokkuuteen voi vaikuttaa? 

Mutkat suoriksi – helppokäyttöisyys vähentää tehtävän suorittamiseen kuluvaa aikaa 

Toinen UI/UX-sääntö: käytön tulee olla nopeaa ja virheetöntä 

Kuvittele, että olet matkalla ystäväsi luo vieraassa kaupungissa. Puhelimesi akun varaus lähestyy nollaa ja joudut tarkistamaan määränpääsi tarkan sijainnin karttapalvelusta vielä kerran. Mitä mielessäsi on sillä hetkellä? 

Kurjuuden maksimoimiseksi kuvittelin itse tämän kaiken tapahtuvan vesisateessa, mutta sen lisäksi mielikuvassani sanon “Nopeasti nyt, akku loppuu!”. 

Päätöksen tekemiseen kuluva aika kasvaa valintojen määrän ja monimutkaisuuden myötä. - Hick’s Law 

Onko sovelluksen käytön tärkeää olla nopeaa ja suoraviivaista vain silloin, kun on kiire vai voisiko se olla sitä aina? Tarkistaessasi osoitetta haluat oletettavasti toimia nopeasti, jotta käyttäisit mahdollisimman vähän virtaa tehtäväsi suorittamiseen. Tiedostamme siis ajattelemattakin, että nopeasti toimiminen on energiatehokasta, mutta jostain syystä emme aina ajattele sitä silloin, kun akun varaus ei vielä näytä huolestuttavalta. 

Jotta voimme toimia nopeasti, sovelluksen käytön on oltava helppoa ja sen saavuttamiseen on useita keinoja. Esimerkiksi käyttäjäpolkuja kartoittamalla voimme havaita prosessista pullonkauloja ja muita ongelmakohtia. Hyödyntämällä käyttäjälle valmiiksi tuttuja toimintamalleja, pitämällä sovelluksen rakenne ja ilme johdonmukaisena sekä säilyttämällä selkeän hierarkian eri elementtien välillä voimme minimoida sovelluksen käyttöön vaadittavaa oppimiskäyrää. Tarjoamalla toimintoja ja valintoja vain sen verran kuin on tarve voimme helpottaa käyttäjän päätöksentekoa. Voimme avustaa käyttäjää toimintojen suorittamisessa hyödyntämällä älykkäitä avustustoimintoja kuten lomakkeen tietojen automaattista täyttöä tai ennustavaa hakua. Voimme auttaa käyttäjää tarjoamalla selkeitä ohjeita tehtävän suorittamiseen. Joissain tapauksissa käyttäjälle voidaan jopa antaa mahdollisuus räätälöidä käyttöliittymä vastaamaan täysin omia tarpeitaan.

Kaikki on aina tapauskohtaista ja sopivien menetelmien käyttö riippuu aina käsillä olevasta kokonaisuudesta, ja siitä kenelle sitä tehdään. Edellä mainittuja menetelmiä hyödyntämällä voi kuitenkin jo pienentää tehtävän suorittamiseen kuluvaa aikaa huomattavasti – ja ennen kaikkea pitää käyttäjän tyytyväisenä (MitViDi, B6 Kriteerikortti: Käytettävyyden optimointi) . 

Suunnitellaan tarpeeseen – energiatehokkaat käyttöliittymäratkaisut 

Kolmas UI/UX-sääntö: osaava suunnittelija ymmärtää valintojen ympäristövaikutukset ja tuo niitä aktiivisesti esille 

Kun tavoitteena on energiatehokkuus, käyttöliittymäsuunnittelussa tehdyillä valinnoilla on väliä. Jotta lopullinen käyttöliittymä voi näkyä käyttäjälle, käyttäjän laitteen pitää piirtää se näytölle prosessoimansa tiedon pohjalta. Tämä prosessi suoritetaan laitteen sisällä olevien komponenttien avulla ja toimiakseen ne tarvitsevat myös energiaa. 

Tarvitun energian määrään voimme vaikuttaa käyttöliittymäsuunnittelussa tehdyillä valinnoilla. Hyvänä esimerkkinä toimii nykypäivänä moneen sovellukseen ja käyttöjärjestelmiin ilmaantunut “dark mode”, eli pimeä tila. Vaikka monesti pimeän tilan käyttämät tummat sävyt tuovat mukavaa vaihtelua käyttöliittymän ilmeeseen, sitä ei olla keksitty pelkästään esteettisistä syistä. 

Näyttö on älypuhelimen suurin virtasyöppö, mutta tiesitkö, että OLED- ja AMOLED-teknologioita hyödyntävillä näytöillä mustan värin toistaminen näytöllä ei kuluta ollenkaan energiaa? Digitaalisesti toistettavat värit muodostuvat erilaisista yhdistelmistä punaista, vihreää ja sinistä valoa. Valkoinen väri muodostuu siten, että kaikki kolme eri väristä valoa ovat päällä samaan aikaan täydellä teholla. OLED- ja AMOLED-teknologioita hyödyntävillä näytöillä mustan pikselin kohdalla on kolme led-valoa, jotka ovat kaikki pois päältä eikä se siten kuluta ollenkaan energiaa. 

Tämä ei kuitenkaan tarkoita sitä, että kaiken tulisi olla mustaa, sillä punaisen, vihreän ja sinisenkin välillä on eroja virrankulutuksessa. Käyttöliittymän värivalinnoilla voi siis olla suuri merkitys sovelluksen energiatehokkuuteen, ja tulevaisuudessa näemme todennäköisesti enemmän tummia ja energiatehokkaita väripaletteja verrattuna nykyisiin vaaleampiin sävyihin. Tulevaisuudessa myös esimerkiksi sinisen värin määrä voi vähentyä sen heikommasta energiatehokkuudesta johtuen.  

Case: OLED-näytöt ja Dark Mode - Energiansäästöä käytännössä

Kuvitellaanpa organisaatio, jonka asentajilla on käytössään Android-puhelimet OLED-näytöillä. Heillä on päivittäin noin neljän tunnin ajan käytössä työtä ohjaava mobiilisovellus, joka toimii työkaluna työkohteiden hallinnassa, tarkastuksissa ja raportoinnissa. Tämän sovelluksen käyttäjiä on yhteensä 200, ja heidän keskuudessaan päätetään ottaa käyttöön dark mode -ominaisuus, jonka aktivoi 60% käyttäjistä. 

OLED-näyttöjen yksi merkittävä etu on niiden energiatehokkuus, erityisesti kun käytetään tummia värejä. Dark moden käyttöönotolla on näin ollen suora vaikutus puhelimen energiankulutukseen. OLED-näytöissä musta väri tarkoittaa, että pikselit eivät ole päällä, mikä vähentää energiankulutusta huomattavasti verrattuna perinteisiin LCD-näyttöihin.Tässä tapauksessa, kun 120 käyttäjää (60% 200:sta) siirtyy käyttämään dark modea, säästyy vuodessa merkittävä määrä energiaa. Alkuperäisten laskelmien mukaan, tämä tarkoittaa noin 140.16 kWh energiansäästöä vuodessa, kun verrataan tilannetta ilman dark modea. 

Tämä esimerkki osoittaa, kuinka teknologiset valinnat, kuten OLED-näyttöjen ja dark moden käyttö, voivat tehdä suuren eron energiankulutuksessa. Organisaatiot, jotka ottavat käyttöön tällaisia ominaisuuksia, eivät ainoastaan edistä kestävää kehitystä, vaan voivat myös vähentää kustannuksia pitkällä aikavälillä. Energiatehokkuus ei ole pelkästään ympäristöystävällistä, vaan myös taloudellisesti järkevää. 

Toiminnalliset komponentit, mikrointeraktiot ja animointi 

Myös toiminnallisten komponenttien, kuten esimerkiksi valikoiden tai painikkeiden animointeja tulisi tehdä vain silloin kun sille on tarve. Käyttöliittymäsuunnittelussa on paljon mahdollisuuksia luoda ns. ”wau-efektejä” ja liikkeen hyödyntäminen on yksi tehokas työkalu tähän. Jotkut muistavat varmasti joitakin vuosia sitten verkkosivustoilla suositun, sittemmin huonoksi havaitun trendin, jossa verkkosivuston kuvat tai muut elementit liikkuivat sivustoa skrollatessa samaa tahtia toiseen suuntaan. Tätä kutsutaan Parallax-efektiksi. Kyseinen menetelmä todettiin huonoksi lähinnä saavutettavuussyistä, mutta toimii samalla erinomaisena esimerkkinä tarpeettomasta liikkeestä käyttöliittymässä.

Käyttöliittymän osien animoinnit ja mikrointeraktiot vaativat laitteelta enemmän suorituskykyä ja kuluttavat siten myös enemmän energiaa. Liikkeen hyödyntäminen käyttöliittymässä voi parantaa käyttäjäkokemusta, mutta sen tulisi tapahtua vain silloin, kun se tuo todellista lisäarvoa eikä aiheuta käyttäjille haittaa. 

Mukautettavuus käyttökokemuksen parantajana 

Neljäs UI/UX-sääntö: anna käyttäjälle valtaa mukauttaa käyttöliittymää.  

Aiemmin artikkelissa tuotiin esiin käyttäjän mahdollisuus räätälöidä itse sovellusta juuri hänelle parhaiten sopivaksi muuttamalla sovelluksen asetuksia. Kutsutaan tätä mukauttamiseksi. Käyttöliittymän mukautettavuus auttaa käyttäjien yksilöllisten tarpeiden huomioinnissa. Omien valintojen avulla käyttäjät voivat hyödyntää heille olennaisia toimintoja ja näin optimoida itse käyttöliittymää. Tämän avulla voidaan välttää tarpeetonta resurssien käyttöä. Mukautettavuus tekee käytöstä helpompaa, vähentää virheitä ja parantaa työskentelyä digitaalisen palvelun kanssa. (Lähde 1. MitViDi: A7 Kriteerikortti: Ohjelmisto sallii asetusten muokkaamisen) 

Jotkut keinot voivat olla hyvin yksinkertaisia, kuten valinta automaattisen videotoiston ja käyttäjän itse klikkaaman käynnistyksen välillä. Sanotaan, että kuva kertoo enemmän kuin tuhat sanaa, joten kertooko video enemmän kuin tuhat kuvaa? Ei välttämättä, mutta se saattaa kuitenkin toistaa tuhat kuvaa jo lyhyessäkin ajassa  

Videoiden toisto vaatii laitteelta suorituskykyä enemmän kuin kuvamateriaalin toisto ja vaikuttaa siten sekä virrankulutukseen että sovelluksen käyttökokemukseen – video on myös tiedonsiirron näkökulmasta iso.  Energiasäästöä syntyy tiedostokokojen ja pyyntöjen määrästä, jota käyttökokemussuunnittelija voi yhdessä sovelluskehitystiimin kanssa hallita. Tätä tiedonsiirron merkitystä käsitellemme lisää seuraavissa blogisarjan artikkelissa. 

Seuranta ja jatkokehitys 

Viides UI/UX-sääntö: optimoidaan kun saadaan tietoa todellisesta käytöstä 

Kun sovellus pääsee tuotantoajoon, ollaan uuden haasteen äärellä. Sovelluksen suorituskykyä tulisi seurata aktiivisesti, jotta voidaan mitata tehtyjen ratkaisujen toimivuutta. Parannuksia vaativien kohtien ilmaantuessa, niihin reagoidaan. Tässä vaiheessa suunnitteluprosessia kuvaan astuu optimointi.  

Seurantaa voi tehdä monella tapaa, kuten keräämällä käyttäjäpalautetta tai mittaamalla suorituskykyä hyödyntäen analytiikkatyökaluja. Tärkeitä tietoja mittaamisessa ovat esim. kuinka kauan käyttäjällä kesti suorittaa jokin tehtävä, kuinka pitkiä latausajat olivat, mitä näkymiä tai toimintoja käyttäjä useimmin hyödynsi, mistä käyttäjä saapui tiettyyn näkymään tai minne hän jatkoi siitä. Näistä tiedoista voidaan vetää monia yksittäisiä johtopäätöksiä, mutta pääpointti on kuitenkin siinä, että voimme tunnistaa ongelmakohtia tai jopa tehdä huomioita, joita emme aiemmin olleet osanneet edes ajatella. 

Yhteenveto 

Ennakoimme, että sovellusten energiatehokkuus tulee muodostumaan tulevaisuudessa vaatimukseksi, joka on otettava huomioon jo suunnitteluvaiheessa. Digitaalisten palveluiden UI/UX suunnittelijoilla on tärkeä rooli ympäristövaikutusten minimoinnissa. Aiheeseen kannattaa tarttua jo tänään, sillä hyvän sovelluksen elinikä on pitkä ja tänään tehdyt ratkaisut vaikuttavat pitkälle tulevaisuuteen. 

Yksittäisen sovelluksen vaikutus ympäristön hyvinvointiin voi tuntua pieneltä, mutta kun jokainen sovellus suunnitellaan mahdollisimman energiatehokkaaksi, sillä on merkittävä vaikutus. 

Näiden blogissa avatun viiden säännön avulla UI/UX-suunnittelijat voivat merkittävästi edistää sovellusten energiatehokkuutta, mikä on olennainen osa kestävän kehityksen tavoitteiden saavuttamista digitaalisessa maailmassa.  

1. Ymmärrys tavoitteista: Energiatehokkuus tulisi asettaa yhdeksi keskeisistä suunnittelutavoitteista.
2. Nopeus ja virheettömyys: Käyttöliittymän tulee mahdollistaa nopea ja virheetön käyttö. Näin vähennetään turhaa energiankulutusta ja parannetaan kokonaiskäyttökokemusta.
3. Ympäristövaikutusten ymmärrys: Osaava suunnittelija tunnistaa suunnittelupäätösten ympäristövaikutukset ja tuo nämä seikat aktiivisesti esiin prosessissa. Tietoisuus valintojen seurauksista auttaa luomaan energiaa säästäviä ratkaisuja.
4. Käyttäjän mukauttamisoikeus: Antamalla käyttäjille mahdollisuuden mukauttaa käyttöliittymää heidän omien tarpeidensa mukaan, voidaan vähentää tarpeetonta toiminnallisuutta ja siten energiankulutusta.
5. Todellisen käytön optimointi: Keräämällä tietoa sovelluksen todellisesta käytöstä, voidaan tunnistaa ja optimoida ne alueet, joissa energiatehokkuutta voidaan parantaa.

Tämän artikkelin lähteinä ovat toimineet: 

• (1) MitViDi-portaali: https://mitvidi.tt.utu.fi/ 

• (2) Hick’s Law: https://lawsofux.com/hicks-law/ 

Kirjoittaja: Matias Valo