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 = vai Hahmolait: sulkeutuvuus Hahmolait: alue Saila.Ovaska@cs.uta.fi 3
Hahmolait: Symmetria Havaintoja ihmisen hahmottamistavasta = Mutta ei kuitenkaan 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 Kuvakkeet ja kolmiulotteisuus Visuaaliset koodaukset käyttöliittymässä 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... Mieti, onko kyseessä kupera vai kovera pinta Saila.Ovaska@cs.uta.fi 4
Visuaaliset koodaukset käyttöliittymässä Esimerkki: jääkiekko 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 Bertinin visuaaliset muuttujat Koodaustapojen erottuvuudesta Koko Kirkkaus Suunta Tekstuuri Muoto Sijainti 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. Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Redundantit visuaaliset koodaukset Esteettisyyssyistä: vältä redundantteja koodauksia Useita koodauksia voidaan käyttää rinnan Tärkeää varmistaa erottuvuus esim. näytöllä JA mustavalkokopiossa Esteettisyys? Esimerkki: riittävä koodaus erottelee hahmon Logon suunnittelua: Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall 1995. Saila.Ovaska@cs.uta.fi 5
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 6
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ä Tappisolujen toiminnallista vajavaisuutta 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 sauvasolu tappisolu Punavihervärisokeus on yleistä: Yksi mies 12:sta (8%) ja Yksi nainen 200:sta (0.5%) on puna-vihervärisokea puuttuu kokonaan miehet naiset 0.0001% 0.001% miehet naiset 0.003% 0.002% Okaben ja Iton mukaan: aasialaisista 5%, ranskalaisista ja skandinaaveista: >10% Lähde: Okabe & Ito 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ä Älä viittaa asioihin pelkän värin avulla Käytä kaavioissa muitakin koodauksia kuin väri Lähde: Okabe & Ito Color and the Web Browser-Safe Colors 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 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 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 Saila.Ovaska@cs.uta.fi 8
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 Marcusin 10 käskyä 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? 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. 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ä Saila.Ovaska@cs.uta.fi 9
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) 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 Standardi DIN 66234 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. ERITYISRYHMIÄ 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 Saila.Ovaska@cs.uta.fi 10
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/ 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/ 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 11
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 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) 92 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 12