Suoraan sisältöön

Kuva: Tällä asenteella kohti esteitä

Maailman saavutettavin palvelukartta

Kaupunginkanslian tietohallinnon palvelukarttatiimi

 

Kaikki kirjoitukset

Saavutettavaa suunnittelua Pääkaupunkiseudun Palvelukartassa

Teksti: Otso Hannula, Nitor

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.

Alisivut perusnäkymä   Alisivut Yhteystietonäkymä

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.

Laajentuvat elementit Perusnäkymä      Laajentuvat elementit, Yhteystietonäkymä

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.

Sisällysluettelo

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.

Pudotusvalikko

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.

Välilehdet

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. Vastaavasti jos välilehdet saadaan esitettyä staattisesti, merkittyä standardien mukaisesti ja varustettua ankkurilinkeillä, ne voivat tukea ruudunlukijan käyttöä oikein hyvin.

Palvelukartan kehittämisessä päätettiin edetä välilehtien kanssa. Tavoittelemme niiden avulla maailman saavutettavinta Palvelukarttaa, joka samalla noudattelisi modernien verkkopalveluiden käyttökokemusta. Jos jatkotesteissä käy ilmi, ettei ruudunluvun käyttöä saada niin helpoksi kuin toivoisimme, tiedämme että voimme palata alasivuvaihtoehtoon.



JAA

Uusimmat kirjoitukset

Kuva: Tällä asenteella kohti esteitä
22.10.2019 08:04 -  Maailman saavutettavin palvelukartta
Luottamuksen arvoinen palvelu Kirjoittajat: Sanna Rauhala, Design anthropologist, CGI ja Anni Linturi, Designer, CGI Luottamus on avainsana silloin, kun palvelu otetaan osaksi omaa arkea. Luotanko siihen, että palvelu toimii? Entä siihen, että sen tarjoamat tiedot ovat ...
Kuva: Tällä asenteella kohti esteitä
27.09.2019 14:49 -  Maailman saavutettavin palvelukartta
Kirjoittaja: Katri Koskinen, Lead Designer, CGI Muistan vieläkin monta koskettavaa tapaamista viime syksyltä, kun keräsimme palautetta Palvelukartasta erilaisilta ihmisiltä ympäri Pääkaupunkiseutua. Kuinka lämpimät halaukset sain senioreilta haastattelun päätteeksi. Ja ...
Kuva: Tällä asenteella kohti esteitä
03.09.2019 08:45 -  Maailman saavutettavin palvelukartta
Monet meistä pitävät itsestäänselvyytenä yksinkertaisia asioita, kuten oviaukosta läpi kulkemista, portaikon kautta siirtymistä seuraavaan kerrokseen tai mukavia istuimia odotustilassa. Tuhansille ihmisille pääkaupunkiseudulla nämä asiat eivät kuitenkaan ole mahdollisia...
Kuva: Tällä asenteella kohti esteitä
18.06.2019 14:18 -  Maailman saavutettavin palvelukartta
Helsinki rakentaa maailman saavutettavinta palvelukarttaa esimerkillisellä otteella palvelun omistajien, koodareiden, designerien ja suuren yleisön saumattomalla yhteistyöllä. Uuden rakentumista voi seurata ilolla ja oppien edellisten ja tulevien blogipostausten välityk...
Kuva: Tällä asenteella kohti esteitä
14.06.2019 09:22 -  Maailman saavutettavin palvelukartta
Mitä kaipaisit seuraavaksi Palvelukarttaan? hieman kehittyneemmän demo/testiversion Palvelun nimessä tai sen perässä pitäisi lukea kaupungin nimi k...
Kuva: Tällä asenteella kohti esteitä
14.06.2019 08:22 -  Maailman saavutettavin palvelukartta
Teksti: Otso Hannula, Nitor 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 saa...
Kuva: Tällä asenteella kohti esteitä
10.06.2019 13:45 -  Maailman saavutettavin palvelukartta
Kirjoittaja: Palvelukartan tekninen projektipäällikkö Timo Tuominen Laki digitaalisten palvelujen tarjoamisesta edellyttää kaikilta julkisen sektorin verkkopalveluilta saavutettavuuden huomioimista. Tämä on tietysti lähtökohtana ja tavoitteena Palvelukartankin uudistam...
Kuva: Tällä asenteella kohti esteitä
07.06.2019 13:18 -  Maailman saavutettavin palvelukartta
Mailman saavutettavinta palvelukarttaa tehdään myös helteillä. Oikeastaan sitä tehdään nyt niin ahkerasti, että blogin kirjoittaminen on jäänyt hieman taka-alalle. Lähipäivinä on kuitenkin tulossa mielenkiintoisia kirjoituksia. Kurkkaa, miltä uusi palvelukartta nyt näy...
Kuva: Tällä asenteella kohti esteitä
14.05.2019 12:20 -  Maailman saavutettavin palvelukartta
Mukavaa Maailman saavutettavuuspäivää 16.5.2019 Olemme saaneet arvokasta palautetta uudesta palvelukartasta. Kiitos teille. Palautetta otetaan edelleen kiitollisina vastaan. Palvelua on mukavampaa ja fiksumpaa kehittää, kun saamme siihen teidän käyttäjien näkemyksiä. An...
Kuva: Tällä asenteella kohti esteitä
07.05.2019 14:40 -  Maailman saavutettavin palvelukartta
Tulossa Juhannuksesta olemme vuorotellen lomilla. Työ jatkuu täydellä höyryllä elokuun alusta. Tullut Palvelukartan ensimmäinen testiversio julkaistu 3.5.2019 ...
<<  <  1  2  3  >  >>