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ä 4: Mobiilikä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ä matkapuhelin-emulaattorilla ajettuna.

Harjoitustyön tarkoituksena oli suunnitella ja toteuttaa DMC-ohjelmistoon mobiilikäyttöliittymä, joka mahdollistaa kotilaitteiden selaamisen ja laitteiden asetusten muuttamisen etänä. Mobiilikäyttöliittymän on tarkoitus toimia matkapuhelimessa tai PDA:ssa. Käyttöliittymän pääasiallisin syöttölaite on matkapuhelimen numeronäppäimistö ja navigointipainikkeet. Käyttöliittymää rajoittaa erityisesti matkapuhelinten näytön pieni koko. Käytännössä tässä työssä toteutettiin käyttöliittymä matkapuhelimelle MIDP-ympäristöön.

DMC-ohjelmistoa käytetään siis kodin laitteiden etähallintaan. Esimerkiksi kodin TV:n voisi laittaa päälle DMC-ohjelmiston avulla koskematta itse laitteeseen, vaikka töistä käsin. Tässä harjoitustyössä käyttäjä käyttää DMC:tä matkapuhelimellaan tämän suunnitellun käyttöliittymän kautta, jolloin kohdelaitteiden hallinta on nykyistä paljon käyttäjäystävällisempää ja joustavampaa. Käyttöliittymän avulla käyttäjä voi laittaa esim. saunan päälle tai sammuttaa päälle unohtuneet eteisen valot. Käyttöliittymä huolehtii viestien välityksestä DMC-ohjelmistolle, varsinaisen laitteiden tilan muuttamisen hoitaa DMC-ohjelmisto.

2. Suunnittelun lähtötilanne

Tässä esimerkissä käyttäjämme on Juho. Juho kuluttaa työpäivän viimeisiä minuutteja puuduttavassa kokouksessa istuen. Kun kokous alkaa 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ä. 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 matkapuhelimeensa. 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ää kokouksen aikana matkapuhelintaan 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 mobiilikäyttöliittymä on tehty matkapuhelimille suunnattuun J2ME-ympäristöön (tarkemmin MIDP 2.0- ja CLDC 1.1-profiileihin) käyttäen Java-ohjelmointikieltä. Kehitysympäristönä oli Windows Vistassa Sunin Java Wireless Toolkit sekä Eclipse, johon oli asennettuna EclipseME-lisäosa. Lisäksi käytössä oli kevyt kXML 2 XML-parseri, joka sopii hyvin matkapuhelinympäristön asettamiin vaatimuksiin (vähän muistia ja vähän prosessoritehoa).

Suunnittelun tukena käytin lähinnä Barbara Ballardin mobiilikäyttöliittymille suunnattua suunnitteluohjeistoa User Interface Design Guidelines for J2ME MIDP 2.0. Myös työpöytäympäristöön tehtyä suunnitteluohjeistoa Java Look and Feel Design Guidelines, second edition pystyi soveltamaan paikoin (lähinnä yleisiä suunnitteluperiaatteita). 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ä se on mahdollisimman yksinkertainen ja sovellus toimisi mahdollisimman monessa mobiiliympäristössä. Käyttöliittymässä on käytetty J2ME:n peruskomponentteja, joka mahdollistaa tuen laajalle laitevalikoimalle ja tuo myös tuttujen komponenttien kautta yhdenmukaisuutta. Käyttöliittymän käyttö onnistuu helposti matkapuhelimen navigointi- ja numeronäppäimillä ja sopii pieniinkin ruutuihin.

Käyttöliittymän rakenne on siis pidetty suunnitteluohjeiston mukaisesti yksinkertaisena, tiiviinä ja yhdenmukaisena. Navigointi hoituu helposti valitsemalla huoneita/laitteita listasta. Laitteet ja huoneet on erotettu listoissa erilaisilla ikoneilla. Näytön pienuuden takia mitään turhaa tietoa ei ruudulla näytetä, vaan tieto on tiivistä. Listarakenne on hyvin looginen, jolloin käyttäjä ikään kuin liikkuu laitteen ääreen menemällä ensin oikeaan huoneeseen ja tästä edelleen laitteiden ääreen, josta hän näkee sitten laitteen asetukset ja voi muuttaa niitä. 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.

