Sisällys

• 1. Johdanto
• 2. Suunnittelun lähtötilanne
• 3. Käyttöliittymän toteutus
• 4. Käyttöliittymän rakenne ja toiminta
• 5. Käyttöliittymän ja käyttäjän välinen vuorovaikutus
• 6. Yhteenveto
• 7. Palaute työstä
• 8. Ohjelmakoodi
• 9. Lähdeluettelo

Tehtävä 3: Selainkäyttöliittymä

Tämän sivun harjoitustyö oli osa Teknillisen korkeakoulun tietotekniikan koulutusohjelman kurssin T-121.5300 Käyttöliittymäsuunnittelu suoritusta. Harjoitustyö arvosteltiin asteikolla hylätty/hyväksytty/ansiokas. Ansiokkaasti hyväksytty työ ylitti merkittävästi kurssin oppimistavoitteet ja tehtävänannossa esitetyt vaatimukset.

Harjoitustyön tarkoituksena oli suunnitella ja toteuttaa käyttöliittymä DMC-ohjelmistoon (Distributed Media Center), joka on siis laitteiden etäkäyttöön tarkoitettu järjestelmä. Käyttöliittymästä piti rakentaa oikeassa ympäristössä toimiva sovellus sekä raportoida käyttöliittymän toteutus. Käyttöliittymän lähdekoodit piti palauttaa raportin liitteenä. Jotta käyttöliittymää pystyisi käyttämään oikeasti, vaatisi se, että tietokoneessa on käynnissä DMC-ohjelmisto, jota ei tekijänoikeudellisista syistä tältä sivulta ole saatavilla. Näin ollen tämän sivun lopusta löytyvä käyttöliittymä ei toimi täysin oikein, jos yrität ajaa sitä omalla koneellasi.

1. Johdanto

Kuva 1: Kuvankaappaus toteutetusta selainkäyttöliittymästä.

Harjoitustyön tarkoituksena oli suunnitella ja toteuttaa DMC-ohjelmistoon selainkäyttöliittymä, joka mahdollistaa jonkin kotilaitteen ajastamiseen. Selainkäyttöliittymän pääasiallisin syötelaite on hiiri tai stylus-kynä, sen sijaan näppäimistön käyttö on usein toissijaista. Käytännössä tässä työssä toteutettiin selainkäyttöliittymä saunan ajastamiseen.

DMC-ohjelmistoa käytetään siis laitteiden etähallintaan. Esimerkiksi kodin TV:n voisi laittaa päälle DMC-ohjelmiston avulla koskematta itse laitteeseen. Tässä harjoitustyössä käyttäjä käyttää DMC:tä tämän suunnitellun käyttöliittymän kautta, jolloin kohdelaitteiden hallinta on nykyistä paljon käyttäjäystävällisempää. Käyttöliittymän avulla käyttäjä voi laittaa saunan päälle tai pois ajastetusti. Käyttöliittymä huolehtii viestien välityksestä DMC-ohjelmistolle, varsinaisen ajastuksen toteutuksen hoitaa DMC-ohjelmisto.

2. Suunnittelun lähtötilanne

Tässä esimerkissä käyttäjämme on Juho. Juho on jäänyt ylitöihin kiireisen työpäivän vuoksi ja naputtaa yhä tietokoneellaan työtehtäviään. Kun työt alkavat olla päätöksessään, Juho miettii, että haluaisi rankan työpäivän päätteeksi päästä heti kotiin rentoutumaan lämpimään saunaan. Mutta saunan lämpiämistä joutuu odottamaan kotiin päästyään puolisen tuntia, mikä ei Juhoa miellytä. Matka autolla kotiin taas kestää Juholla tunnin, joten vaikka saunan saisi päälle etänä tietokoneella, ei se autolla ajaessa helposti onnistuisi. Ainut järkevä tapa onkin käyttää ajastinta. Niinpä Juho päättääkin laittaa saunan päälle ajastetusti juuri hankkimansa etäjärjestelmän kautta, jonka hallintaohjelmaa hän on juuri pari päivää sitten kokeillut työkoneessaan. Juho käyttää työkonettaan ja laittaa sen kautta saunan päälle ajastetusti ennen kun lähtee matkaamaan kohti kotia, jossa pitäisi hänen saavuttuaan odottaa lämmin sauna.

