Titus-projektin läsnäolijataulukoiden käytettävyystestauksen raportti 24.5.2018

Tiivistelmä: Dokumentissa raportoidaan Titus-projektissa 24.5.2018 järjestetyn läsnäolijataulukoiden käytettävyystestauksen tulokset.

Avainsanat: Käytettävyys, käytettävyystestaus, käyttäjälähtöisyys, käyttöliittymä, läsnäolijataulukot, oppimisympäristö, projekti, testaus, testausraportti, raporttipohja, TIM.

1. Testauskerran kohteet, tavoitteet ja suoritustavat

Testauskerralla testattiin taulukoiden käytettävyyttä. Testattavina taulukoina oli läsnäolijataulukot yleisesti sekä TimTable-liitännäisellä luodut taulukot.

Testauskerran tavoitteena oli arvioida TIM-oppimisympäristön taulukkotoimintojen sekä Titus-projektissa kehitettyjen taulukkoliitännäisen ja -editorin mahdollisia käytettävyyteen liittyviä ongelmakohtia. Lisäksi tavoitteena oli kerätä suosituksia käytettävyyden parantamiseksi käytettävyystestauksen tulosten pohjalta.

Suoritustapana testauksessa oli ei-toiminnallinen hyväksymistestaus perinteisen käytettävyystestauksen menetelmin. Testauksessa koehenkilö suoritti annetut tehtävänannot ääneen ajatellen. Samaan aikaan tarkkailija havainnoi koehenkilön suorittamia toimenpiteitä ja ajatuksia ja otti huomioita ylös. Koehenkilöllä oli saatavillaan Titus-projektissa laaditut toimintojen käyttöohjeet^[1], mutta koehenkilö ei kuitenkaan hyödyntänyt niitä. Koehenkilö sai tarvittaessa kysyä tarkkailijalta apua. Tarkkailija kuitenkin vältti avustamasta koehenkilöä oma-aloitteisesti.

2. Koehenkilön ja tarkkailijan soveltuvuus ja tietotaidot

Testauksen suorittaneen koehenkilön taustatiedot on esitetty taulukossa 1.

Koehenkilö vastaa informaatioteknologian tiedekuntaneuvoston asiavalmistelijana testattujen toimintojen kohderyhmää. Lisäksi koehenkilö on projektin tilaajan edustaja. Hän valikoitui käytettävyystestauksen koehenkilöksi tilaajan ja asiavalmistelijan roolien sekä saatavuutensa vuoksi. Koehenkilö ei ollut varsinaisesti laatinut kokousdokumentteja TIMiin aiemmin, mutta projektiryhmä oli järjestänyt hänelle aiemmin perehdytyksen kokousdokumenttien laatimiseen TIMillä. Omien sanojensa mukaan koehenkilö on käyttänyt TIMiä projektin ulkopuolella vain muutaman kerran. Tällöin hän on katsellut dokumentteja sekä kopioinut dokumentissa olevaa tekstiä toiseen kohtaan dokumenttia. Koehenkilö ajatteli koetilanteessa ääneen.

Tarkkailijalla oli runsaasti kokemusta TIM-järjestelmästä ja testattavista ominaisuuksista. Käytettävyystestaukseen tarkkailija on tutustunut yliopiston ohjelmistotestauskurssilla ja lisäksi projektin kahdella aiemmalla käytettävyystestauskerralla, jolloin hän oli ohjaavan henkilön roolissa. Tarkkailija ei hyödyntänyt raporttipohjassa annettuja tukikysymyksiä.

Sekä koehenkilön että tarkkailijan tietotaidot kattavat käytettävyystestauksen suunnitelmassa^[2] esitellyt testauksen tietotaitovaatimukset.

3. Testauskerran yksilöintitiedot

Testauskerran testausympäristö sekä yksilöintitiedot ovat seuraavat:

• ohjelmisto ja versio: TIM, titus-haara, päivitetty 22.05.2018 13:19:53,
• käyttöjärjestelmä ja versio: Windows 7 Education, Service Pack 1,
• WWW-selain ja versio: Google Chrome 66.0.3359.181
• laitekokoonpano: pöytätietokone, ohjaimina hiiri ja näppäimistö
• testausympäristön testauspalvelin (osoite): timdevs02.it.jyu.fi
• testaussuunnitelma ja versio: Titus-projektin käytettävyystestauksen suunnitelma, versio 0.2.2^[2],
• testauskerran tarkkailija: Rami Pasanen,
• testauskerran koehenkilö: Eija Hatanpää,
• testauskerran ohjaava henkilö: Rami Pasanen,
• testauksen suoritusajankohta: 24.5.2018 klo 12:30 - 13:45,
• testauksen suorituspaikka: Ag C431.1,
• testattava tehtäväkokonaisuus: Läsnäolijataulukot (testausuunnitelman tehtävät 2.1-2.14),
• testauksessa käytetty testausdata: Titus-projektin taulukoiden käytettävyystestauksen testausdata, https://timdevs02.it.jyu.fi/view/tiedekunnat/it/2018/poytakirjat/kaytettavyystestaus/pk_tehtava1

4. Testauskerran yhteenveto ja suositukset

5. Testauskerran tulokset ja havainnot

Luvussa kuvataan lyhyesti testauskerran tehtävien suoritus ja tehtäväkohtaisesti tehtävien suoritukseen liittyvät huomiot. Huomioiden esitystapa on erilainen kuin käytettävyystestauksen suunnitelmassa, sillä raportin laatija koki raporttiin laaditun listauksen soveltuvampana esitystapana huomioille. Suunnitelman mukaisissa havaintotaulukoissa olisi jokaisen havainnon kohdalla toistettu tehtävänumero ja tehtävänanto, mikä olisi tuonut raporttiin ylimääräistä toistoa. Kaikkia testaajan tekemiä havaintoja ei luvussa luetella, sillä ne on luettavissa liitteessä 2.

Testauskerralla suoritettiin testaussuunnitelman^[2] tehtäväkokonaisuus 5.1.2 Läsnäolijataulukot. Tehtävistä suoritettiin 2.1-2.4, 2.6, 2.8-2.12 ja 2.14. Huomioita kirjattiin useita. Tehtäviä 2.5 ja 2.7 ei voitu suorittaa sovelluksen teknisistä rajoituksista johtuen. Tehtävä 2.13 keskeytettiin ajan loppumisen vuoksi.

Testauksen aikana täytetty testausdata löytyy Titus-projektin testipalvelimelta osoitteesta https://timdevs02.it.jyu.fi/view/tiedekunnat/it/2018/poytakirjat/kaytettavyystestaus/testauskerta-3-eija/pk_tehtava1.

5.1 Testauskerran tehtävien olennaisimmat havainnot

5.2 Testauskerran havaintojen yhteenveto

Testauskerralla havaittiin runsaasti käytettävyyteen negatiivisesti vaikuttavia puutteita. Markdown-taulukoiden muokkaamisessa huomiot olivat verrattain vähäisiä, mutta taulukkoeditorissa havaittiin huomattavia käytettävyysongelmia. Koehenkilö ei käyttänyt testatessa käyttöohjeita, joita lukemalla osan käytettävyysongelmista olisi mahdollisesti voinut välttää.

Havaittujen ongelmien kohdalla suositellaan ongelmien korjaamista ja mahdollista uusintatestausta resurssien salliessa.

Liitteessä on tehtävittäin kirjattu tarkkailijan testauksessa tekemät yksityiskohtaiset havainnot. Havainnoista vain osa liittyy käytettävyysongelmiin, eikä niitä ole järjestetty tai prosessoitu muulla tapaa. Niiden avulla kuitenkin saa tarkan kuvan testauksen etenemisestä.

Tehtävän 2.1 "Lisää asiakohtaan 3 taulukko asiakohdassa läsnäolleista henkilöistä." havainnot:

• Koehenkilö ei yrittänytkään lisätä uutta taulukkoa, vaan kopioi läsnäolotaulukon listakohdasta 4, jossa se oli valmiiksi. Koehenkilö liitti kopioidun taulukon asiakohtaan 3, asiakohdan muun tekstin yläpuolelle, mutta kuitenkin otsikon jälkeen.
• Koehenkilölle oli epäselvää, täytyykö taulukon kopiointia varten avattu editori sulkea, jotta kopioidun koodin voi liittää toiseen kohtaan. Koehenkilö kysyi asiaa, mihin tarkkailija vastaa myöntävästi.
• Koehenkilö ihmettelee, miksi kappale-editorin esikatselussa ei näy taulukkoa, eikä sitä voi vierittääkään alemmas. Näytön resoluutio on liian pieni, jotta esikatselu näkyisi kunnolla. Taulukkoa ei näy esikatselusta lainkaan.
• Tallentamisen jälkeen taulukko näkyy rikkinäisenä.
• Koehenkilö katselee taulukon koodia, mutta ei huomaa, miksi se on rikki. Tarkkailija toteaa, että taulukon koodissa on ylimääräinen välilyönti smallertable -tyylimääritysrivin alussa. Tällöin koehenkilö saa taulukon korjattua.

