Käyttöliittymiä suunnitellessa tulee usein tarvetta protoiluun. Kenties asiakkaille halutaan esitellä nopeasti muokattavissa olevia malleja, joiden pohjalta keskustelu jatkosuunnittelusta konkretisoituu. Protoiluun on tietysti useitakin erilaisia ratkaisuja (eräs low-tech -ratkaisu on vaikkapa fläppitaulu tai PowerPoint-esitys), mutta jos sattuu olemaan tekemässä WPF- tai Silverlight-sovelluksia, voi käyttää apuna Expression Blend 3:n SketchFlow-ominaisuutta.
SketchFlow kuuluu Blend 3 -ohjelmistoon, ja se on tarkoitettu juurikin protoiluun. SketchFlowin avulla piirretään normaaleja WPF- tai Silverlight-käyttöliittymiä, kuitenkin käyttäen normaalien kontrollien sijaan erityisiä kontrolleja, jotka näyttävät käsin piirretyiltä. Käsin piirrettyjen kontrollien käyttö on tärkeää siksi, ettei huomio kiinnittyisi kontrollien ulkoasuun, vaan toiminnallisuuteen sekä esimerkiksi liikkumiseen ruutujen/lomakkeiden välillä (SketchFlow-termein screen).
Alkuun SketchFlowlla
SketchFlown käyttö vaatii erillisen projektin avaamisen Blendiin. Valitaan siis File-valikosta uusi projekti:
Sekä Silverlight- että WPF-projekteille on omat SketchFlow-projektimallinsa. Tässä valitaan WPF-sovelluksille sopiva malli. Kun projekti on luotu Blendiin, ruudulla pitäisi näkyä tyhjä valkoinen Screen 1. Nyt voidaan mennä Assets-ikkunaan ja valita sieltä kohta SketchFlow, ja edelleen sen alta kohta Styles/SketchStyles.
Tästä kohdasta löytyy joukko kontrolleja, joilla voidaan suunnitella karkeasti sovelluksen käyttöliittymä ruutu kerrallaan. Kontrolleja voidaan pudottaa ruutuun kuten mitä tahansa muitakin WPF-kontrolleja:
Ruutuja voidaan helposti luoda lisää käyttämällä lomakesuunnittelijan alta löytyvää SketchFlow Map -toimintoa käyttäen. Tämän kartan ideana on määritellä liikkuminen ruutujen välillä. Pienillä ruutua esittävän ikonin alle ilmestyvillä napeilla on helppo lisätä uusia ruutuja sovellukseen.
Proton esittely ja kommentointi
Kun proto on edellä kuvatulla keinoilla suunniteltu, voidaan prototyypistä tehdä ajettava sovellus (kokoa kertyy pakattuna noin pari megaa), joka voidaan lähettää asiakkaalle vaikkapa sähköpostilla. Asiakas voi ajaa prototyypin erillisessä Player-ohjelmassa (kuuluu Blendiin), ja käyttää sitä liikkumaan ruutujen välillä navigaatio-toimintojen avulla. Navigaatiovaihtoehdot perustuvat suoraan aiemmin tehtyyn ruutukarttaan (map).
Player on siitä kätevä, että käyttäjä voi käyttää sitä palautteen antamiseen. Ruutujen päälle voidaan piirtää korostusvärillä, ja sanallistakin palautetta voidaan antaa ruutukohtaisesti. Palautteen voi tallentaa levylle yhdeksi tiedostoksi, ja tämä tiedosto voidaan lähettää takaisin suunnittelijalle/kehittäjälle. Palautteen saa sitten näkyviin uudelleen Blendissä avaamalla luodun XML-tiedoston (tiedostopääte on .feedback) Feedback-ikkunassa.
Visuaalinen palaute taas näkyy suoraan ruudulla:
Yhteenveto
SketchFlow on näppärä tapa tehdä käyttöliittymäprotoja, varsinkin jos sattuu olemaan tekemässä WPF- tai Silverlight-sovelluksia. Hienoa on, että ruutujen välillä liikkuminen on tehty helpoksi. Myös palautteen kerääminen hoituu näppärästi, varsinkin jos suunnittelija/kehittäjä ja käyttäjä/asiakas eivät pääse istumaan saman pöydän ääreen.