kyttliittymn visuaalisuus visuaalinen lukutaito verbaalinen ja nonverbaalinen viestint

käyttöliittymän visuaalisuus

visuaalinen lukutaito - verbaalinen ja non-verbaalinen viestintä - visuaalinen järjestys 1) lähellä kielellistä lukutaitoa 2) opittu 3) tulkinta - inhimillisen toiminnan tulos 1) lehden sivu 2) käyttöliittymä Päivi Kaijula

mitä on käyttöliittymän suunnittelu ? - viestintää mielikuvan luomista (esim. työpöytämetafora) ilmeen, imagon ja identiteetin luomista (mainonta) tiedon järjestelyä ja havainnollistamista epäjärjestyksen ja epäloogisuuden minimoimista toimintojen hierarkisuuden/järjestyksen esittämistä tietorakenteen selkeyttämistä ”näkymätön” käyttöliittymä Päivi Kaijula

suunnittelun aloitus - mitä informaatiota sivu(i)lle tulee? mikä on tärkein informaatio? miten informaatiota voidaan havainnollistaa? millä elementeillä informaatio voidaan parhaiten havainnollistaa? - mitä käyttäjä tekee? Päivi Kaijula

- vaikuttavuus (tunteet, elämyksellisyys) - elementeillä muodostetaan kokonaisuus - jokainen elementti vaikuttaa toiseen - ei liian paljon tietoa/ohjaimia yhdelle sivulle - päätökset linjausperiaatteista – ilmiasun laatu Päivi Kaijula

havainnointi - 3 D / 2 D - poikkeavuus liike / still-kuva kirkkaat värit / murretut värit lämpimät värit / kylmät värit lähellä / kaukana olennainen /harhautus yhdenmukainen kuvakieli lähekkäin olevat kohteet = yhtenäisyys samankaltaiset kohteet = yhtenäisyys symmetrisesti rajatut kohteet = yhtenäisyys uusi asia / vanhat mallit Päivi Kaijula

katseen suunta - kulttuurisidonnainen - erilaiset kuvan suunnat koetaan eri tavalla 1 2 Päivi Kaijula

esimerkki suunnan vaikutuksesta Päivi Kaijula

a Päivi Kaijula

b Päivi Kaijula

Päivi Kaijula

sommittelu = käyttöliittymän osien ja elementtien järjestelyä niin, että lopputulos on sekä tarkoituksenmukainen että visuaalisesti kiinnostava - kiinnostava motivoi näytön elementtien suhde toisiinsa huomioarvo (katseen suunta) jännitettä, tasapainoa tai rytmiä harmonia symmetrisyys elementtien koot samankaltaiset elementit kultainen leikkaus optinen piste www. scandinavian. net Päivi Kaijula

sommittelu 2 d e 2 a f 1 a b b a: b=b(a+b) Mikä tahansa suunnikas voidaan jakaa kultaisen leikkauksen suhteiden mukaisesti vasemmasta tai oikeasta laidasta sekä vaaka- että pystysuoraan. 1. puolita suunnikkaan pitkä sivu a-c 2. jatka lyhyttä sivua puolitetun a-c janan pituudelta 3. täydennä kolmio a-b-d 4. tee ympyräviiva piste d keskipisteenä ja jana a-d säteenä niin, että ympyräviiva leikkaa janan d-b 5. Piirrä ympyräviiva piste b keskipisteenä ja saatu jana b-e säteenä niin se laikkaa janan a-b Saatu piste f leikkaa janan a-b kultaisen leikkauksen mukaisesti Päivi Kaijula

sommittelu 3 - tyhjän tilan käyttö näytön sisäinen tasapaino yksi asia yhteen paikkaan ei liikaa informaatiota yhdelle sivulle (http: //www. mtv 3. fi) - otsikko kertoo aiheen - teksti vai kuva - yhdenmukaisuus Päivi Kaijula

1. 3. 2. 4. Iris Teksti ja kuvat: Didier Comès © 1991 Casterman Päivi Kaijula

muotoja käyrä, kaari: sisäinen jännite murtoviiva: agressiivinen, ristiriitainen, dynaaminen, levoton kiemurteleva: spontaani, orgaaninen Päivi Kaijula aalto: rauhallinen, rytmikäs

muotoja 2 horisontaalinen: rauhallinen, levollisuus, horisontti vertikaalinen: ylväs/roikkuva kallistuva: dynaaminen, liike käyttö: - taustalla - erottelemaan alueita - kuvioissa - kuvien järjestelyssä - näkymättöminä suuntaviivoina - muuta? Päivi Kaijula

fonttien lajityypit T serif T 1. SERIF – a) old type (paksuin), b) transitional, c) modern (ohuin) 2. SANS SERIF a) geometric (tasapaksu), b) grotesque (tasapaksu + yhtä paksu serif), c) humanistique (eri paksuisia osia – serif , paitsi kapitaaleissa) 3. EGYPTIAN kahden edellisen välimaastosta 4. BLACK LETTER/OLD-FACE/FRAKTURA = ”pensselillä tehty” 5. MUUT – kaikki, mitä ei voi luokitella mihinkään neljästä ensimmäisestä, esim. käsinkirjoitus. Myös muunnelmat edellisistä, kuten kursiivit. sans serif Päivi Kaijula

fonttien ”luonne” ja luettavuus - serif / sans serif luettavuus / visuaalisuus ”sanakuvat” viesti kk Päivi Kaijula

