IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu.

Transkriptio

1 IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit Aiheet tänään Visuaaliset suunnitteluperiaatteet - Sommittelu Värit Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö Visuaalisen selkeyden tapojen käyttöä Eli siis... - läheisyys (proximity): kaksi visuaalista ärsykettä jotka sijaitsevat lähellä toisiaan mielletään yhteenkuuluviksi - samanlaisuus (similarity): kaksi visuaalista ärsykettä joilla on jokin yhteinen ominaisuus mielletään yhteenkuuluviksi - sulkeutuvuus (closure): jos visuaaliset ärsykkeet (lähes) sulkevat sisäänsä jonkin alueen, katsoja näkee ko. alueen - jatkuvuus (continuity): jos viivat leikkaavat toisiaan, katsoja jakaa kokonaisuuden selkeästi jatkuviin osiin

2 Excel 1.04 Excel 1.51 Excel 2.2 Excel 3.0

3 Excel 4.0 Excel 2003 Excel 2003 Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Yksinkertaisuus Selkeys Johdonmukaisuus Miellyttävä ulkonäkö

4 Sommittelu: Näytön tasapaino Ulkoinen tasapaino koostuu reunaviivojen suhteista ja muodosta Sisäinen tasapaino muodostuu tummuusasteesta ja symbolitasapainosta Kuvan tasapainoon vaikuttaa - kappaleiden paino ja painovoima - muotokielen sopusointu - törmääminen - paikallaan oleminen ja liike Kuvasommittelu - KUVASOMMITTELU.htm Sommittelu: Näytön tasapaino Epätasapaino luo visuaalisen jännitteen Kultainen keskiarvo sekä graafinen painotus ovat hyödyllisiä suunniteltaessa tasapainoista näyttöä Tyhjä tila on suunnittelun peruselementti Kultainen keskiarvo Sommittelu: Tilankäyttö Tilankäyttöä säätelevät - marginaalit - tyhjä tila elementtien välillä - ilmeen mukainen väljyys/taloudellinen tilan käyttö Elementit tulee ryhmitellä järkevästi - tyhjä tila - jakoviivat - laatikot Laadi taittopohja - esim. kanoninen suunnittelumalli - näyttöön korkeintaan 9 aluetta (Millerin luku) - yhtenäinen muiden ohjelmien/julkaisuiden kanssa Noudata opittuja, tuttuja käytäntöjä Tekstin koko kertoo tärkeydestä

5 Sommittelu: Kanoninen suunnittelumalli Sommittelu: Ikkunan sommittelusäännöt Säilytä marginaalit Toteuta ryhmittelyä ja läheisyyden periaatetta Muista linjaukset - kanoninen suunnittelumalli [Metsämäki] Fontti-dialogi Fontti-dialogi..

6 Sommittelu: Kolmiulotteisuus Kolmiulotteisen vaikutelman synty Pakopisteen vaikutus syvyysperspektiiviin Kolmiulotteisuuden tuntu käyttöliittymässä - Pieni kappale suuri kappale - Objektien osittainen päällekkäisyys - Liike Sommittelu: Näköharhat Esimerkki näköharhasta: Paksun palkin takaa kulkeva ohut viiva Näköharhat vaivaavat niin käyttäjää kuin suunnittelijaa Näköharhat ovat systemaattisia Näköharhoja käyttöliittymässä aiheuttavat mm. - geometriset kuviot taustakuvissa - paksun palkin takaa kulkeva ohut viiva - tiheät vaakasuuntaiset viivat - Ponzon kuvio - värit

7 Esimerkki näköharhasta: Tiheä vaakaraidoitus Esimerkki näköharhasta: Ponzon kuvio Esimerkki näköharhasta: : gif 80 Optical Illusions & Visual Phenomena by Michael Bach, University of Freiburg, Germany

8 Sommittelu: Typografia Typografialla tarkoitetaan kirjainmerkkejä ja niiden suunnittelua Kirjaimistoja ja merkistöjä on saatavilla satoja Kirjainmuotoja on kaksi - päätteellinen eli antikva - päätteetön eli groteski Kirjainten leveys vaihtelee Luettavuus riippuu tekstin koosta, muodosta ja kontrastista - Tekstin lukeminen tapahtuu 2 cm lohkoissa - Tekstin tasaaminen molemmista reunoista hidastaa lukemista n. 12 % Eri kirjaisinten käyttötarkoituksia Näytölle soveltuvia - Päätteettomät Huonosti näytölle soveltuvia - Script-tyyppiset kirjasimet - koristeelliset kirjasimet Taulukoihin - Tasajakoiset kirjasimet Pitkiin teksteihin - Päätteelliset kirjasimet Visuaalinen aakkosto Yrityksellä, tuotteella, tuoteperheellä tms. yhteinen standardi graafinen merkistö Yhdistää Auttaa luomaan käsitemalleja ja tuttuja koodauksia

9 Visuaalinen aakkosto jatkuu Windows 3.1 standardigrafiikkaa Visuaalinen aakkosto jatkuu Windows 95: visuaalinen aakkosto muuttunut: Aiheet tänään Visuaaliset suunnitteluperiaatteet - Sommittelu Värit 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)

10 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

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

12 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 Väri-illuusio Punainen teksti näyttää olevan omassa tasossaan ja sininen teksti näyttää olevan toisessa tasossa Punainen teksti näyttää olevan omassa tasossaan ja sininen teksti näyttää olevan toisessa tasossa Punainen teksti näyttää olevan omassa tasossaan ja sininen teksti näyttää olevan toisessa tasossa lyhyempi rivi punaista ja sininen teksti näyttää olevan toisessa tasossa lyhyempi rivi punaista ja sininen teksti näyttää olevan toisessa tasossa

13 Varaudu värisokeisiin käyttäjiin Värit - punavihersokeus 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 Lähde: Värien käyttö Kvantitatiivinen, ei redundantti värikoodaus 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?

14 Värien erottuvuus 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