Markku Metsämäki Graafisen käyttöliittymän suunnittelu

Markku Metsämäki Graafisen käyttöliittymän suunnittelu Teos on tarkoitettu tietolähteeksi suunnittelijoille, tilaajille ja käyttäjille.

Graafisen käyttöliittymän suunnittelu ume24662 Alkuperäisteos: 1995 Markku Metsämäki ja Oy Edita Ab (Painatuskeskus Oy) Kustantaja: Oy Edita Ab (Painatuskeskus Oy) Ulkoasu: Markku Metsämäki PDF-taitto: Alda Media Oy ISBN 951-37-2466-2 Oy Edita Ab Helsinki 1998 Sisällysluettelo on kirjan lopussa. 2

2 Graafisen käyttöliittymän suunnittelu Graafisen käyttöliittymän toiminta perustuu näytön ikkunoista avautuviin näkymiin. Sovellusohjelmien suunnittelussa ikkunointi ja ikkunoiden käyttö ovat keskeisiä tekijöitä. Ikkunoiden sisältönä on kuvallisten vertausten koko oliojoukko: painikkeet, säätimet, tekstisymboliikka, symboliset makrotason oliot kuten dokumentit ja kansiot. Ikkunat avautuvat myös käsiteltävään tietoon. Graafisten käyttöliittymiä tutkiva professori Ben Shneiderman on kuvannut suunnittelutyön rakennetta kreikkalaisen temppelin julkisivulla. Ylimpänä olevaa graafista käyttöliittymää kannattelevat kolme pilaria: testaus, tekemisen hallinta ja ohjeistus. Tutkimustyö, teoriat ja niistä johdetut standardit luovat perustan käyttöliittymän suunnittelulle. Testaus tarkoittaa käyttöliittymän käytettävyyden testaamista ja siitä saatavan palautteen antamista kehittäjille. Teon hallintaa avustavat käyttöliittymän arkkitehtuurin suunnittelu, työmenetelmät, prototyyppien teko ja ohjelmistotuki. Ohjeistus on eräs keino siirtää graafisen käyttöliittymän suunnitteluun tarvittavaa tietoa käyttöliittymien kehittäjille ja dokumentoijille. Suomessa tavallisia graafisen käyttöliittymän suunnittelun ongelmia ovat tiedon puute graafisen suunnittelun peruskäytännöistä, testitiedon puute ja luovan ajattelun kahlitseminen toteutustasolla. Standardit ja ohjeet sallivat liikkumavaraa vaikka noudatetaankin ohjeita. 2.1 Käyttäjä on GUI-tuotteen perustekijä Graafinen käyttöliittymä perustaa toimintansa näkyvälle, visuaaliselle. Tämän teoksen päätarkoitus on kertoa graafisen käyttöliittymän taiteellisesta suunnittelusta unohtamatta muitakaan näkökohtia. Tiedon tulkinnan ymmärtäminen onkin siksi tullut esille useaan otteeseen. Käyttöliittymä ei saa hukuttaa käyttäjää turhaan tietoon. Hyvä käyttöliittymä on kuin hyvä arkistonhoitaja. Molemmat osaavat heittää pois näkyviltä ylimääräisen tiedon. Myös käytön aikana on hakuaskelten tai - kerrosten määrä syytä rajoittaa 3-4 askeleeseen. Käyttäjän elämän helpottamiseksi käyttöliittymän täyttyy olla avulias mutta silti kokonaan käyttäjän ohjattavissa. Kukapa haluaisi ohjata autoa, joka kääntyy mielensä mukaan kaarteissa ohjaajasta riippumatta. Auto vastaa alle sekunnissa kaikkiin ohjausliikkeisiin. Näin täytyy myös tietokoneen käyttöliittymän reagoida. Graafiselta käyttöliittymältä odotetaan jopa enemmän kuin tavalliselta perheautolta. Värejä täyttyy voida vaihtaa mielen mukaan ja muutoinkin ulkonäön muokkaaminen on toivottavaa. 3

