IHTE-2100 KaSuper Luento 4: Tehtäväanalyysi, multimodaalisuus

Transkriptio

1 IHTE-2100 KaSuper Luento 4: Tehtäväanalyysi, multimodaalisuus

2 Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät

3 Tehtäväanalyysi (task analysis) Yleinen termi laajalle joukolle menetelmiä - Osa menetelmistä keskittyy kognitiivisiin prosesseihin, osa fyysiseen toimintaan - Osa menetelmistä kuvaa korkean tason abstraktiona asiat, osa pienten yksityiskohtien tasolla Tutkitaan olemassa olevaa tilannetta: mitä käyttäjät tekevät - Mitä koittavat saavuttaa? - Miksi haluavat saavuttaa sen? - Kuinka käyttäjät toimivat? Mitä ihmiset tekevät saavuttaaksensa tavoitteet?

4 Tehtäväanalyysi (task analysis) Tehtäväanalyysin menetelmät antavat keinoja kuvata käyttäjien toimintaa - Niiden pohjalta rakennetaan uusia vaatimuksia järjestelmälle - Voidaan arvioida potentiaalisia ongelmakohtia ja etsiä niille ratkaisuja Jotkut tehtäväanalyysimenetelmät antavat työkaluja myös esim. - Tehokkuuden ennustamiseen - Järjestelmän monimutkaisuuden mittaamiseen - Opittavuuden mittaamiseen

5 Hierarchical Task Analysis (HTA) Tehtävät pilkotaan alitehtäviksi, jotka jaetaan edelleen alitehtäviksi jne Alitehtävät ryhmitellään suunnitelmiksi - määrittelevät kuinka tehtävät voitaisiin suorittaa todellisessa tilanteessa Keskittyy fyysiseen, havainnoitavissa olevaan toimintaan Huomioidaan myös käyttäjän toiminta joka ei liity välttämättä ohjelmistoon tai laitteeseen Lähtöpisteenä on käyttäjän tavoite (user goal)

6 HTA: Esimerkki kirjan lainaaminen 0. Lainataksesi kirjan kirjastosta 1. Mene kirjastoon 2. Etsi haluttu kirja 2.1 etsi kirjaston aineistopääte 2.2 avaa hakunäyttö 2.3 kirjoita hakukriteeri 2.4 valitse haluttu kirja 2.5 katso kirjan sijainti 3. Mene oikealle hyllylle ja hae kirja 4. Vie kirja lainaustiskille Plan 0: tee Jos kirja ei ole oletetussa hyllyssä, tee Plan 2: tee Jos kirjaa ei tunnistettu tee

7 HTA: Esimerkki kirjan lainaaminen Lainaa kirja kirjastosta 0 Plan 0: tee jos kirja ei oletetussa hyllyssä, tee Mene kirjastoon 1 Etsi haluttu kirja 2 Mene oikeal. hyllylle, hae kirja 3 Vie kirja lainaustiskille 4 Plan 2: tee jos kirjaa ei tunnistettu tee Etsi kirjaston aineistopääte 2.1 Avaa hakunäyttö 2.2 Kirjoita hakukriteeri 2.3 Valitse haluttu kirja 2.4 Katso kirjan sijainti 2.5

8 HTA: Esimerkki - ryhmäkalenteri Skenaario: Projektipäällikkö Ahto Simakuutio on kutsumassa koolle projektipalaveria. Ahto kirjoittaa kaikkien kutsuttavien nimet sekä joitain rajoitteita, kuten tapaamisen pituus, ajankohtaan liittyvät rajoitteet (ennen tammikuun loppua, arkipäivänä) ja tapaamisen paikan (sisäinen palaveri). Järjestelmä tarkistaa kutsuttujen henkilökohtaiset kalenterit, yksikön yhteisen kalenterin ja esittää Ahtolle listan mahdollisista päivämääristä, jolloin kaikille löytyy yhteisiä vapaita aikoja. Sitten tapaaminen voidaan vahvistaa ja kirjoittaa osallistujien kalenteriin. Koska jotkut käyttäjät haluavat tiedon ja varmistuskysymyksen osallistumisestaan palaveriin, järjestelmä lähettää käyttäjille automaattisesti sähköpostia ja pyytää vahvistusta osallistumisesta, ennen kuin tapahtuma kirjataan lopullisesti kalentereihin.

