T Käyttöliittymäsuunnittelu. T Vuorovaikutustekniikka

Transkriptio

1 T Käyttöliittymäsuunnittelu T Vuorovaikutustekniikka

2 T Käyttöliittymäsuunnittelu Teknillinen korkeakoulu Käyttöliittymät ja käytettävyys

3 T Vuorovaikutustekniikka prof. Petri Vuorimaa Tietoliikenne- ja multimediatekniikan laboratorio

4 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 (SIGCHI 92)

5 Vuorovaikutteisten järjestelmien suunnittelun konteksti T / T ACM SIGCHI Curricula for Human-Computer Interaction

6 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

7 T-121 Käyttöliittymät ja käytettävyys Usability Engineering T Johdatus käyttäjäkeskeiseen tuotekehitykseen (1) T Käyttäjäkeskeisen tuotekehityksen harjoitustyö (3) T Käyttäjäkeskeinen suunnitteluprojekti (4-8) Suunnittelu ja Toteutus Testaus Seuranta T Käyttäjäkeskeinen konseptisuunnittelu (4) T Käyttöliittymäpsykologia (2) Vaatimusmäärittely T Käyttöliittymäsuunnittelu (1) T Käyttöliittymän suunnitteluprojekti (2) T Käytettävyyden yksilöllinen opintojakso T Käyttöliittymien ja käytettävyyden seminaari T Käyttäjäkeskeisen tuotekehityksen lopputyöseminaari User Interface Engineering T Käytettävyyden arviointi (4)

8 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

9 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

10 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

11 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

12 Kurssikirja T 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: Painos: 3 RD ED Sivumäärä: 638 AMAZON: $63.00 Availability: Usually ships within 24 hours.

13 Kurssimateriaalia Task-Centered User Interface Design - A Practical Introduction by Clayton Lewis & John Rieman T Kurssikirja: D. Olsen: Developing User Interfaces

14 T yhteystiedot Opettaja www-sivut Yhteydenotot

15 T Käyttöliittymän suunnitteluprojekti T harjoitustyöosuus T kurssin harjoitustyökurssi Toteutetaan T kurssin sisältöä noudatellen käyttöliittymä erikseen annetusta aiheesta T rajoitettu osallistujamäärä Alkaa Klo 12 salissa T3 pääassistentti DI Mika P. Nieminen sähköposti:

16 1 Johdanto

17 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)

18 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ä

19 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

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

21 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

22 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

23 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)

24 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?

25 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

26

27 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)

28 HP 560C

29 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

30 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: Model Data Model Number HP Introduction Date March 1987 Original MSRP $2,395 Replaces Model Replaced by Model HP LaserJet Plus HP LaserJet III

31 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

32 Nokia i 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

33 Anestesiamonitori Datex-Ohmeda S/5 Anesthesia Monitor Käyttöliittymän osa myös plug-in instrumentit!

34 Lämpötilakalibraattori Beamex Temperature Calibrator TC305

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

36 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)

37 Ensi kerralla Käyttöliittymän suunnitteluprosessi ja Vaatimusmäärittelyt käyttöliittymäsuunnittelussa