Syyn ja seurauksen havaitseminen on myös tavoiteltu piirre. Tämän toteuttamiseksi käytetään avuksi metaforaa, vertauskuvallisuutta. Tulostamista tekevä olio näyttää tulostimelta eikä leivänpaahtimelta. Ravintolasovelluksissa näin tietysti voisi olla. Käytetyn kuva- ja tekstikielen pitää olla yhteensopivaa muiden sovellusten, käyttöympäristöjen ja kielen suhteen. Roskakorista voi vielä hakea pois heitetyn dokumentin mutta dokumentin tuhooja ei palauta mitään. Jos käyttäjä sattuisi tekemään erehdyksen, niin silloin täytyy käyttöliittymän antaa erehdys anteeksi peruutusta pyydettäessä. Samoin käyttäjälle pitää vastata tai pyytää odottamaan, jos tekeminen kestää yli muutaman sekunnin. Kukapa jaksaa pitkään asioida sellaisen pankkivirkailijan kanssa, joka ei kysy tai selitä mitään vaan istuu hiljaa kyselemättä tai neuvomatta asiakastaan. Näin kuitenkin vielä valitettavan moni käyttöliittymä tekee, vaikka sen ei tarvitsekaan leikkiä ihmistä ja jutella mukavia. Asiallinen kysely ja neuvonta ovat paikallaan myös tietokonesovelluksissa. 2.1.1 Käyttöliittymien mitoitus tehdään standardien mukaan Käytön kehittymisessä on joitakin selkeitä suuntauksia. Käyttäjän toimintatapa kehittyy aloittelijan yksinkertaisesta osoituslaitteen käsittelystä tehokäyttäjän lyhennekielen hallintaan. Käyttäjä kohdistaa toimenpiteet olioiden kautta mutta näppäimistöltä voi myös tarvittaessa antaa lyhennemuotoisia pikakomentoja. Käsiteltävä olio valitaan ennen sen käsittelyä. Valinta tapahtuu kohteen ulkonäön avulla tapahtuvan tunnistamisen kautta eikä komentosarjoina kuten merkkipohjaisessa liittymässä. Kohdistimen muoto kertoo mahdollisesta käsittelystä. Valintakohdistin on nuoli, koon muuttamisen kohdistin on kaksoisnuoli, tekstin kirjoituksen kohdistin on I-palkki ja vastaavasti muille tilanteille tulee oma symbolinsa. Järjestelmän pitää kysyä lisätietoja. Kun käyttäjä siirtää dokumentin kopioitavaksi, kysyy järjestelmä haluttua kopiomäärää tai käyttää oletusta käyttäjän valinnan mukaan. Toimenpiteistä täytyy näyttää koko ajan tilannetiedot ja myös valmista tulostetta täytyy voida käsitellä. Kun käyttäjä siirtää taulukkolaskennan tuloksen graafiseen ohjelmaan, syntyy graafinen esitys. Tätä esitystä voi käyttäjä muuttaa palaamatta taulukkolaskentaan. Järjestelmän tulee opastaa käyttäjän sitä halutessa ja sallia toimenpiteen peruutus. Näiden vaatimusten toteuttamiseksi on luotu joukko liitäntöjä ja tekniikoita kuten MDI eli Multiple-Document Interface, OLE eli Object Linking and Embedding ja käyttäjän apuoliot. Candle Corporation, Digital Equipment Corporation ja Microsoft ovat tehneet Microsoftin OLE:n käyttämän COM (Component Object Model) ja OMG-ryhmittymän CORBA 2.0 (Common Object Request Broker Architecture) arkkitehtuurien yhteensovittamiseen tähtäävän ehdotuksen. IBM, HP ja Digital tukevat Corbaa omissa sovelluksissaan. 4

Microsoftin perinteisen jaon mukaan ikkunat ovat tyypiltään joko sovellusikkunoita, dokumentti-ikkunoita tai valintaikkunoita. Sovellusikkuna avautuu, kun käyttäjä käynnistää sovellusohjelman. Sovellusohjelma avaa yhden tai useamman dokumentti-ikkunan. Käyttäjä kutsuu valintaikkunan yleensä vetovalikon kautta. Tavallisia ikkunan rakennusosia ovat valikkorivi, vierityspalkki, jakopalkki, sanomarivi, tilarivi ja ohjauspalkit: nauhat, viivaimet, työkalulaatikot ja värivalikoimat. Microsoftin tutkijat huomasivat Windows 95 -testeissä, että aloittelevilla käyttäjillä oli vaikeuksia ymmärtää päällekkäisiä ikkunoita kolmiulotteisessa mielessä. Aloittelijat eivät ymmärtäneet tietorakenteita ja jopa kokeneille tuli vaikeuksia siirtää ja kopioida dokumentteja. Uusissa käyttöliittymissä kannattaakin kiinnittää huomiota selkeyteen. Kuva 48: Ikkuna ja sen osat kaavamaisesti esitettyinä. Perinteisissä ikkunoita käyttävissä sovellusohjelmissa on kaikki toiminta keskittynyt yhteen avoimeen ikkunaan. Uusissa käyttöjärjestelmissä ikkunassa oleva sovellus tai dokumentti tunnistuu vasemmassa yläkulmassa olevan pienen tunnuskuvakkeensa avulla. Tekstiä kielestä toiseen kääntäville on eduksi, jos samanaikaisesti voi käsitellä kahta dokumenttia. 5

