Suorakäyttö eli suoravaikutteisuus

Transkriptio

1 Suorakäyttö eli suoravaikutteisuus Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 1 Tarjolla tänään Suoravaikutteisen käyttöliittymän historia ensimmäisiä suorakäyttöisiä järjestelmiä 1960-luvulta: Sketchpad, GRAIL, NLS, Dynabook kunnes sitten WIMP-käyttöliittymät tuotteistettiin: Xerox Star 1981, Mitä on suorakäyttö? Keskeisiä käsitteitä: Työpöytämetafora WYSIWYG-periaate (What You See Is What You Get) Tavoitteina spatiaalisen ja temporaalisen siirtymän minimointi kognitiivisen rasituksen minimointi, suorakäyttöisyyden tuntu Esimerkkejä suorakäyttöisistä järjestelmistä Tasaustoiminto eri tavoin Kaksikätinen vuorovaikutus Hiirikursoriin liittyvät kehitysehdotukset 2 Saila.Ovaska@uta.fi 1

2 Suoravaikutteisen käyttöliittymän historiaa: Sketchpad Ivan Sutherland, 1963: Sketchpad Olioperustaisuus, ikkunat, graafinen käyttöliittymä Lähteet: Doing with images makes symbols video, sekä ja 3 Suoravaikutteisen käyttöliittymän historiaa: NLS Douglas Engelbart Stanford Research Institute Hiiri, hyperteksti, tietokonetuettu yhteistyö, jaetut näytöt,... The mother of all demos San Francisco, Dec 1968 With live connection to Menlo Park (30 miles away) NLS (on-line System) developed and used at SRI 4 Saila.Ovaska@uta.fi 2

3 Muita saavutuksia, 1968 GRAIL Graphical input language RAND tablet Kynäkäyttöliittymä DynaBook Ideoitu vaan ei toteutettu 1968 Nykyisen sylikoneen pahvimalli, litteä paneelinäyttö, kevyt ja mukana kannettava, lapsillekin 5 Yliopistoista kaupallisiksi tuotteiksi Brad A. Myers, A Brief History of Human Computer Interaction Technology. ACM interactions. Vol. 5, no. 2, March, pp Saila.Ovaska@uta.fi 3

4 Graafisen käyttöliittymän kaupallinen kehitys Graafinen käyttöliittymä Xerox Star, 1981 Apple Macintosh, 1984 The best way to predict the future is to invent it. Alan Kay, Xerox PARC Xerox PARC: Alto Ei kaupallinen tuote Xerox PARC: Xerox Star, 1981 Hinta n USD Apple: Macintosh, 1984 Hinta n USD 7 Xerox 8010 eli Xerox Star, 1981 Ominaisuuksia kuvakkeet, ikkunointi, dialogiruudut, fontit, ja 1024*768 monokromaattinen näyttö Työpöytämetafora Kuvakkeet näkyvissä Suorakäyttö Kohteiden osoittaminen Hiiri + näppäimistön komentopainikkeet WYSIWYG Saila.Ovaska@uta.fi 4

5 Direct manipulation Direct manipulation = suorakäyttö Termin isä on Ben Shneiderman, joka otti termin käyttöön 1980 luvun alussa Shneiderman, B. Direct Manipulation: A Step Beyond Programming Languages. IEEE Computer, August 1983, 16(8), Työpöytämetaforan rinnakkaiskäsite: Kohteita voidaan käsitellä suoraan ja tuloksen näkee heti Myös esim. taulukkolaskenta on suorakäyttöistä numeroiden muokkausta verrattuna esim. tietokantaohjelmaan, jossa päivitykset tehdään komentokielellä tai täyttämällä ja lähettämällä lomake Shneiderman (Marylandin yliopisto, HCIL) kehitti etenkin suorakäyttöisiä informaation visualisointityökaluja 9 Suorakäyttöisyys Shneidermanin mukaan Visuaalisuus: käyttäjälle esitetään kuva maailmasta sen sijaan, että käyttäjän pitää kuvitella maailma Suoruus: käyttäjä manipuloi (osoittaa, siirtää) suoraan objekteja sen sijaan, että kuvaisi haluamansa toimenpiteen jollakin kielellä Toimintojen toteutuvuus: toiminnot toteutetaan yleensä välittömästi, usein vähän kerrallaan, ja ne voidaan yleensä peruuttaa Analogia: auton ajaminen vs. autonkuljettajan käyttö 10 Saila.Ovaska@uta.fi 5

