Kasutajaliidesed (ITI0209)

Kursuse kood: ITV0209
Link: https://courses.cs.ttu.ee/pages/ITV0130
Õppejõud: Martin Verrev, Kristian Lember
Kontakt: martin.verrev@ttu.ee, TTÜ ruum ICT-422
2018 aasta kursuse lehte näed siit: Kasutajaliidesed_(ITV0130))_2019

Jooksva info edastamiseks on kursusel Slacki kanal millega saab liituda kasutades seda linki

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.

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.

- neljapäeval kell 10:00 ruumis ICT-122 - 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.

Loengute järelevaatamiseks kasutage seda linki: https://echo360.org.uk/section/0555d50c-6171-4ce0-a79d-fae7f21715e8/public

Hindamine

Aine hinnatakse 100 punkti skaalal; saadaval olevate punktide hulk on veidi suurem. Punktid kogutakse semestri jooksul ja jaotuvad:

• 15 punkti: Kodutöö 1: Kasutajavood ja staatiline prototüüp. Kasutajatestimine. 25. veebruari nädal.
• 15 punkti: Kodutöö 2: HTML Prototüüp ja CSS raamistikud. 2. aprilli nädal
• 15 punkti: Kodutöö 3: Funktsionaalne prototüüp ja Vue.js 30. aprilli nädal
• 15 punkti: Kodutöö 4: Valideeritud rakendus. Andmete visualiseerimine 14. mai nädal
• 40 punkti: kontrolltöö

Iga töö annab 0-15 punkti. Hilinenud tööd annavad poole punktidest. Töid võib (ja on soovitav) esitada enne tähtaega.

NB! * Kui sinu praktikum on õigeaegselt arvestatud, siis saad 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 ainult 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 serveri kasutamise õpetust.

Kursuse edukaks läbimiseks ja kontrolltööle pääsemiseks peavad kõik kohustuslikud praktilised tööd olema tehtud.

Kontroltöö

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.

Kontrolltöö jaoks on sul valida kaks võimalikku päeva.

• teisipäeval 14. mail kell 10:00 auditooriumis U06a-201
• neljapäeval 16. mail kell 12:00 IT kolledzis, auditooriumis EIK-316

Praktikumiaegades on veel võimalik kaitsta koduseid töid, aga peale 17. maid on kursus lõppenud: ülesandeid enam ei vaadata ja rohkem kontrolltöösid ei tehta.

Kontrolltööle võtke kaasa pildiga dokument

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.

Alla 50% kontrolltöö tulemus tähendab ebaõnnestumist.

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

2020 aasta loenguslaidid

• Loeng 1: Ülevaade disainiprotsessist
• Loeng 2: Projekt, näited, tööriistad

Eelmise aasta loenguslaidid

Loengute videosalvestised on kättesaadavad sellelt lingilt.

• Loeng 1: Sissejuhatus disaini
• Loeng 2: Kasutajakogemuse disain: UX
• Loeng 3: Kasutajakogemuse disain: Wireframe
• Loeng 4: Kasutajakogemuse disain: Wireframe. Prototüüp. Testimine.
• Loeng 5: Visuaalne disain graafilise kasutajaliidese kontekstis
• Loeng 6: Kasutajaliideste arendaja roll. CSS raamistikud
• Loeng 7: Hallatav CSS. Eelprotsessorid
• Loeng 8: Hallatav CSS. BEM
• Loeng 9: Hallatav HTML. Sissejuhatus veebikomponentidesse
• Loeng 10: Veebikomponentide jätk
• Loeng 11: Komponendiraamistikud. Vue.js
• Loeng 12: Vue.js jätk
• Loeng 13: Vue.js + NPM. SPA.
• Loeng 14: Andmete visualiseerimine. Dashboard.
• Loeng 15: SVG. Animatsioonid
• Loeng 16: Kontrolltöö

Viidete kogu

Koodinäiteid

Kursuse koodinäiteid Githubis

Lugemist

• Spolsky: User Interface Design For Programmers - kontrollitundest, kasutajamudelist ja päris inimestest
• A List Apart: In Defence of Eye Candy - miks ilus liides on "parem".
• Brandon Walkin: Managing UI complexity - sellest kuidas asju kasutaja eest ära peita
• Ask Tog: First Principles of User Interaction Design - tee liides valmis ja loe see uuesti läbi
• Nielsen: 10 heuristilist kriteeriumit - liidese testimiseks
• UI-Patterns.com - input, navigation, data
• kuidas vormid koledaks lähevad ja vormide disainist
• Stiilijuhend tarkvara tõlkimiseks
• Sisuteksti koostamine

Tehniline

Kontrolltöö mõttes tasub mõelda praktikumi- ja kodutööde mahus.

• 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.
• 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

Kontrolltöö eel siit õppida pole tarvis; siin on lihtsalt lahedused

• Noppeid - ekraanipiltide kogu
• Shaping up with angular - imeline angulari veebikoolitus (aga spämmib teid pärast rohkelt äraütlemisvõimalusega)
• Redesigning Google: How Larry Page Engineered Beautiful Revolution - kuidas Google ennast hiljuti ümber ehitas
• Amazoni alam-menüü nipp
• Firefox developer tools - lahedusi Mozillalt
• RISO: Kasutajakeskse veebi lehekülgede disain (.pdf)
• Windows User Experience Interaction guidelines - Win7
• UX Guidelines for Windows Store apps - Win 8
• iOS Human Interface Guidelines
• Android UI Design
• GNOME Human Interface Guidelines
• Kuidas iOS lapikumaks muutub aja jooksul
• Google Visual Asset Guidelines - Google'i ikonograafia loomisest
• Dark Patterns - salakavalatest kasutajaliidese mustritest.
• CityMapper vs Google Maps - UX võrdlus
• iOS 8 ja shift
• Cross-Site Scripting - tore mäng turvaprobleemidest kasutajaliidese ehitamisel
• Vihakõne PHP suunal - väga must huumor
• Kuidas lennuk valesti disainiti ja inimesed katki läksid sellest
• How Apple Is Giving Design A Bad Name - kuidas Apple oma liideste disainiga veidi rappa on jõudnud
• Jade - miinimumsüntaksiga HTML
• Sass - miinimumsüntaksiga CSS
• Havai tuumahoiatus ja disain
• Reactive Programming for Game Developers
• The introduction to Reactive Programming you've been missing
• Hasso Tepper: Tarkvara tõlkimisest vol1
• Tarkvara tõlkimine Eestis
• Stiilijuhend
• Kui liidese disain läbi kukub, on kasutaja tihti leidlik.