9 HTA- esimerkki - ryhmäkalenteri Olennaisia kysymyksiä: - Ketä kutsutaan tapaamiseen? - Millaisia rajoitteita tapaamisella on? Pituus Millä aikavälillä tapaamisen pitää olla? Missä tapaaminen pidetään, onko vapaita tiloja? - Miten kutsuttuja informoidaan asiasta?

10 HTA: Esimerkki ryhmäkalenteri 0. Järjestääksesi tapaaminen 1. Valitse osallistujat 2. Listaa tapahtuman rajoitteet 3. Etsi sopiva päivä 3.1 etsi sopivat päivät yksikön kalenterista 3.2 etsi sopivat päivät jokaisen osallistujan kalenterista 3.3 vertaa mahdollisia ajankohtia 3.4 valitse yksi ajankohta 4. Kirjaa tapaaminen kalentereihin alustavasti 5. Kysy varmistus osallistujilta. Plan 0: tee Jos mahdollisia päiviä on, tee 4-5. Jos mahdollisia ajankohtia ei löydy, toista 2-3. Plan 3: tee tai tee

11 HTA: Esimerkki ryhmäkalenteri Järjestä tapaaminen 0 Plan 0: tee Jos mahdollisia päiviä on, tee 4-5. Jos mahdollisia ajankohtia ei löydy, toista 2-3. Valitse osallistujat 1 Listaa tapahtuman rajoitteet 2 Etsi sopiva päivä 3 Kirjaa tapaaminen alustav. 4 Kysy varmistus 5 Plan 3: tee tai tee Etsi sopivat päivät yks. kalenter.3.1 Etsi sopivat päivät jok. osal. kal. 3.2 Vertaa mahdollisia ajankohtia 3.3 Valitse yksi ajankohta 3.4

12 GOMS Goals: tavoitteet Operations: toiminnot Methods: menetelmät Selection Rules: valintasäännöt

13 GOMS Goals: tavoitteet - Käyttäjän tavoitteet: tila, jonka käyttäjä haluaa saavuttaa. - Esim. löytää bussiaikataulun huomisaamulle. Operations: toiminnot - Käyttöön kuuluvat perustoiminnot. - Kognitiiviset prosessit ja fyysiset toiminnot joita tarvitaan tavoitteiden saavuttamiseksi. - Esim. mitä hakukonetta käyttää jos ei muista www-osoitetta, mitä hakusanoja käyttää, käyttääkö TKL:n repa reittiopasta vai etsiikö aikatauluista vai pysäkkiaikataulusta. Tavoitteiden ja toimintojen ero on se, että tavoitteet saavutetaan ja toiminnot suoritetaan

14 GOMS Methods: menetelmät - Opitttu toimintatapa (proseduuri) tavoitteiden saavuttamiseksi. - Koostuvat täsmällisistä, peräkkäisistä askeleista. - Esimerkiksi siirrä kursori hakukentän päälle, kirjoita hakusanat, paina hae -painiketta Selection Rules: valintasäännöt - Millä säännöillä menetelmät valitaan. - Jos mahdollisia menetelmiä on useita, valintasäännöt määrittävät, mikä menetelmä otetaan käyttöön. - Esimerkiksi kun käyttäjä on kirjoittanut hakukentään hakusanan, mahdollista on painaa Enteriä tai klikata hiirellä Hae-painiketta. Valintasäännöt vaikuttavat siihen, kumpaa menetelmää käytetään.

15 GOMS: Esimerkki: sanan tuhoaminen Tilanne: käyttäjä haluaa tuhota yhden sanan lauseen keskeltä. Käyttäjä käyttää Microsoft Wordia. Goal: tuhoa sana lauseesta

16 GOMS: Esimerkki: sanan tuhoaminen Method tavoitteen saavuttamiseksi käyttäen menuvaihtoehtoa: Vaihe 1: (step 1) Muista että tuhottava sana pitää maalata hiirellä Vaihe 2: Muista että komento on cut Vaihe 3: Muista että komento cut löytyy edit -valikosta Vaihe 4: Saavuta tavoite tavoite cut -komennon valinta ja suorittaminen Vaihe 5: Palaa, kun tavoite saavutettu

17 GOMS: Esimerkki: sanan tuhoaminen Method tavoitteen saavuttamiseksi käyttäen delete-näppäintä: Vaihe 1: Muistele minne kursori pitää asettaa suhteessa tuhottavaan sanaan Vaihe 2: Muistele mikä painike tuhoaa sanan Vaihe 3: Paina delete -painiketta tuhotaksesi jokaisen kirjaimen Vaihe 4: Palaa, kun tavoite on saavutettu