MDI sallii usean samanaikaisen dokumentin pitämisen auki työtilassa. Hyvän tavan mukaan uusi avattu dokumentti tuodaan aina etualalle näkyviin. Sovellusohjelman on osattava hallita usean avoimen dokumentin aiheuttama muistin kuormitus. Käyttäjän kuormittaminen muistinvarauksen ongelmilla edustaa huonoa suunnittelua. IBM:n OS/2-käyttöjärjestelmässä ja myöhemmin Microsoftin Windows 95 -käyttöliittymässä ikkunan oikeassa reunassa näkyvä vierityspalkin pituus kuvastaa ikkunan näyttämää suhteellista osuutta dokumentista. Yksinkertaisin esimerkki perus-mdi-ikkunasta on yhä joidenkin käyttäjien suosima Windows-käyttöjärjestelmissä mukana oleva Program Manager eli Järjestelmänhallinta. Käyttäjä voi sijoittaa tilasta riippumattoman eli modaalittoman ikkunan päällimmäiseksi. Monen dokumentin pitäminen auki samanaikaisesti helpottaa kielenkäännös- ja kirjoitustyötä. Älykkäät sovellukset ja tulevat työpöydät tallettavat myös tarkkaan käyttäjän asetukset ja palauttavat vaikkapa seuraavana päivänä jonkin työtilanteen takaisin työpöydälle. Ikkunatyypit (Window Types) Microsoftin Windows-ympäristössä ikkunat voidaan jakaa kolmeen päätyyppiin: Sovellusikkunat (Application windows) Tiedostoikkunat (Document windows) Valintaikkunat (Dialog boxes) Sovellusikkuna on sovelluksen teon kannalta perusikkuna, jota voi siirtää ja jonka kokoa voi muuttaa. Tiedostoikkuna voi olla jokin seuraavista tyypeistä: "Group window" (Program Manager) "Directory window" (File Manager) "Worksheet window" "Chart window" "Macro window" Ryhmäikkuna Hakemistoikkuna Taulukkoikkuna Kaavioikkuna Makroikkuna. Valintaikkuna on määriteltävissä tarkemmin seuraavan ominaisuusluettelon kautta: Siirreltävyys: siirreltävä (movable) tai kiinteä (fixed) Koko: yhden koon (single size) tai kahden koon (alternate sizes) 6

Tilasta riippuvuus: tilariippuva eli modaalinen (modal) vaatii käyttäjän vastauksen ennen eteenpäin menoa, osittain tilasta riippuva (semimodal) tai tilasta riippumaton (modeless). Jälkimmäistä pidetään tavoiteltavana. Vuorovaikutteisuus: Sanomaikkuna (simple messages), joihin käyttäjä voi vastata vain rajoitetuilla tavoilla, tai vuorovaikutteinen (transactional choices), joissa on useita ohjausmahdollisuuksia. Multiple-document interface (MDI) sallii sovelluksen käsitellä samanaikaisesti useita eri dokumentteja tai saman dokumentin eri näkymiä sovelluksen pääikkunassa, jota kutsutaan myös työtilaksi (workspace). Nämä dokumentit tai näkymät ovat esillä tiedostoikkunoissa. OLE 2 on luomassa de facto standardia Windows-sovellusohjelmien liityntää laajemmassa piirissä. Tärkeitä OLE 2 piirteitä on useita, joista seuraavassa tärkeimmät. Vetopudotus eli drag-and-drop ominaisuus sallii olioiden siirtelyn ikkunoiden välillä ja olioiden pudotukset sovellusohjelmiin. Graafinen muokkaus antaa käyttäjälle mahdollisuuden käsitellä tietoa siirtymättä takaisin esimerkiksi taulukkolaskentaan. Käyttäjän kannalta dokumenttiin luotu kuvallinen elementti on muokattavissa omalla paikallaan julkaisun sivulla. Sovellusohjelmat huolehtivat päivityksestä. Apuoliot ovat esimerkiksi käyttäjän määrittelemiä makroja, jotka esikäsittelevät tiedon ennen esitystä. Hyvä esimerkki on suodin-olio, jonka käyttäjä on määritellyt tietokantahaun kriteerit tuntevaksi. Kun tämä olio tiputetaan tietokantaolion päälle käynnistyy haku. Aiemmin pyrittiin aputoimintoja inhimillistämään agentin hahmoon. Agentti oli ihmisen kuva, joka keskustelee käyttäjän kanssa. Agenttiolentojen kuvia ei kuitenkaan pidä sekoittaa käyttöliittymän agenttitoimintoihin, jotka oikein tehtyinä ovat tehokkaita apulaisia. Visualisoinnissa on oltava hyvin rehellinen. Käyttäjälle ei saa uskotella koneessa olevan inhimillistä älykkyyttä. 2.1.2 Vuorovaikutteisuus on ihmisen ja koneen keskustelua Vuorovaikutteisuus ja tarinan kerronta ovat toisilleen vastakkaisia. Mitä vuorovaikutteisempi jokin sovellus on sitä vähemmän sen avulla voi kertoa ennalta suunniteltua tarinaa. Vuorovaikutteisessa ympäristössä käyttäjä on kuin satua kuunteleva lapsi, joka koko ajan kyselee tarinan ulkopuolella olevia asioita. Hyvä vuorovaikutteinen käyttöliittymä pystyy mukautumaan eri kysymyksiin ja toimii silti loogisesti. Lomakkeen täyttämisessä 7

