{"id":30,"date":"2019-01-03T09:11:41","date_gmt":"2019-01-03T09:11:41","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/?post_type=chapter&#038;p=30"},"modified":"2019-08-08T09:48:56","modified_gmt":"2019-08-08T09:48:56","slug":"kontseptuaalne-mudel","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/chapter\/kontseptuaalne-mudel\/","title":{"raw":"Kontseptuaalne mudel","rendered":"Kontseptuaalne mudel"},"content":{"raw":"<h2>Informatsiooni arhitektuur ja selle meetodid<\/h2>\r\nInformatsiooni arhitektuur oma olemuselt s\u00e4testab selle, kuidas on esitatud kasutajale m\u00f5eldud informatsioon ning peab aitama kasutajat suure ja keerulise informatsioonihulga seest leidma just teda huvitava v\u00f5i vajamineva osa.\u00a0Infoarhitektuuri loomine t\u00e4hendab s\u00fcsteemi kirjeldamist, kuidas informatsioon on grupeeritud, milline on s\u00fcsteemi struktuur ja selles navigeerimise viisid ning milline on kasutatav terminoloogia.\r\n\r\nMeie k\u00f5ige v\u00e4\u00e4rtuslikum ressurss on aeg ja me k\u00f5ik eeldame, et me leiame oma k\u00fcsimustele ja probleemidele vastused v\u00f5imalikult kiiresti. Juhtub aga, et informatsiooni leidmine on keeruline v\u00f5i ajamahukas, riskime me kohe sellega, et meie kasutajad ei soovi meie lehek\u00fclge v\u00f5i s\u00fcsteemi kasutada. Meeles peab pidama, et uusi kasutajaid on palju lihtsam leida, kui tagasi meelitada vanu, kes on mingil p\u00f5hjusel s\u00fcsteemis pettunud.\r\n\r\nHea informatsiooni arhitektuur aitab kasutajal keskenduda tema eesm\u00e4rkidele, mitte ei suuna teda otsima alternatiive v\u00f5i olema s\u00fcsteemi kasutamisel leidlikud.\r\n\r\nInformatsiooni arhitektuuri koostamiseks on mitmeid erinevaid lahendusi ja meetodeid, mis toetavad k\u00f5ik \u00fchte eesm\u00e4rki - kasutajale v\u00f5imalikult mugava kogemuse pakkumist. L\u00e4bi nende meetodite saame veelkord valideerida planeeritava toote vastavust kasutaja ootustele.\r\n<h3>Kaartide sorteerimine<\/h3>\r\n[embed]https:\/\/www.youtube.com\/embed\/xUPpG3JCx6I[\/embed]\r\n\r\n<em>Card sorting<\/em> ehk kaartide sorteerimine on meetod, mida\u00a0v\u00f5ib kasutada uue veebisaidi disainimisel, olemasoleva saidi \u00fcmberstruktureerimisel (n\u00e4iteks kui kasutajad on hakanud kurtma, et veebisaidil on meeletu hulk informatsiooni ning enam pole v\u00f5imalik m\u00f5istliku aja jooksul midagi leida).\u00a0Men\u00fc\u00fcstruktuuri korrastamiseks on see \u00fcks lihtsamatest, samas aga palju kasu andvatest meetoditest, v\u00e4he aega ja muud ressurssi n\u00f5udev.\r\n\r\nKaartide sorteerimise abil on v\u00f5imalik v\u00e4lja selgitada, milliseid men\u00fc\u00fcpunkte on raske leida ja klassifitseerida ning millised kasutatud terminid on raskesti arusaadavad. Meetod v\u00f5imaldab kindlaks teha, kuidas inimesed grupeerivad mingeid asju, ning p\u00e4rast luua selliseid struktuure, kus suurem osa inimesi suudab lihtsamini leida vajalikke asju.\r\n\r\nEnne testimist tuleb selgeks teha selle eesm\u00e4rk, hoolikalt v\u00e4lja valida info, mida hakatakse grupeerima, valmistada ette kaardid ning valida testkasutajad. Seej\u00e4rel, s\u00f5ltuvalt eesm\u00e4rgist tuleb valida meetodi t\u00fc\u00fcp. Kui on vaja lisada infot olemasolevasse struktuuri v\u00f5i on teada, et gruppe muuta ei saa, siis parem on kasutada \u201ekinnist\u201c kaartide sorteerimist (<em>closed card sorting<\/em>), kus grupid on ette antud. Kui on aga vaja saada ideid, kuidas v\u00f5iks veebisaidi v\u00f5i rakenduse sisu jagada, siis tasub kasutada \u201eavatud\u201c kaartide sorteerimist (<em>open card sorting<\/em>). Siis saavad testkasutajad moodustada ise oma gruppe ja nimetada neid oma \u00e4ran\u00e4gemise j\u00e4rgi.\r\n\r\nSoovitav on valmistada 30-100 kaarti. See hulk on piisav selleks, et oleks v\u00f5imalik moodustada gruppe, samas ei t\u00fcdine inimesed neid sorteerides nii kiiresti \u00e4ra. S\u00f5ltuvalt situatsioonist on soovitav kaasata 5-15 testkasutajat, eriti neid, kes hakkavad hiljem antud s\u00fcsteemi kasutama, ehk s\u00fcsteemi l\u00f5ppkasutajaid. Testimine toimub nii, et kasutajale antakse kaardid, mille peale on kirjutatud men\u00fc\u00fcpunktid v\u00f5i n\u00e4iteks tootenimetused. \u00dclesandeks on jagada k\u00f5ik kaardid (etteantud) gruppideks vastavalt oma tunnetusele. Testkasutaja v\u00f5ib lisada omapoolseid men\u00fc\u00fcpunkte ning jagada olemasolevaid mitmeks punktiks. Samuti v\u00f5ib ta anda paremaid nimetusi men\u00fc\u00fcpunktidele ja gruppidele. Testi tegemine v\u00f5tab aega s\u00f5ltuvalt kaartide hulgast umbes \u00fcks tund. Testkasutajate kommentaarid ja arvamused v\u00f5ivad olla v\u00e4ga v\u00e4\u00e4rtuslikud. Soovitav ka need kirja panna ning hiljem kasutada tulemuste anal\u00fc\u00fcsimisel ning struktuuri koostamisel.\r\n\r\nKui testid on l\u00f5ppenud, algab tulemuste kokkupanemine ja anal\u00fc\u00fcs, seej\u00e4rel uue struktuuri disainimine ja protot\u00fc\u00fcbi valmistamine ning selle testimine. Andmete anal\u00fc\u00fcsimiseks v\u00f5ib kasutada erinevaid meelep\u00e4raseid meetodeid, eesm\u00e4rk on v\u00e4lja tuua \u00fchised tunnused grupeerimisel. K\u00f5ige tihedamini v\u00e4lja toodud gruppe kasutatakse veebisaidi v\u00f5i rakenduse infoarhitektuuri loomisel.\r\n\r\nK\u00f5ige lihtsam on kaartide sorteerimist l\u00e4bi viia kasutades v\u00e4rvilisi m\u00e4rkmepabereid ja pliiatseid. \u00a0Kaartide sorteerimist v\u00f5ib l\u00e4bi viia muuhulgas tarkvaralisi vahendeid kasutades, kus eeliseks on see, et andmed salvestatakse automaatselt programmi ning tulemusi saab samas ka anal\u00fc\u00fcsida. Samuti on v\u00f5imalik kaasata rohkem inimesi ning neid, kes asuvad kaugemal, ega saa testimiseks kohale tulla. M\u00f5ned n\u00e4ited kaartide sorteerimise rakendustest: OptimalSort\u00a0(<a href=\"https:\/\/www.optimalworkshop.com\/optimalsort\">www.optimalsort.com<\/a>) ja Card Sort <a href=\"https:\/\/www.usabilitest.com\/CardSorting\">https:\/\/www.usabilitest.com\/CardSorting<\/a>. Kasutada v\u00f5ib loomulikult ka erinevaid tabelarvutusrakendusi, kaasa arvatud Google Drive lahendusi.\r\n<h3>Sisukaart ja selle koostamine<\/h3>\r\nSisukaart on justkui majaplaan, mis kuvab, millistest osadest veebileht koosneb ja kuidas need osad on omavahel seotud (milliselt lehek\u00fcljelt v\u00f5i men\u00fc\u00fcpunkti alt leiab n\u00e4iteks kontaktid v\u00f5i fotogalerii).\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"718\"]<img title=\"Example Site Map\" src=\"http:\/\/clients.viget.com\/blogposts\/images\/ux101-sitemaps\/site_map.1.png\" alt=\"An example of a basic site map\" width=\"718\" height=\"476\" \/> Sisukaart. Autor TJ Ward[\/caption]\r\n\r\nSisukaarte kasutatakse erinevate projekti osapoolte poolt erinevalt - tellija esindaja saab sisukaarti vaadates kinnitust, et arendus liigub \u00f5iges suunas ja nende vajadused on kenasti arvesse v\u00f5etud. Arendajad kasutavad sisukaarte arendusmahtude ja -keerukuse hindamiseks ning tulevaste funktsionaalsuste planeerimisel. Disainerid saavad sisukaartide abil \u00fclevaate variatsioonide ja valikute vajalikkusest ning hilisemas etapis on v\u00f5imalik igale osale juurde linkida juba kujundatud vaated. Erinevad tasemed annavad disainerile infot, millised sektsioonid k\u00e4ivad milliste osade alla ning kas need on ka omavahelises seoses.\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"693\"]<img title=\"Example Site Map 2\" src=\"http:\/\/clients.viget.com\/blogposts\/images\/ux101-sitemaps\/site_map.2.png\" alt=\"An example of a site map.\" width=\"693\" height=\"459\" \/> Tasemete ja seoste kujutamine sisukaartide juures. Autor TJ Ward[\/caption]\r\n\r\nSisukaardi koostamisel ei tohi minna liiga spetsiifiliseks ja kaarti sektsioonidega \u00fcle k\u00fclvata. J\u00e4rgi eelnevalt koostatud stsenaariumeid ning proovi kasutaja teekonda silmas pidades kirja panna lihtsaim struktuur. Iga uus tase muudab s\u00fcsteemi keerukamaks ka arendaja jaoks. K\u00f5ige olulisem on paika saada ja \u00fchiselt kasutajatega kokku leppida k\u00f5ige k\u00f5rgema taseme navigatsioon. Kasuta sektsioonide nimetamisel selgeid ja \u00fchiselt m\u00f5istetavaid termineid.\r\n<h3>Voodiagrammid<\/h3>\r\n<div class=\"page\" title=\"Page 5\">\r\n<div class=\"layoutArea\">\r\n<div class=\"column\">\r\n\r\nVoodiagramm (<em>flow chart<\/em>) on vahend protsesside graafiliseks esitamiseks (visualiseerimiseks) kui ka anal\u00fc\u00fcsiks. N\u00e4iteks koostavad disainerid voodiagrammid, mis illustreerivad, kuidas kasutajad nende veebilehel v\u00f5i rakenduses navigeerivad. Selline visuaalne tegevuste kujutamine aitab disaineril m\u00f5elda, mis juhtub kasutajaga enne ja p\u00e4rast kindla lehe v\u00f5i vaate k\u00fclastamist v\u00f5i h\u00f5lbustab arendajatel omada \u00fclevaadet v\u00f5imalikest valikutest, mida kasutajad saavad lehe v\u00f5i rakenduse k\u00fclastuse ajal sooritada. Voodiagramm sobib \u00fchtmoodi h\u00e4sti nii juba toimiva protsessi anal\u00fc\u00fcsimiseks kui ka uue protsessi (tegevuste ahela) kavandamiseks. Selleks joonistatakse kokkuleppem\u00e4rke kasutades protsess lihtsalt \u00fcles.\r\n\r\nVoodiagrammi joonistamist reguleerivat standardit ei ole, aluseks on vaid v\u00e4ljakujunenud hea tava j\u00e4rgimine. Tihti kasutatakse siiski m\u00f5nda modelleerimiskeelt, nagu n\u00e4iteks BPMN. BPMN (ingl. k. <i>Business Process Modelling Notation<\/i>) on \u00e4riprotsesside modelleerimiskeel ehk graafiline notatsioon spetifitseerimaks \u00e4riprotsesse ja t\u00f6\u00f6vooge.\u00a0T\u00e4nu piiratud hulga graafiliste elementide koosnevad BPMN mudelid lihtsatest diagrammidest. Keerulisemate olukordade kirjeldamiseks on kategooria p\u00f5his\u00fcmbolile lisatud disainielemente, mis ei muuda oluliselt s\u00fcmboli v\u00e4ljan\u00e4gemist. Elemendid jagunevad nelja p\u00f5hikategooriasse ja nende alamkategooriatesse:\r\n\r\n[caption id=\"attachment_90\" align=\"alignnone\" width=\"651\"]<img class=\"wp-image-90 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03.png\" alt=\"\" width=\"651\" height=\"202\" \/> BPML elemendid. Wikipedia[\/caption]\r\n\r\n<span style=\"text-align: initial;font-size: 1em\">Veelgi lihtsustatumal kujul pakuvad erinevad (veebip\u00f5hised) t\u00f6\u00f6riistad oma modelleerimiskeelt ja disainielemente (n\u00e4iteks - <a href=\"https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0\">https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0<\/a>)<\/span>\r\n\r\n&nbsp;\r\n\r\n[h5p id=\"8\"]\r\n\r\nVoodiagrammid on kujutatud tihti kas kasutaja v\u00f5i tegevuse perspektiivist l\u00e4htuvalt. Kasutajakeskne voodiagramm kujutab kasutaja liikumist l\u00e4bi veebilehe v\u00f5i rakenduse (v\u00f5i l\u00e4bi kindla osa). M\u00f5lemal juhul on aluseks eelnevalt koostatud stsenaariumid, millele voodiagramm baseerub. Kasutaja ei pea liikuma diagrammis lineeaarselt, vaid v\u00f5ib m\u00f5nel lehel teha valiku, mis omakorda viib ta m\u00f5nele muule lehele, kui kasutaja, kes on teisiti otsustanud (lihtne n\u00e4ide n\u00e4iteks veebilehel registreerumisel, kus on n\u00e4iteks valik registreeruda Facebooki kontoga v\u00f5i kasutades e-posti aadressi). Tegevuskeskne voodiagramm ei kujuta valikuid:\r\n<div class=\"page\" title=\"Page 5\">\r\n<div class=\"layoutArea\">\r\n<div class=\"column\">\r\n<div class=\"page\" title=\"Page 5\">\r\n<div class=\"layoutArea\">\r\n<div class=\"column\">\r\n<figure id=\"e3ab\" class=\"graf graf--figure graf-after--h3\">\r\n<div class=\"aspectRatioPlaceholder is-locked\">\r\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\">\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"800\"]<img class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*FBHA8Sg-Y6hz7hFe0G3YbQ.png\" alt=\"\" width=\"800\" height=\"181\" \/> Voodiagramm. Autor: Naema Baskanderi[\/caption]\r\n\r\n<\/div>\r\n<\/div><\/figure>\r\n<\/div>\r\n<div class=\"column\">\r\n<p id=\"65e7\" class=\"graf graf--p graf-after--p\">Voodiagrammide koostamist v\u00f5ib tegevuse lihtsustamiseks alustada peamise teekonna kujutamisest, mille juurde on hiljem v\u00f5imalik lisada valikud, otsused ja teised tasandid.<\/p>\r\n\r\n<figure id=\"2c8d\" class=\"graf graf--figure graf-after--h3\">\r\n<div class=\"aspectRatioPlaceholder is-locked\"><\/div><\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<h2>Lisalugemist ja kasutatud allikad<\/h2>\r\n<ul>\r\n \t<li><a href=\"https:\/\/dynomapper.com\/blog\/19-ux\/428-card-sorting-tools\">https:\/\/dynomapper.com\/blog\/19-ux\/428-card-sorting-tools<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.usabilitest.com\/CardSorting\">https:\/\/www.usabilitest.com\/CardSorting<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.slideshare.net\/hanspoldoja\/mistekaardid-sisukaardid-ja-voodiagrammid\">https:\/\/www.slideshare.net\/hanspoldoja\/mistekaardid-sisukaardid-ja-voodiagrammid<\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.itcollege.ee\/wp-content\/uploads\/Veebikeskkonna_kasutajasobralikuks_muutmine_II_HS_03102011.pdf\">http:\/\/www.itcollege.ee\/wp-content\/uploads\/Veebikeskkonna_kasutajasobralikuks_muutmine_II_HS_03102011.pdf<\/a><\/li>\r\n \t<li><a href=\"https:\/\/blog.twn.ee\/et\/kaartide-sorteerimine-ideaalne-meetod-menuustruktuuri-loomiseks-ja-korrastamiseks\">https:\/\/blog.twn.ee\/et\/kaartide-sorteerimine-ideaalne-meetod-menuustruktuuri-loomiseks-ja-korrastamiseks<\/a><\/li>\r\n \t<li><a href=\"https:\/\/theblog.adobe.com\/a-beginners-guide-to-information-architecture-for-ux-designers\/\">https:\/\/theblog.adobe.com\/a-beginners-guide-to-information-architecture-for-ux-designers\/<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.viget.com\/articles\/ux-101-the-site-map\/\">https:\/\/www.viget.com\/articles\/ux-101-the-site-map\/<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.eas.ee\/images\/doc\/sihtasutusest\/trukised\/organisatsiooni_kasiraamat\/14.pdf\">https:\/\/www.eas.ee\/images\/doc\/sihtasutusest\/trukised\/organisatsiooni_kasiraamat\/14.pdf<\/a><\/li>\r\n \t<li><a href=\"https:\/\/uxplanet.org\/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d\">https:\/\/uxplanet.org\/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d<\/a><\/li>\r\n \t<li><a href=\"https:\/\/medium.com\/eightshapes-llc\/creating-excellent-ux-flow-charts-df6f1e46e524\">https:\/\/medium.com\/eightshapes-llc\/creating-excellent-ux-flow-charts-df6f1e46e524<\/a><\/li>\r\n \t<li><a href=\"https:\/\/uxplanet.org\/ux-design-framework-402368bb6645\">https:\/\/uxplanet.org\/ux-design-framework-402368bb6645<\/a><\/li>\r\n \t<li><a href=\"https:\/\/camunda.com\/bpmn\/reference\/\">https:\/\/camunda.com\/bpmn\/reference\/<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0\">https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0<\/a><\/li>\r\n<\/ul>","rendered":"<h2>Informatsiooni arhitektuur ja selle meetodid<\/h2>\n<p>Informatsiooni arhitektuur oma olemuselt s\u00e4testab selle, kuidas on esitatud kasutajale m\u00f5eldud informatsioon ning peab aitama kasutajat suure ja keerulise informatsioonihulga seest leidma just teda huvitava v\u00f5i vajamineva osa.\u00a0Infoarhitektuuri loomine t\u00e4hendab s\u00fcsteemi kirjeldamist, kuidas informatsioon on grupeeritud, milline on s\u00fcsteemi struktuur ja selles navigeerimise viisid ning milline on kasutatav terminoloogia.<\/p>\n<p>Meie k\u00f5ige v\u00e4\u00e4rtuslikum ressurss on aeg ja me k\u00f5ik eeldame, et me leiame oma k\u00fcsimustele ja probleemidele vastused v\u00f5imalikult kiiresti. Juhtub aga, et informatsiooni leidmine on keeruline v\u00f5i ajamahukas, riskime me kohe sellega, et meie kasutajad ei soovi meie lehek\u00fclge v\u00f5i s\u00fcsteemi kasutada. Meeles peab pidama, et uusi kasutajaid on palju lihtsam leida, kui tagasi meelitada vanu, kes on mingil p\u00f5hjusel s\u00fcsteemis pettunud.<\/p>\n<p>Hea informatsiooni arhitektuur aitab kasutajal keskenduda tema eesm\u00e4rkidele, mitte ei suuna teda otsima alternatiive v\u00f5i olema s\u00fcsteemi kasutamisel leidlikud.<\/p>\n<p>Informatsiooni arhitektuuri koostamiseks on mitmeid erinevaid lahendusi ja meetodeid, mis toetavad k\u00f5ik \u00fchte eesm\u00e4rki &#8211; kasutajale v\u00f5imalikult mugava kogemuse pakkumist. L\u00e4bi nende meetodite saame veelkord valideerida planeeritava toote vastavust kasutaja ootustele.<\/p>\n<h3>Kaartide sorteerimine<\/h3>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"What is card sorting?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xUPpG3JCx6I?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><em>Card sorting<\/em> ehk kaartide sorteerimine on meetod, mida\u00a0v\u00f5ib kasutada uue veebisaidi disainimisel, olemasoleva saidi \u00fcmberstruktureerimisel (n\u00e4iteks kui kasutajad on hakanud kurtma, et veebisaidil on meeletu hulk informatsiooni ning enam pole v\u00f5imalik m\u00f5istliku aja jooksul midagi leida).\u00a0Men\u00fc\u00fcstruktuuri korrastamiseks on see \u00fcks lihtsamatest, samas aga palju kasu andvatest meetoditest, v\u00e4he aega ja muud ressurssi n\u00f5udev.<\/p>\n<p>Kaartide sorteerimise abil on v\u00f5imalik v\u00e4lja selgitada, milliseid men\u00fc\u00fcpunkte on raske leida ja klassifitseerida ning millised kasutatud terminid on raskesti arusaadavad. Meetod v\u00f5imaldab kindlaks teha, kuidas inimesed grupeerivad mingeid asju, ning p\u00e4rast luua selliseid struktuure, kus suurem osa inimesi suudab lihtsamini leida vajalikke asju.<\/p>\n<p>Enne testimist tuleb selgeks teha selle eesm\u00e4rk, hoolikalt v\u00e4lja valida info, mida hakatakse grupeerima, valmistada ette kaardid ning valida testkasutajad. Seej\u00e4rel, s\u00f5ltuvalt eesm\u00e4rgist tuleb valida meetodi t\u00fc\u00fcp. Kui on vaja lisada infot olemasolevasse struktuuri v\u00f5i on teada, et gruppe muuta ei saa, siis parem on kasutada \u201ekinnist\u201c kaartide sorteerimist (<em>closed card sorting<\/em>), kus grupid on ette antud. Kui on aga vaja saada ideid, kuidas v\u00f5iks veebisaidi v\u00f5i rakenduse sisu jagada, siis tasub kasutada \u201eavatud\u201c kaartide sorteerimist (<em>open card sorting<\/em>). Siis saavad testkasutajad moodustada ise oma gruppe ja nimetada neid oma \u00e4ran\u00e4gemise j\u00e4rgi.<\/p>\n<p>Soovitav on valmistada 30-100 kaarti. See hulk on piisav selleks, et oleks v\u00f5imalik moodustada gruppe, samas ei t\u00fcdine inimesed neid sorteerides nii kiiresti \u00e4ra. S\u00f5ltuvalt situatsioonist on soovitav kaasata 5-15 testkasutajat, eriti neid, kes hakkavad hiljem antud s\u00fcsteemi kasutama, ehk s\u00fcsteemi l\u00f5ppkasutajaid. Testimine toimub nii, et kasutajale antakse kaardid, mille peale on kirjutatud men\u00fc\u00fcpunktid v\u00f5i n\u00e4iteks tootenimetused. \u00dclesandeks on jagada k\u00f5ik kaardid (etteantud) gruppideks vastavalt oma tunnetusele. Testkasutaja v\u00f5ib lisada omapoolseid men\u00fc\u00fcpunkte ning jagada olemasolevaid mitmeks punktiks. Samuti v\u00f5ib ta anda paremaid nimetusi men\u00fc\u00fcpunktidele ja gruppidele. Testi tegemine v\u00f5tab aega s\u00f5ltuvalt kaartide hulgast umbes \u00fcks tund. Testkasutajate kommentaarid ja arvamused v\u00f5ivad olla v\u00e4ga v\u00e4\u00e4rtuslikud. Soovitav ka need kirja panna ning hiljem kasutada tulemuste anal\u00fc\u00fcsimisel ning struktuuri koostamisel.<\/p>\n<p>Kui testid on l\u00f5ppenud, algab tulemuste kokkupanemine ja anal\u00fc\u00fcs, seej\u00e4rel uue struktuuri disainimine ja protot\u00fc\u00fcbi valmistamine ning selle testimine. Andmete anal\u00fc\u00fcsimiseks v\u00f5ib kasutada erinevaid meelep\u00e4raseid meetodeid, eesm\u00e4rk on v\u00e4lja tuua \u00fchised tunnused grupeerimisel. K\u00f5ige tihedamini v\u00e4lja toodud gruppe kasutatakse veebisaidi v\u00f5i rakenduse infoarhitektuuri loomisel.<\/p>\n<p>K\u00f5ige lihtsam on kaartide sorteerimist l\u00e4bi viia kasutades v\u00e4rvilisi m\u00e4rkmepabereid ja pliiatseid. \u00a0Kaartide sorteerimist v\u00f5ib l\u00e4bi viia muuhulgas tarkvaralisi vahendeid kasutades, kus eeliseks on see, et andmed salvestatakse automaatselt programmi ning tulemusi saab samas ka anal\u00fc\u00fcsida. Samuti on v\u00f5imalik kaasata rohkem inimesi ning neid, kes asuvad kaugemal, ega saa testimiseks kohale tulla. M\u00f5ned n\u00e4ited kaartide sorteerimise rakendustest: OptimalSort\u00a0(<a href=\"https:\/\/www.optimalworkshop.com\/optimalsort\">www.optimalsort.com<\/a>) ja Card Sort <a href=\"https:\/\/www.usabilitest.com\/CardSorting\">https:\/\/www.usabilitest.com\/CardSorting<\/a>. Kasutada v\u00f5ib loomulikult ka erinevaid tabelarvutusrakendusi, kaasa arvatud Google Drive lahendusi.<\/p>\n<h3>Sisukaart ja selle koostamine<\/h3>\n<p>Sisukaart on justkui majaplaan, mis kuvab, millistest osadest veebileht koosneb ja kuidas need osad on omavahel seotud (milliselt lehek\u00fcljelt v\u00f5i men\u00fc\u00fcpunkti alt leiab n\u00e4iteks kontaktid v\u00f5i fotogalerii).<\/p>\n<figure style=\"width: 718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" title=\"Example Site Map\" src=\"http:\/\/clients.viget.com\/blogposts\/images\/ux101-sitemaps\/site_map.1.png\" alt=\"An example of a basic site map\" width=\"718\" height=\"476\" \/><figcaption class=\"wp-caption-text\">Sisukaart. Autor TJ Ward<\/figcaption><\/figure>\n<p>Sisukaarte kasutatakse erinevate projekti osapoolte poolt erinevalt &#8211; tellija esindaja saab sisukaarti vaadates kinnitust, et arendus liigub \u00f5iges suunas ja nende vajadused on kenasti arvesse v\u00f5etud. Arendajad kasutavad sisukaarte arendusmahtude ja -keerukuse hindamiseks ning tulevaste funktsionaalsuste planeerimisel. Disainerid saavad sisukaartide abil \u00fclevaate variatsioonide ja valikute vajalikkusest ning hilisemas etapis on v\u00f5imalik igale osale juurde linkida juba kujundatud vaated. Erinevad tasemed annavad disainerile infot, millised sektsioonid k\u00e4ivad milliste osade alla ning kas need on ka omavahelises seoses.<\/p>\n<figure style=\"width: 693px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" title=\"Example Site Map 2\" src=\"http:\/\/clients.viget.com\/blogposts\/images\/ux101-sitemaps\/site_map.2.png\" alt=\"An example of a site map.\" width=\"693\" height=\"459\" \/><figcaption class=\"wp-caption-text\">Tasemete ja seoste kujutamine sisukaartide juures. Autor TJ Ward<\/figcaption><\/figure>\n<p>Sisukaardi koostamisel ei tohi minna liiga spetsiifiliseks ja kaarti sektsioonidega \u00fcle k\u00fclvata. J\u00e4rgi eelnevalt koostatud stsenaariumeid ning proovi kasutaja teekonda silmas pidades kirja panna lihtsaim struktuur. Iga uus tase muudab s\u00fcsteemi keerukamaks ka arendaja jaoks. K\u00f5ige olulisem on paika saada ja \u00fchiselt kasutajatega kokku leppida k\u00f5ige k\u00f5rgema taseme navigatsioon. Kasuta sektsioonide nimetamisel selgeid ja \u00fchiselt m\u00f5istetavaid termineid.<\/p>\n<h3>Voodiagrammid<\/h3>\n<div class=\"page\" title=\"Page 5\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>Voodiagramm (<em>flow chart<\/em>) on vahend protsesside graafiliseks esitamiseks (visualiseerimiseks) kui ka anal\u00fc\u00fcsiks. N\u00e4iteks koostavad disainerid voodiagrammid, mis illustreerivad, kuidas kasutajad nende veebilehel v\u00f5i rakenduses navigeerivad. Selline visuaalne tegevuste kujutamine aitab disaineril m\u00f5elda, mis juhtub kasutajaga enne ja p\u00e4rast kindla lehe v\u00f5i vaate k\u00fclastamist v\u00f5i h\u00f5lbustab arendajatel omada \u00fclevaadet v\u00f5imalikest valikutest, mida kasutajad saavad lehe v\u00f5i rakenduse k\u00fclastuse ajal sooritada. Voodiagramm sobib \u00fchtmoodi h\u00e4sti nii juba toimiva protsessi anal\u00fc\u00fcsimiseks kui ka uue protsessi (tegevuste ahela) kavandamiseks. Selleks joonistatakse kokkuleppem\u00e4rke kasutades protsess lihtsalt \u00fcles.<\/p>\n<p>Voodiagrammi joonistamist reguleerivat standardit ei ole, aluseks on vaid v\u00e4ljakujunenud hea tava j\u00e4rgimine. Tihti kasutatakse siiski m\u00f5nda modelleerimiskeelt, nagu n\u00e4iteks BPMN. BPMN (ingl. k. <i>Business Process Modelling Notation<\/i>) on \u00e4riprotsesside modelleerimiskeel ehk graafiline notatsioon spetifitseerimaks \u00e4riprotsesse ja t\u00f6\u00f6vooge.\u00a0T\u00e4nu piiratud hulga graafiliste elementide koosnevad BPMN mudelid lihtsatest diagrammidest. Keerulisemate olukordade kirjeldamiseks on kategooria p\u00f5his\u00fcmbolile lisatud disainielemente, mis ei muuda oluliselt s\u00fcmboli v\u00e4ljan\u00e4gemist. Elemendid jagunevad nelja p\u00f5hikategooriasse ja nende alamkategooriatesse:<\/p>\n<figure id=\"attachment_90\" aria-describedby=\"caption-attachment-90\" style=\"width: 651px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-90 size-full\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03.png\" alt=\"\" width=\"651\" height=\"202\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03.png 651w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03-300x93.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03-65x20.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03-225x70.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-content\/uploads\/sites\/9\/2019\/01\/Screenshot-2019-02-01-at-15.16.03-350x109.png 350w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><figcaption id=\"caption-attachment-90\" class=\"wp-caption-text\">BPML elemendid. Wikipedia<\/figcaption><\/figure>\n<p><span style=\"text-align: initial;font-size: 1em\">Veelgi lihtsustatumal kujul pakuvad erinevad (veebip\u00f5hised) t\u00f6\u00f6riistad oma modelleerimiskeelt ja disainielemente (n\u00e4iteks &#8211; <a href=\"https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0\">https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0<\/a>)<\/span><\/p>\n<p>&nbsp;<\/p>\n<div id=\"h5p-8\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-8\" class=\"h5p-iframe\" data-content-id=\"8\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Voodiagramm\"><\/iframe><\/div>\n<\/div>\n<p>Voodiagrammid on kujutatud tihti kas kasutaja v\u00f5i tegevuse perspektiivist l\u00e4htuvalt. Kasutajakeskne voodiagramm kujutab kasutaja liikumist l\u00e4bi veebilehe v\u00f5i rakenduse (v\u00f5i l\u00e4bi kindla osa). M\u00f5lemal juhul on aluseks eelnevalt koostatud stsenaariumid, millele voodiagramm baseerub. Kasutaja ei pea liikuma diagrammis lineeaarselt, vaid v\u00f5ib m\u00f5nel lehel teha valiku, mis omakorda viib ta m\u00f5nele muule lehele, kui kasutaja, kes on teisiti otsustanud (lihtne n\u00e4ide n\u00e4iteks veebilehel registreerumisel, kus on n\u00e4iteks valik registreeruda Facebooki kontoga v\u00f5i kasutades e-posti aadressi). Tegevuskeskne voodiagramm ei kujuta valikuid:<\/p>\n<div class=\"page\" title=\"Page 5\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<div class=\"page\" title=\"Page 5\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<figure id=\"e3ab\" class=\"graf graf--figure graf-after--h3\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\">\n<figure style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*FBHA8Sg-Y6hz7hFe0G3YbQ.png\" alt=\"\" width=\"800\" height=\"181\" \/><figcaption class=\"wp-caption-text\">Voodiagramm. Autor: Naema Baskanderi<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/figure>\n<\/div>\n<div class=\"column\">\n<p id=\"65e7\" class=\"graf graf--p graf-after--p\">Voodiagrammide koostamist v\u00f5ib tegevuse lihtsustamiseks alustada peamise teekonna kujutamisest, mille juurde on hiljem v\u00f5imalik lisada valikud, otsused ja teised tasandid.<\/p>\n<figure id=\"2c8d\" class=\"graf graf--figure graf-after--h3\">\n<div class=\"aspectRatioPlaceholder is-locked\"><\/div>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Lisalugemist ja kasutatud allikad<\/h2>\n<ul>\n<li><a href=\"https:\/\/dynomapper.com\/blog\/19-ux\/428-card-sorting-tools\">https:\/\/dynomapper.com\/blog\/19-ux\/428-card-sorting-tools<\/a><\/li>\n<li><a href=\"https:\/\/www.usabilitest.com\/CardSorting\">https:\/\/www.usabilitest.com\/CardSorting<\/a><\/li>\n<li><a href=\"https:\/\/www.slideshare.net\/hanspoldoja\/mistekaardid-sisukaardid-ja-voodiagrammid\">https:\/\/www.slideshare.net\/hanspoldoja\/mistekaardid-sisukaardid-ja-voodiagrammid<\/a><\/li>\n<li><a href=\"http:\/\/www.itcollege.ee\/wp-content\/uploads\/Veebikeskkonna_kasutajasobralikuks_muutmine_II_HS_03102011.pdf\">http:\/\/www.itcollege.ee\/wp-content\/uploads\/Veebikeskkonna_kasutajasobralikuks_muutmine_II_HS_03102011.pdf<\/a><\/li>\n<li><a href=\"https:\/\/blog.twn.ee\/et\/kaartide-sorteerimine-ideaalne-meetod-menuustruktuuri-loomiseks-ja-korrastamiseks\">https:\/\/blog.twn.ee\/et\/kaartide-sorteerimine-ideaalne-meetod-menuustruktuuri-loomiseks-ja-korrastamiseks<\/a><\/li>\n<li><a href=\"https:\/\/theblog.adobe.com\/a-beginners-guide-to-information-architecture-for-ux-designers\/\">https:\/\/theblog.adobe.com\/a-beginners-guide-to-information-architecture-for-ux-designers\/<\/a><\/li>\n<li><a href=\"https:\/\/www.viget.com\/articles\/ux-101-the-site-map\/\">https:\/\/www.viget.com\/articles\/ux-101-the-site-map\/<\/a><\/li>\n<li><a href=\"https:\/\/www.eas.ee\/images\/doc\/sihtasutusest\/trukised\/organisatsiooni_kasiraamat\/14.pdf\">https:\/\/www.eas.ee\/images\/doc\/sihtasutusest\/trukised\/organisatsiooni_kasiraamat\/14.pdf<\/a><\/li>\n<li><a href=\"https:\/\/uxplanet.org\/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d\">https:\/\/uxplanet.org\/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/eightshapes-llc\/creating-excellent-ux-flow-charts-df6f1e46e524\">https:\/\/medium.com\/eightshapes-llc\/creating-excellent-ux-flow-charts-df6f1e46e524<\/a><\/li>\n<li><a href=\"https:\/\/uxplanet.org\/ux-design-framework-402368bb6645\">https:\/\/uxplanet.org\/ux-design-framework-402368bb6645<\/a><\/li>\n<li><a href=\"https:\/\/camunda.com\/bpmn\/reference\/\">https:\/\/camunda.com\/bpmn\/reference\/<\/a><\/li>\n<li><a href=\"https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0\">https:\/\/www.lucidchart.com\/pages\/flowchart-symbols-meaning-explained?a=0<\/a><\/li>\n<\/ul>\n","protected":false},"author":23,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-30","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/30","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":22,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/30\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapters\/30\/revisions\/227"}],"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\/30\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/pressbooks\/v2\/chapter-type?post=30"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/contributor?post=30"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/disain\/wp-json\/wp\/v2\/license?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}