IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet
Aiheet tänään Värit käyttöliittymäsuunnittelussa Kuvakkeiden suunnittelu
Värit käyttöliittymässä Of all design elements, color most exemplifies the wholeness of design, the necessity to reason globally. Edward Tufte (1992)
Värien hyödyntäminen käyttöliittymässä Huomion kiinnittäminen
Värien hyödyntäminen käyttöliittymässä Elementtien rakenteen ja prosessien tunnistaminen
Värien hyödyntäminen käyttöliittymässä Esineiden ja asioiden realistinen kuvaaminen
Värien hyödyntäminen käyttöliittymässä Ideoiden ja prosessien loogisen rakenteen kuvaaminen
Värien hyödyntäminen käyttöliittymässä Ajan kuvaaminen
Värien hyödyntäminen käyttöliittymässä Huomion kiinnittäminen Elementtien rakenteen ja prosessien tunnistaminen Esineiden ja asioiden realistinen kuvaaminen Ideoiden ja prosessien loogisen rakenteen kuvaaminen Ajan kuvaaminen
Värien hyödyntäminen käyttöliittymässä Viehättävyyden, uskottavuuden, muistettavuuden sekä ymmärrettävyyden lisääminen Tulkintavirheiden sekä epäselvyyden vähentäminen Redundantti koodaus Määrän ja laadun esittäminen rajallisessa tilassa
Värien käyttö hyvä tehokeino, jolla voidaan - parantaa tunnistettavuutta - lisätä muistettavuutta - helpottaa luettavuutta - painottaa asioita - erotella sisältöjä - ilmaista tunnelmia - elävöittää mustavalkoista esitystä
Värit - tunnelma ja uskottavuus
Värien käytön ongelmia Eivät välttämättä palvele käyttäjiä, joilla vaillinainen värinäkökyky Silmä väsyy näkemään väriä Voi myötävaikuttaa visuaaliseen sekaannukseen Kulttuurisidonnaisuus voi aiheuttaa negatiivisen, väärän tulkinnan
Värit käyttöliittymässä Värillä on kolme ominaispiirrettä: - värisävy - kirkkaus - värikylläisyys Väri vahvistaa sanomaa ja vaikuttaa tunnelmaan Värien attribuutit: lämpötila - lämmin: suurempi, lähellä katsojaa - kylmä: pienempi, kauempana katsojasta
Varaudu värisokeisiin käyttäjiin N. 8 % miehistä sekä n. 4% naisista on värisokeita Älä viittaa ohjeissa pelkkään väriin Käytä redundantteja koodauksia Älä käytä vierekkäin punaista, vihreää, sinipunaista, ruskeaa ja harmaata Värisokeat erottavat toisistaan todennäköisimmin sinisen, keltaisen, mustan ja valkoisen Älä käytä värisignaaleja, joissa väri vaihtuu punaisesta vihreäksi, punaisesta keltaiseksi tai vihreästä keltaiseksi Vältä väripareja, joiden RGB-arvot eroavat vain punaisen osalta - valkoinen - turkoosi - vihreä - keltainen - sammaleenvihreä - oranssi - sininen - violetti
Värit - punavihersokeus Lähde: http://www.volantis.fi/sivut/color-theory.html
Värien käyttö Testaa näyttöä ilman värejä - muista riittävä kontrasti tekstin ja taustan välillä ohut vaalea teksti tummalla taustalla pimeään/hämärään ohut tumma teksti vaalealle pohjalle valoisaan - toimiiko mustavalkotulosteena? Väreillä kulttuurisidonnaisia symbolimerkityksiä - käyttävätkö palvelua myös muiden kulttuurien edustajat?
Kvantitatiivinen, ei redundantti värikoodaus http://www.ilmatieteenlaitos.fi/il/index.html?neito=max
Värien psykologiaa Värien merkitys on opittua Esimerkkejä länsimaalaisista väriassosiaatioista: - punainen: vaara, kuuma, tuli, seis, viha - keltainen: huomio, varoitus, lämpö, aktiivisuus, aurinko, uusi - vihreä: saa edetä, turvallisuus, luonto, rauha, tuoreus, toivo, myrkky - sininen: kylmyys, vesi, taivas, jää, viileä, vetäytyvä, tosi - valkoinen: viattomuus, kunnollisuus, rehellisyys, kylmyys, totuus - musta: pimeys, yö kuolema, paheellisuus, viisaus, valta, murhe - harmaa: arkisuus, karuus, yhtenäisyys, toiveikkuus, konservatiivisuus
Marcusin kymmenen käskyä 1.Käytä korkeintaan 5 +/- 2 väriä 2.Käytä oikein keskeisiä ja reunavärejä sininen vain laajojen pintojen väriksi punaista ja vihreää ei reunoille musta, valkoinen, keltainen ja sininen sopivat reunoille
Marcusin kymmenen käskyä 1.Käytä korkeintaan 5 +/- 2 väriä 2.Käytä oikein keskeisiä ja reunavärejä 3.Käytä värejä, jotka muuttuvat mahdollisimman vähän kuvan koon muuttuessa ympäristön merkitys korostuu ohut vaalea teksti tummalla taustalla pimeään/hämärään ohut tumma teksti vaalealle pohjalle valoisaan
Marcusin kymmenen käskyä 1.Käytä korkeintaan 5 +/- 2 väriä 2.Käytä oikein keskeisiä ja reunavärejä 3.Käytä värejä, jotka muuttuvat mahdollisimman vähän kuvan koon muuttuessa 4.Älä käytä useita vahvoja värejä samanaikaisesti aiheuttavat värinää, varjoilluusioita sekä jälkikuvia
Marcusin kymmenen käskyä.. 5. Käytä tuttuja koodauksia - riippuu asiayhteydestä sekä kulttuurista
Tutut värikoodaukset tärkeitä
Marcusin kymmenen käskyä.. 5. Käytä tuttuja koodauksia 6. Samoin väritetyt elementit ja alueet yhdistetään - ryhmittele värillä - ole johdonmukainen 7. Käytä värejä johdonmukaisesti - myös opetusmateriaalissa ja dokumentoinnissa
Marcusin kymmenen käskyä.. 5. Käytä tuttuja koodauksia 6. Samoin väritetyt elementit ja alueet yhdistetään 7. Käytä värejä johdonmukaisesti 8. Käytä kirkkaita, värikylläisiä värisävyjä huomion kiinnittämiseen - 1. punainen, 2. keltainen, 3. vihreä, 4. valkoinen, 5. sininen, 6. purppura 9. Käytä redundantteja koodauksia 10.Käytä värejä elävöittämään mustavalkoista esitystä
Graafisen suunnittelun tarkastuslista 1. Väriä on käytetty korostamaan, eikä ensisijaiseen viestintään 2. Värimäärä on rajoitettu helpon erottuvuuden mukaiseksi 3. Järjestelmän värikäytännöt on huomioitu 4. Reunukset ovat vakiotyyppiä 5. Ohjaukset ovat ristiriidattomat käytäntöihin nähden 6. Valo tulee vasemmalta ylhäältä 7. Sijoittelu ja merkkien käyttö noudattaa ohjeita 8. Otsikointi noudattaa ohjeita [Metsämäki]
Kuvake eli ikoni (icon) Tietoa, käsittelytoimintaa tai tietojärjestelmän osaa tarkoittava kuvasymboli
Kuvakkeet esitetään... työpöydällä: tunnistavat sovelluksen tai dokumentin painikkeissa: toimintokuvakkeet ikkunan yläkulmassa: orientaatiokuvakkeet muualla: tunnistamisen auttaminen, taustakuvat
Kuvake eli ikoni (icon) Kuvakkeilla on kehykset Kuva-aiheelle yleensä käytettävissä 60% painikkeen leveydestä ja korkeudesta
Kuvakkeissa kolme osaa pohja kuvaketeema täyttökuviot: attribuutteja eli määreitä, jotka kertovat tarkennuksia pääteeman sanomaan
Kuvakkeilla esitettävät asiat Konkreettiset kohteet: puhelin Abstraktit kohteet tai asiat: oivallus Ominaisuudet: luontoystävällinen Toimintaa: lipunmyynti
Symbolikuva Abstraktisuus kuvissa perustuu parhaimmillaan arkielämän tunnistettaviin symboleihin tai esineisiin Kuvakkeiden ei tarvitse olla täydellisiä - Vihjeitä on oltava riittävästi: liian vähän vihjeitä sisältävä kuvake aiheuttaa virhetulkintoja (samoin moniselitteinen kuva)
Kuvakkeen ei tarvitse olla täydellinen
Symboliikka Symboliikka sisältää kaikki tulkittavat merkit Hahmottaminen pohjautuu aiemmin opittuun - symboliarvo osin kulttuurisidonnainen
Lentokentän kuvakkeet
Tavoitteita hyville ikoneille Tunnistettavuus Muistettavuus Erottuvuus Yksiselitteisyys Havainnollisuus Selkeys Kauneus Informatiivisuus Kansainvälisyys
Tasoristeysonnettomuudet lisääntyivät vuonna 2003. Onnettomuuksia oli 52, ja niistä 14 tapahtui teollisuusraiteilla. (VR:n ympäristöraportti 2003) En voi käsittää miten esimerkiksi junan kylkeen ajamiset ovat lisääntyneet. Lapissa ei ole vaarallisia tasoristeyksiä. Lapissa on vaarallisia autoilijoita. (Ratahallintokeskuksen turvallisuusjohtaja Kari Alppivuori kommentoi Pohjois-Suomen ratojen turvatilannetta, Helsingin Sanomat 11.06.2004) Tasoristeyksistä varoittavissa merkeissä on edelleen höyryveturin kuva. Sekin viestittää väärin, että sieltä tulee jokin puksuttava, vaikka nykyajan junat ovat jotain aivan ihan muuta. (Ratahallintokeskuksen viestintäpäällikkö Timo Saarinen, HS 11.6. 2004)
Ikonin testaaminen Kannattaa testata jo suunnitteluvaiheen aikana Tarkastetaan - luettavuus - merkityksen tajuaminen - kuvakkeiden sekoittamattomuus muiden eri asiaa merkitsevien kuvakkeiden kanssa