{"id":34,"date":"2019-01-03T09:12:02","date_gmt":"2019-01-03T09:12:02","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/?post_type=chapter&#038;p=34"},"modified":"2019-08-08T10:37:31","modified_gmt":"2019-08-08T10:37:31","slug":"interaktiivne-prototuup","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/chapter\/interaktiivne-prototuup\/","title":{"raw":"Interaktiivne protot\u00fc\u00fcp","rendered":"Interaktiivne protot\u00fc\u00fcp"},"content":{"raw":"Eelmises peat\u00fckis kirjeldatud tehnikad nagu paperprotot\u00fc\u00fcbid ja s\u00f5restikmudelid annavad omakorda v\u00e4\u00e4rtusliku sisendi j\u00e4rgmisesse etappi, milleks on interaktiivsed v\u00f5i detailsed kasutajaliidese protot\u00fc\u00fcbid. Kuigi ka s\u00f5restikmudelid ja paberprotot\u00fc\u00fcp v\u00f5ib omada teatud interaktiivseid elemente, antakse siinkohal ettevalmistatud protot\u00fc\u00fcpidega kasutajale v\u00e4ga ligikaudne kasutajakogemus juba l\u00f5plikku tootega.\r\n\r\nInteraktiivsed v\u00f5i detailsed kasutajaliidese protot\u00fc\u00fcbid (ingl. k. ka<em> high-fidelity, fi-fi<\/em>) luuakse etapis, kus kogu arendusmeeskonnal on juba v\u00e4ga hea arusaam loodavast tootest (veebilehest, rakendusest). Sellist protot\u00fc\u00fcpi iseloomustab:\r\n<ul>\r\n \t<li>V\u00f5imalikult realistlik ja detailne disain (k\u00f5ik elemendid, osad, kasutatav graafika jms on juba selline, nagu l\u00f5plikkus tootes)<\/li>\r\n \t<li>Kasutusel on reaalne sisu ja populaarset sisut\u00e4idet (<a href=\"https:\/\/loremipsum.io\">lorem ipsum<\/a>!) ei kasutata<\/li>\r\n \t<li>Interaktiivsus - kui l\u00f5plikus versioonis saab vaadete vahel navigeerida n\u00e4puga \u00fcle ekraani t\u00f5mmates, on sama lahendus kasutusel ka protot\u00fc\u00fcbis<\/li>\r\n<\/ul>\r\nInteraktiivseid protot\u00fc\u00fcpe kasutatakse taas kasutajatega disainisessioone l\u00e4biviies toote kasutatavuse testimiseks. Kuna aga siin n\u00e4evad vaated v\u00e4ga realistlikud v\u00e4lja, on tagasiside k\u00fcsimine kasutajalt lihtsam - kasutaja saab juba tootega suhestuda. Selliste protot\u00fc\u00fcpide juures saab l\u00e4bi m\u00e4ngida ka erinevaid animatsioone (kas men\u00fc\u00fc avaneb lahti rulludes, lahti h\u00fcpates v\u00f5i m\u00f5ne muu efektiga ja mida erinevad l\u00e4henemised kasutajakogemusele lisavad) ja disainielemente, mis ka l\u00f5pliku toote puhul samasugused v\u00e4lja n\u00e4evad.\r\n\r\nDetailse protot\u00fc\u00fcbiga on v\u00f5imalik tihti ka v\u00f5ita selliste klientide s\u00fcdameid, kes eelnevatest etappidest v\u00e4ga h\u00e4sti aru ei saanud ja neid ebavajalikeks pidasid. Samas ilma eelnevate etappideta ei oleks s\u00fcndinud niiv\u00f5rd h\u00e4sti l\u00f5ppkasutajat \"tundvat\" toodet.\r\n\r\nInteraktiivset ja detailset protot\u00fc\u00fcpi peetakse disaini- ja arendusprotsessi juures juba kalliks etapiks. Siiski veel odavam, kui arendamine, n\u00f5uab sellise protot\u00fc\u00fcbi kokkupanek disainimeeskonnalt palju t\u00f6\u00f6tunde ja ka muudatuste sisseviimine v\u00f5ib olla palju ajamahukam kui s\u00f5rastikmudeli v\u00f5i paberprotot\u00fc\u00fcbi puhul.\r\n\r\nInteraktiivsete protot\u00fc\u00fcpide loomiseks on nii otse veebis kui ka arvutisse paigaldamiseks m\u00f5eldud rakendusi mitmeid ja \u00fchtset soovitust on v\u00e4ga keeruline anda. Iga t\u00f6\u00f6riist pakub kas prooviperioodi v\u00f5i limiteeritud funktsionaalsuseid, mille najal saab l\u00e4bi viia esmase prooviperioodi ning viimaks otsustada, mis t\u00f6\u00f6tab paremini nii enda kui kliendi tarvis:\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.framer.com\">https:\/\/www.framer.com<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.adobe.com\/ee\/products\/xd\/prototyping-tool.html\">https:\/\/www.adobe.com\/ee\/products\/xd\/prototyping-tool.html<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.flinto.com\">https:\/\/www.flinto.com<\/a> (Mac OS X)<\/li>\r\n \t<li><a href=\"https:\/\/marvelapp.com\">https:\/\/marvelapp.com<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.invisionapp.com\">https:\/\/www.invisionapp.com<\/a><\/li>\r\n \t<li><a href=\"https:\/\/proto.io\">https:\/\/proto.io<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.axure.com\">https:\/\/www.axure.com<\/a><\/li>\r\n<\/ul>\r\n<h2>Marvel<\/h2>\r\nK\u00e4esoleva \u00f5ppematerjali raames peatume mainitud rakendustest pikemalt Marvelil, mis omab sarnaseid peamiseid funktsionaalsuseid teiste veebip\u00f5histe protot\u00fc\u00fcpimise t\u00f6\u00f6riistadega, kuid mille \u00f5ppimiskurv on autori hinnangul veidi leebem.\r\n\r\n<a href=\"https:\/\/marvelapp.wistia.com\/medias\/8uuxrg6i3q\" target=\"_blank\" rel=\"noopener noreferrer\"><img class=\"alignnone wp-image-128 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37.png\" alt=\"\" width=\"958\" height=\"538\" \/><\/a>\r\n\r\n[h5p id=\"10\"]\r\n<h2>\u00dclesanne<\/h2>\r\nKoostage \u00fcheskoos \u00f5piku 6.peat\u00fckis toodud juhiste j\u00e4rgi oma digilahenduse paberprotot\u00fc\u00fcbi p\u00f5hjal interaktiivne protot\u00fc\u00fcp, kasutades veebip\u00f5hist t\u00f6\u00f6riista Marvel v\u00f5i selle analoogi. Jaotage kolme r\u00fchmaliikme vahel t\u00f6\u00f6 osadeks - kui \u00fcks r\u00fchmaliige teeb n\u00e4iteks kasutajaprofiili vaate, siis teine v\u00f5iks disainida anon\u00fc\u00fcmse kasutaja peavaate ja kolmas registreerumisvormi v\u00f5i koondi vaate.\r\n<h2>Lisalugemist ja kasutatud allikad<\/h2>\r\n<ul>\r\n \t<li><a href=\"https:\/\/theblog.adobe.com\/prototyping-difference-low-fidelity-high-fidelity-prototypes-use\/\">https:\/\/theblog.adobe.com\/prototyping-difference-low-fidelity-high-fidelity-prototypes-use\/<\/a><\/li>\r\n \t<li><a href=\"https:\/\/blog.prototypr.io\/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4\">https:\/\/blog.prototypr.io\/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4<\/a><\/li>\r\n \t<li><a href=\"https:\/\/product.voxmedia.com\/2017\/11\/1\/16562200\/a-highly-subjective-guide-to-design-prototyping-tools\">https:\/\/product.voxmedia.com\/2017\/11\/1\/16562200\/a-highly-subjective-guide-to-design-prototyping-tools<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.mockplus.com\/blog\/post\/high-fidelity-and-low-fidelity\">https:\/\/www.mockplus.com\/blog\/post\/high-fidelity-and-low-fidelity<\/a><\/li>\r\n \t<li><a href=\"https:\/\/medium.muz.li\/building-a-high-fidelity-prototype-in-one-day-6406e3a8a504\">https:\/\/medium.muz.li\/building-a-high-fidelity-prototype-in-one-day-6406e3a8a504<\/a><\/li>\r\n<\/ul>","rendered":"<p>Eelmises peat\u00fckis kirjeldatud tehnikad nagu paperprotot\u00fc\u00fcbid ja s\u00f5restikmudelid annavad omakorda v\u00e4\u00e4rtusliku sisendi j\u00e4rgmisesse etappi, milleks on interaktiivsed v\u00f5i detailsed kasutajaliidese protot\u00fc\u00fcbid. Kuigi ka s\u00f5restikmudelid ja paberprotot\u00fc\u00fcp v\u00f5ib omada teatud interaktiivseid elemente, antakse siinkohal ettevalmistatud protot\u00fc\u00fcpidega kasutajale v\u00e4ga ligikaudne kasutajakogemus juba l\u00f5plikku tootega.<\/p>\n<p>Interaktiivsed v\u00f5i detailsed kasutajaliidese protot\u00fc\u00fcbid (ingl. k. ka<em> high-fidelity, fi-fi<\/em>) luuakse etapis, kus kogu arendusmeeskonnal on juba v\u00e4ga hea arusaam loodavast tootest (veebilehest, rakendusest). Sellist protot\u00fc\u00fcpi iseloomustab:<\/p>\n<ul>\n<li>V\u00f5imalikult realistlik ja detailne disain (k\u00f5ik elemendid, osad, kasutatav graafika jms on juba selline, nagu l\u00f5plikkus tootes)<\/li>\n<li>Kasutusel on reaalne sisu ja populaarset sisut\u00e4idet (<a href=\"https:\/\/loremipsum.io\">lorem ipsum<\/a>!) ei kasutata<\/li>\n<li>Interaktiivsus &#8211; kui l\u00f5plikus versioonis saab vaadete vahel navigeerida n\u00e4puga \u00fcle ekraani t\u00f5mmates, on sama lahendus kasutusel ka protot\u00fc\u00fcbis<\/li>\n<\/ul>\n<p>Interaktiivseid protot\u00fc\u00fcpe kasutatakse taas kasutajatega disainisessioone l\u00e4biviies toote kasutatavuse testimiseks. Kuna aga siin n\u00e4evad vaated v\u00e4ga realistlikud v\u00e4lja, on tagasiside k\u00fcsimine kasutajalt lihtsam &#8211; kasutaja saab juba tootega suhestuda. Selliste protot\u00fc\u00fcpide juures saab l\u00e4bi m\u00e4ngida ka erinevaid animatsioone (kas men\u00fc\u00fc avaneb lahti rulludes, lahti h\u00fcpates v\u00f5i m\u00f5ne muu efektiga ja mida erinevad l\u00e4henemised kasutajakogemusele lisavad) ja disainielemente, mis ka l\u00f5pliku toote puhul samasugused v\u00e4lja n\u00e4evad.<\/p>\n<p>Detailse protot\u00fc\u00fcbiga on v\u00f5imalik tihti ka v\u00f5ita selliste klientide s\u00fcdameid, kes eelnevatest etappidest v\u00e4ga h\u00e4sti aru ei saanud ja neid ebavajalikeks pidasid. Samas ilma eelnevate etappideta ei oleks s\u00fcndinud niiv\u00f5rd h\u00e4sti l\u00f5ppkasutajat &#8220;tundvat&#8221; toodet.<\/p>\n<p>Interaktiivset ja detailset protot\u00fc\u00fcpi peetakse disaini- ja arendusprotsessi juures juba kalliks etapiks. Siiski veel odavam, kui arendamine, n\u00f5uab sellise protot\u00fc\u00fcbi kokkupanek disainimeeskonnalt palju t\u00f6\u00f6tunde ja ka muudatuste sisseviimine v\u00f5ib olla palju ajamahukam kui s\u00f5rastikmudeli v\u00f5i paberprotot\u00fc\u00fcbi puhul.<\/p>\n<p>Interaktiivsete protot\u00fc\u00fcpide loomiseks on nii otse veebis kui ka arvutisse paigaldamiseks m\u00f5eldud rakendusi mitmeid ja \u00fchtset soovitust on v\u00e4ga keeruline anda. Iga t\u00f6\u00f6riist pakub kas prooviperioodi v\u00f5i limiteeritud funktsionaalsuseid, mille najal saab l\u00e4bi viia esmase prooviperioodi ning viimaks otsustada, mis t\u00f6\u00f6tab paremini nii enda kui kliendi tarvis:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.framer.com\">https:\/\/www.framer.com<\/a><\/li>\n<li><a href=\"https:\/\/www.adobe.com\/ee\/products\/xd\/prototyping-tool.html\">https:\/\/www.adobe.com\/ee\/products\/xd\/prototyping-tool.html<\/a><\/li>\n<li><a href=\"https:\/\/www.flinto.com\">https:\/\/www.flinto.com<\/a> (Mac OS X)<\/li>\n<li><a href=\"https:\/\/marvelapp.com\">https:\/\/marvelapp.com<\/a><\/li>\n<li><a href=\"https:\/\/www.invisionapp.com\">https:\/\/www.invisionapp.com<\/a><\/li>\n<li><a href=\"https:\/\/proto.io\">https:\/\/proto.io<\/a><\/li>\n<li><a href=\"https:\/\/www.axure.com\">https:\/\/www.axure.com<\/a><\/li>\n<\/ul>\n<h2>Marvel<\/h2>\n<p>K\u00e4esoleva \u00f5ppematerjali raames peatume mainitud rakendustest pikemalt Marvelil, mis omab sarnaseid peamiseid funktsionaalsuseid teiste veebip\u00f5histe protot\u00fc\u00fcpimise t\u00f6\u00f6riistadega, kuid mille \u00f5ppimiskurv on autori hinnangul veidi leebem.<\/p>\n<p><a href=\"https:\/\/marvelapp.wistia.com\/medias\/8uuxrg6i3q\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-128 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37.png\" alt=\"\" width=\"958\" height=\"538\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37.png 958w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37-300x168.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37-768x431.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37-65x37.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37-225x126.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-22-at-15.34.37-350x197.png 350w\" sizes=\"auto, (max-width: 958px) 100vw, 958px\" \/><\/a><\/p>\n<div id=\"h5p-10\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-10\" class=\"h5p-iframe\" data-content-id=\"10\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Marvel app demo\"><\/iframe><\/div>\n<\/div>\n<h2>\u00dclesanne<\/h2>\n<p>Koostage \u00fcheskoos \u00f5piku 6.peat\u00fckis toodud juhiste j\u00e4rgi oma digilahenduse paberprotot\u00fc\u00fcbi p\u00f5hjal interaktiivne protot\u00fc\u00fcp, kasutades veebip\u00f5hist t\u00f6\u00f6riista Marvel v\u00f5i selle analoogi. Jaotage kolme r\u00fchmaliikme vahel t\u00f6\u00f6 osadeks &#8211; kui \u00fcks r\u00fchmaliige teeb n\u00e4iteks kasutajaprofiili vaate, siis teine v\u00f5iks disainida anon\u00fc\u00fcmse kasutaja peavaate ja kolmas registreerumisvormi v\u00f5i koondi vaate.<\/p>\n<h2>Lisalugemist ja kasutatud allikad<\/h2>\n<ul>\n<li><a href=\"https:\/\/theblog.adobe.com\/prototyping-difference-low-fidelity-high-fidelity-prototypes-use\/\">https:\/\/theblog.adobe.com\/prototyping-difference-low-fidelity-high-fidelity-prototypes-use\/<\/a><\/li>\n<li><a href=\"https:\/\/blog.prototypr.io\/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4\">https:\/\/blog.prototypr.io\/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4<\/a><\/li>\n<li><a href=\"https:\/\/product.voxmedia.com\/2017\/11\/1\/16562200\/a-highly-subjective-guide-to-design-prototyping-tools\">https:\/\/product.voxmedia.com\/2017\/11\/1\/16562200\/a-highly-subjective-guide-to-design-prototyping-tools<\/a><\/li>\n<li><a href=\"https:\/\/www.mockplus.com\/blog\/post\/high-fidelity-and-low-fidelity\">https:\/\/www.mockplus.com\/blog\/post\/high-fidelity-and-low-fidelity<\/a><\/li>\n<li><a href=\"https:\/\/medium.muz.li\/building-a-high-fidelity-prototype-in-one-day-6406e3a8a504\">https:\/\/medium.muz.li\/building-a-high-fidelity-prototype-in-one-day-6406e3a8a504<\/a><\/li>\n<\/ul>\n","protected":false},"author":23,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-34","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/34","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":15,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/34\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/34\/revisions\/236"}],"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\/34\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapter-type?post=34"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/contributor?post=34"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/license?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}