Menu


Matkakortin lukulaitteen uudistus – mikä käyttöliittymässä meni mönkään?

11.7.2016

HSL lanseerasi kesällä 2016 historiallisen uudistuksen kuluttajapäätteisiinsä, mukaan lukien jo valmiiksi parjatun matkakorttien lukulaitteen. Kaikki ei nyt kuitenkaan mennyt ihan putkeen. HSL:n saitilta sittemmin poistetun lukijakommentin sanoin: jos uudistus maksoi miljoonia Euroja, miksi käyttöliittymä näyttää siltä, kuin se olisi suunniteltu itse PowerPointilla?

Tiivistelmä

  • OK-nappiin pohjautuvat käyttöliittymä on hidas ja näkörajoitteisille haastava, eikä vähennä virheiden määrää kuin marginaalisesti
  • Lipputyyppejä tulisi korostaa visuaalisesti, jotta ne olisivat helposti tunnistettavissa
  • Voimassaoloalueet ja hinnat tulisivat olla selkeästi nähtävissä oston aikana
  • Sijaintitietoa tulisi hyödyntää käyttöliittymässä
  • Alussa valittu lipputyyppi tulisi olla näkyvillä koko ostoprosessin ajan

Päivitys 27.7.2016
Kirjoituksen herättämän laajan keskustelun myötä suunnittelin pidemmälle version 2:n, joka päivitetty tähän kirjoitukseen.

Okei, suunnittelenpa sen uusiksi!

Kävin Sörnäisten metroasemalla testaamassa uuden matka­kortti­lukijan, ja jäin vielä 40 minuutin ajaksi paikalle harjoittamaan epätieteellistä käytettävyys­tutkimusta. Tänä aikana näin noin 100 matkakortin lukua uudella laitteella, joista noin 40 oli arvolipun ostoja. Kaikki ostot olivat Helsingin sisäisiä yhden hengen lippuja; tässä Sörkän metron havainnointiasema varmasti vääristi tulostia.

Keskityn kirjoituksessani kaikkein ongelmallisimpaan osa-alueeseen, arvolipun ostoon. Kaudella matkustaminen sujuu ongelmitta vain korttia näyttämällä, kuten tähänkin asti.

Arvolla maksamisen prosessi

Koko arvolla maksamisen prosessi, HSL:n versio ja oma ehdotukseni

Laitteisto

Itse laitteistossa ei ole, oletetun alhaisen budjetin puitteissa, käytettävyys­mielessä juurikaan vikaa. Kosketusnäyttö on varmasti pitkäkestoisin valinta, kun tulevan vyöhykeuudistuksen mukanaan tuoma käyttöliittymäpäivitys siintää jo.

Nimenomaan uusia käyttäjiä varten tehty OK-logiikka aiheutti heille ongelmia.

Matkakortin lukualue on vihdoin siirretty pois käyttöliittymän tieltä, ja lipun voi siis nyt ostaa vain yhtä kättä käyttämällä. Lukualueella on myös käytössä oikeaa lukuhetkeä merkkaava hehkuefekti, mikä on varsin onnistunutta suunnittelua. Laitteisto toistaa entiseen tapaan myös ääniä varsin mallikkaasti.

Jos jotain laitteesta pitäisi marista, niin matkakortin lukualueen ympärillä saisi olla selkeämpi kohouma helpottamaan alueen paikallistamista näkörajoitteisille käyttäjille, sekä alue saisi näyttää hieman enemmän ”langattomalta” nykyisen tarran sijaan.

Laitteiston valinnassa yksikköhinta on varmasti ollut oleellinen kriteeri. Näyttö saisi olla nykyistä suurempi, jotta tekstikokoa voisi kasvattaa, mutta nykyiselläänkin se on melko luettavaa. Laitteen prosessori saisi myös olla tehokkaampi, sillä nykyisillä tehoilla laitteet jäävät välillä hieman jälkeen painalluksista, ja ilmeisesti animaation käyttäminen ei ole mahdollista. No, taloudellisista kompromisseista on turha natista.

