Dialogin suunnittelu WIMP-käyttöliittymissä Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto 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 1 2 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ä DIALOGI IHMISEN JA TIETOKONEEN VÄLILLÄ 3 4 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 Mitä on dialogi? WIMP-järjestelmissä dialogi konkretisoituu valikoiden ja ali-ikkunoissa olevan toiminnallisuuden avulla Print valikosta avautuu Print-dialogiruutu OK tulostuu Keskustelutyyli vaikuttaa 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ä Suunnitteluvaiheessa dialogia voi kuvata kaavioilla tai tekstinä: 5 6 Saila.Ovaska@cs.uta.fi 1
Toiminnallisuus kuvattuna hierarkkisesti Esim. viestisovellus WIMP-ympäristössä Järjestelmä ja kuvattuna dialogimallina Edellisen kuvan keskihaaran toiminnallisuuden toteuttavat Lisää käyttäjä ja Poista käyttäjä -dialogit; Poistaminen tulee varmistaa Varmista-dialogi Opastus Käyttäjähallinta Viestien hallinta Pääikkuna Poista käyttäjä Varmista Lisää käyttäjä Poista käyttäjä 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.6 7 Suomennettu lähteestä: Dix et al. (2004). Human-Computer Interaction, kuva 5.7 8 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 siihen, varmistetaanko vai peruutetaanko käyttäjän poisto Tietokannan toteutuksessa pitää varautua kumpaankin Jatkossa järkevä työvaihe voi riippua siitä, mitä käyttäjä teki. Start 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' Menu Erilaisia kuvaustekniikoita paljon Main Menu click on click on centre circumference Circle 1 Circle 2 Finish rubber band draw circle select graphics select text select paint Graphics Submenu Text Submenu Paint Submenu Dialogin kuvaus on tyypillisesti vuorovaikutuksen syntaksin kuvauksen tasolla select 'line' click on first point double click Line 1 Line 2 Finish rubber band draw last line click on point 9 draw a line 10 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) DIALOGIRUUTUJEN TERMISTÖÄ Valintaikkunassa GUI-käyttöliittymässä käyttäjältä odotetaan syötettä suorituksen etenemiseksi Valinnat Komentopainikkeet Esim. Print-valintaikkuna 11 12 Saila.Ovaska@cs.uta.fi 2
Dialogit: Macintosh Viestiruutu: Vista & Windows 7 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 Consider making modeless dialog boxes dockable Kuvien lähde: Windows UXGuide 14 Dialogiruutu voi olla oma moodinsa Esimerkkejä WWW-sivujen modaalidialogeista 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 Kuvien lähde: http://patterntap.com/ 16 Virheilmoituksetkin ovat dialogeja Message box Viestiruutu Viesti-ikkunoiden suunnittelu 17 18 Saila.Ovaska@cs.uta.fi 3
Viestejä tietokoneeltasi 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. Kuvat: [OSXHIG] 19 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 Viestisisällön suunnittelu [Apple HIG, 2010] Macintosh: Finder alert [Apple HIG, 2011] 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 22 Windows 3.1. Viestiruutujen ohjeistus Windows 3.1 Windows 95 Viestiruutujen ohjeistus Windows 95 tiedoksi, information ei enää käytössä varoitus, warning kriittinen, critical Entä uudemmissa Windows-versioissa? 23 24 Saila.Ovaska@cs.uta.fi 4
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ä Painikkeet: 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 Huomaa logiikkaerot kuvakkeiden merkityksessä edelliseen kalvoon verrattuna! Lisäksi Windows-standardikuvakkeisiin kuuluu: Opastusta tarjolla Opastuksen kuvakkeena on kysymysmerkki, mutta sitä ei käytetä viestiruuduissa. Huomaa Windows 7 -muutos aikaisempiin ohjeistoihin: kaikissa viestiruuduissa ei tarvita kuvaketta ollenkaan Ongelman vakavuus kuvake tarpeellinen? 26 Viestiruudun sanoma Viesti-ikkunan tyypit ja osat Virheilmoitus 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] Vahvistus (Confirmation) Varoitus 27 28 Viesti-ikkunan osat Yhteenveto: viestiruutujen tarkoitus Vahvistus (Confirmation) Ei kuvakkeita kun rutiinivahvistus Varoitus ohjelman oman kuvakkeen päällä varoituskuvake Varoitus ohjelman oma kuvake varoituskuvake alatekstin yhteydessä Kun viesti annetaan erillisenä modaalisena ikkunana: Ikkunan otsikkopalkin pitää kertoa, mistä ohjelmasta viesti on aiheutunut Itse viestin pitäisi olla yksinkertainen, mutta samalla tarpeeksi informatiivinen Kirjoitettu kokonaisin lausein käyttäen käyttäjän ymmärtämää terminologiaa; Windows tone eli sävy ei saa olla käyttäjää syyllistävä! Kerro mikä ongelma + mikä oli ongelman aiheuttaja (jos tiedetään) + miten ongelma ratkaistaan eli käyttäjän mahdollisuudet ratkaisu esitettävä etenemisjärjestyksessä Lisätietoa tarvittaessa (progressive disclosure), linkki nimettyyn opastukseen Muista lisätä kuvake, jos tarvitaan. 29 [UX Guide p. 341] 30 Saila.Ovaska@cs.uta.fi 5
Viestejä annetaan muuallakin kuin modaalisissa dialogi-ikkunoissa Balloon eli suomeksi Selite Ruudun alareunassa ilmoitusalueella Ilmoitukset Viesti voi 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: Syötekentän yhteydessä lomakkeella 2. 1. 3. [UXGuide p. 362] 31 32 Ilmoitus lähellä virhettä! Komentopainikkeiden suunnittelu [UXGuide, Balloons p.38] [In-place Messages p.32] 33 34 Komentopainikkeet Komentopainikkeet [Apple HIG] 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 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 35 36 Saila.Ovaska@cs.uta.fi 6
Komentopainikkeet Oletuspainikkeet 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) 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! 37 38 Valintadialogien painikesuunnittelu Painikkeiden nimeäminen Komentopainikkeiden sijoittelu Windows: Alas vaakariviin oikealle Tärkein komentopainike ensimmäiseksi, oletuspainike Jos lomakkeessa on OK ja Cancel, ne on pidettävä yhdessä [Apple HIG] 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 39 40 Komennot linkkeinä eikä painikkeissa VÄLILEHDELLISET DIALOGIT 41 42 Saila.Ovaska@cs.uta.fi 7
Houkuttaisiko täyttämään? 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 Vista UE 43 44 Vista: property windows Painikkeet ja niiden vaikutusalue Vaakatasoon asettelu ok, jos - Enemmän kuin 8 välilehteä ja - Vaaka-asettelua käytetään muuallakin 45 46 Macintosh: Preferences PERUSKONTROLLIT LOMAKKEILLA (osin kertausta JoVuoT-kurssilta) [Mac OSX HIG p. 80] [Mac OSX HIG p. 21] 47 48 Saila.Ovaska@cs.uta.fi 8
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 HIG, 2012] 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! 49 50 Valintojen suunnitteluohjeita Valintojen tekeminen 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 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 51 52 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 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 http://theresaneil.files.wordpress.com/2011/05/harvest_multiselect2.png 53 54 Saila.Ovaska@cs.uta.fi 9
Listojen suunnittelu Pakolliset kentät lomakkeessa 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 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 55 56 Asetteluohjeita YHTEENVETO [Apple HIG] 57 58 Lomakkeella eteneminen Suunnitteluohjeita lomakkeille 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 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ä 59 Lähteet: Shneiderman, 1992, Preece ja muut, s. 494. 60 Saila.Ovaska@cs.uta.fi 10
Yhteenveto Tue luontevaa dialogia käyttäjän kanssa Virhe, varoitus vai vahvistus? Standardikuvakkeet ja viestin muotoilu Tarvitaanko erillinen modaalidialogi-ikkuna? Lomakkeiden ja dialogiruutujen 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 11