Lataa esitys
Esittely latautuu. Ole hyvä ja odota
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
Samankaltaiset esitykset
© 2024 SlidePlayer.fi Inc.
All rights reserved.