Prototüüp on plaan, mitte lihtsalt joonistus

13 Jun 2019

Tiina Nuum

Iga veebilehe, rakenduse või infosüsteemi loomise juures on oluline arvesse võtta nii suurt pilti kui ka detaile. Ühelt poolt on tähtis, et kõik huvigrupid ja lõppkasutajad saaksid oma vaatepunkti ja soovid välja öelda. Samal ajal on vajalik, et juba algfaasis saaksid kõik olulisemad aspektid ühtseks nägemuseks vormitud. Levinuim tehnika selleks on prototüüpimine.

Prototüübi loomise protsess

Prototüübi loomine jaguneb mitmesse etappi. Esmalt pannakse paika lehe üldine ülesehitus ja seejärel minnakse andmetega samm-sammult täpsemaks. See võimaldab läbi proovida mitmeid võimalikke variante enne, kui süsteem reaalselt arendusse läheb.

Detailsusastme järgi võib prototüüpe jagada low-fidelity (lo-fi) ehk madala-, mid-fidelity (mid-fi) ehk keskmise- ja high-fidelity (hi-fi) ehk kõrge detailsusega prototüüpideks.

Paberprototüüp

Üks madala detailsusega prototüüpidest on näiteks lihtne paberprototüüp. Paberprototüübi loomine ja testimine on head ja odavad meetodid, et teada saada, kas tulevase süsteemi disain läheb soovitud suunas. Paberprototüüpida saab ka seadmeid.

Sõrestikmudel

Madala- ja keskmise detailsusastmega prototüüpidest rääkides kasutatakse enamasti mõistet sõrestikmudel ehk wireframe. Sõrestikmudel annab edasi objektide paigutuse ideed kuvades lehe sisu informatsiooniplokkidena, mis näitavad kus ja kuidas paiknevad erinevad komponendid (nt viimased uudised, reklaam, teenused, kontaktid jne).

Sõrestikmudeli puhul kasutatakse tavaliselt vaid jooni, kaste ning musta, valget ja halli värvi, kuid mõnikord lisatakse raamide asemele kohahoidjaid – pilte, videoid ja tekste. Ühel või teisel juhul ei ole mõte ja eesmärk kuvada lehe lõplikku välimust.

Tegu on kasutajaliidese väga varase kontseptuaalse disainiga, mille puhul veel visuaalile ja tehnilistele funktsioonidele tähelepanu ei pöörata. Põhirõhk on erinevate elementide või kohahoidjate paigutusel.

See on üldjuhul veel värvitu ja sisuta raamistik, mis annab optiliselt hea ülevaate tulevase veebilehe või rakenduse või infosüsteemi väljanägemisest. Alles siis, kui selle üle on diskuteeritud ja erinevaid versioone omavahel võrreldud ja kõik asjasse puutuvad osapooled on selle heaks kiitnud, on mõistlik sellest etapist edasi minna.

Sõrestikvaade aitab mõista, millistest kohtadest millist infot saab leida ja kuidas toimib disain tervikuna. Samuti on märgitud kohad, kus hakatakse kuvama reklaame või vahetuvaid bännereid. Wireframe’ id tehakse eraldi ka erinevate seadmete jaoks – et kuvada, kuidas hakkab info kuvama arvutis, tahvelarvutis, mobiilis.

Interaktiivne/ klikitav prototüüp

Klikitav prototüüp on osaliselt interaktiivne kasutajaliidese/rakenduse demo, mis simuleerib juba väga lähedaselt tulevast toodet. Funktsionaalselt ehk küll veel puudulik, aga annab hea ülevaate detailidest. Sellega saab juba väärt tagasisidet nii elementide toimivusest kui tegevuste loogilisusest ja nende koostoimest.

Klikitava prototüübi eesmärk on pakkuda terviklikku kasutajakogemust. Selle testijal ehk potentsiaalsel lõppkasutajal peaks olema võimalus testida reaalset kasutajaliidest ja sooritada plaanitud tegevusi.

Klikitava prototüübi puhul on oluline erinevate sammude järjestus ja loogilisus ning võimalike tegevuste ehk funktsionaalsuste selgus (see, mida programmeerija hiljem teeb). Sellega saab testida, millistel tingimustel saab kasutaja mingit nuppu klikkida või tegevust teha, mis selle tegevuse tagajärjel juhtub ja kuidas selle tagajärjel vaade muutub.

Kasutajaliidese prototüübi võib luua kontseptuaalse (kujunduseta interaktiivne wireframe) HTML prototüübina. See tähendab, et kasutajaliidese prototüübis on olemas kõik olulised ekraanivormid, andmeväljad ja nende paigutus, käsunupud ning liikumisteed.

Prototüüp – plaan, mis on projekti alus

Prototüübi puhul on rõhk eelkõige struktuuridel, sammudel ja protsessidel – värvide, ikoonide ja kirjatüüpide üle võib vaielda hiljem. Kui kõik osapooled on saanud prototüübile tagasisidet anda ja uuendatud prototüübile enam midagi ette heita ei ole, saab hakata looma graafilist disaini ja sealt edasi juba koodi.

Prototüüp ei ole joonistus, vaid plaan. Kasutatavuse ekspert loob prototüübi selleks, et kliendi esindaja, tegelik lõppkasutaja ja süsteemi loojad ehk programmeerijad ja disainerid saaksid protsessidest ühtmoodi aru. Näiteks mis siis tegelikult juhtub, kui klient keskkonda sisse logib, milliseid tooteid ta saab tellida, kuidas arvutatakse maksumus ja kus näidatakse tema soodustust.

Tööriistad ja vahendid

Selleks, et lõppkasutaja ideed jõuaksid esmalt prototüüpi ja sealt edasi lõpliku tooteni, on olemas head meetodid ja tööriistad. Postituses "Prototüüpimine on enamat kui paberlennuki lennutamine" räägime nendest lähemalt.

Kõige lihtsam on alustada wireframe’imist paberi ja pliiatsiga. Võib kasutada ka tahvlit või seina. Interaktiivse prototüübi tegemiseks on vaja vastavat tarkvara, meie kasutame erinevaid tööriistu, peamiselt Axure RP-d.

Kuidas anda prototüübile tagasisidet?

Mis saab edasi, kui prototüüp on loodud? Oleme kirjutanud järgmise etapi kohta 32- leheküljelise digiraamatu, millest leiab vastused järgmistele küsimustele.

mis on prototüüp ja miks ning kellele see kasulik on?
milline on prototüübi tellija roll projektis?
kuidas anda veebilehe või infosüsteemi esimesele versioonile efektiivselt tagasisidet?
kuidas levinud pudelikaelu vältida?

Iga peatüki juures on rida kontrollküsimusi, mis aitavad projekti efektiivselt õiges suunas juhtida.

Kui see praktiline juhend võiks sinu jaoks kasulik olla, saad endale kohe praegu meiliaadressi vastu vormistada ligipääsu digiraamatule "Prototüübile tagasiside andmise juhend":