6 Suorakäyttöisyys Vertaa Normanin hyvän suunnittelun periaatteisiin Näkyvyys (visibility): tee asiat näkyviksi Kytkennät (mappings): tee ohjainten ja toimintojen yhteys selväksi Käsitemalli (conceptual model): tarjoa selkeä käsitemalli Palaute (feedback): anna palautetta Virheiden käsittely (to err is human): varaudu virheisiin 11 Suorakäytön etuja (?) Käyttäjät pääsevät nopeasti alkuun, usein jonkun toisen opastamana Kokeneet käyttäjät pystyvät työskentelemään erittäin nopeasti Satunnaiskäyttäjät pystyvät muistamaan käytön perusteet (tunnistaminen helpompaa kuin muistaminen) Virheilmoituksia tarvitaan harvoin Käyttäjät näkevät heti, johtavatko toimenpiteet haluttuun tulokseen Käyttäjät ovat tyytyväisiä: he tuntevat hallitsevansa "koko" järjestelmän ja samalla työnsä suorittamisen haluavat oppia lisää kokeilemalla järjestelmän kaikkia piirteitä esittelevät mielellään järjestelmää toisillekin 12 6

7 TYÖPÖYTÄMETAFORA 13 Xerox Star työpöytä: ensimmäiset ideat Tim Mott: Office schematic työpöytä-hahmotelma Yksinkertainen kaksiulotteinen ikoninen representaatio toimistosta Fyysiset metaforat Mistä kuvakkeet tulivat työpöydälle? Larry Teslerin haave: Vuorovaikutteinen järjestelmä, jota kuka tahansa voi Käyttää Ikonit muistuttavat ihmisiä käsitteistä ja he ymmärtävät niiden idean nopeasti lukematta sanaakaan Kuvan lähde: Moggridge, Designing interactions

8 Xerox Star: työpöytä 15 Star-järjestelmän ja sen seuraajien suunnittelun taustalla oli työpöytämetafora Metaforan tai paremminkin analogian merkitys suunnittelussa: yritetään käyttää systemaattisesti hyväksi käyttäjällä muusta ympäristöstä olevaa tietämystä ihmiselle luonteenomainen tapa orientoitua uuteen tilanteeseen on verrata tilannetta aikaisemmin koettuun metafora on hyvä perusta sisäisen mallin rakentamiselle, oppimiselle mutta metaforat ovat aina puutteellisia 16 8

9 Työpöytämetaforan toimivuus Työpöydällä (toimistossa) voi olla Dokumentteja (tiedostoja) Kansioita Apuvälineitä, kuten laskin Roskakori Työpöydällä olevia kohteita voi liikutella (raahata) ja järjestellä Miten ikkunat liittyvät työpöytään? Ja onko roskakorin paikka työpöydällä Ja pitääkö käyttäjän ymmärtää, mitä tapahtuu raahatessa? 17 Esimerkki: raahausoperaatio (Macintosh) Jos raahattava kuvake on ja raahauksen määränpää on niin aikaansaatu toiminta on dokumentti kansio samalla levyllä dokumentin siirtäminen dokumentti kansio eri levyllä dokumentin kopiointi dokumentti ohjelma-ikoni dokumentin avaaminen ohjelmalla levy eri levy levyn kopiointi dokumentti roskakori dokumentin siirtäminen roskakoriin levy roskakori levyn poisto koneesta Vrt. Windows: myös pikakuvakkeen luonti mahdollinen toiminto raahauksen tuloksena. 18 9

10 Raahausoperaation semantiikka Osasyy raahausesimerkissä kohdattuun ongelmaan: raahaaminen (drag and drop) on samanlaista kohteesta tai sen sijainnista riippumatta samanlainen komennon syntaksi mutta erilainen tulos kuvakkeessa ei ole visuaalista indikaattoria, joka kertoisi, millä levyllä sen edustama dokumentti sijaitsee Esimerkiksi eri levyillä (ja levykkeillä) on Windows- ja Macintosh-ympäristössä oma roskakori 19 WYSIWYG JA SUORAKÄYTÖN ONGELMAT 20 10

