käyttöliittymän visuaalisuus
DESCRIPTION
käyttöliittymän visuaalisuus. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/1.jpg)
Päivi Kaijula
käyttöliittymän visuaalisuus
![Page 2: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/2.jpg)
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!
![Page 3: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/3.jpg)
Päivi Kaijula
käyttöliittymän elementit
- typografia- muodot- suunnat- liike- rytmi- tyhjä tila- sommittelu- suhteet- värit
![Page 4: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/4.jpg)
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
![Page 5: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/5.jpg)
Päivi Kaijula
katseen suunta
- kulttuurisidonnainen- erilaiset kuvan suunnat koetaan eri tavalla
1
2
![Page 6: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/6.jpg)
Päivi Kaijula
katseen kulku
- oikea liuhureuna vs. keskitys- tyhjä tila- kohde ja tausta erotettavissa toisistaan
![Page 7: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/7.jpg)
Päivi Kaijula
muotoja
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
aalto:rauhallinen,
rytmikäs
käyttö:- taustalla- erottelemaan alueita- kuvioissa- kuvien järjestelyssä- näkymättöminä suuntaviivoina
![Page 8: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/8.jpg)
Päivi Kaijula
fontit
- suunnitellaan aina käyttölaitteen mukaan- firmoissa graafinen ohjeistus sisältää mm. Typografia –tiedot- luettavuus testattava-
![Page 9: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/9.jpg)
Päivi Kaijula
Tfonttien 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.T
serif
sans serif
![Page 10: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/10.jpg)
Päivi Kaijula
fonttien “luonne” ja luettavuus- serif / sans serif- luettavuus / visuaalisuus- ”sanakuvat”- viesti
k k
![Page 11: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/11.jpg)
Päivi Kaijula
sans serif – kylmävoimakas
agressiivinenvallankumouksellinen
avangardistinenpersoonatonjoukkovoima
iltapäivälehdettyöväenliikkeet
serif – ekspressiivinenpersoonallinen
maltillinenkonservatiivinen
tyylikässpekulatiivinenautoritäärinen
päivälehdet
Egyptienne- teollinengraafinen
Keskisuomalainen
”luonteesta”
![Page 12: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/12.jpg)
Päivi Kaijula
Marjan Boutique
pelihalli
vapauden puolesta!
koneihminen
Glorian antiikki
esimerkkejä
![Page 13: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/13.jpg)
Päivi Kaijula
fonttien käytöstä
- max. 3 fonttia per julkaisu tai käyttöliittymä- standardit- yhtenäistäminen = kokonaisuus- logo
![Page 14: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/14.jpg)
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
![Page 15: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/15.jpg)
Päivi Kaijula
värien luonne
kylmä, tyhjä, puhdas
tulevaisuus, onnellisuus,kunnianhimo, päivänpaiste
toiminta, jännitys, kilpailu,kiihottava
tasainen, muuttumaton,rauhallinen
neuraali mutta itsenäinen
turvallisuus, lämpö
hygienia, kylmä, rauhallinen, järjestys
usko, joustamaton, moderni
![Page 16: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/16.jpg)
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
![Page 17: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/17.jpg)
Päivi Kaijula
värien vuorovaikutus esim:keltainen 9oranssi 8punainen 6vihreä 6sininen 4violetti 3
-> pieni alue yhtä väriä voi siis olla huomioarvoltaan samanarvoinen kuin iso alue toista väriä
![Page 18: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/18.jpg)
Päivi Kaijula
esimerkki
![Page 19: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/19.jpg)
Päivi Kaijula
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 mustasittenkään
hyvä taustaväri?
eri keltaisen sävykuin edellä luoerilaisen viestinkoko tekstille
myös kirjasimenkoko ja tyyli vaikuttaa
luettavuuteen.
näkyykö teksti,kun on pieni
kontrasti?
![Page 20: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/20.jpg)
Päivi Kaijula
Värien vuorovaikutusVä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änhuomio ei löydä tavoiteltavaa kohdetta.
![Page 21: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/21.jpg)
Päivi Kaijula
Yksi väri näyttää kahdelta
käyttö- vaihtuva taustaväri
- muuta?
![Page 22: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/22.jpg)
Päivi Kaijula
Kaksi väriä näyttää yhdeltä
käyttö:- väriharmonia
- muuta?
![Page 23: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/23.jpg)
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
![Page 24: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/24.jpg)
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)
![Page 25: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/25.jpg)
Päivi Kaijula
layout2- kultainen leikkaus
a:b=b(a+b)
a
a b
b
e
d
f1
2
Mikä tahansa suunnikas voidaan jakaa kultaisen leikkauksen suhteiden mukaisesti vasemmasta taioikeasta laidasta sekä vaaka- että pystysuoraan.1. puolita suunnikkaan pitkä sivu a-c2. jatka lyhyttä sivua puolitetun a-c janan pituudelta3. täydennä kolmio a-b-d4. tee ympyräviiva piste d keskipisteenä ja jana a-d
säteenä niin, että ympyräviiva leikkaa janan d-b5. 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!
![Page 26: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/26.jpg)
Päivi Kaijula
layout3
http://www.ruokala.tv/Public/Etusivu
![Page 27: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/27.jpg)
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
![Page 28: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/28.jpg)
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ö
![Page 29: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/29.jpg)
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)
![Page 30: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/30.jpg)
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
![Page 31: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/31.jpg)
Päivi Kaijula
Esimerkkejä
varoitus
vakava ongelma
tiedoksi
- Lisäksi Windowsilla suuri määrä standardi-kuvakkeita- Muita esimerkkejä: www.mainio.net www.lonelyplanet.com
![Page 32: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/32.jpg)
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
![Page 33: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/33.jpg)
Päivi Kaijula
Suunnitteluprosessi
![Page 34: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/34.jpg)
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.
![Page 35: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/35.jpg)
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)
![Page 36: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/36.jpg)
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
![Page 37: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/37.jpg)
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
![Page 38: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/38.jpg)
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
![Page 39: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/39.jpg)
Päivi Kaijula
esim
![Page 40: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/40.jpg)
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!
![Page 41: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/41.jpg)
Päivi Kaijula
3 periaatetta
ORGANISOI – selkeytä rakenneMINIMOI – maksimoi tehokkuus vähälläKOMMUNIKOI – sovita esitys käyttäjälle
Aaron Marcus
![Page 42: käyttöliittymän visuaalisuus](https://reader035.vdocuments.site/reader035/viewer/2022062422/56813f61550346895daa3095/html5/thumbnails/42.jpg)
Päivi Kaijula
Peter Wildbur and Michael Burke: Information Graphics - Innovativesolutions 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äsuunnitteluunnä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
kirjallisuutta