Saavutettavaa suunnittelua Pääkaupunkiseudun Palvelukartassa

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.