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

Allikas: Kursused
Mine navigeerimisribale Mine otsikasti
 
(ei näidata sama kasutaja 370 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@ttu.ee, TTÜ ruum ICT-422<br>
+
'''Kurusus Moodle keskkonnas:''' https://moodle.taltech.ee/course/view.php?id=30645,  <strong>registreerumise kood:</strong>ITI020924<br>
2018 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITV0130))_2019]]<br>
+
'''Kursuse Teams'i kanal:''' ITI0209 Kasutajaliidesed (Kevad 2023), <strong>registreerumise kood:</strong>4d6t7s7<br>
 +
'''Koht:''' Loengud ja praktikumid toimuvad auditooriumis ICT-315<br>
 +
'''Aeg:''' Semestri jooksul igal neljapäeval: '''loeng kell 12:00 ja praktikum 13:45'''<br>
 +
'''Arhiiv:''' 2023 aasta kursuse lehte näed siit: [[Kasutajaliidesed_(ITI0209))_2023]]<br>
  
Jooksva info edastamiseks on kursusel [https://kasutajaliidesed2020.slack.com/ Slacki kanal] millega saab liituda kasutades  [https://join.slack.com/t/kasutajaliidesed2020/shared_invite/enQtOTE1NDU4NDE1MzQ3LTg5MGRiNDU5OTA5NGIyODQ3MzUwYmMwZTI0ZTdmOTg5ODMxMmFkOWI2ZTk2ZTAwZjUxOGI4MDc2OWZmNjRlNjU seda linki] <b>(link uuendatud)</b>
 
  
== Aeg, koht, tulemus ==
 
Loeng toimub igal teisipäeval kell 16:00-17:30 U05-103
 
  
Praktikumid toimuvad eri gruppidele neljal erineval ajal. Esimesel nädalal on juhendaja Martin Verrev ja Kristian Lember, edasi on praktikumides abiks abiõppejõud.
+
== Üldine ülevaade ==
  
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 liidest nii arvutis kui pihuseadmes.​
 +
* Suudab osaleda UX arendusprotsessis 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%).
 
  
'''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.'''
+
== Kursuse lõpetamine, kontrolltöö ==
  
Loengute järelevaatamiseks kasutage seda linki: https://echo360.org.uk/section/0555d50c-6171-4ce0-a79d-fae7f21715e8/public
+
Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub avatud testi vormis loengutes, praktikumidesja iseseisvate tööde käigus läbitud teemade kohta. Lubatud on kasutada kõiki kursuse abimaterjale v.a kaastudengi abi ja keele mudeleid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.
  
== Hindamine ==
+
Kontrolltöö tegemiseks on järgmised ajad.
[[Pilt:ITV0130-Excel-error.png|right]]
+
* Neljapäev 30. mai kell 12:00, auditoorium ICT-315
Aine hinnatakse 100 punkti skaalal; saadaval olevate punktide hulk on veidi suurem. Punktid kogutakse semestri jooksul ja jaotuvad:
+
* Reede 31. mai kell 12:00, auditoorium ICT-315
  
* 15 punkti: [[UI:Kodutöö 1 (2019)|Kodutöö 1: Kasutajavood ja staatiline prototüüp. Kasutajatestimine.]]  17. veebruari nädal.
 
* 15 punkti: [[UI:Kodutöö 2 (2019)|Kodutöö 2: HTML Prototüüp ja CSS raamistikud.]]  18. märtus nädal
 
* 15 punkti: [[UI:Kodutöö 3 (2019)|Kodutöö 3: Funktsionaalne prototüüp ja Vue.js]] 30. aprilli nädal
 
* 15 punkti: [[UI:Kodutöö 4 (2019)|Kodutöö 4: Valideeritud rakendus. Andmete visualiseerimine]] 14. mai nädal
 
* 40 punkti: kontrolltöö
 
  
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.  
+
Kui need ajad ei sobi, kirjutage Teamsis õppejõule.
  
<font color="red">'''NB!'''</font>Kui sinu praktikum on õigeaegselt arvestatud, siis saad <font color="red">ühel korral</font> esitada täiendusi kuni nädalalani enne järgmise praktikumi tähtaega, ilma pooli punkte kaotamata.
 
* Kui sinu praktikum ei ole õigeaegselt arvestatud, siis on sul esitamiseks aega veel kolm nädalat peale tähtaega (välja arvatud neljas ja viies praks), aga selliselt hilinenud praks annab ainult pooled punktid.
 
* Üle kolme nädala hilinenud praks annab edukal arvestamisel ainult üheainsa punkti.
 
