Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Näköaisti Näköaistin toiminta ja näköhavainto Hahmolait (Gestalt law) Värit Näköaistiin liittyviä rajoitteita Värisokeus Sokeus Visuaalinen modaliteetti Visuaaliset koodaukset käyttöliittymässä Jatkokurssi: TIEVS59 Information Visualization 5 ECTS Sokeat tietokoneen käyttäjäryhmänä Katse tietokoneen syötemodaliteettina Saila.Ovaska@cs.uta.fi 1
Näköhavainto Ihmisen havainnointikyky on vaikuttava vrt. tietokoneen hahmontunnistus (Näkevälle) ihmiselle näköaisti on tärkein tiedonsaantikanava Näköhavaintoon kuuluu näköaistin rekisteröimä aisti-informaatio ja sen tulkinta aivoissa Näköhavainto on suhteellisen nopea Havaintopsykologiaa Havainnon tulkinta muodostuu aistien tuottamasta tiedosta yhdistettynä asiayhteyteen Top-down ja Bottom-up prosessointi Saila.Ovaska@cs.uta.fi 2
Näköhavainto poimii Liikkeen ennen paikallaan olevaa Lähellä olevan ennen kaukana olevaa Värillisen ennen mustavalkoista Isot ennen pientä Kuvan ennen tekstiä Kirkkaat värit ennen murrettuja Lämpimät värit ennen kylmiä Tumman ennen vaaleaa Poikkeavan ennen säännönmukaista Visuaalinen kanava Silmät osoittavat myös sen, mistä ihminen on kiinnostunut Yarbusin kokeet 1960-luvulla Poynter.org: Eyetrack07 Eyetracking the news: A study of print and online reading http://eyetrack.poynter.org/ Saila.Ovaska@cs.uta.fi 3
Yarbusin kokeet katseen kohdistumisesta Poynter: Sanomalehden lukututkimus http://eyetrack.poynter.org/index.html Saila.Ovaska@cs.uta.fi 4
Katseenseuranta mukana myös käytettävyystutkimuksessa Käytettävyystestissä osana voi olla käyttäjän silmänliikkeiden rekisteröinti Käyttötapoja: Voidaan visualisoida (ns. heat map) katseen kohdistumista kiinnostuskohteisiin Katsepolku voidaan näyttää uudelleen testihenkilölle testin jälkeen Voidaan tutkia etenemistä tehtävässä vaiheittain tai testin ensimmäisiä sekunteja http://www.uxmag.com/technology/eye-tracking-the-best-way-to-test-rich-app-usability HAHMOPSYKOLOGIAA Saila.Ovaska@cs.uta.fi 5
Havaintoja ihmisen hahmottamistavasta Gestalt-koulukunnan psykologit 1920-luvun Saksassa Ihmisellä taipumus aktiivisesti organisoida näkemäänsä The whole is other than the sum of its parts Hahmo nousee yksittäisten elementtien yläpuolelle Hahmolait (Gestalt laws) Läheisyys (proximity) Samanlaisuus (similarity) Sulkeutuvuus (closure) Jatkuvuus (continuity) Alue (area) Symmetria (symmetry) Hahmolait Läheisyys (proximity) Kaksi visuaalista ärsykettä, jotka sijaitsevat lähellä toisiaan, mielletään yhteenkuuluviksi Samanlaisuus (similarity) Kaksi visuaalista ärsykettä, joilla on jokin yhteinen ominaisuus, mielletään yhteenkuuluviksi Jatkuvuus (continuity) Jos viivat leikkaavat toisiaan, katsoja jakaa kokonaisuuden selkeästi jatkuviin osiin Saila.Ovaska@cs.uta.fi 6
Hahmolait (2) Sulkeutuvuus (closure) Jos visuaaliset ärsykkeet (lähes) sulkevat sisäänsä jonkin alueen, katsoja näkee ko. alueen Alue (area) Laajempi (ympäröivä) alueista mielletään taustaksi, pienempi taustasta erilliseksi kohteeksi Symmetrisyys (symmetry) Mitä symmetrisempi (täydellisempi) kuvio osista muodostuu, sitä helpommin katsoja havaitsee kohteeksi symmetrisen kuvion eikä sitä muodostavia osia Hahmolait: läheisyys Saila.Ovaska@cs.uta.fi 7
Hahmolait: samanlaisuus Hahmolait: jatkuvuus = vai Saila.Ovaska@cs.uta.fi 8
Hahmolait: sulkeutuvuus Hahmolait: alue Saila.Ovaska@cs.uta.fi 9
Hahmolait: Symmetria = Mutta ei kuitenkaan Havaintoja ihmisen hahmottamistavasta Hahmottamista on tutkittu erilaisin kokein Hahmontunnistus Viivojen pituudet Ympyröiden koot Perspektiivi Saila.Ovaska@cs.uta.fi 10
Näköilluusioita Näköhavainto tulkitaan aivoissa Ovatko viivat yhtä pitkät? Lisää illuusioita: Optical Illusions and Visual Phenomena http://www.michaelbach.de/ot/index.html VISUAALISET KOODAUKSET KÄYTTÖLIITTYMISSÄ Saila.Ovaska@cs.uta.fi 11
Kuvakkeet ja kolmiulotteisuus Pseudo-3D Mieti, onko kyseessä kupera vai kovera pinta Visuaaliset koodaukset käyttöliittymässä Koodaus (coding) tarkoittaa käyttöliittymän olioiden aistein havaittavaa erilaisuutta jonkin ominaisuuden suhteen Tavallisia koodauskeinoja: Väri Muoto Koko tai pituus Kirjasinleikkaus Tekstuuri eli pintakuviointi... Saila.Ovaska@cs.uta.fi 12
Visuaaliset koodaukset käyttöliittymässä Koodaus (coding) tarkoittaa käyttöliittymän olioiden aisteinhavaittavaa erilaisuutta jonkin ominaisuuden suhteen Koodauksen tavoitteena voi olla tukea Hahmottamista (vertaa ensihavaintoa ja koodattua: kummasta lasket koot nopeammin? ) Valintaa joukosta Joukon alkioiden järjestyksen löytämistä Määrän arvioimista Näköaistin osalta perustuu erilaisiin visuaalisiin muuttujiin Esimerkki: jääkiekko Saila.Ovaska@cs.uta.fi 13
Bertinin visuaaliset muuttujat Koko Kirkkaus Suunta Tekstuuri Muoto Sijainti Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Koodaustapojen erottuvuudesta Tutkimus eri koodaustapojen erottuvuudesta: 1. Sijainti yhteisellä akselilla 2. Sijainti identtisillä mutta erillisillä akseleilla 3. Pituus 4. Kulma tai viivan kulmakerroin 5. Pinta-ala 6. Tummuus tai värikylläisyys 7. Värisävy Huonoin! Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Saila.Ovaska@cs.uta.fi 14
Redundantit visuaaliset koodaukset Useita koodauksia voidaan käyttää rinnan Tärkeää varmistaa erottuvuus esim. näytöllä JA mustavalkokopiossa Esteettisyys? Esteettisyyssyistä: vältä redundantteja koodauksia Esimerkki: riittävä koodaus erottelee hahmon Logon suunnittelua: Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Saila.Ovaska@cs.uta.fi 15
Tärkeän tiedon välityttävä Parempi! Ohuiden viivojen värisävyjen erottaminen on vaikeaa. Lähde: Okabe & Ito, http://jfly.iam.u-tokyo.ac.jp/color/ Tausta vaikuttaa tulkintaan Saila.Ovaska@cs.uta.fi 16
Yhteenveto: miksi koodausta? Koodaus voi auttaa havaitsemista ja tulkitsemista Koodaus voi myös johtaa harhaan... Varo liioittelemista Mulletin & Sanon mukaan tavallisimmat virheet: Sopimattomat koodausdimensiot Liikaa tai liian vähän kontrastia Kilpailevia korostuksia Havaitsemisjärjestys ei vastaa tavoiteltua merkitystä Väärä (epäolennainen) tieto korostettua Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. VÄRIEN NÄKEMINEN Saila.Ovaska@cs.uta.fi 17
Väri Värin aistiminen riippuu silmään saapuvan valon aallonpituudesta. Väri tietokoneessa Seinäpinta heijastaa tietyt aallonpituudet ja kohde näkyy värillisenä Tietokoneen näytöllä väri ja valoisuus tuotettava Lisätietoa esim. http://www.volantis.fi/sivut/color-theory.html Saila.Ovaska@cs.uta.fi 18
Väri tietokoneessa Useita yleisiä värimalleja RGB (red, green, blue) CMYK (cyan, magenta, yellow, black) HSL/HSB (hue, saturation, luminance/brightness) Mitä on väri? Värisävy (hue) Valon dominoiva aallonpituus Vastaa sitä, mitä arkikielessä kutsumme väriksi Kirkkaus (brightness) Myös valoisuus (lightness), arvo (value) Värin vaaleus/tummuusaste Vaihtelee valkoisesta mustaan Kylläisyys (saturation) Myös puhtaus (purity) Värisävyn intensiteetti puhtaasta harmaaseen Silmä pystyy teoriassa erottelemaan jopa miljoona värisävyä Saila.Ovaska@cs.uta.fi 19
Silmä värien havainnoijana retina verkkokalvo fovea keskikuoppa optic nerve näköhermo pupil pupilli lens linssi eli mykiö Tapit (cones) ovat reseptoreita, jotka havaitsevat eri värisävyjä 6-7 miljoonaa kappaletta vaativat hyvän valaistuksen toimiakseen erityisesti keskikuopan alueella Sauvat (rods) ovat reseptoreita, jotka havaitsevat eri kirkkausasteita 130 miljoonaa kappaletta toimivat huonossakin valossa hämärässä näkyy vain muoto, ei väri sauvasoluja on eri puolella verkkokalvoa, mutta vähemmän tarkan näön alueella http://www.youtube.com/watch?v=3gw2bnwqrno Silmän fysiologiaa Valaistusolot vaikuttavat havainnon muodostumiseen; mukautuminen hämäräolosuhteisiin voi kestää jopa 20-30 min Siniselle herkistyneitä soluja on silmässä kaikkiaan vähiten ja etenkin keskikuopan (eli tarkan näön) alueella Värinäkö sivuille päin on heikompi kuin suoraan silmien edessä Ikääntyminen vaikuttaa ikänäköisyyttä 20 ikävuoden jälkeen (korjattavissa silmälaseilla) myös verkkokalvolle muodostuvan kuvan kirkkaus heikkenee iän lisääntyessä; tarvitaan enemmän valoa ikääntyessä silmän läpäisykyky valon kaikilla aallonpituuksilla pienenee, ja lyhyiden aallonpituuksien (violetti, sininen) läpäisykyky alenee huomattavasti mykiön kellastumisen johdosta Värien näkemisessä voi olla ongelmia Lähde mm. Esteetön valaistus ja selkeät kontrastit asema-alueilla. http://www.lvm.fi/fileserver/julkaisuja%2039_2006.pdf Saila.Ovaska@cs.uta.fi 20
punainen vihreä puuttuu kokonaan osittain miehet 1.0% 1.0% naiset 0.02% 0.02% miehet 1.1% 4.9% naiset 0.01% 0.38% sininen kaikki puuttuu kokonaan miehet naiset 0.0001% 0.001% miehet 0.003% naiset 0.002% Tappisolujen toiminnallista vajavaisuutta sauvasolu tappisolu Punavihervärisokeus on yleistä: Yksi mies 12:sta (8%) ja Yksi nainen 200:sta (0.5%) on puna-vihervärisokea Okaben ja Iton mukaan: aasialaisista 5%, ranskalaisista ja skandinaaveista: >10% Lähde: Okabe & Ito Saila.Ovaska@cs.uta.fi 21
Ehdotuksia toimiviksi värivalinnoiksi Alkuperäinen Värisokean näkemänä 1. Tarjoa kuvasta mustavalkoversio: sävyerot näkyvät paremmin. 2. Älä käytä punaista. Magenta (RGB:255,0,255) on parempi. Lähde: Okabe & Ito Huomaa myös Älä luota tiedon välittymiseen pelkän värin avulla: Huomioväri punainen voi näyttää mustalta Lukija ei ehkä erota toisistaan väri- ja sävyeroja (punainen, oranssi, keltainen, vihreä) Lukija ei ehkä erota punaisen tai magentan värisiä kohteita tummalta (mustalta tai siniseltä) pohjalta Varo tekstissä kun puhut väreistä: lukija ei näe niitä samalla tavalla kuin sinä Älä viittaa asioihin pelkän värin avulla Käytä kaavioissa muitakin koodauksia kuin väri Lähde: Okabe & Ito Saila.Ovaska@cs.uta.fi 22
Color and the Web W3C WCAG1.0 (1999): For accessibility reasons, don't rely on color alone. Information conveyed with color should also be available without color Foreground and background color combinations should provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. http://www.w3.org/tr/wcag10/#gl-color WC3 WCAG2.0 (2008): Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) 1.4.3 Contrast (Minimum): http://www.w3.org/tr/wcag20/#visual-audio-contrast Browser-Safe Colors In the past in web design we limited our use of colors on the web to a palette of 216 colors for 8-bit (256 color) Now computers often display in 32-bit, so it is less important But what about mobile devices? Saila.Ovaska@cs.uta.fi 23
Värin aiheuttama jälkikuva Selitys: Kuvaa tuijotettaessa osa reseptoreista väsyy Kun kuva katoaa, rasittuneet reseptorit rentoutuvat ja muut lähettävät hetkellisesti signaalin Näkyy komplementtiväreistä muodostuva jälkikuva Värien havaitseminen A:lla ja B:llä merkityt neliöt ovat samaa harmaan sävyä Etkö usko? Lähde: http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html Saila.Ovaska@cs.uta.fi 24
Värien havaitseminen Miksi? - läheiset värit vaikuttavat - visuaalinen järjestelmä ei erota asteittaista valonmuutosta (varjo) yhtä hyvin kuin selkeää (ruudutus) - näköhavaintomme ei ole luotettava valomittari vaan tulkitsemme havaitsemaamme Lähde: http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html Värien havaitseminen Huoneessa tuntui kylmältä kun lämpötila oli +15º +12º Saila.Ovaska@cs.uta.fi 25
Värien psykologiaa Keltainen Kirkas Sopii korostukseen Punainen Voimakas Kiinnittää huomion Vihreä Raikas Rauhoittava Värien lämpötila Lämmin väri: suurempi, lähellä katsojaa Kylmä: pienempi, kauempana katsojasta? Marcusin 10 käskyä 1. Suunnitellessasi värien käyttöä ota huomioon lukijat/katsojat/käyttäjät Estetiikka, värien yhteensopivuus Värien erottuvuus taustasta ja toisistaan, riittävä kontrasti 2. Käytä keskeisiä ja reunavärejä oikein Sininen vain laajojen pintojen väriksi Punaista ja vihreää ei reunoille Musta, valkoinen, keltainen ja sininen sopivat reunoille 3. Huomioi värin "muuttuminen" taustan muuttuessa 4. Älä käytä useita vahvoja värejä Aiheuttavat värinää, jälkikuvia, varjoilluusioita Lähde: Aaron Marcus, Graphic design for electronic documents and user interfaces. ACM Press, 1992. Saila.Ovaska@cs.uta.fi 26
Marcus (jatkoa) 5. Käytä tuttuja koodauksia Riippuu tilanteesta (esim. sininen) 6. Muista, että käyttäjä yhdistää samalla tavalla väritetyt asiat 7. Käytä värejä samoin kaikissa käyttöliittymän osissa Myös opetusmateriaalissa ja dokumentoinnissa! 8. Käytä kirkkaita värejä huomion kiinnittämiseen Iän ja ajan vaikutus 9. Väri ei riitä yksinään koodauskeinoksi Käytä redundantteja koodauksia (esim. muoto) 10.Käytä värejä elävöittämään mustavalkoista esitystä Värien erottuvuus taustasta Saila.Ovaska@cs.uta.fi 27
Saksalainen standardi Standardi DIN 66234 Yhteenveto: värien käytön suunnittelu Varaudu värisokeisiin käyttäjiin Vältä väripareja, joiden RGB-arvot eroavat vain punaisen osalta Valkoinen - turkoosi Vihreä - keltainen Sammaleenvihreä - oranssi Sininen - violetti Vältä puhdasta punaista (255,0,0) Ota huomioon värin erottuminen taustasta Testaa näyttöä harmaasävyissä (riittävä kontrasti) Esim. http://webaim.org/resources/contrastchecker/ yksittäisille väreille ja myös värinäön ongelmien suhteen http://vischeck.com http://www.etre.com/tools/colourblindsimulator/ http://aspnetresources.com/tools/colorblindness Saila.Ovaska@cs.uta.fi 28
ERITYISRYHMIÄ Muita näköaistiin liittyviä ongelmia Monenlaisia näköaistin häiriöitä keskeisen näön puuttuminen putkinäkö (eriasteinen ja täydellinen) sokeus jne. Esimerkki Kyle, opiskelija, Utah State University http://www.webaim.org/articles/visual/blind.php http://webaim.org/intro/video Saila.Ovaska@cs.uta.fi 29
Verkkosivujen käyttö Sokean apuväline: ruudunlukija Esim. Windows Narrator Jaws for Windows myös suomenkielinen puhesynteesi saatavilla Video: superkäyttäjä Verkkosivun suunnittelijan kiinnitettävä huomiota mm. sivun rakenteeseen ja navigointiin sivulla linkkisanojen järkevyyteen irrotettuna asiayhteydestä kuvien sisältämän informaation välittämiseen sanallisesti KATSEKÄYTTÖLIITTYMÄT Saila.Ovaska@cs.uta.fi 30
Katseen käyttö tietokoneen ohjaamisessa Katse syötemodaliteettina voi olla joko tarkoituksellisia silmän liikkeitä hyödyntävä Esimerkkejä: katseohjaus ja katsekirjoittaminen spontaaneja silmänliikkeitä hyödyntävä Esimerkki: idict http://www.cs.uta.fi/hci/ieye/ Katseohjaus Sarah, 20v. Halvaantui 18 kk iässä http://www.youris.com/health/disabled/click_where_you_look.kl Saila.Ovaska@cs.uta.fi 31
Katsekirjoittaminen Katsekirjoittamisessa käyttäjä valitsee katseensa avulla näytöllä näkyviä kirjaimia käyttäjä kohdistaa katseensa haluttuun kirjaimeen järjestelmä antaa palautetta, että fokus on kirjaimessa käyttäjä valitsee kirjaimen katsomalla sitä tarpeeksi kauan (dwell time -asetus) järjestelmä antaa palautetta kirjaimen valituksi tulemisesta Katseella kirjoittamisen nopeus voi kokeneella käyttäjällä olla noin 20 sanaa/min Majaranta (2009). Text entry by eye gaze http://acta.uta.fi/pdf/978-951-44-7787-4.pdf GazeTalk kun katseohjaus toteutetaan tavallisen webkameran avulla, näytöllä ei voi olla monta kohdetta kohdistustarkkuus ei riitä yksittäisten kirjainten lisäksi voi tarjolla olla valmiita sanoja ja sanontoja http://www.cogain.org/wiki/gazetalk Saila.Ovaska@cs.uta.fi 32
Katseen käyttö tietokoneen ohjaamisessa Katse syötemodaliteettina voi olla joko tarkoituksellisia silmän liikkeitä hyödyntävä Esimerkkejä: katseohjaus ja katsekirjoittaminen spontaaneja silmänliikkeitä hyödyntävä Esimerkki: idict käännösvihjeitä ja sanakirjahaun tulokset tarjolle automaattisesti tarpeen mukaan Tarpeen päättely perustuu silmänliikkeisiin normaalissa käyttäytymisessä tekstiä lukiessa esimerkki proaktiivisesta tietotekniikasta toimitaan käyttäjän puolesta ilman erillisiä komentoja http://www.cs.uta.fi/hci/ieye/ idict-skenaario Gaze katse Different The application cues let recognizes the application that hypothesize user is in the that the state user of has normal problems. reading. Hyrskykari, Eyes in attentive interfaces: Experiences from chreating idict, a gaze-aware reading aid. http://acta.uta.fi/pdf/951-44-6643-8.pdf Saila.Ovaska@cs.uta.fi 33
Katsedata syötteenä Katseenseurantadata ei koskaan voi olla täysin tarkkaa kahdesta syystä: 1) Ihmisen fysiologia: tarkan näön alue on n. 2 astetta (tyypillisesti tekstiä lukiessa näytöltä 5-9 kirjainta yhden fiksaation aikana) Tarkan näön alue 1 aste Tarkasteltu kohta Katseenseurantalaitteen ilmoittama piste 2) Kalibrointivirhe: katseenseurantalaitteen antama mittaustarkkuus 0.5-1 astetta 92 Tietokoneiden näköaistin toteutus Perus-webkameroiden avulla tehtävissä monenlaisia konenäköä vaativia sovelluksia (edellä esim. Kukakumma ja GazeTalk) Erityisesti katseenseurantaan tarkoitetut katseenseurantalaitteet (kalliita erityislaitteita) tavallisen kameran lisäksi infrapunakamera» tarkempi silmänliikkeiden seuranta lasketaan infrapunasäteen heijastuman ja pupillin keskipisteen muutosten avulla näytteenottotaajuus tavallisesti 50-120 Hz kiinteästi integroitu työpisteeseen kiinteästi integroitu esim. silmälasin sankoihin kalibroitava käyttäjäkohtaisesti (ja istuntokohtaisesti) Saila.Ovaska@cs.uta.fi 34
Yhteenveto Silmät ovat näkevälle ihmiselle tärkeä havainnointi- ja kommunikointikanava Vuorovaikutteisen teknologian suunnittelussa monta huomioonotettavaa asiaa Hahmolait Myöhemmin käydään läpi suunnitteluohjeita, ns. CRAP-ohjeisto (Contrast, Repetition, Alignment, Proximity) Visuaaliset koodaukset Tiedon visualisointi, myös vuorovaikutteiset visualisoinnit Värien käyttö käyttöliittymässä Erilaiset erityisryhmät Haasteena: miten kognitio ja silmänliikkeet liittyvät toisiinsa; miten katseen suuntaa voitaisiin käyttää hyödyksi käyttöliittymän vuorovaikutuksessa joko tietoisena katseohjaustapana tai perustuen käyttäjän tiedostamattaan, osana luonnollista käyttäytymistään antamiin vihjeisiin Saila.Ovaska@cs.uta.fi 35