Verkkopalvelun sisällöntuotanto 8. luento 14.12.2005 erikoistutkija Kirsi Silius & tutkija Anne-Maritta Tervakari Hypermedialaboratorio Digitaalisen median instituutti Tampereen teknillinen yliopisto Teemat Multimedia informaation omaksumisen tukena (jäi käsittelemättä viime kerralla) Dual coding Esteettisyys esteettinen kokemus, esteettisyys ja käytettävyys, Värien käyttö värin valinta, värien viestinnälliset merkitykset, huomioitavaa värisuunnittelussa Sommittelu Hahmottaminen ja havaitseminen hahmopsykologia, ryhmittely ja huomion herättäminen 1
Multimedia informaation omaksumisen tukena Informaation omaksumisen tukeminen Miten eri mediaelementtien käyttö tukee uuden informaation omaksumista tai tiedon, asenteen tai taidon oppimista? Kiinnostavaa oppimisen näkökulmasta. Erilaisille ihmisille erilaisia mediaelementtejä auditiivinen eli kuulohavaintoon perustuva informaation omaksuminen sanallisen ohjeet, rytmi ja musiikki helpottavat usein informaation omaksumista ääni (myös yhdistettynä muihin mediaelementteihin) esimerkiksi sanallisia selityksiä ongelmaratkaisuille tai sisällysluettelot (numeroidut) 2
Informaation omaksumisen tukeminen visuaalinen eli näköhavaintoon perustuva informaation omaksuminen kaaviot, kuvat, videot, animaatiot, sisältökartat ja kuvatekstit tekstin korostukset ja visuaalisten vihjeiden käyttö informaation jäsentämisessä kinesteettinen (liikkeeseen, tekemiseen) perustuvaa informaation omaksuminen demot, palapelit, koottavat animaatiot mouse over lisätiedot testit Dual coding Informaation omaksumisen tukemiseksi on hyvä hyödyntää sekä verbaalisen että ei-verbaalisen aistikanavan samanaikaista käyttöä (dual coding) (Guttormsen & Krueger, 2001; Najjar 1996.) Esimerkkejä yleisesti käytetyistä yhdistelmistä: Kuva ja ääni: Tehokas keino tukea informaation omaksumista. Kuvan (ei-verbaalinen) ja äänen (verbaalinen) yhdistelmä toimii silloin kun tieto on saatava nopeasti. Tukee visuaalisia ja auditiivisia ihmisiä. 3
Dual coding Kuva ja teksti: Kuvan (ei-verbaalinen) ja tekstin (verbaalinen) käyttö rasittaa käyttäjän kognitiivisia prosesseja enemmän kuin kuvan ja äänen käyttö. Auttaa palauttamaan paremmin mieleen tekstissä esitettyjä asioita. Joillakin käyttäjillä kuva saattaa tekstin yhteydessä häiritä liikaa informaation prosessointia. Tukee visuaalisia ihmisiä. Teksti ja ääni: Ei toimi muutoin kuin tietyissä tapauksissa (käyttäjä on joko kuulo- tai näkövammainen ja informaatio välitetään hänelle ainoastaan toisen aistikanavan kautta). Animaatio/video ja ääni: Verbaalinen ja ei-verbaalinen kanava. Tukee informaation omaksumista jopa paremmin kuin kuvan ja äänen yhdistelmä. Edellytyksenä on kuitenkin se, että käyttäjä voi kontrolloida animaation ja kuvan etenemistä tarvittaessa. Hyvä still- kuva toimii kuitenkin paremmin kuin heikkolaatuinen animaatio. Tukee visuaalisia ja auditiivisia ihmisiä. Dual coding Informaatiosisältö Esimerkiksi huonekalujen kokoamisohjeet Toimintaohjeet esim. sovelluksen käyttöohjeet Ongelman ratkaisuun liittyvä informaatio Tunnistaminen Tilaan liittyvä avaruudellinen tieto Lyhyt sanallinen informaatio nopeasti Yksityiskohdat kertomuksessa Mediaelementti Teksti ja tekstiä havainnollistava kuvat Selittävä teksti ja animaatio tai diagrammi Animaatio ja selittävä, kertova teksti tai puhe Kuva Kuva Ääni Video ja kertova puhe tai teksti ja sitä tukevat kuvat (Najjar 1996.) 4
Visuaalinen suunnittelu Visuaalinen suunnittelu Suurin osa verkkopalveluiden informaatiosta välitetään visuaalisessa muodossa. Sivuston ulkonäkö vaikuttaa siten merkittävästi informaation havaitsemiseen ja omaksumiseen. käytön tehokkuus, opittavuus ja miellyttävyys Ulkoasun selkeydellä, sommittelulla, typografialla ja värivalinnoilla voidaan auttaa käyttäjää hahmottamaan sivulla olevat elementit ja havaitsemaan nopeasti esim. navigointipainikkeet. selkeys, johdonmukaisuus, yksinkertaisuus ja miellyttävyys Edellyttää perehtymistä lainalaisuuksiin, jotka liittyvät ihmisen näköaistiin, hahmontunnistukseen, visuaalisen huomion kohdistamiseen ja informaation prosessointiin. Näsänen 2001: visuaalinen käytettävyys (visual usability) (Näsänen 2001; Sinkkonen ym. 2002) 5
Esteettisyys Esteettisyys on filosofian ala, joka tutkii taidetta ja muita asioita, joihin liittyy esteettisiä arvoja tai esteettisyyden kokemus. Arkikielessä esteettisyydellä tarkoitetaan yleensä kauneutta tai miellyttävyyttä. Esteettisyyden kokemus on kulttuurisidonnaista ja subjektiivista. Esteettisyyteen liitettävät arvot vaihtelevat usein aikojen kuluessa. Esteettisyyden subjektiivisuudesta huolimatta on olemassa tiettyjä perussääntöjä, jotka yleensä näyttävät hyvältä länsimaisen katsojan (tässä tapauksessa) silmissä. (Sinkkonen ym. 2002) www.nokia.com 1996 http://web.archive.org/web/19961219232809/http://www.nokia.com/ 6
www.nokia.com 2005 www.tut.fi 1997 7
www.tut.fi 2005 Esteettisyys ja käytettävyys Toisinaan ihmiset tekevät valintoja pelkästään esteettisyyden perusteella. Ihmisillä on taipumus pitää esteettistä tuotetta muita laadukkaampina ja esteettisen ulkoasun ajatellaan liittyvän myös käytettävyyteen. Joidenkin näkemysten mukaan esteettisyys on yhteydessä lähinnä ns. näennäiseen käytettävyyteen, käytettävyyden ensivaikutelmaan. Esteettisyys (kuten käytettävyyskin) voidaan nähdä myös elämyksiä ja mielihyvää tuottavana tekijänä, joka vaikuttaa ihmisen tunnetiloihin (Norman 2002; Sinkkonen ym. 2002; Surakka 2004; Tompuri 2004) 8
Esteettisyys ja käytettävyys Tunnetiloilla on todettu olevan selkeä yhteys ihmisen rationaaliseen toimintaan: informaation käsittelyyn, luovuuteen, ajatteluun, vuorovaikutukseen sekä immunologiseen järjestelmään Positiivisilla tunnetiloilla on todettu olevan myönteisiä vaikutuksia esim. tehokkuuden, tavoitteiden saavuttamisen ja ongelmaratkaisun kannalta Lisäksi positiivinen ja myönteinen tunnetila vaikuttaa käyttäjään siten, että he sietävät pieniä käytettävyysongelmakin. Negatiivisilla tunnetiloilla voi olla haitallisia vaikutuksia. (Norman 2002; Surakka 2004) Selkeä yleisilme Selkeä ja rauhallinen yleisilme auttavat käyttäjää hahmottamaan sivujen eri elementit ja havaitsemaan keskeisen informaation. Runsas värien, muotojen tai liikkuvien elementtien käyttö eli kaikki ylimääräinen häly johtaa helposti rauhattomaan ja sekavaan yleisilmeeseen, jossa erilaiset visuaaliset vihjeet kilpailevat huomiosta Pelkästään liian täyteen ahdettu sivu luo helposti sekavan vaikutelman. 9
Dover Coastguard 2005 http://www.dovercoastguard.homestead.com/ Selkeä yleisilme Esteettinen ja selkeä ulkoasu muodostuu seuraavista tekijöistä: Erilaisten elementtien muoto ja suhteet sekä selkeys ja harmonia. Johdonmukaisuus ja tarkoituksenmukainen ryhmittely Tasapainoinen asettelu. Ilmavuus (tyhjän tilan käyttö). Erilaisten elementtien tasaus. Yksinkertaisuus ja yhtenäinen kokonaisuus. Kontrasti ja visuaalinen jännite. Värisuunnittelu. 10
Värien valinta Värit ovat varsin merkittäviä käyttöliittymän suunnittelun kannalta Toimiva värin valinta lisää käytön tehokkuutta, nopeutta ja tarkkuutta Värien ja muotojen avulla voidaan esim. kiinnittää käyttäjän huomio johonkin tiettyyn asiaan, auttaa tunnistamaan ja muistamaan asioita, ilmaista yhteenkuuluvia asioita sekä lisätä käytön miellyttävyyttä Värisuunnittelu on varsin monimutkaista, sillä värin luonne ja vaikutus riippuvat sen paikasta ja suunnasta, kontrastiolosuhteista, väripinnan koosta ja muodosta sekä muista käytetyistä väreistä Väreihin liittyy myös voimakkaita kulttuurisia, sosiaalisia ja emotionaalisia merkityksiä ja henkilökohtaisia mieltymyksiä Värien valinta Muutamia huomioita värien käytöstä: Eri väriset elementit vaikuttavat toisiinsa. Valkoinen neliö mustalla pohjalla näyttää suuremmalta kuin samankokoinen musta neliö valkoisella taustalla. Vaaleat, kirkkaat ja lämpimät värit vaikuttavat nousevan lähemmäksi katsojaa. Lämpimät värit nousevat lähemmäksi katsojaa kuin kylmät värit. Voimakkaat värit esim. vastavärit aiheuttavat väreilyä alueiden rajalla. Voimakkaat värit aiheuttavat jälkikuvia. Kirkkaat värit kaappaavat helposti huomion. Värien erottuminen taustasta täytyy aina varmistaa. Turvallisinta on yhdistellä samantyyppisiä värejä keskenään esim. kylmät värit, lämpimät värit, lähivärit, murretut värit jne. Värisuunnittelussa voi hyödyntää myös symbolivärejä, lippujen värejä yms. kulttuurisidonnaisia värejä. 11
Värien viestinnälliset vaikutukset Väreihin sisältyvät symboliset ja assosiatiiviset merkitykset voivat tuoda viesteihin uusia piirteitä Esimerkiksi punaista väriä kuten lämpimiä värejä yleensäkin pidetään yleensä aktiivisena ja aggressiivisena Sinistä väriä ja kylmiä värejä yleensä pidetään puolestaan usein kylminä ja passiivisina Värien symboliset merkitykset voivat olla suhteellisen yleismaailmallisia tai vain suppean piirin tiedossa Esimerkiksi eri aatteilla on usein oma värisymboliikkansa Väri Violetti, purppura Sininen Turkoosi Vihreä Keltainen Oranssi Punainen Ruskea Valkoinen Musta Harmaa Merkityksiä ja mielleyhtymiä Länsimaissa mysteerit ja salaperäisyys. Lähi-idässä prostituutio. Keski-Euroopassa feministiliikkeet, myös seksuaaliset vähemmistöt. Japanissa valta ja varakkuus. Pohjois- Amerikka vanhat naiset. Intiassa joissakin yhteisöissä viha. Useissa länsimaissa viileys, viattomuus, melankolisuus Useissa kulttuureissa raikkaus, puhtaus, luovuus. Monissa muinaisissa kulttuureissa pyhä väri. Länsimaissa kateus, myös elämä ja kasvu. Meksikossa toivo. Buddhalaiset maat ja Israel huonot uutiset. Antiikissa kiukku ja kateus. Japanissa kunnia. Useissa kulttuureissa myös sairaus. Useissa länsimaissa edullisuus. Kiinassa ja Japanissa onnellisuus ja rakkaus. Hinduille pyhä väri. Ukrainassa voima, aurinko ja tuli. Japanissa viha. Juutalaisuudessa veri ja synti. Suomi ilo ja voimakkuus. Myös synti, veri ja rakkaus. Työväen aate. Irlannissa helvetti. Intiassa liittyy suruun, joissakin kristillisissä maissa köyhyys, surumielisyys, nöyryys. Intiassa epäonni. Suomessa puhtaus. Sininen ja valkoinen laadukkuus. Joissakin intiaanikulttuureissa vihaa. Kiinassa kunnia ja kuolema, myös epäonni. Suomi suru ja virallisuus. USA:ssa kalleus, laadukkuus. Suomi ja Japani tavallisuus, huomaamattomuus yllätyksettömyys. Heprealainen perinneviisaus. 12
Värien viestinnälliset vaikutukset Erilaiset ihmiset pitävät yleensä erilaisista väreistä Värimieltymyksiä on mm. yhdistetty tiettyihin persoonallisuustyyppeihin Esimerkiksi ulospäin suuntautuneet ekstrovertit tuntuvat valitsevan mieluiten punaisia ja keltaisia värisävyjä Sisäänpäin kääntyneet introvertit tuntuvat taas pitävän enemmän sinisistä ja vihreistä värisävyistä Iän myötä ihmiset tuntuvat myös alkavan suosia enemmän sinisiä ja punaisia värisävyjä Lapset taas tuntuvat pitävän enemmän keltaisista ja vaaleanpunaisista väreistä Värisuunnittelu Värisuunnittelua aloitettaessa on mietittävä: Millaisen vaikutelman haluaa saada aikaan? Hätkähdyttävän, rauhoittavan, luotettavan jne. Mitkä värit tuottavat halutun vaikutelman? Onko väriyhdistelmää käytetty paljon erilaisissa yhteyksissä? Millaisissa yhteyksissä? Onko muita toimivia yhdistelmiä? Ovatko valitut värit tarkoituksenmukaisia? Tukevatko värien symboliset merkitykset verkkopalvelun viestinnällistä tarkoitusta? Onko valittujen värien huomioarvo sopiva käyttötarkoitukseensa nähden? Entä luettavuus? Syveneekö vaikutelma värejä vaihtamalla? 13
Värisuunnittelu Värisuunnittelu kannattaa aloittaa suurimmasta väripinnasta eli taustasta Nyrkkisääntönä voidaan mainita, että mitä voimakkaampi väri on sitä pienempinä pintoina sitä yleensä kannattaa käyttää Tärkeän informaation havaitseminen ei saa olla vain värin varassa esimerkiksi kaavakuvissa ei kannata käyttää pelkästään värejä ilmaisemaan eri vaihtoehtoja, koska informatiivisuus saattaa kadota esim. mustavalkotulostuksessa) käyttöliittymän on hyvä toimia harmaasävyisenäkin sillä esim. noin 8 % miehistä ja 4 % naisista on jonkin tyyppinen värisokeus Ei ole hyvä käyttää sinipunaista yhdessä punaisen, vihreän, ruskean tai harmaan kanssa, sillä ne sekoittuvat helposti keskenään Kahden sanomalehden verkkoversio joulukuussa 2005. Sataseutu ww.sataseutu.com ja Tamperelainen www.tamperelainen.fi 14
Sommittelu Sommittelulla tarkoitetaan kuvan elementtien jäsentämistä ja järjestämistä Sommittelun taustalla on ihmisen luontainen tarve luokitella ja järjestellä ympäristöönsä liittyvä asioita ja hahmottaa siitä kokonaisuuksia Yleensä järjestys koetaan yksitoikkoisuutena ja sen puuttuminen kaaoksena Onnistunut sommittelu eli elementtien järjestely auttaa katsojaa hahmottamaan kuvan olennaiset elementit ja katsomaan asioita oikeassa järjestyksessä Sommittelun avulla kuvaan voidaan myös piilottaa erilaisia merkityksiä Sommittelu Sommittelu lähtee liikkeelle rajatusta alueesta, joka voidaan jakaa symmetriseksi klassisen ihanteen mukaisesti Epäsymmetrinen sommittelu taas on vapaampaa ja perustuu vastakohtiin Toimivan sommittelun pohjana voi olla mm. kultainen leikkaus, jonka mukaan pinta jaetaan matemaattisessa suhteessa 1 : 1,618 Kultainen leikkaus esiintyy yleisesti luonnossa Taiteilijat ja mainostajat ovat oivaltaneet kultaisen leikkauksen mukaisen sommittelun miellyttävän silmää Kuten väreihin liittyvät mieltymykset myös sommitteluun liittyvät ihanteet ovat vaihdelleet eri aikakausina 15
Sommittelu Nykypäivinä arvostetaan ns. dynaamista sommitelmaa, jossa on liikettä, jännitettä ja vaihtelua Tällaisessa sommitelmassa käytetään hyödyksi mm. vastakohtaisuuksia Sommittelussa on pyrittävä tasapainoiseen kokonaisuuteen Värien lisäksi sommittelussa voidaan hyödyntää kontrastia, tyhjää tilaa, muotoja ja liikesuuntia Esimerkiksi käyttöliittymässä on hyvä käyttää tyhjää tilaa tasapainottamaan asettelua ja jäsentämään informaatiota Hahmottaminen Ihminen suhteuttaa uudet havainnot muistissa oleviin tiedonrakenteisiin Aikaisemmat kokemukset tulevat esiin tulkintakehyksinä Ihmiset ovat havainnoissaan myös valikoivia havaitsemme herkemmin tuttuja hahmoja kuin vieraita Havainnointiin vaikuttavat myös ihmisen persoonallisuuden piirteet: optimisti näkee puolillaan olevan lasin puoliksi täynnä, pessimisti puoliksi tyhjänä ja realisti puolillaan Hahmopsykologian avulla on todistettu, että ihminen jäsentää aistimuksiaan automaattisesti ja tiedostamattomasti niin, että havainnot muodostavat laajempia ja mielekkäitä kokonaisuuksia Sitä, miten ihmisen aivot ryhmittelevät näköhavaintoja, on selvitetty hahmolakien avulla 16
Alueen hahmottaminen Alue (area) - ihminen hahmottaa yleensä pienemmän alueen kuvioksi ja suuremman taustaksi. Läheisyyden hahmottaminen Läheisyys (proximity) - lähellä toisiaan olevat visuaaliset ärsykkeet mielletään helposti yhteenkuuluviksi. Esimerkiksi painikkeet, jotka liittyvät samaan toimintoon tai tehtävään on hyvä asettaa lähekkäin. Samaten esimerkiksi lomakkeen ja siihen liittyvien painikkeiden tulee olla lähekkäin. 17
Samankaltaisuuden hahmottaminen Samankaltaisuus (similarity) - myös muoto, koko ja väri voivat toimia visuaalisina koodeina muodoiltaan tai väreiltään samankaltaiset katsotaan yhteenkuuluviksi. Jatkuvuuden hahmottaminen Jatkuvuus (continuity) - yhteneväinen viiva koetaan kuvioksi 18
Sulkeutuvuuden hahmottaminen Sulkeutuvuus (closure) - jos visuaaliset ärsykkeet näyttävät ikään kuin sulkevan sisäänsä jonkin alueen, niin katsoja mieltää ko. alueen erilliseksi alueeksi. Ihmisellä on taipumus myös täydentää hahmoja "kokonaisiksi". Tuttuuden hahmottaminen Tuttuus (familiarity) - tutut alueet koetaan kuvioina. 19
Hahmottaminen Valiomuotoisuus (good shape) - kuviot pyritään ymmärtämään yksinkertaisina ja symmetrisinä ts. ne pyritään ryhmittelemään niin, että niistä muodostuu säännöllinen, kokonainen ja symmetrinen hahmo todennäköisemmin kuin epäsymmetrinen. Yhteinen liike (common fate) - sellaiset kohteet, jotka näyttävät liikkuvan samaan suuntaan samalla nopeudella, mielletään kuuluvan samaan ryhmään. Liikehavainnon synnyttämiseksi riittää myös se, että staattiset hahmot seuraavat toisiaan sarjassa. Ryhmittely Yleensä ihmiset havaitsevat ryhmiä helpommin kuin erikseen merkittyjä osioita Toisaalta asioiden ryhmittely myös helpottaa muistamista ja sitä kautta oppimista Ihminen kykenee pitämään mielessään yleensä noin seitsemän erillistä yksikköä Muistin kapasiteettia voidaan kasvattaa ryhmittelemällä yksiköitä loogisiin ryhmiin (chunking theory), jolloin yksi ryhmä (joka pitää sisällään useita yksiköitä) itse asiassa muodostaa yhden muistettavan yksikön Hahmolakien ja ryhmittelyteorian (chunking theory) periaatteiden huomioon ottaminen suunnittelussa tukee käyttäjien informaation hahmottamista Käyttäjä voi tehdä päätöksiä isostakin informaatiomassasta, jos ne on selkeästi ryhmitelty ja esitetty, jolloin käyttäjän ei tarvitse yrittää muistaa niitä (esim. Windows -valikot) 20
www.virtuaaliyliopisto.fi Huomion herättäminen Käyttäjän huomio kiinnittyy nopeasti liikkuvaan kuvaan ja ihmistä esittävään kuvaan Etenkin lähikuva ihmisen kasvoista saa käyttäjän suuntamaan katseensa kuvaan myös kasvoja muistuttava visuaalinen ärsyke toimii tehokkaasti huomion kiinnittäjänä Katsoja huomio kiinnittyy erityisesti toisen ihmisen silmiin tarkkaillessaan toista ihmistä henkilö kiinnittää kenties huomaamattaankin huomionsa toisen henkilön silmiin saadakseen tietoa tämän tunnetiloista 21
Viikkoharjoitukset Tehtävä 1: Valitse jokin verkkopalvelu ja arvioi miten sen visuaalisessa suunnittelussa on hyödynnetty hahmojen käyttöä ja sommittelua. Pohdi miten niissä on onnistuttu. Nosta esiin myös konkreettisia esimerkkejä. Tehtävä 2: Valitse kaksi täysin erityyppistä verkkopalvelua esim. viranomaisen sivusto ja jokin urheilu- tai musiikkisivusto. Voit valita myös kaksi täysin eri kulttuureita edustavaa sivustoa. Pohdi ja vertaile miten sivustojen visuaalinen suunnittelu eroaa toisistaan sekä mitä sivustojen värimaailma mahdollisesti viestittää. Katso luentomateriaali Lähteet 22