* 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]].
+
<!--
 +
* 20..24 mai nädalal toimub 3. iseseisva töö kaitsmine (veebis/kohapeal), täpsed ajad ja graafik selguvad Google vormist mis tuleb siia peale tööde esitamist. Töö ise saate esitada siin: https://moodle.taltech.ee/mod/assign/view.php?id=381087
 +
 
 +
Võimalikud <strong>3 töö kaitsmise ajad</strong> on:<br>
 +
- kolmapäeval 22. mail algusega vahemikus 16:00 .. 18:00 (Teamsis)<br>
 +
- neljapäeval 23. mail algusega 12:00 auditooriumis ICT-315 (kohapeal). Kui teie aeg on ajakavas kirjas, siis tulge õigeks ajaks kohale - tervet kaitsmisperioodi kohal olema ei pea.<br>
 +
- reedel 24. mail vahemikus 14:00 - 16:00 (Teamsis).<br>
 +
 
 +
Kaitsmisaja valikuks täitke ära Google vorm: https://forms.gle/scguLJgbXPm9avje9. Seal on ka link kaitsmisgraafikule mis hakkab jooksvalt uuenema.
 +
 
 +
* Nädal peale seda ehk vahemikus 27..31 mai toimub kontrolltöö. Kontrolltöö tegemiseks on mitu võimalikku aega, ja sobivad ajad selgitab õppejõud 3. iseseisva töö kaitsmise käigus.<br>
 +
-->
 +
 
 +
== Loengud ==
 +
 
 +
=== Nädal 1: Sissejuhatus: Hea kasutajaliides ===
 +
 
 +
[[Media:ITI0209_24_01_Good_UI.pdf | Loenguslaidid ]]
 +
 
 +
<strong>Ülesanne 04. veebruariks</strong> Ülesandepüstituse kirjeldamine: https://moodle.taltech.ee/mod/assign/view.php?id=360121
 +
 
 +
=== Nädal 2: Sissejuhatus disainiprotsessi ===
 +
 
 +
* [[Media:ITI0209_24_02_Intro_to_Design_Process.pdf | Loenguslaidid]]<br>
 +
* [[ITI0209_24_week02_Assignment | 2. praktikum ]]
 +
 
 +
=== Nädal 3: Briif ===
 +
 
 +
* [[Media:ITI0209_24_03_Brief.pdf | Loenguslaidid]]<br>
 +
* [[Media:ITI0209_24_03_Design_Challenge.pdf ‎ | 3. praktikum - Design Challenge]]
 +
 
 +
=== Nädal 4: Tulemid ja persoonad ===
 +
 
 +
* [[Media:ITI0209_24_04_Deliverables_Personas.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_24_04_Paper_Prototyping.pdf | 4. praktikum - Paberprototüüpimine ]]
 +
 
 +
=== Nädal 5: Kasutajavood ja sõrestikmudel ===
  
Kursuse edukaks läbimiseks ja kontrolltööle pääsemiseks peavad kõik kohustuslikud praktilised tööd olema tehtud.
+
* [[Media:ITI0209_24_05_Flows_Wireframes.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_24_05_Figma_Intro.pdf | 5. praktikum - Sissejuhatus Figmasse ]]
  
== Kontroltöö ==
+
=== Nädal 6: Disaineri vaade ===
  
Kursuses on peale praktikumide ka üks kohustuslik kontrolltöö, mis toimub semestri viimasel nädalal ja annab maksimaalselt 40 punkti. Kontrolltööle pääsemiseks pead olema vähemalt 1-le punktile kaitsnud 1-3 praktikumitöö. 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.
+
Täna räägib UX arendusprotsessist disaineri vaates Mihkel Ronk: https://www.linkedin.com/in/mihkelronk/
  
Peale 17. maid on kursus lõppenud: ülesandeid enam ei vaadata ja rohkem kontrolltöösid ei tehta.
+
Teemad mida kaetakse on:
  
'''Kontrolltööle võtke kaasa pildiga dokument'''
+
- PM-ilt requirementid/intro<br>
 +
- Basic research<br>
 +
- Taskihaldus (kehtib ilmselt muude taskimajandajate puhul ka, pmst lihtsalt et hea dokumenteerida asju ka disainis)<br>
 +
- Esmane wireframe (ja see kuidas need ei näe välja nagu wireframe’id kui kasutatakse disainisüsteemi komponente)<br>
 +
- Ülevaade Figma komponentide kasutamise loogikast, faili ülesehitus<br>
 +
