Käyttöliittymien perusteet

Transkriptio

1 Suorakäyttö eli suoravaikutteisuus Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 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 1 2 Suoravaikutteisen käyttöliittymän historiaa: Sketchpad Suoravaikutteisen käyttöliittymän historiaa: NLS Ivan Sutherland, 1963: Sketchpad Olioperustaisuus, ikkunat, graafinen käyttöliittymä Lähteet: Doing with images makes symbols video, sekä ja 3 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 Muita saavutuksia, 1968 GRAIL Graphical input language RAND tablet Kynäkäyttöliittymä Yliopistoista kaupallisiksi tuotteiksi DynaBook Ideoitu vaan ei toteutettu 1968 Nykyisen sylikoneen pahvimalli, litteä paneelinäyttö, kevyt ja mukana kannettava, lapsillekin 5 Brad A. Myers, A Brief History of Human Computer Interaction Technology. ACM interactions. Vol. 5, no. 2, March, pp Saila.Ovaska@uta.fi 1

2 Graafisen käyttöliittymän kaupallinen kehitys Xerox 8010 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 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 Xerox PARC: Alto Ei kaupallinen tuote Xerox PARC: Xerox Star, 1981 Hinta n USD Apple: Macintosh, 1984 Hinta n USD 7 WYSIWYG Direct manipulation Suorakäyttöisyys Shneidermanin mukaan 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 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ö 9 10 Suorakäyttöisyys Suorakäytön etuja (?) 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 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 Saila.Ovaska@uta.fi 2

3 Xerox Star työpöytä: ensimmäiset ideat TYÖPÖYTÄMETAFORA 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 13 Kuvan lähde: Moggridge, Designing interactions Xerox Star: työpöytä 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 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? Jos raahattava kuvake on Esimerkki: raahausoperaatio (Macintosh) 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 levynpoistokoneesta Vrt. Windows: myös pikakuvakkeen luonti mahdollinen toiminto raahauksen tuloksena

4 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 WYSIWYG JA SUORAKÄYTÖN ONGELMAT Tekstinkäsittely ja WYSIWYG Tekstinkäsittelyn suorakäyttöisyys Teksti Emacs-editorissa (Unix-pääteyhteys) vs. muotoiltuna Word-ohjelmassa 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 WYSIWYGin heikkouksia Is All You Get Ei erota dokumentin loogista rakennetta sen ulkoasusta Dokumentin sisältö vs. rakenne Suorakäytön ongelmia 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ä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 4

5 Tehtävänä kohteiden tasaus (alignment) Kahden kohteen tasaus keskiakselin suhteen piirrosohjelmassa: SUORAKÄYTTÖISEN TYÖKALUN SUUNNITTELU 25 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 Tasaus valikkokomennon avulla Tasaus dialogin avulla Windows Draw MacDrawPro Tasaus paletin avulla Tasaus kohdistusapujen avulla ClarisDraw 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

6 Esimerkki: Microsoft PowerPoint Mistä tasaustoiminnot löytyvät? valikosta tai paletista Snap-to-grid toiminnallisuus 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öä Office 2007 versiosta (valintanauha-toteutus!) lähtien ei ole irtirevittäviä valikoita 31 Lähteenä: Baudisch, Snap-and-go: Helping Users Align Objects Without the Modality of Traditional Snapping. CHI Tasaus puikkotyökalulla Luonnollisin tasaustapa? luonnollisin tasausväline Suorakäyttöinen työkalu Taustalla viivainmetafora Kohteita ei tarvitse valita (?) Kaksikätinen vuorovaikutus (hiiri + ohjauspallo) Vertailussa paletti, valikko ja puikko 22 testihenkilöä 100 % 80 % 60 % 40 % 20 % 0 % I valinta II valinta III valinta puikko valikko paletti Roope Raisamo and Kari-Jouko Räihä, Design and evaluation of the alignment stick. Interacting with Computers 12 (2000), Ratkaisu eri tehtävissä musta pylväs: keskimääräinen suoritusaika ylempi käyrä: testihenkilöiden tekemät toiminnot alempi käyrä: optimisuoritus SUORAKÄYTTÖISEN LIITTYMÄN SUUNNITTELUN HAASTEITA JA MALLEJA Saila.Ovaska@uta.fi 6

7 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? 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? Design Patterns Suunnitteluohjeita suorakäyttöön (Tidwell 1/2) 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 UI Patterns and Techniques, Jenifer Tidwell Edit-in-Place Smart Selection Edit-in-place Smart selection 39 Lähde: 40 Suunnitteluohjeita suorakäyttöön (Tidwell 2/2) Muitakin suunnittelumalleja on 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. Yahoo! Developer Network Design Pattern Library Verkkosivujen suunnittelu suoravaikutteisiksi Esimerkiksi kategoria Drag and drop : Saila.Ovaska@uta.fi 7

8 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? SUORAKÄYTTÖ WIMP-KÄYTTÖLIITTYMÄSSÄ? Ei mikään! Tällainen työtapa ei ole suorakäsittelyä VAAN vastaa työskentelyä komentokielellä! 43 Michel Beaudouin-Lafon, Instrumental Interaction: An Interaction Model for Designing Post-WlMP User Interfaces. CHI 2000, Kuinka suoraa on suorakäyttö? 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 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 Suorakäyttöisyyden tavoite Suoravaikutteisuusmatriisi 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 Temporaalinen siirtymä raahaa ja pudota kahvat vierityspalkit Michel Beaudouin-Lafon, Instrumental Interaction: An Interaction Model for Designing Post-WlMP User Interfaces. CHI 2000, dialogiruudut property box Spatiaalinen siirtymä 48 Saila.Ovaska@uta.fi 8

9 Suorakäytön tehostamistavoite TAVOITTEENA SPATIAALISEN JA TEMPORAALISEN SIIRTYMÄN MINIMOINTI 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) Työkalulasi ja taikalinssit Työkalut samoja eri sovelluksissa 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 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 työkalulasin (tai -paletin) perusidea: hiiren kursori työkalupaletti Demo Video sovellusohjelma 51 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, Vertailututkimus 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 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 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ä 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, Paul Kabbash, William Buxton, and Abigail Sellen, Two-handed Input in a Compound Task. Proc. CHI'94, ACM DOI Saila.Ovaska@uta.fi 9

10 Vertailututkimuksen havaintoja R-tearoff L-tearoff Palette Toolglass Wait times Left hand use NA 49% 47% 83% Total time 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 Kursoriin liittyviä kehitysideoita Kursorin aktiivinen alue (hot spot) 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) 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? 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: / Saila.Ovaska@uta.fi 10

11 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 PieCursor Valikko aina lähellä FItzmaurice et al., Tracking Menus. Proc. UIST ACM DOI. Fitzmaurice et al., PieCursor: merging pointing and command selection for rapid in-place tool switching. Proc. CHI2008. ACM DOI Suorakäytön määritelmä siis? TAKAISIN SUORAKÄYTÖN MÄÄRITELMÄÄN TAVOITTEENA SUORAKÄYTÖN TUNTU 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) 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 11

12 Havainnon tulkinta Tulkinnan arviointi Tuloksen havainnointi Osallistumisen tuntu Tavoite Lähde: Norman, 1990 Aikomus Toimenpiteen määrittely Suoritus Lyhyt etäisyys 67 7 Stages of Action Hutchins, Hollan & Norman (lähteessä sykli piirretään vastapäivään) 68 Normanin mukaan Suorakäytön määritelmä: Yhteenveto 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! 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) 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 Saila.Ovaska@uta.fi 12