T-121.300 Käyttöliittymäsuunnittelu T-111.310 Vuorovaikutustekniikka
T-121.300 Käyttöliittymäsuunnittelu Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys Marko.Nieminen@hut.fi http://www.soberit.hut.fi/t-121/t-121.300
T-111.310 Vuorovaikutustekniikka prof. Petri Vuorimaa Tietoliikenne- ja multimediatekniikan laboratorio Petri.Vuorimaa@hut.fi http://www.tml.hut.fi/~pv
50% suunnitteluajasta menee käyttöliittymäsuunnitteluun 48% koodista kohdistuu käyttöliittymään Myers B.A. & Rosson M.B. in Survey on User interface programming in Human Factors in Computing Systems 1992. (SIGCHI 92)
Vuorovaikutteisten järjestelmien suunnittelun konteksti T-121.300 / T-111.310 http://www.acm.org/sigchi/cdg/figure_1.gif ACM SIGCHI Curricula for Human-Computer Interaction
Käyttöliittymä- ja vuorovaikutussuunnittelu - osa järjestelmäsuunnittelua Järjestelmäsuunnittelun tavoitteita Oikea toiminnallisuus Luotettava ja turvallinen toiminta, oikea tieto! Käytössäolo (käytettävyys -- availability) Standardointi, integrointi, konsistenssi, siirrettävyys
T-121 Käyttöliittymät ja käytettävyys Usability Engineering T-121.100 Johdatus käyttäjäkeskeiseen tuotekehitykseen (1) T-121.110 Käyttäjäkeskeisen tuotekehityksen harjoitustyö (3) T-121.800 Käyttäjäkeskeinen suunnitteluprojekti (4-8) Suunnittelu ja Toteutus Testaus Seuranta T-121.700 Käyttäjäkeskeinen konseptisuunnittelu (4) T-121.200 Käyttöliittymäpsykologia (2) Vaatimusmäärittely T-121.300 Käyttöliittymäsuunnittelu (1) T-121.310 Käyttöliittymän suunnitteluprojekti (2) T-121.850 Käytettävyyden yksilöllinen opintojakso T-121.900 Käyttöliittymien ja käytettävyyden seminaari T-121.950 Käyttäjäkeskeisen tuotekehityksen lopputyöseminaari User Interface Engineering T-121.600 Käytettävyyden arviointi (4)
Käyttöliittymäsuunnittelun aihealueita (Booth 1989) Ohjelmistosuunnittelu Tekoäly Kognitiotiede Sosiaalipsykologia Organisaatiopsykologia Vuorovaikutusvälineet (I/O) Mentaaliset mallit Tehtäväanalyysi Suunnittelutyö Organisatoriset vaikutukset Tietokonelingvistiikka Kognitiivinen psykologia Matematiikka Ergonomia Sosiologia
Sisältö ja tavoite pähkinänkuoressa Kurssilla esitellään erilaisia käyttöliittymätekniikoita, mutta erityisesti perehdytään kuitenkin tietokoneessa toimivan graafisen käyttöliittymän ja vuorovaikutteisen toiminnallisuuden toteuttamiseen Jonkin verran käyttäjäkeskeisen suunnittelun metodologiaa ja jonkin verran ohjelmistotekniikkaa Kurssin tavoitteena on opettaa/oppia perusteet käyttöliittymän ja sen vuorovaikutteisten ominaisuuksien suunnittelusta ja toteutuksesta toiminnalliseksi prototyypiksi
Kurssin tavoite Oppia perusteet käyttöliittymän suunnittelusta ja toteutuksesta toiminnalliseksi prototyypiksi Esitellä eri tyyppisiä käyttöliittymä- ja vuorovaikutusratkaisuja sekä -arkkitehtuureja Vuorovaikutteisten järjestelmien toteutuksen tekniikkaa Opettaa systemaattista metodologiaa tuottaa kuvauksia ja toimivia prototyyppejä käyttöliittymästä teknisen toteutuksen perustaksi Esitellä käyttöliittymäkehitysympäristöjä Esitellä visuaalisen suunnittelun perusperiaatteita
Luentojen aiheet Käyttöliittymän käsite, erilaiset käyttöliittymätyypit Käyttöliittymäsuunnittelun perusta käyttäjäkeskeinen suunnittelu Käyttöliittymäsuunnittelun menetelmiä ja kuvaustekniikoita [UML - use case] Erilaisia käyttöliittymäkehitysympäristöjä Käyttöliittymien toteuttamisen arkkitehtuuriratkaisuja ja teknisiä perusteita Visuaalinen suunnittelu Vuorovaikutuksen ja graafisen käyttöliittymän elementit, ikkunointiympäristöt Käyttöliittymäsuunnittelun tulevaisuutta
Kurssikirja T-121.300 Designing the User Interface - Strategies for Effective Human- Computer-Interaction Shneiderman, Ben Luvut: 2, 3, 5, 7, 8, 11, 13 (sivutaan myös 1, 14) Yhteensä n. 175 sivua. Kirja soveltuu hyvin taustamateriaaliksi myös muille käyttöliittymiä käsitteleville kursseille. Akateeminen kirjakauppa: Hinta: 410,00 mk / 68,96 ISBN: 0-201-69497-2 Painos: 3 RD ED Sivumäärä: 638 AMAZON: $63.00 Availability: Usually ships within 24 hours.
Kurssimateriaalia Task-Centered User Interface Design - A Practical Introduction by Clayton Lewis & John Rieman http://hcibib.org/tcuid T-111.310 Kurssikirja: D. Olsen: Developing User Interfaces
T-121.300 yhteystiedot Opettaja Marko.Nieminen@hut.fi www-sivut http://www.soberit.hut.fi/t-121.300/indexfi.html Yhteydenotot t121300@soberit.hut.fi
T-121.310 Käyttöliittymän suunnitteluprojekti T-111.310 harjoitustyöosuus T-121.300 -kurssin harjoitustyökurssi Toteutetaan T-121.300 -kurssin sisältöä noudatellen käyttöliittymä erikseen annetusta aiheesta T-121.310 rajoitettu osallistujamäärä Alkaa 24.9. Klo 12 salissa T3 pääassistentti DI Mika P. Nieminen sähköposti: t121310@soberit.hut.fi http://www.soberit.hut.fi/t-121.310/indexfi.html
1 Johdanto
Miksi suunnitella käyttöliittymiä? Miksi ei vain hack-and-code? Teollinen ja kaupallinen käyttö tehokkuus! Esim. tilaus- ja laskutusjärjestelmät, toiminnanohjausjärjestelmät, pankkijärjestelmät Luovan toiminnan tuki esim. data-analyysit, tiedon visualisointi, Koti ja viihde yksinkertaisuus, tarkoituksenmukaisuus, helppous, tyytyväisyys Joskus jopa ihmiselämä voi olla riippuvainen teknisestä järjestelmästä ja sen käytöstä lääketieteelliset instrumentit, lennonjohtojärjestelmät, ydinvoimalat (Shneiderman 1998)
Käyttöliittymä syötteet (input) informaatiovirta Käyttäjä Järjestelmän toiminnallisuus tulosteet (output) Inhimillinen käyttäjä -osajärjestelmä liittymä/rajapinta (interface) käyttäjäliityntä Tietokone/sovellus -osajärjestelmä
Vuorovaikutustilanne Toiminnan seitsemän vaihetta; tiedonsiirtoprotokolla 1 Tavoitteet 2 Aikomus toimia 7 Tulkintojen arvioiminen 3 Toimenpideketju 6 Havaintojen tulkitseminen 4 Toimenpideketjun täytäntöönpano 5 Ulkomaailman tilan havainnoiminen Norman 1986 VÄLINE / ULKOMAAILMA
Käyttöliittymäsuunnittelussa on periaatteessa vain kaksi asiaa, jotka määrittävät käyttöliittymän toimivuuden: tiedonsyöttö ja tulostus (palaute). Vuorovaikutusvälineet on valittava tarkoituksenmukaisesti. Tekniset mahdollisuudet kuitenkin rajaavat asiaa kovasti.
Käyttöliittymäsuunnittelu Vuorovaikutteisten laitteiden ja järjestelmien suunnittelua, toteutusta ja arviointia siten, että suunnittelun lopputulos on käyttäjän näkökulmasta sopiva ja käyttökelpoinen Suunnittelussa otetaan huomioon vuorovaikutustilanteeseen merkitsevästi vaikuttavat asiat
Käyttöliittymäsuunnittelua: Perusteiden hallinta ihmisen ja laitteen yhdistetty suorituskyky ihmisen ja laitteen vuorovaikutuksen rakenne Tekeminen algoritmit ja käyttöliittymän rakentaminen Tekemisen hallinta suunnittelutyön organisointi siten, että käyttäjä tulee huomioiduksi käyttöliittymän määrittely- ja toteutusprosessit Johtaminen suunnitteluvaihtoehtojen puntarointi, valinnat ja päätökset, tradeoffs
Käyttöliittymän tasot Teknis-fysiologis-ergonominen (technological ) Käsitteellis-havainnollinen (conceptual model) Toiminnallis-kontekstuaalinen, käyttötilanne (work process or use situation) (Kuutti 1999, Kuutti & Bannon 1991)
Käyttöliittymä rakentuu aistien varaan Näkeminen; kirjoittaminen ja osoittaminen käsin Kuuleminen; puhuminen Tunteminen; tärinä, voima tms. Haistaminen? Maistaminen? Kuudes aisti? Ymmärtäminen! Miten huomioimme nämä tasapainoisesti ja tarkoituksenmukaisesti käyttöliittymän suunnittelussa?
Erilaisia käyttöliittymätyyppejä: GUI Perinteisesti tietotekniikkaympäristössä käyttöliittymällä ajatellaan tietokoneen graafista käyttöliittymää, tämä on kuitenkin vain yksi käyttöliittymätyyppi
Käyttöliittymätyyppejä Tehtävä: pohdi vierustoverisi kanssa, millaisia käyttöliittymätyyppejä on olemassa. fyysiset käyttöliittymät rajatulla palautteella (ledit tms.) muutaman rivin tekstinäytöt (yl. lcd, mahd. täydennettynä joillakin symboleilla) pienet graafiset näytöt, näppäimistö pienet graafiset näytöt, kosketusnäytöt tekstipohjaiset isompaan näyttöön perustuvat käyttöliittymät (vanhemmat tietokoneet, usein nykyisin videot tv:n kautta)
HP 560C http://www.cit.rcc.on.ca/hf100/hf100m2.htm
HP Laserjet Series II READY + FONT = 01* - ONLINE CONTINUE RESET PRINT FONTS TEST FORM FEED ENTER RESET MENU MENU HP Laserjet Series II Front Panel
HP Laserjet Series II To print lots of copies a document on a Hewlett Packard LaserJet II without waiting hours, do this: On the LaserJet control panel, press the MENU Button. Use the plus and minus keys to set the number of copies you want. Press the ENTER RESET MENU Button. Press the MENU Button repeatedly to scroll to "00 READY." Press the CONTINUE RESET Button and hold until you see "07 RESET." Now whatever image is sent to the printer's memory will be printed as many times as you want. This works because the print driver doesn't tell the Laser Jet how many copies to print, so it doesn't override the "Number of Copies" setting when it prints. Note: Remember to reset the number of copies to "one" when you are finished, because the printer retains the settings even when it's powered down. Other error messages, see: http://www.uktechsupport.f9.co.uk/hp/faq/laserjet.htm Model Data Model Number HP 33440 Introduction Date March 1987 Original MSRP $2,395 Replaces Model Replaced by Model HP LaserJet Plus HP LaserJet III http://www.printerworks.com/catalogs/sx-catalog/sx-hp_laserjet-ii.html
Tietokone vs laite Tietokoneen käyttöliittymäsuunnittelussa otetaan usein kantaa vain näytöllä näkyviin asioihin, vuorovaikutuslaitteiden suunnittelua ei juurikaan tehdä esimerkki: valvomojärjestelmät Sulautetun laitteen käyttöliittymäsuunnittelusssa otettava huomioon esim piirisuunnittelu (koko), näppäinasettelu, näytön sijainti ja etäisyys näppäimistöstä esim Nokia 2110 Laitteiden käyttöliittymäsuunnittelussa saatetaan joutua pohtimaan mekaniikkaa enemmänkin syöttö- ja tulostuslaitteet eivät ole tietokonemaisesti valmiiksi määrättyjä instrumentointi
Nokia 2110 2110 http://www.mobileworld.org/nokia-faq-3.html 2110i Rajoituksia näpäinten sijoittelulle näytön ja piirilevyn liitännän vuoksi: käyttäjien vaikea hahmottaa Menu - tekstin sidosta näppäimeen. Ratkottavissa esim GESTALT -sääntöjen avulla Wertheimer 1923 Wundt 1865
Anestesiamonitori Datex-Ohmeda S/5 Anesthesia Monitor http://www.datex-ohmeda.fi/products/monitoring_am_b.htm Käyttöliittymän osa myös plug-in instrumentit!
Lämpötilakalibraattori Beamex Temperature Calibrator TC305 http://www.beamex.com/products/tc305.htm
Beamex Multifunction Calibrator MC5 The logical, user friendly interface makes the calibrator very easy to use. The large graphical display guides the user in different languages and displays results both numerically and graphically.
Sovellusriippumaton lähestymistapa: käyttäjäkeskeinen suunnitteluprosessi 1: Hahmottele tuotekonsepti 2: Selvitä käyttäjien vaatimukset 3: Suunnittele käsitteet ja käyttöliittymän perusosat 4: Iteroi; tarkenna ja paranna 5: Toteuta käyttöliittymä 6: Suunnittele tuki julkistukselle (LUCID; Shneiderman 1998)
Ensi kerralla Käyttöliittymän suunnitteluprosessi ja Vaatimusmäärittelyt käyttöliittymäsuunnittelussa