Tárgyfelelős:
Célkitűzés:
A tantárgy célja megismertetni a hallgatókkal a vizuális és beszéd interfész technológiákat az ember-gép kapcsolatban (HCI: Human-Computer Interface). A tantárgy keretén belül a részletesen bemutatjuk a felhasználói interfész elemeit, a szoftver-ergonómia alapelveit, a szoftverek ergonómiai szempontból történő kiértékeléseinek módszereit. A tantárgy során a hallgatók gyakorlati feladatok megoldásával igazolják a témakörben szerzett jártasságukat. A kurzus végére a hallgatók megtanulják a felhasználói interfész tervezéséhez, teszteléséhez, minősítéséhez szükséges alapelveket, hogy azt majd gyakorlatban is alkalmazhassák a későbbi munkájuk folyamán.
Szemeszter:
ősz
2014. őszi félév
Információk:
Ha kérdés van a tárggyal kapcsolatban, akkor az zainko [kukac] tmit.bme.hu címre írjál!
Előadás időpontok:
- 1. szept. 10.
- 2. szept. 24.
- 3. okt. 1.
- 4. okt. 8.
- 5. okt. 15.
- 6. okt. 22.
- 7. okt. 29.
- 8. nov. 5.
- 9. nov. 12.
- 10. nov. 19.
- 11. nov. 26.
- 12. dec. 3.
- 13. dec. 10.
Ajánlott könyv:
- Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha: User Interface Design and Evaluation
- Google könyv formátum
- Laptop használóknak hasznos információk: Ergonomic Tips for Laptop Users
Gyakorlat időpontok:
Féléves feladat:
- Csoportok beosztása, feladatok: pdf
- Gyakorlati feladat határidők, segítség a félév végi beadáshoz: pdf
- Tesztelt változat leadása meghosszabbítva (FTP szerver hibája miatt): 2014. december 2. hétfő 9:00
- Végső határidő a féléves feladatra: 2014. december 12. péntek 23:59 (a szorgalmi időszak vége)
- Csoportbeosztás kiértékeléshez: pdf
1. előadás:
- Bemutatkozás, adminisztrációs kérdések, időbeosztást stb.
- HCI angol terminológia
- HCI történelmi áttekintése
- HCI a gyakorlatban
- HCI angol terminológia
- Gartner Hype Cycle, aktuális HCI-t érintő technológiák
Néhány a weben is elérhető olyan oldal, amely kapcsolódik az előadáshoz. Az anyagoknak sokszor csak egy része szerepel az előadásokon, illetve az előadások más interneten nem elérhető források alapján is készülnek, ezért az előadáson elhangozottak különbözhetnek az itt szereplő művek tartalmától. Az itt található linkek függetlenek az oktatótól, ezért tartalmért nem tud felelőséget válalni, illetve tartalma változhat. Ezek mellett az angol nyelvű Wikipedia általában segítséget ad, ez külön nem lesz feltűntetve:
2. előadás:
Windows 8 / 8.1 Microsoft design principles UX Guidelines for Windows Store apps Modern design at Microsoft
3. előadás:
Felhasználó központú tervezés Felhasználók Feladatok Környezet Felhasználó központú tervezés Szabvány: A felhasználó-központú tervezés indokoltságának kifejtése A felhasználó-központú tervezés előkészítő tervezése A felhasználó-központú tervezés alapelvei A felhasználó-központú tervezés tevékenységei Alapelvek A felhasználók aktív bevonása és a felhasználói, valamint a feladatból adódó követelmények megértése A felhasználók és a technológia szerepének megfelelő kijelölése és szétválasztása A tervezési megoldások iterációja Multidiszciplináris tervezés Tevékenységek A használat kontextusának meghatározása és megértése A felhasználói és szervezeti követelmények meghatározása a használhatósággal kapcsolatos célkritériumok meghatározása Megoldások készítése A megoldások értékelése a követelmények alapján Vízesés modell Iteratív Felhasználók bevonása Megfigyelés Modellek Bevont felhasználók Tesztelés és kiértékelés Kik a felhasználók Megrendelő Szervezeten belüli felhasználók Végfelhasználók Csillag Fejlesztő csapat Vezetők Marketingesek Sw mérnökök Programozók Grafikusok HCI specialisták Egyéb kutatók Fejlesztői munkaerő ... Felhasználók Információk begyűjtése Megfigyelni a felhasználót Eredeti környezet Laboratóriumi környezet Megfigyelés hatása Információk begyűjtése Interjú Strukturált Flexibilis Kérdőívek Zárt kérdések Skálák Nyitott kérdések 7+/-2 Memória kapacitás Menü szervezés Választási opciók 2 mp szabály Reagálni kell a rendszernek Homokóra 3 kattintás Ha nem kapja meg elpártol Lehet több bizonyos feltételek mellett Hol Honnan Hová Pareto elv 20 % -> 80 % Meghatározni Jól kidolgozni
Ajánlott könyv: Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha: User Interface Design and Evaluation
Google könyv formátum
4. előadás:
Aranyszabályok 1. Konzisztenciára 2. Shortcuts 3. Hasznos visszajelzések 4. Értelmes végű párbeszédek Aranyszabályok II. 5. Egyszerű hibakezelés 6. Undo 7. Írányítás érzése a felhasználónál 8. Csökkentsük a rövid idejű memória terhelését Fitts törvénye Vegyük figyelembe tervezéskor Fordított piramis Íroi stílus eredetileg Konkluzió elöl Többi hátul quick'n'dirty-solutions Éppen megfelelő Nem fogja a legjobbat megkeresni graceful degradation Ha valami nem elérhető Csökkentett mód használható legyen Walk-Up-And-Use Design Egyszeri felhasználók kiszolgálása Ha elsőre nem sikerül, nem tér vissza? Cliffhanger-Effect (Zeigarnik-Effekt) Bizonytalanságot nem szereti az ember. Hirdetők kihasználják Széles körnek szóljon Sok fajta képességű felhasználó Sok féle igény Kezelhető információ mennyiség Kognitív terhelés Formok kitöltése Színek Színek nélkül is értelmes maradjon a tartalom Színtévesztők (www.vischeck.com) Hang és audió Egyenértékű alternatíva Hibajelzés zajos környezet Tiszta nyelvezet Felhasználói körnek megfelelő Udvarias Több szintű kommunkiáció Struktúra Struktúra helyes használata Azonos feladatokra azonos struktúra Táblázatok Időben változó elemek Engedjük, hogy a felhasználó megállítsa Növeli a kognitív terhelést Elvonja a figyelmet Informatív is lehet Hibakezelés Visszavonható Értelmes hibaüzenetek Szoftverek minősége Funkcionalitás Megbízhatóság Használhatóság Hatékonyság Karbantarthatóság Hordozhatóság (ISO 9126) Használhatóság Érthetőség Tanulhatóság Működtethetőség Használhatóság Quesenberry (2003) The Five Es Effective, Efficient, Engaging, Error tolerant Easy to learn Használhatóság Eredményes teljes és pontos ==> elérje a célját Hatékony gyors, (pontos) Megnyerő, kellemes stílus, megelégedés Hibatűrő megelőzés kijavítás Könnyen tanulható kezdeti állapot elmélyülés
5. előadás:
Kiértékelés Miért? Diagnosztikus, hibakereső kiértékelés Mérés típusú kiértékelés Kiértékelés korai fázisban Felhasználói követelmények ellenőrzése Előrejelzése a használhatóságnak Kiértékelés a későbbi fázisokban Majdnem kész rendszeren Felhasználói igényekkel mennyire találkozik a UI Az itt felfedezett dolgok már kevésbé kerülnek be az aktuális tervezésbe Következő verzióba, vagy upgrade-be Végeredmény Elvárásoknak megfelelő eredmény Nem biztos eredmény Elvárásokkal nem találkozó eredmény Megválaszolandó kérdések Mi a célja a kiértékelésnek? Milyen adatokat kell összegyűjteni? Mit kell tesztelni? Milyen megkötések vannak? Milyen felhasználókat válasszak? Milyen folyamatokkal értékeltessek ki? Hol értékeltessek ki? The Five Es Múzeum Adatok Mennyiségi Minőségi Peremfeltételek Pénz Idő Elérhető eszközök Elérhető tesztelők, beszervezés költsége Elérhető kiértékelők Dokumentálás Nem hosszú De le kell írni Csapat többi tagja is informálva legyen Ki értékeljen ki? Ki a valódi felhasználó? Egyedül vagy párban? Hány tesztelő kell? Tartalék tesztelők Ösztönző eszközök Toborzó átvilágító Tesztelő típusok Kollégák hasonló rendszeren Kollégák ismeretlen rendszeren Családtagok, barátok Valódi felhasználók Segítők, nonprofit szervezetek Időbeosztás Mennyi idő legyen? kb. 30-90 perc /menet Időbeosztás tartalékokkal Feladatok előkészítése Feladatok Főbb funkciók Feladok amik a felhasználóknak fontosak Új elemek Kritikus elemek Marketing szempontból fontos részek Tervezéskor is használt szcenáriók Kitalálás: kiértékelő v. tesztelő Hol? Helyszíni valós környezet Kontrollált környezet pontosabb infó Adatok gyűjtése Loggolás Beszélgetés Jegyzetelés Interjú tesztelés után Kérdőívek Videó Audió Szemkövetés Mi van, ha nem egyezik bele? Előkészületek a kiértékeléshez Személyek Betanító Dokumentáló Technikus Megfigyelők Házigazda Toborzó Az egyszemélyes kiértékelő Előkészületek Menetrend írása Beleegyező nyilatkozatok Próba teszt Adatok elemzése Adatok összegyűjtése Összesítés, statisztikai elemzések Használhatósági problémák azonosítása Értékelés felhasználók tulajdonságát figyelembevéve Ajánlott változtatások ==> Kiértékelési beszámoló
6. előadás:
Vizuális interfész Témakört érintő szabványok Emberi érzékelés Érzékszervek csatornakapacitása Emlékezés, memória LTM STM Információk eloszlása Vízuális interfész Képernyők Kijelzők Látás tulajdonságai Pálcikák (rods) kb. 120 millió csapok(cones) kb. 8 millió Színfelbontás x-y Felbontás PC Hordozható eszközök HD Gyengénlátok Több monitor Növeli a hatékonyságot (10-42%) Csökkenti a hibák számát (20%) Segíti a párhuzamos tevékenységeket Adatok átvitele alkalmazások között Segíti a párhuzamos kommunkiációt Összehasonlítások Hátrányok Könnyebb figyelemelterelés Technikai gondok (lassulás) Több helyet foglal az asztalon, újra kell szervezni a munkát Költség Túl sok hely -> ellentétes hatás 3D látás 3D Szemüveges Vörös-cyan Polarizált Aktív zár Szemüveg nélküli Paralaxis Holografikus Színszűrés Keskeny sávú szűrő Polarizált IMAX 3D (2 projektor) Real D (1 projektor) Fejre erősíthető monitor Sebesség és pontosság Fitts’s law Menüsávok szerkesztése Pop-up menü Kurzor bal középen Szélesebb Határolt Mutató eszközök tulajdonságai Billentyűzetek Érzeti interfész Nyomás-tapintás (mechanikai) Hideg-meleg (hőmérsékleti) Fájdalom Mechanikai Nyomás Tapintás Vibráció Bizsergetés, csiklandozás (Tickle) Érzeti intefész játékhoz Érinthető hologram Gesztus interfész Természetes Kéz és ujjak mozgását Arc mozgást Web funkciók Kesztyűk Wii Arc követés Érzelem detektálás Mozgási interfész Locomotion interface A mozgás a virtuális és a valós térben is Project Natal
Ajánlott könyv: Philip Kortum: HCI Beyond the GUI: Design for Haptic, Speech, Olfactory, and Other Nontraditional Interfaces
Elsevier
- Project Natal
- Motion Activated Headphones
- 3rd Space Vest
- Virtual Laser Keyboard
- Touchable Holography
- First Commercial Motion Capture MIDI Controller
- Projection-Based Olfactory Display
- Data Gloves
7. előadás:
Hang és beszéd Beszédlánc Beszéd Hangok F0 Formánsfrekvenciák Időszerkezetek Hallás Elfedési jelenségek Időbeni Frekvenciabeli Hanglokalizáció alacsony-magas Intenzitás Fejmozgás Látás Kódolók Szabványos Nem szabványos Beszéd és zene kódolók Minőség Késleltetés Késleltetés-ingadozás Csomagvesztés Sávszélesség Multimodális Több modalitás Előnyök Hátrányok Beszédszintetizátorok Prozódia F0, intenzitás, időtartam Intonáció Hangsúlyok Szünetek Beszédfelismerők Barge-in Kulcsszó Diktálás Izolált szavas Beszélő független Nem verbális audio Háttérzene Környezeti zene Cég arculat Esemény jelző Határoló jel Telefon Felhasználói környezet Meg kell határozni Tervezéskor figyelembe kell venni Pl: Mobil <=> vezetékes Otthoni, bárhol Menü Szintek száma Mentális terhelés Konzisztens Megszakítható, nem megszakítható Ábrázolás: Fa Folyamatábra Promptok megtervezés Prompt Felvételi körülmények Felolvasási segédlet Szünetek, tagolás Hangsúlyok jelölése Teljes mondatok Bemondó választás Megfelelő környzetben kell meghallgatni Felolvasási lista Nagy betűméret 1,5-es vagy dupla sortávolság Rendezett szövegelrendezés Promptok mindig egy lapon Számozott oldal Nem szabad összetűzni Felolvasások Max 4 óra naponta Azonos napszakokban Ital Szünetek Rákészülés, referencia Használat szerint Ritkán Gyakran 1-szer Időköz Bonyolultságát Segítségek számát Példák Egyedi működés Felhasználó specifikus működés Azonosítás Egyéni beállítások Személyes ügynök DTMF-felismerő Előnyök, hátrányok Megerősítések Implicit Explicit Akusztikai arculat logo egyszerűsített logo szlogen névjegykártya levélpapír boríték jegyzettömb mappa kiadványborító üdvözlőlap hirdetési típusterv prospektus szórólap éves jelentések ügyviteli nyomtatványok könyvek, évkönyvek, újságok ajándéktárgy kitűzők, stb.
Ajánlott könyv: Michael H. Cohen, James P. Giangola, Jennifer Balogh: Voice User Interface Design
Google könyv formátum
- WERSÉNYI GYÖRGY: Virtuális hangtérszimulációés a binaurális technológia
- Beszédinformációs rendszerek (Beszédtechnológiai alapismeretek CD)
- Demók
8. előadás:
WEB 2.0, szemkövetök, esettanulmányok
9. előadás:
Keresöoptimalizálás, W3C WAI, HTML5
10. előadás:
HTML5, reszponzív felhasználói felületek
11. előadás:
Mobil eszközök, natív és platform független fejlesztés
12. előadás:
DEMO: Google Android natív fejlesztés, HTML5 alapú reszponzív felület, PhoneGap
13. előadás:
Feladat bemutatás
1. gyakorlat:
A gyakorlati feladatok ismertetése, feladatválasztás, csoport alkotás fóliák
2. gyakorlat:
Hallgatói beszámolók
3. gyakorlat:
Tervezés: Időjárás előrejelző alkalmazás Win8-ra Hasonló honlapok, hasonló Win8 alkalmazások metnet.hu oldal elemzése és újratervezése Dizájn tervek Felhasználói igényfelmérés "Időjárás mindenkinek" Win8 alkalmazás iteratív fejlesztésének bemutatása Többnyelvü változat
4. gyakorlat
Grafikus felhasználói interfészek Fitts törvényének levezetése és alkalmazása
5. gyakorlat
Kiértékelés (Időjárás mindenkinek) Kiértékelés (AALFred) MetroMusicShufller
6. gyakorlat
Folyamatos beszédü diktáló rendszer Large Vocabulary Continuous Speech Recognition (LVCSR) fogalma Diktálórendszer szerepe Elvárások Lehetséges felhasználók Müködési környezet Megoldási lehetőségek: ki/bekapcsolás, pozicionálás, javítás
7. gyakorlat
Feladat bemutatás