Dialogin suunnittelu WIMP-käyttöliittymissä Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 1 Tarjolla tänään Dialogi-termi yleisesti HCI:ssä Ihmisen ja tietokoneen välistä vuoropuhelua patterns of interactions between the user and a system Dix et al. Ch. 5.6 & Ch. 16 WIMP-ympäristössä dialogiruudut valintaikkunat ja viestiruudut Dialogien suunnittelun perusteita Myös virheilmoitusten osalta Design for error Sanastovinkkejä: Windows-termien käännöksiä http://www.microsoft.com/language/en-us/search.aspx TEPA-termipankki http://www.tsk.fi/tepa 2 Saila.Ovaska@cs.uta.fi 1
Lomakekäyttöliittymät JoVuoT-kurssilla esiteltiin lomakekäyttöliittymät (form fill-in) lomakkeita on webissä, kaikissa GUI-käyttöliittymätyypeissä ja myös paperisina GUI-maailmassa lomakkeita on etenkin dialogiruuduissa tänään järjestelmäkohtaiset standardit ja tyylit Yksittäinen viestiruutu on vain osa dialogia Edelleenkin kuitenkin pätee JoVuoT-kurssilla opittu: (lomakkeen) suunnittelussa painottuvat keinot helpottaa käyttäjän työtä osien järjestyksen määrää käyttäjän tehtävä nimiökenttien suunnittelussa tulisi noudattaa käyttäjän käsitteitä oikeiden kontrollien käyttö helpottaa käyttäjän tehtävää visuaalisen suunnittelun periaatteet tärkeitä 3 DIALOGI IHMISEN JA TIETOKONEEN VÄLILLÄ 4 Saila.Ovaska@cs.uta.fi 2
Mitä on dialogi? Dialogi käyttöliittymässä on vähän kuin vihkikaava Sama kysymysten järjestys ja muoto, mutta esim. henkilöiden nimet pitää muistaa laittaa oikeiksi käyttäjällä yleensä valinnan varaa missä vaiheessa mitäkin tekee eli vihkikaava ja siihen tehdyt tilannekohtaiset asetukset vain silloin kun se on ajankohtaista käyttäjän tehtävän kannalta 5 Mitä on dialogi? Keskustelutyylit vaikuttavat siihen, millainen dialogi muodostuu esim. suorakäytössä dialogi on hienovaraisempaa: muutokset tapahtuvat kuvakkeiden valinnan, hiiren raahauksen ja ruudulla näkyvän palautteen avulla; palataan siihen suorakäytön yhteydessä WIMP-järjestelmissä dialogi konkretisoituu valikoiden ja ali-ikkunoissa olevan toiminnallisuuden avulla Print valikosta avautuu Print-dialogiruutu OK tulostuu Suunnitteluvaiheessa dialogia voi kuvata kaavioilla tai tekstinä: 6 Saila.Ovaska@cs.uta.fi 3
Esim. viestisovellus WIMP-ympäristössä Toiminnallisuus kuvattuna hierarkkisesti Järjestelmä Opastus Käyttäjähallinta Viestien hallinta Lisää käyttäjä Poista käyttäjä Suomennettu lähteestä: Dix et al. (2004). Human-Computer Interaction, kuva 5.6 7 ja kuvattuna dialogimallina Edellisen kuvan keskihaaran toiminnallisuuden toteuttavat Lisää käyttäjä ja Poista käyttäjä -dialogit; Poistaminen tulee varmistaa Varmista-dialogi Pääikkuna Poista käyttäjä Varmista Lisää käyttäjä Erilaisia kuvaustekniikoita on paljon (Dix et al. Ch. 16) Suomennettu lähteestä: Dix et al. (2004). Human-Computer Interaction, kuva 5.7 8 Saila.Ovaska@cs.uta.fi 4
Mitä on dialogi? Dialogina kuvataan se miten jokin tehtävä järjestelmässä tehdään leksikaalisella tasolla (millaisia kuvakkeita ja valikoita, miten niitä valitaan hiiren avulla, millaisia hiiren operaatioita on ylipäätään olemassa) syntaktisella tasolla (mitkä syötteet ja tulosteet JA millaisessa järjestyksessä) semanttisella tasolla (mitä eri syötteistä tapahtuu esim. tietokannoille) esim. edellisessä esimerkissä ei otettu kantaa sille, varmistetaanko vai peruutetaanko käyttäjän poisto Dialogin kuvaus on tyypillisesti vuorovaikutuksen syntaksin kuvauksen tasolla 9 eikä niitä käsitellä tällä kurssilla muuten kuin esimerkkeinä: Dix et al. Ch. 16 tilasiirtymäkaavioita Valikkorakenne Ympyrän ja kuminauhaviivan piirto select 'circle' Erilaisia kuvaustekniikoita paljon Main Menu select graphics select text select paint click on click on centre circumference Circle 1 Circle 2 Finish rubber band draw circle Graphics Submenu Text Submenu Paint Submenu Start Menu select 'line' click on first point double click Line 1 Line 2 Finish rubber band draw last line click on point draw a line 10 Saila.Ovaska@cs.uta.fi 5
DIALOGIRUUTUJEN TERMISTÖÄ 11 Dialogeihin liittyvät termit Dialog (Apple OSXHIG] dialog box (UXGuide] Valintaikkuna (Windows-käännös) Viestiruutu, sanomaikkuna (Atk-sanakirja) Dialogiruutu (ui-kurssin yleisnimitys niille kaikille) Valintaikkunassa GUI-käyttöliittymässä käyttäjältä odotetaan syötettä suorituksen etenemiseksi Valinnat Komentopainikkeet Esim. Print-valintaikkuna 12 Saila.Ovaska@cs.uta.fi 6
Dialogit: Macintosh Hälytys (alert) termistö on häilyvää: Alert voidaan kääntää hälytys, varoitus ja ilmoitus (kaikki Microsoft) tietääkö joku virallisen Apple-käännöksen? Kuvien lähde: Apple Human Interface Guidelines Moodillinen dialogi (sheet, document modal dialogue) 13 Viestiruutu: Vista & Windows 7 Consider making modeless dialog boxes dockable Kuvien lähde: Windows User Experience Interaction Guidelines 14 Saila.Ovaska@cs.uta.fi 7
Dialogiruutu voi olla oma moodinsa Dialogi-ikkunoiden moodillisuus Mooditon ikkuna Käyttäjä voi muuttaa asetuksia ja samalla jatkaa työskentelyään dokumentti-ikkunassa Esim. Etsi-dialogit Dialogi voi olla moodillinen tietyn dokumentin sisällä (document-modal), jolloin muita dokumentteja voi käyttää samalla tai tietyn ohjelman sisällä (application-modal) esim. Avaa-dialogi 15 Esimerkkejä WWW-sivujen modaalidialogeista Kuvien lähde: http://patterntap.com/ 16 Saila.Ovaska@cs.uta.fi 8
Viesti-ikkunoiden suunnittelu 17 Virheilmoituksetkin ovat dialogeja Message box Viestiruutu 18 Saila.Ovaska@cs.uta.fi 9
Viestejä tietokoneeltasi 19 Käyttäjän huomion kiinnittämiseksi: erilaisia Alert-ikkunoita HUOMAA viestiruudun layout: - ei vasemman yläreunan painikkeita - ei otsikkoa, mutta harmaa yläpalkki -TAI lakana dokumentti-ikkunan päällä Tilanteiden välinen ero: oikeanpuoleiset viestit liittyvät vain My document -tiedostoon toteutetaan lakanana Muut Alert-dialogit ovat tyyliltään Application modal. Alert-ikkunan kuvake voi olla räätälöity: yhdistetty varoittava symboli ilmoituksen antavan ohjelman omaan logoon. Tavallisempaa (ja suositeltavampaa) on kuitenkin käyttää vain omaa logoa kuten oikeanpuoleisessa yläikkunassa. 20 Saila.Ovaska@cs.uta.fi 10
Viestisisällön suunnittelu [Apple HIG, 2010] Viesti-ilmoituksen sisältö kuvaa selkeästi Mikä ilmoitus Mikä aiheutti ilmoituksen Mitä käyttäjä voi tehdä asialle Käyttäjän ymmärtämällä sanastolla ilmaistuna HYVÄ ILMOITUS 21 Macintosh: Finder alert [Apple HIG, 2011] 22 Saila.Ovaska@cs.uta.fi 11
Viestiruutujen ohjeistus Windows 3.1 Windows 3.1. Entä uudemmissa Windows-versioissa? 23 Windows 95 Viestiruutujen ohjeistus Windows 95 tiedoksi, information ei enää käytössä varoitus, warning kriittinen, critical 24 Saila.Ovaska@cs.uta.fi 12
Viestiruudun symbolit Windows 2000 & XP Informaatio (information) Tarjoaa tietoa komennon lopputuloksista OK käyttäjällä ei valinnan mahdollisuutta Varoitus (warning) Hälyttää tilanteesta, joka vaatii käyttäjän päätöstä ja syötettä ennen etenemistä Kyllä/Ei, OK/Peruuta, Kyllä/Ei/Peruuta Kriittinen (critical) Ilmoittaa vakavasta ongelmasta, joka vaatii käyttäjän väliintuloa 25 Viestiruudun symbolit: Windows 7 Virheilmoitus (virheestä joka on tapahtunut; estää käyttäjän etenemisen) Varoitus (mahdollista, että virhe tapahtuu) Hyödyllistä informaatiota tarjolla Lisäksi Windows-standardikuvakkeisiin kuuluu: Opastusta tarjolla Huomaa Windows 7 -muutos aikaisempiin ohjeistoihin: kaikissa viestiruuduissa ei tarvita kuvaketta ollenkaan Ongelman vakavuus kuvake tarpeellinen? 26 Saila.Ovaska@cs.uta.fi 13
Viestiruudun sanoma Sama asia voidaan viestiä käyttäjälle Jo tapahtuneena virheenä Varoituksena Informaationa käyttäjälle Suunnittele viestin muotoilu ja valitse siihen kuuluva kuvake sen mukaan, miten vaikeasta ongelmasta on kyse: jos se estää jatkamasta, anna virheilmoitus, muuten varoita. [UXGuide p. 359] 27 Viesti-ikkunan tyypit ja osat Virheilmoitus Varoitus Vahvistus (Confirmation) 28 Saila.Ovaska@cs.uta.fi 14
Viesti-ikkunan osat Vahvistus (Confirmation) Ei kuvakkeita kun rutiinivahvistus Varoitus ohjelman oman kuvakkeen päällä varoituskuvake Varoitus ohjelman oma kuvake varoituskuvake 29 Yhteenveto: viestiruutujen tarkoitus Viesti erillisenä modaalisena ikkunana Ikkunan otsikkopalkin pitäisi kertoa, mistä ohjelmasta viesti on aiheutunut Itse viestin pitäisi olla yksinkertainen, mutta samalla tarpeeksi informatiivinen kokonaiset lauseet, käyttäjän ymmärtämä terminologia; Windows tone eli sävy ei saa olla käyttäjää syyllistävä! Kerro mikä ongelma + aiheuttaja (jos tiedetään) + ratkaisu eli käyttäjän mahdollisuudet ratkaisu esitettävä etenemisjärjestyksessä Lisätietoa (progressive disclosure), linkki opastukseen [UX Guide p. 342] 30 Saila.Ovaska@cs.uta.fi 15
Viestejä annetaan muuallakin kuin modaalisissa dialogi-ikkunoissa Balloon eli suomeksi Selite Ruudun alareunassa ilmoitusalueella Syötekentän yhteydessä lomakkeella [UXGuide p. 362] 31 2. Viesti voi Ilmoitukset olla luonteeltaan myös ilmoitus (notification) Ohjelma, joka ei tällä hetkellä ole käyttäjällä avoinna ilmoituksilla on erilaisia kriittisyyden asteita millainen tapa viestiä on mielekäs: 1. 3. 32 Saila.Ovaska@cs.uta.fi 16
Ilmoitus lähellä virhettä! [UXGuide, Balloons p.38] [In-place Messages p.32] 33 Komentopainikkeiden suunnittelu 34 Saila.Ovaska@cs.uta.fi 17
Komentopainikkeet Komentopainike on kontrolli, jonka painamisesta sovellus suorittaa jonkin toiminnon Esim. tietojen tallennus tai toiminnon peruuttaminen tyypillisesti dialogiruutu suljetaan kumman tahansa painalluksesta, mutta semantiikka on erilainen myös sellaisia painikkeita voi olla, jotka eivät sulje dialogia (edellä käsitelty progressive disclosure ) Ellipses 35 Komentopainikkeet [Apple HIG] GUI-tyyliohjeissa on säädelty tapauskohtaisesti, mitä painikkeita käytetään toiminnan käynnistyminen ( commit button ) muut komentopainikkeet opastus webissä säännöt häilyviä esim. Reset-painikkeen ( Tyhjennä ) tarpeellisuudesta kiistellään 36 Saila.Ovaska@cs.uta.fi 18
Komentopainikkeet Perusohje: komentopainiketta on napautettava jotta edetään Myös Enter-näppäimen painaminen voi käynnistää toiminnon Esimerkiksi hakukoneessa järkevää Itse asiassa selainohjelman yläpalkissa hakukomennossa ei edes ole komentopainiketta tekstikentän yhteydessä Huomaa: Monta syötekenttää sisältävissä lomakkeissa toiminnon tulee käynnistyä vasta käyttäjän painettua siihen tarkoitettua komentopainiketta, ei Enterin painalluksesta Virheiden estäminen! Ellei sitten oletuspainike (ks. seuraava kalvo) 37 Oletuspainikkeet Yksi komentopainikkeista voi erottua muista ulkonäöltään jo ennen kuin käyttäjä on aloittanut lomakkeen täytön vrt. kulloinkin fokuksessa oleva kontrolli Käyttökelpoinen etenkin varmoissa tilanteissa esim. Print-dialogissa perusasetukset jo olemassa jos viestiruudussa ei ole syötekenttiä, oletuspainike voi tulla valituksi pelkällä Enterillä Huomaa: Oletukset eivät saa olla käyttäjän kannalta vahingollisia! 38 Saila.Ovaska@cs.uta.fi 19
Valintadialogien painikesuunnittelu Komentopainikkeiden sijoittelu [Apple HIG] Windows: Alas vaakariviin oikealle Tärkein komentopainike ensimmäiseksi, oletuspainike Jos lomakkeessa on OK ja Cancel, ne on pidettävä yhdessä 39 Painikkeiden nimeäminen Painikkeen nimen tulisi olla looginen ja yksikäsitteinen vastaus dialogin kysymykseen Kuvien esimerkissä kyllä ja ei käy, mutta tarkempi painikkeiden nimeäminen on vielä parempi Estä virheet mutta älä pakota lukemaan [UXGuide] KUVAAVASTI NIMETYT 40 Saila.Ovaska@cs.uta.fi 20
Komennot linkkeinä eikä painikkeissa 41 VÄLILEHDELLISET DIALOGIT 42 Saila.Ovaska@cs.uta.fi 21
Houkuttaisiko täyttämään? Vista UE 43 Välilehdelliset dialogit Välilehdellinen dialogi (tabbed dialogue) Koostuu useista välilehdistä, joilla jokaisella useita valintoja Esim. Ominaisuudet- tai Asetukset-dialogit Valinnat ryhmitelty loogisiin kokonaisuuksiin eri välilehdille 44 Saila.Ovaska@cs.uta.fi 22
Vista: property windows Vaakatasoon asettelu ok, jos - Enemmän kuin 8 välilehteä ja - Vaaka-asettelua käytetään muuallakin 45 Painikkeet ja niiden vaikutusalue 46 Saila.Ovaska@cs.uta.fi 23
Macintosh: Preferences [Mac OSX HIG p. 80] [Mac OSX HIG p. 21] 47 PERUSKONTROLLIT LOMAKKEILLA (osin kertausta JoVuoT-kurssilta) 48 Saila.Ovaska@cs.uta.fi 24
Lomakkeet Lomakkeiden peruselementtejä Tekstikentät Nimiökentät Valintojen tekeminen Valintaruudut Valintapainikkeet Valintalistat Komentopainikkeet Lisäksi mietittävä Pakollisten kenttien ilmaisu Lomakkeella eteneminen Vrt. [Mac OS X] 49 Valintojen tekeminen Radiopainikkeet Vaihtoehtojen joukosta voi valita vain yhden Toisensa poissulkevat vaihtoehdot Oletusarvo valittuna tai ei Valintaruudut Vaihtoehdoista voi tehdä yhden tai useamman valinnan Valinnat eivät riipu toisistaan Huomaa järjestys: ensin kontrolli, sitten siihen liittyvä teksti! 50 Saila.Ovaska@cs.uta.fi 25
Valintojen suunnitteluohjeita Esitä valintapainikkeet ja -ruudut mieluummin allekkain kuin vierekkäin Visuaalinen hahmo auttaa ymmärtämään kokonaisuutta Kontrollien ryhmän tulee toimia loogisesti eli vaihtoehtojen tulee olla "saman tasoisia" Käytä valintalistaa, jos vaihtoehtoja on enemmän kuin 5 Valintapainikkeet ja -ruudut on tarkoitettu tietojen syöttöön, ei toimintojen käynnistämiseen tai tulosteiden esittämiseen 51 Valintojen tekeminen Valintalistat Usein tilanteissa, joissa valitaan vain yksi vaihtoehto Valittu vaihtoehto jää näkyviin Vie vähemmän tilaa kuin radiopainikkeet, mutta vaihtoehdot eivät ole näkyvillä Listan käyttö on altista virheille jos fokus vahingossa jää listaan, vieritys rullahiirellä vierittää listan sisältöä eikä käyttäjä välttämättä huomaa arvon vaihtumista 52 Saila.Ovaska@cs.uta.fi 26
Valintalistat Listatyyppinen valinta voidaan toteuttaa eri tavoilla Perusvalintalista Montako alkiota kerralla näkyvissä? Useamman valinnan tekeminen joskus mahdollista (esim. Ctrl-näppäimen avulla; käyttäjälle kuitenkin piilossa olevaa toiminnallisuutta!) Vrt. esimerkkitoteutus monen valinnan toteutuksesta verkkosivulla http://theresaneil.files.wordpress.com/2011/05/harvest_multiselect2.png 53 Valintalistat Yhdistelmäruutu (combo box) Tekstikentän ja valintalistan yhdistelmä Uuden vaihtoehdon syöttömahdollisuus tai valinta annetuista Tavallinen ja avattava (drop-down combo box) Valinta tapahtuu Enterpainikkeesta 54 Saila.Ovaska@cs.uta.fi 27
Listojen suunnittelu Ota huomioon aloittelevat ja kokeneemmat käyttäjät Aloittelijaa auttaa listan vieritysmahdollisuus Mutta vieritys ei ole tehokasta Näppäimistöoikotiet Kirjoitusmahdollisuus kenttään (ns. drop down combo box) Ei ole syytä miksi listan otsikko olisi yhtenä alkiona listassa otsikko ei valittavissa listaan tulisi laittaa vain alkioita, joista voidaan valita tyhjä kenttä viestii käyttäjälle paremmin kuin täytetty 55 Pakolliset kentät lomakkeessa Miten ilmaistaan käyttäjälle lomakkeen pakolliset kentät? 0. Ei sisällytetä lomakkeeseen vapaaehtoisia kenttiä 1. Ei mitenkään, vaan annetaan virheilmoitus, jos käyttäjä jättää ne täyttämättä viikkoharjoituksena 56 Saila.Ovaska@cs.uta.fi 28
YHTEENVETO 57 Asetteluohjeita [Apple HIG] 58 Saila.Ovaska@cs.uta.fi 29
Lomakkeella eteneminen Tyypillisesti Hiiren avulla Näppäimistön avulla Sarkainnäppäimellä (tabulaattori) kontrollien järjestys järkeväksi Nuolinäppäimillä Kenttä- ja painikekohtaiset näppäimistöoikotiet asetettava Standard keyboard shortcuts (esim. Enter ja ESC) Access Keys» Kentän nimeen liittyvä näppäimistöoikotie 59 Suunnitteluohjeita lomakkeille Otsikoi lomake mielekkäästi Anna ymmärrettävät täyttöohjeet Ryhmittele ja järjestä kentät loogiseen järjestykseen Tee asettelu silmää miellyttäväksi Käytä tuttuja nimiökenttiä Käytä termejä johdonmukaisesti Jätä tyhjää tilaa kenttien erottimeksi Tee kohdistimen liikkuminen kentästä toiseen helpoksi Salli virheiden korjaus yksittäisille merkeille ja koko kentille Tee järkevyystarkistukset heti ja ilmoita virhesyötteestä Lähteet: Shneiderman, 1992, Preece ja muut, s. 494. 60 Saila.Ovaska@cs.uta.fi 30
Yhteenveto Tue luontevaa dialogia käyttäjän kanssa Virhe, varoitus vai vahvistus? Standardikuvakkeet ja viestin muotoilu Tarvitaanko erillinen modaalidialogi-ikkuna? Lomakkeiden ja dialogien suunnittelussa Ohjelmointiympäristön standardeja ja suosituksia tulee noudattaa Visuaalinen suunnittelu tärkeää Ilmentää dialogin tai lomakkeen osien loogista ryhmittelyä Osien järjestyksen määrää käyttäjän tehtävä Tärkeimmät ensin tai tehtävän suoritusjärjestys 61 Saila.Ovaska@cs.uta.fi 31