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ä 2: Desktop-kä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 graafisesta käyttöliittymästä.

Harjoitustyön tarkoituksena oli suunnitella ja toteuttaa työpöytä-käyttöliittymä DMC-ohjelmistoon. Käyttöliittymän vuorovaikutuslaitteita ovat hiiri, näppäimistö sekä graafinen ikkunointijärjestelmä. Käytännössä tässä työssä toteutettiin lomakepohjainen graafinen käyttöliittymä DMC:n kohdelaitteiden hallintaan.

Käyttöliittymän avulla käyttäjä voi selata DMC-ohjelmistossa olevia kohdelaitteita ja muuttaa niiden tilaa. DMC-ohjelmistoa käytetään 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ää.

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ä.

Puoli tuntia on kuitenkin juuri se aika, joka Juholta kestää matkata työpaikalta kotiin. Niinpä Juho päättääkin laittaa saunan päälle juuri hankkimansa etäjärjestelmän kautta, jonka hallintaohjelman hän on juuri pari päivää sitten asentanut työkoneeseensa. Juhoa on myös koko päivän kalvanut ajatus, että ei kai hän vain jättänyt valoja päälle eteiseen, kun aamulla lähti töihin. Samalla kun Juho laittaa saunan päälle, haluaisi hän tarkastaa, ovatko eteisen valot päällä. Juho käyttää työkonettaan ja laittaa sen kautta saunan päälle sekä tarkistaa eteisen valot ennen kun lähtee matkaamaan kohti kotia, jossa pitäisi hänen saavuttuaan odottaa lämmin sauna.

3. Käyttöliittymän toteutus

Toteutettu työpöytä-käyttöliittymä on tehty Java-ohjelmointikielellä ja kehitysympäristönä oli Eclipse, Visual Editor-lisäosalla. Suunnittelun tukena käytin lähinnä suunnitteluohjeistoa Java Look and Feel Design Guidelines, second edition. Tämän lisäksi pyrin noudattamaan Nielsenin heuristiikkoja (mm. ole yhdenmukainen, puhu käyttäjän omaa kieltä jne.).

Käyttöliittymän ikkunan jaoin ensin kahteen osaan. Ikkunan vasemmanpuoleista osaa käyttäjä käyttää huoneiden ja laitteiden valitsemiseen ja ikkunan oikeanpuoleista osaa käyttäjä käyttää valitun laitteen asetusten katsomiseen ja muuttamiseen. Itse koin tämän hyvin loogisena rakenteena, että ikkuna on jaettu kahteen osaan, jossa toisessa ikään kuin liikutaan laitteen ääreen menemällä ensin oikeaan huoneeseen ja tästä edelleen laitteiden ääreen, josta näkee sitten laitteen asetukset oikeanpuoleisesta ikkunasta. Tämä vastaa ehkä parhaiten fyysistä tilannetta, joten käytön pitäisi olla käyttäjälle intuitiivista. 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.

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ä (esim. ei puhuta DMC:n käyttämistä alueista vaan huoneista). Käyttäjän muistikuormaa on myös pyritty rasittamaan mahdollisimman vähän. Oikeastaan käyttäjän ei tarvitse muistaa, kuin, että missä huoneessa laite on. Tämän voi olettaa käyttäjän muistavan. Ohjelma huolehtii siitä, että se näyttää valittavissa olevat huoneet ja laitteet. Tosin jonkinlainen laitehaku olisi ollut kätevä edistyneempiä käyttäjiä varten. Käyttäjä saa myös palautetta oikeanpuoleisen ikkunan alaosaan, jos hän muuttaa esim. laitteen asetuksia. Käyttäjä voi milloin vain sulkea sovelluksen, joten selkeä poistumistapa on aina lähellä. Myös oikopolkuja tarjotaan laitteen asetusten hyväksymiseen (Apply-painike, Alt+A) ja resetoimiseen (Reset-painike, Alt+R).

