Erinevus lehekülje "Kasutajaliidesed (ITI0209)" redaktsioonide vahel

Allikas: Kursused
Mine navigeerimisribale Mine otsikasti
 
(ei näidata sama kasutaja 528 vahepealset redaktsiooni)
1. rida: 1. rida:
−
{{UI}}Kursuse kood: <b>ITV0209</b><br>
+
{{UI}}'''Kursuse kood:''' ITI0209<br>
−
Link: https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br>
+
'''Link:''' https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)<br>
−
Õppejõud: Martin Verrev, [https://www.linkedin.com/in/kristian-lember-254a2a6a/ Kristian Lember]<br>
+
'''Õppejõud:''' Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422<br>
−
Kontakt: martin.verrev@taltech.ee, TTÜ ruum ICT-422<br>
+
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=36831,  <strong>registreerumise kood:</strong>ITI020926<br>
−
2019 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITV0130))_2019]]<br>
+
'''Kursuse Teams'i kanal:''' ITI0209 (2026) Kasutajaliidesed, <strong>registreerumise kood:</strong>df207x3<br>
 +
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis '''MEK122'''<br>
 +
'''Aeg:''' Semestri jooksul igal teisipäeval: '''loeng kell 12:00-13:30 ja praktikum 13:45-15:15'''<br>
 +
'''Arhiiv:''' 2025 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2025]]<br>
  
−
Jooksva info edastamiseks ja üldistele küsimustele vastamiseks on kursusel [https://kasutajaliidesed2020.slack.com/ Slacki kanal] millega saab liituda kasutades  [https://join.slack.com/t/kasutajaliidesed2020/shared_invite/zt-cq8869pf-GCh3slkgv_PDDu4OyTTVBA seda linki] <b>(link uuendatud)</b>
 
  
 +
== Kontrolltöö ja kursuse lõpetamine ==
  
−
== <span color="red">Kursuse toimumine karantiiniperioodil</span> ==
+
3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7
  
−
Karantiiniperioodil toimuvad loengud otseülekande/salvestiste vahendusel. Jooksvatele küsimustele vastamiseks on Slackis kanal "loengus-tekkinud-küsimused"
+
Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub loengutes, praktikumides ja iseseisvate tööde käigus läbitud teemade kohta. Küsimused puudutavad ainult neid teemasid mida loengutes ja praktikumides oleme käsitlenud ja mille kohta on ka loenguslaidid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.
  
−
'''07. mai konsultatsiooniks ja kaitsmiseks''' palun lisada ennast nimekirja Google Forms'i kaudu. Registreerimisvorm on kättesaadav siit: https://forms.gle/CVXL8NXySC6uS3xF9
+
Kontrolltöö toimub kohapeal paberil ja igasuguste abimaterjalide ja kõrvalise abi kasutamine on keelatud.  
  
−
Registreerimisvormi tulemusel tekib nimekiri tudengitest, kellega õppejõud ja abiõppejõud järjekorras läbi Slacki videokõne ühendust võtavad. Kaitsmisjärjekord muutub avalikuks ka tudengitele, kes saavad ennustada millal nendega umbkaudu ühendust võetakse arvestusega et kaitsmisi võtab vastu 3 inimest ja arvestuslikult on planeeritud ühele tudengile 5 .. 8 minutit.
+
Kontrolltöö tegemiseks on kaks aega:
 +
* Teisipäev 02. juuni kell 12:00 auditooriumis SOC-211a
 +
* Neljapäev 04. juuni kell 12:00 auditooriumis SOC-311
  
−
Juhul kui sa ei ole veel Slackiga liitunud ja registreerimislink on aegunud, kirjuta martin.verrev@taltech.ee
+
Kontrolltööle eraldi registreerima ei pea, aga võtke kaasa pildiga dokument
  
−
== Aeg, koht, tulemus ==
+
== Üldine ülevaade ==
−
Loeng toimub igal teisipäeval kell 16:00-17:30  U05-103
 
  
−
Praktikumid toimuvad eri gruppidele kahel erineval ajal. Esimesel nädalal on juhendaja Martin Verrev ja Kristian Lember, edasi on praktikumides abiks abiõppejõud.  
+
Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.
  
−
NB! Praktikumide eesmärgiks on teha ise ülesande kallal tööd, küsida juhendajalt probleemide korral abi ja esitada valmis või osaliselt valmis töid juhendajale. Praktikumides enamasti ei esitata üldist infot/materjale/näiteid kõigile vaatamiseks: selleks on loeng.
+
Kursuse lõpetaja:
 +
* Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.​
 +
* Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.​
 +
* Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.
 +
* Oskab andmeid visualiseerida.
  
−
- neljapäeval kell 10:00 ruumis ICT-122
+
Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)
−
- neljapäeval kell 12:00 ruumis ICT-122
 
  
−
Kursus lõpeb hindelise arvestusega. Hinne sõltub kursuse jooksul tehtud praktikumide tulemustest (60%) pluss kursuse lõpus toimuva kontrolltöö tulemustest (40%).
+
== Loengud ==
  