vuorovaikutteisuus sallii eri kohtien täyttämisen vapaassa järjestyksessä. Avustava vuorovaikutteinen käyttöliittymä osaa myös neuvoa ja varoittaa käyttäjää. Käyttäjän vapaus tuo ongelmaksi paikan havaitsemisen. Isossa syöttöpohjassa tai laajalla työpöydällä liikkuvan ihmisen näkökykyä rajoittaa näytön ikkunan koko. Ihmisen luonnollinen tapa havainnoida ympäristöään perustuu oman olinpaikan muistamiseen ja havainnointiin tästä tunnetusta paikasta käsin. Oudossa kaupungissa liikkuessa huomaa nopeasti kartan tärkeyden. Tottuneet matkailijat piirtävät karttaa päässään koko ajan liikkuessaan uudessa ympäristössä. Käyttöliittymän pitää myös tarjota kulkureitin ilmaisevaa tietoa tai kartaksi sopivan apuvälineen paikantamista varten. Alkeellisin paikan osoitin on x-y - koordinaattiajatteluun perustuva vierityspalkki. Se ei kuitenkaan auta vähääkään silloin, kun on mahdollista liikkua dokumenttipinossa eri syvyydellä. Selattujen dokumenttien luettelo auttaa seuraamaan kuljettua reittiä taaksepäin. Kuva 49: Sivukartta helpottaa löytämään oman sijaintipaikan. Orientaatiokuvakkeiden käyttö esimerkiksi ikkunan vasemmassa yläkulmassa auttaa paikan löytämisessä katukilven tavoin. Kuvana ja tekstinä kerrottu ikkunan tunnus ja nimi ovat samat kuin käynnistyskuvakkeen tai painikkeen tunnustiedot. Kartta voi myös muistuttaa yksi-, kaksi- tai kolmiulotteista karttamallia. Olet tässä - tunnus kertoo silloin yksiselitteisesti sijainnin ja mahdollisesti myös kulkureitin. Vahvasti käyttäjän muokattavissa käyttöliittymissä on mahdollista tehdä ikkunat lukukelvottomiksi tai kutistaa työalue nuppineulan pään kokoiseksi. Suunnitteluvaiheessa on aina hyvä varata käyttäjälle paniikkinappula, joka palauttaa perusoletukset. Aloittelevalle käyttäjälle on paras aloitusnäyttö yhden painikkeen ja tyhjän pinnan muodostama kokonaisuus. Ihminen saa hahmotettua maailman paremmin silloin, kun aloitus tuntuu selkeältä. Ohjelmasta poistuminen on toinen asia, joka pitää osoittaa käyttäjälle. Yksinkertainen ovikuvakkeella varustettu painike on eräs ratkaisu. 8

Kuva 50: Ensimmäinen avautuva näkymä on tehtävä selväpiirteiseksi. 2.1.3 Ikkunan sommittelun säännöt ovat helppoja muistaa Ikkunan sommittelussa on perussääntöinä marginaalin säilyttäminen, läheisyyden ja ryhmittelyn toteuttaminen ja linjaukset. Marginaali ei pelkästään kierrä ikkunan reunassa vaan sen voi kuvitella jatkuvan myös olioiden ja olioryhmien välissä vakiolevyisenä nauhana. Tämä kiertävä tila koetaan jatkuvuutensa takia yhdeksi olioksi. Ilmatila ja hengitystila ovat niitä käsitteitä, jotka yhdistetään kiertävään tyhjään tilaan. Tämä tila on sekä olioita yhdistävää omalla tasaisella jatkuvuudellaan että olioita ryhmittävää. Kuva 51: Kiertävä marginaali ikkunassa. 9

Läheisyyden periaatteen mukaan myös syöttökenttien yläpuolella olevat tekstit ja painikkeiden alla oleva tekstitys kuuluvat kenttään ja painikkeeseen. Tämä yhteenkuuluminen viestitään tilan jaolla. Kultaisen leikkauksen säännön muunnoksena kannattaakin käyttää suhdetta 1/3 suhde 2/3. 1/3 on se suhteellinen etäisyys, joka on tekstin ja yhteen kuuluvan kentän tai painikkeen välillä. 2/3 on taas se tila, joka erottaa tekstin toisesta kentästä tai painikkeesta. Taloudellisen tilankäytön takia on mahdollista tehdä melko tiiviitä syöttöpohjia tällä jaolla. Kuva 52: Kultaisen leikkauksen suhteet 1/3 ja 2/3 toimivat myös syöttökentissä. Ryhmittelyssä taas ryhmien väliset erottavat tilat on syytä pitää vakiona oman kiertävän yhdistävän marginaalin säilyttämiseksi. Kuva 53: kiertävä marginaali ryhmissä. 10