11 Tekstinkäsittely ja WYSIWYG Teksti Emacs-editorissa (Unix-pääteyhteys) vs. muotoiltuna Word-ohjelmassa 21 Tekstinkäsittelyn suorakäyttöisyys WYSIWYG-periaate: What You See Is What You Get Teksti näyttäytyy käyttäjälle näytöllä sellaisena kuin sen lopullinen ulkoasu on paperille tulostettaessa WYSIWYGin etuja Ei tarvita muunnosta sisäisen mallin ja käyttöliittymän välillä Komentojen vaikutuksen näkee heti Virheiden korjaus on helppoa vai: What you See Is All You Get WYSIWYGin heikkouksia Ei erota dokumentin loogista rakennetta sen ulkoasusta 22 11

12 Dokumentin sisältö vs. rakenne Luonti ja muokkaus teksturissa mukana tekstin sisällön lisäksi: - looginen rakenne (luvut, ) - muotoilukomentoja - ristiviittaukset sisällön perusteella Valmis sivu tekstin ja komentojen prosessoinnin jälkeen: - muutokset vaativat uuden prosessoinnin - yhtenäisten muutosten tekeminen helppoa 23 Suorakäytön ongelmia Suorakäyttöiset liittymät soveltuvat huonosti monta kertaa toistettaviin operaatioihin Käyttäjälle näkymättömiä tyylitiedostoja ja asetuksia Suurten ryhmien valinnassa osoittaminen ei ole kätevä tapa Vrt. jokerimerkki, *.txt Suorakäyttöiset järjestelmät perustuvat käyttäjän tunteman maailman visualisointiin Voi rajoittaa uusien käyttömahdollisuuksien keksimistä Toteutus on vaativaa Hiiren käyttäminen vaatii käyttäjiltä joskus liikaa tarkkuutta 24 Saila.Ovaska@uta.fi 12

13 SUORAKÄYTTÖISEN TYÖKALUN SUUNNITTELU 25 Tehtävänä kohteiden tasaus (alignment) Kahden kohteen tasaus keskiakselin suhteen piirrosohjelmassa: Kappaleiden tasaukseen on tarjolla erilaisia tapoja (kohteiden raahaus: työlästä ja epätarkkaa) Valikko Dialogi Paletti Snapping, kohdistusapujen käyttö tasaukseen Suorakäyttöinen puikkotyökalu 26 13

14 Tasaus valikkokomennon avulla Windows Draw 27 Tasaus dialogin avulla MacDrawPro 28 14

15 Tasaus paletin avulla ClarisDraw 29 Tasaus kohdistusapujen avulla Snapping Kohteiden kohdistus joko ruudukkoon tai toisiinsa käyttäen apuna magnetismia Magneettinen kohta imaisee puoleensa Kohdan lähellä vetovoima on niin suuri ettei kohteita voi laittaa ihan viereen

16 Esimerkki: Microsoft PowerPoint Mistä tasaustoiminnot löytyvät? valikosta tai paletista Snap-to-grid toiminnallisuus Office 2007 versiosta (valintanauha-toteutus!) lähtien ei ole irtirevittäviä valikoita 31 Tasaus Snap-and-Go -tekniikalla kohdistusapujen käytössä kohdistus on asetettava erikseen päälle ja pois päältä jos se on päällä, käyttäjä voi olla ymmällään, miksi kohteet pudotettaessa hyppivät (warp) Snap-and-Go idea (Baudisch) Kohde voidaan asettaa myös lähelle tasauskohtaa Tasaus kohdistuskohtaan hieman hitaampaa kuin perinteisellä tavalla, mutta Snap-and-Go tuo lisää vapautta ja yksinkertaistaa käyttöä Lähteenä: Baudisch, Snap-and-go: Helping Users Align Objects Without the Modality of Traditional Snapping. CHI

17 Tasaus puikkotyökalulla Suorakäyttöinen työkalu Taustalla viivainmetafora Kohteita ei tarvitse valita (?) Kaksikätinen vuorovaikutus (hiiri + ohjauspallo) Roope Raisamo and Kari-Jouko Räihä, Design and evaluation of the alignment stick. Interacting with Computers 12 (2000), Luonnollisin tasaustapa? luonnollisin tasausväline Vertailussa paletti, valikko ja puikko 22 testihenkilöä 100 % 80 % 60 % 40 % 20 % 0 % I valinta II valinta III valinta puikko valikko paletti 34 Saila.Ovaska@uta.fi 17

18 Ratkaisu eri tehtävissä musta pylväs: keskimääräinen suoritusaika ylempi käyrä: testihenkilöiden tekemät toiminnot alempi käyrä: optimisuoritus 35 SUORAKÄYTTÖISEN LIITTYMÄN SUUNNITTELUN HAASTEITA JA MALLEJA 36 18

