Saavutettavuudella varmistat viestisi perillemenon

Design • Digitalisaatio • Teknologia

Valtiovarainministeriön mukaan “saavutettavuudella tarkoitetaan, että verkkosivut ja mobiilisovellukset sekä niiden sisällöt ovat sellaisia, että kuka tahansa voisi niitä käyttää ja ymmärtää, mitä niissä sanotaan”. Toisin sanoen verkkosivut ja mobiilisovellukset tulee toteuttaa teknisesti ja visuaalisesti siten, että toimintarajoitteiset käyttäjät pystyvät käyttämään palvelua ja sen sisältöä. Nämä vaatimukset pohjautuvat WCAG-kriteereihin.

Kun puhutaan saavutettavuudesta, usein ensimmäiseksi mieleen tulee ikäihmiset sekä näkö- ja kuulovammaiset. Näiden lisäksi esimerkiksi aisti- ja kehitysvammaiset sekä keskittymisvaikeuksista kärsivät luetaan ryhmiin, jotka hyötyvät saavutettavuudesta eniten. Nämä ovatkin tärkeitä ja huomionarvoisia käyttäjäryhmiä. Saavutettavuuden tarve voi kuitenkin olla myös tilapäinen: kenen tahansa havainnointi- ja toimintakyky voi olla väliaikaisesti rajoittunut esimerkiksi onnettomuudesta, mielentilasta tai olosuhteista johtuen.


Ennusteen mukaan vuoteen 2020 mennessä yli 120 miljoonalla ihmisellä, eli 20% Euroopan väestöstä on jonkinasteinen toimintarajoitus.

https://europa.eu/rapid/press-release_IP-15-6147_en.htm

Saavutettavuutta parantamalla varmistetaan se, että käyttäjäryhmästä riippumatta verkkopalvelun käyttö on helppoa ja sen sisältö ymmärrettävää. Huomioon otettavia asioita ovat esimerkiksi navigaation selkeys, värit ja kontrastit, sisältötekstin ymmärrettävyys, asettelu ja rakenne, sekä myös tekniset asiat erilaisia lukulaitteita varten.

Verkkopalvelun käyttö pitää olla mahdollista myös pelkän näppäimistön avulla. Ihmiset, joilla on rajoitteita näkemisessä tai käsien toiminnassa, eivät välttämättä pysty käyttämään hiirtä lainkaan. Näppäimistöselaaminen asettaa vaatimuksia teknisiin valmiuksiin sekä visuaaliseen palautteeseen: linkit on rakennettava siten, että ne toimivat loogisesti sarkaimella sekä tarjoavat riittävän visuaalisen palautteen käyttäjälle.

Vaatimukset eivät koske pelkästään verkkosivustoja ja mobiilisovelluksia. Myös sivustoilla jaettavien videoiden, äänilähetysten ja tiedostojen on oltava saavutettavuusvaatimusten mukaisia. Word- ja PDF-dokumenttien saavutettavuus ei ole itsestään selvää, vaan vaatii johdonmukaisuutta sekä selkeyttä rakenteen ja tekstisisällön suhteen. Videoiden ja äänitteiden mukana tulee tarjota sisältöä myös tekstimuodossa. Sosiaalisessa mediassa videoiden tekstitys on jo havaittu toimivaksi keinoksi katsoa videoita ilman ääniä.

Lisäksi kannattaa muistaa, että saavutettava verkkopalvelu on todennäköisesti käytettävämpi myös ei-rajoitteisille käyttäjille!

Paranna näkyvyyttä ja tuloksia saavutettavuudella

Saavutettavuudella on myös hakukoneoptimoinnin kannalta merkitystä. Googlen algoritmi arvostelee verkkopalvelua sekä teknisesti että kävijöiden käyttäytymisen perusteella. Huonosti saavutettavissa olevasta verkkopalvelusta poistutaan, jolloin Google tulkitsee sivussa olevan jotain vikaa.

Tutkimuksen mukaan 71% toimintarajoitteisista kävijöistä poistuu verkkopalvelusta välittömästi, jos se ei ole saavutettavissa. He hakeutuvat saavutettavien palveluiden äärelle ja kuluttavat mielellään jopa enemmän. Kun parannat verkkopalvelusi saavutettavuutta, et vain pidä nykyisiä käyttäjiäsi, vaan saat heidät käyttämään enemmän rahaa.

