Tarjolla tänään WIMP-käyttöliittymät: kuvakkeet ja osoittaminen Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 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 1 2 Kuvakkeiden hyödyt 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 4 Kuvakkeet Kuvakkeiden kehityshistoria: mustavalkoisista värillisiksi, realistisuus, kolmiulotteisuus, animaatio MacWrite Mac OS 9: TextEdit Mac OS X: TextEdit Mac OS X document KUVAKKEIDEN SUUNNITTELUSTA Kuvien lähteet: http://www.d4.dion.ne.jp/~motohiko/index.htm, Sharp, Rogers, Preece (2007), Interaction Design, Apple Human Interface Guidelines 5 6 Saila.Ovaska@uta.fi 1
Merkki (sign) Kuvaketyypit 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 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 Mullet & Sano (1995). Designing Visual Interfaces. 7 8 Kuvaketyypit 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ö Kuvan lähde: Mullet & Sano (1995). Designing Visual Interfaces. 9 Lähde: Mullet & Sano (1995). Designing visual interfaces. 10 Kuvakkeesta logo & brändi KUVAKKEIDEN KÄYTTÖKOHTEITA Macintosh OS X: kahdenlaisia kuvakkeita. Ylärivissä yleisten sovellusten kuvakkeita (application icons), alarivissä hyötyohjelmien kuvakkeita (utility icons). [Apple HIG] 11 12 Saila.Ovaska@uta.fi 2
Kuvake sovellukselle ja kohteille 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) kuvakeperhe (Macintosh OS X) : itunes-sovelluksen ikoni esiintyy myös itunesiin liittyvien tiedostojen kuvakkeissa [Apple HIG] 13 14 Office-standardikuvakkeita Standardikuvakkeita: Windows Phone Tilapalkki (status bar) Windows XP:n työkalupalkissa käytetyt kuvakkeet. Kuvakkeet ovat symbolisia (esim. delete), analogisia (esim. cut), sekä samankaltaisia (esim. print ja save). 15 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 Kuvakkeet viestittämässä Kuvakkeet viestittämässä viestiruuduissa viestin yhteydessä käytetyt standardikuvakkeet viestivät ilmoituksen kriittisyydestä Footnote-alueella eri kuvake kertomassa mahdollisesta tietoturvariskistä Kuvakkeen käyttö dialogiikkunassa auttaa käyttäjää tunnistamaan tiedostotyypin, johon ilmoitus liittyy. [UXGuide] 17 [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 3
Kuvakkeet viestittämässä 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) 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ä 19 20 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 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ä ESIMERKKI: KALUSTUSOHJELMAN SUUNNITTELU 23 24 Saila.Ovaska@uta.fi 4
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? Kalusteiden sijoittelun haasteet Kalusteiden sijoitteluohjelman suunnittelu Oheislaitteena hiiri ja tavallinen monitori Vaihe 1: Ääneenajattelutesti vaahtomuovista tehtyjen miniatyyrien avulla 25 Stephanie Houde, Iterative design of an interface for easy 3-D direct manipulation. Proc. CHI 92, 135-142. 26 Havaintoja ja päätelmiä Ratkaisun kehittelyä 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 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 Ongelmia Ratkaisun kehittelyä Siirtyminen operaatiosta toiseen hankalaa Kädet joskus luonnottomassa asennossa, esimerkiksi: Kohteisiin lisättiin aktiivisia alueita Osoittimen osuessa aktiiviseen alueeseen osoitin muuttui operaation mukaiseksi kädeksi, jonka asento vaihteli kohteesta riippuen 29 30 Saila.Ovaska@uta.fi 5
Ratkaisun kehittelyä 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ä Kahvojen luonteva sijoittelu ratkeamaton ongelma Uusi ratkaisu: osoittimen osuessa kohteeseen se ympäröitiin säännöllisellä kehikolla Kahvat kiinnitettiin kehikkoon 31 32 Jäljelle jääneitä ongelmia Yhteenveto: hyödyllisiä piirteitä Pienten kohteiden kahvat olivat liian epäselviä Kahvat saattoivat jäädä muiden huonekalujen taakse piiloon Kahvojen törmääminen seinään? 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ä 33 34 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 6
Kosketusnäytöt Esimerkkejä kioskikäyttöliittymästä 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ä Idea Parkin opastetaulu 37 Kuvan lähde: Idea park: liikekaupungin uutiset, 3, 2007 38 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 VR:n lippuautomaatti 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 http://koyttoliittyma.wordpress.com/2011/10/04/testissa-vrn-uudistunut-lippuautomaatti/ (http://koyttoliittyma.wordpress.com/2010/01/15/vrn-uusi-lippuautomaatti-on-pettymys/) 41 Touchscreenparallax 42 Saila.Ovaska@uta.fi 7
Touch screen parallax Toteutustekniikoita 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 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.3m.com/3mtouchsystems/ 43 http://www.smarttech.com/dvit/ Howard Eglowstein, Keyboards without keys. BYTE July 1992, 287-290. 44 Valintatekniikoita sormikäyttöisissä kosketusnäytöissä Kosketusnäyttöjen kehittelyä 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ä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 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 8