Saavutettavuuden näkökulmasta mikrointeraktiot ovat erityisen kiinnostavia, sillä nämä pienet yksityiskohdat saattavat määrittää, onko palvelu aidosti ymmärrettävä ja käytettävä kaikille. Kun ne toimivat hyvin, ei niitä juuri huomaa, mutta väärään aikaan tai väärin toteutettu interaktio voi jättää käyttäjän arvailemaan ja kuormittaa. Pahimmillaan ne voivat jopa luoda palveluun käytön esteitä.
Tutustutaan seuraavaksi erilaisiin mikrointeraktioihin ja niiden yleisimpiin saavutettavuuspuutteisiin.
Mikrointeraktioiden visuaalisuus
Visuaaliset mikrointeraktiot tulevat usein välittömästi näkyviin, kun käyttäjä on vuorovaikutuksessa käyttöliittymän kanssa. Niiden tehtävä on antaa varmuutta siitä, että järjestelmä on huomannut käyttäjän toiminnan ja reagoi siihen. Suurin osa verkkosivuilla käytetyistä mikrointeraktioista on visuaalisia.
Visuaalisia mikrointeraktioita ovat esimerkiksi
- kun lomakekenttä muuttuu punaiseksi, jos lomakkeessa on virhe
- kun painike reagoi aktivointiin kevyellä pompahduksella
- statusviestit, kuten “Lähetetty”, kun käyttäjä on lähettänyt lomakkeen
- painikkeesta avautuvat työkaluvihjeet.
Kiinnitä huomiota seuraaviin asioihin, kun suunnittelet visuaalisia mikrointeraktioita:
Väri ei saa olla ainoa tapa viestiä
Monet palvelut viestivät eri asioita väreillä: Punainen väri kertoo useimmiten virheestä tai kiinnittää huomion johonkin asiaan, vihreä taas onnistumisesta. Väri on tehokas korostuskeino, mutta ainoastaan värejä näkeville käyttäjille.
Tiesitkö, että jopa kahdeksalla prosentilla ja 0,5 prosentilla naisista on värisokeus? Se tarkoittaa yli kahtasataatuhatta ihmistä pelkästään Suomessa.
Värejä ei onneksi tarvitse välttää, sillä ne ovat hyvä keino lisätä palvelun kognitiivista saavutettavuutta. Muista kuitenkin ottaa huomioon pari saavutettavuuteen liittyvää asiaa, että kaikki käyttäjät hyötyvät interaktiosta: Huolehdi, että värin kontrasti suhteessa taustaan on riittävä ja varmista, että käytät jotain muutakin tapaa viestin ilmaisemiseen. Esimerkiksi tekstimuotoinen ilmoitus lomakkeen virheestä varmistaa, ettei tieto ole vain värin näkemisen varassa. Tukea saat WCAG:n onnistumiskriteeristä 1.4.1 Värien käyttö.
Animaatiot ja liikkeeseen liittyvät saavutettavuuspuutteet
Animaatioiden ja liikkuvien elementtien kanssa kannattaa olla tarkkana, koska liiallinen liike tai äkilliset animaatiot voivat olla erittäin epämiellyttäviä käyttäjille. Sen lisäksi, että ne häiritsevät keskittymistä, ne voivat myös aiheuttaa joillekin käyttäjälle pahoinvointia tai neurologisia oireita. Samaan kategoriaan kuuluvat myös vilkkuvat elementit, jotka voivat pahimmillaan jopa laukaista vakavan sairaskohtauksen.
Jos siis suunnittelet animaatioita, pidä huoli, että liikkuva kohde on tarpeeksi pieni, se ei välky ja että liike ei ole suurta. Käyttäjän pitää myös pystyä pysäyttämään tai piilottamaan liikkuva sisältö. Tukea saat WCAG:n onnistumiskriteereistä 2.3.1 Kolme välähdystä tai alle raja-arvon ja 2.2.2 Tauota, pysäytä, piilota.
Mikrointeraktioiden toiminnalliset haasteet
Mikrointeraktioiden visuaalisen ulkoasun lisäksi on tärkeää myös se, miten ja minkä vuorovaikutuksen seurauksena ne aktivoituvat. Ongelmia voi tulla vastaan, jos mikrointeraktiot
- aktivoituvat liian herkästi
- aktivoituvat epäloogisesti suhteessa käyttäjän toimintaan
- vaativat liian monimutkaista elettä aktivoituakseen.
Vältä turhia kontekstinmuutoksia
Tyypillinen ongelma mikrointeraktioissa on se, että käyttäjän toiminta laukaisee tahattomasti jonkin toiminnon tai kontekstinmuutoksen palvelussa. Tämä on ongelmallista, sillä käyttäjien toiminta palvelussa ei ole aina suoraviivaista. Heille voi sattua virheklikkauksia tai he voivat tulla toisiin ajatuksiin kesken kaiken. Jos palvelu reagoi kaikkeen liian herkästi ja ilman käyttäjän aktivointia, lisääntyy mahdollisuus virheisiin.
Reagointi on erityisen haitallista, jos kontekstin muutos on yllättävä tai epälooginen. Mikrointeraktioiden tulisi olla ennustettavia käyttäjälle, sillä muuten käyttäjä saattaa kadottaa sijaintinsa tai ymmärryksen siitä, mitä tapahtuu.
Varmista, että esimerkiksi pelkkä hakukenttään kirjoittaminen tai suodattimen vaihtaminen ei käynnistä odottamatonta automaattista päivitystä tai uudelleenlatausta. Voit sen sijaan tarjota käyttäjälle valinnan syötteen päivittämiseen, kuten ”Hae”-painikkeen. Silloin käyttäjä päättää itse, milloin haluaa käynnistää toiminnon. Apua saat WCAG:n onnistumiskriteereistä 3.2.1 Kohdistaminen ja 3.2.2 Syöte.
Varmista, ettei käyttöön tarvita hienomotoriikkaa
Palvelun käyttämiseen ei myöskään tule tarvita tarkkaa hienomotoriikkaa, vaan kaikkien käyttäjien pitäisi olla mahdollista käyttää käyttöliittymää ilman ongelmia.
Hienomotoriikaksi voi laskea esimerkiksi raahauseleet, sillä kaikki käyttäjät eivät pysty pitämään hiiren painiketta pohjassa ja siirtämään hiirtä samaan aikaan. Myös toimintoja, joiden suorittamiseen vaaditaan muuta spesifiä elettä, kuten kahdella sormella nipistystä, on hyvä välttää.
Toiminnon tulisi olla suoritettavissa ilman monimutkaista tai monipistekosketusta vaativaa liikettä, sillä esimerkiksi käyttäjä, jolla on motorisia haasteita, eivät välttämättä pysty suorittamaan niitä. Apua saat WCAG:n onnistumiskriteeristä 2.5.1 Osoitineleet ja 2.5.7 Raahauseleet.
Mikrointeraktioiden haasteet apuvälinekäyttäjän näkökulmasta
Kolmas tärkeä näkökulma mikrointeraktioihin on apuvälineiden käyttäjien näkökulma. Koska monet interaktioista ovat visuaalisia, täytyy teknisessä toteutuksessa pitää huoli, että tieto välittyy myös vaihtoehtoisella havaitsemistavalla.
Jos esimerkiksi virheilmoitus ei välity ohjelmallisesti ruudunlukijalle, sokea käyttäjä ei tiedä onnistuiko toiminnon suorittaminen vai ei. Käyttäjä ei myöskään tiedä, missä kohdassa virhe on saari osaa korjata sitä. Tarkemman kuvauksen puutteesta löydät WCAG:n kohdasta 1.3.1 Informaatio ja suhteet ja 4.1.3 Tilasta kertovat viestit.
Tiesitkö, että automaattiset testausvälineet eivät lähtökohtaisesti tunnista mikrointeraktioihin liittyviä virheitä?
Et mitä todennäköisimmin saa automaattityökalulta virheilmoitusta esimerkiksi sivulle yllättäen ilmestyvistä teksteistä, jotka eivät välity apuvälineelle. Siksi on tärkeää, että muistat huomioida ja testata interaktioita myös manuaalisesti apuvälineillä.
Yhteenveto: Muistilista mikrointeraktioiden suunnittelijoille
Mikrointeraktioiden saavutettavuus on selkeää, kun huomioit saavutettavuuden jo suunnitteluvaiheessa. Voit käyttää apuna tätä listaa.
- Varmista, että viesti välittyy visuaalisesti usealla tavalla.
Käytä useita tapoja merkityksen korostamiseen: väriä, tekstejä ja ikoneita. Älä jätä mitään vain värin havaitsemisen varaan. - Karsi liikettä ja anna käyttäjälle kontrolli.
Pidä animaatiot rauhallisina ja varmista, että kaiken liikkuvan voi pysäyttää. - Tee muutoksista ennustettavia.
Käyttäjä ei saa yllättyä järjestelmän muutoksista. Päivitä sisältö vasta, kun käyttäjä itse valitsee tehdä niin. - Varmista, että käyttöön ei tarvita hienomotoriikka.
Varmista, että mikrointeraktioiden aktivoiminen ei vaadi motorisesti haasteellisia eleitä kuten raahausta tai nipistystä. - Muista apuvälineet kaikissa tilamuutoksissa.
Varmista, että tilamuutokset välittyvät aina myös ohjelmallisesti. Testaa kaikki interaktiot manuaalisesti apuvälineellä (esimerkiksi ruudunlukijalla).