19 Suorakäytölläkin on syntaksi Myös suoravaikutteisella keskustelulla on syntaksi Tavallisimpia syntakseja: Kohde Työkalu Työkalu Kohde Työkalu Kohde (Veto) Kohde (Kaksoisklikkaus) Ongelmana työkalujen käytössä: monien erilaisten syntaksien sekoittaminen Käyttäjän voi olla vaikea ymmärtää perusteita toiminnalle, jos tulee ongelmatilanne Raahaus kansiossa (kansiota vierittäen) vai ulos kansiosta? 37 Suoravaikutteisen käyttöliittymän suunnittelun haasteita Ikoniperustaisissa liittymissä suunniteltava Kuvakkeet Kohteen mahdollisuuksien (affordance) esittäminen käyttäjälle: tartuttavuus, kahvat, mahdollinen paikka raahattavana olevan kohteen pudottamiselle, Hiiren kursoriin liitettävät kuvakkeet toiminnon eri vaiheissa ja niiden avulla annettava palaute Vrt. kuvakkeet-kalvosetissä ollut esimerkki kalustusohjelman suunnittelusta: ensimmäinen idea työkalupalkin käytöstä ratkaisuna ei ollut toimiva paremmin toimi suorakäyttöinen ratkaisu, jossa liitettiin kohteeseen kahvoja kun kohde aktivoitiin kahvan muoto vinkkinä siitä, mitä sen avulla tehdään Sopivien syötelaitteiden käyttö Montako nappia hiiressä pitäisi olla? Vai tarvitaanko hiirtä... Miten saada molemmat kädet käyttöön? 38 19

20 Design Patterns Käyttöliittymän suunnittelumallit (UI Design Patterns) kokoavat suunnitteluideoita eri käyttöliittymistä Design Pattern idea alunperin peräisin arkkitehtuurin piiristä Malleillakin hierarkkinen suhde: Kaupunki Lähiö Asuintalo Keittiö Istuin Alexander, C., Ishikawa, S., Silverstein, M., Jacobson, M., Fiksdahl-King, I. & Angel, S. (1977), A Pattern Language, Oxford University Press, New York. esim. Welie: Interaction Design Pattern Library Jotkut suunnittelumallit liittyvät suorakäytön suunnitteluun seuraavien mallien lähde: UI Patterns and Techniques by Jenifer Tidwell 39 Suunnitteluohjeita suorakäyttöön (Tidwell 1/2) UI Patterns and Techniques, Jenifer Tidwell Edit-in-Place Smart Selection Edit-in-place Smart selection Lähde: 40 Saila.Ovaska@uta.fi 20

21 Suunnitteluohjeita suorakäyttöön (Tidwell 2/2) UI Patterns and Techniques, Jenifer Tidwell Edit-in-Place Smart Selection One-off Mode When a mode is turned on, perform the operation once. Then switch back automatically into the default or previous mode. Constrained Resize Supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances Muitakin suunnittelumalleja on Yahoo! Developer Network Design Pattern Library Verkkosivujen suunnittelu suoravaikutteisiksi Esimerkiksi kategoria Drag and drop : 42 Saila.Ovaska@uta.fi 21

22 SUORAKÄYTTÖ WIMP-KÄYTTÖLIITTYMÄSSÄ? 43 Kuinka suoraa on suorakäyttö? Työskentely WIMP-liittymän kanssa: Valitse kohde napsauttamalla sitä hiirellä Valitse komento valikosta tai näppäimistöltä Täytä viestiruudun kentät ja Paina OK-painiketta jotta näet lopputuloksen Mikä tässä on välitöntä, suorakäyttöistä vaikuttamista kohteeseen? Ei mikään! Tällainen työtapa ei ole suorakäsittelyä VAAN vastaa työskentelyä komentokielellä! Michel Beaudouin-Lafon, Instrumental Interaction: An Interaction Model for Designing Post-WlMP User Interfaces. CHI 2000,