Käyttöliittymässä on pyritty myös ottamaan huomioon suunnitteluohjeistossa mainitut käyttöliittymän nopeus ja tehokkuus, jotka korostuvat erityisesti mobiiliympäristössä. Koska DMC:tä käytetään internetin välityksellä ja mobiililaitteiden internet-yhteydet ovat usein hitaita ja jokainen siirretty bitti yleensä maksaa, on internet-yhteyden käyttöä pyritty minimoimaan. Sovellus ei esimerkiksi tallenna asetuksia DMC:hen, jos niitä ei ole muutettu (eli vaikka käyttäjä tallentaa asetukset, ei yhteyttä DMC:hen oteta, jos asetukset eivät ole muuttuneet). Myös XML-parsija on hyvin kevyt ja sopii näin hyvin mobiiliympäristöön.

Pyrin noudattamaan käyttöliittymän suunnittelussa parhaani mukaan myös 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)

Kuten sanottu, käyttöliittymän listarakenne on mahdollisimman yksinkertainen, yhdenmukainen ja tiivis. Käyttäjän muistikuormaa on myös pyritty rasittamaan mahdollisimman vähän – graafisen käyttöliittymän ansiosta käyttäjän ei tarvitse muistaa ulkoa mitään komentoja. Käyttäjä voi aina poistua sovelluksesta Exit-komennolla, joten selkeä poistumistapa on aina lähellä. Suunnitteluohjeiston mukaisesti käyttäjän pitää myös tietää, missä mennään. Ruudun yläosasta käyttäjä näkee, missä hän tällä hetkellä on. Käyttäjälle annetaan myös palautetta eri toiminnoista, kuten laitteen asetusten tallentamisesta ja virhetilanteista (esim. ei yhteyttä DMC:hen).

Käyttäjän ei ole mahdollista valita olemattomia laitteita tai antaa virheellisiä arvoja laitteiden asetuksiin. Lisäksi virhetilanteita estää myös se, että mikäli käyttäjä on muokannut laitteen asetuksia ja on poistumassa sovelluksesta tallentamatta muutoksia, kysytään häneltä, haluaako hän tallentaa muutokset. Näin vältetään virhetilanteita, joissa käyttäjä ei esim. muista valita tallenna-komentoa. Käyttäjälle tarjotaan myös help-valikon kautta ohjeita sovelluksen käyttöö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ä käynnistää sovelluksen ja laittaa ensin saunan päälle sekä tarkistaa lopuksi eteisen valojen tilan:

Kuva 2: Aloitusnäkymä kun käyttäjä on avannut sovelluksen. Huoneet näkyvät listana, jota käyttäjä voi selata puhelimen navigointinäppäimillä. Vasemmalla toimintonäppäimellä voi lopettaa ohjelman ja oikealla saa apua ohjelman käyttöön.

Kuva 3: Käyttäjä painaa puhelimen nuolinäppäintä alaspäin ja etsii huoneen, jossa tietää saunan olevan ("Bathroom"). Käyttäjä valitsee huoneen puhelimen valintanäppäimellä (tässä emulaattorissa näppäin, jonka päällä hiiri juuri on kuvassa).

Kuva 4: Käyttäjä saa eteensä listan valitsemansa huoneen laitteista. Vasemmasta toimintopainikkeesta käyttäjä pääsee takaisin huonelistaan ja oikean toimintopainikkeen takaa löytyy apua sovelluksen käyttöön sekä poistumiskomento ("Exit").

Kuva 5: Käyttäjä painaa puhelimensa nuolinäppäimiä, etsii listalta saunan ja painaa lopuksi puhelimen valintapainiketta.