18 GOMS: Esimerkki: sanan tuhoaminen Toiminnot joita tarvitaan em. Menetelmissä: - Klikkaa hiirellä - Vie kursori tekstin yli - Avaa valikko - Siirrä kursori komennon ylle - Paina näppäimistön näppäintä

19 GOMS: Esimerkki: sanan tuhoaminen Selection rules: 1. Tuhoa teksti käyttäen hiirtä ja valikkoa jos tuhottavana on iso määrä tekstiä. 2. Tuhoa teksti delete -näppäimen avulla, jos tuhottavia kirjaimia on pieni määrä.

20 Tehtäväanalyysi: haasteita Todelliset tehtävät ovat todella monimutkaisia: jopa satoja tai tuhansia alitehtäviä Tehtäväanalyysin menetelmät eivät skaalaudu kovin hyvin: notaatioista tulee hankalia tulkita. Normaalissa työssä tapahtuu keskeytyksiä ja asioita tehdään rinnakkain tai päällekkäin

21 Lisää tehtäväanalyysista: IHTE-7200 Tehtävien analyysi ja suunnittelu, Task analysis and design 3 op Luennoidaan 1. kertaa tänä lukuvuonna, V periodilla (ke klo 12-14) Esitiedoksi riittää Käytettävyyden perusteet Sisältö: - Käyttäjän tavoitteiden ja tehtävien kartoittaminen ja mallintaminen - Käyttäjän tulevan toiminnan suunnittelu. - Tehtäväanalyysin menetelmiin, soveltamistapoihin ja niiden soveltamiseen tutustuminen.

22 Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät

23 Modaliteetit Modaliteetilla tarkoitetaan ihmisen aistin tuottamaa syötekokemusta Modaliteetit: - Haptinen/Taktiilinen - Visuaalinen - Auditiiviset - Vestibulaarinen - Gustatoorinen - Olfaktorinen

24 Modaliteetit: Haptinen / Taktiilinen Haptinen: tuntoaistiin perustuva Taktiilinen: kosketukseen perustuva

25 Modaliteetit: visuaalinen Visuaalinen: näköaistiin perustuva

26 Modaliteetit: Auditiivinen Auditiivinen: kuuloaistiin perustuva

27 Modaliteetit Vestibulaarinen: tasapainoaisti Gustatoorinen: makuaisti Olfaktorinen: hajuaisti

28 Multimodaalisuus Yhdistetään useampia modaliteetteja - Vrt. ihmisten kommunikointi kasvotusten - Tulkinta vahvistuu Multimodaalisuuden avulla pyritään - lisäämään luonnollisuutta ja käytettävyyttä - ehkäisemään virheitä ja avustamaan niiden korjaamisessa - nopeuttamaan kommunikointia - parantamaan järjestelmän luotettavuutta

29 Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät

30 World Wide Web WWW on yksi maailmanlaajuisen tietoverkon (Internetin) palveluista Perustettiin 1990, laajeneminen alkoi 1994 Sisältää miljardeja sivuja hypertekstiä - sivut toteutettu esim. HTML-kielellä - voidaan liittää erilaisia multimediaelementtejä ja ohjelmia

31 WWW:n erikoispiirteitä: toteutus Julkinen ja avoin järjestelmä Alunperin ei suunniteltu kaiken kansan käyttöön Standardit ja niiden puute Nopea kehitys ja kasvu Vasteajat vaihtelevat

32 WWW:n erikoispiirteitä: monipuolisuus Sivustoa voi katsella, käyttää ja hakea eri tavoin WWW ei ole WYSIWYG Käyttöympäristö suunnittelijalle tuntematon Käyttäjä kontrolloi liikkumistaan itse Sivustolle ei aina tulla pääsivun kautta Eri selaimet ja niiden versiot Käyttäjä voi valita suunnittelijan mielestä omituisia reittejä Monenlaiset päätelaitteet

33 Mobiililaite?

34 WWW:n erikoispiirteitä: rakenne Käyttäjän sijainnilla ei ole merkitystä Fyysisen maailman rajoituksista vapaa Sisällön ei tarvitse olla lineaarista Palvelurajat hämäriä Toiminta voi olla pienimuotoista ja halpaa Linkkejä voi teoriassa olla ääretön määrä Sivustolla on helppo jakaa materiaalia

