UX-työkalut prototyyppien luomiseen, Lokakuu 2016
Ensimmäisessä ux-aiheisessa artikkelissani teen kartoituksen prototyyppien luomiseen tarkoitetuista UX-työkaluista. Kartoitusta varten asensin Windows-koneelleni kolme uutta työkalua jo aiemmin tuntemani Justinmind-sovelluksen lisäksi. Kokeilin myös viittä selaimessa toimivaa pilvipohjaista sovellusta.
Artikkelin kirjoittamiseen motivoi halu saada parempi käsitys olemassa olevista vaihtoehdoista. Viime vuosina onkin ollut ilahduttavaa nähdä pilvipohjaisten prototyyppityökalujen yleistyvän. Vielä 1–2 vuotta sitten käymilläni ux-kursseilla ei juurikaan käytetty hyväksi oikeita prototypointiin suunnitteltuja työkaluja, vaan ne toteutettiin joko piirtämällä (jolle on edelleen paikkansa) tai kevyellä ohjelmoinnilla. Erityisesti usean henkilön yhtäaikaista työskentelyä tukevat pilvipohjaiset sovellusratkaisut olisivat olleet ryhmätyökursseilla suuri apu.
Tässä artikkelissa esitellyt työkalut soveltuvat pääasiassa web- ja mobiilisovellusten suunnitteluun. Lista on epäilemättä vajaa, sillä se sisältää ainoastaan sovelluksia, joihin minulla on tavalla tai toisella kosketuspintaa. Painopiste onkin vahvasti esimerkiksi alan lehdissä tai nettisivuilla esillä olleissa työkaluissa.
Prototyökalut voidaan erotella pilvipohjaisiin ja työpöytäsovelluksiin, joka erottaa useimmissa työkalut myös kevyisiin (low-fidelity) ja korkean tason (high-fidelity) työkaluihin. Sen lisäksi merkittävä ero nk. sketch- ja wireframe-työkalujen välillä. Ensin mainitulla on tarkoitus tehdä luonnosmaisempia protototyyppejä, kun taas rautalankamallilla (wireframe) on tarkoitus suunnitella tarkemmin lopputuotteelta näyttäviä prototyyppejä. Tässä artikkelissa listattuja sovelluksia ei välttämättä voi verrata suoraan toisiinsa, sillä ne on luotu eri lähtökohdista ja eroavat esimerkiksi toimintamahdollisuuksien laajuudessa.
Pilvipohjaiset työkalut
Webflow
Webflow on pelkästään web-sivujen suunnitteluun tarkoitettu työkalu. Se on omien kokemuksieni perusteella juuri siinä omaa luokkaansa ja web designia harrastaneet ovat varmasti nopeasti kuin kotonaan. Web-sivujen hienovaraiseen ja tarkkaan suunnitteluun Webflow on erittäin hyvä työkalu, mutta aivan yksinkertaisimmista päästä työkalu ei ole. Työkalun käyttäjällä tulee olla ymmärrystä web-ohjelmoinnista, sillä suunnittelu menee vahvasti koodauksen ehdoilla. Sen ansiosta kehitetty web-sivu on kuitenkin nopeasti prototyyppivaiheen jälkeen yhden napinpainalluksen päässä julkaisukunnosta. Ilmaisessa versiossa esimerkiksi HTML/CSS-koodia ei ole mahdollista viedä sovelluksesta, mutta muuten se on ominaisuuksiltaan erittäin kattava.
Proto.io
Proto.iolla on mahdollista luoda web-, työpöytä- ja mobiilisovellusprototyyppejä. Proto.io toimii sujuvasti selaimessa ja sen käyttöliittymä on yksi selkeimmistä. Toisaalta palvelu ei toiminnoiltaan ole vertailun kattavimmasta päästä. Kaikkia Proto.ion ominaisuuksia voi kokeilla ilmaiseksi 15 päivän ajan, jonka jälkeen hinnat alkavat 24 dollarista kuussa. Opiskelijoille annetaan hinnasta 50 prosentin alennus ja kokeiluajan jälkeenkin Proto.iota voi käyttää rajoitettuna ilmaiseksi. Ilmainen käyttö kattaa yhden projektin, jossa on korkeintaan viisi näyttöä ja kuluttaa korkeintaan 10 megatavua.
UXPin
UXPin on markkinointiin panostava ux-yritys, joka tarjoaa myös prototyökalun web-sivujen ja erilaisten sovellusten suunnitteluun. UXPin on hyvin helppokäyttöinen myös sellaiselle, jolla ei ole aiempaa kokemusta prototyökaluista. Työkalua voi testata viikon ajan, jonka jälkeen sen perusominaisuudet saa halvimmillaan käyttöönsä 17,10 dollarin kuukausimaksulla. UXPin tunnetaan myös mielipiteitä jakavista ilmaisista e-kirjoista, jotka ovat ainakin joiltain osin tutustumisen arvoiset.
Atomic
Atomic on melko tuore työkalu ja ollut viime aikoina esillä mm. net-lehdessä. Se nojautuu vahvasti yhteisöllisyyteen ja interaktioiden suunnitteluun. Testissäni Atomic vaikutti jonkin verran jähmeältä ja epävakaalta. Moneen muuhun työkaluun verrattuna Atomic ominaisuuksiltaan köyhempi ja erilaisten elementtien löytäminen on hankalampaa, koska käyttöliittymä on yksinkertaistettu äärimmilleen. Atomicin ensimmäinen kuukausi on ilmainen, jonka jälkeen kuukausihinnat alkavat 15 dollarista. Atomic ei tarjoa ilmaisvaihtoehtoa koeajan jälkeen.
Moqups
Moqups muistuttaa käyttöliittymältään UXPiniä ja Proto.iota. Yksinkertaisuudessaan protojen teko onnistuu luomalla sivuja ja niiden välisille elementeille interaktioita. Sovelluksessa on kattava valikoima erilaisia toimintoja. Moqupsin ilmainen käyttö rajautuu yhteen, enintään 300 objektia ja viisi megatavua kuluttavaan projektiin.
Työpöytäsovelluksia
Balsamiq
Balsamiq eroaa muista tässä jutussa olevista prototyökaluista sillä, että kyseessä on puhdasverinen sketch-työkalu. Balsamiqulla on oma tyyli ja sillä tehdyt protot ovatkin helposti tunnistettavissa. Sovellus on yksi alan tunnetuimmista ja opiskeluaikoina kuulin sekä näin, kuinka sitä käytetään paljon opiskeluprojekteissa ja työelämässä. Balsamiqua voi kokeilla kuukauden ilmaiseksi, jonka jälkeen tuotteen voi ostaa 89 dollarin kertamaksulla.
Justinmind
Justinmind on esimerkiksi Mockplussaan verrattuna jo selvästi raskaampi prototyyppityökalu ja aloituskynnykseltään korkeampi. Sovelluksessa on kattavasti toimintoja sekä web-sovellusten että mobiilisovellusten suunnitteluun. 19 dollarilla kuussa on mahdollista hankkia pro-versio, mutta ilmaisversio sisältää jo <a href=”https://www.justinmind.com/blog/justinmind-free-vs-pro-edition/">hyvin kattavasti</a> ominaisuuksia.
Mockplus
Mockplus näyttää ulkoisesti yksinkertaiselta verrattuna moneen muuhun työkaluun, mutta ensivaikutelma sovelluksesta on kuitenkin positiivinen. Mockplussan suurin etu yksittäiselle kotikäyttäjälle on sen ilmaisuus, joskin pro-version kautta on saatavissa joitain lisätoimintoja. Pro-version vuosihinta on 119 dollaria.
Sketch
Sketch on yksi tunnetuimmista, ellei peräti tunnetuin UX-prototyyppityökalu. Sen nimeen vannovat useat ux-ammattilaiset ja se lieneekin yksi viimeistellyimmistä ja kattavimmista ux-työkaluista. Sketch on saatavilla ainoastaan Maceille ja Windows-versiota sovelluksesta ei ole odotettavissa. En ole henkilökohtaisesti nähnyt Sketchiä tositoimissa.
Adobe XD
Sketchin tapaan itselläni ei ole kokemuksia Adobe XD:n käytöstä, sillä kyseessä on vahvasti ammattilaiskäyttöön suunnitteltu sovellus. Olen ollut Adobe XD:stä innoissani siitä lähtien, kun se tunnettiin vielä “Project Cometina”. Adobella on loistavat lähtökohdat ux-työkalun tuomiselle markkinoille, mutta toistaiseksi sovellus on ilmeisesti vielä kärsinyt jonkin verran lastentaudeista. Työkalu on tällä hetkellä saatavilla ainoastaan Macille, mutta sen on luvattu saapuvan lähitulevaisuudessa myös Windowsille.
Axure
Aikojen alusta asti olemassa ollutta Axurea pidetään yhtenä ux-suunnittelijan perustyökaluista ja sen voi nähdä suoraan mainittavan esimerkiksi UX-työpaikkailmoituksissa. Vaikka ensivaikutelma Axuresta on yllättävän yksinkertainen, on se toiminnoiltaan kattava ja sopii sekä nopeaan protoiluun että korkean tason mallinnukseen. Axure on hinnaltaan ja toiminnoiltaan hyvin verrattavissa Justinmindiin, vaikka käyttöliittymät hieman erilaisilta näyttävätkin. Axure on opiskelijoille ilmainen, mutta muuten pro-versiolla on hintaa 495 dollaria. Ilmainen kokeiluaika kestää kuukauden.
Lopuksi
Prototyökaluja kartoittaessani vaihtoehtojen kattava määrä oli yllätys. Muita työkaluja, joita tässä jutussa ei käyty läpi olisi esimerkiksi WireframeSketcher, Indigo Studio, ProtoShare, Marvel ja HotGloo. Aion mahdollisuuksien mukaan tutustua myös näihin työkaluihin.
Suosittelen ehdottomasti kokeilemaan useampaa kuin yhtä työkalua, sillä useat sovellukset tarjoavat pääpiirteittäin samoja ominaisuuksia. Voisi lisäksi kuvitella, että aloituskynnykseltään hieman helposti lähestyttävän työkalun, kuten BalsamiQ:n tai Mockplussan opettelun jälkeen siirtyminen esimerkiksi Justinmindin tai Adobe XD:n käyttöön on helpompaa. Lisäksi raskaan ja ominaisuuksiltaan rikkaan sovelluksen käyttö ei ole mielekästä, jos prototyypin on tarkoitus olla yksinkertainen ja nopeasti tuotettu.
Tässä jutussa on pyritty nostamaan esille työkaluja, joissa prototyyppien luominen on mahdollista helposti esimerkiksi drag and drop -tyylisesti sijoittamalla erilaisia elementtejä valmiiksi mitoitetulle alustalle. Esittelyn ulkopuolelle jäi siis esimerkiksi erittäin suosittu prototyyppityökalu InVision, joka on tarkoitettu hieman erilaiseen käyttötarkoitukseen.
Eräs mielenkiintoinen liike prototyökaluja ajatellen nähtiin kesällä 2015, kun Google osti mobiilisovellusten prototypointiin tarkoitetun Pixaten itselleen ja teki siitä ilmaisen. Aiemmin tässä kuussa Pixate kuitenkin yllätti kertomalla, että sovelluksen kehitys lopetetaan. Suunnittelijoille kuitenkin luvattiin, että Pixate/Google aikovat tuoda markkinoille lähitulevaisuudessa kokonaan uuden prototyyppityökalun.
Oikean työkalun valinnan merkitys korostuu erityisesti, jos prototyyppityökalusta aikoo maksaa kuukausimaksua. Varsinkin pilvipohjaisissa työkaluissa ominaisuudet voivat olla rajattuja ja käyttö epävakaata. Eri työkalujen koeajat kannattaa siis käyttää hyödyksi ennen valintaa ja pitää vielä sen jälkeenkin muistissa muutkin vaihtoehdot.
Artikkeli on julkaistu alun perin kotisivuillani.
