http://www.cs.tut.fi/ihte IHTE-2100 KaSuper 2007-2008 Luento 4: Tehtäväanalyysi, multimodaalisuus
Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät
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?
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
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)
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 1-3-4. Jos kirja ei ole oletetussa hyllyssä, tee 2-3-4. Plan 2: tee 2.1-2.4-2.5. Jos kirjaa ei tunnistettu tee 2.2.-2.3-2.4-2.5
HTA: Esimerkki kirjan lainaaminen Lainaa kirja kirjastosta 0 Plan 0: tee 1-3-4 jos kirja ei oletetussa hyllyssä, tee 2-3-4 Mene kirjastoon 1 Etsi haluttu kirja 2 Mene oikeal. hyllylle, hae kirja 3 Vie kirja lainaustiskille 4 Plan 2: tee 2.1-2.4-2.5 jos kirjaa ei tunnistettu tee 2.2.-2.3-2.4-2.5 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
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.
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?
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 1-2-3. Jos mahdollisia päiviä on, tee 4-5. Jos mahdollisia ajankohtia ei löydy, toista 2-3. Plan 3: tee 3.1-3.2-3.3-3.4 tai tee 3.2-3.1-3.3-3.4
HTA: Esimerkki ryhmäkalenteri Järjestä tapaaminen 0 Plan 0: tee 1-2-3. 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 3.1-3.2-3.3-3.4 tai tee 3.2-3.1-3.3-3.4 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
GOMS Goals: tavoitteet Operations: toiminnot Methods: menetelmät Selection Rules: valintasäännöt
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
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.
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
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
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
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ä
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ä.
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
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.
Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät
Modaliteetit Modaliteetilla tarkoitetaan ihmisen aistin tuottamaa syötekokemusta Modaliteetit: - Haptinen/Taktiilinen - Visuaalinen - Auditiiviset - Vestibulaarinen - Gustatoorinen - Olfaktorinen
Modaliteetit: Haptinen / Taktiilinen Haptinen: tuntoaistiin perustuva Taktiilinen: kosketukseen perustuva
Modaliteetit: visuaalinen Visuaalinen: näköaistiin perustuva
Modaliteetit: Auditiivinen Auditiivinen: kuuloaistiin perustuva
Modaliteetit Vestibulaarinen: tasapainoaisti Gustatoorinen: makuaisti Olfaktorinen: hajuaisti
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
Päivän aiheet Tehtäväanalyysi Multimodaalisuus (Design patterns) WWW-käyttöliittymät
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
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
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
Mobiililaite?
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
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
WWW:n erikoispiirteitä: käyttäjät Kielierot Heterogeeninen käyttäjäryhmä Kulttuurierot Tekninen osaamistaso Tavoitteet WWW:n käyttökokemus
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
Ulkoasuesimerkki 1/2
Ulkoasuesimerkki 2/2
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öä.
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)
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?
Suunnittelun lähtökohtia Mitkä ovat arvioitavissa olevat laatu- ja käytettävyysmittarit palvelulle? Mitkä ovat resurssit palvelun toteuttamiseen?
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?
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?
Julkisten verkkopalveluiden laatukriteerit http://www.laatuaverkkoon.fi/
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
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ä
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 2002 - Top Ten Web Design Mistakes of 2003 - 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
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
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
Top Ten Web-Design Mistakes of 2002 1. 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
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
Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > 100 3. 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, http://www.useit.com/alertbox/991003.html)
1. Aseta nimi ja logo joka sivulle, tee logosta linkki
2. Tarjoa hakumahdollisuus jos sivuja > 100
3. Kirjoita selkeät otsikot sivuille ja teksteille
4. Tue silmäilevää lukutapaa
5. Käytä hypertekstiä sisällön jäsentämisessä www.biltema.fi
6. Käytä tuotekuvia mutta älä liikaa www.viialanleipomo.fi
7. Pienennä kuvat oleellisen sisällön mukaan
8. Käytä linkkiotsikoita
9. Varmista esteettömyys www.espoo.fi
9. Varmista esteettömyys
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
Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > 100 3. 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, http://www.useit.com/alertbox/991003.html)