käyttöliittymän visuaalisuus

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. www.mtv3.fi Päivi Kaijula

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

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

7. muotoja 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. fonttien lajityypit T T 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 sans serif Päivi Kaijula

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

11. ”luonteesta” sans serif – kylmä voimakas agressiivinen vallankumouksellinen avangardistinen persoonaton joukkovoima iltapäivälehdet työväenliikkeet Egyptienne- teollinen graafinen Keskisuomalainen serif – ekspressiivinen persoonallinen maltillinen konservatiivinen tyylikäs spekulatiivinen autoritäärinen päivälehdet 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. 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ä: • www.sta.com • www.louvre.frwww.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

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. layout2 d e 2 1 a b f a b a:b=b(a+b) - kultainen leikkaus • 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 http://www.ruokala.tv/Public/Etusivu 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ä: www.mainio.net www.lonelyplanet.com 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 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äsuunnitteluun nä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 Päivi Kaijula