Laskuesimerkki verkkokaupan saavutettavuuden vaikutuksesta:

  • 100 000 kävijää, keskiostos 100€, konversio 3%
  • Toimintarajoitteisia 20%, 20 000 kävijää
  • He kuluttavat 20 000 * 0,03 * 100€ = 60000€
  • Jos sivusto ei saavutettavissa, tästä 71% jää saamatta = 42600€

Lisää vaatimuksia verkkopalveluIlle

Saavutettavuus tuo mukaan myös oikeuksia verkkopalvelun käyttäjälle ja vaatimuksia ylläpitäjälle. Palvelusta täytyy tietosuojaselosteen lisäksi löytyä jatkossa myös saavutettavuusseloste, ja käyttäjän palautteeseen on vastattava kahden viikon kuluessa. Selosteen luomiseen on olemassa valmis työkalu, joka löytyy osoitteesta https://www.saavutettavuusvaatimukset.fi/saavutettavuusseloste/.

Aikataulullisesti vaatimukset ovat jo 23.9.2018 jälkeen julkaistujen verkkopalveluiden osalta voimassa. Sitä aiemmin julkaistujen palveluiden ja tiedostojen tulee olla saavutettavissa 23.9.2020.

Siirtymäajat

23.9.2019
Kaikkien julkishallinnon palveluiden, jotka on julkaistu 23.9.2018 jälkeen, on oltava vaatimusten mukaisia. Tämä koskee myös tiedostoja.

23.9.2020
Ennen 23.9.2018 julkaistujen julkishallinnon palveluiden ja tiedostojen tulee täyttää vaatimukset.

1.1.2021
Vaatimusten piiriin kuuluvien yksityisen sektorin toimijoiden (esim. pankki-, liikenne- ja vakuutusalojen) palvelut on oltava saavutettavuusvaatimusten mukaisia.

23.6.2021
Mobiilisovellusten tulee täyttää saavutettavuusvaatimukset.

Lisää aiheesta:

Saavutettavuusdirektiivi.fi
Saavutettavuusvaatimukset.fi
Valtiovarainministeriö
Lain saavutettavuusvaatimukset tuovat isoja muutostarpeita julkisen sektorin verkkosivustoihin (AVI)

PS. Tutustu myös Euroopan Unionin Esteettömyysdirektiiviin

Kirjoittajan Jukka Harkki kuva

Jukka Harkki

Joinexin brändiuudistus: Kohti vahvempaa brändiä

Design • Yrityskulttuuri

Joinex uudisti brändiään lähtökohtina päivittää ilme 2020-luvulle, luoda kiinnostavat verkkosivut ja tuoda suuremmalle yleisölle esiin se, mitä Joinex todella on. Uudistuksen perustan luo Joinexin jo olemassa oleva yrityskulttuuri.

Laadukas ja nykyaikainen sisältö uskottavuuden mittarina

Viime vuosisadalla alkoi kulttuurimme visualisoituminen, kun uusien medioiden, kuten elokuvan, tv:n ja internetin, myötä kuvien määrä moninkertaistui. Nykypäivänä kuviin keskittyvän sosiaalisen median arkistumisen myötä jokainen henkilöbrändää itseään tietoisesti tai tiedostamatta somepresenssillään.

Yritykset eivät ole muutoksen mukana tuomista vaatimuksista irrallisia, vaan myös yritysten tulee tuottaa visuaalisesti miellyttävää ja laadukasta sisältöä ollakseen uskottavia. Siksi myös Joinex halusi kirkastaa visuaalista ilmettään ja laajemmin brändiään, mikä näkyy konkreettisimmin verkkosivujen uudistuksena.

Joinexin verkkosivut ennen ja jälkeen.
Brändin uudistus näkyy konkreettisimmin verkkosivujen uudistuksena.

Brändin peruspilareiksi jo olemassa olevat ydinarvot

Visuaalisen ilmeen merkitys on yleisesti ottaen helppo ymmärtää, koska ilme näkyy selkeästi ulospäin esimerkiksi verkkosivuilla ja markkinoinnissa. Joinexinkin tarve uudistua lähti nimenomaan verkkosivujen tyylistä ja logosta, jotka oli saatava vastaamaan orastavan 2020-luvun tarpeita.

Visuaalinen ilme on kuitenkin vain yksi brändiä rakentava tekijä, ja itse brändi on logoa ja iskulausetta paljon laajempi asia. Brändi on kaikkea sitä mitä yritys todella tekee, kuten toimintatapoja, arvoja, visioita, työkulttuuria ja tuotteita. Siksi kirkastaakseen visuaalista ilmettä tulee olla selvillä siitä, mitä oikein halutaan kirkastaa.

