2005 © Minja Revonkorpi mimi@cc.jyu.fi
Luentoesimerkit verkossa: http://www.mit.jyu.fi/vesal/kurssit/winohj/kaytto/minja/luento


KÄYTTÖLIITTYMÄN SUUNNITTELUN LÄHTÖKOHTIA
-tuleva käyttäjä on otettava huomioon jo suunnittelun alkuvaiheessa
-käytännöllisyys ja visuaalisuus käyttäjälle tärkeimpiä
-visuaalisesti hyvin suunniteltu käyttöliittymä tuo tietokonetyöskentelyyn mukavuutta
-mille kohderyhmälle tuote tehdään, mikä on sen käyttötarkoitus
-testaajaryhmien käyttö on suositeltavaa, koska ulkopuolinen käyttäjä huomaa helpommin virheet
-käyttöliittymän kautta pitää pystyä kommunikoimaan koneen kanssa mahdollisimman helposti
-käyttöliittymä tekee mahdolliseksi käyttäjän ja sovelluksen välisen vuorovaikutuksen eli interaktiivisuuden.


KÄYTTÖLIITTYMÄN VISUAALINEN SUUNNITTELU
-on siis yksi osa-alue koko suunnitteluprosessissa
-konkreettista elementtien sommittelua ja asettelua kuvaruudulla
-parhaassa tapauksessa ohjelma on sekä sisällöltään että käyttöominaisuuksiltaan toimiva esteettinen kokonaisuus
-käyttöliittymän visuaalisen suunnittelun tavoitteet tulisivat olla selkeys, johdonmukaisuus ja miellyttävä ulkonäkö


TYYLI
-valitse aiheeseen sopiva linja, pysy siinä
-liian monta eri tyyliä ja kikkailua saattavat ärsyttää käyttäjää ja ovat osoitus tekijän tyylitajuttomuudesta
-esim. monia erilaisia tekstityylejä ja liikaa monivärisyyttä kannattaa välttää


SOMMITTELU
-kaikki ruudulla olevat elementit (pohja, kuvat, värit, tekstityypit jne.) muodostavat kokonaisuuden, kokonaisilmeen
-jokainen elementti vaikuttaa toiseen - myös mahdollinen tyhjä tila
-väri, muoto, koko ja niiden kontrastit tuovat jäsentelyä rajatulle alueelle ja niiden avulla silmän liikettä voi ohjata haluuttuun suuntaan
-loogisuus, tarkoituksenmukaisuus


KUVA
-rajaus, kuvakulma tarkoituksenmukaiseksi ja mielenkiintoiseksi
-rajaaminen antaa mahdollisuuden korostaa tiettyjä asioita, ja toisaalta jättää pois jotakin
-kuvan suunnalla on merkitystä, samoin siinä tapahtuvalla liikkeellä


VÄRI
-visuaalisessa suunnittelussa tärkeänä osana ovat värit ja niiden käyttö
-käyttö riippuu hyvin paljon käyttöliittymän tarkoituksesta ja kohderyhmästä
-värien käytön päämääränä tulisi olla käyttötehokkuuden ja käyttöliittymän miellyttävyyden lisääminen.
-loogisella värienkäytöllä saadaan luotua yhtenäinen sovellus
-värien avulla luodaan näytön rakenne ja helpotetaan näytöllä olevien elementtien erottumista toisistaan.
-kuitenkin varottava liiallista ja moninaista värien käyttöä
-liiallisella värien käytöllä saadaan aikaan sekava käyttöliittymä, jota voi olla
vastenmielistä ja raskasta käyttää


VÄRIEN ERILAISET MERKITYKSET JA SYMBOLIIKKA
Värien vaikutukset:
Punainen: varoitus, sota, rakkaus, intohimo, voima
Keltainen: lämpö, aurinko, ilo - kielteinen merkitys halpa (esim. keltainen lehdistö)
Vihreä: rauhoittava, luonto, metsän voima, poliittiset merkitykset
Sininen: kevyt, etäinen, taivas, vesi, jää, melko neutraali
Musta: suru, juhla, tyylikkyys, arvokkuus, laatu. Sopii kaikkien värien kanssa.
Valkoinen: puhtaus, neitseellisyys ja raikkaus
-väri kertoo aina jotakin, siksi väreillä helppo vaikuttaa
-korostaminen väreillä - harkitusti
-värin määrittelyssä tärkeintä on ottaa huomioon sen vierellä olevat värit ja taustavärit


VÄRIKONTRASTIT JA HARMONIAT
-väreillä on suuri vuorovaikutussuhde toisiinsa nähden

VÄRIKONTRASTI syntyy kun värin vaikutus voimistuu tai heikkenee kahden tai useamman värin vertailutilanteessa. Erilaisia kontrasteja ovat:

Sävykontrasti
Puhtaiden ja kylläisten päävärien heijastaminen toisiinsa. Esimerkiksi lasten maalauksissa on usein kirkkaiden värien sävykontrasteja.

