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

Samankaltaiset tiedostot
Transkriptio:

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