OK-nappi ei ole OK

Suurin yksittäinen ongelma on uuden käyttöliittymän OK-napin painamislogiikka. Perusajatus on ollut se, että käyttäjä saa puuhastella valintansa ilman huolta epäonnistumisesta, ja kuitata koko homman lopulta OK-napilla. Ongelma vain on se, että käyttöliittymän tavoitekäyttöaika on alle sekunnin luokkaa ja lisäaskel hidastaa käyttöä. Loppukuittaus varmasti vähentää hieman virheiden määrää, mutta se tuplaa minimipainallusten määrän ja aiheuttaa ruuhkabusseissa varmasti närkästystä.

OK-napin ympärille varta vasten rakennettu käyttöliittymä on myös varsin epäselvä. Minulla ei ole HSL:n tilastoja käytössä, mutta arvioisin virheostoksia tapahtuvan yhden tuhatta lipun leimausta kohden. Promilleluokan virheet olisivat olleet helpommin ratkaistavissa vaikkapa kortin tiedoista tehtävällä peruutus­toiminnolla koko käyttäjäkunnan hidastamisen sijaan. Kaiken kukkuraksi (oikeakätisen) käyttäjän oma käsi on OK-napin tiellä miltei kaikissa tilanteissa, varsinkin peukaloa käyttäessä, joka oli havainnontini aikana yleisin toimintamalli. Ilmeisesti laitteen pienehkö koko houkuttaa kännykkämäiseen käyttöotteeseen.

HSL:n on varmastikin tehnyt laiteuudistuksessa käyttäjätestausta, mutta jotain prosessissa on yksinkertaisesti mennyt pieleen, sillä nimenomaan uusia käyttäjiä varten tehty OK-logiikka aiheutti havaintojeni mukaan heille ongelmia. Jopa niin paljon, että tarjouduin havainnointini aikana lopulta opastamaan kahta kaupunkilaista lipun ostossa. Tehokäyttäjillä ei OK-napin käytössä ongelmaa ole, mutta toisaalta ongelmaa ei olisi ilman OK-logiikkaakaan, jolloin käyttöliittymän tavoitellusta mentaalimallista tulee lähinnä nopeuskysymys.

Aloitusnäkymä ja yleistä

Aloitusnäkymässä on fiksusti sijoitettu headeriin nykyinen kunta-alue, jolloin ulkopaikka­kuntalaistenkaan ei tarvitse arvailla sijaintiaan. Tietoa ei kuitenkaan käytetä hyväksi käyttöliittymässä, vaan käyttäjän vain pitäisi tietää, että ”Sisäinen” tarkoittaa kyseisen kunnan sisäistä lippua. No, helposti korjattu: muutetaan teksti sijaintitiedon mahdollistamana muotoon ”Helsingin sisäinen”.

Aloitusnäkymä, ennen ja jälkeen

Aloitusnäkymä, ennen ja jälkeen

Muutenkin lippulajien esitys on kohtuuttoman vaikea. Painikkeet ovat kaikki samanlaisia lukuun ottamatta oudosti silmille hyppäävää raitiovaunulippua. Painikkeiden sijainti jää vaikeasti pitkäaikaiseen muistiin, ja ne on jokaisella käyttökerralla silmäiltävä uudestaan.

Lippulajien painikkeiden värikoodaus ratkaisisi monta käytettävyys­ongelmaa. On huomattavasti helpompaa tunnistaa keltainen seutulippu, kuin se toiseksi alin painike. Kryptiset lipputunnisteet (1, 2, S, L, 3) ovat muutenkin silkkaa kiusaamista, joiden tilalle olisi syytä vaihtaa vaikkapa symbolit, mutta en nyt puutu niihin, sillä ne jäävät vyöhykeuudistuksen myötä historiaan. Nimesin Lähiseutu 3:n tekstikuvauksen kuitenkin järkevämmäksi.