Valöörikontrasti
Värin tummuus- ja vaaleusasteen vaihtelusta syntyvät kontrastit.
Tumma sininen-vaalea sininen jne.

Kylmä/lämmin-kontrasti
Meillä on taipumus nähdä jotkut värit kylminä, jotkut lämpiminä. Kaikista väreistä löytyy kuitenkin sekä kylmiä että lämpimiä sävyjä. Esim. on olemassa lämpimiä ja kylmiä punaisia sävyjä.

Komplementtikontrasti
Syntyy pääväristä ja sille vastakkaisesta väliväristä. Näitä ovat punainen-vihreä, sininen-oranssi, keltainen-violetti. Jos esim. yhtä kirkas punainen ja vihreä asetetaan keskenään vierekkäin, syntyy kineettisiä ilmiöitä, eli silmässä alkaa välkkyä.

Simultaanikontrasti
Mikä tahansa väri sävyttyy näköhavainnossa vierekkäisen värin vastakkaisvärillä. Jos esim. harmaa väri asetetaan eri värisille taustoille, se näyttää aina eri sävyiseltä. Näin ollen harmaa väri punaisella pohjalla näyttää vihertävältä jne.

Kylläisyyskontrasti
Puhdasta väriä voidaan taittaa lisäämällä siihen valkoista tai mustaa. Näin saadaan murrettuja värejä. Suurin kontrasti on täysin puhtaan värin ja voimakkaasti taitetun värin välillä.

Koon kontrasti
Kirkas väri on voimakkaampi kuin tumma, eli esim. violettia tarvitaan kolme kertaa suurempi määrä kuin keltaista, jotta värien vaikutus olisi yhtä suuri. Väreillä tiedottamisessa pinta-alan kontrastilla on suuri merkitys. Värialueen koko siis vaikuttaa huomioarvoon.


VÄRIHARMONIA tarkoittaa värien yhteensopivuutta. Harmonioita on neljää eri tyyppiä:

Lähiväriharmonia
Lähivärisessä harmoniassa värit valitaan väriympyrästä suhteellisen rajoitetulta alueelta. Esimerkiksi punainen ja oranssi tai oranssinkeltainen ja keltainen ovat keskenään lähivärisessä harmoniassa.

Vastaväriharmonia
Vastaväriharmonia syntyy yhdisteltäessä värejä, jotka väriympyrässä sijaitsevat toisiaan vastapäätä, ts. täydennysvärejä. Esimerkiksi keltainen - sininen ja
punainen - vihreä. Niiden teho perustuu vastakkaisvaikutukseen.

Yksiväriharmonia
Yksiväriharmonialla tarkoitetaan yhdestä ainoasta väristä saatavaa vivahdussarjaa, joka syntyy siten, että perusväriin lisätään vaihtelevia määriä mustaa tai valkoista.

Valööriharmonia
Valööriharmonia tarkoittaa sävyttömillä väreillä aikaansaatavaa harmoniaa. Käytetään siis harmaan asteita mustasta valkoiseen.


MIKÄ VÄRI NÄYTTÄÄ NÄYTÖLLÄ HYVÄLTÄ, EI OTA SILMIIN?
Kirkkaat värit voivat ärsyttää käyttäjää, joten niitä kannattaa käyttää vain erityisesti huomion herättäjänä eli korostettaessa jotakin asiaa ruudulla. Käyttöliittymän taustaväriksi kannattaa valita neutraali tai haalea väri, jolloin teksti ja kuvat korostuvat paremmin

Esim. näitä väriyhdistelmiä kannattaa välttää:

Taustaväri Teksti yms.
Punainen Sininen, Vihreä
Vihreä Punainen
Valkoinen Keltainen
Musta Ruskea

TYPOGRAFIA
-voimakas visuaalinen elementti
-parhaimmassa tapauksessa typografia ja kuva tukevat toisiaan ja ovat vuorovaikutuksessa

-ruudulla päätteetön teksti toimii parhaiten

Kirjasinlajeja:
-Antiikva; päätteellinen esim. Times New Roman, sopii pitkiin leipäteksteihin, helppo lukea
-Groteski; päätteetön esim. Arial, sopii otsikoihin ja lyhyisiin tiedotteisiin
-Egyptienne; päätteellinen esim. Courier New, vaikea lukea; nykyisin suosittu “tyylikeino”

-suositeltavaa käyttää yleisimpiä fontteja, koska käyttäjän asetukset vaikuttavat niihin
-kuitenkin mahdollista määritellä esim. lihavointi, gemena, versaali, kursiivi
-gemena = pienet kirjaimet
-VERSAALI = ISOT KIRJAIMET
-lihavointi, kursiivi


SOVELLUKSEN ANTAMA PALAUTE KÄYTTÄJÄN KANNALTA TÄRKEÄÄ
-nappula painuu alas, ääni kuuluu tms. - tällöin vuorovaikutusta syntyy eikä käyttäjän tarvitse arvuutella mitä hän on tehnyt
-jos kyseessä opetusohjelma, käyttäjän pitää nähdä tulos / virheen laatu, jotta oppimista voi tapahtua