Brändäykseen suhtaudutaan yhä paikoitellen varauksella – ja ihan ymmärrettävästi. Brändäys on tarkoittanut pitkään sliipattuja stock-kuvia ja ylhäältä päin asetettuja strategioita, joissa luetellaan arvoja, joiden takana yhteisön tulee seisoa. Monesti kuulee puhuttavan brändin luomisesta, mikä on omiaan vahvistamaan mielikuvaa siitä, että brändi luodaan tyhjästä sen sijaan että se ilmentäisi jotain aitoa.

Aidoimpaankin brändiin liittyy käytännössä aina jotain keinotekoista, sillä brändin rakentamisessa on kyse niiden asioiden valitsemisesta, joita halutaan korostaa: mitkä arvot ovat meille tärkeimpiä tai mikä luo arvoa asiakkaiden silmissä? On kuitenkin eri asia, valitaanko brändiä rakentavat tekijät tyhjästä vai jo olemassa olevan kulttuurin pohjalta. Joinexin brändiuudistuksessa lähdimme liikkeelle konkreettisista asioista; siitä millaisia ovat Joinexin toimintatavat ja työkulttuuri.

Aloitimme prosessin nimeämällä millaisten arvojen takana Joinex seisoo ja miten ne näkyvät arjessa. Ydinarvoiksi tunnistimme inhimilliset arvot, jotka eivät vanhene: palvelun, luottamuksen ja rehellisyyden. Sen vastapainona arvostamme myös kovaa teknologiaosaamista ja innovatiivista propellipäähenkeä. Käytännössä arvot näkyvät rentona, matalahierarkisena työkulttuurina, jossa on tilaa erilaisille ihmisille ja ajatuksille. Arvot ovat myös osa jokaisen työnkuvaa, meillä jokainen on myös asiakaspalvelija eikä palvelua ole erotettu omaksi segmentikseen.

Brändin jatkuvaa kehitystä

Joinexin uudistunut brändi rakentuu vahvemmin jo olemassa olevan yrityskulttuurimme pohjalle. Brändi ei kuitenkaan tule valmiiksi ulkoasumuutoksen myötä, vaan se on jatkuvaa kehittämistä ja kehittymistä. Jokainen työyhteisön jäsen tuo kulttuuriin jotain omaa persoonallaan, minkä vuoksi kulttuuri, ja samalla brändi, kasvaa ihmisten mukana. Hyvä henki syntyy sisältä ja näkyy ulos – ja aidoista asioista on helppo viestiä.

Ne jo aiemmin mainitut sliipatut stock-kuvat tuntuvat nykypäivän hektisen verkkosisällön joukossa falskeilta. Sen sijaan ollaan kiinnostuttu persoonallisesta, erikoisesta ja autenttisesta. Siksi Joinexin verkkosivuista haluttiin luoda sekä visuaalisesti kiinnostava sekä informatiivinen kokonaisuus, joka sisältää ja jossa voi jakaa yhä monipuolisemmin tietoa siitä, millainen yritys Joinex todella on.

Uudet tiedonjaon kanavat, kuten sosiaalisen median sivut ja blogi, ovat konkreettinen teko arvostamamme teknologiaosaamisen ja innovatiivisuuden puolesta. Mitä useamman ihmisen tieto saavuttaa, sitä otollisempi maaperä luodaan uusille ideoille ja keksinnöille. Juttusarjan seuraavassa osassa keskityn tarkemmin siihen, miten verkkosivujen sisältö rakennettiin tukemaan brändiä.

Kirjoittajan Jukka Harkki kuva

Jukka Harkki

Käyttöliittymien suunnittelu ja prototyyppaus Adobe XD:llä

Design • Teknologia

Käyttöliittymän suunnittelu on helppoa. Aluksi.

Kaikki lähtee asiakkaan ideasta, jossa käyttäjälle on kaavailtu uusia mahdollisuuksia. Kokenut koodari hahmottelee ajatusta hetken päässään, piirtelee karkeita kulkukaavioita siitä, mitä dataa kulkee minnekin, ja avaa lopulta koodieditorin. Käyttöliittymä ottaa muotoaan, mutta hetken päästä edessä on jokin seuraavista tilanteista:

  1. Käyttöliittymä ei näytä hyvältä.
  2. Haluttu toiminnallisuus onkin odotettua monimutkaisempi.
  3. Jokin toiminto on unohtunut.
  4. Asiakas ei pidä käyttöliittymästä.

