Käyttöliittymäsuunnittelija suunnittelee, asiakas katselmoi ja toteuttaja toteuttaa. Tämä periaatteessa yksinkertainen ketju ei kuitenkaan tuota aina toivottua lopputulosta. Joskus alkuperäisen suunnitelman tavoitteet eivät toteudu tai asiakas ei saa sitä mitä tilasi. Yleensä konseptitason suunnittelu tehdään rautalankamalleina, joilla käyttöliittymäsuunnittelija havainnollistaa käyttöliittymän keskeiset ominaisuudet ja sommittelun asiakkaalle ja kehitystiimille. Rautalanka on tähän erinomainen työkalu, mutta samalla myös väistämättä rajoittunut tapa esittää suunnittelijan visioima käyttöliittymä. Rautalanka ei koskaan pysty kommunikoimaan kaikkea käyttöliittymän toiminnallisuutta eikä erityisesti eri näkymien suhdetta toisiinsa kattavasti. Käyttöliittymäsuunnittelun seuraava vaihe kannattaa lähes aina tehdä rakentamalla käyttöliittymäprototyyppi, joka on osaavissa käsissä erinomainen työkalu parantamaan suunnittelun laatua. Hyvä käyttöliittymäprototyyppi vastaa suunnittelutyön keskeisiin haasteisiin:
- Käyttöliittymäsuunnitelman kommunikointi kehitystiimille ja asiakkaalle
- Suunnittelijan oman ajattelun selkiyttäminen ja rautalangaksi piirretyn käyttöliittymän koeajaminen
- Kevyen käytettävyystestauksen tekeminen varhaisessa vaiheessa projektia
Käyttöliittymäprototyyppi tarjoaa sekä asiakkaalle että kehitystiimille toimivan version käyttöliittymästä joka simuloi tuotantoversion toiminnallisuutta ja ulkoasua. Lisäksi prototyyppi paljastaa usein rautalankamallissa piiloon jääviä seikkoja myös suunnittelijalle itselleen. Miten navigointi todella toimii? Mitä tapahtuu kun käyttäjä siirtyy sivulta toiselle? Miten sivulle suunniteltu responsiivisuus toimii käytännössä? Hyvä käyttöliittymäprototyyppi vastaa näihin ja moneen muuhunkin kysymykseen kevyesti ja tehokkaasti. Lisäksi käyttöliittymäprototyyppiä voi käyttää kevyeen käytettävyystestaukseen. Tämä on erityisen suositeltavaa projektin alkuvaiheessa jossa testattavaa tuotantoversiota ei vielä ole, mutta käyttöliittymäsuunnitteluun on hyvä saada palautetta suoraan oikeilta käyttäjiltä. Vaikka prototyyppi ei sisällä oikeaa toiminnallisuutta, moneen peruskysymykseen on mahdollista saada vastaus prototyyppitestaamisella.
Keveys ja tehokkuus ovat prototyypin rakentamisen kulmakiviä. Suunnittelijan on tunnistettava käytännön projektityössä milloin on oikea aika aloittaa protoilu, jotta työmäärä ja protosta saatava hyöty kohtaavat. Yleensä prototyyppiä ei kannata ryhtyä rakentamaan heti projektin alussa, sillä prototyyppi vaatii alleen perustellun käyttöliittymäsuunnitelman jonka peruskonseptit on jo ehditty keskustella ja iteroida asiakkaan kanssa kuntoon. Rautalankamalli sopii tähän työhön paremmin. Toisaalta prototyyppiä ei kannata jättää liian myöhäiseen vaiheeseen projektissa, sillä ihanteellisesti sen tulisi olla kehittäjien ja asiakkaan arvioitavana ennen kuin tuotantoversion kehitys ehtii ajaa prototyypin ohi. Prototyypin tulisi yleensä olla myös tarpeeksi kevyt toteutus käyttöliittymästä, eikä sen yleensä tarvitse toteuttaa kaikkia suunniteltuja toiminnallisuuksia tai olla ulkoasultaan viimeiseen asti hiottu.
Hyväksi havaittuja prototypointimenetelmiä ovat paperiprototyyppi, suoraan suunnitteluohjelmistolla rakennettu prototyyppi sekä HTML-prototyyppi.
Paperiprototyyppi on kevyt ja erityisesti suunnittelun alkuvaiheessa tehokas menetelmä rautalangan testaamiseen ja iterointiin. Paperiprototyypissä käyttöliittymäsuunnitelma joko piirretään tai printataan paperille, ja käyttöliittymän toiminnallisuutta demonstroidaan vaihtamalla piirrosta tai sijoittamalla uusia paperinpaloja käyttöliittymään käyttäjän toiminnan mukaan. Paperiprototyypin hyviä puolia ovat sen edullisuus, nopeus sekä alhaiset tuotantokustannukset (kynä ja paperia). Huonona puolena paperi on aina paperia eikä välttämättä anna tarpeeksi realistista kuvaa käyttöliittymän todellisesta toimivuudesta.
Joillakin suunnitteluohjelmistoilla mahdollista rakentaa prototyyppejä suoraan rautalankamallien päälle. Käytännössä tämä tarkoittaa toiminnallisuuden lisäämistä suoraan rautalankaan. Lisäksi on palveluita jotka on suunniteltu nopeiden prototyyppien tuottamiseen. Tämäntyyppinen lähestymistapa voi olla nopea ja tehokas keino hahmottaa käyttöliittymän toiminnallisuutta, eikä vaadi käyttöliittymäsuunnittelijalta itseltään teknistä osaamista. Huonona puolena monimutkaisempien toiminnallisuuksien toteuttaminen suoraan suunnitteluohjelmistossa on usein jopa työläämpää kuin käsin HTML-koodin kirjoittaminen. Lisäksi ohjelmistolla tehtävä protoilu on aina riippuvainen ohjelmiston tarjoamista ominaisuuksista.
Paras mutta samalla vaativin prototypointikeino on HTML-prototyyppi, eli käyttöliittymäsuunnitelman toteuttaminen web-sivuna HTML-teknologioilla. HTML-prototyyppi antaa suunnittelijalle vapaat kädet toteuttaa suunnittelemansa käyttöliittymä juuri sellaisena kuin on sen tarkoittanut. Lisäksi se on realistisin ja lähinnä tuotantoversiota oleva keino protoilla. HTML-prototyyppi vaatii suunnittelijalta toteutusosaamista: vähintään HTML/CSS on oltava hyvin hallussa, mutta käytännössä myös Javascript-osaamisen täytyy olla hyvällä tasolla. Tämä asettaa haasteita prototyypin tehokkuusvaatimukselle, sillä HTML-proton rakentaminen voi helposti viedä liikaa aikaa erityisesti kokemattomammalta toteuttajalta. Onneksi nykyisin on tarjolla useita työskentelyä helpottavia käyttöliittymäkirjastoja kuten Bootstrap, jQuery UI tai Foundation, joilla on mahdollista tuottaa näyttäviä käyttöliittymiä nopeasti ja vaivattomasti.
Yleisesti ottaen käyttöliittymäprototyypin toteutuksessa on otettava huomioon projektin aikataulut ja suunnittelijan oman ajankäytön tehokas hyödyntäminen. Ennen prototyypin rakentamista on oltava selvillä millaisiin kysymyksiin se voi antaa vastauksia, ja mitä lisähyötyä siitä on pelkkään rautalankamalliin verrattuna (usein niitä löytyy lukuisia). Lisäksi prototyypillä voi olla erityisvaatimuksia jotka täytyy ottaa huomioon sen toteutuksessa. Tulisiko esimerkiksi HTML-prototyypin oltava sellaisenaan hyödynnettävissä tuotantoversiossa? Jos vastaus on kyllä, prototyypin laatuvaatimukset nousevat huomattavasti. Toisaalta osaavan tekijän käsissä prototyyppi on parhaimmillaan lähes sellaisenaan tuotantokoodia, mikä antaa varsinaiselle kehitystiimille suoraan aikaa ja mahdollisuuksia keskittyä hiomaan toiminnallista koodia, sekä parantamaan käyttöliittymätason toteutusta aikaisemmin kuin se muuten olisi mahdollista.
Prototyypin rakentaminen on projektityössä käytettävyystestaukseen verrattavissa oleva suunnittelun työkalu. Sen hyödyllisyyttä voi olla ennalta vaikea nähdä, mutta prototyypin tarjoamien uusien ideoiden ja parannusten kautta lopputuloksena on yleensä merkittävästi kohonnut suunnittelun laatu, parempi käyttäjäkokemus ja asiakkaalle pitkällä aikavälillä tätä kautta syntyvät kustannussäästöt tai parantunut myynti. Parhaimmillaan tyylikäs ja teknisesti laadukas prototyyppi on se tekijä, joka varmistaa että valmiin palvelun käyttäjäkokemus on ykkösluokkaa. Goforen UX-palveluissa prototyypit ovat kiinteä osa päivittäistä suunnittelutyötä.
