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 Näköhavainto Havaintopsykologiaa 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 Havainnon tulkinta muodostuu aistien tuottamasta tiedosta yhdistettynä asiayhteyteen Top-down ja Bottom-up prosessointi Näköhavainto poimii Visuaalinen kanava 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 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 1
Yarbusin kokeet katseen kohdistumisesta Poynter: Sanomalehden lukututkimus http://eyetrack.poynter.org/index.html 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 HAHMOPSYKOLOGIAA http://www.uxmag.com/technology/eye-tracking-the-best-way-to-test-rich-app-usability Havaintoja ihmisen hahmottamistavasta Hahmolait 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) 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 2
Hahmolait (2) Hahmolait: läheisyys 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: samanlaisuus Hahmolait: jatkuvuus Mikä reitti, A, B vai C? C A B Hahmolait: jatkuvuus Hahmolait: sulkeutuvuus = vai Saila.Ovaska@cs.uta.fi 3
Hahmolait: alue Hahmolait: Symmetria = Mutta ei kuitenkaan Hahmolait: symmetria Hahmolait: symmetria Havaintoja ihmisen hahmottamistavasta Hahmottamista on tutkittu erilaisin kokein Hahmontunnistus Viivojen pituudet Ympyröiden koot Perspektiivi VISUAALISET KOODAUKSET KÄYTTÖLIITTYMISSÄ Saila.Ovaska@cs.uta.fi 4
Kuvakkeet ja kolmiulotteisuus Visuaaliset koodaukset käyttöliittymässä Mieti, onko kyseessä kupera vai kovera pinta Pseudo-3D 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... Visuaaliset koodaukset käyttöliittymässä Laske k-kirjaimet! Koodaus (coding) tarkoittaa käyttöliittymän olioiden aistein havaittavaa erilaisuutta jonkin ominaisuuden suhteen Koodauksen tavoitteena voi olla tukea Hahmottamista (vertaa ensihavaintoa ja koodattua: kummasta lasket koot nopeammin? ) Laske koot, versio 2! 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 Saila.Ovaska@cs.uta.fi 5
Esimerkki: jääkiekko Bertinin visuaaliset muuttujat Koko Kirkkaus Suunta Tekstuuri Muoto Sijainti Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Koodaustapojen erottuvuudesta Redundantit visuaaliset koodaukset 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 Useita koodauksia voidaan käyttää rinnan Tärkeää varmistaa erottuvuus esim. näytöllä JA mustavalkokopiossa Esteettisyys? 7. Värisävy Huonoin! Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Esteettisyyssyistä: vältä redundantteja koodauksia Vältä redundantteja koodauksia Esimerkki: riittävä koodaus erottelee hahmon Logon suunnittelua: Jos haluat herättää huomiota, kuiskaa. Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Saila.Ovaska@cs.uta.fi 6
Tärkeän tiedon välityttävä Tausta vaikuttaa tulkintaan Parempi! Ohuiden viivojen värisävyjen erottaminen on vaikeaa. Lähde: Okabe & Ito, http://jfly.iam.u-tokyo.ac.jp/color/ 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 VÄRIEN NÄKEMINEN Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Väri Väri tietokoneessa Seinäpinta heijastaa tietyt aallonpituudet ja kohde näkyy värillisenä Tietokoneen näytöllä väri ja valoisuus tuotettava Värin aistiminen riippuu silmään saapuvan valon aallonpituudesta. Lisätietoa esim. http://www.volantis.fi/sivut/color-theory.html Saila.Ovaska@cs.uta.fi 7
Useita yleisiä värimalleja RGB (red, green, blue) CMYK (cyan, magenta, yellow, black) HSL/HSB (hue, saturation, luminance/brightness) Väri tietokoneessa 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ä Silmä värien havainnoijana Silmän fysiologiaa 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 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 punainen vihreä Lisämateriaalia puuttuu kokonaan osittain miehet 1.0% 1.0% naiset 0.02% 0.02% sininen miehet 1.1% 4.9% naiset 0.01% 0.38% kaikki Masataka Okabe and Kei Ito, Color Universal Design. How to make figures and presentations that are friendly to color blind people http://jfly.iam.u-tokyo.ac.jp/color/ puuttuu kokonaan miehet naiset 0.0001% 0.001% miehet naiset 0.003% 0.002% Saila.Ovaska@cs.uta.fi 8
Tappisolujen toiminnallista vajavaisuutta Ehdotuksia toimiviksi värivalinnoiksi Alkuperäinen Värisokean näkemänä 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 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 Color and the Web Ä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 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 Lähde: Okabe & Ito 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? 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 Saila.Ovaska@cs.uta.fi 9
Värien havaitseminen A:lla ja B:llä merkityt neliöt ovat samaa harmaan sävyä Etkö usko? 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 Lähde: http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html Värien havaitseminen Värien psykologiaa Huoneessa tuntui kylmältä kun lämpötila oli +15º +12º 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? Väritykytystä Värien symboliikka Kiinalainen Amerikkalainen Seis, kuuma, vaara 31% 65% 48% 94% 90% 100% hot danger stop Huomio, lähellä 45% 81% caution Mene, turvallinen 62% 45% 22% 99% 61% go safe on Kylmä, neutraali 96% 31% cold off Saila.Ovaska@cs.uta.fi 10
Marcusin 10 käskyä Marcus (jatkoa) 1. Max 5 ± 2 väriä Enemmän vain esteettisistä syistä 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 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 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) ja myös värinäön ongelmien suhteen http://vischeck.com ERITYISRYHMIÄ Saila.Ovaska@cs.uta.fi 11
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 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 Katseen käyttö tietokoneen ohjaamisessa KATSEKÄYTTÖLIITTYMÄT 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 Katsekirjoittaminen Sarah, 20v. Halvaantui 18 kk iässä http://www.youris.com/health/disabled/click_where_you_look.kl 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 Saila.Ovaska@cs.uta.fi 12
GazeTalk Katseen käyttö tietokoneen ohjaamisessa 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 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 Katsedata syötteenä Gaze katse 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 Different The application cues let recognizes the application that the hypothesize user is in the that the state user of has normal problems. reading. Tarkasteltu kohta Katseenseurantalaitteen ilmoittama piste 2) Kalibrointivirhe: katseenseurantalaitteen antama mittaustarkkuus 0.5-1 astetta Hyrskykari, Eyes in attentive interfaces: Experiences from chreating idict, a gaze-aware reading aid. http://acta.uta.fi/pdf/951-44-6643-8.pdf 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) 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 13