Käyttöliittymät (kevät 2004) Sari A. Laakso H5: HTML-faksi (6+2 p.) Palautus perjantaina 16.4.2004 klo 10.00 mennessä: URL-palautus ja näyttökuvat (screenshots) kuvasarjana huoneen B442 lötteröön. Kuvasarja on vastaavanlainen kuin esim. harjoitustyössä H3, mutta tässä työssä kuvasarja koostuu HTML-proton aidoista näyttökuvista. Tehtävä Tämä tehtävä on jatkoa harjoitustyölle H3 Faksi. Harjoitustyön H3 faksikäyttöliittymästä laaditaan parannettu versio ja siihen integroidaan tämän tehtävän lopussa annetut uudet käyttötapaukset 2 ja 3. Lopullisen käyttöliittymän tulee siis tukea kaikkia kolmea käyttötapausta: H3-tehtävässä annettua käyttötapausta 1 sekä tässä tehtävässä annettuja uusia käyttötapauksia 2 ja 3. Laadi käyttöliittymä tukemaan ainoastaan annettuja käyttötapauksia ja niiden variaatioita. Variaatioita saat muuttamalla käyttötapauksen nykyhetken päivämäärää, esimerkkihenkilöiden tietoja, vastaanottajia ja vastaanottajien lukumäärää, lähetettävän faksin tiedostoja ja niiden sivumääriä sekä aiemmin lähetettyjen faksien valikoimaa. Testaa, että käyttöliittymäsi selviytyy myös annettujen käyttötapausten ketjuttamisesta esimerkiksi järjestyksessä kt 2, kt 3, kt 3, kt 1 (vrt. Toimenpide b. Testaa käyttötapausketjut luentomonisteen sivulta 23 alhaalta sekä s. 29 ja 33). Älä sisällytä käyttöliittymääsi ylimääräisiä toimintoja tai tietoja vanhasta faksiohjelmasta tai muista käyttötapauksista. Käyttöliittymän suunnittelun jälkeen faksista koodataan HTML-käyttöliittymäproto, jota demotaan laskarisalissa omalle laskarinpitäjälle. HTML-proto ei saa koostua kiinteistä näyttökuvista, joiden välillä siirrytään kuvasarjanomaisesti kuten PowerPoint-kalvoja näytettäessä, vaan proton layout on luotava HTML:llä joko käsin koodaamalla tai jotakin editoria käyttäen. Ennen HTML-proton koodaamista käyttöliittymä kannattaa piirtää puhtaaksi esimerkiksi PowerPointilla, mikä vähentää HTML-koodaustyötä. HTML-proton riittää toimia yhdellä seuraavista selaimista: Windows-ympäristössä Internet Explorerin versiolla 6 taikka Linux-ympäristössä Konqueror 3.2:lla tai Firefox 0.8:lla. Valitse näistä itsellesi mieluisin kehitysympäristö. Ohjeet ja ohjauspäivystykset HTML-proton tekemiseen liittyvät ohjeet ja täsmällisemmät tekniset reunaehdot löydät sivulta www.cs.helsinki.fi/u/salaakso/kl-2004/h5-ohjeet/. Ohjesivun yläreunan välilehdiltä pääset käsiksi myös kahteen Karri-Pekka Laakson laatimaan esimerkkiprotoon, joista voit vapaasti kopioida HTML-koodiesimerkkejä omaan protoosi. Proton tekeminen kannattaa aloittaa sen verran ajoissa, että ehdit tarvittaessa hyödyntää ohjauspäivystystä, jos eteen tulee ongelmia. Ohjaukset pitää Karri-Pekka Laakso (sähköposti kpalaaks@cs.helsinki.fi), ja päivystysajat näet webistä harjoitustyön H5 sivulta www.cs.helsinki.fi/u/salaakso/kl-2004/harjtyo5.html. Päivystysaikoina voit mennä kysymään apua mihin tahansa käyttöliittymäratkaisuihin tai proton tekemiseen liittyviin ongelmiin. Copyright 2004 / Sari A. Laakso 1
Oppimistavoitteet HTML-proton laatimisen keskeisimpänä oppimistavoitteena on harjoitella käyttöliittymän kompromissiratkaisujen tekemistä. Kurssin aikana käyttöliittymäratkaisuja on pyritty laatimaan pääsääntöisesti ilman rajoituksia: näyttötilaa on aina riittävästi ja kaikki interaktiotavat oletetaan toteutusresurssien kannalta mahdollisiksi. Nyt HTML-protoa varten on annettu rajallinen näyttöresoluutio (1280x1024), ja HTML toteutustekniikkana asettaa joitain rajoituksia käyttöliittymälle. Osa rajoituksista johtaa siihen, että alkuperäistä optimaalista käyttöliittymäratkaisua on joiltain osin hieman huononnettava eli siihen on pakko tehdä toteutuskompromisseja. Samalla työ havainnollistaa myös sitä, miksi suunnittelu kannattaa aloittaa mahdollisimman optimaalisesta käyttöliittymäratkaisusta ilman rajoitteita. Tässä työssä pitäisi tulla esiin joitain esimerkkejä siitä, kuinka hämmästyttävän hyviin käyttöliittymäratkaisuihin voidaan websovelluksissakin päästä, jos suunnittelija tietää, millainen hyvä ratkaisu olisi ja osaa tavoitella sitä kiertämällä toteutusympäristön rajoitteita. (Tosin aivan loppuun asti emme tätä pysty saamaan selville, koska protoa ei tämän kurssin aikana toteuteta toimivaksi sovellukseksi.) Toisena tavoitteena on oppia laatimaan kuvasarjojen lisäksi tietokoneella toimiva käyttöliittymäproto. Työn tekemisen aikana kertyy kokemusta siitä, kuinka suuri osa protosta kannattaa tehdä toimivaksi ja millaisten kohtien toiminnallisuutta kannattaa vain jäljitellä esimerkiksi kuvaa vaihtamalla. Kolmas oppimistavoite on verrata HTML-proton toteuttamisen ongelmia ja etuja käsin piirrettyihin ja esimerkiksi PowerPointilla laadittuihin paperiprotoihin. Aivan suunnittelun alkuvaiheessa käyttöliittymäluonnosten piirtäminen käsin on todennäköisesti ylivertaisen tehokasta verrattuna PowerPoint- tai HTML-protojen tekemiseen, vaikka tekijä olisi taitava PowerPointin käyttäjä tai HTML-protojen tekijä. Toisaalta esimerkiksi HTML-protoa tehdessä tulee luultavasti esille joitain sellaisia suunnittelunäkökohtia, joita tekijä ei mahdollisesti olisi huomannut pelkkiä PowerPointkuvasarjoja laatiessa lainkaan. Siten HTML-proto mahdollisesti myös täydentää käyttöliittymäsuunnitelmia. Tässä yhteydessä herää todennäköisesti myös ajatuksia siitä, millaisiin tarkoituksiin kannattaa tehdä toimivia protoja ja millaisiin paperiprotot tai PowerPoint-kuvasarjat ovat riittäviä. Kun paperiprotojen ja toimivien protojen tekemisen eduista ja ongelmista on edes vähän kokemusta, on mahdollista arvioida omissa projekteissa, minkälaista protoa missäkin tilanteessa kannattaisi lähteä laatimaan. Työn palautus Palauta HTML-proton URL harjoitustyön H5 sivulta löytyvällä URL-palautuspalvelulla. Lisäksi palauta HTML-proton näyttökuvat (screenshots) paperille tulostettuina kuvasarjoina, joissa käyttäjä suorittaa käyttötapaukset järjestyksessä 1, 2 ja 3. Merkitse näyttökuviin käyttäjän toimenpiteet vastaavalla tavalla kuin harjoitustyössä H3. (Näyttökuvat kannattaa copy-pasteta PowerPointiin ja lisätä käyttäjän toimenpiteet PowerPointissa, tai voit tehdä merkinnät kynällä paperitulosteeseen.) Paperille tulostettu kuvasarja palautetaan huoneen B442 oven vieressä olevaan lötteröön. Työn päällimmäisenä sivuna tulee olla kansilehti, jossa on vähintään seuraavat tiedot: Käyttöliittymät (kevät 2004) Harjoitustyö H5: HTML-faksi Proton URL: www.cs.helsinki.fi/u/vzmakela/kaliproto/ <- tähän oman protosi URL Demoympäristö: Linux/Konqueror <- tähän Windows/IE, Linux/Konqueror tai Linux/Firefox <oma nimesi> Laskariryhmä 3 (ti 14-16) <- tähän oma ryhmäsi Tarkista palautuksen yhteydessä, että olet sijoittanut HTML-protosi public_html-hakemistoon ja antanut protosi hakemistolle ja siihen liittyville tiedostoille tarvittavat oikeudet. Copyright 2004 / Sari A. Laakso 2
Loppudemo Demoon sisällytetään kaikkien kolmen käyttötapauksen 1, 2 ja 3 demosekvenssit tässä järjestyksessä. Käyttötapaukset demotaan käyttötapauskuvausten lopussa olevien toteutuneiden skenaarioiden mukaisesti. Demotun proton on oltava täsmälleen sama kuin määräaikaan mennessä (pe 16.4.) palautettu URL ja paperille tulostettu kuvasarja. Jos demoprotossa ja etukäteen palautetussa protoissa on eroavaisuuksia, nämä kohdat arvostellaan huonoimman vaihtoehdon mukaisesti (vastaavasti kuin useamman erilaisen tenttivastauksen arvostelussa tehdään). Demotilaisuudessa on paikalla ainakin oma laskarinpitäjäsi sekä mahdollisesti myös muita kurssin opettajia. Lisäksi paikalla voi olla muita sinun laskariryhmääsi tai muihin ryhmiin kuuluvia opiskelijoita taikka laitoksemme muita opiskelijoita tai henkilökuntaa. Demot ovat periaatteessa julkisia, mutta tämäntyyppisiin tilaisuuksiin ei yleensä tule ulkopuolisia. Voit lähteä siitä, että paikalla on pari kurssin opettajaa ja mahdollisesti pari sellaista kurssimme opiskelijaa, joiden demot sattuvat olemaan juuri ennen sinua tai sinun demosi jälkeen. Demojen ajankohdat on varattu jo kurssin alkupuolella. Demotekniikasta on annettu esimerkkejä luennolla ja sitä on harjoiteltu laskareissa. Luentomonisteen lopussa on luettelo keskeisimmistä demotekniikkaohjeista (s. 233). Loppudemo on pakollinen osa kurssin suorittamista. Työn arvostelu Käyttöliittymäratkaisuista ja HTML-protosta on jaossa 6 pistettä ja demotekniikasta 2 pistettä. Proton arvostelussa kiinnitetään ensisijaisesti huomiota hyviin käyttöliittymäratkaisuihin, koska kyseessä on käyttöliittymäprototyyppi, joka on tehty demonstroimaan tulevan järjestelmän toimintaa käyttäjän kannalta. HTML-koodia ja toteutusratkaisuja ei tarkasteta. Demotekniikasta annetaan 0-2 pistettä sen mukaan, kuinka hyvin demo on valmisteltu ja kuinka hyvin demossa on noudatettu demotekniikkaluennolla ja luentomonisteessa annettuja ohjeita. Käyttötapaukset Suunnittele HTML-protosi käyttöliittymä tukemaan seuraavia käyttötapauksia 1, 2 ja 3 sekä niiden ilmeisimpiä variaatioita: H3-työn käyttötapaus 1: Testausmateriaalin kommentointi Ks. käyttötapaus 1 ja siihen liittyvä esimerkkidata harjoitustyön H3 tehtäväpaperista: www.cs.helsinki.fi/u/salaakso/kl-2004/harjtyo-h3-faksi.pdf Tommi faksasi Jannelle, Terolle ja Heikille käytettävyystestin testitehtävät ja kuvan testiasetelmasta maanantaina 19.1. heti klo 10 jälkeen. Kaikki saivat materiaalin käsiinsä ajoissa ennen palaveria. Copyright 2004 / Sari A. Laakso 3
Käyttötapaus 2: Heikki Siitosen kutsumanimenä Antero Tämä käyttötapaus aktivoituu välittömästi käyttötapauksen 1 toteutumisen jälkeen. Siitosen tavoite Vaikka Siitosen virallinen etunimi onkin Heikki, hän on koko ikänsä käyttänyt kutsumanimenään Anteroa, joka on hänen toinen nimensä. TAIKissakin hänet tunnetaan Antero Siitosena. Tommi on kuitenkin tähän mennessä luullut, että Siitosen etunimi olisi Heikki. Tilatietoja Tilanne nyt On maanantai 19.1.2004 klo 10.20. Tommi on työpaikallaan yliopistolla. Tommi tietää Antero Siitosen puhelun perusteella, että Siitonen tunnetaan kaikkialla Anterona, vaikka hänen virallinen etunimensä on Heikki. Tommi oli nähnyt Heikki-nimen alun perin rekrytointipapereissa, mutta tästä lähtien hän osaa käyttää oikeaa nimeä Antero Siitonen. Käyttötapaus 1 toteutui juuri äsken, ja Tommilla on faksiohjelma edelleen auki. Heikki Siitonen soittaa Tommille ja kertoo juuri saaneensa Tommin faksin. Samalla hän kertoo, ettei hän käytä virallista etunimeään Heikkiä missään, vaan kaikki ovat aina kutsuneet häntä Anteroksi. Tommi vaihtaa edelleen auki olevaan faksiohjelmaansa Heikki Siitosen nimeksi Antero Siitonen, jottei hän enää jatkossa kiusallisesti käyttäisi väärää nimeä, josta seuraa sekaannuksia myös Anteron työpaikalla TAIKissa. Lopuksi Tommi sulkee ohjelman. Käyttötapaus 3: Viikin testauspaikan ajo-ohjeet Siitoselle Tämä käyttötapaus aktivoituu käyttötapausten 1 ja 2 toteutumisen jälkeen seuraavana päivänä. Siitosen tavoite Antero tietää, että hänen olisi syytä nähdä parin päivän kuluttua pe 23.1. alkavat Tommin pitämät testit, jotta hän osaisi jatkossa hoitaa käytettävyystestaukseen liittyvät uudet työtehtävänsä. Antero ei ole saanut ajo-ohjeita testauspaikalle, mutta hän tietää Tommin kertoman perusteella, että ne pidetään yliopiston tiloissa Viikissä. Hän ei ole aiemmin käynyt Viikissä. Tommin tavoite Projektiryhmän jäsenistä ainoastaan Tommi itse sekä uusi työntekijä Antero Siitonen osaavat pitää käytettävyystestejä. Anteron olisi uutena projektityöntekijänä hyvä oppia testauskäytännöt heti, jotta Tommi saisi delegoitua testaustyöt vähitellen Anterolle ja siten irrotettua itseltään enemmän aikaa mm. projektinhallintaan. Tommi on joulukuussa lähettänyt testauspaikan ajo-ohjeet Mika Oksalalle (HKKK), koska Kauppakorkeakoulun testit pidettiin tuolloin samassa paikassa Viikissä. Copyright 2004 / Sari A. Laakso 4
Tilatietoja Tilanne nyt On tiistai 20.1.2004 klo 13. Tommi on työpaikallaan yliopistolla. Antero Siitonen on työpaikallaan TAIKissa. Ajo-ohjeet testipaikalle Tommin laatimat ajo-ohjeet ovat 1-sivuisessa Word-tiedostossa hänen työkoneensa levyllä. Ajo-ohjesivu näyttää Wordissä tältä: Tommi on aiemmin lähettänyt faksilla Viikin testauspaikan ajo-ohjeet Mika Oksalalle (HKKK) maanantaina 8.12.2003, koska Kauppakorkeakoulun testit pidettiin samassa paikassa Viikissä ennen joulua. Antero Siitosen pitäisi parin päivän kuluttua perjantaina tulla katsomaan Tommin pitämiä käytettävyystestejä Viikkiin, mutta hän ei tiedä paikan täsmällistä sijaintia. Anterolla ei ole Tommin laatimia ajo-ohjeita. Tommi tietää, ettei Anterolla ole täsmällistä käsitystä testipaikan sijainnista. Käyttötapaukset 1 ja 2 ovat toteutuneet edellisenä päivänä. Nyt Tommi katsoo faksiohjelmasta, millaisen ajo-ohjeen ja viestin hän lähetti joulukuussa Mika Oksalalle. Koska ajo-ohje vaikuttaa edelleen hyvältä, hän faksaa sen sellaisenaan Antero Siitoselle mutta kirjoittaa vielä mukaan viestin, jotta Antero muistaisi, että ensimmäinen testi alkaa perjantaina jo klo 9. Copyright 2004 / Sari A. Laakso 5