UI syntyy simuloimalla

joulukuu 1, 2015 // Lauri Sumari

Käyttöliittymän piirtäminen tavoitepohjaisten käyttötapausten avulla

Käyttöliittymien suunnittelussa on monta kivaa työvaihetta. Yksi lempipuuhistani on alkuvaiheen käyttöliittymäkuvien piirtäminen tavalla, joka samalla määrittelee toiminnallisuuden.

Käytän mielelläni simulointitekniikkaa, jossa käyttöliittymä piirretään näkyviin vähitellen, ikään kuin puoli askelta edellä käyttäjää. Samalla käyttöä simuloidaan, eli astutaan käyttäjän saappaisiin ja yritetään edetä kohti määriteltyä tavoitetta.

Kerron tässä simulointitekniikasta lyhyesti. Erillisessä käytännön ohjeessa (englanniksi) kuvaan työvaiheita hieman tarkemmin esimerkin avulla.

Mikä ihmeen tavoitepohjainen käyttötapaus?

Lähtökohtana toimii ns. tavoitepohjainen käyttötapaus. Se kuvaa realistisen tilanneasetelman, josta käyttöliittymän avulla pitää selviytyä:
– missä tilanteessa käyttäjä on
– mitä hän yrittää tehdä ja miksi
– mitä hän tässä kohtaa tietää ja mitä ei.

Toisin kuin perinteiset käyttötapaukset, tavoitepohjainen käyttötapaus ei kuvaa lainkaan järjestelmän toimintaa tai käytön vaiheita. Se vain määrittelee ongelman, jolle seuraavaksi piirretään ratkaisu eli käyttöliittymä. Itse käyttötapaus ei ota kantaa ratkaisutapaan.

Käyttöliittymä rakentuu pala palalta

Piirtämisessä simulointitekniikan periaate on yksinkertainen: käyttöliittymää piirretään vain sen verran, että tilanteessa päästään eteenpäin. Sitten ”käytetään” sitä, ja piirretään seuraava vaihe. Näin käyttöliittymä rakentuu sitä mukaa kun käyttö etenee.

On tärkeää keskittyä yhteen käyttötapaukseen kerrallaan, jotta kunkin tilanteen ratkaisusta tulee mahdollisimman suoraviivainen.

Kaikki piirretään silti aluksi yhteen ja samaan ”isoon ikkunaan”. Jako eri näkymiin kannattaa tehdä vasta myöhemmin, kun eri käyttötapausten väliset päällekkäisyydet näkee tarkemmin.

Uuden käyttötapauksen lisäämisen jälkeen käyttöliittymää regressiotestataan aiemmilla käyttötapauksilla, eli varmistetaan etteivät muutokset ole rikkoneet niitä.

Lopputulos voi olla paperiprototyyppi tai vuorovaikutteinen demo. Olennaista on nopeus. Itse käytän tähän vaiheeseen enimmäkseen kynää ja paperia, koska tietokoneella minun on vaikea olla hukkaamatta aikaa turhantarkkaan asetteluun. Jotkut kohdat (esim. isot taulukot) voi olla nopeinta tehdä tietokoneella, tulostaa ja liittää osaksi paperiprotoa.

Piirtämisen jälkeen käyttöliittymä on ”olemassa” siinä mielessä, että sitä voi nyt näyttää ja käyttää. Periaatteessa koodaamisen voi aloittaa sen perusteella.

paper-prototype12
Kaikki piirretään aluksi ”yhteen isoon ikkunaan”. Jako eri näkymiin kannattaa tehdä vasta myöhemmin.
Hyödyt

Simuloimalla piirretyssä käyttöliittymässä
– polku käyttötilanteiden läpiviemiseksi on mahdollisimman suora ja lyhyt
– navigointia (= aina turhaa työtä) tarvitaan hyvin vähän, jos ollenkaan
– kaikki tarvittava informaatio on näkyvissä juuri silloin kun sitä tarvitaan
– ei ole tarpeettomia toimintoja: jokaisen toiminnon tarkoitus on johdettavissa käyttötilanteista.

Simulointitekniikka ei tietenkään vielä takaa hyvää käyttöliittymää, mutta ohjaa suunnittelua oikeaan suuntaan.

Sekin auttaa, että työ alkaa konkreettisten käyttötilanteiden tunnistamisella ja priorisoinnilla, johon osallistuu koko tiimi. Näin tiimin huomio kohdistuu todellisiin käyttötilanteisiin sen sijaan, että liikkeelle lähdettäisiin yksittäisistä toiminnoista tai vaatimuksista, joita ei sen kummemmin perustella. Tavoitepohjaiset käyttötapaukset ovat yksiselitteisempi ja konkreettisempi tehtävänanto. Ne luovat yhteisymmärrystä tavoitteista, sanelematta kuitenkaan ratkaisuvaihtoehtoja.

Piirrä tarpeeksi ajoissa

Koska piirtämisen kautta määritellään järjestelmän toiminnallisuutta, se kannattaa tehdä aivan alussa.

No, bisnestarve on kyllä tiedettävä ensin: kuka järjestelmää tulee käyttämään; miten se helpottaa heidän elämäänsä; mistä raha tulee. Sen jälkeen käyttäjiä tarkkailemalla hankitaan todellisista tilanteista yksityiskohtaista tietoa, joka siis kuvataan tavoitepohjaisiksi käyttötapauksiksi.

Mutta heti seuraavaksi päästään piirtämään.

Kohti näkymätöntä käyttöliittymää

Pidän simulointitekniikassa siitä, että se osoittaa kuinka vaivatonta käyttö voi olla. Määriteltyihin käyttötilanteisiin haetaan mahdollisimman lyhyt ja suoraviivainen työnkulku. Ideana on välttää esteiden muodostuminen käyttäjän lähtötilanteen ja tavoitteen väliin.

Täydellinen käyttöliittymä on näkymätön. Sen eleganssi ei kumpua efekteillä koreilusta, vaan esteettömyydestä. Käyttäjä vain tekee asioita suoraan. Hän ei ”klikkaa tuosta, navigoi, raahaa tuosta” tai mitään sellaista. Ei, hän korjaa valokuvaa. Suunnittelee lomamatkaa. Valitsee ravintola-annosta. Hän keskittyy tavoitteeseensa, ei käyttöliittymään.

Suunnittelun tässä vaiheessa käyttöliittymä on tavallaan juuri tällaisessa ihanteellisessa tilassa – siinä on kaikki tarvittava, muttei mitään ylimääräistä. Fokus on sataprosenttisesti tehokkuudessa ja toimivuudessa. Kompromissit tulevat myöhemmin.

Täydellinen käyttöliittymä on näkymätön.

Lauri