Linjauksilla saadaan aikaan katsetta ohjaavat jatkumot (scan line). Tällä taas varmistetaan visuaalisesti jatkuva ja tasapainoinen rakenne. Linjaus aloitetaan etsimällä yhteisiä aloituskohtia ja loppupisteitä niin kentille, painikkeille kuin muillekin olioille. Tekstit linjataan vasemman reunan suhteen ja vaakariveittäin suoraan, kentät linjataan alku ja loppupisteiden suhteen suoraan ja painikkeet linjataan pysty- tai vaakariveiksi. Teksti keskitetään painikkeen tai kentän suhteen pystysuunnassa. Painikkeen teksti keskitetään myös vaakasuunnassa reunuksen rajaaman tyhjän pinnan suhteen. Kentässä oleva teksti aloitetaan vasemmalta merkin levyisen tyhjän välin jälkeen. Kuva 54: Linjauksella asetetaan kentät ja painikkeet ojennukseen. Yhdistelmäruutu ja luetteloruutu sisältävät ohjausrakenteita. Ne muodostavat erikoistapauksia esiintyessään pelkkien syöttörivin muotoisten kenttien kanssa. Ratkaisuja on kaksi riippuen kentän pakollisesta pituudesta. Kentät ovat ohjausosineen yhtä leveitä silloin, kun syöttöalueen pituus voi vaihdella. Syöttöalueen pituus määrää kentän kirjoitusosan pituuden silloin, kun kaikkien syöttöalueiden on oltava yhtä pitkiä niin rivikentissä kuin ohjausosan sisältävissä kenttärakenteissakin. Kuva 55: Ruutujen ja kenttien tasaaminen on suositeltavaa eheyden vaikutelman ja luettavuuden säilyttämiseksi. Sääntöjen kertaus: 1) Kiertävät marginaalit 2) Läheisyyden periaate 3) Linjaukset 11

Suunnitteluharjoitus Hahmottele ikkuna ja sen marginaalit sekä painikesijoittelu. Arvioi miten helppoa on tehdä töitä ikkunan avulla: piirrä suunnitelman kopioon osoittimen liikerata ja tarkista kulkeeko työ sujuvasti vasemmalta oikealle ja ylhäältä alas. Harjoitus opettaa ikkunan eri osien sijoittelun analyysiä. 2.2 Käyttöliittymän säännöt ohjaavat suunnittelua Graafisen käyttöliittymän esityspintana on kuvaruutu, jossa työpöydällä on ikkunoita. Ikkunoita voi työpöydällä olla sekä rinnakkain, päällekkäin että sisäkkäin. Microsoftin jaon mukaan ikkunat ovat tyypiltään joko sovellusikkunoita, dokumentti-ikkunoita tai valintaikkunoita. IBM SAA CUA jakaa ikkunat ensiö (primary window) ja lisäikkunoihin (supplemental window), joita ovat toisioikkunat (secondary window) ja valintaikkunat (dialog box). Suunnittelijat käyttävät yleisesti valintaikkunasta myös englanninkielistä nimeä dialog box. Nimensä mukaisesti sovellusikkuna avautuu silloin, kun käyttäjä käynnistää tai avaa sovellusohjelman. Ohjelma taas avaa työtilaansa yhden tai useamman dokumentti-ikkunan MDI eli Multiple-Document Interface sovelluksessa. Valintaikkuna avautuu tyypillisesti käyttäjän sovellusikkunassa antamasta valikkokomennosta. Tavallisin tapaus on tiedoston avaus tai talletus Fileeli Tiedosto-vetovalinnasta. Vakioikkunan yläreunassa on palkkimainen otsikkorivi. Otsikkorivillä on keskellä ikkunan otsikkoteksti, vasemmassa ja oikeassa reunassa ovat ohjauksen ja ikkunan koon muutoksen painikkeet. Ikkunan ohjausvälineitä ovat myös vieritysnapit oikealla ja alareunassa. Perusikkunaan kuuluu lisäksi kehys, jonka leveyden käyttäjä voi määrätä. Valintaikkunat ovat useimmiten riisuttua tyyppiä, joista puuttuvat ikkunan ohjausnapit. Käyttöliittymän suunnittelun kannalta on tärkeää ikkunan rakenneosien sijoittelu käyttöliittymän sääntöjen mukaan. Tärkeintä on noudattaa johdonmukaisesti ennalta sovittuja marginaaleja ja linjata rakennusosat riveihin ja sarakkeisiin. Graafista silmää kannattaa käyttää myös painikkeiden ja muiden ohjauspintojen teossa. Selkeys auttaa käyttäjää hahmottamisessa. Joskus valitettavasti näkee sovelluksia, joissa painikkeet on sijoiteltu eri mittaisina satunnaisiin paikkoihin. Painikkeiden oikea järjestys tekee käytön turvalliseksi. Käyttäjä oppii suhteelliset paikat nopeasti, jolloin tekstejä ei ole koko ajan pakko lukea. Ihminen tunnistaa asioita usein sijaintipaikan mukaan. Tästä syystä on viisasta sijoittaa OK aina samaan kohtaan ja jättää käyttämätön paikka tyhjäksi. 12