23 Kuinka suoraa on suorakäyttö? Suorakäyttöisessä liittymässä kohteiden *tulisi olla* suoraan näkyvissä mutta Kohteet ovat saavutettavissa jossakin jotenkin Ikkunan vieritys vierityspalkin avulla (scrolling) Syväys kuvaan sisälle ja loitonnus laajempaan näkymään (zooming in / out) Näkymän vieritys, panorointi sivu- ja pystysuunnassa (panning) Käyttöliittymän paisuminen Tarvittavien kohteiden löytyminen on vaikeutunut toimintopalettien, kuvakekokoelmien ja valikkopalkkien suuren joukon vuoksi On tullut käyttöön joukko uusia kohteita, joista käyttäjän tarvitsee huolehtia Esimerkiksi erilliset tyylimäärittelyt tekstinkäsittelyyn 45 Kuinka suoraa on suorakäyttö? Toiminto toteutetaan usein vasta sitten kun käyttäjä on jo sulkenut dialogiruudun On hankalaa esim. asetella tekstiä sivulle, jos tekstin fonttikokoa ei voi muuttaa kuin dialogiruudussa Hiukan välittömämpi tapa: property box työkalupalkissa Dialogiruutu Vs. työkalupalkki 46 Saila.Ovaska@uta.fi 23

24 Suorakäyttöisyyden tavoite Spatiaalisen siirtymän tarve Jotkut toiminnot liittyvät tiettyyn paikkaan ikkunassa (esimerkiksi vierityspalkki) Toiminto on joskus kaukana kohteesta Vaatii tilaa ruudulta! Temporaalisen siirtymän tarve Jotkut toiminnot alkavat toimintopainikkeen painamisesta ja loppuvat tehtävän tultua valmiiksi (esimerkiksi suorakaiteen piirto) Tällaista tilaa on kutsuttu moodiksi Epäsuora aktivointitapa (tarve osoittaa jotain painiketta jossain kaukana) tekee toiminnon suorittamisesta hitaan Joskus toiminto voidaan lisätä oheislaitteeseen, esimerkiksi vieritys hiiren keskinapilla nopeuttaa 47 Suoravaikutteisuusmatriisi Temporaalinen siirtymä raahaa ja pudota vierityspalkit dialogiruudut kahvat property box Michel Beaudouin-Lafon, Instrumental Interaction: An Interaction Model for Designing Post-WlMP User Interfaces. CHI 2000, Spatiaalinen siirtymä 48 24

25 TAVOITTEENA SPATIAALISEN JA TEMPORAALISEN SIIRTYMÄN MINIMOINTI 49 Suorakäytön tehostamistavoite Miten työskentelyyn saataisiin käyttäjän kumpikin käsi mukaan? Esimerkki 1: tasauspuikko - ohjauspallolla skaalattiin puikkoa ja muutettiin sen kaltevuutta, hiirellä liikutettiin sitä Esimerkki 2: taikalinssit ja työkalupaletit työkalu siirretään toisella kädellä lähelle työskentelykohdetta ja työkalulasin läpi voidaan klikata See-Through interface Miten näytön ja hiiren asettamista rajoitteista päästään eroon? Ensi luennolla esimerkkejä pöytäpinnalle siirrettävästä tietojenkäsittelystä (virtuaalityöpöydät) 50 Saila.Ovaska@uta.fi 25

26 Työkalulasi ja taikalinssit esimerkki liittymästä, jossa spatiaalinen ja temporaalinen siirtymä on minimoitu kohdetta käsitellään työkalulasin läpi suoraan kaksikätistä työskentelyä (työkalulasia liikutetaan esimerkiksi ohjauspallon avulla, valinta hiirellä) taikalinssi näyttää kohteen erilaisena, työkalun avulla sitä voidaan muokata työkalulasin (tai -paletin) perusidea: hiiren kursori työkalupaletti sovellusohjelma 51 Työkalut samoja eri sovelluksissa Läpinäkyvät linssit ja työkalut eri tilanteisiin Työkalut pysyvät samoina eri sovelluksissa Linssit toimivat suodattimina Työkaluja esimerkiksi tekstin muokkaukseen Demo Video Bier, Stone, Fishkin, Buxton & Baudel, A Taxonomy of See-Through Tools. Proc. CHI'94, Bier, Stone, Pier, Buxton & DeRose, Toolglass and Magic Lenses: The See-Through Interface. Proc. ACM SIGGRAPH Conference 1994, Saila.Ovaska@uta.fi 26