−
'''Juhime kõigi praktikumijuhendajate poolt tähelepanu, et praktikumitöö arvestamine ja hindamine toimub ainult sinu grupi ajal! Muude gruppide aegadel võetakse töid vastu ainult juhul, kui ei ole kedagi õigest grupist, kes sooviks tööd esitada / konsulteerida, st reeglina mitte arvestuse viimasel nädalal.'''
+
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===
  
−
Loengute järelevaatamiseks kasutage seda linki: https://echo360.org.uk/section/0555d50c-6171-4ce0-a79d-fae7f21715e8/public
+
* Loeng: [[Media:ITI0209_26_01_Good_UI.pdf | Loenguslaidid ]]
 +
* Praktikum: [https://www.ideo.com/journal/build-your-creative-confidence-30-circles-exercise Sissejuhatav loovusharjutus]
  
−
== Hindamine ==
+
=== Nädal 2: Kasutajaliidese arendusprotsess ===
−
[[Pilt:ITV0130-Excel-error.png|right]]
 
−
Aine hinnatakse 100 punkti skaalal; saadaval olevate punktide hulk on veidi suurem. Punktid kogutakse semestri jooksul ja jaotuvad:
 
  
−
* 15 punkti: [[UI:Kodutöö 1 |Kodutöö 1: Kasutajavood ja staatiline prototüüp. Kasutajatestimine.]]  17. veebruari nädal.
+
* Ülesanne: Palun kirjelda esmane ülesandepüstitus ja lisa see Moodlesse: https://moodle.taltech.ee/mod/assign/view.php?id=921791 Juhul kui ülesande lisamisega on probleeme, andke sellest märku Teamsis õppejõule.
−
* 15 punkti: [[UI:Kodutöö 2 |Kodutöö 2: HTML Prototüüp ja CSS raamistikud.]]  18. märtus nädal
+
* Loeng: [[Media:ITI0209_26_02_Design_Process.pdf | Loenguslaidid ]]
−
* 15 punkti: [[UI:Kodutöö 3 |Kodutöö 3: Funktsionaalne prototüüp ja Vue.js]] 20. aprilli nädal
+
* Praktikum: [[ITI0209_26_02_Prax]]
−
* 15 punkti: [[UI:Kodutöö 4 |Kodutöö 4: Andmete visualiseerimine]] 14. mai nädal
 
−
* 40 punkti: [[UI: Projekti lõppraport]] 21. mai nädal
 
  
−
Iga töö annab 0-15 punkti. <font color="red">Hilinenud tööd annavad poole punktidest.</font> Töid võib (ja on soovitav) esitada enne tähtaega.
+
=== Nädal 3: Protsessi algatamine: Briif ===
  
−
<font color="red">'''NB!'''</font>Kui sinu praktikum on õigeaegselt arvestatud, siis saad esitada täiendusi kuni nädalalani enne järgmise praktikumi tähtaega, ilma pooli punkte kaotamata.
+
* Loeng: [[Media:ITI0209_26_03_Brief.pdf | Loenguslaidid]]
−
* Kui sinu praktikum ei ole õigeaegselt arvestatud, siis on sul esitamiseks aega veel nädalani enne järgmise praktikumi tähtaega, aga selliselt hilinenud praks annab ainult pooled punktid.
+
* Praktikum: [[Media:ITI0209_26_03_Paper_Proto.pdf | Praktikum]]
−
* Oma tööd saad arvestuseks esitada <b>ainult</b> oma rühma praksi ajal. Lihtsalt nõu ja abi saad küsida ka teistel aegadel. Kui sa ei ole üheski rühmas, siis on esimene kaitsmisaeg vaba aga hiljem hakkad oma töid kaitsma selle rühma juures kus kaitsesid esimese töö.  
 
  
−
Kõik tööd tuleb esitada ise TTÜ arvutiklassis: emailiga saadetud töid ei vaadata. Kasutada võib nii klassi arvuteid kui oma arvutit, brauser ja operatsioonisüsteem on vabalt valitavad. Programmeerimstööde presenteerimiseks tuleb kasutada ülikooli serverit dijkstra: kõiki prakse vaatavad õppejõud ainult sealt serverist. Kindlasti loe [[Dijkstra server|dijkstra serveri kasutamise õpetust]].
+
=== Nädal 4: Protessi tulemid: Kasutajavood ===
  
−
Kursuse edukaks läbimiseks ja kontrolltööle pääsemiseks peavad kõik kohustuslikud praktilised tööd olema tehtud.
+
* Loeng [[Media:ITI0209_26_04_Flows.pdf | Loenguslaidid]]
 +
* Praktikum: [[Media:ITI0209_26_04_Prax.pdf | Praktikum ]]
  
−
== Kontroltöö ==
+
=== Nädal 5: Protessi tulemid: Persoonad ===
 +
* Loeng [[Media:ITI0209_26_05_Personas.pdf | Loenguslaidid]]
 +
* Praktikum: https://cantunsee.space/ <!-- https://www.fabriders.net/user-personas/ -->
  
−
Kursuses on peale praktikumide ka üks kohustuslik kontrolltöö, mis toimub peale semestri viimast nädalat ja annab maksimaalselt 40 punkti. Kontrolltööle pääsemiseks pead olema vähemalt 1-le punktile kaitstud kõik praktikumitööd. Edukaks sooritamiseks pead kontrolltöös saama vähemalt 51% kogupunktisummast ja kogu kursuse eest (praktikumid+kontrolltöö) vähemalt 51 punkti. Kontrolltööd saab kirjutada ühel korral.  
+
=== Nädal 6: Kasutatavuse Testimine (Teamsis) ===
 +
* Loengusalvestis: Kursuse Teamsi kanalis
 +
* Loeng [[Media:ITI0209_26_06_User_Testing.pdf | Loenguslaidid]]
 +
* Praktikum: Näidisprojekti tutvustus
  
−
Alla 50% kontrolltöö tulemus tähendab ebaõnnestumist. Kui selleks vajadus tekib saab kontrolltöö ühel korral uuesti kirjutada.
+
=== Nädal 7: Sissejuhatud Disainisüsteemi ===
 +
* Loeng [[Media:ITI0209_26_07_Design_Systems_Intro.pdf | Loenguslaidid]]
 +
* Praktikum: Individiaalsed konsultatsioonid
  
−
<strong font color="red">Seoses eriolukorraga suure tõenäosusega kontrolltööd sellisel kujul ei toimu ja see asendatakse iseseisva tööga.</strong>
+
=== Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid ===
 +
* Esmaspäev 23.03 - 1. isesesiva töö tähtaeg
 +
* Loeng: [[Media:ITI0209_26_08_Design_Systems_Layout.pdf | Loenguslaid]]
 +
* Praktikum - [[Media:CSS_Bootstrap_Intro.pdf | HTML raamistike tutvustus]]
  
 +
=== Nädal 9: Vormid ===
 +
* [[Media:ITI0209_26_09_Forms.pdf | Loenguslaidid ]]
 +
* [[Media:_ITI0209_26_09_Prax_Forms.pdf | Hajutus - Vormide parendamine ]]
  
 +
=== Nädal 10: Otsing ja Filtrid ===
 +
* [[Media:ITI0209_26_10_Search_Filters.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid. SASS ]]
 +
 +
=== Nädal 11: Sisu ===
 
<!--
 
<!--
−
'''Kontrolltööle võtke kaasa pildiga dokument'''
+
<strong style="color:red">NB! 16. aprill loeng ja praktikum toimuvad tavalises formaadis Teamsis.</strong>
−
 
 
−
 
 
−
=== Kontroltöö sisu ===
 
−
 
 
−
Kontrolltöö eesmärgiks on kontrollida kursuses läbitud teemadest sisulist arusaamist. Seal on nii vabatekstis kui valikvastustega küsimusi ja lihtsamaid programmeerimisülesandeid. Konkreetsed klasside nimed, teekide nimed, teegifunktsioonide nimed jne ei ole kontrolltöö teema: need antakse ülesandes ette või võite kasutada umbkaudset nime.
 
−
 
 
−
Oskused ülesannete lahendamiseks peaks olema automaatselt kõigil, kes on praktikume süvenemisega teinud.
 
−
Kontrolltöö punktid lisanduvad praktikumi punktidele.
 
−
 
 
−
=== Teemade loend ===
 
−
 
 
−
Siin on esitatud valik teemasid mis kontrolltöösse tulla võivad. Oluline on sisuline arusaamine, mite
 
−
 
 
−
* Kasutajateekond, flow
 
−
* Layout
 
−
* Grid
 
−
* Navigatsioon (nupud, menüü jne)
 
−
* Keskkonna struktuur
 
−
* CTA (Call to Action)
 
−
* Pealkirjade hierarhia
 
−
* Kasutajatestimine
 
−
* Gestaltprintsiibid, hea lühikokkuvõte on siin: http://www.paberimuuseum.ee/disainiABC/site/lesson3-1.html
 
−
* HTML raamistikud, lihtsamad programmeerimisülesanded teie poolt valitud raamistikel
 
−
* Lehe kohandamine mobiilivaadetele
 
−
* CSS eelprotsessorid
 
−
* BEM
 
−
* Veebikomponendid, shadow-DOM
 
−
* Lihtsam Vue/React
 
−
* KPI-d
 
 
-->
 
-->
 +
* Loenguslaidid: [[Media:ITI0209_26_11_Content.pdf | Loenguslaidid ]]
 +
* Praktikum: [[Media:ITI0209_26_11_Prax_Content.pdf | UX kirjutamise harjutus ]]
  
−
== Loenguslaidid ==
+
=== Nädal 12: Juurdepääsetavus ===
 +
* Loeguslaidid: [[Media:ITI0209_12_Accessibility.pdf | Loenguslaidid ]]
 +
* Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg
  
−
* Loeng 1: [https://docs.google.com/presentation/d/1n9d4uGMVtVvlxoaorpJxdaFPKpcqNaB-BDCZXoUyqVs/edit#slide=id.g76a0b8990d_0_6 Ülevaade disainiprotsessist]
+
=== Nädal 13: Sissejuhatus andmete visualiseerimisse ===
−
* Loeng 2: [https://docs.google.com/presentation/d/1tmtFrQVCvyffwnKDu9Ala504hbdaiap9zGDD1KBAw8M/edit?fbclid=IwAR0DCzhSj5ENs7cqxeuba1seSNFAWMS8MjwyG2JA5UbFMInxQ8OZBr9bEL4#slide=id.p Projekt, näited, tööriistad]
+
* Loenguslaidid: [[Media:ITI0209_26_13_Visualization_Intro.pdf | Loenguslaidid ]]
−
* Loeng 3: [https://www.beautiful.ai/deck/-LXO_WhqKYVnDhCfnn7M/ITV0130-CSS-raamistlikud Kasutajaliideste arendaja roll. CSS raamistikud]
+
* Praktikum: 3. iseseisva töö tutvustus. [[Media:ITI0209_26_13_Prax_Data.pdf | Harjutus: andmete leidmine ]]
−
* Loeng 4: Rakenduse testimine
 
−
* Loeng 5: [https://www.beautiful.ai/deck/-L_TKpi0_FhW60VKz-1Y/ITV0130-CSS-SASS-LESS Hallatav CSS. Eelprotsessorid]
 
−
* Loeng 6: [https://www.beautiful.ai/deck/-LaHEUnlSRf679jiuxwm/ITV0130-BEM Hallatav CSS. BEM]
 
−
* Loeng 7: Sissejuhatus veebikomponentidesse
 
−
* Loeng 8: Sissejuhatus Vue-sse.
 
−
* Loeng 9: Vue rakenduse struktuur. Vue CLI.
 
−
* Loeng 10: Oleku haldus Vue rakenduses. VueX
 
−
* Loeng 11: Sisendi valideerimine Vue rakenduses. Rakenduse pakendamine.
 
−
* Loeng 12: [JAMStack. SSG. https://www.beautiful.ai/-M5RMk8iZjbhIVodZtTs/1]
 
−
* Loeng 13: [https://www.dropbox.com/s/29ax74hkc0giz88/ITI0209_Lecture13_Data_Visualization.pdf?dl=0 Andmete visualiseerimine ]
 
−
* Loeng 14: [https://www.dropbox.com/s/jacvke79i0j3zjs/ITI0209_Lecture14_Practical_Visualization_Echarts.pdf?dl=0 Visualiseerimine - Praktiline Echarts.]
 
  
 +
=== Nädal 14: Visualiserimise töövoog ===
 +
* Loeng: [[Media: ITI0209_26_14_Visualization_Storytelling.pdf | Loenguslaidid ]]
 +
* Praktikum: Visualiseerimistööriistad. Sissejuhatud Echartsi [[Media:ITI0209_26_14_Prax_Charts.pdf | Harjutus ]]
  
−
<!--
+
=== Nädal 15: Dashboard ===
−
 
+
<strong>15. nädala loengut auditooriumis ei toimu.</strong>
−
* Loeng 14: Andmete visualiseerimine. Jätk
 
−
* Loeng 15: Sisuloome. Animeerimine
 
−
* Loeng 16: Ebatraditsioonilised kasutajaliidesed. Kokkuvõte.  
 
−
-->
 
  
−
<!--
+
* Loenguslaidid: [[Media:ITI0209_26_15_Dashboard.pdf | Loenguslaidid]]
−
== Eelmise aasta loenguslaidid ==
+
* Video: https://youtu.be/UINdSjavjss?si=9l0xONVb3ytfB0S0 ja koodinäited Echartsi kasutamiseks: https://github.com/martinve/iti0209_kasutajaliidesed
−
 
+
* Iseseisev töö: Vaata läbi video: https://www.youtube.com/watch?v=viY9gvV0nBQ (How to Design Professional Dashboards for Data Analytics)
−
Loengute videosalvestised on kättesaadavad [https://echo360.org.uk/section/3c82e893-acf4-4e75-ac23-6bc45861d5fb/public sellelt lingilt].
 
−
 
 
−
* Loeng 1: [https://docs.google.com/presentation/d/1n9d4uGMVtVvlxoaorpJxdaFPKpcqNaB-BDCZXoUyqVs/edit Sissejuhatus disaini]
 
−
* Loeng 2: [https://docs.google.com/presentation/d/1dIfQab7ns7mhZFyDzsgdx6ff8jbjQ-n1tC8XTXt4CLQ/edit Kasutajakogemuse disain: UX]
 
−
* Loeng 3: [https://docs.google.com/presentation/d/1qVjyJo-r206XstoH4U6kAStwpMEf9K_7ZR4_esp7y4Y/edit Kasutajakogemuse disain: Wireframe]
 
−
* Loeng 4: [https://docs.google.com/presentation/d/1t2tICnUFY2isBphGHjj_3pitG8fHOWmPUCb0GrBSGu8/edit Kasutajakogemuse disain: Wireframe. Prototüüp. Testimine.]
 
−
* Loeng 5: [https://www.dropbox.com/s/1ezpk23ypjsnize/ttu_visualdesign.pdf?dl=0 Visuaalne disain graafilise kasutajaliidese kontekstis]
 
−
* Loeng 6: [https://www.beautiful.ai/deck/-LXO_WhqKYVnDhCfnn7M/ITV0130-CSS-raamistlikud Kasutajaliideste arendaja roll. CSS raamistikud]
 
−
* Loeng 7: [https://www.beautiful.ai/deck/-L_TKpi0_FhW60VKz-1Y/ITV0130-CSS-SASS-LESS Hallatav CSS. Eelprotsessorid]
 
−
* Loeng 8: [https://www.beautiful.ai/deck/-LaHEUnlSRf679jiuxwm/ITV0130-BEM Hallatav CSS. BEM]
 
−
* Loeng 9: [https://www.beautiful.ai/deck/-LaqnjrE3g0a_NhCU7Y1/ITV0130-Web-Components Hallatav HTML. Sissejuhatus veebikomponentidesse]
 
−
* Loeng 10: Veebikomponentide jätk
 
−
* Loeng 11: [https://www.beautiful.ai/deck/-Lc-f1fSqwKBlQ-7fpVD/ITV0130-Component-Frameworks-VueJS Komponendiraamistikud. Vue.js]
 
−
* Loeng 12: Vue.js jätk
 
−
* Loeng 13: Vue.js + NPM. SPA.
 
−
* Loeng 14: [https://www.beautiful.ai/deck/-LdOegkRcVwgqH_1nyUQ/ITV0130-Telling-Stories-with-Data Andmete visualiseerimine. Dashboard.]
 
−
* Loeng 15: [https://www.beautiful.ai/deck/-LeE9qoHCMB682wZ83SQ/ITV0130-SVG-Animations SVG. Animatsioonid]
 
−
* Loeng 16: Kontrolltöö
 
−
-->
 
  
−
== Viidete kogu ==
+
=== Nädal 16: Kursuse kokkuvõte ===
  
−
===Koodinäiteid===
+
* Loenguslaidid [[Media:ITI0209_26_16_Summary.pdf | Loenguslaidid]]
 +
* Praktikum: Individuaalsed konsultatsioonid
  
−
'''Uuendatud 2020 aasta koodinäited''' on kättesaadavad [https://github.com/martinve/iti0209_kasutajaliidesed Githubist]
+
=== Kursuse lõpetamine ===
  
−
Varasemad koodinäited on kättesaadavad siit: [https://github.com/martinve/itv0130 Kursuse koodinäiteid Githubis]
+
* 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö
 +
* 18. nädalal (1 .. 5 juuni) teeme kontrolltöö
  
−
===Lugemist===
+
== Iseseisvad tööd ==
  
−
* Spolsky: [http://www.joelonsoftware.com/uibook/fog0000000249.html User Interface Design For Programmers] - kontrollitundest, kasutajamudelist ja päris inimestest
+
Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.
−
* A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem".
 
−
* Brandon Walkin: [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ Managing UI complexity] - sellest kuidas asju kasutaja eest ära peita
 
−
* Ask Tog: [http://asktog.com/atc/principles-of-interaction-design/ First Principles of User Interaction Design] - tee liides valmis ja loe see uuesti läbi
 
−
* Nielsen: [http://www.nngroup.com/articles/ten-usability-heuristics/ 10 heuristilist kriteeriumit] - liidese testimiseks
 
−
* [http://ui-patterns.com/patterns UI-Patterns.com] - input, navigation, data
 
−
* [http://friedcellcollective.net/outbreak/2007/12/13/messing-up-the-interface/ kuidas vormid koledaks lähevad] ja [http://www.lukew.com/ff/entry.asp?1502 vormide disainist]
 
−
* [https://viki.pingviin.org/Stiilijuhend_tarkvara_t%C3%B5lkimiseks Stiilijuhend tarkvara tõlkimiseks]
 
−
* [https://www.ttu.ee/tugistruktuur/veebitugi-4/sisuloome-tugi/sisuteksti-koostamine-2/ Sisuteksti koostamine]
 
  
−
===Tehniline===
+
1. [[ITI0209 kevad 2026 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg E23.03 kell 12:00<br>
 +
2. [[ITI0209 kevad 2026 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg E27.04, 12:00<br>
 +
3. [[ITI0209 kevad 2026 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg E25.05 12:00<br>
  
−
''Kontrolltöö mõttes tasub mõelda praktikumi- ja kodutööde mahus.''
+
=== Turingu serveri kasutamine ===
  
−
* CSS (vt http://www.w3schools.com/css/default.asp). Peab aru saama põhimõtetest ja näidetest. Konkreetsete omaduste ja atribuudite nimesid ise välja ei pea mõtlema.
+
[[Turingu serverisse rakenduse paigaldamine]]
−
* Javascript (vt http://www.w3schools.com/js/default.asp). Peab aru saama väikestest näidetest a la js inclusion, vormist teksti kättesaamine ja muutmine, domi kättesaamine ja muutmine. Ei pea oskama erinevaid teeke.
 
−
* Json/ajax (vt http://www.w3schools.com/ajax/default.asp). Peab oskama kirjutada väikese JSONi kasutava ajaxi näite. Väike progeülesanne.
 
−
* Flexboxist: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
−
* HTML DOM põhipunktid
 
  
−
===Kuulamist===
+
== Hinde moodustumine ==
−
* 16.04 [https://digi.geenius.ee/raadiosaade/algorytm/16-04-algorutm-kuidas-arendaja-ja-disainer-koos-tootada-saavad/ Algorütm: Kuidas arendaja ja disainer koos töötada saavad?]
 
  
−
== Niisama huvitavat lugemist ==
+
Lõpphinne moodustub järgmistest pukntidest:
  
−
''Kontrolltöö eel siit õppida pole tarvis; siin on lihtsalt lahedused''
+
a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p<br>
 +
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p<br>
 +
c. 3. iseseisev töö ja selle kaitsmine: 20p<br>
 +
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10<br>
 +
e. tehtud kontrolltöö (maksimaalselt 30 punkti). <br>
  
−
* [[Noppeid (ITV0130)|Noppeid]] - ekraanipiltide kogu
+
Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.<br>
−
* [http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution Redesigning Google: How Larry Page Engineered Beautiful Revolution] - kuidas Google ennast hiljuti ümber ehitas
+
Hilinenud tööd annavad poole võimalikest punktidest.
−
* [http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Amazoni alam-menüü nipp]
 
−
* [http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx Windows User Experience Interaction guidelines] - Win7
 
−
* [http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx UX Guidelines for Windows Store apps] - Win 8
 
−
* [http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html iOS Human Interface Guidelines]
 
−
* [https://developer.android.com/design/index.html Android UI Design]
 
−
* [https://developer.gnome.org/hig-book/stable/ GNOME Human Interface Guidelines]
 
−
* [https://medium.com/product-design/5ccef7b3e1fc Kuidas iOS lapikumaks muutub aja jooksul]
 
−
* [http://www.behance.net/rogeroddone Google Visual Asset Guidelines] - Google'i ikonograafia loomisest
 
−
* [http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you Dark Patterns] - salakavalatest kasutajaliidese mustritest.
 
−
* [https://medium.com/@zmh/bye-google-maps-ea3ea10f84dc CityMapper vs Google Maps] - UX võrdlus
 
−
* [http://www.allenpike.com/2014/schrodingers-shift-key/ iOS 8 ja shift]
 
−
* [https://xss-game.appspot.com/ Cross-Site Scripting] - tore mäng turvaprobleemidest kasutajaliidese ehitamisel
 
−
* [http://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/ Vihakõne PHP suunal] - väga must huumor
 
−
* [http://blog.martindoms.com/2011/01/24/poor-ui-design-can-kill/ Kuidas lennuk valesti disainiti ja inimesed katki läksid sellest]
 
−
* [http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name How Apple Is Giving Design A Bad Name] - kuidas Apple oma liideste disainiga veidi rappa on jõudnud
 
−
* [http://sass-lang.com/guide Sass - miinimumsüntaksiga CSS]
 
−
* [https://www.fastcodesign.com/90157153/don-norman-what-went-wrong-in-hawaii-human-error-nope-bad-design Havai tuumahoiatus ja disain]
 
−
* [https://medium.com/@urschanselmann/reactive-programming-an-introduction-for-game-developers-f7da00edb424 Reactive Programming for Game Developers]
 
−
* [https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 The introduction to Reactive Programming you've been missing]
 
−
* [https://sander85.com/download/vaba_tarkvara_tolkimine_eestis.pdf Tarkvara tõlkimine Eestis]
 
−
* [https://viki.pingviin.org/Stiilijuhend_tarkvara_t%C3%B5lkimiseks Stiilijuhend]
 
−
* [https://javlaskitsystem.se/2012/02/whats-the-waiter-doing-with-the-computer-screen/ Kui liidese disain läbi kukub, on kasutaja tihti leidlik.]
 
  
  
−
[[Kategooria:Kasutajaliidesed]]
+
*91 < punkti      -- hinne 5 (suurepärane)
 +
*81 < punkti < 90 -- hinne 4 (väga hea)
 +
*71 < punkti < 80 -- hinne 3 (hea)
 +
*61 < punkti < 70 -- hinne 2 (rahuldav)
 +
*51 < punkti < 60 -- hinne 1 (kasin)
 +
*alla 51 punkti -- kursust ei läbitud

Viimane redaktsioon: 1. juuni 2026, kell 13:30

Kursuse kood: ITI0209
Link: https://courses.cs.ttu.ee/pages/Kasutajaliidesed_(ITV0209)
Õppejõud: Martin Verrev, martin.verrev@taltech.ee, TTÜ ruum ICT-422
Kurusus Moodle keskkonnas: https://moodle.taltech.ee/course/view.php?id=36831, registreerumise kood:ITI020926
Kursuse Teams'i kanal: ITI0209 (2026) Kasutajaliidesed, registreerumise kood:df207x3
Koht: Loengud ja praktikumid toimuvad auditooriumis MEK122
Aeg: Semestri jooksul igal teisipäeval: loeng kell 12:00-13:30 ja praktikum 13:45-15:15
Arhiiv: 2025 aasta kursuse lehte näed siit: Kasutajaliidesed_(ITI0209))_2025


Kontrolltöö ja kursuse lõpetamine

3. iseseisva töö Teamsis ülevaatamiseks ja sobiva kontrolltöö aja leidmiseks täitke palun see vorm: https://forms.gle/jrpXjfqWRTRjyTWt7

Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub loengutes, praktikumides ja iseseisvate tööde käigus läbitud teemade kohta. Küsimused puudutavad ainult neid teemasid mida loengutes ja praktikumides oleme käsitlenud ja mille kohta on ka loenguslaidid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.

Kontrolltöö toimub kohapeal paberil ja igasuguste abimaterjalide ja kõrvalise abi kasutamine on keelatud.

Kontrolltöö tegemiseks on kaks aega:

  • Teisipäev 02. juuni kell 12:00 auditooriumis SOC-211a
  • Neljapäev 04. juuni kell 12:00 auditooriumis SOC-311

Kontrolltööle eraldi registreerima ei pea, aga võtke kaasa pildiga dokument

Üldine ülevaade

Kursus on suunatud 3. kursuse IAIB ja IABB õppekava tudengitele.

Kursuse lõpetaja:

  • Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.​
  • Oskab luua ja valideerida kasutajakeskset nii arvutile kui nutiseadmetele loodud kasutajaliidest.​
  • Suudab osaleda UX arendusprotsessis erinevates rollides nii täitja kui tellijana.
  • Oskab andmeid visualiseerida.

Semestri jooksul toimub õppetöö kaheliikmelistes gruppides, kus luuakse ja valideeritakse kasutajaliides enda poolt väljamõeldud teenusele. Loodud teenuse tagarakendust kursuse jooksul reaalselt valmis programmeerima ei hakka :)

Loengud

Nädal 1: Sissejuhatus: Hea kasutajaliides

Nädal 2: Kasutajaliidese arendusprotsess

Nädal 3: Protsessi algatamine: Briif

Nädal 4: Protessi tulemid: Kasutajavood

Nädal 5: Protessi tulemid: Persoonad

Nädal 6: Kasutatavuse Testimine (Teamsis)

  • Loengusalvestis: Kursuse Teamsi kanalis
  • Loeng Loenguslaidid
  • Praktikum: Näidisprojekti tutvustus

Nädal 7: Sissejuhatud Disainisüsteemi

Nädal 8: Disainisüsteemi reeglid - Paigutus, Tüpograafia, Värvid

Nädal 9: Vormid

Nädal 10: Otsing ja Filtrid

Nädal 11: Sisu

Nädal 12: Juurdepääsetavus

  • Loeguslaidid: Loenguslaidid
  • Praktikum: Individuaalsed konsultatsioonid (E27.04 on 2. isesesiva töö tähtaeg

Nädal 13: Sissejuhatus andmete visualiseerimisse

Nädal 14: Visualiserimise töövoog

Nädal 15: Dashboard

15. nädala loengut auditooriumis ei toimu.

Nädal 16: Kursuse kokkuvõte

  • Loenguslaidid Loenguslaidid
  • Praktikum: Individuaalsed konsultatsioonid

Kursuse lõpetamine

  • 17. nädalal (25..29 mai) vaatame üle 3. iseseisva töö
  • 18. nädalal (1 .. 5 juuni) teeme kontrolltöö

Iseseisvad tööd

Sarnaselt varasemate aastatega esitatalkse kursuse käigus kolm kohustuslikku iseseisvat tööd. Iseseisvad tööd esitatakse Gitlab'is.

1. Staatiline prototüüp, tähtaeg E23.03 kell 12:00
2. HTML Prototüüp, tähtaeg E27.04, 12:00
3. Andmete visualiseerimine, tähtaeg E25.05 12:00

Turingu serveri kasutamine

Turingu serverisse rakenduse paigaldamine

Hinde moodustumine

Lõpphinne moodustub järgmistest pukntidest:

a. 1. iseseisev töö ja kaastudengi töö hindamine: 20p
b. 2. iseseisev töö ja kaastudengi töö hindamine: 20p
c. 3. iseseisev töö ja selle kaitsmine: 20p
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded 10
e. tehtud kontrolltöö (maksimaalselt 30 punkti).

Kursuse edukaks sooritamiseks peab kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+lisad+kontrolltöö) vähemalt 51 punkti.
Hilinenud tööd annavad poole võimalikest punktidest.


  • 91 < punkti -- hinne 5 (suurepärane)
  • 81 < punkti < 90 -- hinne 4 (väga hea)
  • 71 < punkti < 80 -- hinne 3 (hea)
  • 61 < punkti < 70 -- hinne 2 (rahuldav)
  • 51 < punkti < 60 -- hinne 1 (kasin)
  • alla 51 punkti -- kursust ei läbitud
Pärit leheküljelt "http://courses.cs.taltech.ee/w/index.php?title=Kasutajaliidesed_(ITI0209)&oldid=12183"