Aiheina Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. 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ä 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 greater 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 = vai Hahmolait: sulkeutuvuus Hahmolait: alue Saila.Ovaska@cs.uta.fi 3
Hahmolait: symmetria Havaintoja ihmisen hahmottamistavasta Hahmottamista on tutkittu erilaisin kokein Hahmontunnistus Viivojen pituudet Ympyröiden koot Perspektiivi Näköilluusioita Näköhavainto tulkitaan aivoissa Ovatko viivat yhtä pitkät? VISUAALISET KOODAUKSET KÄYTTÖLIITTYMISSÄ Lisää illuusioita: Optical Illusions and Visual Phenomena http://www.michaelbach.de/ot/index.html Kolmiulotteisuus Visuaaliset koodaukset käyttöliittymässä 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? ) Mieti, onko kyseessä kupera vai kovera pinta Saila.Ovaska@cs.uta.fi 4
Visuaaliset koodaukset käyttöliittymässä Bertinin visuaaliset muuttujat 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 Koko Kirkkaus Suunta Tekstuuri Muoto Sijainti Visuaaliset koodaukset Koodaustapojen erottuvuudesta Tavallisia koodauskeinoja: Väri Muoto Koko tai pituus Kirjasinleikkaus Tekstuuri eli pintakuviointi... Useita koodauksia voidaan käyttää rinnan Erottuvuus esim. näytöllä JA mustavalkokopiossa Esteettisyys? 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 Vältä redundantteja koodauksia Vältä redundantteja koodauksia Esimerkki: riittävä koodaus erottelee hahmon Jos haluat herättää huomiota, kuiskaa. Saila.Ovaska@cs.uta.fi 5
Tausta vaikuttaa 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äri VÄRIEN NÄKEMINEN Värin aistiminen riippuu silmään saapuvan valon aallonpituudesta. Väri tietokoneessa Väri tietokoneessa Seinäpinta heijastaa tietyt aallonpituudet ja kohde näkyy värillisenä Tietokoneen näytöllä väri ja valoisuus tuotettava Useita yleisiä värimalleja RGB (red, green, blue) CMYK (cyan, magenta, yellow, black) HSL/HSB (hue, saturation, luminance/brightness) Lisätietoa esim. http://www.volantis.fi/sivut/color-theory.html Saila.Ovaska@cs.uta.fi 6
Mitä on väri? Silmä värien havainnoijana 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/tummusaste 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ä 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 Silmän fysiologiaa punainen vihreä 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 ja puuttuu kokonaan osittain puuttuu kokonaan miehet 1.0% 1.0% naiset 0.02% 0.02% sininen miehet naiset 0.0001% 0.001% miehet 1.1% 4.9% naiset 0.01% 0.38% kaikki miehet naiset 0.003% 0.002% Lisämateriaalia Tappisolujen toiminnallista vajavaisuutta Masataka Okabe and Kei Ito, How to make figures and presentations that are friendly to color blind people http://jfly.iam.u-tokyo.ac.jp/html/color_blind/ sauvasolu 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% tappisolu Saila.Ovaska@cs.uta.fi 7
Ehdotuksia toimiviksi värivalinnoiksi Huomaa myös 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 Ä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ä Käytä kaavioissa muitakin koodauksia kuin väri Lähde: Okabe & Ito Esimerkkikaavio Parempi! Color and the Web W3C WCAG1.0: 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) 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 Saila.Ovaska@cs.uta.fi 8
Värin aiheuttama jälkikuva Värien havaitseminen A:lla ja B:llä merkityt neliöt ovat samaa harmaan sävyä 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 Etkö usko? Lähde: http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html 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 Värien havaitseminen Huoneessa tuntui kylmältä kun lämpötila oli +15º +12º Lähde: http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html Värien psykologiaa Väritykytystä 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? Saila.Ovaska@cs.uta.fi 9
Värien symboliikka Marcusin 10 käskyä Kiinalainen Amerikkalainen Seis, kuuma, vaara Huomio, lähellä Mene, turvallinen Kylmä, neutraali 31% 65% 48% 94% 90% 100% 45% 81% 62% 45% 22% 99% 61% 96% 31% hot danger stop caution go safe on cold off 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 Marcus (jatkoa) Värien erottuvuus taustasta 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ä Saksalainen standardi 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 Standardi DIN 66234 Saila.Ovaska@cs.uta.fi 10
Muita näköaistiin liittyviä ongelmia ERITYISRYHMIÄ 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 KATSEKÄYTTÖLIITTYMÄT Katseen käyttö tietokoneen ohjaamisessa Katseohjaus 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 Sarah, 20v. Halvaantui 18 kk iässä http://www.youris.com/health/disabled/click_where_you_look.kl http://www.cs.uta.fi/hci/ieye/ Saila.Ovaska@cs.uta.fi 11
Katsekirjoittaminen GazeTalk 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 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 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 idict-skenaario Gaze katse Different The application cues let recognizes the application that the hypothesize user is in the that the state user of has normal problems. reading. http://www.cs.uta.fi/hci/ieye/ http://www.cs.uta.fi/hci/ieye/ http://acta.uta.fi/pdf/951-44-6643-8.pdf 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) 1 aste Tarkasteltu kohta Tarkan näön alue Katseenseurantalaitteen ilmoittama piste 2) Kalibrointivirhe: katseenseurantalaitteen antama mittaustarkkuus 0.5-1 astetta Yhteenveto Silmät ovat näkevälle ihmiselle tärkeä havainnointi- ja kommunikointikanava Tietokoneiden näköaistin toteutus Perus-webkameroiden avulla tehtävissä monenlaisia konenäköä vaativia sovelluksia (edellä esim. Kukakumma, Sixth sense ja GazeTalk) Erityisesti katseenseurantaan tarkoitetut katseenseurantalaitteet (kalliita laitteita) kiinteästi integroitu työpisteeseen kiinteästi integroitu esim. silmälasin sankoihin kalibroitava käyttäjäkohtaisesti (ja istuntokohtaisesti) 90 Saila.Ovaska@cs.uta.fi 12