{"id":32,"date":"2019-01-03T09:11:52","date_gmt":"2019-01-03T09:11:52","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/?post_type=chapter&#038;p=32"},"modified":"2019-08-08T10:40:30","modified_gmt":"2019-08-08T10:40:30","slug":"kasutajaliidese-prototuup-lofi","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/chapter\/kasutajaliidese-prototuup-lofi\/","title":{"raw":"Kasutajaliidese protot\u00fc\u00fcp (LoFi)","rendered":"Kasutajaliidese protot\u00fc\u00fcp (LoFi)"},"content":{"raw":"Protot\u00fc\u00fcpimine v\u00f5i protot\u00fc\u00fcbi loomine on t\u00f5en\u00e4oliselt \u00fcks t\u00e4htsamaid etappe rakenduse disainiprotsessi juures. Siin formuleerub veel \u00fcsna h\u00e4gune idee reaalsuseks ning disainerimeeskonnal on l\u00f5puks ometi midagi n\u00e4idata ka tellijale.\r\n<h2>Mis asi on protot\u00fc\u00fcp?<\/h2>\r\nProtot\u00fc\u00fcp on kontseptsiooni v\u00f5i protsessi testimiseks ehitatud esialgne proovtoode, mudel v\u00f5i versioon.\u00a0Uue disaini hindamisel kasutatakse \u00fcldjuhul protot\u00fc\u00fcpi s\u00fcsteemianal\u00fc\u00fctikute ja kasutajate t\u00e4psuse parandamiseks. Protot\u00fc\u00fcpide eesm\u00e4rk on kasutajate k\u00e4sutusse anda pigem t\u00f5eline, t\u00f6\u00f6tav s\u00fcsteem, mitte teoreetiline lahendus. Kuna aga protot\u00fc\u00fcpide tasemeid on erinevaid, ei saa v\u00e4ga t\u00e4pselt paika panna v\u00f5imalikke detailsusastmeid (kust n\u00e4iteks l\u00f5peb protot\u00fc\u00fcp ja algab reaalne toode).\r\n\r\n&nbsp;\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/JMjozqJS44M[\/embed]\r\n<h2>Paberprotot\u00fc\u00fcpimine<\/h2>\r\nPaberprotot\u00fc\u00fcpimine on k\u00f5ige odavam ja kiirem viis viia l\u00e4bi kasutajatega toote valideerimist visuaalsemal moel kui seda pakuvad kasutajalood v\u00f5i stsenaariumid. Meeles peab pidama loomulikult, et protot\u00fc\u00fcp baseerub alati disainiprotsessi eelnevatel sammudel.\r\n\r\nNagu nimigi viitab, toimub pea kogu protsess paberil. Tihti kasutatakse siiski protot\u00fc\u00fcbi ettevalmistamise faasis ka digitaalseid vahendeid, n\u00e4iteks erinevad mallid erinevate ekraanisuurustega, mis paberile abistavalt peale prinditakse.\r\n\r\n[caption id=\"attachment_104\" align=\"alignnone\" width=\"1264\"]<img class=\"wp-image-104 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o.jpg\" alt=\"\" width=\"1264\" height=\"944\" \/> Veebirakenduse paberprotot\u00fc\u00fcp, mis on eelnevalt arvutis valmis kujundatud ning seej\u00e4rel v\u00e4lja prinditud. Autori foto.[\/caption]\r\n\r\nAlusta paberi suurusega, mis vastab ligikaudselt reaalse ekraani suurusega. Tinglikult kasutatakse tihti A4 m\u00f5\u00f5dus paberit, mis vastab k\u00f5ige levinuma ekraani, s\u00fclearvuti omaga. Disainides vaateid v\u00e4iksematele ekraanidele nagu telefon v\u00f5i kell, suurendatakse vaateid siiski \u00fcle elusuuruse 2 v\u00f5i rohkem korda, et lihtsustada vaadete joonistamist ja protot\u00fc\u00fcbi testimist.\r\n\r\nEttevalmistamise faasis valmista ette peamine ekraani vaade, mis on veebilehe v\u00f5i -rakenduse puhul kaetud veebilehitseja t\u00f6\u00f6riistadega (aadressiriba, edasi-tagasi liikumise nupud, kerimisriba jms) ning veebilehe elementidega (peamen\u00fc\u00fc, logo), mida kuvatakse kasutajale l\u00e4bivalt. \u00dcksikud kasutajaliidese elemendid (n\u00e4iteks rippemen\u00fc\u00fcd, nupud, h\u00fcpikaknad) valmista ette \u00fckshaaval ja v\u00f5imalusel kleepuvatest m\u00e4rkmepaberitest, millega on lihtne testimise jooksul interaktsioone l\u00e4bi m\u00e4ngida:\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_221\" align=\"aligncenter\" width=\"1024\"]<img class=\"wp-image-221 size-large\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-1024x768.jpg\" alt=\"\" width=\"1024\" height=\"768\" \/> Mobiilirakenduse paberprotot\u00fc\u00fcp. Autor: Rodolphe Courtier[\/caption]\r\n<p id=\"b027\" class=\"graf graf--p graf-after--figure\">J\u00e4rgides peamiseid stsenaariumeid ja persoonasid, kata t\u00e4htsamad vaadetega. Iga \u00fcksikut vaadet ei ole loomulikult vajalik ette valmistada, vilumus tekib t\u00f6\u00f6 k\u00e4igus. Disainielementide kasutamisega pea pigem piiri ja v\u00e4rvid omavad selles faasis juba olulist rolli (punane nupp tundub kasutajale kohe potentsiaalselt ohtlikum kui roheline).<\/p>\r\n\r\n<h3>Paberprotot\u00fc\u00fcbi testimine<\/h3>\r\nProtot\u00fc\u00fcpide peamine eesm\u00e4rk seisneb selles, et neid saab testida reaalsete kasutajatega. Selline testimine omakorda annab meile palju vahetut ja ausat tagasisidet selle kohta, kas idee \u00fcldse t\u00f6\u00f6tab ja kas seda on kellelgi \u00fcldse vaja. K\u00e4esolevas\u00a0faasis on muudatuste sisseviimine veel v\u00f5rdlemisi odav (v\u00f5rreldes detailsete protot\u00fc\u00fcpidega v\u00f5i reaalse koodikirjutamise etapiga).\r\n\r\nProtot\u00fc\u00fcbi testimiseks sobib h\u00e4sti v\u00f5imalikult vaikne ruum koos laua ja toolidega, kuhu mahuvad istuma nii osaleja(d) kui ka testi l\u00e4biviija(d). Korraga osaleb \u00fcldjuhul testimisel \u00fcks osaleja ja v\u00e4hemalt kaks sessiooni l\u00e4biviijat:\r\n<ul>\r\n \t<li>Keegi, kes juhendab osalejat ja suhtleb temaga (nendega)<\/li>\r\n \t<li>\"Arvuti\" - l\u00e4biviija, kes ei suhtle osalejaga, kuid kelle roll on vahetada vajadusel osaleja ees olevaid vaateid vastavalt sellele, kuidas osaleja protot\u00fc\u00fcbiga ringi k\u00e4ib (klikkab, lohistab elemente jms)<\/li>\r\n<\/ul>\r\nViimasele kahele rollile v\u00f5ib olla lisaks kaasatud keegi, kes tegeleb m\u00e4rkmete tegemise ja osaleja(te) j\u00e4lgimisega testimise jooksul.\r\n\r\nTestmise k\u00e4igus on oluline tagada, et kasutaja ei j\u00e4\u00e4ks veebilehel v\u00f5i -rakendusel \"toppama\" - tuleb tagada, et k\u00f5ik veebilehe osad, mida v\u00f5ib kasutaja v\u00e4lja kutsuda (n\u00e4iteks vajutades nupul \"Kinnita\" v\u00f5idakse kuvada kinnitust h\u00fcpikaknaga \"Oled Sa kindel?\", mis vajab ettevalistatud vaadet). Kuna k\u00f5ike ei ole testimise ettevalmistamise faasis ette n\u00e4ha, siis paberprotot\u00fc\u00fcbi testimise tarvis on k\u00f5ige sobilikum varuda l\u00e4biviijal varuks erinevaid joonistusvahendeid ja paberit, et puuduvad vaated kiiresti ette valmistada.\r\n\r\nTesti l\u00e4biviimist alusta sissejuhatusega ja kohalolevate inimeste tutvustamisega. Osalejale tutvusta testimise stsenaariumit ja kuidas paberprotot\u00fc\u00fcbid toimivad (kuidas n\u00e4pu kasutada hiirena, kuidas toimub veebilehel kerimine, suurendamine jne). R\u00f5hutada tuleb, et testitakse loodavat s\u00fcsteemi, mitte kasutajat ja \u00fchtegi vale liigutust ei ole olemas. Samuti tasub paluda, et kasutaja oma m\u00f5tteid valju h\u00e4\u00e4lega v\u00e4ljendaks, et valikute tegemise osa hiljem lihtsam anal\u00fc\u00fcsida oleks.\r\n\r\nKasutaja toimetamist veebilehel v\u00f5i rakenduses j\u00e4lgi hoolikalt, kuid \u00e4ra sega kasutajat tarbetult, r\u00e4\u00e4gi v\u00f5imalikult v\u00e4he. Kui kasutaja j\u00e4\u00e4b j\u00e4nni, oota kuni ta p\u00f6\u00f6rdub ise Sinu poole ja j\u00e4llegi pane t\u00e4hele, et \u00e4ra anna liiga t\u00e4pseid suuniseid. \u00a0Oota p\u00f5hjalikumate selgistustega disainisessiooni l\u00f5puni ja pigem k\u00fcsi avatud k\u00fcsimusi nagu \"Mida sa lootsid selles konkreetses vaates leida\/n\u00e4ha?\".\r\n\r\n\u00dcks v\u00f5imalus kasutajat veidi suunata v\u00f5i tagada sujuvamat liikumist, on ette valmistada \u00fcks n-\u00f6 \"404-leht\". Sarnaselt \"p\u00e4ris\" veebilehtedele, on ka protot\u00fc\u00fcbis hetki, kui nupule vajutamine ei kuva uut vaadet (sest keegi ei ole selle peale m\u00f5elnud n\u00e4iteks) ja sellistel hetkedel annab \"Arvuti\" osalejale ette lehe \"\"Vabandame, otsitavat lehte ei eksisteeri\".\r\n\r\nTestimise l\u00f5pus v\u00f5etakse sessioon kokku k\u00fcsimuste ja diskussiooniga, millest omakorda tehakse kokkuv\u00f5tted.\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/6dre0P4tRTc[\/embed]\r\n<h2>S\u00f5restikmudelid<\/h2>\r\nS\u00f5restikmudel on veebilehe v\u00f5i rakenduse vaade, mis kujutab ja visualiseerib lehel kuvatavat sisu ja funktsionaalsused selle struktuurist l\u00e4htuvalt. S\u00f5restikmudelid ei kasuta viimast ja viimistletud disainielemente ning v\u00e4ga tihti on neis kasutatud vaid kahte-kolme v\u00e4rvi. Mudelite eesm\u00e4rgiks on pakkuda osapooltele arusaama, kuidas on erinevad elemendid vaadetel paigutatud, millised on navigatsiooni v\u00f5imalused, \u00fcldine struktuur ja ka kasutatav s\u00f5navara. Olenevalt olemasolevatest ressurssidest (aeg ja raha) v\u00f5ib s\u00f5restikmudeleid kasutada disainisessioonidel klientide v\u00f5i potentsiaalsete kasutajatega v\u00f5i baseerudes paberprotot\u00fc\u00fcbi faasilt saadud tagasisidel valmistada ette vaated, mis on sisendiks juba j\u00e4rgmiste etappide juures. Kuna s\u00f5restikmudelit on endiselt pigem odav vajadusel muuta, siis viimaseid suuremaid disainiprotsessi m\u00f5jutavaid muudatusi saab sisse viia samuti selles etapis.\r\n\r\nS\u00f5restikmudeleid koostatakse tavaliselt spetsiaalse tarkvaraga, n\u00e4iteks <a href=\"https:\/\/www.omnigroup.com\/omnigraffle\">OmniGraffle<\/a>, <a href=\"https:\/\/www.axure.com\">Axure<\/a>, <a href=\"https:\/\/balsamiq.com\">Balsamiq<\/a>. Tarkvara kasutamise eelisteks on tihti pakutav lisa, mille abil saab koostatud vaated omavahel \u00e4ra linkida ning serveerida neid \u00fche lehena juba kliendile v\u00f5i kasutajatele lihtsaks l\u00e4bisirvimiseks v\u00f5i kasutamiseks j\u00e4rjekordsel disainisessioonil.\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/FQqF0VNnOds[\/embed]\r\n\r\nS\u00f5restikmudelite miinuseks on kindlasti t\u00f5siasi, et need ei kujuta kunagi l\u00f5plikku kujundamist (\u00f5igemini \u00f6eldes puudub s\u00f5restikmudelil kujundus \u00fcldse). Seet\u00f5ttu on teinekord keeruline disaineritel oma m\u00f5tet kliendile edasi anda, mis omakorda suurendab disaineri t\u00f6\u00f6mahtu l\u00e4bi selgituste (miks m\u00f5ni lehe osa on just oma kohale paigutatud vms). S\u00f5restikmudeli valideerimisel tuleb rangelt j\u00e4lgida, et piltilikult \u00f6eldes ei tuldaks vastu kliendi soovidele veidi rohkem v\u00e4rvi m\u00f5nele nupule lisada.\r\n<h2>\u00dclesanne<\/h2>\r\nKasutage koogilaada-rakenduse stsenaariumeid l\u00e4htekohana ja koostage r\u00fchmat\u00f6\u00f6s selle rakenduse paberprotot\u00fc\u00fcp. Jaotage oma v\u00e4iker\u00fchma liikmete vahel vaated avalik vaade, sisselogitud kasutaja profiilivaade, registreerumislehe vaade jne), mille kohta iga r\u00fchmaliige koostab paberprotot\u00fc\u00fcbi. Seej\u00e4rel k\u00e4ige r\u00fchmaliikmete koost\u00f6\u00f6s need paberprotot\u00fc\u00fcbid \u00fcle ja \u00fchtlustage disainiotsused, viige sisse parandused (vajadusel joonistage m\u00f5ni vaade uuesti paberile). Tehke l\u00f5plikest paberprotot\u00fc\u00fcpidest mobiiliga foto v\u00f5i skaneerige ning laadige pildifailid \u00fcles siis Moodle'isse.\r\n\r\nKui aega j\u00e4tkub, siis koostage \u00fcheskoos selle rakenduse s\u00f5restikmudel paari olulisema vaate kohta, kasutades <a href=\"https:\/\/www.axure.com\/\">Axure<\/a> v\u00f5i <a href=\"https:\/\/balsamiq.com\/\">Balsamiq<\/a> teenuseid (nii nutitelefoni, tahvelarvuti kui arvuti ekraanile). V\u00f5ite koogilaada asemel kasutada ka m\u00f5nda muud arendusideed.\r\n<h2>Lisalugemist ja kasutatud allikad<\/h2>\r\n<ul>\r\n \t<li><a href=\"https:\/\/et.wikipedia.org\/wiki\/Protot\u00fc\u00fcp\">https:\/\/et.wikipedia.org\/wiki\/Protot\u00fc\u00fcp<\/a><\/li>\r\n \t<li><a href=\"http:\/\/april3rd.com\/hcid521\/?p=40\">http:\/\/april3rd.com\/hcid521\/?p=40<\/a><\/li>\r\n \t<li><a href=\"https:\/\/medium.com\/digital-experience-design\/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f\">https:\/\/medium.com\/digital-experience-design\/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.experienceux.co.uk\/faqs\/what-is-wireframing\/\">https:\/\/www.experienceux.co.uk\/faqs\/what-is-wireframing\/<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.mockplus.com\/blog\/post\/basic-uiux-design-concept-difference-between-wireframe-prototype\">https:\/\/www.mockplus.com\/blog\/post\/basic-uiux-design-concept-difference-between-wireframe-prototype<\/a><\/li>\r\n \t<li><a href=\"https:\/\/usabilitygeek.com\/paper-prototyping-as-a-usability-testing-technique\/\">https:\/\/usabilitygeek.com\/paper-prototyping-as-a-usability-testing-technique\/<\/a><\/li>\r\n \t<li><a href=\"https:\/\/marvelapp.com\/pop\/\">https:\/\/marvelapp.com\/pop\/<\/a><\/li>\r\n<\/ul>","rendered":"<p>Protot\u00fc\u00fcpimine v\u00f5i protot\u00fc\u00fcbi loomine on t\u00f5en\u00e4oliselt \u00fcks t\u00e4htsamaid etappe rakenduse disainiprotsessi juures. Siin formuleerub veel \u00fcsna h\u00e4gune idee reaalsuseks ning disainerimeeskonnal on l\u00f5puks ometi midagi n\u00e4idata ka tellijale.<\/p>\n<h2>Mis asi on protot\u00fc\u00fcp?<\/h2>\n<p>Protot\u00fc\u00fcp on kontseptsiooni v\u00f5i protsessi testimiseks ehitatud esialgne proovtoode, mudel v\u00f5i versioon.\u00a0Uue disaini hindamisel kasutatakse \u00fcldjuhul protot\u00fc\u00fcpi s\u00fcsteemianal\u00fc\u00fctikute ja kasutajate t\u00e4psuse parandamiseks. Protot\u00fc\u00fcpide eesm\u00e4rk on kasutajate k\u00e4sutusse anda pigem t\u00f5eline, t\u00f6\u00f6tav s\u00fcsteem, mitte teoreetiline lahendus. Kuna aga protot\u00fc\u00fcpide tasemeid on erinevaid, ei saa v\u00e4ga t\u00e4pselt paika panna v\u00f5imalikke detailsusastmeid (kust n\u00e4iteks l\u00f5peb protot\u00fc\u00fcp ja algab reaalne toode).<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Rapid Prototyping: Sketching | Google for Startups\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JMjozqJS44M?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Paberprotot\u00fc\u00fcpimine<\/h2>\n<p>Paberprotot\u00fc\u00fcpimine on k\u00f5ige odavam ja kiirem viis viia l\u00e4bi kasutajatega toote valideerimist visuaalsemal moel kui seda pakuvad kasutajalood v\u00f5i stsenaariumid. Meeles peab pidama loomulikult, et protot\u00fc\u00fcp baseerub alati disainiprotsessi eelnevatel sammudel.<\/p>\n<p>Nagu nimigi viitab, toimub pea kogu protsess paberil. Tihti kasutatakse siiski protot\u00fc\u00fcbi ettevalmistamise faasis ka digitaalseid vahendeid, n\u00e4iteks erinevad mallid erinevate ekraanisuurustega, mis paberile abistavalt peale prinditakse.<\/p>\n<figure id=\"attachment_104\" aria-describedby=\"caption-attachment-104\" style=\"width: 1264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-104 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o.jpg\" alt=\"\" width=\"1264\" height=\"944\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o.jpg 1264w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o-300x224.jpg 300w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o-768x574.jpg 768w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o-1024x765.jpg 1024w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o-65x49.jpg 65w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o-225x168.jpg 225w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/8596688313_83c701106d_o-350x261.jpg 350w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><figcaption id=\"caption-attachment-104\" class=\"wp-caption-text\">Veebirakenduse paberprotot\u00fc\u00fcp, mis on eelnevalt arvutis valmis kujundatud ning seej\u00e4rel v\u00e4lja prinditud. Autori foto.<\/figcaption><\/figure>\n<p>Alusta paberi suurusega, mis vastab ligikaudselt reaalse ekraani suurusega. Tinglikult kasutatakse tihti A4 m\u00f5\u00f5dus paberit, mis vastab k\u00f5ige levinuma ekraani, s\u00fclearvuti omaga. Disainides vaateid v\u00e4iksematele ekraanidele nagu telefon v\u00f5i kell, suurendatakse vaateid siiski \u00fcle elusuuruse 2 v\u00f5i rohkem korda, et lihtsustada vaadete joonistamist ja protot\u00fc\u00fcbi testimist.<\/p>\n<p>Ettevalmistamise faasis valmista ette peamine ekraani vaade, mis on veebilehe v\u00f5i -rakenduse puhul kaetud veebilehitseja t\u00f6\u00f6riistadega (aadressiriba, edasi-tagasi liikumise nupud, kerimisriba jms) ning veebilehe elementidega (peamen\u00fc\u00fc, logo), mida kuvatakse kasutajale l\u00e4bivalt. \u00dcksikud kasutajaliidese elemendid (n\u00e4iteks rippemen\u00fc\u00fcd, nupud, h\u00fcpikaknad) valmista ette \u00fckshaaval ja v\u00f5imalusel kleepuvatest m\u00e4rkmepaberitest, millega on lihtne testimise jooksul interaktsioone l\u00e4bi m\u00e4ngida:<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_221\" aria-describedby=\"caption-attachment-221\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-221 size-large\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-1024x768.jpg\" alt=\"\" width=\"1024\" height=\"768\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b.jpg 1024w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-300x225.jpg 300w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-768x576.jpg 768w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-65x49.jpg 65w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-225x169.jpg 225w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/3499307295_d3cdc35f13_b-350x263.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-221\" class=\"wp-caption-text\">Mobiilirakenduse paberprotot\u00fc\u00fcp. Autor: Rodolphe Courtier<\/figcaption><\/figure>\n<p id=\"b027\" class=\"graf graf--p graf-after--figure\">J\u00e4rgides peamiseid stsenaariumeid ja persoonasid, kata t\u00e4htsamad vaadetega. Iga \u00fcksikut vaadet ei ole loomulikult vajalik ette valmistada, vilumus tekib t\u00f6\u00f6 k\u00e4igus. Disainielementide kasutamisega pea pigem piiri ja v\u00e4rvid omavad selles faasis juba olulist rolli (punane nupp tundub kasutajale kohe potentsiaalselt ohtlikum kui roheline).<\/p>\n<h3>Paberprotot\u00fc\u00fcbi testimine<\/h3>\n<p>Protot\u00fc\u00fcpide peamine eesm\u00e4rk seisneb selles, et neid saab testida reaalsete kasutajatega. Selline testimine omakorda annab meile palju vahetut ja ausat tagasisidet selle kohta, kas idee \u00fcldse t\u00f6\u00f6tab ja kas seda on kellelgi \u00fcldse vaja. K\u00e4esolevas\u00a0faasis on muudatuste sisseviimine veel v\u00f5rdlemisi odav (v\u00f5rreldes detailsete protot\u00fc\u00fcpidega v\u00f5i reaalse koodikirjutamise etapiga).<\/p>\n<p>Protot\u00fc\u00fcbi testimiseks sobib h\u00e4sti v\u00f5imalikult vaikne ruum koos laua ja toolidega, kuhu mahuvad istuma nii osaleja(d) kui ka testi l\u00e4biviija(d). Korraga osaleb \u00fcldjuhul testimisel \u00fcks osaleja ja v\u00e4hemalt kaks sessiooni l\u00e4biviijat:<\/p>\n<ul>\n<li>Keegi, kes juhendab osalejat ja suhtleb temaga (nendega)<\/li>\n<li>&#8220;Arvuti&#8221; &#8211; l\u00e4biviija, kes ei suhtle osalejaga, kuid kelle roll on vahetada vajadusel osaleja ees olevaid vaateid vastavalt sellele, kuidas osaleja protot\u00fc\u00fcbiga ringi k\u00e4ib (klikkab, lohistab elemente jms)<\/li>\n<\/ul>\n<p>Viimasele kahele rollile v\u00f5ib olla lisaks kaasatud keegi, kes tegeleb m\u00e4rkmete tegemise ja osaleja(te) j\u00e4lgimisega testimise jooksul.<\/p>\n<p>Testmise k\u00e4igus on oluline tagada, et kasutaja ei j\u00e4\u00e4ks veebilehel v\u00f5i -rakendusel &#8220;toppama&#8221; &#8211; tuleb tagada, et k\u00f5ik veebilehe osad, mida v\u00f5ib kasutaja v\u00e4lja kutsuda (n\u00e4iteks vajutades nupul &#8220;Kinnita&#8221; v\u00f5idakse kuvada kinnitust h\u00fcpikaknaga &#8220;Oled Sa kindel?&#8221;, mis vajab ettevalistatud vaadet). Kuna k\u00f5ike ei ole testimise ettevalmistamise faasis ette n\u00e4ha, siis paberprotot\u00fc\u00fcbi testimise tarvis on k\u00f5ige sobilikum varuda l\u00e4biviijal varuks erinevaid joonistusvahendeid ja paberit, et puuduvad vaated kiiresti ette valmistada.<\/p>\n<p>Testi l\u00e4biviimist alusta sissejuhatusega ja kohalolevate inimeste tutvustamisega. Osalejale tutvusta testimise stsenaariumit ja kuidas paberprotot\u00fc\u00fcbid toimivad (kuidas n\u00e4pu kasutada hiirena, kuidas toimub veebilehel kerimine, suurendamine jne). R\u00f5hutada tuleb, et testitakse loodavat s\u00fcsteemi, mitte kasutajat ja \u00fchtegi vale liigutust ei ole olemas. Samuti tasub paluda, et kasutaja oma m\u00f5tteid valju h\u00e4\u00e4lega v\u00e4ljendaks, et valikute tegemise osa hiljem lihtsam anal\u00fc\u00fcsida oleks.<\/p>\n<p>Kasutaja toimetamist veebilehel v\u00f5i rakenduses j\u00e4lgi hoolikalt, kuid \u00e4ra sega kasutajat tarbetult, r\u00e4\u00e4gi v\u00f5imalikult v\u00e4he. Kui kasutaja j\u00e4\u00e4b j\u00e4nni, oota kuni ta p\u00f6\u00f6rdub ise Sinu poole ja j\u00e4llegi pane t\u00e4hele, et \u00e4ra anna liiga t\u00e4pseid suuniseid. \u00a0Oota p\u00f5hjalikumate selgistustega disainisessiooni l\u00f5puni ja pigem k\u00fcsi avatud k\u00fcsimusi nagu &#8220;Mida sa lootsid selles konkreetses vaates leida\/n\u00e4ha?&#8221;.<\/p>\n<p>\u00dcks v\u00f5imalus kasutajat veidi suunata v\u00f5i tagada sujuvamat liikumist, on ette valmistada \u00fcks n-\u00f6 &#8220;404-leht&#8221;. Sarnaselt &#8220;p\u00e4ris&#8221; veebilehtedele, on ka protot\u00fc\u00fcbis hetki, kui nupule vajutamine ei kuva uut vaadet (sest keegi ei ole selle peale m\u00f5elnud n\u00e4iteks) ja sellistel hetkedel annab &#8220;Arvuti&#8221; osalejale ette lehe &#8220;&#8221;Vabandame, otsitavat lehte ei eksisteeri&#8221;.<\/p>\n<p>Testimise l\u00f5pus v\u00f5etakse sessioon kokku k\u00fcsimuste ja diskussiooniga, millest omakorda tehakse kokkuv\u00f5tted.<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-2\" title=\"Low-fidelity paper prototype testing of a concept for a new bike repair app\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/6dre0P4tRTc?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>S\u00f5restikmudelid<\/h2>\n<p>S\u00f5restikmudel on veebilehe v\u00f5i rakenduse vaade, mis kujutab ja visualiseerib lehel kuvatavat sisu ja funktsionaalsused selle struktuurist l\u00e4htuvalt. S\u00f5restikmudelid ei kasuta viimast ja viimistletud disainielemente ning v\u00e4ga tihti on neis kasutatud vaid kahte-kolme v\u00e4rvi. Mudelite eesm\u00e4rgiks on pakkuda osapooltele arusaama, kuidas on erinevad elemendid vaadetel paigutatud, millised on navigatsiooni v\u00f5imalused, \u00fcldine struktuur ja ka kasutatav s\u00f5navara. Olenevalt olemasolevatest ressurssidest (aeg ja raha) v\u00f5ib s\u00f5restikmudeleid kasutada disainisessioonidel klientide v\u00f5i potentsiaalsete kasutajatega v\u00f5i baseerudes paberprotot\u00fc\u00fcbi faasilt saadud tagasisidel valmistada ette vaated, mis on sisendiks juba j\u00e4rgmiste etappide juures. Kuna s\u00f5restikmudelit on endiselt pigem odav vajadusel muuta, siis viimaseid suuremaid disainiprotsessi m\u00f5jutavaid muudatusi saab sisse viia samuti selles etapis.<\/p>\n<p>S\u00f5restikmudeleid koostatakse tavaliselt spetsiaalse tarkvaraga, n\u00e4iteks <a href=\"https:\/\/www.omnigroup.com\/omnigraffle\">OmniGraffle<\/a>, <a href=\"https:\/\/www.axure.com\">Axure<\/a>, <a href=\"https:\/\/balsamiq.com\">Balsamiq<\/a>. Tarkvara kasutamise eelisteks on tihti pakutav lisa, mille abil saab koostatud vaated omavahel \u00e4ra linkida ning serveerida neid \u00fche lehena juba kliendile v\u00f5i kasutajatele lihtsaks l\u00e4bisirvimiseks v\u00f5i kasutamiseks j\u00e4rjekordsel disainisessioonil.<\/p>\n<p>https:\/\/youtube.com\/watch?v=FQqF0VNnOds<\/p>\n<p>S\u00f5restikmudelite miinuseks on kindlasti t\u00f5siasi, et need ei kujuta kunagi l\u00f5plikku kujundamist (\u00f5igemini \u00f6eldes puudub s\u00f5restikmudelil kujundus \u00fcldse). Seet\u00f5ttu on teinekord keeruline disaineritel oma m\u00f5tet kliendile edasi anda, mis omakorda suurendab disaineri t\u00f6\u00f6mahtu l\u00e4bi selgituste (miks m\u00f5ni lehe osa on just oma kohale paigutatud vms). S\u00f5restikmudeli valideerimisel tuleb rangelt j\u00e4lgida, et piltilikult \u00f6eldes ei tuldaks vastu kliendi soovidele veidi rohkem v\u00e4rvi m\u00f5nele nupule lisada.<\/p>\n<h2>\u00dclesanne<\/h2>\n<p>Kasutage koogilaada-rakenduse stsenaariumeid l\u00e4htekohana ja koostage r\u00fchmat\u00f6\u00f6s selle rakenduse paberprotot\u00fc\u00fcp. Jaotage oma v\u00e4iker\u00fchma liikmete vahel vaated avalik vaade, sisselogitud kasutaja profiilivaade, registreerumislehe vaade jne), mille kohta iga r\u00fchmaliige koostab paberprotot\u00fc\u00fcbi. Seej\u00e4rel k\u00e4ige r\u00fchmaliikmete koost\u00f6\u00f6s need paberprotot\u00fc\u00fcbid \u00fcle ja \u00fchtlustage disainiotsused, viige sisse parandused (vajadusel joonistage m\u00f5ni vaade uuesti paberile). Tehke l\u00f5plikest paberprotot\u00fc\u00fcpidest mobiiliga foto v\u00f5i skaneerige ning laadige pildifailid \u00fcles siis Moodle&#8217;isse.<\/p>\n<p>Kui aega j\u00e4tkub, siis koostage \u00fcheskoos selle rakenduse s\u00f5restikmudel paari olulisema vaate kohta, kasutades <a href=\"https:\/\/www.axure.com\/\">Axure<\/a> v\u00f5i <a href=\"https:\/\/balsamiq.com\/\">Balsamiq<\/a> teenuseid (nii nutitelefoni, tahvelarvuti kui arvuti ekraanile). V\u00f5ite koogilaada asemel kasutada ka m\u00f5nda muud arendusideed.<\/p>\n<h2>Lisalugemist ja kasutatud allikad<\/h2>\n<ul>\n<li><a href=\"https:\/\/et.wikipedia.org\/wiki\/Protot\u00fc\u00fcp\">https:\/\/et.wikipedia.org\/wiki\/Protot\u00fc\u00fcp<\/a><\/li>\n<li><a href=\"http:\/\/april3rd.com\/hcid521\/?p=40\">http:\/\/april3rd.com\/hcid521\/?p=40<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/digital-experience-design\/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f\">https:\/\/medium.com\/digital-experience-design\/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f<\/a><\/li>\n<li><a href=\"https:\/\/www.experienceux.co.uk\/faqs\/what-is-wireframing\/\">https:\/\/www.experienceux.co.uk\/faqs\/what-is-wireframing\/<\/a><\/li>\n<li><a href=\"https:\/\/www.mockplus.com\/blog\/post\/basic-uiux-design-concept-difference-between-wireframe-prototype\">https:\/\/www.mockplus.com\/blog\/post\/basic-uiux-design-concept-difference-between-wireframe-prototype<\/a><\/li>\n<li><a href=\"https:\/\/usabilitygeek.com\/paper-prototyping-as-a-usability-testing-technique\/\">https:\/\/usabilitygeek.com\/paper-prototyping-as-a-usability-testing-technique\/<\/a><\/li>\n<li><a href=\"https:\/\/marvelapp.com\/pop\/\">https:\/\/marvelapp.com\/pop\/<\/a><\/li>\n<\/ul>\n","protected":false},"author":23,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-32","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/users\/23"}],"version-history":[{"count":27,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/32\/revisions"}],"predecessor-version":[{"id":240,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/32\/revisions\/240"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/32\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapter-type?post=32"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/contributor?post=32"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/license?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}