Käyttöliittymien perusteet

Transkriptio

1 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 sormella osoittamiseen liittyvät haasteet käyttöliittymäsuunnittelussa 1 2 Kuvakkeiden hyödyt Kuvakkeiden hyödyt Kuvakkeilla esitetään mm. sovelluksia, työkaluja, 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: Sharp, Rogers, Preece (2007), Interaction Design, Apple Human Interface Guidelines 5 6 Saila.Ovaska@uta.fi 1

2 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! Mullet & Sano (1995). Designing Visual Interfaces. 7 8 Kuvaketyypit Kuvakkeiden suunnittelun tavoitteita Välittömästi tunnistettavissa (immediacy) Kuvan on oltava helposti tunnistettavissa ensi vilkaisulla Kuvan huolellinen abstraktio 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ä Onnistunut luonnehdinta (characterization) Linkki esitystavan ja kohteen välillä syntyy kohteen tunnusomaisia piirteitä kuvaamalla Kommunikoivuus (communicability) esitystapa kommunikoi eli merkki tulkitaan samalla merkityssisällöllä kuin se on koodattu kommunikoivuus edellyttää lähettäjän ja vastaanottajan jaettua kontekstia 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] Saila.Ovaska@uta.fi 2

3 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] 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: 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

4 Kuvakkeet viestittämässä Kuvakkeet viestittämässä Työkalupalkissa osoitetaan kulloinkin valittuna oleva asetus esim. tasaustavoista kerralla vain yksi voi olla valittuna visuaalisin keinoin korostettu Kuvakkeen päälle voi ilmestyä tilatietoa [UXGuide] tärkeä kohde kuvakesuunnittelulle on hiiren kursoriin liittyvän palautteen suunnittelu suorakäyttöisessä järjestelmässä kursori reagoi kohteeseen viestii mahdollisuuksista kursori reagoi käyttäjän tekemiin valintoihin kursori antaa palautetta kun toiminto on käynnistynyt [UXGuide] Vrt. caret (lisäyskohta tekstissä) Yleensä hiiren kursori piilotetaan kirjoitettaessa, jottei se ole tiellä Osoitinlaite: miksi hiiri? HIIRI OSOITINLAITTEENA 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 empiirisin kokein nopeimpana osoitinlaitteena Engelbartin hiiressä rullat Apple kehitti myöhemmin pallon ja yksipainikkeisen hiiren 21 Kuvan lähde: 22 Kursori 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

5 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, 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

6 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 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ä Entä jos ei hiirtä? ENTÄ JOS EI HIIRTÄ VAAN SORMIN? Jos käytössä on hiiri, hiiren kursorin liike näytöllä on nähtävissä katse kohdistetaan näyttöön hiiren liikutus pöytäpinnalla hiiren liikerata yleensä pienempi kuin kursorin 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: yhtä epäsuora osoitus kuin hiirellä) Kosketus sormin kosketusnäytöt, tactile screens isoja ja pieniä laitteita Mitään hiiren kursorin kaltaista vinkkiä nykysijainnista ei ole näkyvillä joissain toteutustekniikoissa on mahdollista reagoida siihen, kun osoitukseen käytetty kynä tai sormi tulee lähelle näyttöpintaa yleensä kuitenkin näyttö reagoi vasta kosketukseen tai kosketuksen loppumiseen (kynän tai sormen irtoamiseen näytöltä)

7 Kosketusnäytöt Esimerkki 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, Vuorovaikutus kioskikäyttöliittymässä Walk up and use VR:n lippuautomaatti MTA New York Metro card vending machine ( 40 Kosketusnäyttöjen ongelmia Touch screen parallax 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 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 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 Touchscreenparallax

8 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... Howard Eglowstein, Keyboards without keys. BYTE July 1992, 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, Kosketusnäyttöjen kehittelyä Yhteenveto 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 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 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 Kuvan lähde: Plaisant & Wallace, Touchscreen toggle design, Proc. of CHI Saila.Ovaska@uta.fi 8