Figma-prototyyppauksen edut ohjelmistoprojektissa

8.3.2021 12:00

Prototyypin hyödyntäminen ohjelmistokehitysprojektissa säästää aikaa ja rahaa, kun lopputuotteen käytettävyyttä ja toimintoja voidaan testata jo varhaisessa vaiheessa.

Ohjelmisto- ja verkkosivuprojekteissa käyttöliittymän (User Interface, UI) ja käyttökokemuksen (User Experience, UX) suunnittelu nopeuttaa projektin aloitusta ja selkeyttää yhteisiä päämääriä. Toteutuksen isoja suuntaviivoja voidaan alkuvaiheessa hahmotella nopeasti ja kätevästi esim. piirroksilla, muistilapuilla, tai vaikka fläppitaululla.

Monet ohjelmistoprojektit ovat kuitenkin niin laajoja, että paperilappuset, rautalankamallit tai taululle kuvatut päättelyketjut eivät riitä havainnollistamaan koko toteutusta tai etenkään käytettävyyttä ja käyttäjäpolkuja. Siksi tarvitaankin tehokkaita yhteisiä työkaluja, joilla alustavat suunnitelmat mallinnetaan digitaaliseksi mockup-malliksi tai jopa prototyypiksi.

Mockup-malli tai prototyyppi tekee asiakkaan idean mukaisen UI- ja UX-toteutuksen näkyväksi selkeyttäen samalla projektiryhmän ja kehittäjien työtä. Asiakkaamme voi myös hyödyntää mockup-malleja ja prototyyppejä ideoiden ja tavoitteiden kirkastamisessa mm. päätöksenteon aikana, ohjelmiston alkuvaiheen esittelyissä ja projektin edetessä.

Mikä Figma on?

Käyttöliittymien prototyyppaukseen sopivia sovelluksia on useita, kuten Figma, Adobe XD ja Sketch. Kaikki nämä sovellukset ovat hyviä työkaluja ohjelmiston tai verkkosivuston ideointiin ja suunnitteluun ennen varsinaisen koodaustyön aloittamista. 

Figma erottuu kuitenkin suunnittelutyökalujen joukosta vuorovaikutteisten, edistyksellisten ja helppokäyttöisten toiminnallisuuksien vuoksi. Ei siis ihme, että UXtoolsin kartoituksessa 66 % vastaajista ilmoitti suosivansa Figmaa UI-suunnittelussa, ja Figma todettiin lopulta suunnittelijan työkalupakin tärkeimmäksi sovellukseksi! 

Käytännössä Figma on pilvipalvelun kautta toimiva, järjestelmästä riippumaton sovellus, jossa käyttöliittymän prototyyppi rakennetaan erilaisten objektien ja komponenttien avulla. Figman peruskäyttö ei edellytä ohjelmointiosaamista, joskin prototyypin tekijällä on hyvä olla kokemusta UI- ja UX-suunnittelusta sekä tietotaitoa sovelluskehityksen teknisistä työvaiheista.

Figma sopii web- ja mobiilikehitykseen

Tyhjä rautalankamalli ja Figmalla toteutettu visuaalinen layout-malli kuvilla ja väreillä.
Vasemmalla on rautalankamalli ja oikealla vastaava layout. Molemmat on tehty Figmalla. 

Figmasta löytyy laaja komponenttien valikoima erilaisten käyttöliittymien suunnitteluun.  Kerran suunniteltuja komponentteja voidaan muokata ja hyödyntää tarpeen mukaan uudelleen. Figman lisäosakirjasto dokumentaatioineen on kattava ja kehittäjien yhteisöverkosto toimii aktiivisesti kehittämistyön tukena.

Kehittäjä voi hyödyntää Figmalla luodusta prototyypistä löytyviä visuaalisia malleja ohjelmoinnin tukena. Visuaalisia malleja ovat näkymien layoutien lisäksi mm. käyttöliittymän elementtien ja toiminnallisuuksien tyylit, joiden yksityiskohtia (esim. mitat, värit ja sijainnit) tarvitaan käyttöliittymän koodin kirjoittamisessa.

Figmasta voisikin sanoa, että se on kehitetty nimenomaan web- ja mobiilikehitystä varten. Web-kehittäjien näkökulmasta on huomionarvoista sekin, että Figmaa voi alustariippumattomuuden vuoksi käyttää myös Linuxilla.

Prototyyppi kiteyttää ideat konkretiaksi

Figmalla toteutettu rautalankamalli kännykän näytöllä.
Figmalla voidaan tehdä prototyyppi, joka on hyvin lähellä lopullista käyttöympäristöä.

Käyttöliittymä voidaan tehdä Figman avulla karkeampana rautalankamallina, välivaiheen demona tai tarkemmin viimeisteltynä prototyyppinä – asiakkaamme tarpeiden mukaan! Sopivasti viimeistelty esikatselutila vastaa lopullista käyttöympäristöä ja kiteyttää ideat konkretiaksi. Se myös selkeyttää ajatuksia siitä, miten digitaalisen palvelun ulkoasu, toiminnallisuudet ja vuorovaikutus toimivat mobiili- tai verkkosovelluksessa.

Koska prototyypeistä voidaan Figmalla luoda kohtuullisen nopeasti erilaisia vaihtoehtoja, onnistuu vähän erikoisempienkin UI- ja UX-ideoiden testaaminen etukäteen ilman yhdenkään koodirivin kirjoittamista. Projektin aikana käyttöliittymän prototyypin erilaiset vaiheet käydään yhdessä asiakkaan kanssa läpi ja hyväksytetään ennen varsinaisen koodaustyön aloittamista.

Yhteistyötä tukevat ominaisuudet ovat yksi Figman helmistä: prototyyppiä voidaan rakentaa reaaliaikaisesti tiimin yhteisessä virtuaalisessa työtilassa. Kun suunnitelma on koko projektiryhmän tarkasteltavana, on kaikilla mahdollisuus seurata käyttöliittymän prototyypin edistymistä milloin vain.

Sovelluskaupasta ladattavan Figma Mirror -sovelluksen avulla prototyyppiä voidaan tarkastella yhdessä asiakkaan kanssa myös mobiililaitteilla. Mobiilisovelluksella ei voi rakentaa prototyyppejä, mutta se on hyvä väline nimenomaan esikatseluun ja testaukseen esim. osana työpajatyyppistä, yhteistä työskentelyä.

Käyttöliittymä tehdään yhdessä

Käyttöliittymän suunnittelussa kannattaa edetä iteroiden, koska parhaat ratkaisut löytyvät yhteistyön ja käyttäjiltä saadun palautteen kautta. Suunnittelua voidaan tarvittaessa tehdä kokonaan ilman digitaalisia työkaluja. Figman tai muiden vastaavien prototyyppaustyökalujen käyttö kuitenkin helpottaa usein työn kulkua ja auttaa valitsemaan parhaat ideat tekniseen toteutukseen – avoimella kommunikaatiolla vältetään monia ohjelmistoprojektien kompastuskiviä! 

Ohjelmistoprojektissa on hyvä pitää mieli avoimena ja valita kuhunkin tarkoitukseen sopivat työmenetelmät. Figma on tällä hetkellä yksi todella hyvä ja toimiva vaihtoehto muiden prototyyppaukseen tarkoitettujen työkalujen joukossa, mutta siihen tai mihinkään muuhunkaan yksittäiseen työkaluun ei kannata liiaksi takertua.  Esimerkiksi kaikkein yksinkertaisimpiin rautalankamalleihin voi jokin muu ratkaisu olla Figmaa sopivampi vaihtoehto.

Jätä yhteydenottopyyntö