Tavallisia ikkunan rakennusosia ovat valikkorivi, vierityspalkki, jakopalkki, sanomarivi, tilarivi ja ohjauspalkit: nauhat, viivaimet, työkalulaatikot ja värivalikoimat eli paletit. Hyvän yleiskuvan näistä saa avaamalla uusimman käyttöjärjestelmään saatavana olevan sovellusohjelman. Piirto-, maalaus- ja CAD -ohjelmissa on perinteisesti enemmän kuvakkeita kuin tekstinkäsittelyn ja taulukkolaskennan ohjelmissa. Ikkunan ohjauspalkit (Window Control Bars) Nauha (Ribbon) Viivain (Ruler) Työkalurivi (Toolbar) Työkalulaatikko (Toolbox) Paletti (Palette) Kuva-arviointitehtävä Tee valitsemastasi sovelluksesta orientaatiokuvake. Sovellus voi olla esimerkiksi kirjeen kirjoitus. Pyydä tuttua henkilöä katsomaan kuvaketta. Mitä tehtävän orientaatiokuvake tuo testihenkilön mieleen? Onko kuvake helppo tunnistaa? Harjoitus opettaa kuvakkeiden käytettävyyden tutkimisen perusteita. 2.3 Ohjeistus auttaa ilmeen säilymisessä Tekemisen hallinta liittyy läheisesti ohjeistukseen ja suunnittelijoiden koulutukseen. Lisäksi tekemisen kannalta tärkeitä ovat ohjelmiston 13

kehitysvälineet, käyttöliittymän prototyyppien tekoon sopivat järjestelmät ja graafiset suunnittelumenetelmät. Ohjeistuksessa tulee ottaa selkeä kanta käytettäviin ikkunoihin, erilaisiin kuvakkeisiin, bittikarttojen kokoon, grafiikkaan ja ohje- eli helptoimintoon. Ohjeet toimivat osana koulutukseen liittyvää kasvamisprosessia. Suunnittelija kasvaa käyttämään oikeita graafisen käyttöliittymän toteutustapoja. Silti laajoissa sovelluksissa voidaan käyttää rinnakkain useita eri suunnittelustrategioita. Standardien, sovittujen menettelytapojen ja ohjeiden tehtävänä on antaa yhdenmukainen ilme, look-and-feel, sovellusohjelmiin tehtäville käyttöliittymille. Seuraavassa perustana ovat sekä ISOn standardiehdotukset että Microsoftin Windows-ohjeistus. Apple Macintosh Systeemien ja IBM OS/2 Presentation Manager suunnittelukäytännöt ovat hyvin lähellä tässä kuvattua graafisen käyttöliittymän suunnittelua. Maininnan arvoinen kehitysaskeleena on myös Hewlett-Packardin HP VUE liittymä, joka käyttää UNIX-maailman OSF/Motif käytäntöä. Seuraava ohjeen runko havainnollistaa käytännössä mitä ohjeeseen kannattaa sisällyttää. Ennen rungon tekoa on ensin pohdittava ohjeen kohderyhmä ja ohjeistuksen laajuus. Esimerkkiohjeen käyttöympäristö on telemaattinen. Ohje on tehty telemaattisen lehden tekijöille perusohjeeksi. TELEMAATTISEN LEHDEN SUUNNITTELUOHJE 1. JOHDANTO 2. TELEMAATTISEN LEHDEN YLEISILME 2.1 Lay-outin perusrakenteet 2.1.1 Sijoittelu 2.1.2 Sivun elementit 2.1.4 Ohjaukset 2.2 Väri- ja sävysuositukset 2.2.1 Julkaisun värien valinta 2.2.2 Värien sijoittelu elementteihin 2.3 Suunnitelman testaus 2.4 Teksti 2.5 Sävykuvat 2.7 Grafiikka 2.8 Taulukot 2.9 Kuvakkeet ja painikkeet 2.9.1 Selkeys 2.9.2 Suosituskoot 14

2.9.3 Lehden kuvakeilme 2.9.4 Johdonmukaisuus 2.9.5 Animaatio 2.9.6 Minimointi 3 OHJEITA LEHDEN TAITTAJALLE 3.1 Taittopohjien käyttö 3.1.1 Taiton aloitus 3.1.2 Visuaalinen ilme toteutusvaiheessa 3.2 Luettavan ja ohjaavan erottelu 3.2.1 Lukemisen ergonomia 3.2.2 Ohjaavat elementit taiton kannalta 3.3 Sivun tunnistaminen Ohjerungon suunnittelutehtävä Muokkaa esimerkin ohjerunko omaa todellista tai kuviteltua sovellustarvetta vastaavaksi. Testaa tekemäsi runko kokeilemalla ensi itse ohjeita käytännössä. Harjoitus opettaa ohjeen rungon laadintaa. 2.4 Selkeä kuvallinen ilmaisu on perusta Graafiseen käyttöliittymään tehtävät kuvakkeet esitetään sovelluksen tai dokumentin tunnistavina kuvakkeina työpöydällä, toimintokuvakkeina painikkeissa, orientaatiokuvakkeina ikkunan yläkulmassa tai muualla auttamassa tunnistamisessa ja taustakuvina. Kuvakkeille löytyy kuitenkin koko ajan uusia käyttökohteita. Onkin lähinnä makuasia puhutaanko kuvakkeista vai kuvista. Kuvake-sana painottaa ohjaavaa luonnetta. Kuten perinteisissä taideteoksissa myös kuvakkeilla on kehykset. Kuva ei koskaan ole täysin vapaassa tilassa vaan käyttötarkoituksen sanelemissa kehyksissä. Tämä seikka on otettava huomioon jo suunnitteluvaiheessa. 15

