Sissejuhatus prototüüpimisse

Mis on prototüüpimine ja milleks seda vaja on

Prototüüpimine on protsess, mille käigus luuakse mõne toote makett või lihtsustatud versioon. Selleks tooteks võib olla veebileht, rakendus või mõni teenus. Prototüübi loomise peamine eesmärk on näidata, kuidas toode hakkab töötama. Samal ajal näevad prototüübid sageli välja täiesti teistsugused kui lõplik toode ning neil on palju piiranguid võrreldes päris veebilehtede või rakendustega.

Lihtsamalt öeldes on prototüüp nagu tugev ja läbimõeldud maja vundament ja karkass, millele hiljem toetub kogu ülejäänud ehitis.

Miks mitte alustada kohe koodi kirjutamisega? Selleks on mitu olulist põhjust:

  • Meeskonnatöö lihtsustamine – sageli töötab projekti kallal korraga mitu inimest. Prototüüp toimib ühise alusena, ilma et oleks vaja pidevat omavahelist suhtlust.

  • Struktuuri paikapanek – prototüüp aitab kiiresti aru saada, kas kasutajaliides on mugav ja kas see vajab täiendamist.

  • Visuaalne kontrollnimekiri – suuremahuliste projektide puhul aitab prototüüp meeles pidada, milliseid elemente on veel vaja lisada.

  • Riskide vähendamine – prototüüpi on lihtsam ja kiirem muuta kui juba valmis lahendust, eriti tellimustööde puhul.

Prototüüpimine aitab juba varajases faasis läbi mõelda toote struktuuri ja toimimise loogika ning säästab seeläbi aega, vähendab riske ja aitab luua läbimõeldumaid lahendusi.

Prototüüp ja lõplik toode

Oluline on mõista, et prototüüp ei ole poolik veebileht ega rakenduse beetaversioon, vaid visuaalne näidis, mis lihtsustab edasist tööd toote arendamisel.

Prototüüp vs valmis toode

Prototüüp

Valmis toode

Puudub reaalne funktsionaalsus

Töötab täielikult

Puudub serveripoolne loogika

Kasutab backend'i

Lihtsustatud välimus

Lõplik disain

Saab kiiresti muuta

Muudatused on ajamahukad ja kulukad

Seetõttu on prototüübi loomisel soovitatav kasutada andmete kuvamise kohtades kohatäiteid, visualiseerida nuppe ja nende funktsionaalsust, määrata lehtedevahelised üleminekud ning lihtsustada kasutajaliidest võimalikult palju.

Kas prototüüp on alati vajalik?

Lühidalt vastates: ei ole. Siiski on mitmeid olukordi, kus prototüüpimine muutub oluliseks:

  • Õppeprojektid – prototüüp aitab visualiseerida idee põhiloogikat ning lihtsustab projekti esitlemist.

  • Meeskonnatöö – ühine prototüüp toimib alusmaterjalina, mille põhjal saavad kõik meeskonnaliikmed ühtemoodi aru süsteemi ülesehitusest.

  • Suuremahulised projektid – prototüüp aitab varakult paika panna struktuuri ja peamised funktsioonid, vähendades hilisemaid ümbertegemisi.

  • Tellimustööd kolmandatele osapooltele – prototüüp võimaldab enne arenduse alustamist veenduda, et tellija ootused ja arendaja arusaam ühtivad.

Samas ei ole prototüüp tingimata vajalik:

  • väga väikeste ja lihtsate projektide puhul, kus struktuur on algusest peale selge;

  • kui projekti eesmärk on rangelt tehniline ning kasutajaliidesel pole olulist rolli;

  • kui projektile on seatud väga ranged ajalised piirangud ja lahenduse loogika on eelnevalt täpselt määratletud.

Prototüüpide liigid

Prototüübid jaotatakse tavaliselt detailsuse alusel kolme põhitüüpi:

Madala detailsusega prototüüp on kõige lihtsam vorm, mis luuakse tavaliselt käsitsi paberil või lihtsate digivahenditega. See keskendub lehtede struktuurile ja kasutusloogikale, jättes kõrvale visuaalse kujunduse. Sobib hästi projekti algfaasi kiireks ideede visualiseerimiseks.

Keskmise detailsusega prototüüp pakub juba selgemat ülevaadet tulevase toote ülesehitusest – konkreetsemad lehed, nupud ja kasutajavood, kuid endiselt ilma lõpliku disainita. Kasutatakse, et kontrollida süsteemi loogikat ja vaadete vahelist liikumist.