Käyttöliittymä on myös suunniteltu siten, että käyttäjän ei ole mahdollista laisinkaan antaa virheellistä komentoa, joten virhetilanteita ei pitäisi syntyä. Ohjelma ei esimerkiksi hyväksy numeerisiin kenttiin kirjaimia. Ohjelma ei myöskään anna käyttäjän syöttää mitään arvoja asetuksiin, jotka eivät ole käytettävissä. Käyttäjä voi myös perua laitteen asetusten muutokset Reset-painikkeella, mikäli käyttäjä ei ole hyväksynyt muutoksia Apply-painikkeella.

Käyttöliittymän komponenttien sijoittelussa tukeuduin omiin kokemuksiini ja Java Look and Feel Design Guidelines, second edition- suunnitteluohjeistoon. Ikkuna ei ole pakotettu tiettyyn kokoon, vaan on tiettyyn rajaan asti skaalautuva ja ikkunan komponenttien sijoittelussa on käytetty "layout managereja", jotka asettelevat komponentit oletuksena yleensä suunnitteluohjeistojen mukaisesti. Fonteista muutin vain laitelistan ja valitun laitteen nimen otsikot, jotta ne erottuisivat selvemmin. Muita fontteja ei ole asetettu tietyn kokoisiksi, jota ei suositella Javan suunnitteluohjeistossakaan (Part II: Fundamental Java Application Design. 4: Visual Design. Fonts):

"To ensure consistency, ease of use, and visual appeal, use the supplied default fonts unless there is compelling reason for an application-wide change (such as higher readability). Use the theme mechanism if you do make modifications... Use layout managers to ensure that the layout of your application can handle different font sizes."

Laitteiden asetuksista virta-asetus oli loogista esittää valinta-laatikkona (checkbox), joka esittää, onko virta päällä (ruksi) vai ei (ei ruksia). Muut asetukset olivat loogista esittää lyhyinä tekstikenttinä, koska niihin todennäköisesti harvemmin tulee kolmea numeroa sisältävää lukua suurempia arvoja. Laitteiden asetukset näin parhaana tallentaa siten, että käyttäjän täytyy ne erikseen hyväksyä Apply-painikkeella. Tällöin ei voi esimerkiksi vahingossa laittaa uunia päälle, jos sörkkii epähuomiossa ruksin virta-laatikkoon. Tämä estää virhetilanteita hyvin.

Jonkinlaista ohjeistusta käyttäjälle ajattelin myös tehdä, esimerkiksi help-valikko, josta olisi auennut käyttäjälle erillinen ikkuna, josta käyttäjä olisi löytänyt ohjeistusta ohjelman käyttöön. Ohjelman käyttöliittymä on kuitenkin niin yksinkertainen ja intuitiivinen, että koin turhaksi erillisen help-valikon.

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

Käyttöliittymä on siis jaettu kahteen osaan. Ikkunan vasemmanpuoleisesta osasta käyttäjä valitsee hallittavan laitteen. Laitteen valinta on kaksiportainen. Ensin valitaan huone, jolloin ikkunan vasemmanpuoleiseen osaan ilmestyy lista huoneessa olevista laitteista. Tämän jälkeen käyttäjä valitsee listalta haluamansa laitteen, jolloin kyseisen laitteen asetukset ilmestyvät ikkunan oikeanpuoleiseen osaan. Käyttäjä voi muokata laitteen asetuksia ikkunan oikeanpuoleisen osan kenttiä muuttamalla. Ikkunan oikeanpuoleisen osan alaosassa näkyy tilarivi, johon tulostuu tietoa ohjelman tilasta. Alla on esitetty käyttöliittymän rakenne ja toiminta esimerkin avulla. Esimerkissä käyttäjä käynnistää ohjelman ja haluaa asettaa saunan päälle. Käyttäjä toimii seuraavan kuvasarjan mukaisesti (kuvankaappauksissa oleva ikkunan reunus ei ole itse käyttöliittymän määrittelemä, vaan sen poikkeavuus normaalista Windowsin ikkunasta johtuu ympäristöstä, jossa kuvankaappaukset on otettu):

Kuva 2: Käyttäjä valitsee ensin huoneiden listasta (Room) sen huoneen, jossa kohdelaite sijaitsee. Tässä sauna sijaitsee kylpyhuoneessa (Bathroom). Oletuksena on valittuna huonelistan ensimmäinen huone (Living Room) ja laitelistan ensimmäinen laite.