HSL:n alkuperäisessä käyttöliittymässä kaikki painikkeet ovat mukavan pyöreän nappimaisia, mikä helpottaa niiden painettavuuden tunnistamista kosketusnäytöllä. Riittävä affordanssi on oleellinen tällaisissa käyttöliittymissä, joiden käyttäjistä moni ei ole ehkä koskaan käyttänyt kosketuslaitetta. Pyöristys menee osittain kuitenkin överiksi, osan painikkeista ollessa ympyröitä, osan miltei neliöitä ja osan ylipyöristettyjä neliöitä.

Yhtenäistin napit kevyen pyöristetyiksi ja lisäsin niihin hyvin kevyen varjoefektin nappimaisuuden korostamiseksi. Lisäksi muutin taustavärin puhtaan valkoiseksi yleisen kontrastin kasvattamiseksi, sininen teksti vaaleansinisellä pohjalla kun ei varsinaisesti auta heikkonäköisiä.

Lippulajien painikkeiden värikoodaus ratkaisisi monta käytettävyys­ongelmaa.

OK-napin käytön vuoksi aloitusnäytön lippupainikkeet myös ovat surkean pieniä, eivätkä ne osu laitteen kuoressa olevien korostusten kohdalle. Lisäksi ruudun yläosa (joka on aikuisen käyttäjän silmiä lähimpänä) on mystisesti jätetty täysin tyhjäksi, vaikka se on ainoa paikka näytöllä jota käyttäjän oma käsi ei peitä. Painikkeiden suurentaminen koko näytön levyisiksi on tässä tapauksessa toimivin ratkaisu. Lopuksi vielä muutin nappien järjestyksen niin, että ”perusliput” ovat ylhäältä alaspäin hintajärjestyksessä, ja viimeisimpänä painikkeena on joko Raitiovaunu tai Lähiseutu 2.

Näkymän alalaitaan on ilmestynyt kielivalinta, jolla päästään eroon useita näkymiä piinanneesta tekstimassasta. Alkuperäisessä suunnitelmassa myös monet näkymät, kuten oston loppunäkymä, olivat ainoastaan suomeksi, mikä oli ristiriidassa muun käyttöliittymän kanssa.

Myös lippujen sisältämät kunta-alueet olisi kiva nähdä lippuvalintaa tehdessä, varsinkin kun lipputyypit on nimetty ainakin ulkopaikka­kuntalaisen silmin epäselvästi. Hintojen näyttäminen olisi myös käyttäjäystävällistä, mutta useiden eri alennusryhmien vuoksi niiden esittäminen aloitusnäytössä voisi olla harhaanjohtavaa. Alennustieto (lapsi, opiskelija, eläkeläinen...) on tallennettu kortille, eikä sitä siis voi etukäteen huomioida.

Tämän näkymän painikkeisiin pitäisi myös ehdottomasti saada jokin hyvin yksinkertainen äänimerkki (”klonks”), sillä niiden toiminnan vasteaika, ilmeisesti prosessorin keveydestä johtuen, on melko huono. Jos käytössäni olisi HSL:n statistiikka, voisin harkita myös ostetuimpien lipputyyppien painikkeiden kasvattamista.

Vahvistusnäkymä

Lippulajin valitsemisen jälkeen alkuperäinen käyttöliittymä suorastaan loistaa kaoottisuudellaan: näyttö täynnä täysin erilaisia kuvioita aivan ympäriinsä ammuttuna. Ylälaitaan on ilmestynyt sulkemispainike, jonka funktio on hieman epäselvä, kun suurin osa käyttöliittymästä on kuitenkin pysynyt täysin samana.

