Plug&play UX design – prototyypistä tuotantoon

joulukuu 29, 2015 // Antti Kangas

Ketterästi laatua vesiputouksesta

Ihanteellisessa ohjelmistotuotteiden agile-kehitystyössä tuotehallinto sekä suunnittelijat ja koodaajat istuvat samassa tilassa ja kaikkien työn edistyminen on jatkuvasti jokaisen tiedossa välittömän kommunikaation ansiosta. Tällöin mahdollisiin ongelmiin on helppo puuttua nopeasti ja tarvittaessa muuttaa suunnitelmia. Tällaiseen työtapaan päästään valitettavasti yleensä vain suuremmissa kehityshankkeissa.

Vesiputousmallin ongelmat, kuten jäykkyys muutosten hallinnassa ja reaktionopeudessa, ovat olleet jo pitkään tiedossa. Usein meidänlaisemme pienen toimiston suunnittelijat joutuvat kuitenkin toimimaan erillään asiakkaasta ja toteutusportaasta, jotka voivat sijaita eri kaupungeissa tai kokonaan eri maissa.

Kuinka silloin varmistetaan lopputuloksen laatu ja parhaan mahdollisen käyttäjäkokemuksen syntyminen? Vaatimusten ja speksien heittäminen seinän yli tämän prosessin siilosta toiseen mahdollistaa moninaisia kommunikaatiokatkoksia ja väärinymmärryksiä.

Megaspeksi ei pelasta

Suunnitelmat voi toki tehdä äärimmäisen yksityiskohtaisiksi ja kaikenkattaviksi. Joka ikisen pikselin paikan ja värin voi speksata etukäteen kaikissa mahdollisissa käyttötilanteissa. Ei siinä olisi kuitenkaan mitään järkeä. Työmäärä olisi valtava, eikä ole mitään takeita, että suunnitelmaa kuitenkaan pystyisi toteuttamaan sellaisenaan.

Lopputuote pitää saada elämään jo varhaisemmassa vaiheessa.

Vaikka suunnittelijoiden mielikuvituskapasiteetti nähdä työn lopputulos ennalta mahdollistaa tällaisen megaspeksin laatimisen, sen lukijalla ei välttämättä ole samanlaista erikoiskykyä. Asiakas saattaa vasta valmista tuotetta käyttäessään tajuta, että eihän tämä ollutkaan ihan sitä, mitä hän oikeasti tarvitsi. Pahimmassa tapauksessa palaute tulee vasta hänen omilta asiakkailtaan puuttuvan rahallisen tulovirran muodossa.

Lopputuote pitää siis saada elämään jo varhaisemmassa vaiheessa. Monet suunnitteluohjelmistot tarjoavat eriasteisia funktionaalisia prototyyppejä omilla tekniikoillaan. Yleensä niitä ei kuitenkaan pysty hyödyntämään suoraan toteutusvaiheessa muuten kuin pois heitettävinä esimerkkeinä.

Prototyyppi tuotantokäyttöön

Ohjelmointitaitoinen suunnittelija pystyy kuromaan siilojen välisiä kuiluja kiinni. Useamman vuoden ajan projekteissani pääasiallinen deliveraabeli eli lopputuote on ollut funktionaalinen prototyyppi, jonka olen tehnyt samalla tekniikalla kuin millä koodaajat toteuttavat lopputuotteenkin. Windows-ohjelmissa WPF työkalunaan Expression Blend, webbipohjaisissa tuotteissa taas HTML ja CSS maustettuna jQueryllä ja JavaScriptillä.

Koodaajat pystyvät hyödyntämään tällaisen prototyypin lopputuotteen pintakerroksena. Parhaassa tapauksessa heidän tarvitsee vain kytkeä bisneslogiikka tietokantoineen kiinni muuten valmiiseen käyttöliittymään. Tätä voisi kutsua jopa plug and play UX:ksi. Toki usein tarvitaan lisäksi myös yksilöllisempien UI-widgetien kehitystyötä.

Toteutan siis prototyyppiin tärkeimmät interaktiot kuten navigaation eri näkymien välillä, dialogit eri palautetyyppeinen ja responsiivisuuden eli näkymät reagoivat oikein selainikkunan tai mobiililaitteen eri kokoihin. Samaan pakettiin pääsevät myös tilojenväliset animoidut transitiot ja muut käytettävyyttä parantavat mikrointeraktiot.

Eri ongelmakenttä

Kooditasolla vältän menemästä tämän syvemmälle, koska siellä ratkotaan aivan erilaisen ongelmakentän asioita. Käyttöliittymän näkökulmasta on samantekevää, mitä kieltä tai frameworkiä taustajärjestelmissä käytetään, kunhan ne tuottavat selaimeen saman HTML- ja CSS-sisällön tehokkaasti ja nopeasti.

Yllättävän suuri osa ajastani menee CSS-luokkien nimeämiseen semanttisesti oikein. Seuraamalla rakenteen ja presentaation eriyttämisperiaatetta joutuu miettimään paljon syvällisemmin, mitä käyttöliittymän eri elementit merkitsevät loppukäyttäjälle ja käyttötilanteille.

Dynaamisia datasisältöjä lukuun ottamatta käyttöliittymä siis vastaa lopullista tuotetta ja sitä voi kokeilla oikeissa käyttöympäristöissä ja –tilanteissa. Asiakas ja loppukäyttäjä pystyvät tällöin arvioimaan paljon helpommin, ollaanko tekemässä oikeaa tuotetta. Tuotekonsepti herää henkiin aivan eri tavalla kuin rautalankakuvissa tai staattisissa näköisillustraatioissa. Puhumattakaan sanallisista toiminnallisuuskuvauksista. Käyttökokemuksen laatu säilyy loppuun asti sellaisena kuin suunnittelija sen on tarkoittanut.

mid_image

Tapahtuuko teidän projekteissanne näin?
kuvalähde: http://projectcartoon.com/cartoon/835281

Antti