Kuva 3: Käyttäjä saa eteensä listan huoneessa olevista laitteista ja valitsee listalta laitteen "Sauna", jolloin saunan asetukset ilmestyvät ikkunan oikeanpuoleiseen osaan. Mikäli jotain asetusta ei voi muuttaa, ei kyseistä kenttää voi muokata.

Kuva 4: Käyttäjä voi muutella saunan asetuksia muuttamalla ikkunan oikeanpuoleisia kenttiä ja painamalla lopuksi hyväksymis-painiketta (Apply).

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

Juho haluaa laittaa saunansa lämpiämään 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 DMC Desktop-ohjelman kaksoisklikkaamalla työpöydällä olevaa etähallintajärjestelmän kuvaketta.

Ohjelma aukeaa ja eteen ilmestyy ikkuna, josta Juhon pitäisi etsiä sauna ja laittaa se päälle. Aluksi ohjelma näyttää listan olohuoneen (Living Room) laitteista sekä olohuoneen laitelistan ensimmäisen laitteen tilan (valot). Juho ei kuitenkaan ole kiinnostunut siitä, vaan hän haluaa asettaa saunan päälle. Juho tietää, että sauna löytyy kylpyhuoneesta. Niinpä hän klikkaa hiirellä kohdan Room alasvetovalikkoa ja etsii auenneesta valikosta kylpyhuoneen nimen (Bathroom) ja klikkaa sitä hiirellä. Nyt alasvetovalikon alle ilmestyy lista valitun huoneen laitteista (Devices in selected room).

Juho huomaa listalla saunan, joten hän klikkaa listasta kohtaa Sauna. Juho huomaa nyt, että ikkunan oikeanpuoleiseen osassa lukee yläosassa "Settings for device: Sauna". Juho tietää, että ikkunan oikeanpuoleisessa osassa on nyt saunan asetukset, joita hän voi muuttaa. Ikkunan oikeanpuoleisessa osassa ovat näkyvillä asetukset "Power ON" sekä "Current Temp". Näiden lisäksi on näkyvillä vielä kolmas asetus, joka ei ole käytettävissä (Not used). Juho on kuitenkin kiinnostunut vain laittamaan saunan päälle, joten hän ei välitä muista asetuksista. Kohdan "Power ON" viereisessä laatikossa ei ole ruksia, joten Juho tietää saunan olevan pois päältä. Hän haluaa sen päälle, joten Juho klikkaa hiirellä kyseistä kohtaa, jolloin siihen ilmestyy ruksi. Juho ei kuitenkaan saanut mitään ilmoitusta siitä, että sauna olisi laitettu päälle, koska laitteiden asetusten muutokset pitää vahvistaa painamalla "Apply"-painiketta. Juho klikkaa hiirellä painiketta "Apply", jolloin ikkunan alaosaan tulee viesti vihreällä tekstillä: Changed settings for device 'Sauna'. Juho tietää nyt, että sauna on päällä.

Juho muistaa, että hänen piti myös tarkistaa, ovatko eteisen valot jääneet päälle. Niinpä Juho klikkaa hiirellä kohdan Room alasvetovalikkoa ja etsii auenneesta valikosta eteisen huoneen nimen (Hall) ja klikkaa sitä hiirellä. Nyt alasvetovalikon alle ilmestyy lista valitun huoneen laitteista (Devices in selected room). Oletuksena ohjelma valitsi näytettäväksi huoneesta laitelistan ensimmäisen laitteen, joka sattui olemaan juuri eteisen valot (Lights). Juho katsoo ikkunan oikeanpuoleista osaa, josta hän näkee laitteen tilan. Kohdan "Power ON" viereisessä laatikossa Juho huomaa ruksin. Hän siis jätti kuin jättikin valot päälle. Pikapikaa Juho klikkaa hiirellä kohtaa "Power ON", jolloin ruksi katoaa. Hän vahvistaa muutokset vielä painamalla painiketta "Apply" ja saa ilmoituksen ikkunan alaosaan, että asetusten muutoksen on tehty: Changed settings for device 'Lights'. Nyt Juho tietää, että eteisen valot on kytketty pois päältä. Juho sulkee lopulta DMC Desktop-ohjelman oikean yläkulman ruksi-painikkeesta, sammuttaa koneensa ja lähtee kohti kotona odottavaa lämpenevää saunaa.

