Käyttöliittymien perusteet: Johdanto. Tarjolla tänään

Transkriptio

1 Käyttöliittymien perusteet: Johdanto Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Tälläkin kurssilla kalvoista osan on tehnyt Jenni Anttonen syksyllä 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

2 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: 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

3 Luennot ja harjoitukset Luennot salissa B1100 Maanantaisin klo Keskiviikkoisin klo Luennot ajalla ei luentoa maanantaina Viikkoharjoitukset salissa B1084 tiistaisin tiistaisin keskiviikkoisin torstaisin torstaisin Harjoitukset ajalla Itsenäisyyspäivänä ti ei ryhmiä, vaan tiistain harjoitusryhmät pidetään vasta seuraavalla viikolla Tentti pe klo ls D10ab 5 Kurssilla käytössä yliopiston Moodle Moodleen kirjaudutaan peruspalvelutunnuksella UI-kurssille (ensimmäisen rekisteröitymiskerran) kurssiavain: UI_moo_2011 Suora linkki kurssille: 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 jaetaan mm. viikkoharjoitukset ja luennot 6 Saila.Ovaska@uta.fi 3

4 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 mutta eivät enää syksyllä 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 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 klo 10 (aamulla). Ohjeet ja palautus Moodlessa. Harjoitellaan lomakesuunnittelua ja suunnitteluharjoitusraportin tekemistä! 8 Saila.Ovaska@uta.fi 4

5 Suunnitteluharjoitukset Kurssiin kuuluu 3 suunnitteluharjoitusta viikkoharjoitustehtäviä laajempia suunnittelutehtäviä Kaksi suunnitteluharjoitusta on pakollista tehdä! Alustava palautusaikataulu: torstai suunnitteluharjoitus 1 torstai suunnitteluharjoitus 2 torstai 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 Kalvoilla ja harjoituksissa käsitellyt asiat tulevat tenttiin Kurssimateriaali perustuu Oppikirjoihin Erillisiin (tutkimus)artikkeleihin Tyylioppaisiin 10 Saila.Ovaska@uta.fi 5

6 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

7 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

8 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, (kirjan kohta 2.3.4) (vuoden 2010 painoksessa kohta 2.5) Kuvien lähde: 15 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde:

9 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Press 1 for customer service. Press 3 for store hours. lähde: 17 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde: 18 Saila.Ovaska@uta.fi 9

10 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing lähde: 19 Vuorovaikutustyypit toisella tapaa Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Object-based: Kohteena olevaan objektiin keskittyen lähde:

11 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 Interaction design

12 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 12

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

14 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 14

15 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

16 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

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

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

19 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, 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

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

21 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:

22 Rautalankamalli Kuvaa yksittäisten sivujen rakennetta korkealla tasolla Sisällön ja toimintojen määrittely Ei ota kantaa visuaaliseen suunnitteluun Lähde: 43 navigointikarttaa Esimerkkejä rautalankamalleista käyttötapakuvaus ruokapaikan etsimisestä Lähde:

23 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: Saila.Ovaska@uta.fi 23

24 Kuvakäsikirjoitus voi myös kuvata sovelluksen toimintaa Kuvien lähteet: Vuorovaikutuksen kuvaaminen Kuvien lähteet:

25 Esimerkki: näyttöjen luonnokset Hahmotelmiin voidaan lisätä numeroita viitteeksi raportissa oleviin kommentteihin, joissa kuvataan vuorovaikutusta tarkemmin. Lähde: 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

26 Esimerkkejä prototyypeistä Kuvien lähteet: Moggridge Designing interactions, 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:

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

28 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:

29 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: 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 29