Kuva 56: Eri kehysmalleja. Painikkeiden rakenne on hyvä selvittää mahdollisimman tarkkaan ennen suunnittelutyön alkua. Etenkin kuvalle varatun alueen koko on suunnittelijan kannalta tärkeä tieto. Painikkeen kehys muuttuu painettaessa ja tämäkin on syytä ottaa huomioon. Kuva 57: Painikkeen harmaa reunus erottaa kuvakkeen ja reunarakenteet toisistaan. Kuva-aiheelle on käytettävissä yleensä vain noin 60 prosenttia painikkeen leveydestä ja korkeudesta. Taustakuva tai tunnistekuva voi olla joko passiivinen näyttökuva tai aktiivinen kuva. Passiivinen taustakuva ei osallistu käyttötapahtumaan muutoin kuin taustaa kuvaavana pintana, työpöydän pintakuviona. Vastaavasti ikkunan tunniste (orientaatiokuvake) kertoo missä ikkunassa ollaan. Molemmissa tapauksissa kuvan on oltava häiritsemätön, tiedottava ja viihdyttävä. Taustakuvan sävytyksessä kannattaa suosia harmaan ja 16

sinisen väriskaaloja. Tunnisteen sävytys valitaan sovelluksen väriskaalan mukaan siten, että värikylläisyys on muita kuvakkeita pienempi. Aktiivinen kuva on osa käyttöliittymän toiminnallisuutta vaikka se esitettäisiinkin taustakuvana. Esimerkiksi aktiivisia kuvia ovat käyttökaaviot, kytkentäkaaviot, prosessikaaviot ja karttaesitykset. Microsoftin Windowsin kaltaisissa ratkaisuissa taustakuva on joko keskitettynä kuvapinnan keskelle tai kuvaa toistetaan niin monta kertaa kuin kuvapinnalle mahtuu. Kuvakkeiden yleinen värirajoitus on vanhoilla käyttöjärjestelmäversioilla 16 väriä, jotka ovat systeemin väripaletin mukaisia. Ennen kuvien tekoa on hyvä tarkistaa käyttöjärjestelmän värirajoitukset. Lopputulos on arvaamaton silloin, kun järjestelmä muuttaa automaatisesti esimerkiksi 256 värin kuvakkeen värit 16 skaalaan. Kuvankäsittelyn ohjelmilla väripaletin muunnos on hallitumpaa ja lisäsävyjä saa muodostettua pisteyttämällä (dithering). Kuva 58: Passiivisia taustoja: pilvikuvio, rapattu seinä ja yritystunnuskuvio harmaalla. Lyhyt värien merkityskertaus: Punainen: vaara, seis, kuuma väri Keltainen: huomio, varoitus, aktiivinen väri Vihreä: hyväksyntä, turvallinen väri Sininen: käyttäjän huomioon, taustaväri, viileä väri Harmaa: neutraali, taustaväri Valkoinen: hyväksytty kirjoitusalue Musta: merkkien väri Ikkunat ja kuvakkeet on alistettava testiin suunnitteluvaiheen aikana. Perustestaus tehdään suunnitteluryhmän ja arvioijien kanssa. Kuvakkeissa tarkistetaan luettavuus, merkityksen tajuaminen ja kuvakkeiden sekoittumattomuus muiden eri asiaa merkitsevien kuvakkeiden kanssa. Kuvake viimeistellään aina ja sen värit tarkistetaan. 17