Tehtävän 2.2 "Lisää edelliseen taulukkoon opiskelija läsnäolijaksi." havainnot:

• Koehenkilö avaa TIMin kappale-editorin ja kirjoittaa opiskelijan riville, jolla oli tyhjiä soluja. Ei ongelmia.

Tehtävän 2.3 "Lisää juuri laadittuun läsnäolotaulukkoon uusia rivejä." havainnot:

• Koehenkilöllä on epäselvyyksiä taulukon syntaksin kanssa. Hän ei ole varma, miten taulukon esitysmuodon tolpat toimivat, sekä voiko uuden tyhjän rivin lisätä vain laittamalla taulukkoon uuden rivin, ja siihen tolppia. Hän kuitenkin kokeilee rivin lisäämistä edellämainitulla tavalla.
• Koehenkilö ei löydä näppäimistöltä tolppamerkkiä. Tarkkailija toteaa tolppamerkin löytyvän yleensä vasemmalta alhaalta "suurempi kuin" ja "pienempi kuin" -merkkien kanssa samasta painikkeesta, minkä jälkeen koehenkilö löytää tolppamerkin.
• Rivin lisäys onnistuu.

Tehtävän 2.4 "Lisää taulukkoon sarakkeita. Anna sarakkeille myös otsikko." havainnot:

• Koehenkilö yrittää lisätä uutta tyhjää saraketta lisäämällä otsikkorivin jälkeiselle viivastolle tolpan ja viivoja. Uutta saraketta ei kuitenkaan ilmesty.
• Koehenkilö ajattelee tehneensä jotain väärää ja kumoaa edelliset muutoksensa.
• Koehenkilö lisää otsikkoriville tolpan ja sanan "Uusi", minkä jälkeen taulukkoon ilmestyy uusi sarake, tosin vain otsikkoriville. Muiden rivien kohdalla sarakkeen kohdalla ei ole solua, vaan vain tyhjää tilaa, mitä koehenkilö ihmettelee.
• Koehenkilö pohtii, miten alemmillekin riveille saisi lisättyä soluja.
• Koehenkilö lisää kokeilumielessä alemman rivin koodiin tolpan, jolloin riville ilmestyy solu uuden sarakkeen paikalle. Hän toistaa saman kaikille riveille, ja on näin luonut kokonaisen uuden sarakkeen.

Tehtävän 2.5 "Vaihda otsikkorivin taustaväriksi vihreä." havainnot:

• Koehenkilö avaa kappale-editorin ja tarkastelee Style-välilehden sisältöä.
• Koehenkilö katsoo muitakin välilehtiä läpi, mutta ei löydä keinoa taustavärin toteuttamiseen.
• Koehenkilö kysyy apua. Tarkkailija kertoo, että tyylimääritystä ei voi tehdä vanhalla taulukkomuodolla.

Tehtävän 2.6 "Muotoile viimeisen rivin teksti kursiiviksi." havainnot:

• Koehenkilö avaa kappale-editorin ja painaa rivin koodin alkua. Sitten hän valitsee kappa-editorista Style -> Italic. Rivin alkuun ilmestyy kaksi tähteä, mikä ei kursivoinut riviä. Tallentamisen ja tarkastelun jälkeen koehenkilö avaa kappale-editorin uudelleen ja poistaa lisätyt tähdet.
• Koehenkilö yrittää maalata taulukon viimeisen rivin koko koodin, ja painaa taas Style -> Italic. Taulukon ensimmäiseen ja viimeiseen sarakkeeseen ilmestyy tähdet, mikä ei kursivoi riviä. Koehenkilö poistaa lisätyt tähdet.
• Koehenkilö yrittää koko rivin sijaan kursivoida vain yhtä sanaa. Tämäkään ei onnistu, sillä sanan ja aloittavan tähden väliin jää vahingossa yksi välilyönti, ja tähdet näkyvät sellaisinaan.
• Koehenkilö kysyy apua, tarkkailija neuvoo poistamaan välilyönnin. Tällöin sana muuttuu kursivoiduksi.
• Koehenkilö maalaa solujen koodin yksi kerrallaan ja asettaa solut kursiiviksi, jolloin rivin kursivointi onnistuu.