- Design review’d ja jällegi dokumenteerimine (et kellelgi hiljem midagi öelda ei oleks)<br>
 +
- Disaini versioonid<br>
 +
- Disaini dokumenteerimine Figmas review ja handoffi jaoks<br>
 +
- Disainisüsteemi uuendamine uuest featuurist tekkinud komponentidega
  
 +
=== Nädal 7: Kasutatavuse testimine ===
  
=== Kontroltöö sisu ===
+
* [[Media:ITI0209_24_07_Usability_Testing.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_24_07_Prax.pdf | 7. praktikum - Figma ]]
  
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.
+
=== Nädal 8: Disainisüsteem. Tüpograafia ===
  
Oskused ülesannete lahendamiseks peaks olema automaatselt kõigil, kes on praktikume süvenemisega teinud.
+
* [[Media:ITI0209_24_08_Design_Systems_01.pdf | Loenguslaidid ]]
Kontrolltöö punktid lisanduvad praktikumi punktidele.
+
* Praktikum: Sissejuhatus Bootstrappi
  
Alla 50% kontrolltöö tulemus tähendab ebaõnnestumist.
+
=== Nädal 9: Disainisüsteemi jätk. Värvid, Layout ===
  
 +
* [[Media:ITI0209_24_09_Design_Systems_02.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_CSS_SASS.pdf | Praktikum: CSS eelprotsessorid ]]
  
=== Teemade loend ===
+
=== Nädal 10: Vormid ===
  
Siin on esitatud valik teemasid mis kontrolltöösse tulla võivad. Oluline on sisuline arusaamine, mite
+
* [[Media:ITI0209_24_10_Forms.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_24_10_Prax_Forms.pdf | Juhend praktikumiks ]]
  
* Kasutajateekond, flow
+
=== Nädal 11: Otsing. Filtrid ===
* 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
 
  
== 2020 aasta loenguslaidid ==
+
* [[Media:ITI0209_24_11_Search_Filters_Sort.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_24_11_Prax_Tailwind.pdf | Praktikum: Sissejuhatus Tailwind CSS-i ]]
  
