Suorakäyttöä pöytäpinnoilla ja muuten

Transkriptio

1 Suorakäyttöä pöytäpinnoilla ja muuten Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 1 Tässä kalvosetissä: Millaista on suorakäyttö WIMP-aikakauden jälkeen? Ei hiirtä? vaan kosketusnäyttöön kosketaan sormella tai piirtotikulla (stylus, kynän kaltainen laite; näitäkin on erilaisia) suoraan näyttöpinnalla Huomaa: eri asia jos kosketuslevy (touch pad, track pad) tai piirtolevy-oheislaite Näytölle tökkivä sormi on suorakäyttöisempi väline kuin hiiri kosketaan suoraan kohdetta - vrt. hiiren liikuttelu pöydällä etäällä kohteesta Käyttöliittymän kohteiden ja sisällön suora käsittely Työkalupalkit, vierityspalkki tai painikkeet eivät ole käyttöliittymän sisältöä vaan WIMPkäyttöliittymästä tuttuja kontrolleja Kun sisällöstä itsessään tulee vuorovaikutuselementti, tullaan toimeen ilman tällaisia näkyviä käyttöliittymäelementtejä! vrt. Wroblewski, Re-imaging apps for touch Joskus vuorovaikutus tapahtuu erityisiä kouriintuntuvia oheislaitteita käyttäen Tangible UI eli kouriintuntuva käyttöliittymä sen sijaan, että napautettaisiin sormella tai sormilla tai (monella) kädellä suoraan tasaista pintaa, joka itsessään ei tunnu muulta kuin lasilta Joskus syöte ja tuloste samassa laitteessa: kalvosetissä kaksi esimerkkiä, Shiftables-palikat ja taivuteltavat näytöt Organic UI eli orgaaninen UI käyttökokemuksena 2 Saila.Ovaska@uta.fi 1

2 ELEET KÄYTÖSSÄ 3 Eleiden käytöstä vuorovaikutuksessa Vrt. myös viikkoharjoitus 14 (Moodlessa, kaikille pakollinen!) Lähteeksi mm. Bill Buxton, Multi-Touch Systems that I Have Known and Loved. Caroline Hummels, Elekomento on merkityksellinen liikerata Esimerkiksi näppäimen painaminen näppäimistöltä ei ole ele, sillä vain näppäimen tuottamalla merkillä on merkitystä, ei sillä, miten sitä painettiin Kun eleitä käytetään vuorovaikutuksessa, viestinnän toinen osapuoli (ihminen tai tietokone) tulkitsee merkityksen Ihmiset elehtivät myös itsekseen, esimerkiksi puhelimessa puhuessaan, osana normaalia käyttäytymistään 4 Saila.Ovaska@uta.fi 2

3 Komennot eleinä? Kosketusnäyttöjen yhteydessä ele tarkoittaa yleensä yhtenäistä sormella (tai kynällä) laitteen pinnalla tehtävää liikerataa jonkin komennon antamiseksi Huomaa: yhtenäinen liikerata vs. napautus näyttöpinnalla näkyvässä painikkeessa: napautus ei ole elekomento Buxtonin tarkoittamassa merkityksessä! = 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. Esim. Microsoftin Kinect-käyttöliittymässä (tai muissa konenäköön perustuvissa käyttöliittymissä) eleet tehdään liikeratoina ilmassa Mistä komennoksi tarkoitettu ele alkaa, ja mikä ei ole tarkoitettu komennoksi? 5 Komennot eleinä? Kosketusnäyttöjen yhteydessä ele tarkoittaa yleensä yhtenäistä sormella (tai kynällä) laitteen pinnalla tehtävää liikerataa jonkin komennon antamiseksi Haasteita: Laitteen herkkyys sormen nousulle pinnalta? Mahdollisuus käyttää kahta tai useampia sormia/käsiä? Tunnistaako laite kahden sormen eleitä, ts. kosketuspisteet manipuloivat samaa kohdetta? Elekomentojen suunnittelun haasteita 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 6 Saila.Ovaska@uta.fi 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 Seuraavilla kalvoilla erilaisia haasteita eleiden ja eleisiin perustuvien käyttöliittymien suunnittelussa Moodit Elevalikoima Eleiden tunnistuksen haasteita Elekomennosta annettava palaute 7 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 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 8 Saila.Ovaska@uta.fi 4

5 Komennot eleinä haastavaa suunnitella siirtymä työkaluista toiseen Esim. valintaa ja piirtämistä varten valintamoodi vs. piirrosmoodi joissakin tilanteissa koneen kannalta eri moodit, mutta eleinä (liikeratoina) hyvin samanlaiset Siirtyminen moodista toiseen tulisi saada saumattomaksi 9 Vrt. kynäkäyttöinen Flowmenu 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ää? 10 Saila.Ovaska@uta.fi 5

