Tarjolla tänään WIMP-käyttöliittymät: Valikot Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto WIMP Windows, Icons, Menus, Pointing Device Valikkotyyppejä ja luokitteluja Fittsin laki Valikoiden suunnittelu Valikoiden organisointi: päävalikko ja alivalikot Vaihtoehtojen nimeäminen, ryhmittely ja järjestys Valikoiden suunnittelun erityiskysymyksiä Mukautuvat valikot Piirakkavalikot Zooming UI Merkkausvalikot 1 2 Mikä on valikko? Yksinkertaisimmillaan luettelo tarjolla olevista vaihtoehdoista MIKÄ ON VALIKKO? Valikko (menu) = keskustelevassa tietojenkäsittelyssä luettelo, josta käyttäjä valitsee seuraavan toiminnon. -ATK-sanakirja 3 4 Esimerkiksi Ulkomuotoeroja: vanhoja valikoita 8 articles in uta.cs.itv - read now? [y n q] WIMP-valikko yleensä pystysuora luettelo; eri ympäristöjen valikot eroavat ulkonäöltään ja ominaisuuksiltaan 8 articles in uta.cs.itv - read now? OpenLook Windows Motif lue seuraava edellinen peruuta lisää NeXT 6 Macintosh Kuvat: Aaron Marcus 7 Saila.Ovaska@uta.fi 1
Valikon osat: Macintosh WIMP-valikoita Ikkunan osina: Ikkunan valikkopalkki (ikkunan tai näytön yläreunassa) Valikkopalkista aukeavat valikot sisältävät yleensä ohjelman toiminnallisuuden Tilapalkkiin (ikkunan alareunassa) tai muuhun näkyvään kohteeseen liitetyt valikot Työkalupalkit (kuvakkeita sisältävät paletit) ennen kiinteinä osina ikkunassa, nyttemmin vapaasti liikuteltavia Kontekstin mukaan muuttuvat kontekstivalikot ponnahtaa esiin hiiren kakkospainikkeella Ikkunoiden ja ohjelmien välillä liikkumiseen tarkoitetut valikot (esim. Mac OS X Dock) [Apple Human Interface Guidelines] 8 9 Esimerkki: Macintosh-valikkoja Esimerkkejä valikoista: Apple Macintosh OS X Ohjelman valikkopalkki Työkalupalkki (toolbar) [Apple Human Interface Guidelines] 10 [Apple Human Interface Guidelines] 11 Windows 7 -valikkoja Valikkopalkin standardivalikot Perusohje: käytä standardivalikoita (File, Edit,...) Johdonmukaisuus! Työkalupalkissa: Huomaa kuitenkin: Windows 7 -ohjeissa Käytä standardivalikoita mutta vain tarvittaessa Valikkorakenne Kun ohjelmassa ei käsitellä tiedostoja, File jne. ovat tarpeettomia Valikkopalkkiakaan ei tarvita Jos komentokategorioita on kolme tai vähemmän Muita vaihtoehtoja valikkopalkin tilalle: esim. komentopainike, josta aukeaa valikko Ongelmana miten olla johdonmukainen Menu buttons, split buttons, 12 13 Saila.Ovaska@uta.fi 2
Hypertekstimäisiä linkkejä Tilapalkkiin liittyviä valikoita Valinnat voidaan esittää myös linkkeinä Linkkien kokoelma ei näytä valikolta (vaikka itse asiassa tarjoaakin valikon) Linkki ei näytä komentopainikkeelta Linkkiä ei alleviivata Linkissä voi olla enemmän sanoja kuin komentopainikkeeseen mahtuisi Konteksti auttaa käyttäjää ymmärtämään ne komennoiksi Windows [UX Guide]: Links vs. Command Buttons Tilapalkki (status bar) Pääikkunan alareunassa Ajankohtaista tietoa ikkunan sisällöstä ja käyttäjän toimista ikkunassa, osin kuvakkeiden avulla Kuvassa tilanneilmaisin ja tilapalkkiin sijoitettu valikko, jonka käyttäjä on avannut nuolesta 14 15 Windows 8: Metro http://www.youtube.com/watch?v=dz1lbukc9dc http://www.techradar.com/news/software/operating-systems/hands-on-windows-8-review-1025259 VALIKOIDEN LUOKITTELUJA 16 17 Valikoiden luokittelutapoja (1/4) Esimerkki: hierarkkinen valikko Valikon organisointitavan perusteella Yksinkertainen valikko, jossa kaikki vaihtoehdot kerralla näkyvissä Vieritettävät valikot Hierarkkiset valikot (hierarchical menus, cascading menus) Valikkojonot, esim. teksti-tv: urheilun pääsivu : urheilulaji1 : alasivu1 alasivun urheilulaji2 : Windows XP 18 19 Saila.Ovaska@uta.fi 3
Teksti-TV:n valikkojonot Valikoiden luokittelutapoja (2/4) Luokittelu valikon näkyvän esitystavan perusteella Erillinen valikko Sisäänrakennettu valikko (embedded menu): hypertekstisivulla tekstiin upotetut linkit ovat itse asiassa valikko 20 21 Valikoiden luokittelutapoja (3/4) Kontekstivalikot Luokittelu valikon käsittelytavan perusteella (hiirtä käytettäessä) Vetovalikko (pull-down menu) vrt. Macintosh ennen Pudotusvalikko (drop-down menu) vrt. Windows Pysyvä valikko, ns. paletti Repäisyvalikko (tear-off menu) Ponnahdusvalikko (pop-up menu) Huomaa: kaikki ylläolevat valikot avautuvat hiiren vasemmalla painikkeella Varo: termistö on häilyvää! hiiren oikeasta napista avautuva valikko voi olla englanniksi pop-up menu veto valikko = hiiren nappi pidetään pohjassa, pudotus valikko = klikataan otsikkoa, valikko aukeaa Windows: kohteeseen liittyvä ponnahdusvalikko 22 Termistö on häilyvää: Windows XP ja 2000 -oppaassa shortcut menu ja pop-up menu, Windows 7 oppaassa context menu Macintoshissa contextual menu otetaan käyttöön termi kontekstivalikko kuvaamaan tällaista valikkoa, joka saadaan esiin hiiren kakkosnapista ilman mitään näkyvää valikon merkkiä käyttöliittymässä Esiin ponnahtava kontekstivalikko ei vie tilaa on näkymättömissä vasta-alkajalle + nopea, sillä hiiriosoitin pysyy lähellä kohdetta (ainakin jos ponnahdusvalikko ei ole hierarkkinen!) Sisältö vaihtuu valitun kohteen ja ohjelman tilan mukaan + vähemmän vaihtoehtoja näkyvissä moodillisuus 23 Valikoiden luokittelutapoja (4/4) Vrt. Apple: pop-up menu Windows: Spin control Luokittelu valikon sisällön dynaamisuuden mukaan Staattinen, aina sama sisältö Dynaaminen Automaattisesti mukautuva valikko (kontekstista riippuva) joko kontekstivalikko eli hiiren kakkospainikkeella tai yksittäiseen kohteeseen liittyvät toiminnot Käyttäjän muunneltavissa oleva valikko Apple-ympäristössä termi Pop-up menu tarkoittaa valintalistaa, jossa nykyinen valinta on näkyvissä pysyvästi ja muut vaihtoehdot silloin kun lista on avoinna Windows-ympäristössä tämä on ns. spinkontrolli, suomeksi askellusruutu Apple-ympäristössä käytetään termiä contextual menu Kuinka se saadaan käyttöön jos hiiressä on vain yksi nappi? Windows : valikon sisältö riippuu kontekstista mutta valikon olemassaolo on haluttu tehdä näkyväksi 24 [Apple HIG] Contextual menu Action menu 25 Saila.Ovaska@uta.fi 4
Valikoiden suunnittelu VALIKOIDEN SUUNNITTELU Päävalikkotaso ja valikkohierarkia Valikon alkioiden nimeäminen Valinnan ilmentäminen Fitts law Keskeistä valikon suunnittelussa Valikkorakenne Valintojen nimeäminen Vaihtoehtojen ilmaiseminen (mikä valittuna) Vaihtoehtojen ryhmittely valikon sisällä Iterointi ja testaus käyttäjillä tärkeää Kuinka helppoa käyttäjien on löytää komennot valikosta? 26 27 Päävalikon suunnittelu Valikkorakenteen suunnittelu Yleensä järjestelmä määrää valikkopalkin sijoittelun Ikkunan yläreunassa sovelluskohtainen valikkopalkki (Windows) Yksi valikkopalkki näytön yläreunassa (Macintosh OS X) Valikkopalkin on mahduttava näyttöön Myös muille kielille käännettynä (englanti vs. suomi vs. saksa) Standardivalikot oikeille paikoilleen Valikkorakenteen syvyys ja leveys Kuinka paljon komentoja päävalikkotasolle? Kuinka monta tasoa? Valikoille yksisanaiset nimet Sopivien luokkien valinta ja komentojen sijoittelu luokkiin on vaikea tehtävä 29 Valikkorakenteen suunnittelu Valikkorakenteen suunnittelu Sijoitettava valikkoon 64 komentoa Miten? Montako valintaa käyttäjä tarvitsee? Havainnollistetaan valikkorakenteita puina Komento on puun latvasolmussa Binääripuu (valinnat K/E) x y 2 6 = 64 tarvitaan 6 valintaa 4x4x4-puu (joka tasolla 4 valintaa) z x y 4x4x4 = 64 tarvitaan 3 valintaa v 30 Tasojen määrän minimointi tehostaa käyttöä ja vähentää virheitä Alivalikoiden huonoja puolia Käyttäjän on vaikea päästä selville ohjelman mahdollisuuksista Hierarkiassa navigointi vaatii hyvää hiiren hallintaa Alivalikoiden hyviä puolia Tärkeimmistä komennoista on helpompi saada yleiskuva Alivalikossa on vähemmän komentoja, joten niille on helpompi määritellä yksikäsitteiset näppäimistökomennot (access key) 31 Saila.Ovaska@uta.fi 5
Valikkorakenteen suunnittelu Vaihtoehtojen nimeäminen Ohjeita: Enintään kaksi hierarkiatasoa (siis yksi alivalikko) Jos valikkopalkissa on tilaa, tee alivalikosta oma valikkonsa Esim. Windows 7 -ohjeissa päävalikossa enintään 10 Jos käyttäjä haluaa samalla muuttaa useita asetuksia alivalikosta, alivalikko voi olla myös oma dialogiikkunansa Käyttäjä voi silloin tehdä monta valintaa kerralla Ei hierarkkisia ponnahdusvalikoita! Lyhyet, mutta kuvaavat nimet Käytä käyttäjien kieltä Vaihtoehdon nimen tulee olla loogisesti liitettävissä kohteeseen Noudata yhtenäisyyttä Älä käytä eri sanaluokkien sanoja sekaisin Komennot ilmaistaan verbeillä Attribuuttien muutokset ilmaistaan adjektiiveilla Ei näin: Poista / Lisäys / Vaihda Jos komento vaatii lisäparametreja (avaa viestiruudun), sen nimen on päätyttävä kolmeen pisteeseen Esimerkiksi: Print... Window Create new Open... Close Tile Style Plain Bold Italic Underline Shadow 32 33 Vaihtoehtojen nimeäminen Vaihtoehtojen ilmaiseminen Komennon nimi voi vaihtua tilanteen mukaan Jos esimerkiksi valitaan komento Hide Grid, sen paikalle voi ilmestyä komento Show Grid Jos käänteinen vaihtoehto ei ole ilmeinen tai vaihtoehtoja on monta, on kaikki esitettävä ja valinta ilmaistava valintamerkillä Verbin eteen ei koskaan tule valintamerkkiä Grid on Grid off Full duplex Half duplex Show grid 34 35 Vaihtoehtojen ilmaiseminen Vaihtoehtojen ilmaiseminen Windows 95 [Apple Human Interface Guidelines] Windows 2000 Windows XP 36 37 Saila.Ovaska@uta.fi 6
Vaihtoehtojen ilmaiseminen? Vaihtoehtojen ryhmittely Komennot ja attribuutit eri ryhmiin Yhteenkuuluvat komennot ja attribuutit omiin ryhmiinsä Jos valikossa on attribuutteja, joista vain yksi voi olla valittuna, on attribuuteista muodostettava oma ryhmänsä Ei käänteiskomentoja vierekkäin Windows 95 Notepad help Save Exit (don t save) 38 39 Esimerkki ryhmittelystä Apple-ohjeet ryhmittelyyn Objects Rotate Left Rotate Right Flip Horizontal Flip Vertical Locked Unlocked Window New Window Zoom In Zoom Out Show Rulers Hide Tools Show Brushes 40 [Apple Human Interface Guidelines] 41 Kuvakkeita valikossa? Vaihtoehtojen järjestys valikossa Vaihtoehtoisia tapoja Numeeriset vaihtoehdot: nouseva tai laskeva järjestys Aakkosjärjestys Normaalisti eniten käytetyt vaihtoehdot ensin Tärkeimmät vaihtoehdot (=?) ensin Käyttäjän eniten käyttämät vaihtoehdot ensin Todennäköisin vaihtoehto ensin Kokemuksiin ja kokeisiin perustuvia suosituksia Jos vaihtoehdoilla luonnollinen järjestys, sitä tulee noudattaa Muuten: tavallisimmat vaihtoehdot ensin Vaihtoehtojen järjestyksen automaattista muuttamista tulee useimmiten välttää 42 43 Saila.Ovaska@uta.fi 7
Vaihtoehtojen järjestys: Apple ohjeet työkalupalkkiin Valikkorakenteiden suunnittelussa Fitts law eli Fittsin laki (1954) mitä kauempana oleva kohde ja mitä pienempi kohde sitä vaikeampi tehtävä ja sitä kauemmin menee kohteen osoittamiseen (sormella, hiirellä) Pätee tilanteisiin, joissa osoittamisliike tehdään nopeasti ja tavoitteena on osua tiettyyn kohteeseen Pätee muutenkin kuin valikkosuunnittelun yhteydessä! miksi käyttöliittymäsuunnittelussa? auttaa ennustamaan tehtävän kestoa ja virheiden määrää tietyssä käyttöliittymässä (ja siten edesauttaa esim. käyttöliittymien välistä vertailua) Havainnollistavia sivuja: http://ei.cs.vt.edu/~cs5724/g1/index.html http://www.asktog.com/columns/022designedtogivefitts.html [Apple Human Interface Guidelines] 44 45 Fitts law eli Fittsin laki Fittsin laki osoittamistehtävässä käden siirtämiseen kuluva aika Alkuperäinen muoto (Fitts, 1954): osoitusaika = C1 + C2 * vaikeus vaikeus = log 2 (2 * etäisyys / kohteen leveys) C1 ja C2 ovat laitteesta riippuvia vakioita Pienillä etäisyyksillä (esim. hiirtä käytettäessä) toimivampi kaava (Welford, 1968): vaikeus = log 2 (etäisyys / kohteen leveys + 0.5) Fitts, The Information Capacity of the Human Motor System in Controlling Amplitude of Movement. Journal of Experimental Psychology 47, 381-391. Miksi hyödyllinen käyttöliittymäsuunnittelussa? Auttaa ennustamaan tehtävän kestoa ja virheiden määrää tietyssä käyttöliittymässä ja tietyllä osoitinlaitteella Keskeinen opetus: kohteiden on oltava riittävän suuria, jotta työskentely olisi tehokasta kohteiden sijaittava siellä missä niitä tarvitaan 46 47 Fittsin laki valikkosuunnittelussa Ribbon eli valintanauha Jensen Harris (2006): Fitts law & Microsoftin tuotekehitys Start-valikon reunapikseli Vista: ikkunan yläpalkin pikapainikkeet Office 2007:n menupalkki, ns. Ribbon Suuremmat painikkeet Ponnahdusvalikon suunnittelu minibar, mini toolbar, nykyisin shortcut menu http://blogs.msdn.com/jensenh/archive/2006/08/22/711808.aspx 48 49 Saila.Ovaska@uta.fi 8
Yksi vai kaksi ulottuvuutta? Valikon ei tarvitse olla lineaarinen lista LISTA- JA PUURAKENTEET iphone Home screen -valikko http://www.apple.com/iphone/iphone-3gs/ 50 51 Valintalistat Listarakenne on valikon erikoistapaus Osana lomakkeita ja dialogeja Osana työkalupalkkeja, esim. fontin valinta Eroja: Pikahaku (type-ahead) joskus Tekstin syöttömahdollisuus joskus Monta valintaa joskus Valintalistat esimerkki Lineaarisen rakenteen organisointitapoja Kiinteä Laajeneva ja supistuva Moniosainen (multipane menu) Esimerkki: sisällysluettelon toteutustavat 52 http://dx.doi.org/10.1145/185462.185483 Richard Chimera, Three interfaces for browsing table of contents. University of Maryland, Human-Computer Interaction Laboratory, Open House'91. 53 Tree View Control Puunäkymäkontrolli: Windows Start-valikko Windows XP vs. Windows 7 Kummassakin valittuna All programs Hierarkia madallettuna [WindowsUserExperience] 54 55 Saila.Ovaska@uta.fi 9
Sarakeotsikkokontrolli: Windows Lista ja sarakkeet Windows 7:ssa Header Control, Column Heading Control Lajiteltavissa sarakkeiden mukaan Sarakkeen leveys säädeltävissä raahaamalla Tavoite: ei vaakavieritystä 56 57 Listan eri näkymät Macintosh: List view vs. column view Listanäkymä Sarakenäkymä (column view) Tiedostohierarkia tile view 58 59 Macintosh: Path control Syvän hakemistohierarkian muut tasot VALIKOIDEN MUKAUTUMINEN Apple Human Interface Guidelines 60 61 Saila.Ovaska@uta.fi 10
Valikon mukautuminen Valikon mukautuminen: Copy, Cut, Paste ja Undo Perussääntö: valikkokomento ei saa kadota näkyvistä vaikka sitä ei voikaan juuri tässä tilanteessa käyttää Jos komento ei ole sovellettavissa valittuun kohteeseen, sen tulee erottua muista (himmennys) Jos valikon mikään komento ei ole sovellettavissa valittuun kohteeseen, valikon tulee silti olla katseltavissa Valikkopalkin sisältöä ei pitäisi muutella muuta kuin korostuksin: käyttäjä voi muuten hämääntyä Seuraavilla kalvoilla on kuvattu eri tapoja mukauttaa valikon sisältöä Undo mukautuu: kertoo mitä peruutetaan (edellinen komento) Jokainen komento kuvaa nykyistä tilaa: joko mahdollinen tai ei mahdollinen valita (disabled) Kun tekstiä tai kuvaa ei ole valittuna, Cut ja Copy eivät ole käytettävissä Paste mahdollista vain jos jotain on leikepöydällä ei valintaa jotain valittuna 62 63 Valikon mukautuminen: Mac OS X Valikon mukautuminen: viimeksi käytetyt Most Recently Used (MRU) Listaus viimeksi avatuista tiedostoista, viimeksi käytetyistä ohjelmista, ym. [Apple HIG] kuvassa: Valittu teksti sisältää sekä kursivoitua että tummennettua tekstiä Osoitetaan viivoilla Format-valikossa 64 65 Word-tiedostojen MRU Valikon mukautuminen: split-valikko Word 2010 Ositettu valikko" Valikossa kaksi osaa: Useimmin käytetyt valikkokomennot Kiinteä osa (koko lista, myös useimmin käytetyt uudelleen) Kokeelliset tutkimukset kirjasintyypin valinnassa: ositetuilla valikoilla nopeutetaan valintaa 17-58% Word 2003 66 Andrew Sears, Ben Shneiderman, Split Menus: Effectively Using Selection Frequency to Organize Menus. ACM Transactions on Human-Computer Interaction 1, 1 (March 1994), 27-51. 67 Saila.Ovaska@uta.fi 11
Valikon mukautuminen: Windows 2000 Valintanauhakin mukautuu Valikossa alkuun vain peruskomennot Muut komennot saa näkyviin napsauttamalla alanuolta tai odottamalla Käytetty komento on seuraavalla kerralla näkyvä mutta poistuu ellei sitä käytetä Komentojen järjestys ei muutu vaikka joku komento puuttuukin välistä 68 69 Mukautus näppäimistön avulla [Apple HIG p. 107-8] Ohjeissa: dynaamista valikkoa ei näe se ei saa olla ainoa tapa saada toiminnallisuus käyttöön Modifier-näppäin Macintosh-näppäimistössä yleensä Command mutta joskus Control PIIRAKKAVALIKKO 70 71 Piirakkavalikko (pie menu) Text Font vetovalikko Size Kerning Very tight... Tight Normal Loose Very Loose Tighten Loosen Valinnat piirakan muotoisesti, ei lineaarisesti Font piirakkavalikko... Very Size tight Kerning Loosen Tighten Tight Normal Very Loose Loose Piirakkavalikot Etuja Kursoria täytyy liikuttaa vähemmän Suurempi aktivointialue Valintakohteen sijainnin muistettavuus Valinta vaikka silmät kiinni tai valikkoa näkemättä Kursori ajelehtii vähemmän Mahdollisuus käyttää sekä suuntaa että etäisyyttä valinnassa Ongelmia Valinnan herkkyys Persoonalliset tekijät (liikutus tasossa vs. liikutus suoralla) Kohde peittyy valikon alle http://www.open-video.org/details.php?videoid=713 J. Callahan, D. Hopkins, M. Weiser, B. Shneiderman, An empirical comparison of pie vs. linear menus. Proc. CHI'88, 95-100. 72 73 Saila.Ovaska@uta.fi 12
Valikkotesti: piirakka vai tavallinen? Suoritusnopeudet Kolme eriluonteista valikkoa toteutettiin sekä vetovalikkona että piirakkana piirakkaluonteinen valikko, esim. ilmansuunnat luetteloluonteinen valikko, esim. numeroarvot sekalainen valikko Vaihtoehtojen luonne piirakka luettelo sekalainen keskiarvo piirakka 2.20 2.18 2.40 2.26 vetovalikko 2.68 2.30 2.94 2.64 keskiarvo 2.44 2.24 2.67 J. Callahan, D. Hopkins, M. Weiser, B. Shneiderman, An empirical comparison of pie vs. linear menus. Proc. CHI'88, 95-100. 74 Yhden valinnan keskimääräinen aika (sekunteja) 75 Virheiden lukumäärä Esimerkki piirakkavalikosta Valikkotyyppi Valikkotyyppi Vaihtoehtojen luonne piirakka luettelo sekalainen keskiarvo Second Life piirakkavalikko piirakka 0.45 0.60 0.60 0.55 vetovalikko 0.88 0.73 1.24 0.95 keskiarvo 0.66 0.66 0.92 http://www.youtube.com/watch?v=arsqelckvey 76 77 Mozilla: piirakkavalikko Vertailukohtia Easy Gestures Valikon sisältö mukautuu kontekstin mukaan Valikko voi olla hierarkkinen Valinta on aina suora liikerata (stroke) Seuraavat kaksi esimerkkiä eivät ole piirakkavalikoita. Miten ne eroavat piirakkavalikoiden perusideasta? http://easygestures.mozdev.org/ 78 79 Saila.Ovaska@uta.fi 13
Snipping Tool (Windows XP) Zooming user interface: Prezi Tablet PC, kynäkäyttö, Windows XP Snipping Tool näytönkuvien ottamiseen Tukee näytönkuvan ottamista, annotoimista ja lähettämistä esim. sähköpostissa Työkalut puoliympyrässä, tehtäväpalkissa kiinni Wizardimainen työtapa Piirakkamainen muoto, muttei silti piirakkavalikko. Edut? (ei enää Windows 7:ssa tämän muotoinen ) 80 http://prezi.com/ 81 Nelikulmaisena sittenkin nopeampi? Nelikulmaiset valikot vrt. valintanauha (ribbon) Kun valikon käytössä otetaan huomioon muutakin kuin osoittamiseen kuluva aika (= Fitts law) Search, Decision and Pointing malli noviiseilla hakuvaiheessa kohteen etsimiseen kuluu aikaa, kokeneilla valikon käyttäjillä ei piirakkavalikon käyttö vaatii harjaannusta Ahlström et al., Why it's quick to be square: modelling new and existing hierarchical menu designs. Proc. CHI2010. ACM DOI. PIIRAKKAVALIKOSTA KOHTI MERKKAUSVALIKOITA JA ELEITÄ 82 83 Merkkausvalikko (marking menu) Merkkausvalikko on nopea Valikon aktivoitumista ja piirtymistä näkyviin ei tarvitse odottaa Valikon sisältöä ei tarvitse lukea Idea: kokeneen käyttäjän ei tarvitse odottaa valikon ilmestymistä Otetaan käyttäjän kynänpiirron mukainen kynänjälki talteen komentona Toimii paremmin jos käytetään kynää (tai sormea) kuin hiirtä http://www.billbuxton.com/mmexpert.html 84 Kurtenbach, G. & Buxton, W. (1994). User learning and performance with marking menus. Proc. of CHI '94, 258-264. http://www.billbuxton.com/mmuserlearn.html 85 Saila.Ovaska@uta.fi 14
Mozilla: piirakkavalikko vai hiirieleet? Valikko aina lähellä kursoria Easy Gestures Valikon sisältö mukautuu kontekstin mukaan Valikko voi olla hierarkkinen Valinta on aina suora liikerata (stroke) Vrt. hiirieleet ei näkyvää valikkoa ele pitää opetella ele ei ole aina suora liikerata kuin komentokieli? Operassa (kuva) esim. http://www.opera.com/products/desktop/mouse/ Firefox Lukuisia eri laajennoksia saatavilla lisää viikkoharjoituksissa Tracking Menu FItzmaurice et al., Tracking Menus. Proc. UIST 2003. ACM DOI. http://www.youtube.com/watch?v=nrif2gz2g_0&nr=1 PieCursor Fitzmaurice et al., PieCursor: merging pointing and command selection for rapid in-place tool switching. Proc. CHI2008. ACM DOI. http://www.youtube.com/watch?v=saiknailcsw 86 Lisää suorakäytön yhteydessä 87 Flow Menu Kynäkäyttöliittymä valkotaululla tai pienessä laitteessa; valikko esiin napinpainalluksella Keskellä lepoalue, komennot valikossa päivittyvät Koetuloksia: FlowMenu merkittävästi nopeampi kuin paletti Virheellisiä valintoja ~10%, käyttäjätyytyväisyydessä ei eroa http://hci.stanford.edu/research/flowmenu.html Yhteenveto: valikot Valikkojen suunnitteluun paljon ohjeita Organisointi ja ryhmittely Nimeäminen Ulkonäkö ja esitystapa Valintatapa Yhdenmukaisuus ja standardien noudattaminen tärkeää Zoomauksen säätö FlowMenulla http://www.open-video.org/details.php?videoid=8234 88 Näkyvyys ja valintojen nopeus kilpailevia tavoitteita Hiiren kulkema matka, valinnan helppous Lineaarinen vai piirakkamuoto, vai eleet,? 89 Saila.Ovaska@uta.fi 15