Kuva 6: Käyttäjä saa eteensä saunan senhetkiset asetukset. Virta on tällä hetkellä pois päältä (Power: OFF). Käyttäjä käyttää taas puhelimensa nuolipainikkeita ja valitsee "Power: ON" puhelimensa valintanäppäimellä, jotta saisi saunan päälle. Tässä kohtaa voisi muuttaa myös muita asetuksia.

Kuva 7: Tämän jälkeen käyttäjä painaa puhelimensa oikeaa toimintopainiketta ("Menu"), jolloin aukeaa valikko. Tallentaakseen juuri tekemänsä muutoksen, käyttäjä valitsee listalta ensimmäisen vaihtoehdon, eli "Save settings", joko puhelimensa valintanäppäimellä tai painamalla numeropainiketta 1. "Reset settings" asettaisi laitteen asetukset alkuperäisiksi ja "Home" veisi käyttäjän suoraan takaisin huonelistaan.

Kuva 8: Kun käyttäjä on tallentanut muutoksensa, sovellus ilmoittaa käyttäjälle, että muutokset on onnistuneesta tallennettu. Ilmoitus häviää automaattisesti kolmen sekunnin kuluttua.

Kuva 9: Asetusten tallennuksen jälkeen käyttäjä palaa automaattisesti laitteen asetuksiin, josta hän näkee taas laitteen senhetkisen tilan. Käyttäjä valitsee Back-toiminnon puhelimensa vasemmalla toimintonäppäimellä, jolloin hän siirtyy takaisin laitelistaan.

Kuva 10: Käyttäjä haluaa katsoa eteisen valojen tilan (ei pesuhuoneen), joten hänen täytyy mennä vielä yksi askel taaksepäin, jotta hän pääsisi huonelistaukseen. Käyttäjä valitsee vielä kerran Back-toiminnon puhelimensa vasemmalla toimintopainikkeella.

Kuva 11: Käyttäjä on taas huonelistauksessa, josta hän valitsee navigointipainikkeilla eteisen ("Hall").

Kuva 12: Käyttäjälle listataan nyt eteisessä olevat laitteet. Listan ensimmäisenä on eteisen valot ("Lights"), jonka käyttäjä valitsee puhelimensa valintapainikkeella.

Kuva 13: Käyttäjä saa eteensä eteisen valojen nykytilan. Valot ovat päällä ja niiden kirkkausasetus on 10.

Kuva 14: Painamalla puhelimensa oikeaa toimintopainiketta, käyttäjälle avautuu valikko, josta hän voi avata Help-valikon puhelimensa navigointinäppäimillä, saadakseen apua sovelluksen käyttöön.

Kuva 15: Käyttäjälle esitetään sovelluksen senhetkisen osan käyttöohjeet yhdellä ruudulla, jota käyttäjä voi selata alaspäin puhelimen nuolipainikkeilla. Ohjeista pääsee poistumaan painamalla puhelimen oikeaa valintapainiketta ("Done").

Kuva 16: Käyttäjä palaa ohjeiden lukemisen jälkeen automaattisesti takaisin laitteen asetuksiin. Tässä esimerkissä käyttäjä ei muista valita asetusten tallennusta, vaan valitsee valikosta suoraan sovelluksen l opettamisen ("Exit").

Kuva 17: Sovellus varoittaa käyttäjää siitä, että asetuksia on muutettu, mutta niitä ei ole tallennettu ja kysyy käyttäjältä, tallennetaanko tehdyt muutoksen ennen poistumista. Käyttäjän antaman vastauksen jälkeen muutokset tallennetaan, jos niin valittiin ja sovellus suljetaan.

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 kokouksessa, avaa matkapuhelimensa ja käynnistää siihen asentamansa DMCMidlet-ohjelman valitsemalla ohjelman nimen matkapuhelimensa valikkojen kautta.