35 WWW:n erikoispiirteitä: sisältö Sisällön merkitys korostuu Palvelut voivat olla yksilöllisiä Palvelut toimivat asiakkaan ehdoilla Tietoa valtavasti Palvelut voivat olla anonyymejä Tiedon etsiminen haastavaa Kaikki tieto ei luotettavaa

36 WWW:n erikoispiirteitä: käyttäjät Kielierot Heterogeeninen käyttäjäryhmä Kulttuurierot Tekninen osaamistaso Tavoitteet WWW:n käyttökokemus

37 WWW:n erikoispiirteitä Koska ei tiedetä tarkkaa käyttöliittymää ja ulkoasua, on keskityttävä - sisältöön - rakenteeseen - ylläpitoon - virheettömyyteen - esteettömyyteen

38 Ulkoasuesimerkki 1/2

39 Ulkoasuesimerkki 2/2

40 Käyttäminen vs. tyytyväisyys Sivuston kävijämäärät eivät välttämättä kerro mitään sivuston käytettävyydestä ja kävijöiden tyytyväisyydestä palveluun Taloustutkimus 2002: Eniten käytettyihin WWWpalveluihin ei välttämättä olla tyytyväisiä - www-palveluiden tärkeimmät ominaisuudet ovat Sisältö Ajantasaisuus tekninen toimivuus - Toimihenkilöt ja johtotason henkilöt korostavat tietojen ajantasaisuutta - Nuoret ja opiskelijat arvostavat muita vastaajia enemmän wwwpalvelun ulkonäköä.

41 KOTIUTA käyttäjä sivuille Korkeatasoinen sisältö Oikea-aikaiset päivitykset Todella lyhyt latausaika Intuitiivinen käyttöliittymä Uniikisti verkkoa hyödyntävä Tarpeita vastaava sisältö Asenteet verkkomyönteisiksi (Alunperin Home Run, Jakob Nielsen)

42 Suunnittelun lähtökohtia Mikä on palvelun päätarkoitus? - esim. tiedon levittäminen, palvelujen mainostus, tuotteiden myynti, markkinoille tulo, pätevyyden esittely Kenet sivustolle halutaan käymään? - mitkä ovat tärkeimmät käyttäjäryhmät? - mitä tavoitteita käyttäjillä on? Minkä tyyppinen palvelu houkuttelee käyttäjiä ja vastaa heidän tarpeisiinsa?

43 Suunnittelun lähtökohtia Mitkä ovat arvioitavissa olevat laatu- ja käytettävyysmittarit palvelulle? Mitkä ovat resurssit palvelun toteuttamiseen?

44 Käyttäjän vaatimukset tarkemmin Keitä ovat tärkeimmät käyttäjät? Miksi he tulevat sivustolle? Kuinka usein he vierailevat sivustolla? Mikä on heidän osaamis- ja tietämystasonsa? Mitä kansallisuuksia he ovat? Mitä kieliä he ymmärtävät?

45 Käyttäjän vaatimukset tarkemmin Minkä tyyppistä tietoa he etsivät? Luetaanko tieto näytöltä, tulostetaanko se vai ladataanko tiedostot talteen? Minkä tyyppisiä selaimia he käyttävät? Kuinka nopeat tietoliikenneyhteydet käyttäjillä on? Kuinka suuria näyttöjä käyttäjillä on?

46 Julkisten verkkopalveluiden laatukriteerit

47 Tyypillisiä virheitä verkkopalvelujen suunnittelussa Yrityksen vanhaa toimintamallia ei muuteta - verkon tuomia mahdollisuuksia ei hyödynnetä Projektinhallinta - projektia johdetaan kuten muita yrityksen projekteja Informaatioarkkitehtuuri - sivu muistuttaa yrityksen rakennetta eikä palvele käyttäjän tarpeita

48 Tyypillisiä virheitä verkkopalvelujen suunnittelussa Sivujen suunnittelu - sivut suunnitellaan demomielessä näyttäviksi, mutta esim. tiedonsiirtoviiveitä ei oteta huomioon Sisällöntuotanto - kirjoitetaan materiaali samalla tavoin kuin painettavat mainokset ja tiedotteet Linkkien rakentaminen - tehdään sivuista oma saareke, jolla ei ole selkeää alkua eikä poispääsyä

