Visuaalinen käyttöliittymä- suunnittelu
|
|
- Heikki Hukkanen
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 Visuaalinen käyttöliittymä- suunnittelu Design grounded in principles of aesthetics and an understanding of people TJTA104 Ihmisen ja teknologian vuorovaikutus Johanna Silvennoinen
2 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
3
4 (Garrett, 2010)
5 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
6 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)
7 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: l/applehiguidelines/hiprinciples/hiprinciples.html Microsoft: Apple: /HIPrinciples.html Microsoft:
8 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
9 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) 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
10 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)
11 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)
12 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)
13 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)
14 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
15 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
16 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ä
17 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ä)
18 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
19 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)
20 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)
21 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)
22 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)
23 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
24 Ryhmittely 3/3 Samankaltaisuus Kohde ja tausta Läheisyys Yhteinen liike (esim. Galitz, 2007)
25 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
26 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)
27 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.
28 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
29 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)
30 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
31 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.
32 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)
33 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)
34 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 värin merkityksen muistamisessa)
35 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 Color Schemer Online v2 Vischeck COLOURlovers
36 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
37 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, Psychological Bulletin, 106(2), 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), Galitz, W.O. (2007). Essential guide to user interface design: an introduction to GUI design principles and techniques. New York: Wiley. Garrett, J.J. (2000). The Elements of User Experience, 2 nd ed. Thousand Oaks, CA, USA: New Riders Publishing. 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. Hatfield, G., & Epstein, W. (1985). The status of the minimum principle in the theoretical analysis of visual perception. Psychological Bulletin, 97, 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), Itten, J. (1973). The Art of Color: the subjective experience and objective rationale of color. New York: Van Nostrand Reinhold. 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, Moshagen, M., & Thielsch, M. T. (2010). Facets of visual aesthetics. International Journal of Human-Computer Studies, 68(10)
38 Lähteet 2/2 Mullet, K., & Sano, D. (1995). Designing Visual Interfaces: Communication Oriented Techniques. Upper Saddle River, NJ: Prentice Hall. Posner, M.I. (1980). Orienting of Attention. Quarterly Journal of Experimental Psychology, 32, Poulin, R. (2011). The language of graphic design: an illustrated handbook for understanding fundamental design principles. Beverly, MA: Rockport Publishers. 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), Schlatter, T., & Levinson, D. (2013). Visual Usability, Principles and Practices for Designing Digital Applications. Morgan Kaufman: MA, USA. Silvennoinen, J., Vogel, M., & Kujala, S. (2014). Experiencing Visual Usability and Aesthetics in Two Mobile Application Contexts. Journal of Usability Studies, 10(1), 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 Solso, R. (1997). Cognition and the Visual Arts. Cambridge, MA: MIT Press. Chapter 5: Ware, C. (2008). Visual Thinking for Design. Burlington, Mass: Morgan Kaufman. Whitfield, T.W.A. (2000). Beyond prototypicality: towards a Categorical-Motivation model of aesthetics. Empirical Studies of the Arts, 18, Zajonc, R.B. (1968). Attitudinal Effects of Mere Exposure. Journal of Personality and Social Psychology, 9(2),
Visuaalinen käyttöliittymäanalyysi
Visuaalinen käyttöliittymäanalyysi Johdanto Tehtävänä on analysoida Saariston ekologia-kurssilla käytettävän tietokoneohjelman käyttöliittymän visuaalisia ominaisuuksia. Vastaa ensiksi VisaWi -lomakkeeseen
LisätiedotKäyttöliittymien läpikäynti
Käyttöliittymien läpikäynti Creating a succesful user experience requires having explicitly defined reasons for every choice you make TJTA104 Ihmisen ja teknologian välinen vuorovaikutus Johanna Silvennoinen
LisätiedotKÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu
KÄYTTÖLIITTYMÄT Visuaalinen suunnittelu MUISTETTAVA Yksinkertaisuus Selkeys Johdonmukaisuus Sommittelutyyli on säilytettävä samankaltaisen koko sivustossa Sivustolle yhtenäinen ulkoasu Miellyttävä ulkonäkö
LisätiedotKÄYTTÄJÄKOKEMUS & KÄYTTÖLIITTYMÄSUUNNITTELU. CSE- C3800, Aalto 16.9.2015, Eeva Raita
KÄYTTÄJÄKOKEMUS & KÄYTTÖLIITTYMÄSUUNNITTELU CSE- C3800, Aalto 16.9.2015, Eeva Raita TÄNÄÄN 1. KÄYTTÄJÄKOKEMUS EI OLE 2. KÄYTTÄJÄKOKEMUS ON 3. RYHMÄTEHTÄVÄ 4. HUOMIOINTI SUUNNITTELUSSA CSE- C3800, 16.9.2015,
LisätiedotHELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 23.11.00 13:28
HELIA 1 (15) Luento 3 Käytettävyyden osapuolet... 2 Ihminen tietojenkäsittelijänä... 3 Muistitoiminnot... 4 Työmuisti (lyhytkestoinen muisti )... 4 Säilömuisti (pitkäkestoinen muisti)... 4 Sensoriset muistit...
LisätiedotVÄRIT 12.2.2015 WWW-VISUALISOINTI - IIM60110 - VÄRIT
VÄRIT 12.2.2015 Väri on silmään saapuvan valon aistittava ominaisuus, joka havaitaan näkö- ja väriaistilla. Värin aistiminen riippuu silmään saapuvan valon sisältämistä aallonpituuksista ja niiden voimakkuuksista.
LisätiedotOpetusmateriaalin visuaalinen suunnittelu. Kirsi Nousiainen 27.5.2005
Opetusmateriaalin visuaalinen suunnittelu Kirsi Nousiainen 27.5.2005 Visuaalinen suunnittelu Ei ole koristelua Visuaalinen ilme vaikuttaa vastaanottokykyyn rauhallista jaksaa katsoa pitempään ja keskittyä
LisätiedotSami Hirvonen. Ulkoasut Media Works sivustolle
Metropolia ammattikorkeakoulu Mediatekniikan koulutusohjelma VBP07S Sami Hirvonen Ulkoasut Media Works sivustolle Loppuraportti 14.10.2010 Visuaalinen suunnittelu 2 Sisällys 1 Johdanto 3 2 Oppimisteknologiat
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 3/8: Visuaalinen suunnittelu
LisätiedotKäytettävyyslaatumallin rakentaminen web-sivustolle. Oulun yliopisto tietojenkäsittelytieteiden laitos pro gradu -suunnitelma Timo Laapotti 28.9.
Käytettävyyslaatumallin rakentaminen web-sivustolle Tapaus kirjoittajan ABC-kortti Oulun yliopisto tietojenkäsittelytieteiden laitos pro gradu -suunnitelma Timo Laapotti 28.9.2005 Kirjoittajan ABC-kortti
LisätiedotOhjeita informaation saavutettavuuteen
Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea
LisätiedotJohdatus vuorovaikutteiseen teknologiaan
Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli
LisätiedotVisuaalisen suunnittelun alkeita. Aiheina
Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli
LisätiedotYksilöllistä, puhuroi, suorita - Mitä käyttöliittymien termien taakse kätkeytyy?
Yksilöllistä, puhuroi, suorita - Mitä käyttöliittymien termien taakse kätkeytyy? Niina Nissilä & Suvi Isohella Minä ja tiede Seinäjoki 18.3.2014 Vaasa 20.3.2014 Esityksen rakenne Lähtökohta Järjestelmä,
LisätiedotKäyttäjäkeskeisen suunnittelun periaatteet ja prosessit
Käyttäjäkeskeisen suunnittelun periaatteet ja prosessit Kurssilla: Johdatus käyttäjäkeskeiseen tuotekehitykseen 23.1.2008 Johanna Viitanen johanna.viitanen@soberit.hut.fi Luennon aiheet Tuotekehityksen
LisätiedotKäyttökokemuksen evaluoinnista käyttökokemuksen ohjaamaan suunnitteluun. ecommunication & UX SUMMIT 18.9.2013 Eija Kaasinen, VTT
Käyttökokemuksen evaluoinnista käyttökokemuksen ohjaamaan suunnitteluun ecommunication & UX SUMMIT 18.9.2013 Eija Kaasinen, VTT 2 Hyvä käyttökokemus Laadukas käyttökokemus Ylivoimainen käyttäjäkokemus
LisätiedotGraafinen ohjeistus 03/2016
Graafinen ohjeistus 03/2016 Sisältö Laatukeskuksen visuaalisen ilmeen tavoitteena on ilmentää laatua, ammattimaisuutta, uskottavuutta ja erinomaisuutta. Viestinnässä pyritään luomaan yksinkertaisen tyylikäs
LisätiedotVerkkopalvelun sisällöntuotanto
Verkkopalvelun sisällöntuotanto 8. luento 14.12.2005 erikoistutkija Kirsi Silius & tutkija Anne-Maritta Tervakari Hypermedialaboratorio Digitaalisen median instituutti Tampereen teknillinen yliopisto Teemat
LisätiedotOPPIMINEN ja SEN TUKEMINEN Supporting learning for understanding
OPPIMINEN ja SEN TUKEMINEN Supporting learning for understanding Vetäjät: Jonna Malmberg jonna.malmberg@oulu.fi Tutkimusryhmä: Oppimisen ja Koulutusteknologian Tutkimusyksikkö (LET) LET tutkii (1) Conceptual
LisätiedotAkavan. graafinen ohjeistus 3.12.2015
Akavan 3.12.2015 graafinen ohjeistus Esipuhe Tunnus Opiskelijoiden tunnus Akavalainen-tunnus Tunnuksen suoja-alue Tunnuksen käyttö Väripaletti Typografia Kuvat, muodot ja värit Akavan slogan ja strategiset
LisätiedotKäyttöliittymän suunnitteluohje, käytettävyyden psykologia. Laskari 6
Käyttöliittymän suunnitteluohje, käytettävyyden psykologia Laskari 6 Käytettävyyden psykologia Ihmisen psykologisen toiminnan periaatteet on otettava huomioon käyttöliittymää suunniteltaessa Miten ihminen
LisätiedotIHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet
IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet Aiheet tänään Värit käyttöliittymäsuunnittelussa Kuvakkeiden suunnittelu Värit käyttöliittymässä Of all design elements, color most exemplifies the
LisätiedotLUENTO 3. Toiminnan kehä
LUENTO 3 1) Ihminen toimijana ja laitteen käyttäjänä 2) Ihminen laitteen käytön oppijana 3) Käytettävyys 4) Harjoitustehtävä 2 5) Luentotehtävä 3 IHMINEN TOIMIJANA JA LAITTEEN KÄYTTÄJÄNÄ Toiminnan kehä
LisätiedotTunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita.
Graafinen ohjeisto Tunnus Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Visio: Suomi on Euroopan kilpailukykyisin
Lisätiedotpunainen lanka - Kehitysjohtaja Mcompetence Oy 20.3.2012 markokesti.com Työhyvinvoinnin kohtaamispaikka Sykettätyöhön.
Henkilöstötuottavuuden punainen lanka - työhyvinvoinnilla tuottavuutta Marko Kesti Kehitysjohtaja Mcompetence Oy 20.3.2012 Ota yhteyttä ja seuraa blogiani: markokesti.com Työhyvinvoinnin kohtaamispaikka
LisätiedotKäytettävyys ja käyttäjätutkimus. Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi
Käytettävyys ja käyttäjätutkimus Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi Teron luennot Ke 15.2 miniluento Ti 28.2 viikkotehtävän anto (T,M) To 1.3 Tero paikalla (tehtävien tekoa) Ti 6.3
LisätiedotSISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA
Suomen Lions-liitto ry:n GRAAFINEN OHJEISTO SISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA 2 3 4 5 6 Suomen Lions-liitto ry:n graafinen ohjeisto on tehty yhtenäistämään järjestön
Lisätiedot18 Komponentit, ulkoasu ja visuaalisuus. Materiaalit CC-BY 4.0 Mikko Lampi
18 Komponentit, ulkoasu ja visuaalisuus Materiaalit CC-BY 4.0 Mikko Lampi Sisältö Alustus 1. Pelikomponentit 2. Ulkoasu ja visuaalisuus 3. Esimerkkejä Työskentelyä Pelikomponenttien suunnittelu Visuaalisuuden
Lisätiedot1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI...
GRAAFINEN OHJEISTO 1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 PÄÄLLEKKÄISVERSIO... 4 RINNAKKAISVERSIO... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... 5
LisätiedotArvokas. Graafinen ohjeistus
Graafinen ohjeistus Sinä olet arvokas! -ohjelma rakentaa yhdenvertaisempaa Suomea, jossa jokaisella lähtökohdista ja elämäntilanteesta riippumatta on mahdollisuus kokea olevansa merkityksellinen osa yhteisöä
LisätiedotDigitaalinen MUOTOILU. Petra Suominen
MUOTOILU Petra Suominen petra.suominen@adkreppi.fi Mikä on yrityksen GRAAFINEN ILME ja on mikä sen tarkoitus? Petra Suominen petra.suominen@adkreppi.fi Graafinen ilme on yritykselle tai yhteisölle luotu
LisätiedotSuunnittelijan sana. 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia
Graafinen ohjeisto Sisältö 2 Suunnittelijan sana 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia Suunnittelijan sana Tämän graafisen ohjeiston tarkoitus
LisätiedotTHL - Kansalaispalvelujen graafiset tunnisteet. Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys
THL - Kansalaispalvelujen graafiset tunnisteet Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys Palveluvaaka.fi & Omahoitopolut.fi Teemavärit Kansalaispalveluiden ilmeeseen
LisätiedotOpetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä
Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä Jukka Paukkeri (projektitutkija) Tampereen Teknillinen Yliopisto Matematiikan laitos Intelligent Information Systems Laboratory
LisätiedotCSS - tyylit. 13.11.2000 Seppo Räsänen
CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotAjalliset muunnokset eksploratiivisen paikkatietoanalyysin työkaluna. Salla Multimäki ProGIS Ry Paikkatietomarkkinat
Ajalliset muunnokset eksploratiivisen paikkatietoanalyysin työkaluna Salla Multimäki ProGIS Ry Paikkatietomarkkinat 7.11.2017 Informaatiokuorma kognitiivinen kuorma - ylikuormitus Information load muodostuu
LisätiedotARVO - verkkomateriaalien arviointiin Arvioitava kohde: Excel-Esitystapa, Arvioija: Juha Kuula, Arviointipäivämäärä:
Arvioitava kohde: Excel-Esitystapa, Arvioija: Juha Kuula, Arviointipäivämäärä: 3.9 Informaation esitystapa p. Jäsennetty esitystapa 4.4 p. [1 Looginen järjestys 4.0 p. [1 Tiiviis muoto 4.8 p. [1 Sivuston
Lisätiedot#saavuta2017 Puheenvuoroja, kognitiivinen saavutettavuus Torstai , klo
#saavuta2017 Puheenvuoroja, kognitiivinen saavutettavuus Torstai 16.11.2017, klo 11.00-12.00 Sami Älli Kehitysvammaliitto ry Saavutettavuus Hyvä saavutettavuus kertoo erilaisten ihmisten tarpeiden huomioimisesta.
LisätiedotTilkkuilijan värit. Saana Karlsson
Tilkkuilijan värit Saana Karlsson Tilkkutöissä erivärisiä kangaspaloja ommellaan yhteen ja siten muodostetaan erilaisia kuvioita. Värien valinta vaikuttaa siihen miten suunnitellut kuviot tulevat tilkkutyössä
LisätiedotHELIA 1 (17) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 2.11.2000
HELIA 1 (17) Luento 6 Tyyliopas... 2 Käytön tuki... 2 Suunnittelun ja toteutuksen tuki... 3 Ohjeiden hierarkia... 4 Viralliset standardit... 4 Käytännön standardit... 4 Yrityskohtaiset standardit... 4
LisätiedotOhjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen
Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso
LisätiedotGraafinen ohjeisto* KESKENERÄINEN PIRAATTIPUOLUE. Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään
versio 0.8 2010 Graafinen ohjeisto* PIRAATTIPUOLUE * Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään Alkusanat G raafiset ohjeistot ovat viestinnän alan
LisätiedotWCAG 2.1 Uudet kriteerit
WCAG 2.1 Uudet kriteerit Web Content Accessibility Guidelines 2.1 Verkkosisällön uudet saavutettavuuskriteerit (WCAG 2.1) Kimmo Sääskilahti Tero Pesonen WCAG:n versiot 1.0 toukokuu 1999 2.0 joulukuu 2008
LisätiedotService Fusion -konsepti
Service Fusion -konsepti Chiru-projekti 3D User experience for Mobile Network Virtual Environments Seamus Hickey Minna Pakanen Leena Arhippainen firstname.lastname@cie.fi Teemaseminaari: Tulevaisuuden
LisätiedotRakennusautomaation käytettävyys. Rakennusautomaatioseminaari 30.5.2013 Sami Karjalainen, VTT
Rakennusautomaation käytettävyys Rakennusautomaatioseminaari 30.5.2013 Sami Karjalainen, VTT 2 Oma tausta Perusinsinööri DI, lvi-tekniikka, TKK 1993 Herääminen käytettävyysasioihin noin 2002 Tekniikan
LisätiedotLähtökohdat puheenvuorolle
Aistitoiminnot - Kognitiiviset toiminnot - Muisti ja oppiminen - Missä voi mennä pieleen? - Miten voi auttaa ja helpottaa muistamista? - Sosio-emotionaalinen alue - Summa Summarum KM Susanna Paloniemen
LisätiedotDESIGN JA ASIAKKAAN ERIKOISKAUPASSA
DESIGN JA ASIAKKAAN KOKEMUS ERIKOISKAUPASSA KTM, FM Maria Pecoraro Jyväskylän yliopiston Kauppakorkeakoulu Kaupan tutkimuspäivä 26.1.2012 DESIGN Menettelytapa, yleinen käsite Toimintaa Suunnitelma tai
Lisätiedotohjeistus retkikerho
Graafinen ohjeistus Esittely Oulun luonnonsuojeluliiton alla toimiva Retkikerho on kanava, jonka avulla voi helposti irrottautua arjesta kaupungin lähiluontoon. Retkitarjonta on hyvin monipuolinen ja kerhon
LisätiedotAJATUKSIA KÄSITYÖTIETEEN ONTOLOGIASTA
1 AJATUKSIA KÄSITYÖTIETEEN ONTOLOGIASTA Prof. Leena Kaukinen Helsingin yliopisto Käsityönopettajan koulutus INTERACTION FIELDS IN CRAFT PROCESSES culture Social groups, societies & institutions time human
LisätiedotVisuaalinen ilme (luonnos)
Työterveys Helsinki Visuaalinen ilme (luonnos) 24.11.2015 1 Työterveys Helsingin ilmeessä sovelletaan Helsingin kaupungille luotuja visuaalisen ilmeen elementtejä uudella kuosilla, tunnuksella ja väripaletilla
LisätiedotEnglannin kielen ja viestinnän ja ammattiaineiden integrointiyhteistyö insinöörikoulutuksessa
Englannin kielen ja viestinnän ja ammattiaineiden integrointiyhteistyö insinöörikoulutuksessa Ammattikorkeakoulujen kielten ja viestinnän opettajien neuvottelupäivät Lapin ammattikorkeakoulussa 13.-14.11.2014
LisätiedotMark Summary. Taitaja2015. Skill Number 206 Skill Verkkosivujen tuottaminen. Competitor Name
Summary Skill Number 206 Skill Verkkosivujen tuottaminen ing Scheme Lock 08-04-2015 17:32:54 Final Lock 07-05-2015 14:59:04 Criterion Criterion Description s Day 1 Day 2 Day 3 Day 4 Total Award A B C D
LisätiedotTIEKE Verkottaja Service Tools for electronic data interchange utilizers. Heikki Laaksamo
TIEKE Verkottaja Service Tools for electronic data interchange utilizers Heikki Laaksamo TIEKE Finnish Information Society Development Centre (TIEKE Tietoyhteiskunnan kehittämiskeskus ry) TIEKE is a neutral,
LisätiedotGraafinen ohjeisto 1.0
Graafinen ohjeisto 1.0 01 01 Peruselementit Logo POP vakuutuksen logo on suunniteltu digitaaliseen ympäristöön ja siksi digitaalinen näkyvyys määrittelee ilmeen. Play-elementti Play-elementti painikkeenomaisena
LisätiedotJohnson, A Theoretician's Guide to the Experimental Analysis of Algorithms.
Kokeellinen algoritmiikka (3 ov) syventäviä opintoja edeltävät opinnot: ainakin Tietorakenteet hyödyllisiä opintoja: ASA, Algoritmiohjelmointi suoritus harjoitustyöllä (ei tenttiä) Kirjallisuutta: Johnson,
LisätiedotSOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2
SOMMITTELU & WWW-LAYOUT 27.9.2016 Sivuston layoutin suunnittelu on sisältöelementtien välisten suhteiden määrittelyä. Sommittelu on kuvallisten elementtien järjestämistä mielekkääksi kokonaisuudeksi kuvapinnalla.
LisätiedotSISÄLLYS JOHDANTO 5. KUVAT 1. TUNNUS - SANOMA 6. VERKKOSIVUT 2. TUNNUS - KÄYTTÖ 7. TUOTEKORTIT JA ESITTEET. 2.1 Suoja-alue. 7.
GRAAFINEN OHJEISTO SISÄLLYS JOHDANTO 1. TUNNUS - SANOMA 2. TUNNUS - KÄYTTÖ 2.1 Suoja-alue 2.2 Eri osien käyttö 2.3 Minimikoot 5. KUVAT 6. VERKKOSIVUT 7. TUOTEKORTIT JA ESITTEET 7.1 Tuotekortit 7.2 Esitteet
LisätiedotKÄYTETTÄVYYS KÄYTETTÄVYYSPÄIVÄ 17.4.2014. Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi?
PÄIVÄ 17.4.2014 Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä) Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi?
LisätiedotMitä direktiivi käytännössä velvoittaa?
Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön
LisätiedotKÄYTETTÄVYYSPÄIVÄ Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä)
KÄYTETTÄVYYSPÄIVÄ 1.4.2016 Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä) KÄYTETTÄVYYS Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat
LisätiedotDigi-TV:n käytettöliittymät
Digi-TV:n käytettöliittymät Helppokäyttöisyys Tehokkuus Luotettavuus Virheettömyys Käyttäjän tyytyväisyys Käytettävyys Käyttäjäkeskeinen suunnittelu 19.11.2001 Sofia Digital Oy sivu 3 Käyttäjä, katsoja
LisätiedotLuentoaikataulu Luento 2 (vko 49) Multimodaalisuus. Visuaaliset suunnitteluperiaatteet. IHTE-2100 KaSuper 2008-2009. Käyttöliittymätyyppejä
IHTE-2100 KaSuper 2008-2009 Luento 2: multimodaalisuus, visuaaliset suunnitteluperiaatteet Luentoaikataulu Luento 1 (vko 49) Kurssijärjestelyt, käyttöliittymän määritelmä. GUI historiaa Luento 2 (vko 49)
LisätiedotLUOVA ETELÄ-KARJALA LOGO
LUOVA ETELÄ-KARJALA LOGO Luova Etelä-Karjala logon lähtökohtana on maantieteellisen alueen muoto liitettynä Saimaaseen ja eteläkarjalaisten kädentaitoihin ja luovuuteen, monipuoliseen taito-tieto-osaamiseen.
Lisätiedot1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko
Sisällys Sisällys 1. Esipuhe Teksti 2. Liikemerkki ja värit eri käyttötilanteissa 2.1 Esimerkkejä liikemerkin käytöstä eri taustoissa 3. Liikemerkin mitat ja suoja-alue 4. Logo ja liikemerkki 5. Slogan
LisätiedotKUVATAIDE VL LUOKKA. Laaja-alainen osaaminen. Tavoitteisiin liittyvät sisältöalueet. Opetuksen tavoitteet
KUVATAIDE VL.7-9 7.LUOKKA Opetuksen tavoitteet Visuaalinen havaitseminen ja ajattelu T1 kannustaa oppilasta havainnoimaan, taidetta, ympäristöä ja muuta visuaalista kulttuuria moniaistisesti ja käyttämään
LisätiedotTIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski
TIEDEPOSTERI - Viestinnän välineenä Marisa Rakennuskoski POSTERILAJIT Mainosposteri(pääpaino kuvilla ja visuaalisuudella) Ammatillinenposteri(vapaamuotoinen, esim. jonkin projektin tapahtumia kuvaava,
LisätiedotMitä mielen hyvinvoinnilla tarkoitetaan? Katja Kokko Gerontologian tutkimuskeskus ja terveystieteiden laitos, Jyväskylän yliopisto
Mitä mielen hyvinvoinnilla tarkoitetaan? Katja Kokko Gerontologian tutkimuskeskus ja terveystieteiden laitos, Jyväskylän yliopisto Mental health: a state of well-being (WHO) in which every individual realizes
LisätiedotEtnografia Tiiu Koort
Etnografia Tiiu Koort 7307050 Hypermedian jatko-opintoseminaari: Tutkimusmenetelmät, kun tutkimuskohteena on ihminen ja tekniikka I Etnografisen tutkimuksen lähtökohdat Etnografia = ihmisestä kirjoittaminen,
LisätiedotTämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen.
Sivu 1/7 Värilaatuopas Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Laatu-valikko Tulostustila Väri Vain musta
LisätiedotW3C: teknologia ja (tieto)yhteiskunta
W3C: teknologia ja (tieto)yhteiskunta Ossi Nykänen Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), W3C Suomen toimisto Esitelmä Hyvin lyhyt versio: World Wide Web Consortium
LisätiedotInnostavaa vuorovaikutusta vai jäätävää puhetta?
Innostavaa vuorovaikutusta vai jäätävää puhetta? Yhdessä seminaari 3.6.2013 Susanna Niinistö Sivuranta Pohdintaa seminaarin päätteeksi Viestinnän muutos miksi meidän kaikkien pitäisi välittää viestintäosaamisestamme
LisätiedotVisuaalisen suunnittelun alkeita. Aiheina
Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Visuaalisen suunnittelun perusteita
LisätiedotSuomen Ampumaurheiluliitto Finnish Shooting Sport Federation. Graafinen ohje visuaalinen ilme
Graafinen ohje visuaalinen ilme Sisällysluettelo 2. Saatesanat 3. Tunnus 4. Värit 5. Typografia 6. Tunnuksen kieliversiot ja juhlatunnus 7. Esimerkkejä graafisen ilmeen sovelluksista Graafinen ohje visuaalinen
LisätiedotUpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
LisätiedotGRAAFINEN OHJEISTUS LOGOT NENÄPÄIVÄ GRAAFINEN OHJEISTUS 2014 NENÄPÄIVÄ
GRAAFINEN OHJEISTUS LOGOT GRAAFINEN OHJEISTUS 2014 GRAAFINEN OHJEISTUS LOGOT LOGO Nenäpäivä-tunnuksen kanssa saa leikkiä ja käyttää mielikuvitusta. Tunnukselle saa löytää uusia mitä merkityksellisempiä
LisätiedotSaavutettavuuswebinaari
Saavutettavuuswebinaari 8.11.2017 Mitä saavutettavuus käytännössä tarkoittaa? Virpi Jylhä, saavutettavuuden asiantuntija, Näkövammaisten liitto Sami Älli, saavutettavuusyksikön johtaja, Kehitysvammaliitto
LisätiedotAutonavigaattorilaitteiden vaikutus käyttäjän ajosuoritukseen säie-kognitio-mallin mukaan
Autonavigaattorilaitteiden vaikutus käyttäjän ajosuoritukseen säie-kognitio-mallin mukaan Esitän, että Salvuccin ja Taatgenin (2008) säie-kognitio-mallin (threaded cognition) avulla voidaan mallintaa autonavigaattoreiden
LisätiedotAPA-tyyli. Petri Nokelainen
APA-tyyli Petri Nokelainen petri.nokelainen@uta.fi American Psychology Association (APA, 2001). Yleisin sosiaalitieteiden käyttämä tyylikirjasto. Artikkelin teksti, jossa on viittaus (referointi) lähdeluettelossa
LisätiedotSuomen Tekstiili ja Muoti ry:n uudistuneen ilmeen graafinen ohjeistus on käytännön työkalu kaikille viestinnän kanssa tekemisissä oleville.
Graafinen ohjeisto Miten graafisilla sovelluksilla viestitään ja opastetaan? Toimiva graafinen ilme sovelluksineen kiteyttää yrityksen imagon, yhtenäistää yrityskulttuuria ja vapauttaa tärkeitä resursseja
LisätiedotSoberIT Software Business and Engineering institute
T-121.700 Käyttäjäkeskeinen konseptisuunnittelu Konseptien havainnollistaminen Mika P. Nieminen mika.nieminen@hut.fi 23.3.2005 Vaihe Amount of active components Briefing Project plan User research User
LisätiedotKäyttöliittymät II. Käyttöliittymät I Kertaus peruskurssilta. Keskeisin kälikurssilla opittu asia?
Käyttöliittymät II Sari A. Laakso Käyttöliittymät I Kertaus peruskurssilta Keskeisin kälikurssilla opittu asia? 1 Käyttöliittymät II Kurssin sisältö Käli I Käyttötilanteita Käli II Käyttötilanteet selvitetään
LisätiedotTEKSTI JA TYPOGRAFIA LEHDESSÄ. Johdanto Arja Karhumaa
TEKSTI JA TYPOGRAFIA LEHDESSÄ Johdanto Arja Karhumaa TYPOGRAFIA LEHDESSÄ Kaikkein tärkein identiteetin, genren ja visuaalisen luonteen ilmaisija Monta tehtävää: 1. Kerronta Typografian tärkein tehtävä:
LisätiedotEvantia 360 Junior Hybrid
Evantia 360 Junior Hybrid Evantia 360 Junior Hybrid -kommunikointikansio laaja, lausetasoinen kommunikointikansio, joka on suunniteltu lapsikäyttäjille. Evantia 360 -kommunikoinnin tuote- ja palvelukokonaisuus
LisätiedotTurun ammattikorkeakoulu Virtuaalihotelli > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Turun ammattikorkeakoulu Virtuaalihotelli > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue
Lisätiedot$%& & % ' %& %#&& ' ( ) * ( + (, + (, + -
! "#! " #$ "% &'( $%&&%'%&%#&&'( ) * ( + (,+ (, + - $. + $ /) * %&%& "" %& - )' $%&&%' %&%#&& 0 0 $%&%'% %%& * $%&&% 0 1) +,%&%'%% 0 $ -$%&%#&&.# 0 0 2 ' # 0 & #1 3 $ 4 3 $'/001 233,4# 5& "67 84#79:7 43
LisätiedotGraafinen. ohjeistus
Graafinen ohjeistus 1/2015 A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liiton tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla
LisätiedotGeneral studies: Art and theory studies and language studies
General studies: Art and theory studies and language studies Centre for General Studies (YOYO) Aalto University School of Arts, Design and Architecture ARTS General Studies General Studies are offered
LisätiedotGRAAFINEN OHJEISTO OLLILA TRANS OY
GRAAFINEN OHJEISTO OLLILA TRANS OY Ohjeiston sisältö Tämän ohjeiston tarkoitus on antaa selkeät suuntaviivat Ollila Trans Oy:n viestinnälle. Annettuja ohjeita noudattamalla yrityksestä annetaan yhtenäinen,
LisätiedotSuomen virtuaaliammattikorkeakoulu Varför behöver man brandmurar? V. 1.0 > 80 % 80 60 % 60 50 % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Varför behöver man brandmurar? V. 1.0 > 80 % 80 60 % 60 50 % < 50 % Arviointialue
LisätiedotTuotteen oppiminen. Käytettävyyden psykologia syksy 2004. T-121.200 syksy 2004
Tuotteen oppiminen Käytettävyyden psykologia syksy 2004 Oppiminen Havainto Kognitiiviset muutokset yksilössä Oppiminen on uuden tiedon omaksumista, joka perustuu havaintoon Ärsyke Behavioristinen malli
LisätiedotGraafinen ohjeisto. Päivitetty tammikuussa 2015
Graafinen ohjeisto Päivitetty tammikuussa 2015 Sisällys Sisällys Esipuhe Liikemerkki ja logo Värit korteille ja kirjepohjalle Typografia Fontit korteille ja kirjepohjalle Kirje- ja esityspohja Käyntikorttipohjat
LisätiedotTietokantapohjaisen arviointijärjestelmän kehittäminen: kohti mielekästä oppimista ja opetusta
Tietokantapohjaisen arviointijärjestelmän kehittäminen: kohti mielekästä oppimista ja opetusta Heidi Krzywacki, Jari Lavonen, Tiina Korhonen 12.2.2010 Käyttäytymistieteellinen tiedekunta Opettajankoulutuslaitos
LisätiedotBDD (behavior-driven development) suunnittelumenetelmän käyttö open source projektissa, case: SpecFlow/.NET.
BDD (behavior-driven development) suunnittelumenetelmän käyttö open source projektissa, case: SpecFlow/.NET. Pekka Ollikainen Open Source Microsoft CodePlex bio Verkkosivustovastaava Suomen Sarjakuvaseura
LisätiedotSENAATTILA uudistuu keväällä 2015
SENAATTILA uudistuu keväällä 2015 Senaatti-kiinteistöt yhtenäistää sähköisiä asiointikanaviaan vaiheittain keväästä 2015 alkaen. Senaattila.fi -osoite laajentuu sähköisen asioinnin palvelueteiseksi, jonka
LisätiedotPÄIVITÄ TIETOSI OPTIMASTA! KOOSTE
PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE IT-palvelut / Hannele Rajaniemi optima-support@jyu.fi www.jyu.fi/itp/optima-ohjeet 2 Sisältö Mikä on koosteen idea? Miten saan kooste-työkalun käyttööni? Miten luon koosteen?
LisätiedotGRAAFINEN OHJEISTO 2017
GRAAFINEN OHJEISTO 2017 Graafinen ohjeisto ja sen käyttötarkoitus Sisällys Tullinkulman Työterveys Oy:n uusi aputoiminimi on Pirte ja se otetaan käyttöön vuoden 2018 alusta alkaen markkinoinnissa ja muussa
LisätiedotKauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto
Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto 7.3.2017 Tämä on vuonna 2017 uusitun Kauneimpien Joululaulujen visuaalisen ilmeen ohjeisto. Ohjeiston mukana toimitetaan alkuperäiset logotiedostot,
LisätiedotKysyminen ja vastaaminen kommunikaationa. Petri Godenhjelm Metodifestivaalit 2015
Kysyminen ja vastaaminen kommunikaationa Petri Godenhjelm Metodifestivaalit 2015 Lomakkeet ovat kiinteä osa ihmisten ja yritysten arkea ei aina juhlaa Surveyn tietopohja, toimijat MUISTIO ja keskeiset
LisätiedotKuva: Questmarketing.ltd.uk GRAAFINEN SUUNNITTELU?
Kuva: Questmarketing.ltd.uk GRAAFINEN SUUNNITTELU? Graafinen suunnittelu pähkinänkuoressa: Graafinen suunnittelu on universaalia. Se on kaikkialla ympärillämme, sisällä ja ulkona. Se selittää, koristelee,
Lisätiedot