Tehtävän 2.7 "Vaihda joka toisen sarakkeen taustaväriksi harmaa." havainnot:

• Koehenkilö miettii, onko tätä mahdollista tehdä, vai onko mahdoton kuten tehtävä 2.5.
• Koehenkilö avaa kappale-editorin ja katselee Style-välilehteä. Ei löydä vaihtoehtoa taustavärille, jolloin tarkkailija kertoo, että tehtävä ei ole mahdollinen vanhalla taulukkomuodolla.

Tehtävän 2.8 "Lisää haluaamasi taulukon soluun sisällöksi kuva." havainnot:

• Koehenkilö ei saa kappale-editoria auki. Kappale-editori ei näy avautuvan, vaikka koehenkilö painaa sivuvalikosta useampaan kertaan Edit.
• Tarkkailija huomaa, että koehenkilö on vahingossa pienentänyt kappale-editorin ruudun oikeaan yläkulmaan.
• Koehenkilö yrittää sulkea pienennettyä kappale-editoria painamalla rastia, mutta mitään ei näytä tapahtuvan.
• Tarkkailija neuvoo kokeilemaan kappale-editorin suurentamista ja sulkemista sitten.
• Kappale-editorin suurentamisen ja sulkemisen jälkeen kappale-editori näkyy yhä myös pienennettynä. Kappale-editoreita on siten avautunut useita, yksi jokaisesta Edit-painikkeen painalluksesta. Kaikki kappale-editorit on pienennettynä päällekäin samassa kohtaa selainruutua.
• Koehenkilö ihmettelee, miten kappale-editorin saa suljettua. Tarkkailija neuvoo painamaan Cancel-painiketta.
• Koehenkilö laajentaa ja sulkee kappale-editoreita, kunnes niitä on jäljellä vain yksi.
• Koehenkilö valitsee solun paikan taulukon koodissa ja painaa kappale-editorissa Insert -> Image.
• Kuvan lisääminen vaatii kuvan osoitteen, josta koehenkilö ei tiedä, että miten osoite haetaan. Tarkkailija neuvoo avaamaan uuden välilehden kuvan hakemista varten.
• Koehenkilö sulkee kappale-editorin ja avaa sitten uuden välilehden. Tarkkailija neuvoo ottamaan kuvaksi uuden välilehden oletussivulla näkyvän Google-logon.
• Koehenkilö pohtii, miten kuvan osoitteen saa otettua. Tarkkailija neuvoo painamaan kuvaa oikealla näppäimellä.
• Koehenkilö painaa kuvaa oikealla näppäimellä, miettii vaihtoehtoja ja painaa sitten Copy image address.
• Koehenkilö avaa kappale-editorin uudelleen, painaa solun kohdalla Insert -> Image ja korvaa koodissa olevan Kuvan osoite -tekstin kopioimallaan osoitteella.
• Koehenkilö tallentaa kappaleen. Kuva ilmestyy soluun siten kuin on tarkoituskin.

Tehtävän 2.9 "Lisää alla olevaan taulukkoon sarakkeita. Anna luomillesi sarakkeille otsikko." havainnot:

• Koehenkilöllä on vaikeuksia löytää sivupalkkia, josta editorin voisi avata.
• Valikon avattuaan koehenkilö huomaa, että siinä on Edit table -vaihtoehto.
• Koehenkilö saa nopeasti luotua kaksi uutta saraketta taulukkoeditorin painikkeesta.
• Koehenkilö pohtii, tallentuuko taulukko automaattisesti vai pitääkö se tallentaa erikseen.
• Antaessaan otsikon ensimmäiselle uudelle sarakkeelle koehenkilö painaa solua ja kirjoittaa avautuvaan syöttökenttään tekstin.
• Koehenkilö painaa seuraavan sarakkeen solua antaakseen sillekin otsikon.
• Koehenkilö yrittää tallentaa soluun kirjoittamaansa tekstiä ja painaa kynän kuvaa.
• Koehenkilö ihmettelee avautuvaa kehittynyttä editoria, ja yrittäessään edelleen sulkea solun syöttökenttää kynän kuvasta avaa useitakin kehittyneitä editoreita.
• Koehenkilö sulkee kehittyneet editorit.
• Koehenkilö ihmettelee, mistä syöttökentän saa suljettua.
• Koehenkilö painaa vahingossa syöttökentän vieressä ja osin syöttökentän alla olevaa sarakkeenlisäyspainiketta, ja näin lisää vahingossa uuden sarakkeen.
• Lopulta koehenkilö painaa toista taulukon solua, jolloin syöttökenttä siirtyy ja kirjoitettu otsikko tallentuu.

Tehtävän 2.10 "Lisää alla olevaan taulukkoon rivejä. Lisää riveille jotain sisältöä." havainnot:

• Koehenkilö lisää rivejä taulukkoeditorin painikkeen kautta.
• Koehenkilö avaa kehittyneen editorin aina, kun haluaa antaa solulle sisältöä. Koehenkilö ei vaikuta ymmärtävän syöttökentän ja kehittyneen editorin yhteyttä.
• Koehenkilö saa syötettyä sisältöä soluihin, mutta ihmettelee edelleen, miten syöttökentän saa suljettua.

Tehtävän 2.11 "Vaihda otsikkorivin taustaväriksi vihreä." havainnot:

• Koehenkilö avaa otsikkotason solun syöttökentän taulukkoeditorilla ja myös solun sisällön kehittyneen editorin.
• Koehenkilö ei löydä keinoa muuttaa taustaväriä.
• Koehenkilö avaa oma-aloitteisesti kappale-editorin.
• Koehenkilö löytää koodista kohdan backgroundColor: lightgray.
• Koehenkilö pohtii, että voiko kohtaan vain kirjoittaa toisen värin. Kokeilee vaihtaa lightgrayn greeniksi, jolloin taustaväri vaihtuu.
• Tarkkailija kysyy koehenkilöltä, onko HTML tai sen värit tuttuja. Koehenkilö vastaa, että eivät lainkaan.

Tehtävän 2.12 "Muotoile viimeisen rivin teksti kursiiviksi." havainnot:

• Koehenkilö yrittää painaa viimeisen rivin soluja avatakseen syöttökentän. Syöttökenttä ei kuitenkaan avaudu, sillä taulukko ei ole muokkaustilassa. Jonkun ajan kuluttua koehenkilö asettaa taulukon muokkaustilan päälle sivuvalikosta.
• Koehenkilö avaa solun syöttökentän ja sitten kynäikonin kautta kehittyneen editorin.
• Koehenkilö ei löydä kehittyneestä editorista mitään muotoilutoimintoja.
• Koehenkilö kysyy, onko taulukkoeditorissa olemassakaan muotoilutoimintoja vastaavasti kuin kappale-editorissa on. Tarkkailija toteaa, että on, ja neuvoo katsomaan kehittyneen editorin ikkunan vaihtoehtoja.
• Koehenkilö huomaa kehittyneen editorin advanced mode -kohdan ja rastittaa sen.
• Koehenkilö maalaa solun sisällön ja painaa Style -> Italic.
• Koehenkilö tallentaa solun sisällön, mutta solu ei kursivoidu, sillä md puuttuu.
• Koehenkilö yrittää kursivoida solua useampaan kertaan uudelleen, mutta ei onnistu.
• Tarkkailija neuvoo katsomaan otsikkorivin solujen muotoiluja, sillä ne on lihavoituja.
• Koehenkilö huomaa otsikkorivin solujen md-koodin, ja yrittää lisätä md:tä viimeisen rivin soluihin kehittyneellä editorilla.
• Koehenkilö ihmettelee, miksi muotoilut eivät näy syöttökentässä, kun kehittyneellä editorilla on painanut Save.
• Koehenkilö avaa kehittyneen editorin uudelleen, jolloin markdown on muuttunut HTML:ksi.
• Koehenkilö poistaa HTML:n ja kokeilee solun kursivointia uudelleen md:n avulla. Tallentamisen jälkeen solu ei vieläkään näy kursivoituna syöttökentässä, mikä hämmentää koehenkilöä. Hän kokeilee kursivoimista uudelleen useita kertoja.
• Tarkkailija selittää, että muotoilut eivät näy syöttökentässä.
• Koehenkilö siirtyy toiseen soluun tehtyään kursivoinnin vielä kerran uudelleen, jolloin kursivointi tulee voimaan. Kesken rivin kursivoinnin hän painaa vahingossa uuden rivin lisäyspainiketta, jolloin kursivoitu rivi ei enää olekaan viimeinen rivi.
• Koehenkilö kysyy, voiko lisätyn rivin poistaa. Tarkkailija vastaa kieltävästi.

