Käyttöliittymien perusteet: Johdanto Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Tälläkin kurssilla kalvoista osan on tehnyt Jenni Anttonen syksyllä 2009. 1 Tarjolla tänään Kurssin käytännön järjestelyt Käyttöliittymät ja vuorovaikutussuunnittelu Käyttäjäkeskeisen suunnittelun perusteet Osin kertausta Jovuot-kurssilta 2 Saila.Ovaska@uta.fi 1
UI-kurssin tavoitteet Kurssilla perehdytään yksityiskohtaisesti graafisten käyttöliittymien suunnittelun ohjeisiin. Kurssin suoritettuaan opiskelija osaa suunnitella näyttöjä, opastusta ja ohjelman suorituksen etenemistä erilaisissa käyttötilanteissa ja arvioida ratkaisuvaihtoehtoja. Opiskelija tuntee syöte- ja tulostusmodaliteettien mahdollisuuksia ja haasteita 3 Opettajat Kurssin vastuuope Saila Ovaska, saila.ovaska@uta.fi Kaikki kurssia koskeva kirjeenvaihto Ylläpitää kurssin kotisivua: http://www.uta.fi/sis/tkt/ui/ Harjoituksia vetävät lisäksi Minna Heinonen Lauri Immonen Kristiina Niskala Eri viikkoina ryhmissä on eri opettajat Tuntiopettajat myös ohjaavat harjoitustöitä ja antavat palautetta suunnitteluharjoituksista 4 Saila.Ovaska@uta.fi 2
Luennot ja harjoitukset Luennot salissa B1100 Maanantaisin klo 14-16 Keskiviikkoisin klo 12-14 Luennot ajalla 24.10.-7.12.2011 ei luentoa maanantaina 5.12. Viikkoharjoitukset salissa B1084 tiistaisin 14-16 tiistaisin 16-18 keskiviikkoisin 10-12 torstaisin 10-12 torstaisin 12-14 Harjoitukset ajalla 1.11.-13.12.2011 Itsenäisyyspäivänä ti 6.12. ei ryhmiä, vaan tiistain harjoitusryhmät pidetään vasta seuraavalla viikolla Tentti pe 16.12.2011 klo 12-16 ls D10ab 5 Kurssilla käytössä yliopiston Moodle https://learning.uta.fi Moodleen kirjaudutaan peruspalvelutunnuksella UI-kurssille (ensimmäisen rekisteröitymiskerran) kurssiavain: UI_moo_2011 Suora linkki kurssille: https://learning.uta.fi/course/view.php?id=4055 Suunnitteluharjoitukset jätetään Moodleen tarkistettavaksi ja niistä saa palautteen Moodlen kautta Kiireelliset ilmoitusasiat välitetään Moodlessa kurssin news-palstan kautta (jolloin saat uutisen Moodleprofiilisi asetusten mukaan sähköpostissa) Kurssin kotisivulla http://www.uta.fi/sis/tkt/ui/ jaetaan mm. viikkoharjoitukset ja luennot 6 Saila.Ovaska@uta.fi 3
Kurssisuoritukseen kuuluu Luennot Luennoilla läsnäolo vapaaehtoista Käsitellyt asiat hallittava Kaikkea materiaalia (esim. videot ja demot, osa kalvoista) ei ole saatavilla verkossa Viikkoharjoitukset 50% harjoitustehtävistä pakollisia (10 tehtävää) Suunnitteluharjoitukset Pakollisia 2/3 Demot Läsnäolo demoissa ei ole pakollista, mutta demot ovat kiinnostavia joten tule mukaan! Aktiivisuuspisteitä saa. Demopäivä(t) tarkentuu myöhemmin Tentti Osasuoritukset ovat voimassa lukuvuoden 2011-12 mutta eivät enää syksyllä 2012. 7 Viikkoharjoitukset Harjoitustehtävät tehdään etukäteen ja ratkaisut käydään läpi harjoitustilaisuudessa Tehtävissä tarvitsee piirtää osia käyttöliittymistä. Voit piirtää käsin eikä ratkaisujen tarvitse olla puhtaaksikirjoitettuja, mutta pisteen saadaksesi sinulla pitää olla edes se raakaversio mukana! Harjoitustilaisuudet ovat keskustelevia, varaudu esittelemään oma ratkaisusi ja kommentoi muitten ehdotuksia Pisteiden saaminen edellyttää paikallaoloa harjoituksissa Esim. sairaustapauksessa vastaukset voi lähettää sähköpostilla vastuuopelle. Mielellään ennen ensimmäistä harjoitusryhmää (ti 14). Kurssisuoritukseen vaaditaan vähintään 10 harjoituspistettä ja kolme harjoitusläsnäoloa. Tehtäviä yhteensä n. 20-22. Tämän yli menevästä aktiivisuudesta palkitaan tentissä aktiivisuuspistein, jotka lisätään tenttipistemäärään Käytännössä harjoituksia tehneet menestyvät tentissä muutenkin Viikkoharjoitus 1 määräaika 27.10. klo 10 (aamulla). Ohjeet ja palautus Moodlessa. Harjoitellaan lomakesuunnittelua ja suunnitteluharjoitusraportin tekemistä! 8 Saila.Ovaska@uta.fi 4
Suunnitteluharjoitukset Kurssiin kuuluu 3 suunnitteluharjoitusta viikkoharjoitustehtäviä laajempia suunnittelutehtäviä Kaksi suunnitteluharjoitusta on pakollista tehdä! Alustava palautusaikataulu: torstai 10.11. suunnitteluharjoitus 1 torstai 1.12. suunnitteluharjoitus 2 torstai 22.12. suunnitteluharjoitus 3 Vastaukset pisteytetään (max 5 tai 7p) Myöhästymisestä sakotetaan 25% /päivä Ratkaisu voidaan myös hylätä Suunnitteluharjoituspisteet vaikuttavat kurssiarvosanaan 9 Kurssimateriaali Luentokalvoista osa, harjoitustehtävät sekä linkkejä muuhun materiaaliin on saatavilla kurssin verkkosivuilla http://www.uta.fi/sis/tkt/ui/ Kalvoilla ja harjoituksissa käsitellyt asiat tulevat tenttiin Kurssimateriaali perustuu Oppikirjoihin Erillisiin (tutkimus)artikkeleihin Tyylioppaisiin 10 Saila.Ovaska@uta.fi 5
Hae käyttöösi GUI-tyyliohjekirjat GUI-tyyliohjeita saatavilla PDFtiedostoina Apple Human Interface Guidelines UXGuide (Windows 7 ja Vista) Windows User Experience (Windows XP) Myös muita tyylioppaita käytetään apuna Ja erilaisia design pattern -sivustoja 11 Käyttöliittymät ja vuorovaikutussuunnittelu 12 Saila.Ovaska@uta.fi 6
Käyttöliittymä Suunnittelija kommunikoi käyttäjälle käyttöliittymän kautta. Käyttäjä voi tulkita käyttöliittymän eri tavoilla. Lähde: Norman (1988). The Design of Everyday Things. 13 Vuorovaikutus Erilaisia vuorovaikutustapoja keskustelutyylit (komentokieli, valikot, suorakäyttö, point & click, ) kertaa JoVuoT-kurssilta; UI-kurssilla syvennetään jo opittua Syötteet (input) Tulosteet (output) Vuorovaikutus voi tapahtua käyttäen erilaisia syöte- ja tulostemodaliteetteja 14 Saila.Ovaska@uta.fi 7
Vuorovaikutustyypit toisella tapaa Vuorovaikutus tietokoneen kanssa voi tapahtua koneelle komentoja antaen (instructing) keskustelevasti (conversing) kohteita manipuloimalla (manipulating) kokeillen ja tutkien (exploring) Alkuperäinen lähde: Sharp, Rogers & Preece, Interaction Design: Beyond Human-Computer Interaction. Wiley, 2007. (kirjan kohta 2.3.4) (vuoden 2010 painoksessa kohta 2.5) Kuvien lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 15 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 16 Saila.Ovaska@uta.fi 8
Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Press 1 for customer service. Press 3 for store hours. lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 17 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 18 Saila.Ovaska@uta.fi 9
Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 19 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Object-based: Kohteena olevaan objektiin keskittyen lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 20 Saila.Ovaska@uta.fi 10
Vuorovaikutuksen suunnittelu Achieving goals Mitä on suunnittelu? within constraints. Monia versioita ja iterointia Suunnitteluideoiden hyvyyden arvioimista ja niistä keskustelemista ei yhtä parasta ratkaisua vaan well, it depends Suunnittelu on kompromisseja Lähtökohtana tulisi olla käyttäjän tehtävien ja tavoitteiden ymmärtäminen osana isompaa käyttökontekstia, välineitä ja tehtäviä UI-kurssilla kuitenkin yleensä pieniä suunnittelutehtäviä, kurssin aikataulussa hallittavia Usein lähtökohtana huonosti toimiva ratkaisu, jota parannetaan Älä silti unohda miettiä tilannetta käyttäjän näkökulmasta 21 Vuorovaikutussuunnittelun vaiheet Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja ITEROINTI Muokattu lähteestä: Preece et al. 2007 Interaction design. 22 Saila.Ovaska@uta.fi 11
Vuorovaikutussuunnittelu Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja 23 Ymmärrä ongelma-avaruus Käyttäjien tarpeiden selvittäminen Haastattelu Havainnointi Tilannetutkimus Kyselytutkimukset Aineistosta pyritään löytämään suunnittelun kannalta tärkeät tarpeet ja vaatimukset Suunnittelija työstää näistä suunnitteluideoita Oman ymmärryksen konkretisointi ja havainnollistaminen muille (suunnittelijoille, käyttäjälle, kurssin opettajille) edesauttaa tavoitteen iteratiivista määrittelyä 24 Saila.Ovaska@uta.fi 12
Kuvaa käyttäjien tarpeet Käyttäjän tuntemiseksi hankittu aineisto on laajaa ja monitahoista Tarvitaan yksinkertaisia havainnollistuksia, jotka tukevat suunnittelua Menetelmiä muun muassa (lyhyesti esitelty jovuot-kurssilla) Käyttäjäprofiili (user profile) tai persoonakuvaus (persona) Käyttöskenaariot Käyttötavat, käyttötapakuvaukset t. käyttötapauskuvaukset Olennaista miettiä käyttäjän tarpeita realistisesti Skenaariot (pitkä tarinanmuotoinen kuvaus käyttäjän toimista) hajotetaan käyttötapauksiksi 25 Esimerkki: skenaario Esimerkin lähde: Sari A. Laakso & Antti Latva-Koivisto Skenaariot, käyttötapaukset ja päätöksentekokohdat. Helsingin yliopisto, Käyttöliittymät II (syksy 2006) http://www.cs.helsinki.fi/u/salaakso/kl2-2006/kayttoliittymat2-skenaariotkayttotapaukset-paatoksenteko.html 26 Saila.Ovaska@uta.fi 13
Esimerkki: käyttötapaus Lähde: Laakso & Latva-Koivisto 27 Erilaisilla käyttäjillä voi olla samoja tarpeita Sama käyttöliittymä tukee myös esimerkiksi Niiloa: Lähde: Laakso & Latva-Koivisto 28 Saila.Ovaska@uta.fi 14
Esimerkki: käyttötapaus 2 Lähde: Laakso & Latva-Koivisto 29 Esimerkki: käyttötapaus 3 Eri käyttötapauksissa käyttöliittymään vaaditaan erilaista tietosisältöä ja toiminnallisuutta Olennaista tunnistaa erilaiset tarpeet heti suunnittelun alkuvaiheessa Lähde: Laakso & Latva-Koivisto 30 Saila.Ovaska@uta.fi 15
Vuorovaikutussuunnittelu Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja 31 Vuorovaikutuksessa käyttäjän kanssa Käyttäjä voi tulkita käyttöliittymän eri tavoilla nojautuessaan aikaisempaan tietoonsa ja kokemuksiinsa JA käyttöliittymässä näkyvään toiminnallisuuteen ja siitä muodostuviin affordansseihin. Saatu palaute voi vielä muuttaa käsityksiä. Suunnittelijalla ei ole tietoa käyttäjällä olevista malleista. Lähde: Norman (1988). The Design of Everyday Things. 32 Saila.Ovaska@uta.fi 16
Käsitemallin suunnittelu (Conceptual model) Käsitemalli kuvaa abstraktilla tasolla, mitä käyttäjät voivat tuotteella tehdä ja miten sen kanssa ollaan vuorovaikutuksessa Käsitemalli ei ole käyttöliittymän kuvaus vaan se kuvaa järjestelmän yleisen idean Käsitemalli on alkuvaiheessa korkean tason kuvaus järjestelmästä, mutta sen logiikka tulee rakentaa tuotteeseen näkyväksi jotta käyttäjälle muodostuu halutunlainen mentaalimalli Käsitemallin kuvaus sisältää yleensä Keskeiset käsitteet, joita käyttäjä tarvitsee tuotetta käyttäessään käsitteet, niiden ominaisuudet, operaatiot joita niille voi suorittaa, käsitteiden väliset suhteet Vuorovaikutustavat Tuotteen keskeiset metaforat ja analogiat A conceptual model is a high level description of how a system is organized and operates. Johnson & Henderson, 2002 33 Esimerkki Kirjastosovellus Käyttäjän termejä: kirja, tekijä, hylly, hakusana, Kirjaston termejä: nimeke, luokka, asiasana, varaustietokanta Millainen käsitemalli tästä tarjoutuu peruskäyttäjälle? Lähde: Piki-verkkokirjasto 34 Saila.Ovaska@uta.fi 17
Metaforat ja analogiat suunnittelussa Metaforat ja analogiat auttavat käyttäjää hahmottamaan järjestelmän rakennetta ja toimintoja tuttu viittaus auttaa hahmottamaan järjestelmän toimintaa roskakori tarpeettomien tiedostojen tuhoamiseen Toinen esimerkki: Piano Stairs, Tukholma, 2009 http://www.youtube.com/watch?v=2lxh2n0apyw 35 Metaforat ja analogiat suunnittelussa Metaforat ja analogiat auttavat käyttäjää hahmottamaan järjestelmän rakentetta ja toimintoja Tuttu viittaus auttaa hahmottamaan järjestelmän toimintaa Metafora kuvaa jotain rakenteen tai toiminnan osaa esimerkiksi hakukone: ideana kone, joka tekee hakuja, toimii kuitenkin kovin eri tavalla verrattuna mekaaniseen koneeseen yksi metafora ei tyypillisesti toimi koko sovellukselle vaan ainoastaan jollekin sen osalle (esim. ostoskori) Metaforien käyttöön liittyy myös ongelmia, esimerkiksi liian tiukka metaforan noudattaminen käyttäjä ei ymmärrä toiminnallisuutta metaforan takana mahdolliset ristiriidat suunnitteluperiaatteiden kanssa esim. milloin roskakoriin viedyt tiedostot oikeasti tuhotaan levyltä? Estä käyttäjän virheitä 36 Saila.Ovaska@uta.fi 18
Käsitemalli Hyvä käsitteellinen malli mahdollistaa sen, että käyttäjä voi käyttää hyväkseen aikaisempaa kokemustaan ymmärtääkseen järjestelmän perustoimintoja Käsitemalli on myöhemmän suunnittelun lähtökohta The most important thing to design is the user s conceptual model. Everything else should be subordinated to making that model clear, obvious, and substantial. That is almost exactly the opposite of how most software is designed. Liddle, 1996 37 Miksi käsitemalli tarvitaan? Käsitemalli on järjestelmän luonnos Ei taloa suunnitellessakaan mietitä verhojen väriä ennen kuin ikkunoiden paikka on suunniteltu pohjapiirroksessa Käsitemalli kuvaa suunnitelmaa suunnitteluprosessin alkuvaiheessa Orientoidaan suunnittelijoita pohtimaan ja arvioimaan jo suunnittelun alkuvaiheessa kuinka käyttäjät ymmärtävät järjestelmän toimintaa Suunnittelijat eivät ota liian kapeaa fokusta suunnitteluun Suunnittelijoilla on jaettu näkemys, jolloin myöhempien väärinkäsitysten riski pienenee Käsitemallia voidaan kuvata tekstuaalisessa muodossa tai erilaisilla kaavioilla 38 Saila.Ovaska@uta.fi 19
Vuorovaikutussuunnittelu Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja 39 Suunnitteluratkaisujen tuottaminen Suunnittelun vaiheet Suunnittele käyttäjän ja järjestelmän välinen vuorovaikutus Tietosisältö tukemaan käyttäjän tarpeita WWW-palveluissa on suunniteltava myös informaatioarkkitehtuuri Erilaisia kuvaustapoja on paljon (ks. seuraavat kalvot) Laadi eritasoisia prototyyppejä järjestelmän eri osista ja kokeile niitä sekä suunnittelijavoimin että käyttäjän kanssa 40 Saila.Ovaska@uta.fi 20
Informaatioarkkitehtuuri Informaatioarkkitehtuuri on hahmotelma (yleensä) verkkosivuston rakenteesta Määritellään sivuston tarkoitus ja sisältö Määritellään rakenne ja navigaatio Tunnettava käyttäjät! Kuvaustapoja esimerkiksi Sivukartat Rautalankamallit 41 Sivukartta Kuvaa sivuston rakennetta Sen pohjalta voidaan edetä Navigaation suunnitteluun Yksittäisten sivujen suunnitteluun Lähde: http://www.usability.gov/design/sitemap.jpg 42 Saila.Ovaska@uta.fi 21
Rautalankamalli Kuvaa yksittäisten sivujen rakennetta korkealla tasolla Sisällön ja toimintojen määrittely Ei ota kantaa visuaaliseen suunnitteluun Lähde: http://wireframes.linowski.ca/2009/05/balsamiq-mockups-15/ 43 navigointikarttaa Esimerkkejä rautalankamalleista käyttötapakuvaus ruokapaikan etsimisestä Lähde: http://www.behance.net/gallery/wireframes-pitch-for-a-municipal-website/218859 44 Saila.Ovaska@uta.fi 22
Käyttäjän ja järjestelmän välinen vuorovaikutus Suunnittele Käyttäjän ja järjestelmän välinen keskustelutapa Keskustelutyyli Syöte- ja tulostemodaliteetit Konkreettiset keskustelutekniikat Yksittäisten näyttöjen kontrollit ja niiden kytkennät toimintoihin Tiedon esitysmuodot (esim. taulukko, lista, ikoni, ) Suunnitteluratkaisut kuvataan ja dokumentoidaan Käyttöliittymän näyttöjen luonnokset Skenaariot ja käyttötapauskuvaukset tekstimuotoisina 45 Esimerkki: Kuvakäsikirjoitus (Storyboard) Kuvien lähteet: http://alan-dickinson.com/projects/qrtle/process/storyboard.jpg http://leapfrog.nl/blog/wp-content/uploads/2007/12/img_6079.png 46 Saila.Ovaska@uta.fi 23
Kuvakäsikirjoitus voi myös kuvata sovelluksen toimintaa Kuvien lähteet: http://www.mmiworks.net/pics/blog8/09team4storyboard.png http://stavchansky.net/images/feature_ftsstoryboard.jpg 47 Vuorovaikutuksen kuvaaminen Kuvien lähteet: http://www.flickr.com/photos/47388015@n00/3420776361/in/photostream/ http://www.flickr.com/photos/39137620@n06/3613631558/ 48 Saila.Ovaska@uta.fi 24
Esimerkki: näyttöjen luonnokset Hahmotelmiin voidaan lisätä numeroita viitteeksi raportissa oleviin kommentteihin, joissa kuvataan vuorovaikutusta tarkemmin. Lähde: http://www.gliffy.com/examples/wireframes/ 49 Kehitä prototyyppejä Prototyyppi tarkoittaa luonnosta, hahmotelmaa, nähtävissä ja kokeiltavissa olevaa (mutta silti likimääräistä) toteutusta käyttöliittymästä Prototyypit voivat olla staattisia tai vuorovaikutteisia Prototyypin tarkkuustaso vaihtelee tarpeen mukaan Karkeat (low-fidelity) prototyypit Täsmäprototyypit (high-fidelity) Pro to type An original type, form, or instance that serves as a model on which later stages are based or judged. American heritage dictionary What I hear, I forget. What I see, I remember. What I do, I understand. Lao Tse 50 Saila.Ovaska@uta.fi 25
Esimerkkejä prototyypeistä Kuvien lähteet: Moggridge Designing interactions, http://trialrate.com/wp-content/uploads/2009/07/screen-prototype3.png 51 Mihin protoa tarvitaan? Prototyyppi on suunnittelijan työväline se pakottaa ajattelemaan ja konkretisoimaan ideoita Prototyyppi auttaa käyttäjäpalautteen keräämisessä Prototyyppi antaa suunnittelijaryhmälle yhteisen näkemyksen tavoitteesta Prototyyppi voi auttaa myymään tuoteidean esim. ylemmälle johdolle Lähde: http://www.flickr.com/photos/_leisa/3406320975/ 52 Saila.Ovaska@uta.fi 26
Karkeat prototyypit (Low-fidelity) Karkea prototyyppi on luonnos eikä vielä muistuta paljoa lopullista tuotetta Materiaali usein paperia, pahvia tai vaikka puuta Toteutettu usein käsin piirtämällä Halpoja ja nopeita Voidaan helposti testata suunnitteluideoita ja tehdä tarvittavia muutoksia Rohkaisee kokeilemaan ja tutkimaan Yleensä eksploratiivisia prototyyppejä Tavoitteena selvittää vaatimuksia yhdessä käyttäjien kanssa 53 Karkeita prototyyppejä Kuvien lähteet: http://www.adamatorres.com/img/682/lofi/image-1.jpg, http://www.flickr.com/photos/47388015@n00/3421584868/ 54 Saila.Ovaska@uta.fi 27
Täsmäprototyypit (High-fidelity) Täsmäprototyyppi on materiaaleiltaan ja ulkoasultaan lopullisen tuotteen kaltainen Myös vuorovaikutus ainakin osittain toteutettu Työkaluja esimerkiksi Flash, Visual Basic Täsmäprototyyppien ongelmia Rakentaminen saattaa kestää kauan Saatu palaute voi olla pinnallista (esim. visuaalisen suunnittelun yksityiskohtia) Yleensä eksperimentaalisia prototyyppejä Tavoitteena testata onko järjestelmä käytettävä ja hyväksyttävä kun se valmistuu 55 Esimerkki täsmäprototyypistä vrt. karkea prototyyppi Kuvan lähde: http://www.adamatorres.com/gallery-project/wp-content/uploads/2008/11/hifi.jpg 56 Saila.Ovaska@uta.fi 28
Proton laajuus Horisontaalinen prototyyppi ei sisällä paljoakaan toteutettua toiminnallisuutta Vertikaalisessa prototyyppissä vain osa käyttöliittymästä on toteutettu, mutta se on toteutettu loppuun asti Kuvan lähde: http://www.interaction-design.org/encyclopedia/prototyping.html 57 Yhteenveto Suunnittelussa on tärkeää tuntea käyttäjän tarpeet aloittaa ylhäältä alas käsitteellisen tason suunnittelusta muuten kokonaisuutta on vaikea hallita osata erilaisia kuvaustekniikoita tietää vuorovaikutustavoista ja tekniikoista ja tunnistaa niitten sopivuus tarkasteltuun tilanteeseen osaksi käyttöliittymäsuunnitelmaa 58 Saila.Ovaska@uta.fi 29