Menu


Käyttöliittymä kosketusnäytölle – käytännön opetuksia

20.1.2013

Pääsin tovi sitten onnekkaasti suunnittelemaan käyttöliittymää julkisten tilojen kosketusnäytölliselle laitteelle. Normaalia mielenkiintoisemman projektista tekivät laitteen fyysiset ominaisuudet: näytön koko oli reilut 40 tuumaa ja normaalikäytännöstä poiketen se sijoitettiin vaakatasoon pöydän sisälle.

Projektin tukalin seikka oli, ettei minulla ollut laitteiston hinnasta ja sen rakennusaikataulusta johtuen mahdollisuutta testata toteutustani oikeassa ympäristössä ennen kenraaliharjoituksia. 95% suunnittelusta siis tapahtui käytännössä valistuneen arvauksen varassa! Tämän kirjoituksen tarkoitus on antaa muutama vinkki niille, jotka saavat onnekkaasti vastaavan mahdollisuuden – ja niille onnettomille, joille prototypointi loppukäyttötilanteessa ei ole mahdollista.

Protoile, protoile, protoile

Proitoileminen, se kaikkein ilmeisin asia. Jos vain suinkin mahdollista, testaa käyttöliittymäsi prototyyppiä ympäristössä, joka vastaa mahdollisimman paljon lopullista laitteistoa ja käyttötilannetta; hiiren naksutteleminen toimistotuolilta käsin ei todellakaan vastaa kokemukseltaan kosketusnäytöllistä ympäristöä!

Suunnittelijan arkkisynti on ylpeys (tunnustan!) ja luulo siitä, että ammattitaito ja tieto voisivat korvata aidon kokemuksen. Jos loppukäyttölaitteiston saaminen on vain suinkin mahdollista, hanki se. Jos ei, pyri järjestämään ajoittaisia testaussessioita oikean laitteiston kanssa. Jos taas sekään ei yksinkertaisesti ole mahdollista, voit koittaa simuloida käyttötilannetta esimerkiksi A1-kokoisella paperilla (fläppitaulujen paperi sopii hyvin) tai pidemmälle vietyjä tuotoksia vaikkapa täppärillä.

Käsi syöttölaitteena

Toinen ilmeinen huomio on itse syöttölaite, eli kosketuspinta. Kosketuspintojen tökkiminen on tyypillisesti nopeampaa, mutta paljon epätarkempaa kuin hiiren käyttö. Nappien osuma-alueiden tulee olla valtavia – paljon suurempia kuin esimerkiksi täppäreissä tai kännyköissä – sillä suurten näyttöjen tyypillinen "osoitin" on jonkinlainen yhdistelmä yhden ja kolmen sormen väliltä tai (varsinkin lasten tapauksessa) koko kämmen. Hyvänä nyrkkisääntönä nappien minimikoolle voisi pitää taaperon nyrkkiä, eli noin 4x4 cm aluetta.

Hyvänä nyrkkisääntönä nappien minimikoolle voisi pitää taaperon nyrkkiä.

Käden liikuttaminen on useimmille ihmisille nopeampaa kuin hiiren käyttö, mikä kannattaa huomioida esimerkiksi pelien suunnittelussa. Hiirellä vaikealta tuntuva nopeuteen perustuva peli voi olla kosketusnäytöllä huomattavasti helpompi. Myös odotusajat voivat tuntua subjektiivisesti pidemmiltä itse käytön ollessa nopeampaa. Suunnittelussa kannattaa tietenkin myös muistaa jatkuvasti, ettei kosketusnäytöissä ole käytössä rollover-tilaa: tökättävien alueiden on viestittävä selkeästi tökättävyyttään ja niiden on annettava selkeä palaute toiminnon rekisteröimisestä. Myös raahaustoiminnot kannattaa jättää pois tai toteuttaa niin, että lyhytaikainen kosketuksen nosto ei keskeytä raahaamista. Pitkien raahaustoimintojen suorittaminen voi lisäksi olla hyvin vaikeaa lyhytkätisille käyttäjille, erityisesti lapsille, jotka jo muutenkin kurottelevat yltääkseen näytön keskiosaan.

