Millaista on suorakäyttö työpöytämetaforan jälkeen? Suorakäyttöä pöytäpinnoilla ja muuten Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Kosketusnäyttöön kosketaan sormella tai piirtotikulla (stylus, kynän kaltainen laite; näitäkin on erilaisia) Piirtotikku tai sormi on suorakäyttöisempi väline kuin hiiri Piirtotikun kärjellä tai sormella kosketaan suoraan kohdetta - vrt. hiiren liikuttelu pöydällä etäällä kohteesta Joskus vuorovaikutus tapahtuu erityisiä oheislaitteita käyttäen Tangible UI eli kouriintuntuva käyttöliittymä sen sijaan, että napautettaisiin sormella tai sormilla tai (monella) kädellä suoraan pintaa Organic UI eli orgaaninen UI käyttökokemuksena 1 2 Komennot eleinä? ELEET KÄYTÖSSÄ Kosketusnäyttöjen yhteydessä ele tarkoittaa yleensä yhtenäistä sormella tai kynällä laitteen pinnalla tehtävää liikerataa Laitteen herkkyys sormen tai kynän nousulle pinnalta? Mahdollisuus käyttää kahta tai useampia sormia/käsiä? = niin sanottu kosketusele Muitakin eleitä on gesture-based interaction, natural user interfaces Esim. kännyköiden yhteydessä myös eleitä, joita tehdään kallistamalla tai ravistamalla laitetta tilt-action eri akselien suhteen, esim. http://msdn.microsoft.com/en-us/magazine/ee413721.aspx Esim. Microsoftin Kinect-käyttöliittymässä (tai muissa konenäköön perustuvissa käyttöliittymissä) eleet tehdään liikeratoina ilmassa Tällaiselle järjestelmälle potentiaalisia kohdealueita paljon Tunnistamassa ihmisten luonnollisia eleitä Osana multimodaalista (moniaistista) järjestelmää 3 4 Komennot eleinä? Eleiden käytössä monta hyvää puolta Syötteen antaminen ei vaadi katseen siirtämistä Komentojen antaminen vaatii vähemmän kädenliikkeitä Tietty liikerata on potentiaalisesti helppo muistaa Eleiden suunnittelusta Yleensä käyttäjät pitävät eleistä Eleiden oltava luonnollisia ja helposti muistettavia Eleiden tunnistustarkkuuden pitää olla hyvä jopa yli 98% (Briggs et al., Whither the Pen-Based Interface? Journal of MIS 9:3,71-90, Winter 1992/3.) vaikkei käyttäjä olisikaan kovin huolellinen elettä tehdessään Seuraavilla kalvoilla erilaisia haasteita eleiden ja eleisiin perustuvien käyttöliittymien suunnittelussa Moodit Elevalikoima Eleiden tunnistuksen haasteita Eleiden teosta annettava palaute 5 Hiirieleet selainohjelmissa Firefox, Opera, tavallisia mikä hiiren nappi? elemoodi vs. normaali työskentely, esim. tekstin maalaus vetopaikasta riippumattomia, toiset vaativat esim. osumista linkkiin viikkoharjoituksissa navigation in the history list and home http://www.opera.com/browser/tutorials/gestures/ window control Mutta monin verroin kätevämpää elehtiä kynällä tai sormella vai? when done over a link: open in the foreground or in the background 6 Saila.Ovaska@uta.fi 1
Komennot eleinä Vrt. kynäkäyttöinen Flowmenu haastavaa suunnitella siirtymä työkaluista toiseen Esim. valintaa ja piirtämistä varten valintamoodi vs. piirrosmoodi joissakin tilanteissa koneen kannalta eri moodit, mutta eleinä hyvin samanlaiset Siirtyminen moodista toiseen tulisi saada saumattomaksi FlowMenu: Kohteen liikuttaminen: Avaa valikko kynän painikkeella valikko aukeaa kursorin kohdalle Valitse komento Move valikosta Raahaa kohde kynällä haluttuun paikkaan (kuvassa oikealle) Kaikki tapahtuu yhdellä liikkeellä nostamatta kynää näytöstä Moodin valinta tehdään tässä kynän avulla mutta ellei käytössä ole kynää? 7 8 Eleitä sormilla: esimerkkinä zoomaus Multi-touch Esimerkiksi iphonessa Kaksi sormea käytössä Zoomaus lähentämällä tai loitontamalla kahta sormea toisistaan ( pinch ) Tuoteidea: FingerWorks - elevalikoiman luonnollisuus? Erityiset syöte levyt Eleet käytössä, osa listattu Yritys (Fingerworks) ei enää olemassa Esimerkkejä FW-elekomennoista Linja Zax Zoomaus spiraalimaisella pyörivällä liikkeellä http://www.youtube.com/watch?v=2je-5ufxcec 9 10 BumpTop Desktop Ominaisuuksia University of Toronto, Dynamic Graphics Project Tabletop UI Pinot keskeinen organisointitapa Nätit ja sotkuiset pinot Dokumenttien heittely, törmäily kuin reaalimaailmassa 2006 kynäkäyttöliittymä, 2009 3D multitouch sormin Elevalikoimassa esim. Lasso (kohteiden ympäri) http://bumptop.com/ Valikko esille jos lassoele tehdään kokonaiseksi Valikko esille erityisellä siansaparoeleellä http://www.youtube.com/watch?v=6jhowshwu7w Agarawala & Balakrishnan (2006). Keepin' it Real: Pushing the Desktop Metaphor with Physics, Piles and the Pen. Proceedings of CHI 2006, 1283-1292. 11 Eleitä käsillä ja vartalolla http://airguitar.tml.hut.fi/ Esimerkkikuvissa vasemmalla virtuaalinen ilmakitara (2004-5) http://www.virtualairguitar.com/ Erilaiset eleet (käsien sijainti, liikeradat ja rytmi) tulkitaan soittamiseksi Hanskat tai ultraääniohjaimet käsissä Nykyisin tunnistus ilman erityisiä ohjaimia käsissä oikealla Kung Fu Playstation- tai webkamera-syöte, josta tausta poistetaan 12 Saila.Ovaska@uta.fi 2
Tactapad haptista palautetta oheislaiteidea, ei markkinoilla Tuntopalautetta sormenpäihin http://www.tactiva.com esimerkkinä piirrossovellus DIGITAALISIA TYÖPÖYTIÄ 13 14 Digitaaliset pöytäpinnat Digital Desk, 1993 Seuraavat esimerkit ovat laajennettua todellisuutta (augmented reality) vaakatasoon asetetulla isolla pöytäpinnalla Pöytäpinnalle heijastetaan tietokoneen näyttö Pöytäpinnalla tehdyt eleet tunnistetaan jollain tekniikalla (esim. konenäkö, pöytätasoon liitetyt anturit, infrapuna pöydän sisältä, ) Pierre Wellner, 1993 Työpöydällä olevien välineiden luonteva käyttö tietokoneen avulla laajennetussa todellisuudessa Työpöytäpinnasta aktiivinen Kamera ja projektori tarpeen Käytössä normaali paperi, kynä, kumi Digital Desk 15 16 SmartSkin, 2002 DiamondTouch ja DiamondSpin, 2004 DiamondTouch Pöytäpintaan integroitu sensorit Pöytä tunnistaa kuka käyttäjä on (tarkemmin seuraavalla kalvolla) Pöytäpintaan integroitu sensoreita jotka tunnistavat käyttäjien käsien muodon ja sijainnin. DiamondSpin Ohjelmisto mm. dokumenttien siirtelyyn pöydällä Kuva heijastetaan pöytäpinnalle Jun Rekimoto, SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Surfaces, CHI2002. http://www.csl.sony.co.jp/person/rekimoto/smartskin/ 17 DiamondSpin: An Extensible Toolkit for Around-the-Table Interaction. CHI 2004 Extended Abstracts. http://www.merl.com/projects/diamondtouch/ Tuotteistettu: http://www.circletwelve.com/ (2008-) 18 Saila.Ovaska@uta.fi 3
Diamond Touch Microsoft Surface Max 4 käyttäjää monta samanaikaisesti tunnistettavaa kosketuspistettä kehikossa antennirivit ja -sarakkeet lähettää pienen sähkövirran käyttäjän käteen jokaisella käyttäjällä on (yleensä tuolissaan) vastaanotin systeemi tunnistaa siitä, kuka kosketti pöytäpinnalla työskentely, DiamondSpin Näyttö projisoidaan yläpuolelta (käsien varjot) http://www.circletwelve.com/products/howitworks.html 19 Ensimmäiset luonnokset 2001 2003 proto, Ikean pöytä Pöytäpinta itsessään ei tunnista kosketusta Toteutettu infrapunalla pöydän sisältä Versio 2.0 (2011): 4 tuumaa ohut pöytä http://www.microsoft.com/surface/ V1: http://www.youtube.com/watch?v=kr1o917o4ji V2: www.youtube.com/watch?v=0b8shd5bkrs 20 Microsoft Surface, v1 vuonna 2008 Microsoft Surface, 2.0 vuonna 2011 Microsoft Surface is a revolutionary multi-touch computer that responds to natural hand gestures and real-world objects, helping people interact with digital content in a simple and intuitive way. - http://www.microsoft.com/surface/ Ominaisuuksia Suora vuorovaikutus Monta käyttäjää Monen sormen tunnistus Enintään 52 samanaikaista kosketuspistettä mutta kosketuksen perusteella ei tunnisteta kuka käyttää Esineiden tunnistus Eri laitteiden integraatio 21 Samsung SUR40 pöytä Suunnitteluohjeita Surface-pöytäpintaa varten Microsoft SurfaceUserExperienceGuidelines(SUX) http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=19410 harjoituksissa (teht. 13) www.youtube.com/watch?v=0b8shd5bkrs 22 Natural User Interface(?) Microsoft Surface is a major new development in the area of Natural User Interface (NUI) Interaction principles (SUX ch. 2.1) Seamless: tarjoa saumaton kokemus virtuaalisen ja todellisen välillä Social: tue yhteisöllistä kokemusta Spatial: tarjoa vaikutelma tilasta (2,5 ulottuvuutta, ylös pöytäpinnalta ) Super-realism: tarjoa enemmän kuin reaalimaailma (raahaus kuten paperia raahattaisiin, lisäksi zoomausmahdollisuus) Contextual environments: ota huomioon sijainti osana käyttäjän kontekstia, esimerkiksi baarissa tai lääkärin vastaanotolla Scaffolding: tue kokemuksia, jotka rakentuvat asteittain pienistä vaiheista. Älä tyrkytä kaikkea kerralla. Performance aesthetics: tarjoa kokemuksia ja elämyksiä, jotka miellyttävät ja vievät mukanaan. Direct manipulation: tue käyttöä sekä sormilla että käsillä, mutta myös fyysisillä objekteilla kuten pelinappuloilla tai olutlaseilla SEINÄPINNALLA 23 24 Saila.Ovaska@uta.fi 4
City Wall G-Speak CityWall on suuri monen sormen kosketukseen reagoiva näyttö, joka on esillä Helsingin keskustassa Lasipalatsin seinässä Media landscape of the city Käyttäjät voivat lisätä sisältöä Flickr ja kommentoida tekstiviestien avulla Kaksi videota: 2007 ja 2008 Kaksiulotteinen Kolmiulotteinen Peltonen et al., It's Mine, Don't Touch!: interactions at a large multi-touch display in a city centre. Proc. CHI2008: http://dx.doi.org/10.1145/1357054.1357255 http://citywall.org/ http://www.youtube.com/watch?v=wknq3cygtpe http://www.youtube.com/watch?v=ilddrcczkzy 25 Tuotteistettu Minority report Tunnistus koskettamatta näyttöpintaa http://oblong.com/ http://fin.afterdawn.com/uutiset/artikkeli.cfm/2008/11/17/g_speak_kayttoliittyma_suoraan_minority_reportista 26 Eroon työpöydästä I/O Brush LISÄÄ OHEISLAITTEITA TANGIBLE UI tai GRASPABLE UI eli KOURIINTUNTUVAA TIETOJENKÄSITTELYÄ 27 http://web.media.mit.edu/~kimiko/iobrush/ 28 Tangible Bricks, 1995 Reactable - musiikkipalikoita Työpöytäpinta on itsessään aktiivinen (Active Desk) Työpöydälle heijastetaan kohteita Työskentelyssä apuna palikoita, joiden avulla kohteita voidaan käsitellä Graspable User Interfaces Alunperin pöytäpinnalla musiikkia fyysisten palikoiden avulla Syksy 2010: myös mobiiliversio (GUI) Fitzmaurice, Ishii and Buxton, Bricks: Laying the Foundations for Graspable User Interfaces. CHI'95. 29 http://www.reactable.com/ 30 Saila.Ovaska@uta.fi 5
Multimodaalinen ratkaisu moodiongelmaan: kosketus sormin + IR-kynä Shiftables - älypalikoita Hinckley et al., Manual Deskterity: AN explorationof simultaneouspen+ touchdirect input. Proc. CHI 2010. http://dx.doi.org/10.1145/1753846.1753865 http://www.youtube.com/watch?v=9stglyh8qws 31 Goodbye GUI, hello TUI Palikan koko n. 5x5cm http://sifteo.com/ http://www.youtube.com/watch?v=jp0w9lzolwu 32 Orgaaniset käyttöliittymät ORGANIC UI eli ORGAANISET KÄYTTÖLIITTYMÄT käyttöliittymät, joita ei enää ajatella käyttöliittyminä jonkin tiedon käsittelyyn vaan koetaan osana luonnollista ympäristöä korostetaan ympäristön ja oman kokemuksen analogista, jatkuvaa ja muuttuvaa luonnetta esim. kartan selailu taivuttamalla joustavaa näyttöä syötteet ja tulosteet yhdessä Orgaanisella viitataan omakohtaiseen kokemukseen 33 Schwesig, What makes an interface feel organic? CACM 51:6, 2008. http://dx.doi.org/10.1145/1349026.1349040 34 Gummi vääntyvä tietokone (2004) Erilainen lähestymistapa ohjauseleisiin Vuorovaikutusta ohjataan vääntämällä kämmenlaitetta fyysisesti Visuaalisen informaation selailu, esim. metrokartat, ja kohteen valinta yhdellä (jatkuvalla) eleellä; näytön keskellä oleva (linkki tms. kohde) valitaan OLED-näyttö Kehittäjänä Sony CSL, Japan http://www.youtube.com/watch?v=w0g-sztrfdy Taivuteltava näyttö tulossa? Mm. Sony (ja Samsung) kehittää taivuteltavaa näyttöteknologiaa OLED = organic light emitting diode Video vuodelta 2007: Flexible OLED 0,3 mm paksu 160x120 kuvapistettä http://www.youtube.com/watch?v=ncam3kihfho Schwesig, Poupyrev & Mori (2004) Gummi: A bendable computer. Proc. of CHI 04. http://dx.doi.org/10.1145/985692.985726 35 36 Saila.Ovaska@uta.fi 6
Muita taivutettavia syötelaitteita Elevalikoima? Taivuteltava käyttöliittymä Kuvassa kartonkia 25-35 infrapunaa heijastavaa lediä, ja käytössä infrapunaa erottamaan pystyvä kamera Tavallinen näyttölaite mutta syötelaite kuin käsittelisi paperia Kokeellinen tutkimus 3-ulotteisessa manipuloinnissa luontevista ele-komentopareista 3 protomateriaalia paperi kangas Muovi protoissa ei palautetta CHI 2010 tulos: kovin erilaisia käsityksiä eleiden semantiikasta! Gallant et al., Towards more paper-like input: flexible input devices for foldable interaction styles. Proc. CHI 2008. http://dx.doi.org/10.1145/1449715.1449762 37 http://dx.doi.org/10.1145/1753326.1753572 38 Skinput Valinnat suoraan iholla? Tutkijat Carnegie-Mellon University & Microsoft Akustiikkaan perustuva syöttölaite Tunnistaa käsivarren ympärillä olevan pannan avulla, missä kohdassa käsivartta on napautettu. Ultra-low frequency sound detector Pico projector Joissakin mobiililaitemalleissa osana Chris Harrison et al., Skinput: Appropriating the body as an input surface. Proc. CHI 2010. Best paper award. http://research.microsoft.com/en-us/um/redmond/groups/cue/skinput/ 39 Yhteenveto: post-wimp Digitaaliset pöytäpinnat vaakatasossa olevaa, nykyisin monen käyttäjän teknologiaa Kehitettävä vuorovaikutustapoja tukemaan monen käyttäjän osallistumista muutakin kuin monen kosketuspisteen tunnistus, jos halutaan tukea ryhmätyötä Orientaatio pöytäpinnan ympärillä voi aiheuttaa ongelmia yhteistyössä on tärkeää nähdä kumppani etenkin silmät ja niiden kohdistussuunta, ja käsien liikkeet jotta mahdollistetaan yhteisen fokuksen muodostuminen deiktiset viittaukset ( tämä dokumentti, noitten lukujen suhde ) katsetietoisuus (voin seurata katseesi liikkeitä ja ilmeitäsi samalla kun selitän, jotta näen, pysytkö mukana selityksessä) jos istutaan vierekkäin, tällaista ymmärrystä on vaikeampi saavuttaa, mutta vastakkain istuttaessa menetetään yhteinen katsesuunta 40 Yhteenveto: post-wimp Suoravaikutteisuuden tuntu saavutetaan luontevilla eleillä, joitten suorittamista ei tarvitse miettiä, ja välittömällä palautteella Jos kouriintuntuvaa teknologiaa, käyttäjä saa konkreettisemman tuntuman vuorovaikutuksesta Lisäsyötteiden ja valintojen antamiseen Sopivia käyttötilanteita? Orgaaniset käyttöliittymät tulossa? 41 Saila.Ovaska@uta.fi 7