49 Nielsen: virheet suunnittelussa Jakob Nielsen on kerännyt pahimpia seittisuunnittelun virheitä, jotka kannattaa lukaista selityksineen kaikki läpi: - Top Ten Mistakes in Web Design (1996) - Top Ten New Mistakes in Web Design (1999) - Top Ten Web-Design Mistakes of Top Ten Web Design Mistakes of Top Ten Mistakes in Web Design 2007 Kaikki virheet eivät enää ole ajankohtaisia, esim. käyttäjät ovat tottuneet ruudun vierittämiseen. - Top Ten Mistakes Revisited Three Years Later - Durability of Usability Guidelines

50 Top Ten Mistakes in Web Design (1996) 1. Kehysten käyttö (frames) 2. Uusimman tekniikan perusteeton käyttö 3. Vierivä teksti, animaatiot 4. Monimutkaiset URL-osoitteet 5. Irralliset sivut 6. Pitkät, vieritettävät sivut 7. Navigointituen puute 8. Epästandardit linkkivärit 9. Päivittämätön, vanhentunut sisältö 10.Pitkät latautumisajat

51 Top Ten New Mistakes in Web Design (1999) 1. Back-painikkeen toiminnallisuuden rikkominen 2. Uusien selainikkunoiden avaus 3. Epästandardien käyttöliittymäkomponenttien käyttö 4. Tekijätietojen puuttuminen 5. Arkistojen puuttuminen 6. Sivujen siirtäminen uuteen osoitteeseen 7. Otsikot jotka eivät kuvaa oleellista sisältöä 8. Uusimpien muotivillitysten seuraaminen 9. Hitaat palvelimen vasteajat 10.Kaikki mikä näyttää mainonnalta

52 Top Ten Web-Design Mistakes of Hintatietojen puuttuminen 2. Joustamattomat hakukoneet 3. Sivujen vierittäminen vaakasuunnassa 4. Kirjaisinkokojen määrääminen 5. Tekstin kirjoittaminen suuriin lohkoihin 6. JavaScriptin käyttö linkeissä 7. Harvoin kysytyt kysymykset UKK:ssa 8. Sähköpostiosoitteiden kerääminen ilman tietosuojapolitiikkaa 9. Pitkät URL-osoitteet 10.Sähköpostilinkit odottamattomissa paikoissa

53 Top Ten Mistakes in Web Design (2007) 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size 6. Page Titles With Low Search Engine Visibility 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions 9. Opening New Browser Windows 10.Not Answering Users' Questions

54 Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > Kirjoita selkeät otsikot sivuille ja teksteille 4. Tue silmäilevää lukutapaa 5. Käytä hypertekstiä sisällön jäsentämisessä 6. Käytä tuotekuvia mutta älä liikaa 7. Pienennä kuvat oleellisen sisällön mukaan 8. Käytä linkkiotsikoita 9. Varmista että tärkeät sivut ovat myös erikoisryhmien saatavilla 10. Tee kuten muutkin (Nielsen,

55 1. Aseta nimi ja logo joka sivulle, tee logosta linkki

56 2. Tarjoa hakumahdollisuus jos sivuja > 100

57 3. Kirjoita selkeät otsikot sivuille ja teksteille

58 4. Tue silmäilevää lukutapaa

59 5. Käytä hypertekstiä sisällön jäsentämisessä

60 6. Käytä tuotekuvia mutta älä liikaa

61 7. Pienennä kuvat oleellisen sisällön mukaan

62 8. Käytä linkkiotsikoita

63 9. Varmista esteettömyys

64 9. Varmista esteettömyys

65 Esteettömät verkkopalvelut Verkkopalvelut kaikkien saataville Hyöty erityisryhmille ja erikoisten päätelaitteiden käyttäjille Esteettömyyden huomiointi edistää samalla myös käytettävyyttä erilaisissa käyttötilanteissa ja ympäristöissä Huomioi verkkopalvelussa erityisesti 1. Rakenne 2. Kieli 3. Tekniikat 4. Linkit 5. Multimedia 6. Taulukot 7. Ohitettavuus

66 Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > Kirjoita selkeät otsikot sivuille ja teksteille 4. Tue silmäilevää lukutapaa 5. Käytä hypertekstiä sisällön jäsentämisessä 6. Käytä tuotekuvia mutta älä liikaa 7. Pienennä kuvat oleellisen sisällön mukaan 8. Käytä linkkiotsikoita 9. Varmista että tärkeät sivut ovat myös erikoisryhmien saatavilla 10. Tee kuten muutkin (Nielsen,