”luonteesta” sans serif – ekspressiivinen persoonallinen maltillinen konservatiivinen tyylikäs spekulatiivinen autoritäärinen päivälehdet Egyptienne- teollinen graafinen Keskisuomalainen Päivi Kaijula – kylmä voimakas agressiivinen vallankumouksellinen avangardistinen persoonaton joukkovoima iltapäivälehdet työväenliikkeet

esimerkkejä Marjan Boutique pelihalli vapauden puolesta! koneihminen Glorian antiikki Päivi Kaijula

fonttien käytöstä - max. 3 fonttia per julkaisu tai käyttöliittymä standardit yhtenäistäminen = kokonaisuus logo Päivi Kaijula

F the rog tästä alkaa tarina kolmesta surullisesta sammakosta, joilla ei ollut enää kotia maansiirtokoneen tuhotessa raparperiviidakon. . ja tästä jatkuu sama traaginen tarina. . . Päivi Kaijula

väreistä - fysikaalisuus, psykologisuus ja symbolisuus näkömuisti punainen, keltainen ja oranssi havaitaan helpoiten. lämpivät värit = aktiivisiksi, aktivoiviksi ja aggressiivisiksi punainen on psykologisesti vaikuttavin kylmät värit = passiiviset sävyskaala max 3 väriä per julkaisu logiikka ja yhtenäisyys tiedon järjestely (Esimerkki www. louvre. fr) Päivi Kaijula

värien luonne kylmä, tyhjä, puhdas neuraali mutta itsenäinen tulevaisuus, onnellisuus, kunnianhimo, päivänpaiste turvallisuus, lämpö hygienia, kylmä, rauhallinen, järjestys toiminta, jännitys, kilpailu, kiihottava tasainen, muuttumaton, rauhallinen usko, joustamaton, moderni Päivi Kaijula

esimerkki: keltainen - valo, lämpö, kulta kirkkaus, valo, loistava, laajeneva, energinen aktiivisuus, ongelmattomuus tieto, logiikka, voima, vapaus, säästäväisyys, totuus, läheisyys + harmaata, mustaa tai violettia: menettää valovoimansa vaikutus: mustasukkaisuus, petollisuus, rumuus, viekkaus, kavaluus kulttuuritausta Päivi Kaijula

fysikaalinen väri perusluonne: - väripuhtaus eli saturaatio valööriarvo eli värin vaaleus, tummuus lämpöarvo yksittäinen väri osa kokonaisuutta tunne suhteessa kokonaisuutee Päivi Kaijula

värien vuorovaikutus esim: keltainen 9 oranssi 8 punainen 6 vihreä 6 sininen 4 violetti 3 Päivi Kaijula

kontrasti - musta väri näkyy ja kohdistaa huomiota keltaisen rinnalla erottuuko tämä teksti pohjasta? luettavuus / miellyttävyys musta + valkoinen/keltainen myös musta on hyvä pohjaväri? vaihteleva pinta onko musta sittenkään hyvä taustaväri? eri keltaisen sävy kuin edellä luo erilaisen viestin koko tekstille Päivi Kaijula myös kirjasimen koko ja tyyli vaikuttaa luettavuuteen. näkyykö teksti, kun on pieni kontrasti?

värien vuorovaikutus - väri muuttuvat ympäristönsä vaikutuksesta: valoisuus, värisävy ja muut värit Päivi Kaijula

1. väri muuttuu ympäristönsä vaikutuksesta: muuttumiseen vaikuttaa värin valoisuus ja värisävy Päivi Kaijula

2. Värin eri valoisuusasteet käyttö - kolmiulotteisuus - harmonia - muuta? Päivi Kaijula

3. Yksi väri näyttää kahdelta käyttö - vaihtuva taustaväri - muuta? Päivi Kaijula

4. Kaksi väriä näyttää yhdeltä käyttö: - väriharmonia - muuta? Päivi Kaijula

muista ORGANISOI! MINIMOI! KOMMUNIKOI! Aaron Marcus Päivi Kaijula

Päivi Kaijula

symbolit - perustuu opittuun merkkikieleen (www. tiehallinto. fi/liikennemerkit) - tulkinta: 1) konteksti (www. lonelyplanet. com) 2) ammatti 3) persoonallisuus 4) kulttuuri (seuraava dia) - tietoverkot: www. intermin. fi/sm/pelastus/finopas/suojele/mainsivu/mainfram. htm Päivi Kaijula

symbolit 2 merkit liittyvät kohteeseensa kolmella tavalla (Peirce) ikoni: merkki ja kohde samankaltaisia (mutkan merkki, kuva Päivistä = Päivi, wc-opasteet) indeksi: merkin ja kohteen suhde perustuu jatkuvuuteen, kausaalisuuteen (savu, tuuliviiri, kuumemittari, www: n linkki) symboli: suhde sopimuksenvarainen (aakkoset) Päivi Kaijula

Päivi Kaijula

kirjallisuutta Peter Wildbur and Michael Burke: Information Graphics - Innovative solutions in contemporary design, 1998 Nancy Di Nucci with Maria Giudice & Lynne Stiles: Elements of Web Design, 1998 Markku Metsämäki: Graafinen käyttöliittymä, 1995 Tapani Huovila: Layout as a message, 1996 Josef Albers: Värien vuorovaikutus, 1979 Päivi Kaijula

kirjallisuutta 2 Anja Hatva: Esteettinen ja toimiva verkkojulkaisun ulkoasu, 1998 Helena Levy: Yleisiä visuaalisia näkökulmia käyttöliittymäsuunnitteluun -näkyvät ja näkymättömät vaikutukset, Aktiivinen käyttöliittymä, 1999 Aaron Marcus (http: //www. amanda. com/) Janne Seppänen: Katseen voima - kohti visuaalista lukutaitoa Päivi Kaijula