Tarjolla tänään Käyttöliittymien perusteet: Johdanto Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Kurssin käytännön järjestelyt Käyttöliittymät ja vuorovaikutussuunnittelu Käyttäjäkeskeisen suunnittelun perusteet Osin kertausta Jovuot-kurssilta Tälläkin kurssilla kalvoista osan on tehnyt Jenni Anttonen syksyllä 2009. 1 2 UI-kurssin tavoitteet Opettajat 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 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 3 4 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 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 5 6 Saila.Ovaska@uta.fi 1
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. 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ä! 7 8 Suunnitteluharjoitukset Kurssimateriaali 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 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 9 10 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 Käyttöliittymät ja vuorovaikutussuunnittelu 11 12 Saila.Ovaska@uta.fi 2
Käyttöliittymä Vuorovaikutus Erilaisia vuorovaikutustapoja keskustelutyylit (komentokieli, valikot, suorakäyttö, point & click, ) kertaa JoVuoT-kurssilta; UI-kurssilla syvennetään jo opittua Syötteet (input) Tulosteet (output) Suunnittelija kommunikoi käyttäjälle käyttöliittymän kautta. Käyttäjä voi tulkita käyttöliittymän eri tavoilla. Vuorovaikutus voi tapahtua käyttäen erilaisia syöte- ja tulostemodaliteetteja Lähde: Norman (1988). The Design of Everyday Things. 13 14 Vuorovaikutus tietokoneen kanssa voi tapahtua koneelle komentoja antaen (instructing) keskustelevasti (conversing) kohteita manipuloimalla (manipulating) kokeillen ja tutkien (exploring) Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing 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 lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 16 Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Press 1 for customer service. Press 3 for store hours. Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 17 lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 18 Saila.Ovaska@uta.fi 3
Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing 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 19 lähde: http://www.ics.uci.edu/~kobsa/courses/inf231/07f/prs8_slides.ppt 20 Vuorovaikutuksen suunnittelu Vuorovaikutussuunnittelun vaiheet 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 Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja ITEROINTI 21 Muokattu lähteestä: Preece et al. 2007 Interaction design. 22 Vuorovaikutussuunnittelu Ymmärrä ongelma-avaruus Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja 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ä 23 24 Saila.Ovaska@uta.fi 4
Kuvaa käyttäjien tarpeet Esimerkki: skenaario 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 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 25 26 Esimerkki: käyttötapaus Erilaisilla käyttäjillä voi olla samoja tarpeita Sama käyttöliittymä tukee myös esimerkiksi Niiloa: Lähde: Laakso & Latva-Koivisto 27 Lähde: Laakso & Latva-Koivisto 28 Esimerkki: käyttötapaus 2 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 29 Lähde: Laakso & Latva-Koivisto 30 Saila.Ovaska@uta.fi 5
Vuorovaikutussuunnittelu Vuorovaikutuksessa käyttäjän kanssa Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja 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. 31 Lähde: Norman (1988). The Design of Everyday Things. 32 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 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? Esimerkki 33 Lähde: Piki-verkkokirjasto 34 Metaforat ja analogiat suunnittelussa 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 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ä 35 36 Saila.Ovaska@uta.fi 6
Käsitemalli Miksi käsitemalli tarvitaan? 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 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 37 38 Vuorovaikutussuunnittelu Suunnitteluratkaisujen tuottaminen Ymmärrä ongelmaavaruus Käsitteellistä suunnitteluavaruus Tuota suunnitteluratkaisuja 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 39 40 Informaatioarkkitehtuuri Sivukartta 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 Kuvaa sivuston rakennetta Sen pohjalta voidaan edetä Navigaation suunnitteluun Yksittäisten sivujen suunnitteluun 41 Lähde: http://www.usability.gov/design/sitemap.jpg 42 Saila.Ovaska@uta.fi 7
Rautalankamalli navigointikarttaa Esimerkkejä rautalankamalleista Kuvaa yksittäisten sivujen rakennetta korkealla tasolla Sisällön ja toimintojen määrittely Ei ota kantaa visuaaliseen suunnitteluun käyttötapakuvaus ruokapaikan etsimisestä Lähde: http://wireframes.linowski.ca/2009/05/balsamiq-mockups-15/ 43 Lähde: http://www.behance.net/gallery/wireframes-pitch-for-a-municipal-website/218859 44 Käyttäjän ja järjestelmän välinen vuorovaikutus Esimerkki: Kuvakäsikirjoitus (Storyboard) 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 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 Kuvakäsikirjoitus voi myös kuvata sovelluksen toimintaa Vuorovaikutuksen kuvaaminen Kuvien lähteet: http://www.mmiworks.net/pics/blog8/09team4storyboard.png http://stavchansky.net/images/feature_ftsstoryboard.jpg 47 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 8
Esimerkki: näyttöjen luonnokset Kehitä prototyyppejä Hahmotelmiin voidaan lisätä numeroita viitteeksi raportissa oleviin kommentteihin, joissa kuvataan vuorovaikutusta tarkemmin. 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 Lähde: http://www.gliffy.com/examples/wireframes/ 49 50 Esimerkkejä prototyypeistä 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 Kuvien lähteet: Moggridge Designing interactions, http://trialrate.com/wp-content/uploads/2009/07/screen-prototype3.png 51 Lähde: http://www.flickr.com/photos/_leisa/3406320975/ 52 Karkeat prototyypit (Low-fidelity) Karkeita prototyyppejä 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 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 9
Täsmäprototyypit (High-fidelity) Esimerkki täsmäprototyypistä 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 vrt. karkea prototyyppi 55 Kuvan lähde: http://www.adamatorres.com/gallery-project/wp-content/uploads/2008/11/hifi.jpg 56 Proton laajuus Yhteenveto Horisontaalinen prototyyppi ei sisällä paljoakaan toteutettua toiminnallisuutta Vertikaalisessa prototyyppissä vain osa käyttöliittymästä on toteutettu, mutta se on toteutettu loppuun asti 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 Kuvan lähde: http://www.interaction-design.org/encyclopedia/prototyping.html 57 58 Saila.Ovaska@uta.fi 10