Käytettävyys vuonna 2022

Millaista softan käytettävyyden tulee olla vuonna 2022?

Usein käytettävyydestä puhuttaessa syntyy väärinymmärryksiä, kun kahdesta kontekstista puhutaan yhtenä. Nämä kaksi kontekstia ovat verkkosovellukset (ja mobiilisovellukset) sekä verkkosivut. Molempien käytettävyys on tietysti tärkeää, mutta käytettävyyden vaatimukset ja näkökulmat kontekstien välillä eroavat selvästi toisistaan. Tässä tekstissä puhun käytettävyydestä molempien kontekstien suhteen ja yritän tuoda erot niiden välillä mahdollisimman selkeästi esille.

Viisi käytettävyyden kannalta oleellisinta asiaa, joiden avulla käyttäjät haluavat käyttää sovellustasi tai sivuasi vielä vuonna 2022:

1. Nopeus

Kaikki ovat varmasti yhtä mieltä siitä, että käytettävyyden osalta sivun tai sovelluksen tulee avautua nopeasti. Verkkosivuja ja verkkosovelluksia käytetään kuitenkin usein hyvin eri tavalla. Verkkosivua käytetään hetkellisesti, esimerkiksi tietyn artikkelin tai uutisen lukemiseen, joten sen oletetaan aukeavan nopeasti. Myös jokaisen uuden sivun, kun käyttäjä esimerkiksi haluaa ensimmäisen uutisen jälkeen lukea toisen uutisen, oletetaan aukeavan yhtä nopeasti. Sovellukselle taas annetaan enemmän armoa. Sovelluksen, jota aikoo käyttää koko päivän, tai joka on auki koneella mahdollisesti viikkoja, aukeamista jaksetaan odottaa pidempään. Toisaalta, aukeamisen jälkeen käyttäjä olettaa, että sovellus on pääosin ladannut tarvitsemansa tiedot ja sen jälkeen uudet näkymät aukeavat lähes yhtä nopeasti kuin verkkosivutkin.

Tulee kuitenkin muistaa, että nopeuden mittaamisessa on kaksi eri kategoriaa: aito nopeus ja koettu nopeus. Vaikka sivu ei oikeasti olisikaan kovin nopea (aito nopeus), on olemassa erilaisia tapoja vaikuttaa käyttäjän havainnoimaan nopeuteen (koettu nopeus). Yksi esimerkki tästä on optimistinen käyttöliittymä (optimistic UI). Kun käyttäjä esimerkiksi Twitterissä tykkää twiitistä, sydämen kuva ilmestyy välittömästi, vaikka tykkäys ei olisikaan oikeasti tapahtunut niin nopeasti. Näin tehdään, koska todennäköisyys että asiat onnistuvat on suuri. Mikäli tuleekin joku ongelma, esimerkiksi nettiyhteys ei toimikaan, sivu ilmoittaa tästä käyttäjälle ja palauttaa tykätyn twiitin tilan alkuperäiseen tilaan. Toinen vaikuttava tekijä koettuun nopeuteen on animaatiot. Kun esimerkiksi sivun vaihtamisessa kestää hieman kauemmin, käyttäjälle voidaan näyttää animaatio, jonka aikana taustalla ladataan dataa. Tällöin sivun vaihto tuntuu käyttäjälle nopealta, vaikka taustalla joudutaankin tekemään työtä.

2. Animaatiot

Animaatiot parantavat käytettävyyttä muillakin tavoilla kuin koetun nopeuden parantamisessa. Animaatiot auttavat käyttäjää ymmärtämään relaatioita erilaisten käyttöliittymän osien välillä. Yksi esimerkki tästä on haitarivalikko (englanniksi "accordion"). Kun haitarivalikosta avaa kohteen, animaatio "avaa" haitarin ja näyttää mitä siellä on sen sijaan, että uusi näkymä vain räjähtäisi näytölle. Tämän lisäksi animaatiot näyttävät visuaalisesti tyydyttäviltä ja luovat hyvää fiilistä käyttäjälle. Mikrointeraktiot ja mikroanimaatiot (esimerkiksi Twitterissä twiitistä tykätessä sydän ei pelkästään muutu punaiseksi, vaan käyttäjä näkee myös pienen räjähdysanimaation) eivät yksinään ole tärkeitä käytettävyyden tai käyttökokemuksen kannalta, mutta kun niitä ripotellaan ympäriinsä, ne voivat luoda asiakkaiden usein kaipaamaa wow-efektiä. Animaatoita lisätessä täytyy kuitenkin aina muistaa, että ne voivat aiheuttaa joillekin käyttäjille pahoinvointia tai muita oireita, joten ne pitää voida kytkeä automaattisesti tai helposti pois päältä.