6. Yhteenveto

Mielestäni toteutettu käyttöliittymä onnistui melko hyvin. Siinä on vielä hiomista (esim. jonkinlaisen hakutoiminnon lisääminen), mutta on ainakin käytettävyydeltään paljon parempi kuin DMC TargetSimulatorin nykyinen käyttöliittymä, josta laitteita on hieman hankala etsiä ja niiden asetusten luku on niin ikään hankalahkoa. Omasta mielestäni on hyvin loogista jakaa ikkuna kahteen osaan, jossa toisessa ikään kuin liikutaan laitteen ääreen menemällä ensin oikeaan huoneeseen ja tästä edelleen laitteiden ääreen, josta näkee sitten laitteen asetukset oikeanpuoleisesta ikkunasta. Tämä vastaa ehkä parhaiten fyysistä tilannetta, joka on käyttäjälle tuttua.

7. Palaute työstä

Työ oli mielestäni hyvin mielenkiintoinen. Käyttöliittymän rakentaminen ei ollut ainakaan itselleni kovin vaikeaa. Itse asiassa graafisen käyttöliittymän rakentaminen oli mielestäni jopa helpompaa kuin edellisen komentorivipohjaisen käyttöliittymän rakentaminen, koska nyt käyttöliittymän toteutuksessa oli paljon enemmän vapautta. Lisäksi olin jo aikaisemminkin tehnyt vastaavanlaisia pienehköjä käyttöliittymiä. Aikaa tehtävän tekoon ei mennyt edes varattua 16 tuntia, vaan lähemmäs 14 tuntia.

Suurin ongelma työssä oli valitsemani kehitysympäristö. Eclipsessä itsessään ei sinällään ollut mitään vikaa, mutta käyttämäni GUI:n rakennus -lisäosa, Visual Editor, osoittautui melko bugiseksi. Käyttöliittymäkomponenttien lisääminen oli kyllä melko helppoa ja tapahtumankuuntelijoiden lisääminen onnistui myös parilla hiiren klikkauksella. Mutta jossain vaiheessa, kun olin (onneksi) melko loppupuolella käyttöliittymän rakentamisessa, editori yksinkertaisesti lakkasi toimimasta (ruudulla luki vain Loading... eikä mitään tapahtunut). Mitään komponentteja ei saanut lisättyä normaalisti raahaamalla, vaan jouduin koodaamaan loput käsin (onneksi olin tätä jo aikaisemminkin tehnyt, joten siihen ei kauheasti aikaa tuhraantunut). Olin kyllä kokeillut kyseistä lisäosaa jo vuosi tai pari sitten ja tiesin, että jos sillä tekee monimutkaisen käyttöliittymän, voi eteen tulla ongelmia. Mutta halusin kokeilla, oliko lisäosa kehittynyt vuosien varrella vakaammaksi, ilmeisesti ei. Tiedänpähän vastaisuudessa, että en koske kyseiseen lisäosaan ainakaan muutamaan vuoteen.

8. Ohjelmakoodi

Ohjelmakoodi ja suoritettava ohjelma ovat liitteenä zip-pakettina tiedostossa nimeltä DMCGui.zip. Koodista olisi tullut niin sotkuista, jos olisin sen raportin loppuun liittänyt, että näin paremmaksi liittää sen mukaan erillisenä pakettina. Varsinainen oma koodini on tiedostoissa DmcGUI.java ja DMCParser.java. Suoritettava ohjelma käynnistyy Windowsissa avaamalla ohjelma DMCGui.exe.

9. Lähdeluettelo

1. Nielsen, J. 1993. Usability Engineering. USA: Academic Press. 362 s. ISBN 0-12-518406-9.
2. Sun Microsystems Inc. 2001. Java Look and Feel Design Guidelines, second edition. Saatavilla: http://java.sun.com/products/jlf/ed2/book/index.html (23.11.2007)