TAMK Ohjelmistotekniikka G Graafisten käyttöliittymien ohjelmointi Herkko Noponen Osmo Someroja. Harjoitustehtävä 2: Karttasovellus Kartta

Transkriptio

1 TAMK Ohjelmistotekniikka G Graafisten käyttöliittymien ohjelmointi Harjoitustehtävä 2: Karttasovellus Kartta

2 TAMK Karttasovellus Kartta Sivu 2/8 Sisällysluettelo 1. JOHDANTO VAATIMUSMÄÄRITTELY Toiminnalliset vaatimukset Ohjelman toteuttamat toiminnot Käyttötavat toiminnoittain Zoom in toiminto menusta klikkaamalla Zoom out toiminto menusta klikkaamalla Kuvan siirtotoiminto menusta klikkaamalla Kuvan siirtotoiminto työkaluriviltä klikkaamalla Kuvan zoomaaminen työkaluriviltä Kuvan avaus kovalevyltä Kuvan liikuttaminen hiiren avulla Kuvan zoomailu hiiren avulla Tilakaaviot Hiiren toiminnot tilakaaviona Ei-toiminnalliset vaatimukset Käyttöliittymän ulkoasu Alasvetovalikkojen suunnitelma File-valikko View-valikko About-valikko Työkalurivin suunnitelma KÄYTTÖLIITTYMÄN TYYLIOPAS Suunnitteluperiaatteet Ikonien värit KÄYTETTÄVYYSTESTIT Käyttöliittymän käytettävyystestit Käytettävyystestien tulokset...7

3 TAMK Karttasovellus Kartta Sivu 3/8 1. JOHDANTO Tämä dokumentti esittelee Microsoftin MFC-tekniikalla luodun karttasovelluksen nimeltään Kartta. Dokumentissa on ohjelman vaatimusmäärittely ja käyttöliittymän tyyliopas. Myös käytettävyystesti on sisällytetty dokumentin loppuun. 2. VAATIMUSMÄÄRITTELY Ohjelman tulee toteuttaa luvussa 2.1 esitetyt toiminnalliset vaatimukset ja luvussa 2.2 esitetyt eitoiminnalliset vaatimukset. 2.1 Toiminnalliset vaatimukset Ohjelman tulee toteuttaa luvussa listatut toiminnot. Listatut toiminnot on kuvattu tarkemmin käyttötapoina luvussa Ohjelman toteuttamat toiminnot Ohjelman tulee toteuttaaa seuraavan listan mukaiset toiminnot mahdollisuus liikuttaa bittikarttaa neljään eri suuntaan (ylös, alas, oikealle, vasemmalle). mahdollisuus Zoomata n. 10% sisään tai ulospäin kuvaa. yllä olevat toiminnot menussa sekä työkalurivillä. käyttäjä voi Zoomata käyttäen hiiren oikeaa ja vasenta näppäintä. käyttäjän voi liikuttaa kuvaa portaattomasti hiiren avulla bittikartta-tiedoston avaus Käyttötavat toiminnoittain Zoom in toiminto menusta klikkaamalla Toiminnon kuvaus Käyttäjä zoomaa kuvaa sisäänpäin 1. Käyttäjä avaa View-valikon menusta 2. Käyttäjä painaa Zoom in (+) nappia 3. Kuva zoomautuu sisäänpäin 10% Zoom out toiminto menusta klikkaamalla Toiminnon kuvaus Käyttäjä zoomaa kuvaa ulospäin 1. Käyttäjä avaa View-valikon menusta 2. Käyttäjä painaa Zoom out (-) nappia 3. Kuva zoomautuu ulospäin 10%

4 TAMK Karttasovellus Kartta Sivu 4/ Kuvan siirtotoiminto menusta klikkaamalla Toiminnon kuvaus Käyttäjä liikuttaa kuvaa 1. Käyttäjä avaa View-valikon menusta 2. Käyttäjä painaa yhtä Move xxxx napeista 3. Kuva liikkuu siihen suuntaan mitä nappia käyttäjä painoi Kuvan siirtotoiminto työkaluriviltä klikkaamalla Toiminnon kuvaus Käyttäjä liikuttaa kuvaa 1. Käyttäjä painaa työkaluriviltä haluamaansa suuntanuolta 2. Kuva liikkuu siihen suuntaan mitä nappia käyttäjä painoi Kuvan zoomaaminen työkaluriviltä Toiminnon kuvaus Käyttäjä zoomaa kuvaa 1. Käyttäjä painaa + tai painiketta työkaluriviltä 2. Kuvaa zoomataan käyttäjän haluamaan suuntaan Kuvan avaus kovalevyltä Toiminnon kuvaus Käyttäjä avaa bittikartta-tiedoston katseltavaksi 1. Käyttäjä klikkaa valikosta file->open tai työkaluriviltä open nappia 2. Käyttäjä etsii ja valitsee sopivan bittikartta-tiedoston 3. Käyttäjä painaa Ok 4. Kuva avataan näkyviin Kuvan liikuttaminen hiiren avulla Toiminnon kuvaus Käyttäjä liikuttaa kuvaa portaattomasti hiirellä 1. Käyttäjä painaa kuvan päällä vasemman hiiren napin pohjaan 2. Käyttäjä liikuttaa hiirtä pitäen napin pohjassa 3. Kuva liikkuu hiiren liikkeen mukaan Kuvan zoomailu hiiren avulla Toiminnon kuvaus Käyttäjä zoomaa kuvaa hiirennapin painalluksella 1. Käyttäjä painaa vasenta/oikeaa hiiren nappia kuvan päällä 2. Kuva zoomautuu sisään/ulos