Sovellus aukeaa ja aluksi ohjelma näyttää listan Juhon kodin huoneista. Juho tietää, että sauna löytyy kylpyhuoneesta. Niinpä hän valitsee listalta kylpyhuoneen nimen (Bathroom) käyttäen matkapuhelimensa nuolipainikkeita ja painaa huoneen nimen päällä lopuksi matkapuhelimensa valintapainiketta. Nyt ruudulle ilmestyy lista kylpyhuoneessa olevista laitteista (Devices in room "Bathroom"). Juho huomaa listalla saunan, joten hän käyttää taas matkapuhelimensa nuolipainikkeita ja valitsee listalta kohdan Sauna painamalla matkapuhelimensa valintapainiketta laitteen nimen kohdalla.

Juho huomaa, että ruudulle ilmestyy nyt saunan asetukset (Device "Sauna"). Kohdassa Power on valittuna asetus OFF, joten Juho tietää, että sauna on tällä hetkellä pois päältä. Mutta Juho haluaa asettaa saunan päälle, joten hän käyttää taas matkapuhelimensa nuolipainikkeita valiten Power-valinnasta ON ja painaa sen kohdalla matkapuhelimensa valintapainiketta. Juho muistaa, että muutokset pitää vielä tallentaa, jotta ne tulisivat voimaan. Niinpä hän avaa valikon painamalla matkapuhelimensa oikeaa toimintonäppäintä. Ruudulle aukeaa valikko, jossa lukee ensimmäisenä Save settings. Juho valitsee listan ensimmäisen kohdan painamalla matkapuhelimensa valintapainiketta. Valinnan jälkeen sovellus ilmoittaa Juholle "Settings for device Sauna were succesfully saved", jolloin Juho tietää, että hänen muutoksensa ovat tallennettu ja sauna on näin ollen päällä.

Juho muistaa, että hänen piti myös tarkistaa, ovatko eteisen valot jääneet päälle. Niinpä Juho valitsee kaksi kertaa toiminnon Back painamalla kaksi kertaa matkapuhelimensa vasenta toimintopainiketta. Näin Juho siirtyy ensin takaisin laitelistaan ja sitten takaisin huonelistaan. Huonelistalta Juho huomaa eteisen (Hall), joten hän valitsee sen matkapuhelimensa navigointipainikkeilla. Eteen aukeaa nyt eteisen laitteet, joista ensimmäinen on eteisen valot (Lights), jonka Juho valitsee matkapuhelimensa valintapainikkeella.

Ruudulle ilmestyy nyt eteisen valojen senhetkinen tila, josta Juho huomaa, että kohdassa Power on valittuna valinta ON. Juho siis jätti kuin jättikin valot päälle. Pikapikaa Juho valitsee matkapuhelimensa navigointipainikkeilla kohdasta Power vaihtoehdon OFF. Kokous loppui juuri, joten Juhon on aika lähteä kotia kohti. Hän lopettaa sovelluksen avaamalla valikon matkapuhelimensa oikealla toimintopainikkeella (Menu) ja valitsemalla matkapuhelimensa navigointipainikkeilla valikosta kohdan Exit. Ruudulle ilmestyy viesti "You have changed the settings for device 'Lights'. Save changes before exiting? Yes/No". Juho muistaakin nyt, että hän ei hoksannut tallentaa äskeisiä eteisen valoihin tekemiään muutoksia. Juho haluaa tietenkin, että muutokset astuvat voimaan, joten hän valitsee matkapuhelimensa oikealla toimintopainikkeella vaihtoehdon Yes. Sovellus tallentaa muutokset ja sulkee itsensä. Nyt Juho tietää, että sauna on päällä ja eteisen valot on kytketty pois, joten hän päättää työpäivänsä ja lähtee kohti kotona odottavaa lämpenevää saunaa.

6. Yhteenveto

