käyttöliittymän visuaalisuus Päivi Kaijula

mitä on käyttöliittymän suunnittelu? viestintää, viestintä = inhimillisen toiminnan tulos osa käytettävyyden suunnittelua tiedon järjestelyä ja havainnollistamista, käyttötavoite! epäjärjestyksen ja epäloogisuuden minimoimista - tietorakenteen selkeyttämistä mielikuvan luomista ilmeen, imagon ja identiteetin luomista > tuote > tuotteen käytön tehokkuus > tuotteen miellyttävyys > ”näkymätön” käyttöliittymä ORGANISOI, KOMMUNIKOI, MINIMOI! Päivi Kaijula

käyttöliittymän elementit typografia muodot suunnat liike rytmi tyhjä tila sommittelu suhteet värit Päivi Kaijula

havainnointi liike / still-kuva - kirkkaat värit / murretut värit lämpimät värit / kylmät värit lähellä / kaukana olennainen / epäoleellinen yhtenäisyys = lähekkäin olevat kohteet = samankaltaiset kohteet = symmetrisesti rajatut kohteet uusi asia / vanhat mallit mahdollisuus nähdä muut valinnan vaihtoehdot helpottaa sovelluksessa suunnistamisessa - vähemmän kertoo enemmän - Esim. www.mtv3.fi Päivi Kaijula

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

katseen kulku oikea liuhureuna vs. keskitys tyhjä tila kohde ja tausta erotettavissa toisistaan Päivi Kaijula

muotoja käyttö: taustalla erottelemaan alueita kuvioissa aalto: rauhallinen, rytmikäs horisontaalinen: rauhallinen, levollisuus, horisontti vertikaalinen: ylväs/roikkuva kallistuva: dynaaminen, liike käyrä, kaari: sisäinen jännite murtoviiva: agressiivinen, ristiriitainen, dynaaminen, levoton kiemurteleva: spontaani, orgaaninen käyttö: taustalla erottelemaan alueita kuvioissa kuvien järjestelyssä näkymättöminä suuntaviivoina Päivi Kaijula

fontit suunnitellaan aina käyttölaitteen mukaan firmoissa graafinen ohjeistus sisältää mm. Typografia –tiedot luettavuus testattava Päivi Kaijula

T T fonttien lajityypit 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. serif T sans serif Päivi Kaijula

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

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

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

väreistä ns. verkkoturvalliset värit - fysikaalisuus, psykologisuus ja symbolisuus - näkömuisti, Albersin koe - 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 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

värien vuorovaikutus esim: keltainen 9 oranssi 8 punainen 6 vihreä 6 sininen 4 violetti 3 > pieni alue yhtä väriä voi siis olla huomioarvoltaan samanarvoinen kuin iso alue toista väriä Päivi Kaijula

esimerkki Päivi Kaijula

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

Värien vuorovaikutus Väri muuttuvat ympäristönsä vaikutuksesta: Voimakkaiden värien avulla saadaan vahvoja viestejä (kiellot, varoitukset). Tämä on tietenkin riippuvainen taustasta. Jos tausta on kirkas, sekoittuu viesti helposti siihen ja käyttäjän huomio ei löydä tavoiteltavaa kohdetta. Päivi Kaijula

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

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

Väri käyttöliittymällä - Korostaa tärkeää tietoa - Identifioi rinnakkaisia systeemejä ja osia - Vähentää väärintulkinnan mahdollisuuksia    - Lisää ymmärrettävyyttä - Värien käytöllä pitää olla tarkoitus! Esimerkkejä: www.sta.com www.louvre.fr www.bbc.co.uk http://www.liberation.fr http://www.howdesign.com/ http://www.icograda.org/web/ http://www.designinteract.com/sow/archive.html Päivi Kaijula

layout katseen suunta näytön elementtien suhde toisiinsa: jännite, tasapaino, rytmi, harmonia, tyhjän tilan käyttö (korostaa tiettyjä kohtia, luo harmoniaa, silmä lepää) - yksi asia yhteen paikkaan - ei liikaa informaatiota yhdelle sivulle - yhdenmukainen kuvakieli Sisäinen yhdenmukaisuus: samat elementit, vältä poikkeamia (vie huomiota itse asiasta) Ulkoinen yhdenmukaisuus: samanlaiset ja/tai samankaltaiset elementit (tuoteperhe), konventiot, sama toimintatapa - Pyri johdonmukaisuuteen, mutta älä ole sen orja! kiinnostava motivoi (erilaisten elementtien muod. jännite) Päivi Kaijula

muista myös optinen piste! layout2 - kultainen leikkaus a:b=b(a+b) a b e d f 1 2 Mikä tahansa suunnikas voidaan jakaa kultaisen leikkauksen suhteiden mukaisesti vasemmasta tai oikeasta laidasta sekä vaaka- että pystysuoraan. puolita suunnikkaan pitkä sivu a-c jatka lyhyttä sivua puolitetun a-c janan pituudelta täydennä kolmio a-b-d 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 muista myös optinen piste! Päivi Kaijula

layout3 http://www.ruokala.tv/Public/Etusivu Päivi Kaijula