Kõrge detailsusega prototüüp sarnaneb juba välimuselt ja käitumiselt lõplikule tootele, sisaldades realistlikku kujundust ja interaktiivseid üleminekuid. Kasutatakse eelkõige lahenduse esitlemiseks tellijale või kasutajakogemuse testimiseks enne arenduse alustamist.

Madala ja kõrge detailsusega prototüüpide näited

Mida tuleks prototüübis näidata

Prototüübi peamine eesmärk on visuaalselt näidata, kuidas kasutaja süsteemiga suhtleb, ilma et keskendutaks kujunduse ja tehnilise teostuse detailidele.

Üldjuhul näidatakse prototüübis:

  • põhilehti ja nende struktuuri;

  • navigeerimist erinevate jaotiste vahel;

  • nuppe ja linke, mis kajastavad kasutaja võimalikke tegevusi;

  • sisestusvorme ja peamisi suhtluselemente;

  • üleminekuid lehtede ja vaadete vahel.

Prototüübis ei ole vaja näidata:

  • animatsioone ja visuaalseid efekte;

  • lõplikke värvilahendusi ja kujunduselemente;

  • kohanduvust erinevate seadmete jaoks;

  • tegelikku sisu, sealhulgas tekste, pilte ja andmeid.

Peamised hirmud ja vead algajatel

Algajate üheks peamiseks hirmuks on kartus, et prototüüp tuleb ebaühtlane või visuaalselt ebameeldiv. Selle hirmu tõttu püütakse prototüüpi sageli teha liiga hoolikalt ja detailselt, mis toob kaasa suure ajakulu ning tarbetut stressi.

Praktikas piisab sageli sellest, kui nupp on oma õigel kohal ning on selgelt näidatud, millist funktsiooni see täidab. Isegi visuaalselt ebakorrektne element täidab oma peamist eesmärki – selgitada kasutajaliidese käitumist.

Prototüübi varajane "ilusaks tegemine" ei anna enamasti lisaväärtust ning võib arendusprotsessi hoopis aeglustada. Tõhusam lähenemine on lihtne ja arusaadav prototüüp, mis loob kindla aluse edasiseks arenduseks.

Prototüüp kui idee kontrollimise vahend

Prototüüp võimaldab varajases etapis hinnata, kas idee toimib praktikas ning kas lahendus on kasutaja jaoks arusaadav ja loogiline. Prototüübi abil saab kontrollida:

  • kas veebilehte või rakendust on mugav kasutada;

  • kas üleminekud lehtede ja vaadete vahel on loogilised;

  • kas funktsionaalsuse jaoks on piisavalt lehti ja vaateid;

  • kas kasutaja ei satu lahenduse kasutamisel segadusse.

Lihtsaim ja levinuim kasutusstsenaarium on järgmine:

Kasutaja siseneb → sooritab tegevuse → saab tulemuse

Kui sellist stsenaariumi on prototüübi abil keeruline läbida, on tõenäoline, et valmis tootes osutub see kasutaja jaoks veelgi keerulisemaks.

Lihtsad prototüüpimise tööriistad

Prototüübi loomiseks ei ole vaja keerukaid professionaalseid disainitööriistu, eriti kui prototüübiga tegeleb inimene, kes pole disainer. Mitte-disaineritele sobivad eelkõige:

  • Balsamiq – väga lihtne tööriist, mis on loodud just prototüüpide ja skeemide loomiseks.

  • Figma – universaalne tööriist, mida saab kasutada ka väga lihtsal tasemel.

  • Paber ja pliiats – üks lihtsamaid ja kiiremaid viise prototüübi loomiseks, sobib ideede esialgseks läbimõtlemiseks.

Tööriista valik ei ole prototüübi kvaliteedi seisukohalt määrav – palju olulisem on, et prototüüp oleks arusaadav, loogiline ja täidaks oma põhieesmärki.

Mis on Figma

Figma on tööriist digitaaltoodete, näiteks veebilehtede ja rakenduste makettide ning prototüüpide loomiseks. Figma on kättesaadav nii veebipõhise teenusena, mis töötab otse brauseris, kui ka eraldi töölauarakendusena.

Figma üheks olulisemaks funktsiooniks on selle sisseehitatud prototüüpimise tööriistad. Nende abil saab omavahel siduda nuppe, linke ja lehti nii, et elemendile vajutamisel suunatakse kasutaja automaatselt teisele vaatele. See võimaldab luua interaktiivse prototüübi ilma tegeliku koodi või serveripoolse loogikata.

Veebilehe prototüüpimine Figmas