Mielestäni toteutettu käyttöliittymä onnistui melko hyvin. Siinä on kyllä vielä hiomista. Sovellusta olisi mielenkiintoista kokeilla ihan oikealla matkapuhelimella, mutta en ainakaan omaan puhelimeeni saanut sitä jostain syystä siirrettyä. Lisäksi käyttöliittymässä pitäisi todellisuudessa ottaa huomioon internet-yhteydestä aiheutuva viive. Nyt käyttöliittymää käytetään emulaattorilla samassa koneessa, jossa DMC pyörii, jolloin yhteys DMC:hen on erittäin nopea, mutta todellisuudessa matkapuhelimelta kestäisi varmaan sekunteja ottaa yhteys DMC:hen, joka vaatisi jo jonkinlaista palautetta käyttäjälle. Myös jonkinlaisia oikopolkuja olisi ehkä hyvä lisätä kehittyneemmille käyttäjille, esimerkiksi kaikkien järjestelmässä olevien laitteiden listaus tai laitteen hakeminen ID-numeron perusteella, jolloin ei aina tarvitsisi selata huoneita ja laitteita läpi. Kaiken kaikkiaan käyttöliittymä on kuitenkin mielestäni ihan onnistunut.

7. Palaute työstä

Työ oli mielestäni erittäin mielenkiintoinen. Käyttöliittymän tekninen rakentaminen ei ollut ainakaan itselleni kovin vaikeaa. Mobiilikäyttöliittymän rakentaminen oli mielestäni jopa helpompaa kuin työpöytäympäristöön tehdyn graafisen käyttöliittymän rakentaminen, koska J2ME-ympäristössä on paljon vähemmän eri komponentteja käytössä. Tosin itse J2ME-ympäristön opetteluun meni kyllä tunti jos toinenkin, mutta tulipahan samalla opiskeltua hieman mobiiliohjelmointiakin, jota en varsinaisesti ollut aikaisemmin tehnyt. Aikaa tehtävän tekoon meni arviolta noin 25 tuntia, josta hieman alle puolet meni varsinaiseen koodaukseen (~12h), hieman yli neljännes aiheen opiskeluun ja ympäristön asennukseen (~8h) sekä loput vajaa neljännes dokumentointiin (~5h).

Mihinkään suurempiin ongelmiin en käyttöliittymän kehittämisessä törmännyt. Ympäristön pystyttäminen oli melko helppoa. XML-parserin kanssa sai hieman taistella ennen kun ymmärsin, miten se toimii. Tehtävän tekoon tarvittavat apuluokat olisivat tosin voineet olla saatavilla jo paljon aikaisemminkin. DMC:n kanssa en kuitenkaan törmännyt suurempiin ongelmiin.

8. Ohjelmakoodi

Ohjelmakoodi on liitteenä zip-pakettina tiedostossa nimeltä DMCMidlet.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än ohjelmakoodi on zip-paketin src-kansiossa tiedostossa DMCMidlet.java. Tarvittavat tiedostot matkapuhelimessa tai emulaattorissa suoraan ajettavaa sovellusta varten ovat zip-paketin deployed-kansiossa olevat DMCMidlet.jar ja DMCMidlet.jad. Sovelluksen toiminta on testattu Windows Vistassa Sun Java Wireless Toolkit 2.5.2:ssa.

9. Lähdeluettelo

1. Nielsen, J. 1993. Usability Engineering. USA: Academic Press. 362 s. ISBN 0-12-518406-9.
2. Ballard, B. 2005. User Interface Design Guidelines for J2ME MIDP 2.0. Lulu.com. 108 s. ISBN 1-41-162429-7.
3. Sun Microsystems Inc. 2001. Java Look and Feel Design Guidelines, second edition. Saatavilla: http://java.sun.com/products/jlf/ed2/book/index.html (6.1.2008)
4. Stefan Haustein. kXML (kevyt XML-parseri). Saatavilla: http://kxml.sourceforge.net/kxml2/ (6.1.2008)
5. EclipseME (J2ME-lisäosa Eclipseen). Saatavilla: http://eclipseme.org/ (6.1.2008)
6. Sun Java Wireless Toolkit for CLDC (J2ME-ympäristö Windowsiin). Saatavilla: http://java.sun.com/products/sjwtoolkit/ (6.1.2008)