6 Eleitä sormilla: esimerkkinä zoomaus Multi-touch Esimerkiksi iphonessa Kaksi sormea käytössä Zoomaus lähentämällä tai loitontamalla kahta sormea toisistaan ( pinch ) Linja Zax, vain yksi kosketuspiste Zoomaus spiraalimaisella pyörivällä liikkeellä 11 Tuoteidea: FingerWorks - elevalikoiman luonnollisuus? Erityiset syöte levyt Eleet käytössä, osa listattu Yritys (Fingerworks) ei enää olemassa Esimerkkejä FW-elekomennoista 12 Saila.Ovaska@uta.fi 6

7 BumpTop Desktop Ominaisuuksia Tabletop UI Pinot keskeinen organisointitapa Nätit ja sotkuiset pinot Dokumenttien heittely, törmäily kuin reaalimaailmassa 2006 kynäkäyttöliittymä, D multitouch sormin Elevalikoimassa esim. Lasso (kohteiden ympäri) Valikko esille jos lassoele tehdään kokonaiseksi Valikko esille erityisellä siansaparoeleellä University of Toronto, Dynamic Graphics Project Agarawala & Balakrishnan (2006). Keepin' it Real: Pushing the Desktop Metaphor with Physics, Piles and the Pen. Proceedings of CHI 2006, Tactapad haptista palautetta oheislaiteidea, ei markkinoilla Tuntopalautetta sormenpäihin esimerkkinä piirrossovellus 14 7

8 DIGITAALISIA TYÖPÖYTIÄ 15 Digitaaliset pöytäpinnat 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ä, ) Tarkasteltavana olevat pöytäpinnat vanhimmasta uusimpaan Digital Desk (1991-3) Tangible Bricks (1995) (ks. Tangible UI myöhemmin tässä kalvosetissä) SmartSkin (2002) DiamondSpin (2004) Microsoft Surface, (2008 ja 2011). nykyisin (kesä ) Pixelsense 16 Saila.Ovaska@uta.fi 8

9 Digital Desk, 1993 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 17 SmartSkin, 2002 Pöytäpintaan integroitu sensoreita jotka tunnistavat käyttäjien käsien muodon ja sijainnin. Jun Rekimoto, SmartSkin: An Infrastructure for Freehand Manipulation on Interactive Surfaces, CHI

10 DiamondTouch ja DiamondSpin, 2004 DiamondTouch Pöytäpintaan integroitu sensorit Pöytä tunnistaa kuka käyttäjä on (tarkemmin seuraavalla kalvolla) DiamondSpin Ohjelmisto mm. dokumenttien siirtelyyn pöydällä Kuva heijastetaan pöytäpinnalle DiamondSpin: An Extensible Toolkit for Around-the-Table Interaction. CHI 2004 Extended Abstracts. Tuotteistettu: (2008-) 19 Diamond Touch 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) 20 Saila.Ovaska@uta.fi 10

11 Microsoft Surface Ensimmäiset luonnokset 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ä V1: V2: 21 Microsoft Surface, v1.0 vuonna 2008 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. - 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 22 Saila.Ovaska@uta.fi 11

12 Microsoft Surface, 2.0 vuonna 2011 Samsung SUR40 pöytä Suunnitteluohjeita Surface-pöytäpintaa varten Microsoft Surface 2 User Experience Guidelines harjoituksissa (teht. 15) 23 Microsoft Surface UX Guidelines (2009) Microsoft Surface is a major new development in the area of Natural User Interface (NUI) Interaction principles 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 Microsoft Surface User Experience Guidelines (2009) 24 Saila.Ovaska@uta.fi 12

13 yksinkertainen ja suunnitteluohjeet 2011 eläväinen ja reagoiva jäsennelty aidosti digitaalista sisältöä ei kiinnitettyä katselusuuntaa Microsoft Surface User Experience Guidelines (2011). 25 Digitaaliset pöytäpinnat jaettuna käyttöliittymänä vaakatasossa olevaa, nykyisin monen käyttäjän teknologiaa Pöydän ympärillä on sosiaalista vuorovaikutusta Mutta pöytä ei välttämättä tue ryhmätyötä tai edes esitelmänpitoa! Kumppanit eri puolilla pöytää 360 asteen käyttöliittymä Mihin suuntaan kohteet, tekstit ja kuvat käännetään? Kuka kontrolloi kuvia ja dokumentteja pöydällä? Microsoft Surface /Pixelpoint jättää kontrollin käyttäjille DiamondSpin ohjelmistossa oli erityistä tukea ryhmätyölle, mm. yksityisiä työalueita käyttäjän edessä Muistettava myös pienet henkilökohtaiset laitteet, joita käyttäjällä voi olla mukanaan 26 13

14 Digitaaliset pöytäpinnat jaettuna käyttöliittymänä Digitaaliset pöytäpinnat 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 Katsekontakti taas on tärkeää keskustelun vuorottelussa. 27 SEINÄPINNALLA 28 Saila.Ovaska@uta.fi 14