5 TAMK Karttasovellus Kartta Sivu 5/ Tilakaaviot Hiiren toiminnot tilakaaviona 2.2 Ei-toiminnalliset vaatimukset Käyttöliittymän ulkoasu Käyttöliittymän ulkoasu perustuu kuvanäkymään, valikkoriviin ja työkaluriviin. Käyttöliittymän pitää olla ulkoasultaan windows-ohjelmien mukainen ja valikkojen yksinkertaiset. Työkalurivillä ei saa olla ylimääräisiä toimintoja ja työkalurivin ikonit täytyy olla turkoosin värisiä Alasvetovalikkojen suunnitelma Alasvetovalikoissa täytyy olla seuraavan kuvan mukaiset painikkeet File-valikko File-valikon täytyy olla seuraavan kuvan mukainen

6 TAMK Karttasovellus Kartta Sivu 6/ View-valikko View-valikon täytyy olla seuraavan kuvan mukainen About-valikko About-valikon täytyy olla seuraavan kuvan mukainen Työkalurivin suunnitelma Työkalurivillä on oltava seuraavat napit turkoosin värisinä Open Zoom in Zoom out Move left Move right Move up Move down Ja työkalurivin täytyy näyttää seuraavan kuvan mukaiselta 3. KÄYTTÖLIITTYMÄN TYYLIOPAS 3.1 Suunnitteluperiaatteet Suunniteltaessa käyttöliittymää on pidettävä huolta ettei ylimääräisiä nappeja ja toimintoja luoda joita tässä dokumentissa ei ole määritelty. 3.2 Ikonien värit Työkalurivin ikonien värityksessä täytyy käyttää seuraavaa väriä Kaikissa työkalurivien ikoneissa, jotka eivät ole windowsin standardeja ikoneita, täytyy olla kahden mustan värisen pikselin korkuinen korostus jotta ikonien kuvat olisivat näyttävämpiä. Windowsin

7 TAMK Karttasovellus Kartta Sivu 7/8 normaalit ikonit pitää muokata edellä mainitulla turkoosivärillä. Harmaan sävyjä on lupa käyttää sekä mustaa ja valkoista. 4. KÄYTETTÄVYYSTESTIT 4.1 Käyttöliittymän käytettävyystestit Käyttöliittymä testataan yhdellä ainoalla testillä jossa testataan kaikkia toimintoja. Testi on yksinkertainen, tehtävät ovat mene ja käytä tasoa. Testaaja käy läpi mahdolliset toiminnot listaa apuna käyttäen. Koulutusta ei tarvita testin suorittajalta. Testitarina: Testitehtävät: Sinulla on tietokone jossa on Windows XP käyttöjärjestelmä ja siinä on Karttasovellus. Suorita annetun listan tehtävät Kartta-sovelluksessa. Sovelluksen käyttö tapahtuu täysin hiiren avulla. 1. Avaa tiedosto tampere2.bmp 2. Zoomaa kuvaa niin kauan kuin pystyy työkalurivin painikkeilla 3. Liiku kartassa oikeaan alareunaan ja vähän yli työkalurivin painikkeilla 4. Zoomaa kuvaa ulospäin niin kauan kuin pystyy työkalurivin painikkeilla 5. Liiku kartassa vasempaan ylänurkkaan työkalurivin painikkeilla 6. Zoomaile molemmilla hiiren napeilla kunnes olet käynyt taas molemmissa ääripäissä niiden toiminnan 7. Liiku hiiren avulla kartassa joka kulmassa Testiä arvioidaan seuraavilla mittareilla: Tehtävien tekemiseen kulunut aika Testaajan tyytyväisyys työkalurivin painikkeiden käytön jälkeen Testaajan mielipide kuvan välkehdintään hiiren kanssa liikkuessa Testaajan nopeus löytää oikeat painikkeet työkaluriviltä Testissä ovat käytössä seuraavat testausmenetelmät: Testikäyttäjä ajattelee ääneen Testikäyttäjä kommentoi testin jälkeen käyttökokemustaan 4.2 Käytettävyystestien tulokset Huonon ajankohdan vuoksi käytettävyystesti suoritettiin ohjelman kehittäjällä joka oli jo tutustunut ohjelmistoon.

8 TAMK Karttasovellus Kartta Sivu 8/8 Tulokset: Tehtäviin käytetty aika 2 minuuttia 4 sekuntia Testaajan tyytyväisyys painikkeisiin Ok Testaajan mielipide kuvan välkehdintään Perseestä Testaajan nopeus löytää oikeat painikkeet Erittäin nopea Testaaja löysi työkalurivin painikkeet nopeasti ja osasi käyttää niitä heti. Ihmetystä herätti ohjelman title joka ei vaihtunut tiedostoa avatessa ollenkaa Untitled Kartta :sta pois. Samoin ikkunan status riville kaivattiin informaatiota zoom tilasta. Myös nappia josta saisi zoomin alkutilaan kaivattiin. Myös zoomatessa kauemmaksi kuva katosi testikerralla kokonaan, mutta tuli takaisin zoomatessa lähemmäksi. Testin perusteella käyttöliittymän todetaan olevan käytettävä mutta lisäominaisuuksia kaivataan. Testin ulkopuolella yritettiin myös avata eri bittikarttoja, jotkin tiedostot näkyivät pelkkänä mustana laatikkona toisten avautuessa moitteetta.