Sorrun omassa työssäni valitettavan usein näihin tilanteisiin johtavaan ylimielisyyteen. Kuvittelen hahmottavani käyttöliittymään tarvittavat elementit ja niiden väliset vuorovaikutukset riittävän hyvin. Kuitenkin löydän itseni aina asettelemasta lomakkeiden virhe-elementtejä ja muita helposti unohdettavia komponentteja paikoilleen.

Sitten näytän lopputulosta asiakkaalle ja kaikki menee uusiksi.

Monen odottamattoman lisäyksen ja korjauksen jälkeen on alkuperäinen visio usein hämärtynyt ja koodipohja nopeiden korjausten jäljiltä hutera. Refaktorointiin palaa aikaa ja energiaa, eikä voi olla ajattelematta, miksi taas kerran jätti suunnittelun väliin.

Älä suinkaan koodaa käyttöliittymää suunnitelman pohjalla. Suunnittele käyttöliittymä mielummin epäonnistuneiden koodausyritysten pohjalta.

Mielekästä suunnittelua Adobe XD:llä

Suunnittelun mieltää usein liian raskaana prosessina. Toteutettava käyttöliittymä on kuitenkin yksinkertainen ja vastaavia on tullut tehtyä jo monia. Näkymiä ei vaivauduta piirtämään paperille, hitaasti aukeavan kuvankäsittelyohjelman käynnistämisestä puhumattakaan. Jonkinlaisista leiskoista olisi tietysti apua, kunnes niiden implisiittisiä interaktioita pitää alkaa erittelemään asiakkaalle.

Kevyeeseen suunnitteluun on onneksi olemassa työkaluja — sellaisia, joilla käyttöliittymien prototyyppauksesta on oikeasti hyötyä itselle, omalle tiimille ja asiakasinteraktiolle. Käsittelen tässä kirjoituksessa ilmaista Adobe XD ohjelmaa, joka on käytettävissä sekä Windows että MacOS laitteilla. Samat periaatteet pätevät varmasti sen kilpailijoihin, kuten Sketch, inVision ja Figma.

Adobe XD:llä työskentelyn tuloksena on käyttöliittymän interaktiivinen prototyyppi, jonka voi lähettää asiakkaalle arvioitavaksi tai kehittäjätiimille työn tueksi. Tein esimerkkinä kolmesta näkymästä koostuvan pyöräkaupan. Sen arviointiversiota voi kokeilla niin kuin se olisi valmis sovellus. Painikkeet johtavat oikeisiin näkymiin ja siirtymät ovat ainakin havainnollistavassa muodossa paikoillaan. Kehittäjäversiosta ilmenee mm. käytetyt värit, fontit, kuvat ja näkymien väliset siirtymät.

Kolme sovelluksen näkymää esitettynä rinnakkain. Kolmannesta näkymästä kulkee nuolia muihin näkymiin.
Esimerkkinä luodun pyöräkaupan prototyypin kehittäjäversio.

Kullanarvoista prototyypeissä on asiakkaan mahdollisuus kommentoida niitä täsmällisesti. Jos painikkeen väri häiritsee, asiakas voi kiinnittää siihen merkin ja ilmaista huolensa lyhyesti tekstillä. Enää ei tarvitse murehtia siitä, kuinka olette pitkään puhuneet samasta asiasta eri nimillä tai eri asioista samalla nimellä. Merkki näyttää täsmällisesti mistä on kyse.

Vasemmalla on kuva käyttöliittymästä, johon on kiinnitetty kaksi numeroitua merkkiä. Oikealla on merkkien numeroita vastaavat asiakkaan kommentit, joissa on parannusehdotuksia.
Kommentteja voi kohdistaa käyttöliittymään kiinnitettyihin merkkeihin.

Konkreettinen prototyyppi poistaa omista ajatusprosesseista ”näyttääköhän tämä hyvältä” vaiheen. Keskittymisen voi ohjata ratkaisemaan miten asiat toteutetaan eikä miltä ne näyttävät toteutettuna. Kun tietää mihin on menossa, koodia menee merkittävästi vähemmän hukkaan.

Seuraavassa Adobe XD artikkelissa sukelletaan sovelluksen perusteisiin ja opetellaan käyttöliittymän prototyypin luomista käytännössä!

Kirjoittajan Jukka Harkki kuva

Jukka Harkki