27 Vertailututkimus Tutkimusasetelma: Tehtävänä yhdistää pisteet värillisillä viivoilla Piste kerrallaan paljastettiin Pisteen väri kertoi sen, millä värillä viiva piti vetää Neljä väriä: red, green, yellow, blue Käytössä liikuteltava väripaletti (kuvassa) Kuvan tekstit eivät olleet osa koeasetelmaa Perusversio käyttöliittymästä: Right-Tearoff Menu kelluva paletti, hiiri oikeassa kädessä, vain 1 käsi käytössä Paul Kabbash, William Buxton, and Abigail Sellen, Two-handed Input in a Compound Task. Proc. CHI'94, Vertailututkimus Vertailtavat käyttöliittymät Left-Tearoff Menu: samanlainen paletti, kaksi hiirtä ja kaksi kursoria vasen hiiri: värin valinta oikea hiiri: piirtäminen, paletin siirtäminen Palette Menu: palettia siirrettiin vasemmalla kädellä (ei erillistä hiiren kursoria), värin valinta tehtiin oikealla kädellä jossa normaali hiiri Toolglass Menu: läpinäkyvä paletti, jonka läpi voi aloittaa viivanpiirron 2 kättä, luonnolliset käsien tehtävät? Paul Kabbash, William Buxton, and Abigail Sellen, Two-handed Input in a Compound Task. Proc. CHI'94, ACM DOI. 54 Saila.Ovaska@uta.fi 27

28 Vertailututkimuksen havaintoja Wait times Left hand use Total time R-tearoff NA 2.89 L-tearoff % 2.96 Palette % 2.90 Toolglass % 2.43 Huomionarvoista Toolglass-vaihtoehdossa vasen käsi käytössä 83% ajasta, muissa alle 50% Left-Tearoff Menu kaikkein hitain: kognitiivinen kuorma kasvaa eri käsille ei pitäisi antaa toisistaan riippumattomia tehtäviä kaksi kättä voi olla hitaampi kuin yksi käsi, jos ohjaustapa on huonosti suunniteltu Paul Kabbash, William Buxton, and Abigail Sellen, Two-handed Input in a Compound Task. Proc. CHI'94, ENTÄ JOS VAIN YKSI SYÖTELAITE? 56 Saila.Ovaska@uta.fi 28

29 Kursoriin liittyviä kehitysideoita Työkalulasit ja taikalinssit toimivat hyvin tilanteissa, joissa on kaksi syötelaitetta toinen työkalun siirtämiseen ja toinen työskentelyyn Seuraavissa ideoissa muutetaan kursoria niin että sillä valitsisi helpommin: Bubble Cursor niin että siirtyminen toiminnosta toiseen onnistuisi pelkän kursorin avulla: Pie Cursor (2008) 57 Kursorin aktiivinen alue (hot spot) Kursorin aktiivinen alue viestitään visuaalisesti käyttäjälle Nuoli, ristikko (= ristikon keskipiste), Minkä kokoinen aktiivisen alueen tulisi olla? Tavallisessa kursorissa (point cursor) aktiivinen alue on yksi piste Aluekursorissa tietyn kokoinen ja muotoinen alue kursorin aktiivisen alueen kasvattaminen helpottaa vaadittavaa motorista suoritusta isolla osuu helpommin Ongelmana: Ison kursorin alle mahtuu monta kohdetta mikä niistä tulee valituksi? 58 29

30 Kuplakursori eli Bubble cursor Bubble cursor on aluekursori, jonka koko riippuu ympäröivien kohteiden läheisyydestä Alueelle osuu aina vain yksi kohde (kursorin keskustaa lähinnä oleva kohde) Kursori muuttaa tarvittaessa muotoaan Suoriutuminen osoitustehtävässä nopeampaa kuin tavallisella kursorilla Grossman & Balakrishnan (2005). The bubble cursor: Enhancing target aquisition by dynamic resizing of the cursors activation area. Proc. of CHI Valikko aina lähellä: Tracking Menu Valikkomoodi valitaan videolla aluksi työkalupalkista Kuvassa kuvankatselumoodi Tässä esimerkissä valikkoon on toteutettu vain lähennä/loitonna ja panoroi Valikko seuraa kynän liikkeitä joten kuvan liikutteluun eri tarkastelukulmiin (pan and zoom) tarvittavat toiminnot ovat aina lähellä Vrt. Pie cursor video! FItzmaurice et al., Tracking Menus. Proc. UIST doi: /