Kuvaketehtävä Tee kuvake ja testaa se koehenkilöiden avulla. Näytä kuvaketta koehenkilölle ja kysy mitä kuvake esittää. Älä kerro ensin omia ajatuksiasi vaan kuuntele. Tee päätelmiä vasta sitten, kun olet haastatellut neljää tai viittä koehenkilöä. Harjoitus syventää kuvakkeen käytettävyyden testaustietämystä. 2.5 Käytettävyys lisääntyy testaamalla Testaaminen alkaa jo suunnitteluvaiheessa. Ben Shneiderman suosittaa ensimmäisen käyttöliittymän testin tekoa suunnittelijalla itsellään. Toinen suunnittelija on myös hyvä apulainen pahimpien virheiden paljastajana. Testauksessa Shneiderman suosittaa käytön aikana tehtävää havainnointia. Videotekniikan avulla on helppo dokumentoida testitilanne, jossa testaava henkilö ilmaisee itseään myös suullisesti. Nimensä mukaan toimivassa CISP eli Cooperative Interactive Storyboarding Prototyping -menetelmässä käyttäjä osallistuu käyttöliittymän suunnitteluprosessiin. PD eli Participatory Design ja JAD eli Joint Application Design ovat molemmat käyttäjäsidonnaisia menetelmiä. Graafinen tarkastus (Visual Check) on käyttöliittymän tarkistusmenetelmä, jossa tutkitaan yhdessä tekijöiden kanssa käyttöliittymää ja pyritään löytämään parannettavia kohtia. Graafinen tarkastaja on henkilö, joka on hyvin perehtynyt sekä käyttöliittymän suunnitteluun että tarkastettavan käyttöliittymän perustoimintaan ja tekijöiden ohjeistukseen. Graafinen tarkastus keskittyy visuaalisuuteen kun taas käytettävyystarkastus (Usability Check) käytettävyyteen. Graafisessa tarkastuksessa tutkitaan ikkunoiden rakenne vertaamalla käyttöjärjestelmän suosituksiin ja yrityksen ohjeistuksen tavoitteisiin. Tarkastettavia kohteita ovat marginaalit ja linjaukset. Painikkeiden sijoittelu valintaikkunoissa (dialog box). Ikkunan yleisilme ja ilmatilan käyttö. Ryhmittely ja havaintopsykologian asettamat rajat. Lisäksi tutkitaan kuvakkeiden luettavuus ja sijoittelu. Ikkunoiden kiinnostavuus ja ilmeen sopiminen yrityksen oman ulkonäön (lookin) puitteisiin. Ikkunoiden elementtien värien käyttö ja painikkeiden kuvakkeiden värikäytännöt tarkastetaan ohjeistuksen vastaavuuden perusteella. Ergonomian kannalta tehdään yksinkertainen työn kulun testi (kohdistimen liike) ja yleisen logiikan perustoimivuuden havainnointia. Graafisen suunnittelun tarkistuslista: 18

Väriä on käytetty korostamaan eikä ensisijaiseen viestintään Värimäärä on rajoitettu helpon erottuvuuden mukaiseksi Järjestelmän värikäytännöt on otettu huomioon Reunukset ovat vakiotyyppiä Ohjaukset ovat ristiriidattomat käytäntöihin nähden Valo tulee vasemmalta ylhäältä Sijoittelu ja merkkien käyttö on ohjeiden mukainen Otsikointi noudattaa ohjeita Käytettävyys testataan minimissään havainnoimalla yhtä käyttäjää kerrallaan ja tekemällä käyttäjän toiminnan perusteella johtopäätöksiä puutteista ja korjauksista. Laajemmissa käytettävyystesteissä käytetään hyväksi laboratoriota, jossa testit tallennetaan usealla videokameralla käyttäjän kommenttien ja toimilaitteiden äänen kanssa. Testattaessa tietokoneohjelmia laboratorio-olosuhteissa ovat noin 4 tunnin istuntoaika ja 3-4 henkilön testiryhmä sopivia. Jokaiselle testihenkilölle on silloin varattu noin tunnin aika. Väsymisen takia vireys laskee testin lopussa. Testin analysointi vie monin verroin pidemmän ajan kuin itse testi, tallenteiden purun takia. Yhden testi-istunnon tarkkaan analyysiin voi kulua aikaa 2-4 päivää. Analyysissä kannattaa kiinnittää huomiota toistuviin käyttäjien tekemiin virheisiin ja tulkinnassa tapahtuviin virheisiin. Esimerkiksi kuvakkeen tunnistaminen, oikeiden tai väärien johtopäätösten teko ja kohdistimen liikuttelu ovat kiinnostavia kohtia käyttöliittymän suunnittelijan kannalta. Instrumentoidut ohjelmaversiot taas keräävät käyttötiedon automaattisesti lokitiedostoonsa, joka lähetetään testiä tekevälle yritykselle analysoitavaksi. Hyvänä puolena tässä menettelyssä on käyttöympäristön luonnonmukaisuus. Haittana on se, että käyttäjän kommentteja ei saada talteen tuoreeltaan käyttötilanteen aikana. Instrumentoitu testaaminen soveltuukin tilastolliseen lähestymiseen, jossa lasketaan toimintojen käyttötiheyksiä ja tyypillisiä virhetilanteita. 19

Käytettävyyden (usability) lisäksi käyttöliittymässä voidaan testata saatavuutta (accessability). 1 Käytä sovellusta viikko pelkästään näppäimistöltä. Löytyvätkö kaikki toiminnot ilman osoitinlaitetta. Tämä testi koskee vain 2Dnäyttöisiä ohjelmia. 2 Kokeile luettavuutta sekä harmaasävy- että musta-valkonäytöllä, jossa ei ole välisävyjä. 3 Muuta merkistön kokoa käyttöjärjestelmässä (system font) ja testaa luettavuus eri vaihtoehdoilla. 4 Tarkista eri kielillä tehtyjen versioiden luettavuus. Tekstin pituus voi muuttua eri kielille käännettäessä. 5 Kokeile lyhytkomentoja eri näpäimistöversioilla kielialueiden mukaan. Aseta samalla myös merkistö ja mittayksikköasetukset kokeiltavan maan käytännön mukaiseksi. Heprean, arabian ja eräiden itämaisten kirjoitustapojen kohdalla myös kirjoitussuunta muuttuu. 20