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