Käyttäjä voi näppärästi vaihtaa lippuvalintaa lennosta, ilman ylimääräistä paluuta seuraavalla sivulle, mutta toimintoa ei tueta millään tavalla; uusi lippuvalinta ei tarjoa valitusta lipputyypistä mitään tietoa, eikä lipputyypin shoppailu näin hyödytä mitään. OK-nappi on sentään selkeästi näkyvillä, jos tästä jotain positiivista pitää kaivaa.

Vahvistusnäkymä, ennen ja jälkeen

Vahvistusnäkymä, ennen ja jälkeen

Yksinkertainen ratkaisu käyttöliittymän rauhoittamiseksi on tehdä täysin uusi näyttö, vahvistusnäkymä. Ratkaisu mahdollistaa valitun lipputyypin oleellisimpien tietojen, kuten voimassaolo­alueen, esittämisen näkymän ylälaidassa koko prosessin ajan ilman informaatioähkyä, samalla kun toiminnot ryhmitellään loogiseen järjestykseen. OK-nappi on ratkaisussani kuopattu täysin: oston vahvistaminen tapahtuu matkakortilla, mistä kerrotaan tekstimuotoisen viestin lisäksi osittain näkyvällä kortin kuvalla ja hehkuvalla kortinlukualueella.

Detaileina muutin peruutusnapin ikonin yksinkertaiseksi tekstiksi. Rasti oli merkitykseltään hiemaan epäselvä, ja lienee ollut käytössä ainoastaan kielivalinnan puutteen vuoksi. Lisäksi muutin peruutusnapin värin ”stopmaisemmaksi” punaiseksi. Myös matkustajamäärän valintapainike on kokenut pienen ehostuksen: ihmiskuva on neutraalimpi ja muutoinkin samassa korkeussuhteessa muiden ikonien kanssa. Tässä näkymässä voidaan jo vihjata ostettavan lipun hinnasta, varsinkin kun näytöllä on jo tilaa kevyelle selitetekstille.

Kevyt alaspäin suuntaava animaatio olisi näkymässä erittäin hyödyllinen ohjaamaan käyttäjän huomio kortin lukualueelle. Oletettavasti laitteiston potku ei sellaiseen kuitenkaan taivu, sillä nykyratkaisussa ei ole mitään liikkuvaa grafiikkaa.

Matkustajamäärän valintanäkymä

HSL suunnitteli tähän näkymään paljon hyvää. Ensinäkin edellisen näytön painikeviidakko on suosiolla jätetty piiloon. Toiseksi matkustajien lisääminen ja vähentäminen on toteutettu loogisesti ja riittävän suurilla painikkeilla. Viiden matkustajan lisääminen on myös mukavasti pienennetty toisarvoiseksi toiminnoksi.

Matkustajamäärän valintanäkymä, ennen ja jälkeen

Matkustajamäärän valintanäkymä, ennen ja jälkeen

Mutta mietitäänpäs hieman prosessia. Käyttäjä saapuu laitteelle, valitsee seutulipun, naksuttelee päiväkotiryhmänsä 14 matkustajaa laitteeseen painamalla kahdesti +5-painiketta ja vielä pari kertaa +-painiketta ja sitten… hetkinen… valitsihan käyttäjä varmasti seutulipun? On käsittämätön käytettävyysmoka, ettei useita sekunteja sitten tehtyä lippuvalintaa enää näytetä tässä näkymässä. Tämä aiheuttaa stressiä, ja pahimmillaan koko prosessin uudelleenaloituksen.

Korjatussa versiossani vahvistusnäkymän keskiosa on korvattu matkustajavalinnalla, jolloin käyttöpolku ei katkea, ja kaikki päätöksenteon kannalta oleelliset tiedot ovat edelleen näkyvissä yhtenäisesti näytön ylälaidassa. Painikkeiden kokoja ja ulkoasuja on myös hieman optimoitu, niin että keskellä oleva matkustaja­määrä­lukema on nyt selkeästi yhteydessä kaikkiin lukumääräpainikkeisiin. Niin, ja jostain ihme syystä alkuperäisessä käyttöliittymässä ei voi ostaa tästä näkymästä vain yhtä lippua, vaan käyttäjän oli pakko keskeyttää tapahtuma – korjattu!