31 Valikko aina lähellä: PieCursor Perustuu Tracking menu -ideaan Hiiren osoittimessa mukana seuraa toimintovalikko, joka on piirakan muotoinen Pieni hiiren liike oikean sektorin suuntaan riittää komennon tekemiseen Palautteena komennosta aktivointiväri ja komennon nimi piirakan alapuolella Fitzmaurice et al., PieCursor: merging pointing and command selection for rapid in-place tool switching. Proc. CHI Tracking Menu Valikko aina lähellä FItzmaurice et al., Tracking Menus. Proc. UIST ACM DOI. PieCursor Fitzmaurice et al., PieCursor: merging pointing and command selection for rapid in-place tool switching. Proc. CHI2008. ACM DOI

32 TAKAISIN SUORAKÄYTÖN MÄÄRITELMÄÄN TAVOITTEENA SUORAKÄYTÖN TUNTU 63 Suorakäytön määritelmä siis? Shneiderman: visuaalisuus kohteiden suora manipulointi vähän kerrallaan toteutettavat toiminnot Beaudouin Lafon: minimoi temporaalinen ja spatiaalinen siirtymä; suorakäyttöön ei kuulu dialogiruutuja Hutchins, Hollan & Norman: suorakäyttöisyys kuormittaa käyttäjän kognitiivista kapasiteettia vähän ( tuntuu suoralta) 64 Saila.Ovaska@uta.fi 32

33 Metaphor Supporting Direct Engagement There are two major metaphors for the nature of human-computer interaction, a conversation metaphor and a model-world metaphor. In a system built on the conversation metaphor, the interface is a language medium in which the user and system have a conversation about an assumed, but not explicitly represented world. In this case, the interface is an implied intermediary between the user and the world about which things are said. In a system built on the model-world metaphor, the interface is itself a world where the user can act, and which changes state in response to user actions. The world of interest is explicitly represented and there is no intermediary between user and world. Appropriate use of the model-world metaphor can create the sensation in the user of acting upon the objects of the task domain themselves. We call this aspect of directness direct engagement. Hutchins, Hollan & Norman, p Hutchins, Hollan & Norman: Määritelmä suorakäytölle Suorakäyttöisessä järjestelmässä on oltava Lyhyt etäisyys (short distance): prosessin, joka muodostaa tehdyn päätöksen perusteella tarvittavat toimenpiteet, tulee kuormittaa kognitiivisia resursseja mahdollisimman vähän Osallistumisen tuntu (direct engagement): käyttäjän täytyy tuntea käsittelevänsä suoraan kohteen objekteja Taustalla Normanin Action Cycle malli Vrt. JoVuoT-luennot Hutchins, Hollan and Norman (1985). Direct manipulation interfaces. Human-Computer Interaction 1(4), (kopio saatavilla Moodlessa) 66 Saila.Ovaska@uta.fi 33

34 Havainnon tulkinta Tulkinnan arviointi Tuloksen havainnointi Tavoite Aikomus Toimenpiteen määrittely Suoritus Lyhyt etäisyys Osallistumisen tuntu Lähde: Norman, Stages of Action Hutchins, Hollan & Norman (lähteessä sykli piirretään vastapäivään) 68 Saila.Ovaska@uta.fi 34

35 Normanin mukaan Suoravaikutteisuuden tunteeseen vaikuttaa Oppiminen Aloittelija vai kokenut Tehtävä Kokeneellekin voi tulla vastaan uusia tehtäviä Suoravaikutteisen käyttöliittymän tulee olla näkymätön! 69 Suorakäytön määritelmä: Yhteenveto Shneiderman Visuaalisuus Kohteiden suora manipulointi Vähän kerrallaan toteutettavat toiminnot Beaudouin Lafon Minimoi temporaalinen ja spatiaalinen siirtymä; suorakäyttöön ei kuulu dialogiruutuja Norman Suorakäyttöisyys kuormittaa käyttäjän kognitiivista kapasiteettia vähän ( tuntuu suoralta) 70 Saila.Ovaska@uta.fi 35

36 Suorakäyttö: yhteenveto Käyttäjälle suoravaikutteisuuden tuntu tärkeää Luonteva (ja johdonmukainen) vuorovaikutuksen syntaksi Visuaalinen palaute Välitön palaute antaa käyttäjälle vaikutelman suoravaikutteisesta toiminnasta ja oman toiminnan seurausten välittömästä näkymisestä ruudulla Kaksikätisyys tavoitteena Vertauskuvien suunnittelu ja valinta Reaalimaailma vs. tietokoneen mahdollisuudet Mitä työpöytämetaforan jälkeen? 71 36