Upload
kalkin
View
43
Download
7
Embed Size (px)
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 Presentation
Citation preview
Päivi Kaijula
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
- 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
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
Päivi Kaijula
fontit
- suunnitellaan aina käyttölaitteen mukaan- firmoissa graafinen ohjeistus sisältää mm. Typografia –tiedot- luettavuus testattava-
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
Päivi Kaijula
fonttien “luonne” ja luettavuus- serif / sans serif- luettavuus / visuaalisuus- ”sanakuvat”- viesti
k k
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”
Päivi Kaijula
Marjan Boutique
pelihalli
vapauden puolesta!
koneihminen
Glorian antiikki
esimerkkejä
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
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
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 9oranssi 8punainen 6vihreä 6sininen 4violetti 3
-> pieni alue yhtä väriä voi siis olla huomioarvoltaan samanarvoinen kuin iso alue toista väriä
Päivi Kaijula
esimerkki
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?
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.
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
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!
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ä rakenneMINIMOI – maksimoi tehokkuus vähälläKOMMUNIKOI – sovita esitys käyttäjälle
Aaron Marcus
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