Animaatioihin vahvasti liitoksissa olevat eleet (gestures) ovat käytettävyyden kannalta tärkeässä roolissa erityisesti mobiilisovelluksissa. Sovellus ikään kuin vastaa käyttäjän eleisiin, jolloin se tuntuu elävältä. Yksi esimerkki tästä on se, kun käyttäjä yrittää scrollata sivulla alaspäin, vaikka se ei enää ole mahdollista. Syntyy ns. kuminauhaefekti, jolloin sovellus antaa käyttäjän scrollata, mutta alkaa sitten pistämään vastaan ja palaa alkupisteeseen kertoen käyttäjälle, että alempana ei ole enempää sisältöä. Ilman tämäntyylisiä ominaisuuksia sovellus tuntuisi kankealta ja tylsältä.

3. Responsiivisuus

On jo pitkään ollut tärkeää, että sivu tai sovellus toimii monella eri laitteella. Tästä vaatimuksesta tulee kuitenkin koko ajan haastavampaa, kun laitteiden kirjo kasvaa. Eri näyttökokojen lisäksi täytyy ottaa huomioon muun muassa laitteiden tehokkuus ja nettiyhteyden toimivuus. Ensiksi on hyvä tietää oma kohdeyleisö sekä tutustua siihen, koska laitteiden ominaisuudet vaihtelevat suuresti markkinoittain. Jos sivun tai sovelluksen käyttäjinä on esimerkiksi vain suomalaisia, pääsee helpommalla, kuin jos käyttäjiä on ympäri maailmaa. Monikansallisen sivun tai sovelluksen suunnittelussa tulee ottaa huomioon muun muassa se, että monissa maissa käyttäjillä ei ole käytössään uusinta puhelinta tai rajatonta mobiilinettiä.

Verkkosivut ovat usein rakenteeltaan yksinkertaisempia kuin verkkosovellukset, mikä tekee responsiivisuuden tukemisesta helpompaa. Verkkosivun tarvitsee pääosin vain mukautua laitteen asettamiin rajoitteisiin muokkaamalla rakennettaan hienovaraisesti. Esimerkiksi isolla ruudulla kuvagallerian kuvat asettuvat koko ruudun täyttävään ruudukkoon, mutta taas pienemmillä ruuduilla kuvat asettuvat yksi kerrallaan allekkain tilan puutteen takia. Verkkosovellukset usein sisältävät monimutkaisempia komponentteja, kuten interaktiivisia taulukkoja tai älykkäitä hakukenttiä, joiden käyttötavat eri laitteilla voivat vaihdella merkittävästi. Esimerkiksi mobiililaitteilla virtuaalinen näppäimistö peittää ison osan ruudusta, kun syötekenttään kirjoitetaan sisältöä. Tämän kaltaiset eroavaisuudet eri laitteiden välillä voivat johtaa siihen, että yksinkertainen responsiivisuus ei enää riitä. Käyttäjälle joudutaankin tarjoamaan ominaisuudesta laitekohtainen toteutus, joka on räätälöity laitteen rajoitteet huomioiden, jotta käytettävyys pysyy hyvänä.

Tavallisen sovelluksen lisäksi nykyään on mahdollista rakentaa myös progressiivinen verkkosovellus (PWA, progressive web application), joka oikein rakennettuna muistuttaa natiivisovelluksia tarjoten samanlaisia ominaisuuksia, kuten sovellusikonin, splash-ruudun tai offline-tuen. Tällöin käyttäjä voi asentaa verkkosivun suoraan kotinäkymäänsä sovellukseksi. Käynnistyessään asennettu PWA muistuttaa natiivisovellusta, poistaen esimerkiksi ruudun ylä- ja alareunoista selaimista tutut palkit valikoille ja hakukentälle. Progressiivisen verkkosovelluksen käyttökokemus ja käytettävyys ovat täten lähtökohtaisesti paremmat kuin tavallisen verkkosivun.

4. Vikasietoisuus

Nykyään käyttäjät olettavat ja luottavat, että sovellukset ratkaisevat ongelmatilanteita kuin itsestään. Jos käyttäjä lähettää viestin Slackissa, ja yhteys katkeaa, hän olettaa, että viesti lähtee kun yhteys palaa. Ongelmatilanteiden käsittely liittyykin vahvasti edellä mainittuun optimistinen käyttöliittymä -konseptiin: mikäli todennäköisyys ongelmille on suuri, pienenevät optimistisen käyttöliittymän hyödyt merkittävästi. Ympäristöissä, joissa esimerkiksi verkkoyhteys on usein heikko, kuten maan alla tai luonnossa, on käyttäjän luotto sovellukseen otettava erityisen tarkasti huomioon. Hyvä esimerkki tällaisesta tapauksesta on Google Maps, jossa on mahdollista ladata alueen kartta etukäteen puhelimeen, jolloin karttaa on mahdollista lukea ilman nettiyhteyttä.