Kuvakkeet Hyvän kuvakkeen tulisi olla: - välittömästi tunnistettavissa - riittävästi yksinkertaistettu ja yleinen - samaa visuaalista aakkostoa muidenkin saman ohjelman kuvakkeiden kanssa - riittävästi erottuva muista kuvakkeista - kulttuurikontekstista ja katsojan tulkinnasta riippumaton Päivi Kaijula

käyttö 1) ohjelmien tunnisteina 2) tiedostojen, työvälineiden ja toimintojen tunnuksina 3) kuvaamaan asioiden tilaa, edistymistä tai ominaisuutta -> tietotekniikan liikennemerkistö Päivi Kaijula

erilaisia kuvakkeita Ikoni = kuvaa kohdettaan sellaisenaan (esim. mutkan kuva viittaa mutkaan) Indeksi = syy-seuraus –suhde (esim. Tulostimen kuva viittaa tulostukseen) Symboli = opittu (esim. Rasti = sulje ikkuna) (Semiotiikka) Päivi Kaijula

Tulkinta - havainto + jo olemassa oleva tieto 1) Konteksti -> loogisuus 2) Tuttuus -> Levyke, tulostaminen jne. Reaalimaailman mallit! 3) Kulttuuri = yhteisön käyttäytymispiirteet (maat, etniset erot, ammatti, ikä jne.) -> ammattikuvakkeet, fonogrammit (Q, D-faults), peukalo = OK/seksuaalinen vihjaus, pyssy = End Task Päivi Kaijula

Esimerkkejä varoitus vakava ongelma tiedoksi - Lisäksi Windowsilla suuri määrä standardi-kuvakkeita - Muita esimerkkejä: www.mainio.net www.lonelyplanet.com Päivi Kaijula

Kuva/sana - fonogrammi vs. piktogrammi kielisidonnaisuus kulttuurinen viesti (esim. Drag-on, peukalo pystyssä) toiminta sekä valikossa että kuvakkeena (yleisyys) verbaalit nyanssit kuvallisena (ravintola, snack-bar, kahvila, baari) tekstillisten valinnassa vähemmän virheitä  tilarajoitukset teksti lisää tulkintaan kuluvaa aikaa Päivi Kaijula

Suunnitteluprosessi Päivi Kaijula

Graafikon rooli yksi ryhmän jäsen tai rooli jollakin jäsenellä yhteistyö muiden jäsenten kanssa ei koristelija tai taiteilija, vaan informaation muotoilija. Päivi Kaijula

Suunnittelun aloitus Kohderyhmä (vaik. visuaaliseen ilmeeseen ja esim. kirjasimen kokoon) tutustu aiempaan materiaaliin (www, lehdet yms.) mahdoll. haastattelut, kyselyt tietorakenne: mitä informaatiota sivuille/ikkunoille tulee? mikä on tärkein informaatio? tärkeät elementit? vähemmän tärkeät? miten informaatiota voidaan havainnollistaa? millä elementeillä informaatio voidaan parhaiten havainnoida? mitä käyttäjä tekee? - luonnostelu (sommittelu, toiminnat), usein käsin -> kokonaisuus koneelle, hiomista, vaihtoehtojen vertailua, testaamista YKSINKERTAISTA! (Beckin kartta, 1933) Päivi Kaijula

päätökset linjausperiaatteista käytettävät värit muotokieli kuvakkeiden ja painikkeiden muodot pakolliset elementit kirjoita kaikki tehdyt päätökset ja muutokset ylös hyväksytä muutokset tilaajalla Päivi Kaijula

Suunnittelu2 käytä gridiä ja apuviivoja standardisoi näytön osat Millerin 7+-2 sääntö toimii myös jaottelussa selkeytä ja ryhmitä: yhdistä toiminnaltaan yhtenevät elementit ja erota toiminnaltaan eroavat elementit erottuuko navigointipalkki? minimoi kuvakkeiden ja painikkeiden määrä? selkeytä komponentteja (tarkoitus selväksi) suunnittele kuvakkeet Päivi Kaijula

Suunnittelu3 moniperspektiivisyys = näe käyttöliittymä osana suurempaa kokonaisuutta (sijoituspaikka tai –ympäristö, tuoteperhe) suunnittele kaikki ensin mustavalkoisena, lisää viestiä tehostavat värit lopuksi korosta osien hierarkiaa tee tärkeistä elementeistä näkyviä ja vähemmän tärkeistä huomaamattomampia Päivi Kaijula

esim Päivi Kaijula

Kuvakkeiden suunnittelu Hahmottelu – idean etsiminen, yksinkertaistaminen, pelkistäminen Visuaalinen ilme – yksilöllinen ja yhtenäinen Testaus – muutokset, muokkaukset Uudelleentyöstäminen Viimeistely MUISTA: YKSI KUVAKE = YKSI TOIMINTO! Päivi Kaijula

3 periaatetta ORGANISOI – selkeytä rakenne MINIMOI – maksimoi tehokkuus vähällä KOMMUNIKOI – sovita esitys käyttäjälle Aaron Marcus Päivi Kaijula

kirjallisuutta Päivi Kaijula 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 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, artikkeli kirjassa Aktiivinen käyttöliittymä, Eeva Pilke (toim.), 1999 Aaron Marcus (http://www.amanda.com/) Janne Seppänen: Katseen voima - kohti visuaalista lukutaitoa Sinkkonen, Kuoppala, Parkkinen, Vastamäki: Käytettävyyden psykologia, 2002 Päivi Kaijula