käyttöliittymän visuaalisuus

Esitys aiheesta: "käyttöliittymän visuaalisuus"— Esityksen transkriptio:

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

2 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

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

4 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. Päivi Kaijula

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

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

7 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

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

9 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

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

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

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

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

14 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

15 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

16 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

17 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

18 esimerkki Päivi Kaijula

19 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

20 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

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

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

23 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ä: Päivi Kaijula

24 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

25 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

26 layout3 Päivi Kaijula

27 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

28 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

29 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

30 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

31 Esimerkkejä varoitus vakava ongelma tiedoksi
- Lisäksi Windowsilla suuri määrä standardi-kuvakkeita - Muita esimerkkejä: Päivi Kaijula

32 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

33 Suunnitteluprosessi Päivi Kaijula

34 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

35 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

36 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

37 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

38 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

39 esim Päivi Kaijula

40 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

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

42 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 ( Janne Seppänen: Katseen voima - kohti visuaalista lukutaitoa Sinkkonen, Kuoppala, Parkkinen, Vastamäki: Käytettävyyden psykologia, 2002 Päivi Kaijula