Prototype

TT0S0100

Boehmin laki:

UX / Service Design

Wireframe? Mockup? Prototype???

• Termejä käytetään hieman sekavasti (myös tällä kurssilla)
• Wireframe
• Karkea rautalankamalli sisällöstä
• Mockup
• Tarkka malli ulkoasusta/designista. Ns. “layout”
• Prototype
• Toiminnallinen
• Tällä kurssilla keskitytään prototyyppiin, mutta saatetaan sanoa mockup :--)

Wireframe

• Karkea matalan tarkkuuden (low fidelity) luonnos tuotteen/palvelun sisällöstä
• Nopea ja halpa tehdä
• Dokumentaatio
• Kommunikointi
• Vastaa kysymyksiin
• Mitä?
• Missä?
• Miten?

Mockup

• Tarkan tason suunnitelma tuotteen/palvelun ulkonäöstä
• Niinsanottu ‘layout’
• Palautteen kerääminen
• Tuotteen/palvelun “myyminen” sidosryhmille
• Kalliimpi tehdä kun wireframe

Prototype?

• Yksinkertaisesti ehdotelma/suunnitelma valmiille käyttöliittymälle, palvelulle, ominaisuudelle...
• Visualisoimaan
• käyttöliittymätiloja
• toimintoja
• interaktioita
• Palvelupolkuja
• yms
• Erittäin hyödyllisiä monesta eri näkökulmasta

Prototype?

• Proto voi olla
• Nopea ja karkea paperille suhaistu (paper prototype)
• Visuaalisesti hiottu ja tarkka malli
• Ja kaikkea siltä väliltä
• Proto voi olla
• Luonnoksia paperilla
• Sarja kuvia (esim. Powerpoint-mallinen)
• Linkitettyjä kuvia
• Toiminnallinen
• Me teemme kevyesti toiminnallisen prototyypin

Various kinds of Prototyping phases

• Tarkkuuden mukaan
• Wireframe
• Paper prototype
• Low / medium / high fidelity prototype
• Mitä pidemmälle kehityksessä päästään, sitä tarkemmaksi uskalletaan protoa viedä
• Prototyyppi kehitetään käyttäjäpalautteen ja käyttäjätutkimuksen mukaan

Paper Prototype

Wireframes

Low Fidelity Mockups

High Fidelity Mockups

Ohjelmia:

• FluidUI
• NinjaMock
• Balsamiq
• Invision
• Sketch
• Yms. Näitä on PALJON

Hyödyt:

• Käytettävyys
• Voidaan visualisoida käyttöliittymää
• Käyttöliittymää päästään testaamaan aikaisessa vaiheessa
• Pystytään löytämään “pullonkauloja” ja parantamaan käyttökokemusta
• Validointi
• Esittäminen asiakkaalle
• Löytyykö riittävät toiminnot
• Onko asiakas tyytyväinen
• Sovelluskehitys
• Koodaajilla on tarkat speksit miten asiat pitää toimia
• Pitkälle iteroitu mockup vähentää muutoksia koodausvaiheessa
• Kaikki osapuolet ymmärtää mitä ollaan tekemässä
• Olettamuksien minimointi

Mitäs me näillä tehdään?

TÄllä kurssilla...

• Prototyyppi omasta palvelusta
• VÄHINTÄÄN kolme näkymää ja siirtyminen niiden välillä
• Otsikoi näkymät hyvin!
• Liitettävä vaatimusmäärittelyrunkoon
• Käytä hyväksesi jo määrittelemiäsi vaatimuksia, use caseja, palvelupolkua yms
• Muista miettiä myös eri persoonien näkökulmasta
• Tässä vaiheessa asiat “realisoituu” ja päästään näkemään tuloksia käytännössä!

Muita hyötyjä?

Kysymyksiä?