Tehtävän 2.13 "Vaihda joka toisen sarakkeen taustaväriksi harmaa." havainnot:

• Koehenkilö avaa sarakkeen otsikkosolun syöttökentän ja kehittyneen editorin.
• Koehenkilö yrittää etsiä sarakkeen taustavärille asetusta Style-välilehdeltä.
• Koehenkilö yrittää Style -> Style -painikkeen avulla asettaa taustaväriä, mutta se luo koodin vain solun tekstin värjäämiseen. Tämäkään koodi ei toimi, sillä koehenkilö ei lisää md:tä sisällön alkuun. Markdown näkyy siten solussa sellaisenaan.
• Koehenkilö kysyy apua, jolloin tarkkailija toteaa, että tehtävää ei voi tehdä taulukkoeditorin kautta, vaan se pitäisi tehdä koodissa kappale-editoria käyttäen.
• Aika alkaa käydä vähiin, joten tehtävä päätetään hypätä yli.

Tehtävän 2.14 "Lisää haluaamasi taulukon soluun sisällöksi kuva." havainnot:

• Koehenkilö lisää kuvan solun sisällön kehittyneellä editorilla Insert -> Image -painikkeella.
• Koehenkilö miettii, tuliko kuvan koodi laitettua oikein, ja kiinnittää huomiota siihen, että kuva näkyy kehittyneen editorin esikatselussa oikein.
• Koehenkilö tallentaa solun. Solussa ei näy kuvaa, vaan kuvan koodi, sillä solusta jäi puuttumaan md:-merkintä.
• Koehenkilö ihmettelee, miten solua pääsee muokkamaan uudestaan. Pitkän kuvan osoitetekstin myötä sarake on levennyt niin pitkäksi, että suurin osa solusta jää TIMin hampurilaisvalikon taakse. Solun sisällön syöttökentästä näkyy vain reuna, ja kynän kuvake on täysin piilossa, minkä takia koehenkilö ei saa kehittynyttä editoria lainkaan auki.
• Tarkkailija selittää tilanteen ja neuvoo sulkemaan hampurilaisvalikon ruudun vasemman yläkulman painikkeesta.
• Koehenkilö sulkee hampurilaisvalikon ja saa solun sisällön kehittyneen editorin jälleen auki.
• Koehenkilö pohtii, että mikä koodissa voisi olla vikana. Koehenkilö kysyy apua tarkkailijalta ja kysyy, että tuliko jotain tehtyä väärin.
• Tarkkailija vastaa, että mikään ei tullut tehtyä väärin, mutta solusta puuttuu tarvittava merkintä.
• Koehenkilö kysyy, onko tarvittava merkintä aiemminkin käytetty md:. Tarkkailija vastaa suoraan myöntävästi, sillä aika alkaa käydä vähiin.
• Koehenkilö pohtii, mihin kohtaan md: pitää lisätä.
• Koehenkilö lisää md:-merkinnän kuvan koodia ennen. Solussa oli tosin myös tekstiä ennen kuvaa, joten md:-merkintä ei tullut solun alkuun.
• Koehenkilö miettii hetken, miten muokattu solun sisältö tallennetaan. Koehenkilö vaihtaa syöttökentän aktiiviseksi toiseen soluun, mutta kuva ei vieläkään näy solussa.
• Koehenkilö vaihtaa muokkaustilan jälleen kuvan koodin sisältävään soluun, ja vaihtaa md: -merkinnän rivin alkuun. Solun sisällön tallentamisen jälkeen kuva näkyy toivotulla tavalla.