3. Käyttöliittymän toteutus

Toteutettu selainkäyttöliittymä on tehty käyttäen XHTML- ja CSS-kieliä käyttöliittymän ulkoasun kuvaamiseen ja JavaScriptiä toiminnallisuuteen (AJAX). Kehitysympäristönä oli tavallinen tekstieditori (Notepad++) ja Firefox 2.0 -selain Windowsissa. Suunnittelun tukena käytin lähinnä Mike Foskettin suunnitteluohjeistoa Accessible forms: Guidelines, examples and accessible JavaScript tricks. Tämän lisäksi pyrin noudattamaan Nielsenin heuristiikkoja (mm. ole yhdenmukainen, puhu käyttäjän omaa kieltä jne.).

Käyttöliittymän suunnittelussa pyrin siihen, että näppäimistöä ei olisi pakko käyttää lainkaan, vaan kaikki onnistuisi pelkästään hiirellä (tai stylus-kynällä), jotka ovat pääasiallisia syötelaitteita. Tässä onnistuinkin hyvin, koska käyttöliittymää voi hyvin käyttää ilman näppäimistöä.

Käyttöliittymä on jaettu oikeastaan kahteen osaan. Lomakkeen yläosasta käyttäjä voi lisätä uuden ajastuksen ja alaosasta käyttäjä näkee olemassa olevat ajastukset ja voi poistaa niitä. Käyttöliittymän kieli on englanti. Se olisi järkevää lokalisoida myös suomeksi, mutta en nähnyt tätä tehtävän kannalta oleellisena. Lisäksi käyttöliittymään olisi hyvä lisätä lomakkeiden kenttien viereen erikseen avattavia käyttöohjeita – tätä yritinkin JavaScriptillä, mutta se kävi niin hankalaksi, että päätin jättää käyttöohjeet pois, koska lomake on kuitenkin melko yksinkertainen.

Pyrin noudattamaan parhaani mukaan kaikkia Nielsenin heuristiikkoja:

1. Käytä yksinkertaista ja luonnollista vuoropuhelua (Simple and natural dialogue)
2. Puhu käyttäjien omaa kieltä (Speak the users' language)
3. Älä rasita käyttäjän muistikuormaa (Minimize the user' memory load)
4. Ole yhdenmukainen (Consistency)
5. Anna käyttäjälle palautetta toiminnoista (Feedback)
6. Osoita selkeä poistumistapa (Clearly marked exits)
7. Anna mahdollisuus oikopolkuihin (Shortcuts)
8. Anna selkeät virheilmoitukset (Good error messages)
9. Vältä virhetilanteita (Prevent errors)
10. Anna riittävä ja selkeä apu (Help and documentation)

Käyttöliittymästä on pyritty tekemään mahdollisimman yksinkertainen ja käyttämään käyttäjän omaa kieltä. Käyttäjän muistikuormaa on myös pyritty rasittamaan mahdollisimman vähän. Käyttäjän ei esimerkiksi tarvitse muistaa päiväyksen muotoa (esim. 2007/01/31 21:50:00), vaan päiväyksen muotoilun hoitaa automaattisesti esiin avautuva ikkuna, josta päivän ja kellonajan voi valita hiirellä. Lisäksi käyttäjä voi listata kaikki ajastukset, jos hän on unohtanut, mitä ajastuksia on asettanut millekin päivälle, eikä jaksa käydä läpi jokaisen päivän ajastuksia. Käyttäjän ei edes tarvitse muistaa nykyistä päiväystä, koska se on asetettu automaattisesti lomakkeen ylimpään kenttään.

Käyttäjä saa myös palautetta toiminnoistaan lomakkeen alaosaan, jos hän lisää esim. uuden ajastuksen tai poistaa vanhoja. Virheelliset toiminnot näkyvät myös virheilmoituksina lomakkeen alaosassa. Käyttäjä voi milloin vain poistua lomakkeesta, joten selkeä poistumistapa on aina lähellä.

Käyttöliittymän komponenttien sijoittelussa tukeuduin omiin kokemuksiini ja suunnitteluohjeistoon Accessible forms: Guidelines, examples and accessible JavaScript tricks. Lomakkeessa on käytetty tavallisia XHTML:n lomakekenttiä. Kenttien ja niiden kuvausten sijoittelussa on noudatettu suunnitteluohjeiston neuvoja. Esimerkiksi jokaiselle syötekentälle (input) on asetettu nimilappu (label) ja samaan toimintoon liittyvät kentät on ympäröity fieldseteillä. Lisäksi kentän kuvaus edeltää itse kenttää, paitsi radio- ja checkbox-painikkeissa, joissa kuvaus pitää nimenomaan olla kentän jälkeen. Lisäksi radio-painikkeita ei suositeltu laitettavan vaakasuoraksi riviksi vaan allekkain.

Uuden ajastuksen päiväyksen ja kellonajan valinta on mielestäni kaikista helpointa erikseen avautuvasta, kalenteria muistuttavasta, pienestä ikkunasta. Tästä käyttäjän on helppo hahmottaa viikot ja kuukaudet ja valita oikea päivä. Tämä myös vähentää käyttäjän virhetilanteita, koska vääriä ajastusaikoja ei ehkä tule niin paljoa. Kalenteri ei ole oma toteuttamani, vaan kyseessä on internetistä saatavilla oleva valmis sovellus (ks. lähdeluettelo).

Saunan virta-asetus oli luonnollista esittää radio-painikkeina, koska valittavana on joko ON tai OFF, ja jompikumpi on pakko valita. Sen sijaan kaikkien ajastusten listaamisen valinta oli järkevää esittää checkboxina, koska kyseessä on true/false-arvo (eli näytetäänkö kaikki vai ei). Kaikki syötekentät ovat suunnitteluohjeiston mukaisesti sen mittaisia, minkä mittaisia arvoja niihin oletetaan syötettävän.

4. Käyttöliittymän rakenne ja toiminta

Alla on esitetty käyttöliittymän rakenne ja toiminta esimerkin avulla. Esimerkissä käyttäjä lisää ja poistaa yhden ajastuksen:

Kuva 2: Oletusnäkymä, kun käyttäjä avaa lomakkeen. Uuden ajastimen päiväys-kenttään (select date and time) asetetaan oletuksena nykyinen päiväys ja kellonaika. Lomakkeen alaosassa näkyvät oletuksena tämän päivän ajastukset (jos yhtään).

Kuva 3: Käyttäjä voi asettaa uuden ajastimen päiväyksen ja kellonajan klikkaamalla hiirellä päiväys-kentän (select date and time) oikealla puolella olevaa painiketta (...). Tällöin avautuu pieni kalenteri, josta käyttäjä voi valita haluamansa päivän ja kellonajan klikkaamalla hiirellä päivän numeroa. Päivän valinnan jälkeen päiväys ilmestyy automaattisesti päiväys-kenttään (select date and time). Kalenteri sulkeutuu tällöin automaattisesti. Kalenteri sulkeutuu automaattisesti myös, jos käyttäjä klikkaa hiirellä kalenterin ulkopuolella.

Kuva 4: Käyttäjä vahvistaa uuden ajastuksen lisäämisen klikkaamalla "Add new timer"-painiketta. Ilmoitus ajastuksen lisäämisestä ilmestyy lomakkeen alalaitaan (tai virheilmoitus punaisella tekstillä, mikäli päiväyksen muoto ei ole hyväksyttävä). Lisäksi ajastimien lista päivittyisi, mikäli siinä olisi valittuna näytettäväksi kaikki ajastukset tai ajastukset samalta päivältä, joka oli uuden lisätyn ajastuksen päiväys.

Kuva 5: Käyttäjä voi valita näytettäväksi kaikki olemassa olevat ajastukset laittamalla ruksin kohtaan "Show timers for every day" ja painamalla painiketta "Refresh list". Tällöin kaikki ajastukset listataan kenttään "Timers for the selected day". Lomake ilmoittaa listan päivityksestä lomakkeen alaosassa viestillä "INFO: Timer list refreshed". Select date -kenttä asetetaan samalla muokkaamattomaksi, koska sen muokkaamisella ei ole vaikutusta, mikäli ruksia ei oteta ensin pois kohdasta "Show timers for every day".

Kuva 6: Käyttäjä voi myös listata ajastukset tiettyä päivää kohden klikkaamalla kentän "Select date" vieressä olevaa painiketta (jos painike ei ole käytössä, pitää ensin ottaa ruksi pois kohdasta "Show timers for every day"). Tällöin avautuu kalenteri, josta käyttäjä voi valita haluamansa päivän klikkaamalla päivän numeroa hiirellä.

Kuva 7: Ajastinlista päivittyy käyttäjän valitsemaan päivään, kun käyttäjä painaa "Refresh list"-painiketta.

Kuva 8: Käyttäjä voi poistaa listalta ajastuksia valitsemalla haluamansa ajastimen listalta hiirellä ja klikkaamalla lopuksi painiketta "Delete selected timer".

Kuva 9: Kun käyttäjä on painanut "Delete selected timer"-painiketta, ilmoitetaan ajastuksen poistosta käyttäjälle lomakkeen alaosaan ilmestyvällä viestillä. Samalla ajastinlista päivittyy vastaamaan poiston jälkeistä tilannetta.

5. Käyttöliittymän ja käyttäjän välinen vuorovaikutus

Juho haluaa laittaa saunansa lämpiämään ajastetusti työpaikaltaan käsin, jotta pääsee kotiin saavuttuaan heti lämpimään saunaan. Hän istuu käynnissä olevan työkoneensa ääreen ja avaa selaimensa kaksoisklikkaamalla työpöydällä olevaa Firefox-kuvaketta. Hän on tallentanut etähallintajärjestelmän lomakkeen Internet-osoitteen selaimensa kirjanmerkkeihin ja valitsee sen sieltä. Osoiterivillä lukee nyt http://127.0.0.1:12012/ui/SaunaTimer.html.

Lomake ilmoittaa, että se on valmis käytettäväksi viestillä "INFO: Form loaded succesfully". Kentässä "Select date and time" Juho näkee nyt nykyisen päiväyksen ja kellonajan. Juho tietää, että hän pääsee lähtemään töistä kello 17:00 ja hän on perillä kotona 18:00. Saunan lämpiäminen kestää puoli tuntia, joten ajastus pitäisi asettaa alkamaan tälle päivälle kello 17:30. Niinpä Juho klikkaa hiirellä kentän "Select date and time" viereistä painiketta (...), jolloin selaimeen aukeaa pieni kalenteri. Hän asettaa kalenterin alaosassa olevat tunnit arvoon 17 klikkaamalla hiirellä tuntien viereisiä nuolipainikkeita sekä minuutit arvoon 00 klikkaamalla hiirellä minuuttien viereisiä nuolipainikkeita. Sitten Juho klikkaa hiirellä tämän päivän päivämäärää kalenterista, joka näkyy muista päivistä erotettuna paksunnettuna. Nyt Juhon valitsema päiväys ja kellonaika näkyy kentässä "Select date and time". Juho tarkistaa vielä kentästä, että päiväys ja kellonaika on varmasti oikein – ja onhan se.

Juho haluaa siis laittaa saunan päälle, joten hän jättää kohdan "Please select to set the Sauna ON or OFF" asentoon ON. Lopuksi Juho klikkaa painiketta "Add new timer", jolloin lomake ilmoittaa lomakkeen alaosassa "INFO: Added a new timer: 2007/12/12 17:00:00 --> Set sauna ON". Juho tietää nyt, että hänen ajastuksensa on kirjattu järjestelmään. Ajastus ilmestyi myös ajastimien listaan kenttään "Timers for the selected date". Juho tietää nyt, että ajastus on päällä, joten hän sulkee selaimen ikkunan oikeasta yläkulmasta. Hän jatkaa töitään vielä vähän aikaa ja lähtee lopulta töistä kello 17:00 ajamaan kohti kotia tietäen, että perillä odottaa lämmin sauna.

6. Yhteenveto

Mielestäni toteutettu käyttöliittymä onnistui melko hyvin. Siinä on vielä hiomista. Esimerkiksi jonkinlaisen käyttöohjeen lisääminen olisi järkevää. Lisäksi toimivuutta eri selainten kanssa pitäisi parantaa. Kaiken kaikkiaan käyttöliittymä on kuitenkin mielestäni ihan onnistunut.

7. Palaute työstä

Työ oli mielestäni hyvin mielenkiintoinen. Käyttöliittymän rakentaminen ei ollut ainakaan itselleni kovin vaikeaa. Itse asiassa selainpohjaisen käyttöliittymän rakentaminen oli mielestäni jopa helpompaa kuin edellisen työpöytäympäristöön tehdyn graafisen käyttöliittymän rakentaminen. Osittain tämä johtui varmasti siitä, että olin jo aikaisemminkin tehnyt vastaavanlaisia pienehköjä käyttöliittymiä. Tosin työpöytäkäyttöliittymässä oli ehkä hieman enemmän vapautta ja siihen sai paikoitellen helpommin monipuolisempia toimintoja (esim. väärän muotoisen syötteen estäminen kokonaan). Aikaa tehtävän tekoon meni arviolta noin 15 tuntia.

Mihinkään suuriin ongelmiin en käyttöliittymän kehittämisessä törmännyt. Hieman harmitti kyllä se, että aikaa paloi taas jonkin verran DMC:n bugien kanssa pähkäilyyn (ajastinjono ei toiminut oikein ja asian pähkäilyssä meni jonkin verran aikaa hukkaan). Tosin päivitys bugiin tuli kyllä nopeasti Optimaan, mutta ei ole mielestäni hyvä, että opiskelijat toimivat tässä järjestelmän testaajina – pitäisi keskittyä oleelliseen, eli käyttöliittymän rakentamiseen.

8. Ohjelmakoodi

Ohjelmakoodi on liitteenä zip-pakettina tiedostossa nimeltä SaunaTimer.zip. Koodista olisi tullut niin sotkuista, jos olisin sen raportin loppuun liittänyt, että näin paremmaksi liittää sen mukaan erillisenä pakettina. Varsinainen käyttöliittymä on tiedostossa SaunaTimer.html. Lisäksi paketissa on muutama JavaScript-tiedosto sekä CSS-tyylitiedosto ja kuvia. Lomake käynnistyy avaamalla DMC ja menemällä selaimella osoitteeseen http://127.0.0.1:12012/ui/SaunaTimer.html. Lomakkeen toimivuus on testattu Windowsissa selaimella Firefox 2.0.0.11. Opera 9.24:llä ja IE7:llä on jotain ongelmia ajastimien listan näyttämisessä (Operalla näkyy vain yksi ajastus ja IE7 taas sekoilee täysin ko. listan kanssa). Kalenterin käyttö vaatii toimivan Internet-yhteyden, koska kalenterin skriptit ladataan kalenterin toteuttaneen Zapatech:in palvelimilta.

9. Lähdeluettelo

1. Nielsen, J. 1993. Usability Engineering. USA: Academic Press. 362 s. ISBN 0-12-518406-9.
2. Foskett, Mike. 2006. Accessible forms: Guidelines, examples and accessible JavaScript tricks. Saatavilla: http://www.websemantics.co.uk/tutorials/accessible_forms/ (11.12.2007)
3. Zapatech: JavaScript Calendar Wizard (kalenterin koodi). Saatavilla: http://www.zapatec.com/website/main/coding.jsp (12.12.2007)