Matkatyyppi näytetään edellisistä näkymistä tutulla visuaalisella korostuksella, ja tässä vaiheessa värikoodauksesta on jo aivan erityistä hyötyä, mahdollistaen kahden kognitiivisen järjestelmän käytön lyhytmuistin avuksi.

Jostain kummallisesta syystä painikkeita ei voi pitää pohjassa matkustajamäärän lukeman ”rullaamiseksi”. Painike kyllä pysyy painetun näköisenä niin kauan kuin sormi on sen päällä, eli ilmeisesti ominaisuus on vain unohtunut toteuttaa.

Korttinäkymä

OK-napin teilaamisen paras puoli on se, että erillistä korttinäkymää ei enää tarvita.

Korttinäkymä ilman OK-nappia on turha

Korttinäkymä ilman OK-nappia on turha

Vaikkakin arvostan erillistä, selkeää näkymää lukutapahtumalle, ei sen käytännön hyöty ole kauaskantoinen. Matkakortti ei kuitenkaan ole mikään limuautomaatin tapainen kertakäyttöinen käyttöliittymä, vaan jokainen käyttäjä käy prosessin läpi minimissään viitisen kertaa, tyypillisemmin useita satoja kertoja. Korttinäkymä menee siis ”olisihan se kiva” -osastolle, mutta OK-napillisen mentaalimallin ja nopeuden kisassa nopeus voittaa, ja koko näkymä joutaa hiiteen.

Loppunäkymä

Arvolipun oston loppunäkymä on epäoptimaalisesti ryhmitelty. Kaikkein oleellisimmat tiedot – lipun voimassaoloaika ja jäljelle jäävä arvo – ovat heikosti nähtävillä. Korjattu näkymä ryhmittelee tiedot loogisemmin ja poistaa sinisen taustavärin aiheuttaman laatikko-ongelman. Myös koko prosessin kestoinen yläreunan tieto lippulajin värikoodauksineen on edelleen nähtävissä tällä näytöllä, jolloin ostoprosessin kulku säilyy yhtenäisenä.

Loppunäkymä, ennen ja jälkeen

Loppunäkymä, ennen ja jälkeen

Havainnointini mukaan suurin osa käyttäjistä ei edes katsonut loppunäkymää, vaan he jatkoivat matkaansa heti merkkiäänen kuultuaan. Valtava kuittausruksi on tässä tapauksessa erinomainen ratkaisu, ja käyttäjä tunnistaa siitä nopeasti pelkällä vilkaisulla toiminnon onnistuneen.

Loppusanat

Lippu-uudistusprojekti on varmasti ollut tuskallisen pitkä ja sisältänyt kymmeniä iteraatioita käyttöliittymästä. Todennäköisesti käyttöliittymään on tehty pieniä muutoksia toisensa perään, jolloin kokonaisuus on lopulta ruostunut puhki. Tämä on UI-projekteissa erittäin tyypillinen ilmiö, ja vaatii suunnittelijalta rohkeutta tokaista vielä maalisuorankin häämöttäessä, että viittä vaille valmis paketti pitäisikin vielä myllätä täysin auki toimivan kokonaisuuden varmistamiseksi.

Mutta ei hätää, arvon HSL! Käyttöliittymä on kosketusnäyttöjen myötä softaa, ja sen päivitys on vielä mahdollista. Jos ei muuten, niin viimeistään vyöhykeuudistuksen koittaessa. Nyt vaan rohkeasti suunnittelukynä uudestaan käteen, ja prototyyppien mokat.

Kirjoituksen alkuperäiset kuvat © HSL 2016. Kirjoittajalla ei ole mitään virallisia kytköksiä HSL:ään

« Takaisin blogilistaukseen