Monikosketusta käyttävissä sovelluksissa on hyvä huomioida, ettei reuna-alueille kannata sijoittaa käytettäviä elementtejä mikäli näyttö on vaakatasossa. Reunoilla kun tuppaa useimmiten olemaan kyynärpää tai jälkikasvun kämmenet. Itse en tässä projektissa käyttänyt monikosketustoimintoja protoilun mahdollisuuden puutteen vuoksi. Tällöin kannattaa huomioida, ettei käsi ole kaksiulotteinen pinta, ja tuplakosketuksia siis tapahtuu vääjäämättä. Sovellukseen kannattaa siis suunnitella esimerkiksi viive rekisteröitävien klikkauksien välille saman alueen sisällä.

Kymmenen iPadin pinta-ala

Ja se pinta-ala. Neljäkymmentä tuumainen kosketusnäyttö vastaa pinta-alaltaan yli nelinkertaisesti pöytätietokoneen näyttöä, läppärinäytöistä puhumattakaan! Lisäksi kosketusnäyttöjä käytetään useimmiten paljon toimisto-olojen näyttöjä lähempää, jolloin näytön valtavuus korostuu entisestään. Erityisesti vaakatasossa olevien näyttöjen ääreen tyypillisesti kumarrutaan – pienemmät käyttäjät jopa istuvan niiden päällä! – jolloin käyttö käyttöetäisyys lyhenee edelleen.

Käytännössä tämä tarkoittaa sitä, että suunnittelutilanteessa pieneltä vaikuttava grafiikka on oikeassa käyttötilanteessa valtavan kokoista ja kokonaiskuvan hahmottaminen on vaikeampaa. Mikäli sovelluksessa on esimerkiksi näytön reunassa oleva valikko, voi sen havaitseminen olla vaikeaa. Omassa projektissani opin myös kantapään kautta sen, että pinta-alan kasvu voi vaikuttaa merkittävästi sovelluksen suoritinvaatimuksiin. Varsinkin vektori- tai 3D-pohjaisessa grafiikassa piirtämisen vaatima suoritintaakka kasvaa dramaattisesti näyttökoon kasvaessa. Tilannetta ei helpota juurikaan se, että useimpien kosketusnäyttöjärjestelmien rauta on tila- ja jäähdytystarpeiden sanelema kompromissiratkaisu.

Käyttöä toimistotuolin ulkopuolelta

Ehkä kaikkein hankalimmin perustietokoneella simuloitava puoli on kosketusnäyttöjen käyttötilanne. Käyttäjä ei useinkaan katso ruutua mukavasti toimistotuolilta käsin optimikulmassa, vaan käyttäjä on useimmiten hieman näytön sivussa. Käyttäjiä voi myös olla saman aikaisesti useita, jolloin joku voi katsella näyttöpöytää täysin "ylösalaisin". Usea samanaikainen käyttäjä aiheuttaa käyttötilanteeseen myös tiettyä hektisyyttä, mikä kannattaa kääntää suunnittelussa positiiviseksi voimavaraksi: esimerkiksi pelien pelaaminen kaverin kanssa on paljon hauskempaa, kun pelatessa läiskii vahingossa kaveria sormille ja kädet menevät ristiin.

Suosittelen lämpimästi käyttötilanteen testaamista vaikkapa jo mainitulla fläppitaulun paperilla, kaukana tietokoneen ruudulta. Itse sijoitustilan, usein julkisen tilan, vaikutus käyttötilanteeseen onkin jo sitten ihan oma tarinansa. Tutustu laitteen sijoitustilaan paikan päällä ja eri vuorokauden aikaan. Huomioi myös, että esimerkiksi äänien käyttö ei ole usein sallittua julkisissa tiloissa.

Suunnittelun muistilista

Loppuun vielä kevyt muistilista julkisten tilojen kosketusnäyttöjen suunnittelun alkuvaiheeseen:

  • Huomioi kosketuskäyttöliittymän lainalaisuudet: affordanssit, palaute, painalluksen rekisteröinnin katkonaisuus.
  • Tee painettavista alueista suuria. Suurenna niitä sitten vielä hieman lisää.
  • Näytön pinta-ala tulee olevaan valtava.
  • Laitteiston suoritin on todennäköisesti hitaampi kuin oletat.
  • Huomio katselukulman vaihtelu ja eri mittaiset kädet. Yltäväthän pienemmät käyttäjät kaikkiin näytön osiin?
  • Protoile, käytettävyystestaa ja jätä vesiputousmalli huvipuistoille.

« Takaisin blogilistaukseen