15 City Wall: kosketuseleitä 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: Uudempi esimerkki: EIT Bubblescreen CeBIT 2012 Miten houkutella käyttäjät kokeilemaan näyttöpintaa? Messukäytössä 8 MultiTaction Cell 55" modular multi-user touch displays 4 Microsoft Kinect 3D motion sensing cameras Syötteenä paitsi kosketus, myös konenäkö: nähdään milloin käyttäjä on lähellä tai lähestymässä näyttö reagoi Saila.Ovaska@uta.fi 15

16 G-Speak Tuotteistettu Minority report Tunnistus koskettamatta näyttöpintaa Virtual Guitar v2 Esimerkkikuvissa vasemmalla virtuaalinen ilmakitara (2004-5) 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 32 16

17 LeapMotion LEAP on tällä hetkellä tuoteidea-asteella tulossa markkinoille loppuvuonna 2012? Se on USB-oheislaite, jonka avulla tunnistetaan liikettä yksittäisten sormien paikkaa ja liikeratoja myöten Kalibroitava ennen käyttöä Kattaa alueen, jonka koko on 8 kuutiojalkaa, ts. noin 60 cm suuntaansa näytön edessä 33 TANGIBLE UI tai GRASPABLE UI eli KOURIINTUNTUVIA KÄYTTÖLIITTYMIÄ 34 Saila.Ovaska@uta.fi 17

18 Tangible User Interfaces (TUIs) TUI-käyttöliittymät ovat osa reaalimaailmaa. TUI-käyttöliittymässä on fyysisiä objekteja, joihin käyttäjä voi tarttua, pitää niitä käsissään ja manipuloida. Nämä fyysiset kohteet ovat syötelaitteita graafisille näytöille, joita on osana reaalimaailmaa, tai manipuloitavissa kohteissa itsessään on näyttö tai muu tapa, jolla ne tuottavat käyttäjän saataville tulostetta manipuloinnista Vain muutama fyysinen kohde on kulloinkin käyttäjän työskentelyssä keskeisellä paikalla (näkökentässä, käsien ulottuvilla). Ympäristössä voi olla muita kohteita tai näyttötauluja, joihin käyttäjä tarvittaessa kohdistaa huomionsa. Ishii & Ullmer, Tangible Bits: Towards Seamless Interfaces between People, Bits and Atoms. Proc. CHI 97. doi: / Tangible Bricks, 1995 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 Fitzmaurice, Ishii and Buxton, Bricks: Laying the Foundations for Graspable User Interfaces. Proc. CHI'

19 Kouriintuntuvien palikoiden suunnitteluavaruus Kuvassa harmaalla alueella merkitty tekijöiden Bricksideat Fitzmaurice, Ishii, and Buxton Bricks: laying the foundations for graspable user interfaces. In Proc. CHI ' Reactable - musiikkipalikoita pöytäpinnalla musiikkia fyysisten palikoiden avulla Syksy 2010: myös mobiiliversio (GUI) 38 Saila.Ovaska@uta.fi 19

20 Eroon työpöydästä I/O Brush Multimodaalinen ratkaisu moodiongelmaan: kosketus sormin + IR-kynä Hinckley et al., Manual Deskterity: An exploration of simultaneous pen + touch direct input. Proc. CHI Saila.Ovaska@uta.fi 20

21 Tasaus pöytäpinnalla Kaksikätistä vuorovaikutusta, mukana kynä ja mm. piirtokolmio Vertaa Suorakäyttö-luennot! Yhtenä ideoiden lähteenä tasauspuikko Frisch, Langner, and Dachselt Neat: a set of flexible tools and gestures for layout tasks on interactive displays. Proc. Interactive Tabletops and Surfaces (ITS '11) Shiftables - älypalikoita Goodbye GUI, hello TUI Palikan koko n. 5x5cm Saila.Ovaska@uta.fi 21

22 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 Schwesig, What makes an interface feel organic? CACM 51:6, Organic? Schwesig, What makes an interface feel organic? doi: /

23 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 Schwesig, Poupyrev & Mori (2004) Gummi: A bendable computer. Proc. of CHI Taivuteltava OLED-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ä Nokia Kinetic bendable phone (2011) 46 Saila.Ovaska@uta.fi 23

24 Muita taivutettavia syötelaitteita Taivuteltava käyttöliittymä Kuvassa kartonkia infrapunaa heijastavaa lediä, ja käytössä infrapunaa erottamaan pystyvä kamera Tavallinen näyttölaite mutta syötelaite kuin käsittelisi paperia Gallant et al., Towards more paper-like input: flexible input devices for foldable interaction styles. Proc. CHI Elevalikoima? 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! 48 Saila.Ovaska@uta.fi 24

25 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 Best paper award Yhteenveto: post-wimp Suoravaikutteisuuden tuntu saavutetaan luontevilla eleillä, joitten suorittamista ei tarvitse miettiä, ja välittömällä palautteella Pienet laitteet, isot laitteet, osana ympäristöä Kosketus tai ei-kosketusta Tällaiselle järjestelmälle potentiaalisia kohdealueita paljon Tunnistamassa ihmisten luonnollisia eleitä Osana multimodaalista (moniaistista) järjestelmää 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? 50 25