Verkkopalveluiden saavutettavuus puhuttaa tällä hetkellä, erityisesti ensi syksystä alkaen julkisia toimijoita velvoittavan Saavutettavuusdirektiivin takia. Tässä kirjoituksessa Nitor, Helsingin kaupunki ja Annanpura Oy esittelevät, miten saavutettavuus näkyy digitaalisten palveluiden suunnittelussa.
Pääkaupunkiseudun Palvelukartta on Helsingin kaupungin ylläpitämä avoimen lähdekoodin verkkopalvelu, jonka avulla pääkaupunkiseudun asukkaat ja vierailijat löytävät heille saatavilla olevat palvelut ja niiden tiedot, kuten aukioloajat, yhteystiedot sekä esteettömyystiedot. Helsinki on kehittänyt palvelukarttaa yli 10 vuoden ajan, ja vuoden 2019 alusta Nitor astui mukaan rakentamaan uutta, entistätkin saavutettavampaa versiota. Annanpuran saavutettavuusasiantuntijoiden kanssa yhteistyö alkoi jo 2015, kun Palvelukarttaa kehitettiin vastaamaan ”Esteettömyys huomioitu” -leimaan vaatimuksia. Palvelukartan uusi julkinen kehitysversio on yleisön testattavana osoitteessa https://palvelut.hel.ninja/fi/.
Palvelukartan käytön keskiössä on palveluita tarjoavien toimipisteiden etsiminen ja niiden tietojen katselu. Palvelukartalta löytyy yli 15 000 toimipistettä aina kirjastoista, kuntosaleihin, liikuntapaikkoihin ja kouluihin. Toimipisteiden tiedot täytyy niiden erilaisuudesta johtuen esittää mahdollisimman selkeästi kaikille käyttäjille riippumatta heidän aisti- tai kognitiivisista rajoitteistaan, ja sivuston tulee tukea apuvälineiden kuten ruudunlukijan käyttöä. Jos toimipisteen tiedot on esitetty sekavasti tai väärässä järjestyksessä, voi käyttäjille jäädä ajatus, ettei Palvelukartalta löydy heidän etsimiään tietoja.
Suunnittelukriteerit
Kun lähdimme valitsemaan toimipisteen tietojen esittämiselle käyttöliittymäratkaisua, jouduimme tasapainoilemaan kolmen pääkäyttötapauksen välillä:
Ruudunlukijaa käyttävälle sivun elementtien tulee olla selkeässä järjestyksessä, eikä sivulla saa olla yllättäviä dynaamisia tai interaktiivisia elementtejä.
Näkeville ei saa olla liikaa tietoa kerralla näkyvillä, mutta navigointi ei saa vaatia suuria määriä klikkauksia.
Sivun rakenteen täytyy olla helppo hahmottaa, eikä käyttöliittymässä saa käyttää monimutkaista tai monitulkintaista kieltä.
Keskustelun tueksi designer Otso Hannula Nitorilta piirsi viisi perustapaa näyttää toimipisteen tiedot mobiilinäkymässä ja työpöytäversion sivupalkissa. Kaikissa versioissa toimipisteen tiedot on jaettu toimipisteen sivun alla oleviin osioihin, jolloin vaihtoehdoissa korostuvat eri tavat näyttää osioissa oleva tieto ja siirtyä osioiden välillä. Piirrosten avulla Palvelukartan kehitystiimi pääsi käymään keskustelua Annanpuran saavutettavuusasiantuntijoiden Tero Pesosen ja Kimmo Sääskilahden kanssa eri vaihtoehtojen vahvuuksista ja heikkouksista. Alla oleva teksti on tuotettu yhdessä Annanpuran asiantuntijoiden kanssa.
1. Alisivut
Tämä versio on kaikista konservatiivisin, ja muistuttaa varhaisten verkkosivujen rakennetta. Toimipisteen sivulla on vain lista hyperlinkeistä alisivuille, ja käyttäjä pääsee katsomaan haluamiaan tietoja siirtymällä erillisille tietosivuille. Tietosivuilta pääsee takaisin toimipisteen tietoihin yläkulman paluunapilla.
Hyvää:
navigaatiossa ei käytetä dynaamisia elementtejä, kuten välilehtiä tai haitarielementtejä
osioiden väliset rajat ovat selvät ja siirtymät tehdään tavallisten hyperlinkkien avulla
ruudunlukijalle on äärimmäisen selvää, milloin siirrytään hierarkiassa alemmalle sivulle ja minne sieltä palataan
toimipisteen tiedot -sivu toimii visuaalisesti selkeänä sisällysluettelona, jossa on riittävästi tilaa klikkauksille
Huonoa:
sivun uudelleenlataaminen lisää pienen viiveen ja katkaisee näkevän käyttäjän jatkuvuuden kokemuksen
ruudunlukijan selainkohdistus palautuu sivun ylälaitaan sivujen välillä siirryttäessä
käyttäjällä ei ole välitöntä pääsyä mihinkään sisältöön ennen johonkin osioon siirtymistä
käyttäjä on linkin otsikon varassa päätelläkseen mitä tietoja linkin takana on
Arvio: Ruudunlukijalle helpoin vaihtoehto, erityisesti mobiililaitteilla. Konservatiivinen toteutus tukee apuvälinekäyttöön liittyvää kognitiota.
2. Laajentuvat elementit
Tässä versiossa toimipisteen tiedot on koottu yhdelle sivulle, ja keskenään erilaiset tiedot on jaettu erottuvien otsikoiden alle. Otsikkoa klikkaamalla otsikon alla oleva sisältö tulee haitarimaisesti näkyviin.
Hyvää:
käyttäjä saa heti visuaalisen sisällysluettelon saatavilla oleviin tietoihin
kaikki osiot sisältöineen ovat samalla sivulla, joten sivulta ei tarvitse navigoida pois
Huonoa:
koko sisältöön tutustuminen vaatii paljon klikkauksia, jos käyttäjä haluaa nähdä kaikkien osioiden sisällöt
mobiililaitteilla otsikon valinnassa on iso riski ohiklikkaamiseen, erityisesti jos käyttäjällä on motorisia ongelmia
jos käyttäjä on avannut monta osiota, sivun selaaminen hidastuu merkittävästi sekä visuaalisesti että ruudunlukijalla
laajeneva sivu vaikeuttaa visuaalista jäsennystä erityisesti heikkonäköisille käyttäjille
Arvio: Ratkaisu ei tuo juurikaan etuja alisivuihin nähden, mutta sisältää käytettävyysongelmia, joita alisivuilla ei ole. Ei jatkoon.
3. Sisällysluettelo
Myös tässä versiossa toimipisteen tiedot on koottu yhdelle sivulle, mutta kaikki tieto on yhtä aikaa näkyvillä. Sivun alussa on sisällysluettelo, jonka avulla käyttäjä voi siirtyä haluamaansa osioon klikkaamalla sisällysluettelon kohtaa.
Hyvää:
osiot näkyvillä yhdessä paikassa
osioiden välillä siirtyminen ei vaadi klikkauksia
ei dynaamisia elementtejä
työpöytäkäytössä ruudunlukija voi hyppiä suoraan otsikosta toiseen
Huonoa:
yhdestä osiosta ei pääse klikkaamalla toiseen, ellei palaa sivun alkuun
sisältöä on näkeville esillä todella paljon yhtä aikaa
selaaminen on kohtuuttoman työlästä esimerkiksi mobiililaitteiden ruudunlukijoilla, joissa käyttäjä ei pysty hyppimään suoraan otsikosta toiseen
jokaisen otsikon yhteyteen tarvittaisiin paluulinkki sisällysluetteloon, mutta linkki voi sekoittaa ruudunlukijaa, joka ei tiedä sisällön jatkuvan paluulinkin jälkeen
Arvio: Ratkaisussa on joitain samoja etuja, kuin alisivuissa ja laajentuvissa elementeissä, mutta lisäksi puutteita, joita edellisissä ei ole. Ei jatkoon.
4. Pudotusvalikko
Tässä versiossa tiedot on jaettu osioihin, joiden välillä siirrytään sivun alussa olevan pudotusvalikon kautta. Pudotusvalikon kulloinenkin toimii otsikkoelementtinä ja muuttaa dynaamisesti sivun sisällön.
Hyvää:
pudotusvalikkoon mahtuu todella monta osioita
Huonoa:
pudotusvalikkoa ei perinteisesti käytetä tähän tapaan
osioista toiseen siirtyminen vaatii aina kaksi klikkausta: yksi pudotusvalikon avaamiseen ja toinen valinnan tekemiseen
kaikkien osioiden näkeminen vaatii todella paljon klikkauksia
pudotusvalikon nykyinen valinta voi olla vaikea hahmottaa osion otsikoksi
Arvio: Ratkaisu on sekä kognitiivisesti että teknisesti hankalampi kuin muut vaihtoehdot. Ei jatkoon.
5. Välilehdet
Tässä versiossa toimipisteen tiedot on jaettu välilehdille, joista jokaisessa on otsikoiden alle jaettua sisältöä. Välilehdet ovat koko ajan näkyvissä, ja niiden välillä voi liikkua klikkaamalla tai vierittämällä sisältöaluetta vaakasuunnassa. Välilehtien käyttämistä suosittelee mm. Googlen julkaisema Material UI, jota Palvelukartassa on hyödynnetty laajasti.
Hyvää:
käyttäjä saa heti visuaalisen ”silmäyksen” toimisteen tärkeimpiin tietoihin, jotka ovat ensimmäisellä välilehdellä
koska ensimmäinen välilehti on heti auki, käyttäjä näkee välilehtien toimintaperiaatteen
näkeville käyttäjille välilehdet ovat jatkuvasti samassa paikassa saatavilla
välilehtien välillä voi siirtyä yhdellä klikkauksella
esitystapa mahdollistaa yhtenäisen tavan näyttää rinnakkaisia osioita kaikkialla Palvelukartassa, kuten erottelemaan eri tulostyyppejä hakutulossivulla
Huonoa:
ruudunlukijaa käyttävien on aina välilehteä vaihteessaan paitsi palattava taaksepäin välilehtijoukkoon, myös selattava kaikki ne läpi ennen kuin hän pääsee vaihtamaan sivua ja siirtymään uuden välilehden sisältöihin
sisällön vaihtuminen dynaamisesti välilehteä vaihtaessa voi olla sekoittavaa, jos ruudunlukijan käyttäjä ei ymmärrä näytettävien tietojen muuttuneen ilman verkkosivujen välistä siirtymää
jos välilehtiä on paljon, niiden näyttäminen vaakasuunnassa rullaavana listana voi olla visuaalisesti vaikeaa hahmottaa
Arvio: Välilehdet tukevat visuaalista käyttöä hyvin, etenkin jos käyttäjän ei tarvitse vierittää välilehtinauhaa vaan kaikki lehdet ovat aina näkyvissä. Kunkin tietosivun loppuun kannattaa lisätä paluulinkki näkymän alkuun ruudunlukijaa käyttäviä varten.
Johtopäätökset ja eteneminen
”Kun kaikkien palvelujen kehityksessä pohdittaisiin näin hyvin, mitä ollaan tekemässä ennen toteutusta, niin saavutettavuusongelmat ratkeaisivat kertarysäyksellä!”
- Tero Pesonen, Saavutettavuusasiantuntija, Annanpura Oy
Viidestä arvioidusta vaihtoehdosta mielestämme vahvimmat olivat siis alisivulinkit ja välilehtitoteutus. Välilehtien käyttäminen on visuaalisesti vahvin vaihtoehto, koska näkevä käyttäjä saa nopeasti käsityksen saatavilla olevasta tiedosta ja pystyy nopeasti navigoimaan eri osioiden välillä. Välilehtipalkin vierittämisestä aiheutuvia hahmotusongelmia voidaan hallita rajoittamalla välilehtien määrä esimerkiksi kolmeen, jos välilehdet halutaan mahduttaa yhdelle riville, tai kuuteen, jos välilehden voidaan näyttää kahdessa rivissä.
Ruudunlukijalle ystävällisin ratkaisu on alisivut, koska se on konservatiivisin ja eniten perinteisen verkkosivun sisällä tapahtuvaa navigointia muistuttava toimintatapa. Näkeville käyttäjille ratkaisu tuo ylimääräisen työvaiheen, joka estää käyttäjää välittömästi näkemästä toimipisteen tietoja, tai että tietoja ylipäänsä on tarjolla käyttöliittymän sisällä. Linkit voivat näyttää siltä kuin ne veisivät ulos palvelusta, ja käyttäjän tulee itse oivaltaa tai kokeilla, minkä linkin alta esim. puhelinnumero löytyy.
Digitaalisia palveluita suunniteltaessa jokainen päätös palautuu lopulta suunniteltavan palvelun painotuksiin. Kuinka helppokäyttöinen palvelun tulee olla? Halutaanko kokemus rakentaa ruudunlukijan käytön ympärille, vai riittääkö ruudunlukijan tekninen tukeminen WCAG-standardin mukaisesti? Myös lopullinen toteutus voi muuttaa kokemusta merkittävästi: Jos alisivut latautuvat välittömästi ja niistä pääsee helposti takaisin, ne voivat toimia hyvin myös näkeville käyttäjille.