T-121.200 Käyttöliittymäpsykologia IKONIT KÄYTTÖLIITTYMÄSSÄ Juha-Pekka Koivisto <jrkoivis@cc.hut.fi> 14.1.2004
1 Mitä ovat ikonit? Ikoneiksi kutsutaan visuaalisia symboleita, joilla on tietty merkitys. Ikoneille voidaan kuvata eri asioita esimerkiksi kohdetta, toimintaa, toiminnan seurausta tai kohteen tilaa. Yhteistä kaikille ikoneille on se, että ne pyrkivät esittämään jonkin asian visuaalisesti ilman tekstiä jo ihmiselle ennestään tuttujen käsitteiden avulla. Ikonit voidaan jakaa kahteen kategoriaan: motivoituneisiin ja motivoimattomiin ikoneihin [1, s. 137]. Jos ikoni muistuttaa jolloin tavalla kohdettaan, kyseessä on motivoitu ikoni. Esimerkiksi roskakoriikoni on motivoitu. Kaikilla käsitteillä ei ole kuitenkaan suoraa vastinetta fyysisessä ympäristössä tai sitä ei välttämättä voida ilmaista yhdellä kuvalla. Tällöin käsitteeseen liittyvä ikoni on motivoimaton sen perustuessa täysin sopimukseen. Motivoimattomia ovat yleensä tapahtumaa (esimerkiksi edellisen toiminnon peruutusta) kuvaavat ikonit. Ikoneita on käytetty runsaasti ympäristössä ja esineissä. Niiden juuret ulottuvat kivikaudelle asti, jolloin esi-isämme piirsivät luolien seinille mm. kauriiden, mammuttien ja shamaanien kuvia kertoakseen tarinoita ja tallentaakseen historiaa. Kirjoitustaito on syntynyt ikonien pohjalta. Egyptistä löydettyihin hieroglyfit sisältävät symbolista kuvakirjoitusta, josta nykyiset roomalaiset aakkoset ovat lähtöisin. Itse asiassa jokainen kirjain on symboli: esimerkiksi a-kirjaimen käsitteellinen merkitys on a -äänne. Nykypäivänä ikoneita on kaikkialla ympäristössämme: laitteissa, lehdissä, kulkuneuvoissa ja rakennuksissa. Viihdelaitteiden ja kodinkoneiden toiminnot ovat selitetty ikonien avulla. Ulkona ikoneita käytetään mm. liikennemerkeissä, palveluissa ja yrityksien logoissa. Tietokoneohjelmiin ikonit tulivat vasta 80-luvulla graafisten käyttöliittymien yleistyessä ja näyttölaitteiden resoluution ja värisyvyyden kasvaessa. Lukuun ottamatta komentokehote-pohjaisia ohjelmia melkein kaikissa graafisille käyttöjärjestelmille julkaistavissa ohjelmissa käytetään ikoneita. Jokaisella ohjelmalla on ainakin yksi ikoni: sen yksilöivä logo ohjelman otsikkorivillä. Yleisesti ikoneihin törmätään ohjelman työkaluriveillä, joissa ikonit ovat liitetty painikkeisiin kuvaamaan sen toimintaa. Alhaalla kuvassa 1 näkyy Microsoft Wordin käyttöliittymä, jonka työkalurivit sisältävät pelkästään jo yli 50 ikonia. Kuva 1. Microsoft Word -ohjelman käyttöliittymä T-121.200 Käyttöliittymäpsykologia 1
2 Ikonien toiminta Semiotiikka on merkkien ja symboleiden merkitystä tutkiva oppisuunta. Siinä ikonin tulkinta jaetaan viiteen semioottiseen tasoon [5, s. 209]. 1. Leksikaalinen taso: elementit, joista ikoni koostuu (pikselit, kontrasti, väri) 2. Syntaktinen taso: ulkomuoto ja liike (koko, kuviot, muoto, yhtenäiset osat) 3. Semanttinen taso: katsojan antama sisältö syntaksille 4. Pragmaattinen taso: ymmärrettävyys, suhde muihin elementteihin 5. Dynaaminen taso: aktivointi, animaatio, äänet Ensimmäinen ja toinen taso ovat katsojasta riippumattomia. Näiden tasojen elementit muodostavat ikonin koodauksen. Tätä kokonaisuutta kutsutaan myös ikonin ulkoiseksi representaatioksi. Jos koodaus on onnistunut hyvin, niin katsoja löytää ulkoiselle representaatiolle muististaan merkityksen, mentaalisen representaation (kolmas ja neljäs taso) [1, s. 134]. Koodauksen epäonnistuessa mentaalinen representaatio ei välttämättä vastaa aiottua representaatiota, jolloin katsoja ymmärtää ikonin merkityksen väärin. Kolmannella tasolla tapahtuu ikonin tulkinta yksin ilman kontekstia. Neljännellä tasolla muodostetaan ikonin suhde sen kontekstiin esimerkiksi lähellä oleviin muihin ikoneihin. Tällä tasolla määräytyy ikonin lopullinen merkitys. Ikonin kontekstin vaikutus ilmenee kuvasta 2. Kuva 2. Valkoisen neliön merkitys riippuu kontekstista. Viides taso käsittelee ikonin animaatiota. Mitä tapahtuu, kun ikonia esimerkiksi painetaan tai siihen tartutaan. Painettaessa ikonia sen tausta voi muuttua siniseksi. Ikonia raahatessa voidaan näyttää ainoastaan sen ääriviivat. Ikonien toiminta perustuu havaitsemiseen ja muistamiseen. Käyttäjän tulee ensin löytää ikoni käyttöliittymästä, minkä jälkeen hän päättelee ikonin merkityksen käyttäen apuna muistissaan olevia käsiterakenteita. Ihminen ohjaa katsettaan käsiteohjatusti oletuksien, mielialan ja meneillä olevan tehtävän mukaan. Havainnoidessa näkymää ensin havaitaan kohteiden yleiset piirteet (koko, värit, ääriviivojen kallistuskulmat, liike, sulkeutuneisuus ja syvyys). Tätä vaihetta kutsutaan esitietoiseksi havaitsemiseksi ja siinä erojen havaitseminen kohteista tapahtuu rinnakkain ja automaattisesti. Täten se on erittäin nopeaa [1, s. 107]. Jos havaitsija ei ole erottanut etsimäänsä kohdetta esitietoisessa vaiheessa, siirrytään tiedostettuun havaitsemiseen, joka hitaampaa sen tapahtuessa perättäisesti. Havaitsija käy kohteet yksi kerrallaan läpi purkaen prosessoitavana olevan kohteen yhä pienempiin osiin, niin että hän lopulta ymmärtää kokonaisuuden. Tiedostetusti perättäishaulla havaitaan kohteen muoto, suunta, liitokset toisiin kohteisiin, käyryys ja sisältö [1, s. 107]. Ihmisen muistia kuvataan käsiteverkon avulla [1, s. 207-209]. Se on hierarkkinen tietorakenne, joka sisältää kaiken ihmisen oppiman tiedon käsitteiden muodossa. Käsitteisiin liittyy erilaista informaatiota. Käsitteen näkökuva kertoo, miltä käsite näyttää visuaalisesti ja kuulokuva sisältää käsitteeseen liittyvät äänet. Käsitteeseen voi liittyä myös toimintoja. Käsitteet ovat liitoksissa toisiinsa. Liitoksien etäisyys voi vaihdella ja se pienenee, kun sidoksissa olevat käsitteet virittyvät eli ihminen käyttää muistiaan. Mitä lyhyempi yhteys käsitteiden välillä on, sitä nopeammin muistaminen tapahtuu. Esimerkiksi kun ihminen havaitsee sinisen ikonin, sinisen värin ja ko. ikonin etäisyys lyhenee. Ennen pitkään etäisyyden lyhentyessä ikoni voidaan havaita jo esitietoisessa vaiheessa pelkän värin perusteella. Jokaisella ihmiselle oma yksilöllinen käsiteverkkonsa, jonka muodostumista ohjaa odotukset, oppiminen ja ympäristö. T-121.200 Käyttöliittymäpsykologia 2
Ikonin tulkintaan vaikuttaa siis ikonin koodaus - sen esitys pikseleinä -, konteksti ja katsoja. Hän muodostaa ikonin kontekstin ja oppimansa perusteella merkityksen ikonille. Ikoni siis ei itsessään tarkoita mitään, vaan aina tarvitaan konteksti, missä ikonia käytetään ja katsoja antamaan tulkinta ikonille kontekstissa. Täten ikonit ovat monitulkintaisia, eikä koskaan voida olla varmoja, että jokainen käyttäjä tulkitsee ikonin samalla tavalla. Tästä syystä ikonien testaus on tärkeää. 3 Ikonien vahvuudet Ikonien vahvuus perustuu niiden visuaalisuuteen. Kokemattoman käyttäjän on helpompi totutella käyttöliittymään, kun hän näkee siinä yksinkertaisia ja miellyttäviä symboleita, joissa käytetty metaforia fyysisestä maailmasta. Niiden avulla voidaan myös ohjata katsetta haluttuun osaan käyttöliittymässä. Graafisten käyttöliittymien yleistyessä ihmisistä on tullut yhä enemmän visuaalisesti orientoituneita: he odottavat löytävänsä ikoneita. Esimerkiksi työkalurivi juuri tällainen käyttöliittymäelementti, jonka odotetaan löytyvän jokaisesta käyttöliittymästä. Ihmisen aivot ovat kehittyneet tukemaan näköaistia, koska ihminen prosessoi silmillään valtavasti informaatiota päivittäin - paljon enemmän kuin muilla aisteilla. Täten ihmiset muistavat visuaaliset käsitteet paljon paremmin kuin verbaalit. Esimerkiksi ihmiset muistavat kasvot paremmin kuin nimet. Samasta syystä ikonit muistetaan paremmin kuin teksti. Ikonit erottuvat toisistaan muotonsa ja värinsä perusteella paljon paremmin kuin teksti. Täten ikoni löydetään nopeammin, koska havaitsijan ei tarvitse purkaa kohteita niin pieniin osiin. Jo opitut ikonit havaitaan yleensä pelkällä vilkaisulla esimerkiksi värin ja ääriviivojen perusteella esitietoisessa vaiheessa nopeammin kuin perättäisesti tapahtuva tekstin havaitseminen (ks. Kuva 3). Kuva 3. MS-Office tuoteperheen ikonit ja tekstiselitteet On olemassa asioita, jotka voidaan esittää paremmin visuaalisesti. Klassinen esimerkki on tästä väri, jonka valitseminen tekstipohjaisesti ei tule enää edes kysymykseen. Muita tällaisia käsitteitä ovat mm. suunta, jyrkkyys, tekstuuri, koko, leveys ja muoto. Ikonit voivat olla pienikokoisia ja yleensä ne eivät vaadi yhtä paljon tilaa kuin saman asian ilmaiseminen tekstin avulla. Käyttöliittymästandardeissa yleisesti pienin ikonin koko on 16 16 pikseliä. Leveydeltään samaan tilaan mahtuu ainoastaan muutama kirjain. Lukutaidottomatkin ihmiset voivat käyttää ikoneita. Täten ikonit soveltuvat hyvin käyttöliittymiin, jotka on kohdistettu lapsille tai kehitysmaiden asukkaille, joilla voi olla heikko lukutaito. Tähän liittyy myös hyvin läheisesti ikonien kieliriippumattomuus: jos sama asia ilmaistaisiin tekstillä, jouduttaisiin teksti kääntämään eri kielille ohjelmaa viedessä eri maihin. Ikoneilla ei ole tätä ongelmaa edellyttäen, ettei niihin liity tekstiselitteitä. 4 Ikonien heikkoudet Ikonien käytöstä on paljon ristiriitaisia mielipiteitä, koska ikonien suunnitteleminen on haasteellista ja se vaatii enemmän resursseja kuin saman asian ilmaiseminen pelkän tekstin avulla. Ikonit tuovat lisää työtä testaukseen, sillä ne joudutaan testaamaan erillisillä testeillä oikeiden käyttäjien kanssa. Pahimmassa tapauksessa ikoneita iteroidaan ja iteroidaan, kunnes lopulta huomataan, että asia olisi voitu esittää helpommin tekstin avulla. Usein ikonit eivät ole täysin intuitiivisia, vaan niihin joudutaan lisäämään tekstiselitteet helpottamaan ensi- ja satunnaiskäyttöä, jolloin edellisessä luvussa mainittu kielietu menetetään. Kulttuurit hankaloittavat graafista suunnittelua [2, s. 244-251], sillä kulttuuri vaikuttaa ihmisen aivoissa olevaan käsitekarttaan. Kulttuuriin liittyy hyvin läheisesti kieli, taide, mytologia, uskonto, T-121.200 Käyttöliittymäpsykologia 3
arvot ja tavat. Nämä käsitteet voivat olla hyvin erilaisia kulttuureissa. Eri väreillä on tunnetusti erilainen jopa päinvastainen merkitys: valkoinen tarkoittaa Japanissa kuolemaa, kun taas Euroopassa sen väri on musta. Epäselvyyksiä voi aiheuttaa lukusuunta, joka on arabimaissa oikealta vasemmalle. Symboleilla voi olla erilainen merkitys eri kulttuureissa, mikä täytyy huomioida ikonien suunnittelussa. Esimerkiksi käsieleiden tulkinta riippuu kulttuurista. Ympyrän muodostamisen peukalolla ja etusormella aiottu merkitys on yleisesti täysin oikein tai kyllä, mutta Ranskassa tämä tarkoittaa täysin nollaa tai arvotonta. Japanissa sen sijaan tällä eleellä tarkoitetaan rahaa. Sama pätee muihin ruumiinosiin. On paljon muita symboleita, jotka ovat kulttuurisidonnaisia. Eri kulttuureissa on erilaiset mytologiset ja uskonnolliset symbolinsa. Myös eläimet herättävät erilaisia tunteita eri maissa. Täten niitä ei tule käyttää ikoneissa. Graafisten käyttöliittymien toteutuksessa on huomioitava erilaiset näyttölaitteet, joiden värikapasiteetit vaihtelevat, jolloin käyttöliittymä joudutaan testaamaan eri värisyvyyksillä. Jos näytönohjain ei pysty näyttämää tiettyä väriä, käyttöjärjestelmä joutuu simuloimaan ko. väriä muilla väreillä. Tätä prosessia kutsutaan rasterointimenetelmäksi (dithering) [7], joka voi aiheuttaa haitallista raitakuviota ikonissa. Ongelma ilmenee kuvasta 4, jossa näkyy Netscape 7.1 selaimen työkalurivi 8- bitin värisyvyydellä. Rasteroinnin vaikutusta voidaan pienentää esirasteroimalla ikoni itse, jolloin järjestelmän suorittama rasterointi on vähäisempää. Kuva 4. Netscape 7.1 selaimen työkalurivi 256 värin tarkkuudella 5 Ikonien testaus Ikonien testaus on aloitettava mahdollisimman aikaisessa vaiheessa, kun ikoneista on olemassa pelkät paperiluonnokset. Ikonien korjaus vaatii tuolloin vähiten resursseja. Ikonitesteillä pyritään selvittämään ikonin semanttisuutta. William Horton jakaa ikonitestit kolmeen eri luokkaan: formatiivisiin, vertaileviin ja arvioiviin testeihin [2, s. 290-292]. Formatiivisissa testauksessa luodaan ikoneista raakoja vedoksia, joita testataan ja parannetaan testeistä saadun palautteen perusteella. Formatiiviset testit ovat nopeita ja epämuodollisia, eikä niitä suunnitella tarkasti. Formatiivista testausta tapahtuu eniten suunnittelun alkuvaiheissa, jolloin kokeillaan eri ideoita ja tiputetaan pois huonoja vaihtoehtoja. Kun samaa käsitettä olevista ikoneista on olemassa useampi vaihtoehto, joudutaan suorittamaan vertailevaa testausta. Vertailevassa testauksessa tarvitaan metriikoita, jonka perusteella ikonit saadaan parhausjärjestykseen. Vertailevaa testausta suoritetaan suunnittelun keskivaiheessa. Suunnittelun loppuvaiheessa siirrytään arvioivaan testaukseen. Siihen valmistaudutaan huolellisesti laatimalla ikoneille skenaariot, metriikat ja käytettävyyskriteerit. Käyttäjät valitaan tarkasti tuotteen aiotusta kohderyhmästä. Kun ikoneiden käytettävyyskriteerit täyttyvät, voidaan ikonit yhdistää käyttöliittymään ja aloittaa varsinaiset käytettävyystestit, jossa käyttöliittymää testataan kokonaisuutena. Ikoneiden käytettävyyttä on testattu eri tutkimuksissa, joissa käytettävyyskriteereinä on ollut opittavuus, muistettavuus, miellyttävyys, tehokkuus ja virheiden vähyys. Raskin [3, s. 168-174], Nielsen [4, s. 37-40] ja Eberts [6, s. 248-250] ovat tehneet näistä yhteenvetoja. Tulokset osoittavat, että ikonit ovat parempia kuin teksti ainoastaan tilanteissa, joissa ikonit ovat väriltään, kooltaan ja muodoltaan toisistaan erottuvia ja ne esittävät suoraan jotain käsitettä. Myös ikonien määrällä on merkitystä. Ikonien käyttö on tehokkainta, kun niitä on samanaikaisesti näkyvissä vähemmän kuin 12 kappaletta. Tuloksista käy ilmi, että ikonit eivät välttämättä ole ensikäytössä niin tehokkaita, mitä ollaan luultu, sillä ikonin merkitys tulee oppia ensiksi. Vasta tämän jälkeen ikonin käyttö on tehokasta. Vahvinta kritiikkiä ikoneita vastaan esittää Jef Raskin. Hän toteaa, että ikonit rikkovat näkyvyyden periaatetta, koska ikonien merkitys ei ole näkyvissä, ja ikoneita tulisi käyttää ainoastaan tilanteissa, missä tutkimus on osoittanut niiden edun tekstiin nähden. T-121.200 Käyttöliittymäpsykologia 4
6 Yhteenveto Tuotteen käyttötarkoitus ja se, ovatko käyttäjät visuaalisesti orientoituneita, määräävät sen, tarvitaanko käyttöliittymässä ikoneita. Jos tuotteella ratkaistaan visuaalisia ongelmia, ihmiset ajattelevat tuotteen käytön aikana myös visuaalisesti, jolloin ikonien käyttö on tehokasta, koska visuaaliset käsitteet ovat muutenkin virittyneinä aivoissa. Ikonit tukevat tällöin työn tekoa (vrt. piirtoohjelmat). Ikoneista on vähemmän hyötyä teknisissä ohjelmissa (esimerkiksi palvelimen konfigurointisovelluksessa), jonka käyttäjät ovat myös teknisesti orientoituneita. Tällaisissa ohjelmissa ikonit ovat mahdollisesti turhia, jolloin niiden suunnitteluun ei kannata laittaa liikaa resursseja. Myös käsite, jolle mietitään esitysmuotoa vaikuttaa siihen, kannattaako ikonia käyttää. Ikonit soveltuvan hyvin tilanteisiin, joissa täytyy kuvata visuaalisia, pinta-alaan tai tilavuuteen liittyviä käsitteitä tai konkreettisia objekteja. Tällöin ikonien käyttö on suositeltavaa, koska ikoneista saadaan motivoituja. Toisaalta on käsitteitä (esimerkiksi levyn formatointi), joiden kuvaaminen ikonien avulla on vaikeampaa. Ikoneista tulee motivoimattomia ja niiden merkitys pitää oppia. Motivoimattomien ikonien testaaminen johtaa usein tarpeettomaan iterointiin, koska niiden tulkinnassa syntyy enemmän hajontaa. Suunnittelijan on siis arvioitava kaikkia vaihtoehtoja (ikoni, teksti vai molemmat) tietyn käsitteen esittämisessä. T-121.200 Käyttöliittymäpsykologia 5
7 Lähteet 1. Sinkkonen, Irmeli; Kuoppala, Hannu; Parkkinen, Jarmo; Vastemäki, Raino. Käytettävyyden psykologia. 2002. 2. p. Helsinki. Edita Publishing Oy / IT Press. 343 s. ISBN 951-826-574-7. 2. Horton, William. The Icon Book: Visual Symbols for Computer Systems and Documentation. 1994. USA. John Wiley & Sons, Inc. 417 s. ISBN 0-471-59901-8. 3. Raskin, Jef. The Humane Interface: New Directions for Designing Interactive Systems. 2002. Reading, Massachusetts. Addison Wesley Longman, Inc. 233 s. ISBN 0-201-37937-6 4. Nielsen, Jakob. Usability Engineering. 1993. San Diago, USA. Academic Press. 362 s. ISBN 0-12-518406-9 5. Schneiderman, Ben. Designing the User Interface: Strategies for Effective Human-Computer-Interaction. 1998. 3. p. USA. Addison Wesley Longman, Inc. 639 s. ISBN 0-201-69497-2. 6. Eberts, Ray E. User Interface Design. 1994. New Jersey, USA. Precentine-Hall, Inc. 649 s. ISBN 0-13- 107053-3. 7. Sun Microsystems, Inc. Java Look and Feel Design Guidelines: Application Graphics (Online). 2 p. [Viitattu 10.1.2004]. Saatavissa: http://java.sun.com/products/jlf/ed2/book/hig.graphics.html#70536. T-121.200 Käyttöliittymäpsykologia 6