Usein käyttäjän oletuksena on, että sovellus tekee erilaisia ratkaisuja virhetilanteissa käyttäjän puolesta tai automaattisesti tarjoaa vaihtoehtoja ongelman ratkaisemiseksi antaen käyttäjälle kontrollin valinnan suhteen. Esimerkiksi ladattaessa monta kuvaa kuvagalleriasovellukseen voi systeemi yrittää virhetilanteessa automaattisesti ladata kuvan uudestaan. Ongelman toistuessa systeemi kuitenkin siirtää kontrollin käyttäjälle antaen hänen yrittää latausta manuaalisesti uudestaan. Lähestymistavasta huolimatta tärkeä osa käytettävyyttä on pitää käyttäjä ajan tasalla siitä mitä on tapahtunut.

Verkkosivujen tapauksessa vikasietoisuus ei ole yhtä oleellisessa roolissa kuin verkkosovelluksissa, sillä verkkosivut sisältävät pääosin staattista sisältöä. Mikäli sivun lataaminen onnistuu, voi käyttäjä usein olettaa, että sivu toimii moitteettomasti siitä eteenpäin.

5. Saavutettavuus

Yksilöiden erilaisista rajoitteista huolimatta verkkosivun tai verkkosovelluksen tulisi olla saavutettava kaikille. Jos tiettyjä asioita ei ota huomioon, sivu tai sovellus voi olla käyttökelvoton osalle käyttäjistä. Verkkosivulla saavutettavuuden toteuttaminen on usein helpompaa kuin sovelluksessa, sillä tarkoituksena on lähinnä sisäistää informaatiota interaktioiden sijaan. Esimerkiksi sisällön rakenne ja semanttisuus ovat erityisen tärkeitä käyttäjälle, joka ei pysty lukemaan ja käyttää ruudunlukijaa. Navigoiminen näppäimistön avulla taas on tärkeää käyttäjälle, joka ei motoristen ongelmien takia pysty käyttämään hiirtä.

Kuten aikaisemmin on jo mainittu, verkkosovellukset usein sisältävät monimutkaisempia komponentteja kuin verkkosivut. Tällaiset komponentit sisältävät moniulotteisia interaktoita, joiden saavutettavuusvaatimukset ovat huomattavasti staattista sisältöä korkeampia. Tutkitaan lyhyesti seuraavaa popup-ikkkunaesimerkkiä saavutettavuuden kannalta. Kun käyttäjä avaa popup-ikkunan, seuraavat asiat ovat olennaisia hyvän saavutettavuuden aikaan saamiseksi:

• Popup-ikkuna näytetään pääsovelluksen HTML-hierarkian ulkopuolella ja pääsovellus piilotetaan ruudunlukijoilta.
• Pääsovelluksen scrollaus estetään, jotta tietyillä selaimilla popup-ikkunan taakse jäävä sovellus ei vahingossa liiku scrollatessa.
• Huomio (focus) siirretään popup-ikkunan sisään, useimmin ensimmäiseen interaktiiviseen elementtiin, jotta käyttäjä voi navigoida popup-ikkunan sisältöä Tab-näppäimen avulla.
• Estetään huomion siirtyminen pois popup-ikkunan sisältä, mikäli käyttäjä navigoi Tab-näppäimellä popup-ikkunan sisällön loppuun.
• Käyttäjälle tarjotaan mahdollisuus sulkea popup-ikkuna painamalla Esc-näppäintä tai klikkaamalla popup-ikkunan ulkopuolelle.
• Popup-ikkunan täytyy sisältää semanttinen otsikko sekä erillinen nappi, jonka avulla popup-ikkuna voidaan sulkea ruudunlukijan ymmärtämällä tavalla.
• Kun popup-ikkuna suljetaan, huomio siirretään takaisin siihen elementtiin, joka avasi ikkunan.

Edellinen esimerkki ei ole edes monimutkaisemmasta päästä, mikä tuo hyvin ilmi, miten ulospäin yksinkertaiselta vaikuttavan komponentin toteuttaminen saavutettavasti onkin yllättävän haastavaa.

Saavutettavuuden edellyttämät näppäimistövuorovaikutukset eivät ole pelkästään rajoitteisten käyttäjien vaatima taakka, vaan niistä on usein hyötyä myös sovelluksen edistyneemmille käyttäjille. Tehokäyttäjät ovat jo oppineet käyttämään sovellusta perustasolla, mutta haluavat tehostaa käyttöään esimerkiksi erilaisilla pikakomennoilla, joiden avulla sovellusta voi hallinnoida nopeammin. Esimerkiksi Slackissa on käytössä paljon pikakomentoja, joiden avulla voi tehdä asioita, kuten aloittaa keskustelun henkilön kanssa ilman valikon selaamista.

Muista siis nämä:

Satunnaisten käytettävyyttä parantavien ominaisuuksia sijaan tärkeintä on ensiksi ymmärtää, mitä onkaan tekemässä ja kenelle. Onko kyseessä verkkosivu, verkkosovellus vai mobiilisovellus? Kuka on kohderyhmänä, ja mikä on juuri heille tärkeintä? Kun kohderyhmä ja käyttötarkoitus ovat selvillä, verkkosivun tai verkkosovelluksen käytettävyysvaatimukset on paljon helpompi hahmottaa.