* Loeng 1: [https://docs.google.com/presentation/d/1n9d4uGMVtVvlxoaorpJxdaFPKpcqNaB-BDCZXoUyqVs/edit#slide=id.g76a0b8990d_0_6 Ülevaade disainiprotsessist]
+
=== Nädal 12:Sisu ===
* Loeng 2: [https://docs.google.com/presentation/d/1tmtFrQVCvyffwnKDu9Ala504hbdaiap9zGDD1KBAw8M/edit?fbclid=IwAR0DCzhSj5ENs7cqxeuba1seSNFAWMS8MjwyG2JA5UbFMInxQ8OZBr9bEL4#slide=id.p Projekt, näited, tööriistad]
 
  
== Eelmise aasta loenguslaidid ==
+
* [[Media:ITI0209_24_12_Content.pdf | Loenguslaidid ]]
 +
* [[Media:ITI0209_24_12_Prax_Content.pdf | Harjutus praktikumiks ]]
  
Loengute videosalvestised on kättesaadavad [https://echo360.org.uk/section/3c82e893-acf4-4e75-ac23-6bc45861d5fb/public sellelt lingilt].
+
=== Nädal 13:Juurdepääsetavus ===
  
* Loeng 1: [https://docs.google.com/presentation/d/1n9d4uGMVtVvlxoaorpJxdaFPKpcqNaB-BDCZXoUyqVs/edit Sissejuhatus disaini]
+
* [[Media:ITI0209_24_13_Accessibility.pdf | Loenguslaidid]]<br>
* Loeng 2: [https://docs.google.com/presentation/d/1dIfQab7ns7mhZFyDzsgdx6ff8jbjQ-n1tC8XTXt4CLQ/edit Kasutajakogemuse disain: UX]
+
* Praktikum: Konsultatsioonid ja abi
* 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öö
 
  
 +
=== Nädal 14. Sissejuhatus andmete visualiseerimisse ===
 +
 +
[[Media:ITI0209_24_14_Visualization_Intro.pdf | Loenguslaidid]]<br>
 +
Praktikum: Sissejuhatus Echartsi
 +
 +
=== Nädal 15. Visualiseerimise jätk ===
 +
 +
[[Media:ITI0209_24_15_Principles_of_Visualization.pdf | Loenguslaidid]]<br>
 +
Praktikum: Dünaamiline Echarts
 +
 +
=== Nädal 16. Dashboard ===
 +
 +
[[Media:ITI0209_24_16_01_Dashboard.html.pdf | Loenguslaidid]]<br>
 +
Praktikum: Individuaalsed konsultatsioonid.
  
  
 
<!--
 
<!--
Kursuse kordajatele: varasemate aastate kontrolltöö hinde võib paluda otse üle kanda.
+
 
 +
 
 +
 
 +
Nädal 15. Visualiseerimise jätk
 +
Nädal 16. 3. töö kaitsmine
 +
 
 
-->
 
-->
  
== Viidete kogu ==
+
== Iseseisvad tööd ==
 
 
===Koodinäiteid===
 
[https://github.com/martinve/itv0130 Kursuse koodinäiteid Githubis]
 
  
===Lugemist===
+
Iseseisvad tööd esitatakse Gitlab'is ja link nendele lisatakse Moodles. Kursuse käigus esitatakse kolm kohustuslikku iseseisvat tööd:
  
* Spolsky: [http://www.joelonsoftware.com/uibook/fog0000000249.html User Interface Design For Programmers] - kontrollitundest, kasutajamudelist ja päris inimestest
+
1. [[ITI0209 kevad 2024 1. kodutöö kirjeldus | Staatiline prototüüp]], tähtaeg esmaspäev 18. märts kell 12:00<br>
* A List Apart: [http://alistapart.com/article/indefenseofeyecandy In Defence of Eye Candy] - miks ilus liides on "parem".
+
2. [[ITI0209 kevad 2024 2. kodutöö kirjeldus | HTML Prototüüp]], tähtaeg reede, 26. aprill kell 17:00<br>
* Brandon Walkin: [http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/ Managing UI complexity] - sellest kuidas asju kasutaja eest ära peita
+
3. [[ITI0209 kevad 2024 3. kodutöö kirjeldus | Andmete visualiseerimine]], tähtaeg 20. mai<br>
* 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===
 
  
''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.
 
* HTML DOM põhipunktid
 
  
== Niisama huvitavat lugemist ==  
+
== Hinde moodustumine ==
  
''Kontrolltöö eel siit õppida pole tarvis; siin on lihtsalt lahedused''
+
Lõpphinne moodustub järgmistest pukntidest:
  
* [[Noppeid (ITV0130)|Noppeid]] - ekraanipiltide kogu
+
a. kaitstud kõik kohustuslikud iseseisvad tööd (maksimaalselt 15 + 15 + 20 punkti)<br>
* [https://www.codeschool.com/courses/shaping-up-with-angular-js Shaping up with angular] - imeline angulari veebikoolitus (aga spämmib teid pärast rohkelt äraütlemisvõimalusega)
+
b. hinnatud kaks kaastudengi tööd (maksimaalselt 5 + 5 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
+
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded (maksimaalselt 10 punkti)<br>
* [http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown Amazoni alam-menüü nipp]
+
c. tehtud kontrolltöö (maksimaalselt 30 punkti). Edukaks sooritamiseks pead kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+kontrolltöö) vähemalt 51 punkti. Kontrolltöö toimub avatud testi vormis, s.t. lubatud on kõigi kursuse abimaterjalide v.a kaastudengi abi ja keelemudelite kasutamine.<br>
* [http://paulrouget.com/e/devtoolsnext/ Firefox developer tools] - lahedusi Mozillalt
 
* [http://www.trinidad.ee/public/materjalid/Kasutajakeskse_veebi_lehekylgede_disain.pdf RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)]
 
* [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
 
* [https://www.npmjs.com/package/jade Jade - miinimumsüntaksiga HTML]
 
* [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://hasso.tepper.pri.ee/2013/09/motteid-tarkvara-tolkimisest-vol-1/ Hasso Tepper: Tarkvara tõlkimisest vol1]
 
* [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.]
 
  
 +
Lisaks on võimalik saada lisapunkte loengutes ja praktikumides aktiivse osalemise eest.
  
[[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: 31. mai 2024, kell 08:24

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=30645, registreerumise kood:ITI020924
Kursuse Teams'i kanal: ITI0209 Kasutajaliidesed (Kevad 2023), registreerumise kood:4d6t7s7
Koht: Loengud ja praktikumid toimuvad auditooriumis ICT-315
Aeg: Semestri jooksul igal neljapäeval: loeng kell 12:00 ja praktikum 13:45
Arhiiv: 2023 aasta kursuse lehte näed siit: Kasutajaliidesed_(ITI0209))_2023


Üldine ülevaade

Kursuse lõpetaja:

  • Oskab hinnata liidese visuaaldisaini kvaliteeti ja terviklikkust.​
  • Oskab luua ja valideerida kasutajakeskset liidest nii arvutis kui pihuseadmes.​
  • Suudab osaleda UX arendusprotsessis 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 :)


Kursuse lõpetamine, kontrolltöö

Kursuse viimaseks ülesandeks on kontrolltöö. Kontrolltöö toimub avatud testi vormis loengutes, praktikumidesja iseseisvate tööde käigus läbitud teemade kohta. Lubatud on kasutada kõiki kursuse abimaterjale v.a kaastudengi abi ja keele mudeleid. Orienteeruv kontrolltöö kirjutamise aeg on 1 .. 1.5 tundi.

Kontrolltöö tegemiseks on järgmised ajad.

  • Neljapäev 30. mai kell 12:00, auditoorium ICT-315
  • Reede 31. mai kell 12:00, auditoorium ICT-315


Kui need ajad ei sobi, kirjutage Teamsis õppejõule.


Loengud

Nädal 1: Sissejuhatus: Hea kasutajaliides

Loenguslaidid

Ülesanne 04. veebruariks Ülesandepüstituse kirjeldamine: https://moodle.taltech.ee/mod/assign/view.php?id=360121

Nädal 2: Sissejuhatus disainiprotsessi

Nädal 3: Briif

Nädal 4: Tulemid ja persoonad

Nädal 5: Kasutajavood ja sõrestikmudel

Nädal 6: Disaineri vaade

Täna räägib UX arendusprotsessist disaineri vaates Mihkel Ronk: https://www.linkedin.com/in/mihkelronk/

Teemad mida kaetakse on:

- PM-ilt requirementid/intro
- Basic research
- Taskihaldus (kehtib ilmselt muude taskimajandajate puhul ka, pmst lihtsalt et hea dokumenteerida asju ka disainis)
- Esmane wireframe (ja see kuidas need ei näe välja nagu wireframe’id kui kasutatakse disainisüsteemi komponente)
- Ülevaade Figma komponentide kasutamise loogikast, faili ülesehitus
- Design review’d ja jällegi dokumenteerimine (et kellelgi hiljem midagi öelda ei oleks)
- Disaini versioonid
- Disaini dokumenteerimine Figmas review ja handoffi jaoks
- Disainisüsteemi uuendamine uuest featuurist tekkinud komponentidega

Nädal 7: Kasutatavuse testimine

Nädal 8: Disainisüsteem. Tüpograafia

Nädal 9: Disainisüsteemi jätk. Värvid, Layout

Nädal 10: Vormid

Nädal 11: Otsing. Filtrid

Nädal 12:Sisu

Nädal 13:Juurdepääsetavus

Nädal 14. Sissejuhatus andmete visualiseerimisse

Loenguslaidid
Praktikum: Sissejuhatus Echartsi

Nädal 15. Visualiseerimise jätk

Loenguslaidid
Praktikum: Dünaamiline Echarts

Nädal 16. Dashboard

Loenguslaidid
Praktikum: Individuaalsed konsultatsioonid.


Iseseisvad tööd

Iseseisvad tööd esitatakse Gitlab'is ja link nendele lisatakse Moodles. Kursuse käigus esitatakse kolm kohustuslikku iseseisvat tööd:

1. Staatiline prototüüp, tähtaeg esmaspäev 18. märts kell 12:00
2. HTML Prototüüp, tähtaeg reede, 26. aprill kell 17:00
3. Andmete visualiseerimine, tähtaeg 20. mai


Turingu serveri kasutamine

Turingu serverisse rakenduse paigaldamine

Hinde moodustumine

Lõpphinne moodustub järgmistest pukntidest:

a. kaitstud kõik kohustuslikud iseseisvad tööd (maksimaalselt 15 + 15 + 20 punkti)
b. hinnatud kaks kaastudengi tööd (maksimaalselt 5 + 5 punkti)
d. aktiivne osalemine loengutes ja praktikumides, lisaülesanded (maksimaalselt 10 punkti)
c. tehtud kontrolltöö (maksimaalselt 30 punkti). Edukaks sooritamiseks pead kontrolltöös saama vähemalt 51% punktidest ja kogu kursuse eest (praktiktikumid+kontrolltöö) vähemalt 51 punkti. Kontrolltöö toimub avatud testi vormis, s.t. lubatud on kõigi kursuse abimaterjalide v.a kaastudengi abi ja keelemudelite kasutamine.

Lisaks on võimalik saada lisapunkte loengutes ja praktikumides aktiivse osalemise eest.

  • 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