Visuaalinen käyttöliittymä- suunnittelu Design grounded in principles of aesthetics and an understanding of people TJTA104 Ihmisen ja teknologian vuorovaikutus Johanna Silvennoinen 15.1.2015
Luennon rakenne 1. Visuaalinen suunnittelu Periaatteita, haasteita & menetelmiä 2. Visuaalisen suunnittelun kieli Sommittelun periaatteet & keinot Tyhjä tila, kuvasto & typografia 3. Visuaalinen käytettävyys Havainnointi, Mere-exposure efekti Hahmolait, johdonmukaisuus Attentio, huomion kiinnittäminen & flow 4. Värisuunnittelu Väriharmonia, värien vuorovaikutus Värit ja esteettömyys Väreillä kommunikointi
(Garrett, 2010)
Visuaalinen suunnittelu Käyttäjille ymmärrettävä visuaalinen kieli, huomioiden käyttäjien tarpeet + Visuaalinen kommunikointi valitsemalla elementit käyttäjien odotukset huomioiden ja niiden yhdistäminen signaaleihin, joita käyttäjät odottavat näkevänsä ja ymmärtävät tekevät viestin tulkinnasta onnistuneempaa
Suunnittelun periaatteita Suunnittelu edellyttää perehtymistä ihmisen näköaistiin, hahmontunnistukseen, visuaaliseen huomion kohdistamiseen ja informaation prosessointiin Tiedon visuaalinen esitystapa vaikuttaa käyttäjäkokemukseen elementtien avulla esteettinen, intuitiivinen ja tehokas vuorovaikutus sisällöstä käsin värisuunnittelu, layout, sommittelu, ryhmittely, terminologia, symbolit, typografia, tiedon organisointi, tausta, kontrasti, tyhjä tila, muodot, suunnat, tasapaino, jännite, fokus, flow 1. Tuotteen elementtien täytyy olla osa samaa visuaalista kokonaisuutta niin, että tuote on yhtenäisesti suunniteltu 2. Tuotteen suunnittelussa tulee ottaa huomioon se, miten ja mihin käyttäjän huomio milloinkin suunnataan 3. Tuotteen täytyy soveltua sen kanssa käytävään vuorovaikutukseen (Mullet & Sano, 1995)
Suunnittelun menetelmiä Design by mimicry & design by fiat ( I methodology ) (Garrett, 2010) Käytettävyystutkimus, havaintopsykologia, verkkosuunnittelu, typografian käytänteet, visuaaliset suunnitteluperiaatteet, kommunikointiteoria e: https://developer.apple.com/library/mcumentation/userexperience/conceptua l/applehiguidelines/hiprinciples/hiprinciples.html Microsoft: http://msdn.microsoft.com/enus/library/windows/desktop/aa511275.aspx Apple: https://developer.apple.com/library/mac/documentation/userexperience/conceptual/applehiguidelines/hiprinciples /HIPrinciples.html Microsoft: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511275.aspx
Suunnittelun haasteita Toiminnallisuus käytettävyys esteettisyys Sovellusten monipuolisuus, laaja-alaisuus, lukuisat teknologiset mahdollisuudet konventiot, standardit elävät vaatimuksia: visuaalinen käytettävyys, kiinnostavuus, kontekstiin sopivuus, miellyttävyys, oikean mielikuvan välittäminen, kilpailijoista erottuminenhttps://developer.apple.co/lib The World Wide Web Consortium s Web Accessibility Initiative (WAI) guidelines for web content accessibility http://www.w3.org/wai/
Arviointimenetelmiä Siristystesti Arvioidaan sommittelun luoma kokonaisilme kiinnittämättä huomiota yksityiskohtiin 1. YKSINKERTAISUUS VisaWi (Moshagen & Thielsch, 2010) Arvioi käyttöliittymän ja yleisilmeen ulkoasua seuraavien väittämien avulla. Merkitse X sopivimman mielipiteen kohdalle. Täysin eri mieltä Osittain eri mieltä Ei samaa eikä eri mieltä Osittain samaa mieltä Täysin samaa mieltä X-testi Tukeeko käyttöliittymän suunnittelu sen toiminnallisuutta? Vrt. kodinelektroniikka Sommittelu vaikuttaa liian tiiviiltä Sommittelu on helppo ymmärtää Kaikki sopii yhteen tällä sivustolla Sommittelu vaikuttaa hajanaiselta Sommittelu on hyvin jäsennelty VisaWI Simplicity, Diversity, Colourfulness, Craftmanship. (Moshagen & Thielsch, 2010) 2. MONINAISUUS Sommittelu on miellyttävän monipuolista Ulkoasu on kekseliäs Ulkoasu ei vaikuta inspiroivalta Täysin eri mieltä Osittain eri mieltä Ei samaa eikä eri mieltä Osittain samaa mieltä Täysin samaa mieltä Heuristic evaluation of website attractiveness and usability (Sutcliffe, 2001) https://developer.apple.com/library/mac/documentation/userexperience/conceptual/applehigui delines/hiprinciples/hiprinciples.html Microsoft: ht Sommittelu näyttää dynaamiselta Ulkoasu vaikuttaa tylsältä 3. VÄRIKYLLÄISYYS Värisommittelu näyttää miellyttävältä Värit eivät sovi yhteen Täysin eri mieltä Osittain eri mieltä Ei samaa eikä eri mieltä Osittain samaa mieltä Täysin samaa mieltä Värivalinta on epäonnistunut Värit ovat houkuttelevia 4. SUUNNITTELUN LAADUKKUUS Täysin eri mieltä Osittain eri mieltä Ei samaa eikä eri mieltä Osittain samaa mieltä Täysin samaa mieltä Ulkoasu näyttää ammattimaisesti suunnitellulta Ulkoasu ei vaikuta ajan tasalla olevalta Ulkoasu on suunniteltu huolellisesti Käyttöliittymän suunnittelusta puuttuu idea
Visuaalisen suunnittelun kieli A primary technique to achieve improved visual communication is to use clear, distinct, consistent visible language. Visible language refers to all the verbal and visual signs that convey meaning to a viewer (Marcus, 1992)
Visuaalisen suunnittelun kieli Visuaalisen suunnittelukielen tekijät: Visuaaliset ominaisuudet (muoto, väri, tekstuuri, koko, suunta ) Suunnitteluelementit (viiva, piste, volyymi, taso ) Tekijät joiden mukaan ovat suhteessa toisiinsa (tasapaino, symmetria, rytmi) (Mullet & Sano, 1995) (Silvennoinen et al., 2014)
Visuaalinen kieli Johdonmukainen käyttö mahdollistaa tunnistamisen ja tulkinnan asetetaan ja ylläpidetään käyttäjien odotuksia visuaalisilla elementeillä Visuaalisen kielen sanasto persoonallisuus, värisuunnittelu, sommittelu, kuvat & kontrollit jne. Visuaalinen hierarkia elementtien tarkoituksen mukainen korostaminen suhteessa toisiinsa, sijoittelun, ryhmittelyn ja kontrastin avulla Elementtien muokkaamisen ja niiden karikaatyyrien kautta päästään käsille suunnittelun ytimeen (Schlatter & Levinson, 2013)
Sommittelun periaatteet Huomion ohjaus & palkitseminen jokainen elementti tulisi suunnitella niin, että katsojan huomio palkitaan ja että elementti ohjaa katsojan huomion toiseen elementtiin luoden jatkuvan syklin käyttäjän johdatteleminen kiinnostumaan käyttöliittymästä visuaalisten elementtien ja voimien sopivalla asettelulla suhteessa toisiinsa (Schlatter & Levinson, 2013)
Sommittelun keinot 1/2 Rytmi sidottu ja vapaa Jännite rinnastamalla vastakohtia. Kuvapinta alkaa elää vasta silloin, kun sen osien välillä vallitsee vastakkaisia voimavarauksia. Jännite syntyy vastakohtien eri kontrastien rinnastuksesta ja vuorovaikutuksesta
Sommittelun keinot 2/2 Tasapaino on saavutettu, jos sommitelma vaikuttaa vakaalta, eikä synny tarvetta lisätä tai poistaa mitään staattinen tasapaino (symmetria, sidottu rytmi) dynaaminen tasapaino (jännitteinen staattinen tasapaino, vapaa rytmi, dynaamisuus ja jännitteisyys) Vertikaali ja horisontaali Symmetrinen tasapaino Epäsymmetrinen tasapaino Säteittäinen tasapaino
Tyhjä tila Tyhjä, valkoinen tai negatiivinen tila helpottaa vähentämään käyttäjien kognitiivista kuormaa ja ohjaa huomion olennaiseen sisältöön (vrt. visual clutter) Aktiivinen tyhjä tila tarkoituksella luotua tilaa ohjaa käyttäjän elementistä toiseen ja jäsentää sisältöä elementtiejä ympäröivää tilaa kasvattamalla elementtien korostus, tärkeys ja havaitseminen (Golombisky & Hagen, 2010) Passiivinen tyhjä tila sommittelun sivutuote (mm. rivien välit) voi hyödyntää esimerkiksi riviväliä kasvattamalla tekstin luettavuuden sekä ymmärrettävyyden parantamiseksi (Schlatter & Levinson, 2013) Voi toimia itsessään voimakkaana suunnitteluelementtinä
Kuvasto Kuvat, kuvitukset, ikonit, animaatiot, taulukot, charts, videot, kartat, kuvakaappaukset, infografiikka, logot, kuviot Kommunikointi (rooli, aihe, laatu), houkuttelevuus, kutsuu vuorovaikutukseen, emotionaalinen osallistaminen käyttäjät halukkaampia toimimaan (Schlatter & Levinson, 2013) vrt. klassinen ehdollistaminen (Lidwell, 2003) Mitkä kuvat välittävät haluttua viestiä koko, sijainti, tyhjä tila, sommittelu, pääasiallinen kommunikoinnin päämäärä, hyödyt käyttäjille, käyttäjien odotukset,käyttökonteksti, genret tyyli (selkeyttäjänä, persoonallisena & erottelevana tekijänä)
Typografia Suorat, päätteettömät fontit + fonttikoko Suuraakkoset eli versaalit koetaan usein MONOTONISIKSI (vrt. Monotoninen) Alleviivausta ei tulisi käyttää korostamiseen, eikä kursivointia, lihavoituakin säästeliäästi Tyhjän tilan käyttö (mm. rivivälit, marginaalit, korostaminen) Kontrasti, ryhmittely, selkeys, kiinnostavuus Tyyli, jota voi käyttää läpi ohjelman (yleensä tasaus vasemmalle) Tekstistä tulee vaikea lukuisempaa rivin pituuden lisääntyessä. Optimi on noin 50-60:n merkkiä (merkki: välit, kirjaimet ja välimerkit) Verdana Arial Helvetica
Visuaalinen käytettävyys Visuaalisesti ohjataan käyttäjää hahmottamaan elementit, ohjataan katsetta käyttöliittymässä sekä luodaan mielikuvia esteettisyydestä ja viestinnällisyydestä (sommittelu, värisuunnittelu, typografia)
Havainnointi Visuaalinen kognitio - elementtien tunnistus, elementtien jäsennys, tiedon järjestys muistissa ja merkitykset aikaisempaan tietoon assosioimalla (Solso, 1997) odotamme näkevämme tiettyjä ominaisuuksia ja niiden välistä vuorovaikutusta ( Seeing More than the eye beholds higher-order cognition) Sisäiset representaatiot kognitiivisina oikopolkuina nopea päätelmä stimuluksen genren sopivuudesta odotuksiin vaikuttavat havaintoihin visuaalisesta ulkoasusta (vrt. käyttöliittymägenret esim. verkkopankit) Tuttuus, prototyyppisyys (Martindale, 1984; Winkielman, et al., 2006) tunnistus, kogniitivisten prosessien minimointi (Whitfield, 2000)
Tuttuus: Mere-exposure Efekti Stimulukselle kerta toisensa jälkeen altistuminen nostaa stimuluksen pidettävyyttä Toiston jatkuminen (10 kertaa), kyllästyminen-kompleksisuus, exposuren kesto Visuaalinen miellyttävyys ja hyväksyntä (konventiot) (Lidwell et al., 2003) Mitä sujuvammin stimulus voidaan prosessoida sitä miellyttävämpänä se koetaan (Reber et al., 2004) Kaksitahoinen mere-exposure efekti riippuu stimuluksen ensivaikutelmasta ( + & -) (Zajonc, 1968, Bornstein, 1989) (Brickman, Redfield, Harrison &Crandall, 1972)
Hahmolait: Prägnanz 1/3 Gestalt lait kuvaavat havaintojen jäsentymistä The law of Prägnanz ( hyvän muodon laki / yksinkertaisuuden laki ) The Psychological organization will be as good as the prevailing conditions allow (Koffka, 1935) Visuaalinen järjestelmä pyrkii mahdollisimman yksinkertaiseen ja säännölliseen järjestykseen Muisti & vähemmän kognitiviisia prosesseja (Hatfield & Epstein, 1985)
Hahmolait: Figure-ground 2/3 Hahmon ja taustan suhde elementit havaitaan joko hahmoina (huomion objekteina) tai taustana (näkökentän loppuosa) Visuaaliset vihjeet hahmon ja taustan määrittämisessä hahmolla tarkka muoto, tausta muodoton tausta jatkuu hahmon takana hahmo vaikuttaa olevan lähempänä katsojaa määritellyssä tilallisessa sijannissa tausta kauempana ilman tarkkaa lokaatiota elementit alaosassa hahmoja, yläosassa taustaa
Ryhmittely 3/3 Samankaltaisuus Kohde ja tausta Läheisyys Yhteinen liike (esim. Galitz, 2007)
Johdonmukaisuus Visuaalisen ilmeen johdonmukainen käyttö käyttöliittymän elementeissä Sisäinen yhdenmukaisuus = sovelluksen sisäiset ratkaisut kaikkialla yhteneviä (elementtien sijainti + käyttötapa, värikoodaus, terminologia jne. + eri alustat) Ulkoinen yhdenmukaisuus = sovelluksen ratkaisut vastaavat muiden sovellusten tuttuja käytäntöjä Rakenteen ja käytettyjen ratkaisujen yhdenmukaisuus nopeuttaa oppimista ja vähentää muistamista (nimet, värit jne.) Vallitsevien standardien noudattaminen (konventiot, visuaalinen aakkosto, tyylioppaat) Sovelluksen tulee antaa käyttäjille visuaalista palautetta
Visuaalinen attentio 1/4 Tiedostetun havainnon rajallinen kapasiteetti yhden asian huomioiminen kerrallaan attentio auttaa päättämään mihin katse seuraavaksi siirretään näkymän havainto koostuu attentiosta, silmänliikkeistä ja muistista Bottom-up - alueet, jotka kiinnittävät huomiota ominaisuuksillaan (väri, kontrasti, negatiivinen tila, liike) Top down - tehtävät, päämäärät (spatiaalinen + ominaisuus-pohjainen huomio) Overt (rajallinen visuaalinen näkökenttä ) & covert attentio (muutokset havainnoijan kognitiivisessa huomiossa) (Posner, 1980)
Attention elementit 2/4 Pop out efekti (esim. Ware, 2008) attention kohdistuminen tiettyyn stimulukseen erottuvien visuaalisten ominaisuuksien vuoksi tahdosta riippumaton havainto - kontrasti Valikoitu visuaalinen attentio olennaisen tiedon erottamisessa clutter ylikuormittaa visuaalisen tiedon prosessoinnin (McCarley & Steelman, 2013) Attentio ihmiskasvoissa (Esim. Djamasbi et al., 2011) yhteinen sosiaalinen kiinnostuksen kohde Albert Edelfelt, Kuningatar Blanca, 1877; Ruokolahden eukkoja kirkonmäellä, 1887.
Attention tilalliset elementit 3/4 Nielsen/ Norman Research Group: F-kuvio visuaalisten elementtien vaikutus visuaalinen hierarkia visuaalisen tason painoarvot Gutenberg diagrammi havainnointikuvio tasaisesti jaetussa tasa-arvoisessa visuaalisessa informaatiossa
Huomion kiinnittäminen 4/4 Liikkuva kuva huomio elementtiin samankaltaisten joukosta tai huomauttaa käyttäjälle uudesta tiedosta (Hong et al., 2004) Kuvat tunnistettavuuden nopeus, tulkitsemme nopeasti kuvista merkityksiä, jos ne ovat esitetty ymmärrettävällä tavalla Ihmistä esittävä kuva lähikuva ihmisen kasvoista tai kasvoja muistuttava visuaalinen ärsyke Kontrasti esim. kuvien ja tekstien välillä Värit päävärit: sininen, punainen ja keltainen & välivärit: vihreä, violetti ja oranssi (esim. Schlatter & Levinson, 2013)
Flow Tarvittavat tehtävät löytyvät flowsta Elementtien asettelu kuvastaa sitä järjestysta, jossa tehtävä suoritetaan Elementit, jotka aloittavat tehtävän ovat vasemmassa yläkulmassa tai ylhäällä keskellä Odottamattomia hyppyjä ja katkoja Elementit kuvastavat suorituksen vaiheita
Värisuunnittelu Väreillä kommunikoidaan ja välitetään viestejä. Värit vaikuttavat käytettävyyteen, esteettisyyteen ja toimivat symboloivina tekijöinä. Värien avulla voidaan korostaa tai muotoilla visuaalista informaatiota ja edesauttaa viestin tulkitsemista oikealla tavalla.
Väriharmonia A primary visual element (Poulin, 2011) Väriyhdistelmiä - sopivat sävyt, tummuudet ja kylläisyydet. Yhden ja useamman värin yhteisvaikutus. Kohtaaminen ilman voimakasta rinnastusta (Esim. Albers, 1975; Itten, 1973) Lähiväriharmonia 12-osaisen väriympyrän jonkin neljänneksen vierekkäisiä värejä ja niiden valöörejä sekä kylläisyyksiä Yksiväriharmonia monokromaattisella harmonialla vivahdesarjoilla (värimaailman visuaalinen käytettävyys vs. kiinnostavuus) Valööriharmonia kromaattisiin väreihin perustuva harmonia. Lähekkäiset valöörit luovat yhtenäisiä pintoja ja kokonaisuuksia (vastakohtien rinnastus vetää huomiota puoleensa) Värikylläisyys ja valoisuus ovat sopivia koodauksia jonkin asian määrän ilmoittamiseen (joku on enemmän, joku toinen vähemmän jotain)
Värien vuorovaikutus Värin luonne riippuu sen paikasta ja suunnasta, kontrastiolosuhteista, väripinnan koosta ja muodosta sekä muista käytetyistä väreistä (Albers, 1975) Vaaleat, kirkkaat ja lämpimät värit vaikuttavat nousevan lähemmäksi katsojaa Voimakkaat värit esim. vastavärit aiheuttavat väreilyä alueiden rajalla (jälkikuvat) Valppaus, jännitys (pitkä aallonpituus) vs. rauhoittava (lyhyt) Kulttuuriset ja emotionaaliset merkitykset sekä henkilökohtaiset mieltymykset 1. Värisävyjen rinnastus 2. Valöörikontrasti 3. Kulöörikontrasti 4. Vastaväririnnastus 5. Määrärinnastus (Itten, 1973)
Värit ja suunnittelu Värien avulla voidaan tehostaa käytettävyyttä, kiinnittää huomiota, auttaa tunnistamaan ja muistamaan, ilmaista yhteenkuuluvuutta, ilmaista kenttien ja tietojen tilaa, sekä lisätä käytön miellyttävyyttä ja luoda tunnelmaa Aloitus suurimmasta väripinnasta (mitä voimakkaampi väri on, sitä pienempinä pinta) Ei pidä luottaa pelkästään väriin (käyttöliittymän toimivuus harmaasävyisenäkin ) Kirkkaat värit vaarasignaaleihin, huomion herättäjiin ja muistuttajiin (fonteissa kirkkausero tekstin ja taustan värin välillä) 1 perusväri valööreineen sekä 1-2 kontrastiväriä (max. 5 +- 2 värin merkityksen muistamisessa)
Värit ja esteettömyys Punainen, vihreä, ruskea, harmaa ja violetti sijoitettuina toistensa viereen sekoittuvat keskenään Tarpeeksi voimaakkaat kontrastit taustan ja tekstin välillä Helpoiten toisistaan erottuvat sininen, keltainen, musta ja valkoinen Värisignaaleja, joiden väri vaihtuu punaisesta vihreäksi, punaisesta keltaiseksi tai vihreästä keltaiseksi tulisi välttää Vaalean sininen (ikääntyminen, siniherkkien tappisolujen vähyys) Pimeässä: vaaleat tekstit keskitummalla pohjalla (punainen ei näy pimeässä) Värisuunnittelun tueksi: Color Scheme Designer http://colorschemedesigner.com/ Color Schemer Online v2 http://www.colorschemer.com/online.html Vischeck http://www.vischeck.com/daltonize/ COLOURlovers http://www.colourlovers.com/
Väreillä kommunikointi Tarkoitus - viestin tarkoitus voidaan esittää värillä Tila - objektin tila voidaan päätellä sen väristä (esim. sininen vs. violetti linkki) Erotteleminen - käyttäjät olettavat, että samanvärisillä objekteilla on yhteys toisiinsa, värikoodit ovat tehokas tapa erotella objekteja Painotus - huomion kiinnittäminen väreillä (Windows käyttää sinisiä pääohjeita erottumaan muusta tekstistä) ------------------------------------------------------------------------------------------------------------------------------ Punaisen, keltaisen ja vihreän tulkinta on globaalisti yhtenevä toiminnallisuudeltaan (UNESCON Wienin liikennemerkkejä ja opasteita koskevasta yleissopimuksesta, joka määrittää kansainvälisen yleissopimuksen liikennevaloille) jos näitä värejä täytyy käyttää muuhun kuin tilan ilmoittamiseen, tulisi käyttää murrettuja tai taitettuja värejä puhtaiden sijaan
Lähteet 1/2 Albers, J. (1975). Interaction of Color. Yale University Press, New Haven. Bornstein, R. F. (1989). Exposure and affect: Overview and meta-analysis of research, 1968 1987. Psychological Bulletin, 106(2), 265-289. Brickman, P., Redfield, J., Harrison, A.A. & Crandall, R. (1972). Drive and predisposition as factors in the attitudinal effects of mere exposure. Journal of Experimental Social Psychology, 8(1), 31-44. http://www.sciencedirect.com/science/article/pii/0022103172900595 Galitz, W.O. (2007). Essential guide to user interface design: an introduction to GUI design principles and techniques. New York: Wiley. https://jyu.finna.fi/record/jykdok.1400436 Garrett, J.J. (2000). The Elements of User Experience, 2 nd ed. Thousand Oaks, CA, USA: New Riders Publishing. https://jyu.finna.fi/record/jykdok.1444244 Golombisky, K., & Hagen, R. (2010). White space is not your enemy. A beginner s guide to communicating visually through graphic, web & multimedia design. Burlington, MA, USA: Focal Press. https://jyu.finna.fi/record/jykdok.1242351 Hatfield, G., & Epstein, W. (1985). The status of the minimum principle in the theoretical analysis of visual perception. Psychological Bulletin, 97, 155-186. http://www.sas.upenn.edu/~hatfield/minprin1985.pdf Hong, W., Thong, J. Y. L., &Tam, K. Y. (2004). Does Animation Attract Online Users Attention? The Effects of Flash on Information Search Performance and Perceptions. Information Systems Research, 15(1), 60-86. http://pubsonline.informs.org/doi/abs/10.1287/isre.1040.0017 Itten, J. (1973). The Art of Color: the subjective experience and objective rationale of color. New York: Van Nostrand Reinhold. http://monoskop.org/images/4/46/itten_johannes_the_elements_of_color.pdf Koffka. (1935). Principles of Gestalt Psychology. London, UK: Lund Humphries. Lidwell, W., Holden, K., & Butler, J. (2003). Universal Principles of Design. Beverly, MA: Rockport Publishers. McCarley, J.S. & Steelman, K.S. (2013). Visual Attention and Display Design. In Johnson, A. & Proctor, R. (Eds.) Neuroergonomics: A cognitive neuroscience approach to human factors and ergonomics. Palgrave: Macmillan. Marcus, A. (1992). Graphic design for electronic documents and user interfaces. New York: ACM Press. Martindale, C. (1984). The pleasures of thought: A theory of cognitive hedonics. Journal of mind and behavior, 5, 49-80. Moshagen, M., & Thielsch, M. T. (2010). Facets of visual aesthetics. International Journal of Human-Computer Studies, 68(10) 689-709. http://www.sciencedirect.com/science/article/pii/s1071581910000777
Lähteet 2/2 Mullet, K., & Sano, D. (1995). Designing Visual Interfaces: Communication Oriented Techniques. Upper Saddle River, NJ: Prentice Hall. http://wireframe.vn/books/designing-visual-interfaces-communication-oriented-techniques.9780133033892.46334.pdf Posner, M.I. (1980). Orienting of Attention. Quarterly Journal of Experimental Psychology, 32, 3-25. http://psych.unl.edu/mdodd/psy498/posner.pdf Poulin, R. (2011). The language of graphic design: an illustrated handbook for understanding fundamental design principles. Beverly, MA: Rockport Publishers. https://jyu.finna.fi/record/jykdok.1433303 Reber, R., Schwarz, N., & Winkielman, P. (2004). Processing fluency and aesthetic pleasure: Is beauty in the perceiver s processing experience? Personality and Social Psychology Review 8(4), 364-382. http://www.helsinki.fi/~tjrinne/artikkeleita_neuroi/esteettinen_kokemus/reber_2004_processin%20fluency.pdf Schlatter, T., & Levinson, D. (2013). Visual Usability, Principles and Practices for Designing Digital Applications. Morgan Kaufman: MA, USA. https://jyu.finna.fi/record/jykdok.1498461 Silvennoinen, J., Vogel, M., & Kujala, S. (2014). Experiencing Visual Usability and Aesthetics in Two Mobile Application Contexts. Journal of Usability Studies, 10(1),46-62. http://uxpajournal.org/experiencing-visual-usability-and-aesthetics-in-two-mobile-application-contexts/ Sutcliffe, A. (2001). Heuristic Evaluation of Website Attractiveness and Usability. Proc. of 8th International Workshop on Interactive Systems: Design, Specification, and Verification-Revised Papers, pp. 183-198. http://link.springer.com/chapter/10.1007%2f3-540-45522-1_11 Solso, R. (1997). Cognition and the Visual Arts. Cambridge, MA: MIT Press. Chapter 5: http://www.arts.rpi.edu/~ruiz/advanceddigitalimaging/readingsadi/solso%20context%20cognition%20art.pdf Ware, C. (2008). Visual Thinking for Design. Burlington, Mass: Morgan Kaufman. http://www.sciencedirect.com/science/book/9780123708960 Whitfield, T.W.A. (2000). Beyond prototypicality: towards a Categorical-Motivation model of aesthetics. Empirical Studies of the Arts, 18, 1-11. http://art.sagepub.com/content/18/1/1.abstract Zajonc, R.B. (1968). Attitudinal Effects of Mere Exposure. Journal of Personality and Social Psychology, 9(2), 1-27. http://www.morilab.net/gakushuin/zajonc_1968.pdf