Figma põhielemendiks on frame, mis on sisuliselt ekraanivaade – näiteks "Desktop" või "Mobile". Veebilehe prototüüp koosneb tavaliselt mitmest frame'ist, millest igaüks kujutab eraldi vaadet (nt avaleht, teenuse/toote leht, kontakt).

Enne kujunduste lõplikuks tegemist tasub alustada wireframe'ist – lihtsast skeemist tulevasest veebilehest. Wireframe'i eesmärk on näidata paigutust ja hierarhiat: kus asub menüü, kus on pealkiri, millised on sisuplokid, kus paikneb peamine tegevusnupp. Selle etapi puhul piisab ristkülikutest ja tekstikastidest – oluline on loogika, mitte värvid, fondid või pildid.

Järgmisena luuakse veebilehe põhiekraanid, hoides nende vahel järjepidevust. Kõige levinumad põhilehed on: avaleht, detailvaade, kontakt, sisselogimine ning vajadusel tänu- või kinnitusekraan.

Kui veebilehel on korduvaid elemente (nt navigeerimisriba, nupud, kaardid), tasub need teha Figmas component'iks. Komponentide eelis seisneb selles, et kui muudad näiteks nupu kuju, uuenevad kõik selle nupu eksemplarid automaatselt teistel ekraanidel. Lisaks aitab Auto Layout hoida elementide vahed, joondused ja suuruse korras.

Kui ekraanid on olemas, saab prototüübi muuta kasutatavaks Figma Prototype vaates. Seal valitakse element (nt nupp), luuakse ühendus siht-frame'iga ning määratakse interaktsioon, näiteks "On click → Navigate to". Pärast seoste loomist tuleks prototüüpi testida Present vaates, kus saab läbi klõpsata kõige olulisemad vood.

Kui prototüüp on arusaadav ja kasutatav, saab seda jagada lingina, mis võimaldab kursusekaaslastel või õppejõul seda vaadata ja kommenteerida ka ilma faili muutmata.

Figma Prototype vaade ekraanide vaheliste ühendustega

Mis on Balsamiq

Balsamiq on tööriist väga lihtsate prototüüpide ja kasutajaliidese skeemide loomiseks, mis on algselt loodud just prototüüpimise, mitte disaini jaoks.

Balsamiq on kujundatud nii, et prototüübid näevad välja nagu käsitsi joonistatud visandid. Selline visuaalne stiil annab kohe mõista, et tegemist ei ole valmis tootega, vaid esialgse lahendusega, mis on mõeldud ideede arutamiseks ja kontrollimiseks.

Balsamiqis saab luua eraldi vaateid, mis tähistavad veebilehe lehti või rakenduse erinevaid olekuid, ning paigutada neile põhilisi kasutajaliidese elemente lihtsa lohistamise teel. See muudab töö kiireks ja arusaadavaks ka neile, kellel puudub disaini- või tehniline taust.

Figma ja Balsamiqi võrdlus

Figma ja Balsamiq on mõlemad prototüüpimise tööriistad, kuid neid kasutatakse erinevate eesmärkide ja arendusfaaside jaoks.

Balsamiq sobib eelkõige varajasse etappi, kus on vaja kiiresti ja lihtsalt visualiseerida idee põhistruktuuri. See keskendub kasutajaliidese loogikale ja elementide paigutusele, jättes visuaalse viimistluse tahaplaanile.

Figma pakub rohkem võimalusi ning sobib paremini detailsemate ja interaktiivsete prototüüpide loomiseks. Selle abil saab siduda vaateid omavahel, luua klõpsatavaid prototüüpe ning testida kasutusstsenaariume enne arenduse alustamist.

Kokkuvõttes on Balsamiq hea valik kiireks ideede visandamiseks, samas kui Figma sobib olukordadesse, kus on vaja põhjalikumalt kontrollida toote toimimist ja kasutajate liikumist süsteemis.

Kokkuvõte

Prototüüpimine on praktiline viis muuta idee kiiresti nähtavaks ja testitavaks enne koodi kirjutamist. Tõhus töövoog algab frame'ide ja wireframe'i loomisega, liigub põhilehtede ülesehitamisele ning komponentide ja Auto Layout'i kasutamisele ning lõpeb prototüüpimise režiimis tehtud töö testimisega.

Kui keskendud esmalt struktuurile ja kasutajateekonnale ning lisad detailid alles hiljem, säästad aega, vähendad ümbertegemist ja saad kiiremini kvaliteetset tagasisidet. Selliselt tehtud prototüüp on selge lähtealus nii disaini edasiarendamiseks kui ka hilisemaks arendustööks.

Kasutatud allikad