WIMP-käyttöliittymät: kuvakkeet ja osoittaminen Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 1 Tarjolla tänään WIMP Windows, Icons, Menus, Pointing Device Kuvakkeet käyttöliittymässä Hiukan kuvakkeiden suunnittelusta Hiukan enemmän kuvakkeiden käytöstä eri tilanteissa Osoittaminen hiirellä, tikulla ja sormin hiirellä osoittamiseen liittyvä palaute kursorissa piirtotikun edut ja ongelmat sormella osoittamiseen liittyvät haasteet käyttöliittymäsuunnittelussa 2 Saila.Ovaska@uta.fi 1
Kuvakkeiden hyödyt Kuvakkeilla esitetään mm. sovelluksia, työkaluja (kuten viivan piirto), yksittäisiä operaatioita (kuten cut, paste) Oletuksena kuvakkeiden valinnalle tekstinimiöiden sijaan Kuvakkeet on helpompi oppia ja muistaa Ne ovat kompakteja Ne voidaan joustavasti asetella ruudulle Edellytyksenä ymmärrettävyys esim. abstrakteille prosesseille tekstimuotoinen nimike on parempi Hyvin suunniteltu kuvake on helposti tunnistettavissa oleva, informatiivinen ja esteettinen Mullet & Sano (1995) Designing visual interfaces. Rogers, Preece, Sharp (2007). Interaction design. 3 Kuvakkeiden hyödyt 4 Saila.Ovaska@uta.fi 2
Kuvakkeet Kuvakkeiden kehityshistoria: mustavalkoisista värillisiksi, realistisuus, kolmiulotteisuus, animaatio MacWrite Mac OS 9: TextEdit Mac OS X: TextEdit Mac OS X document Kuvien lähteet: http://www.d4.dion.ne.jp/~motohiko/index.htm, Sharp, Rogers, Preece (2007), Interaction Design, Apple Human Interface Guidelines 5 KUVAKKEIDEN SUUNNITTELUSTA 6 Saila.Ovaska@uta.fi 3
Merkki (sign) Peircen (1931) mukaan merkki on: Something that stands for someone or something in some respect or capacity. Merkityksenanto (Nadin 1989) Syntaksi Semantiikka Pragmatiikka O Object Representamen R I Interpretant Mullet & Sano (1995). Designing Visual Interfaces. 7 Kuvaketyypit Kuvake (icon) esittää käyttöliittymän kohdetta visuaalisella symbolilla Vrt. Earcons (käsitelty lyhyesti JoVuoT-kurssilla) Kytkentä representaation (R) ja sen edustaman kohteen (O) välillä voi olla Samankaltainen (esim. kansion kuva - kansio) Analoginen (esim. sakset leikkaa toiminto) Symbolinen (esim. X - delete) Käyttäjän on opittava yhteys Myös tulkitsija (I) vaikuttaa Kulttuurisidonnaisuus! Edit-valikko Powerpoint 2003 8 Saila.Ovaska@uta.fi 4
Kuvaketyypit Kuvan lähde: Mullet & Sano (1995). Designing Visual Interfaces. 9 Kuvakkeiden suunnittelun tavoitteita Kuvakkeen tulisi olla välittömästi tunnistettavissa (immediacy) Kuvan on oltava helposti tunnistettavissa ensi vilkaisulla Kuvan huolellinen abstraktio kohteen onnistunut luonnehdinta (characterization) Linkki esitystavan ja kohteen välillä syntyy kohteen tunnusomaisia piirteitä kuvaamalla Yleisyys (generality) Kuvakkeet yleensä edustavat tiettyä kohteiden luokkaa Yksittäisen kuvan kyky ilmentää ylätason ryhmään kuuluvuutta Yhtenäisyys muiden kuvakkeiden kanssa (cohesiveness) Kuvakkeet muodostavat kokonaisuuden, ja yksittäisten kuvakkeiden on toimittava tehokkaasti yhdessä ryhmänä Kommunikoivuus (communicability) esitystapa kommunikoi eli merkki tulkitaan samalla merkityssisällöllä kuin se on koodattu kommunikoivuus edellyttää sitä, että merkin suunnittelijalla ja vastaanottajalla on jaettu fyysinen, kulttuurinen ja käsitteellinen ympäristö Lähde: Mullet & Sano (1995). Designing visual interfaces. 10 Saila.Ovaska@uta.fi 5
KUVAKKEIDEN KÄYTTÖKOHTEITA 11 Kuvakkeesta logo & brändi Macintosh OS X: kahdenlaisia kuvakkeita. Ylärivissä yleisten sovellusten kuvakkeita (application icons), alarivissä hyötyohjelmien kuvakkeita (utility icons). [Apple HIG] 12 Saila.Ovaska@uta.fi 6
Kuvake sovellukselle ja kohteille kuvakeperhe (Macintosh OS X) : itunes-sovelluksen ikoni esiintyy myös itunesiin liittyvien tiedostojen kuvakkeissa [Apple HIG] 13 Kuvakkeet työkalurivillä kuvakkeet käytössä työkalun merkkinä Työkalurivillä on usein abstrakteja komentoja, joita on vaikea esittää kuvana ymmärrettävästi Esimerkiksi My Budget Sen sijaan esimerkiksi kuvankäsittelyohjelmissa kuvallinen esitystapa on usein toimiva, koska toiminnot liittyvät konkreettisesti kuvattavissa oleviin työkaluihin (moodit) 14 Saila.Ovaska@uta.fi 7
Office-standardikuvakkeita Windows XP:n työkalupalkissa käytetyt kuvakkeet. Kuvakkeet ovat symbolisia (esim. delete), analogisia (esim. cut), sekä samankaltaisia (esim. print ja save). 15 Standardikuvakkeita: Windows Phone Tilapalkki (status bar) Sovelluspalkki (application bar) Lisätietoa: User Experience Design Guidelines for Windows Phone Kuvat: http://msdn.microsoft.com/en-us/library/hh202884%28v=vs.92%29.aspx 16 Saila.Ovaska@uta.fi 8
Kuvakkeet viestittämässä viestiruuduissa viestin yhteydessä käytetyt standardikuvakkeet viestivät ilmoituksen kriittisyydestä Footnote-alueella eri kuvake kertomassa mahdollisesta tietoturvariskistä [UXGuide] 17 Kuvakkeet viestittämässä Kuvakkeen käyttö dialogiikkunassa auttaa käyttäjää tunnistamaan tiedostotyypin, johon ilmoitus liittyy. [UXGuide] Kuvakkeen käyttö dialogiikkunassa tai valikossa auttaa käyttäjää oppimaan kuvakkeen yhteyden toiminnallisuuteen. Kuvien lähde: Windows User Experience Interaction Guidelines 18 Saila.Ovaska@uta.fi 9
Kuvakkeet viestittämässä [UXGuide] Työkalupalkissa osoitetaan kulloinkin valittuna oleva asetus esim. tasaustavoista kerralla vain yksi voi olla valittuna visuaalisin keinoin korostettu Kuvakkeen päälle voi ilmestyä graafisesti esitettyä tilatietoa (ks. kuvat alla) ja sanallinen työkaluvinkki tai vihje (tooltip, infotip) 19 Kuvakkeet viestittämässä tärkeä kuvakesuunnittelun kohde on hiiren kursoriin liittyvän palautteen suunnittelu suorakäyttöisessä järjestelmässä kursori reagoi kohteeseen Kursorin muoto viestii mahdollisuuksista kursori reagoi käyttäjän tekemiin valintoihin valitun työkalun tehtävänmukainen kursorimuoto kursori antaa palautetta kun toiminto on käynnistynyt [UXGuide] Vrt. caret (lisäyskohta tekstissä) Yleensä hiiren kursori piilotetaan kirjoitettaessa, jottei se ole tiellä 20 Saila.Ovaska@uta.fi 10
HIIRI OSOITINLAITTEENA 21 Osoitinlaite: miksi hiiri? Graafisiin käyttöliittymiin tarvittiin osoitinlaitetta Ihmiset ovat vuosikymmeniä harjoitelleet kynän käyttöä Piirtäminen, kirjoittaminen, kynän käyttöön liittyvät taidot mutta pystyssä olevan näytön käyttäminen valokynällä ei ole ergonomista kuvassa Sketchpad (1963), josta puhutaan suorakäytön yhteydessä Doug Engelbart (1960-luvulla) kehitti ensimmäisen hiiren ja valitsi sen käyttöön empiirisin kokein nopeimpana osoitinlaitteena Engelbartin hiiressä rullat Apple kehitti myöhemmin pallon ja yksipainikkeisen hiiren, nyttemmin optisia hiiriä http://www.youtube.com/watch?v=1mpjz6m52di Kuvan lähde: http://www.ebcak.com/wp-content/uploads/2008/04/mouse2.jpg 22 Saila.Ovaska@uta.fi 11
Kursori erillään osoitinlaitteesta Hiiri-kursori-yhdistelmään liittyviä ongelmia Aloittelijoilla käsitemallin muodostuminen Kaikilta vaaditaan motorista harjaantumista hiirenkäyttöön Vaatii katseen kohdentamista valintaan Vaatii tarkkaa käsi-silmä-koordinaatiota (hand-eye coordination) vrt. Motoriikka (JoVuoT-kurssilla) Kursorin liikuttelu ja sillä osuminen haluttuun paikkaan Kursorin nopeus hiirtä liikutettaessa on säädeltävissä Mikä on kursorin aktiivinen alue, ns. hot spot Valinnan tekemistä helpotetaan kursoria ja valinnan toimintaperiaatetta kehittämällä Lisää suorakäytön yhteydessä 23 ESIMERKKI: KALUSTUSOHJELMAN SUUNNITTELU 24 Saila.Ovaska@uta.fi 12
Suoravaikutteisen käyttöliittymän suunnittelun haasteita Sopivan sanaston (eli kuvaston) valinta ikoniperustaisissa liittymissä Kuvakkeet toiminnoille Kohteen mahdollisuuksien (affordance) esittäminen käyttäjälle Hiiren kursoriin liitettävät kuvakkeet toiminnon eri vaiheissa ja niiden avulla annettava palaute Sopivien syötelaitteiden käyttö Montako nappia hiiressä pitäisi olla? Vai tarvitaanko hiirtä... Miten saada molemmat kädet käyttöön? 25 Kalusteiden sijoittelun haasteet Kalusteiden sijoitteluohjelman suunnittelu Oheislaitteena hiiri ja tavallinen monitori Vaihe 1: Ääneenajattelutesti vaahtomuovista tehtyjen miniatyyrien avulla Stephanie Houde, Iterative design of an interface for easy 3-D direct manipulation. Proc. CHI 92, 135-142. 26 Saila.Ovaska@uta.fi 13
Havaintoja ja päätelmiä Koehenkilöt liikuttelivat huonekaluja hyvin eri tavoin Tavallisimmat operaatiot olivat huonekalun työntäminen, nostaminen ja kääntäminen Suunnittelutavoitteet: Helppo ja luonteva siirtyminen operaatiosta toiseen Kohteiden tulee käyttäytyä kuten todellisten kohteiden Käyttöliittymän tulee olla helposti erilaisten käyttäjien omaksuttavissa Suurin ongelma: kolmiulotteisten operaatioiden toteuttaminen kaksiulotteisen liittymän avulla 27 Ratkaisun kehittelyä Ihmiset käyttävät siirtämiseen ja liikutteluun käsiään Ensimmäinen idea: käytetään eri operaatioissa eri asennossa olevia käsiä, jotka toimivat osoittimina Operaatio valitaan työkalupaletista, ja osoittimen ulkonäkö muuttuu sen osuessa kohteeseen Valmis, perustila työntö nosto kierto 28 Saila.Ovaska@uta.fi 14
Ongelmia Siirtyminen operaatiosta toiseen hankalaa Kädet joskus luonnottomassa asennossa, esimerkiksi: 29 Ratkaisun kehittelyä Kohteisiin lisättiin aktiivisia alueita Osoittimen osuessa aktiiviseen alueeseen osoitin muuttui operaation mukaiseksi kädeksi, jonka asento vaihteli kohteesta riippuen 30 Saila.Ovaska@uta.fi 15
Ratkaisun kehittelyä Ongelma: käyttäjät eivät löytäneet aktiivisia alueita Uusi ratkaisu: osoittimen osuessa kohteeseen aktiivisiin alueisiin ilmestyi kädenmuotoinen kahva Kahvaan voitiin tarttua hiirellä 31 Ratkaisun kehittelyä Kahvojen luonteva sijoittelu ratkeamaton ongelma Uusi ratkaisu: osoittimen osuessa kohteeseen se ympäröitiin säännöllisellä kehikolla Kahvat kiinnitettiin kehikkoon 32 Saila.Ovaska@uta.fi 16
Jäljelle jääneitä ongelmia Pienten kohteiden kahvat olivat liian epäselviä Kahvat saattoivat jäädä muiden huonekalujen taakse piiloon Kahvojen törmääminen seinään? 33 Yhteenveto: hyödyllisiä piirteitä Kehikko auttoi yhtenäistämään erimuotoisten kohteiden käsittelyä Ohjainten sijoittaminen suoraan kehikon aktiivisiin kohtiin Tekee käyttöliittymästä intuitiivisemman Helpottaa joustavia siirtymiä operaatioiden välillä Ohjainten muoto ja sijainti kertoo käyttäjälle, mitä niillä voi tehdä Yhteyssidonnaiset rajoitukset estävät mahdottomat toiminnot Taulua ei voi kiertää Tuolia ei voi kaataa selälleen Auttaa tulkitsemaan hiiren liikuttamisen merkitystä 34 Saila.Ovaska@uta.fi 17
ENTÄ JOS EI HIIRTÄ VAAN SORMIN? 35 hiiren liikutus TAUCHI Tampere pöytäpinnalla Unit for Computer-Human Interaction hiiren liikerata yleensä pienempi kuin kursorin Entä jos ei hiirtä? liikerata Mutta: hiiren käyttö on aina epäsuoraa Kosketus kynän avulla suoraan näyttöpinnalla käytössä piirtotikku (vrt. piirrostabletti erillisenä oheislaitteena tai kannettavan tietokoneen kosketuslevy: yhtä epäsuora osoitus kuin hiirellä) Kosketus sormin suoraan näyttöpinnalla kosketusnäytöt, tactile screens (monia eri toteutustekniikoita) isoja ja pieniä laitteita, vaaka- ja pystypintoja Mitään hiiren kursorin kaltaista vinkkiä nykysijainnista ei ole näkyvillä 36 Saila.Ovaska@uta.fi 18
Kosketusnäytöt Yleisiä tiloissa tai koneissa, joissa irrallinen näppäimistö ja hiiri ei kestä/toimi, ja liikkuvassa tietojenkäsittelyssä Käyttökohteita: infopisteet (kioskit) lippu- tms. automaatit digitaaliset pöytäpinnat pienet laitteet Kosketusnäytön etuja Helppo oppia Ei tarvita tilaa oheislaitteille Ei lisäosia Käyttäjät yleensä tyytyväisiä 37 Esimerkkejä kioskikäyttöliittymästä Idea Parkin opastetaulu Kuvan lähde: Idea park: liikekaupungin uutiset, 3, 2007 38 Saila.Ovaska@uta.fi 19
Vuorovaikutus kioskikäyttöliittymässä Walk up and use MTA New York Metro card vending machine http://www.antennadesign.com/ 39 http://www.antennadesign.com/ oikealla: MTA/NYCT On the go! Travel Station. September, 2011 http://www.mta.info/news/stories/?story=389 40 Saila.Ovaska@uta.fi 20
VR:n lippuautomaatti http://koyttoliittyma.wordpress.com/2011/10/04/testissa-vrn-uudistunut-lippuautomaatti/ (http://koyttoliittyma.wordpress.com/2010/01/15/vrn-uusi-lippuautomaatti-on-pettymys/) 41 Kosketusnäyttöjen ongelmia Sormella on vaikea osoittaa tarkasti Sormi ja käsi peittää osan kohteesta Käsi väsyy, jos käyttötilanne kestää pitkään Ruutu voi likaantua Hiiren painikkeen napsauttamisesta tulee palaute (kun painike painuu alas), normaalisti kosketusnäytöllä ei itsessään ole vastaavaa tuntopalautetta Katse on kohdistettava näyttöön Touch screen parallax 42 Saila.Ovaska@uta.fi 21
Touch screen parallax Kioskikäyttöliittymissä on parallax-ongelma: kohde näyttää olevan eri kohdassa kuin onkaan Toteutusteknologia vaikuttaa siihen, miten vaikea parallax-ongelma on Yksi ratkaisu: aktivointialuetta myös painikkeen ulkopuolelle http://www.3m.com/3mtouchsystems/ 43 Toteutustekniikoita Tunnistetaan x ja y sekä joskus z (paine) Erilaisia toteutustekniikoita: Lasin pinnalla erityinen kalvo: paineen tunnistus, sähköiset menetelmät Ruudun ylittävä ristikko, ruudun reunuksessa lähetin / vastaanotinpareja: infrapunavaloon tai ääniaaltoihin perustuvat tekniikat Kameroihin perustuva tekniikka... http://www.smarttech.com/dvit/ Howard Eglowstein, Keyboards without keys. BYTE July 1992, 287-290. 44 Saila.Ovaska@uta.fi 22
Valintatekniikoita sormikäyttöisissä kosketusnäytöissä Land-on Kursori sormen alla Vain ensimmäinen kosketus merkitsevä Valinta tapahtuu, jos kohteeseen osutaan Sormen siirrolla ei merkitystä First-contact Kuten land-on, mutta sormea voi siirtää näytöllä; ensimmäinen kohde, johon osutaan, tulee valituksi Take-off (tai lift-off) Näytöltä tulevaa tietoa seurataan, kunnes sormi nostetaan Jos sormi on tällöin jonkin kohteen kohdalla, se tulee valituksi Kursori jonkin verran sormen yläpuolella (offset cursor) Richard Potter, Linda Weldon and Ben Shneiderman, Improving the accuracy of touch screens: An experimental evaluation of three strategies. Proc. CHI'88, 27-32. 45 Kosketusnäyttöjen kehittelyä Kosketusnäytöllä kohteeseen osuminen on todettu virhealttiiksi Näytöt suunniteltava erityisesti kosketusnäyttöä varten Kohteet tarpeeksi isoja ja etäällä toisistaan Kohteen ympärilläkin aktivointialuetta Painikkeiden minimikoko? Valintatekniikat pieniin kohteisiin Valintakontrollien suunnittelu Palautetta käyttäjälle! Elekomennot ei näkyvää kohdetta myöhemmissä luennoissa http://www.channel4.com/news/apple-touch-screen-patent-war-comes-to-the-uk Kuvan lähde: Plaisant & Wallace, Touchscreen toggle design, Proc. of CHI 92 46 Saila.Ovaska@uta.fi 23
Yhteenveto Kuvakkeita käytetään sekä kohteille, tiloille että toiminnoille visuaalinen suunnittelu tärkeää, jotta kommunikoi käyttäjän kannalta kuvakkeiden tavoitteena tukea oikean käsitemallin muodostusta ja sujuvaa käyttöä vrt. toimeenpanon kuilu ja arvioinnin kuilu (Norman; kertaa JoVuoT-kurssilta) Hiiren historia alkoi 1960-luvulta (Engelbart) Vasta viime vuosien aikana kosketusnäytöt ovat näkyvästi syrjäyttämässä hiirtä sormin käytettävien kosketusnäyttöjen suunnittelussa ja niillä käytettävissä valintatekniikoissa on otettava huomioon sormen koko ja peittävyys 47 Saila.Ovaska@uta.fi 24