IHTE-2100 KaSuper Luento 2: värit, kuvakkeet

Transkriptio

1 IHTE-2100 KaSuper Luento 2: värit, kuvakkeet

2 Aiheet tänään Värit käyttöliittymäsuunnittelussa Kuvakkeiden suunnittelu

3 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)

4 Värien hyödyntäminen käyttöliittymässä Huomion kiinnittäminen

5 Värien hyödyntäminen käyttöliittymässä Elementtien rakenteen ja prosessien tunnistaminen

6 Värien hyödyntäminen käyttöliittymässä Esineiden ja asioiden realistinen kuvaaminen

7 Värien hyödyntäminen käyttöliittymässä Ideoiden ja prosessien loogisen rakenteen kuvaaminen

8 Värien hyödyntäminen käyttöliittymässä Ajan kuvaaminen

9 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

10 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

11 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ä

12 Värit - tunnelma ja uskottavuus

13 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

14 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

15 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

16 Värit - punavihersokeus Lähde:

17 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?

18 Kvantitatiivinen, ei redundantti värikoodaus

19 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

20 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

21 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

22 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

23 Marcusin kymmenen käskyä.. 5. Käytä tuttuja koodauksia - riippuu asiayhteydestä sekä kulttuurista

24 Tutut värikoodaukset tärkeitä

25 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

26 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ä

27 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]

28 Kuvake eli ikoni (icon) Tietoa, käsittelytoimintaa tai tietojärjestelmän osaa tarkoittava kuvasymboli

29 Kuvakkeet esitetään... työpöydällä: tunnistavat sovelluksen tai dokumentin painikkeissa: toimintokuvakkeet ikkunan yläkulmassa: orientaatiokuvakkeet muualla: tunnistamisen auttaminen, taustakuvat

30 Kuvake eli ikoni (icon) Kuvakkeilla on kehykset Kuva-aiheelle yleensä käytettävissä 60% painikkeen leveydestä ja korkeudesta

31 Kuvakkeissa kolme osaa pohja kuvaketeema täyttökuviot: attribuutteja eli määreitä, jotka kertovat tarkennuksia pääteeman sanomaan

32 Kuvakkeilla esitettävät asiat Konkreettiset kohteet: puhelin Abstraktit kohteet tai asiat: oivallus Ominaisuudet: luontoystävällinen Toimintaa: lipunmyynti

33 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)

34 Kuvakkeen ei tarvitse olla täydellinen

35 Symboliikka Symboliikka sisältää kaikki tulkittavat merkit Hahmottaminen pohjautuu aiemmin opittuun - symboliarvo osin kulttuurisidonnainen

36 Lentokentän kuvakkeet

37

38 Tavoitteita hyville ikoneille Tunnistettavuus Muistettavuus Erottuvuus Yksiselitteisyys Havainnollisuus Selkeys Kauneus Informatiivisuus Kansainvälisyys

39 Tasoristeysonnettomuudet lisääntyivät vuonna 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 ) 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 )

40 Ikonin testaaminen Kannattaa testata jo suunnitteluvaiheen aikana Tarkastetaan - luettavuus - merkityksen tajuaminen - kuvakkeiden sekoittamattomuus muiden eri asiaa merkitsevien kuvakkeiden kanssa