IHTE-2100 KaSuper 2008-2009 Luento 6: Käyttöliittymän keskustelutapoja, käyttöliittymäelementtejä Päivän aiheet Käyttöliittymän vuorovaikutustapoja Graafisen käyttöliittymän elementtejä Käyttöliittymän keskustelutavat Interaction styles Keskustelutavat 1) Kysymys-vastaus -dialogi - kysymys on järjestelmän kehote (prompt) jonkin tiedon antamiseen - keskustelu on helppoa, jos kerralla välitetään vähän tietoa - sopii lähinnä kokemattomalle, kokenut kyllästyy helposti - joskus järjestys (vaihe kerrallaan) kuuluu tehtävän luonteeseen
Kysymys-vastaus -dialogi >Nimi: Ahto Simakuutio >Osoite: Insinöörinkatu 60 a 42, 33720 Tampere Kysymys-vastaus -dialogi >Postiosoite:??? Keskustelutavat 2)Lomakkeen täyttö - käyttäjä vastaa tavallaan yhtä aikaa moneen kysymykseen - sopii erityisesti tietojen syöttöön etenkin jos tietoja kootaan paperilomakkeella ja ne syötetään tietokoneeseen
Keskustelutavat 3)Komentokieli - määrämuotoiset komennot, jotka käyttäjän tulee muistaa ja hallita - ei sovi aloittelijalle eikä hyvin myöskään satunnaiskäyttäjälle - antaa aloitteen käyttäjälle - toisinaan ylivoimaisen tehokas - voidaan nopeuttaa komentojen lyhentämisellä Keskustelutavat... 4)Luonnollinen kieli - kiehtova vapaamuotoisuutensa takia - voi vaatia paljon kirjoittamista - moniselitteisyys - puhutun kielen tunnistus ei vielä riittävän hyvä Keskustelutavat... 5) Valikkokeskustelu - vaihtoehdot näkyvissä, valitaan (etsitään) haluttu, ilmaistaan valinta, todetaan tulos - helppo oppia, jos vaihtoehdot kuvaavia - ei sovi tietojen syöttöön - hidastaa kokeneiden käyttäjien työtä
Keskustelutavat... Suoravaikutteinen käyttöliittymä 6) Suoravaikutteinen (direct manipulation) liittymä - käsittelyn kohteet ovat näkyvissä ja osoitettavissa - käsitemalli näkyy (ainakin osittain) - sopii melko hyvin aloittelijallekin - houkuttelee kokeilemaan - helppo oppia ja muistaa Keskustelutavat... 7) Hyperteksti, hypermedia, hajautettu hypermedia - hypertekstin peruskomponentteina solmut ja niitä yhdistävät linkit - navigointiongelmat - vaihtoehdot näkyvissä kuten valikkokeskustelussa Keskustelutavat... 8?) Agenttiperustainen - Ei ole vakiintunut omaksi valikkotyypikseen - Yksinkertaisimmillaan yhdistää kysymys-vastaus & lomakkeen täyttö & valikkopohjainen käyttöliittymä - Ohjeet joka näytössä - "Fiksut arvaukset" vastauksesta
Keskustelutavat Käyttöliittymätyyppien perusluokittelu - merkkipohjaiset käyttöliittymät: 1,2,3,4,5,8 - graafiset käyttöliittymät (GUI): 2,5,6,7, 8 - WIMP interface: windows, icons, menus, pointing device 2)Lomakkeen täyttö 5)Valikkokeskustelu 4)Luonnollinen kieli 6)Suoravaikutteinen 8)Agenttiperustainen 7)Hyperteksti 3)Komentokieli 1)Kysymysvastaus Merkkipohjaiset Graafiset Muistettavaa Eri keskustelutapojen käyttökelpoisuus riippuu aina tilanteesta: tehtävästä, käyttäjästä, tavoitteista; tapoja ei voi asettaa yleispätevästi paremmuusjärjestykseen Useimmiten käyttöliittymässä sovelletaan rinnakkain useita eri keskustelutapoja - suoravaikutteisuus, valikot, lomakkeet - jopa suoravaikutteisuus ja komennot (esim. Windows RUN) Luonnollinen keskustelu perustuu aina oppimiseen (vrt. luonnollinen kieli); esim. suoravaikutteinen liittymä voi tuntua luonnolliselta vain siksi, että sen on oppinut Mitä on ystävällinen keskustelu? Ohjeiden muotoilu Hi there, John! It's nice to meet you, I see you are ready now. Press the enter key to begin. Vivahde-erot tärkeitä; pronomineja tulisi välttää - huono: I will begin the lesson when you press RETURN. - parempi: You can begin the lesson by pressing RETURN. - paras: To begin the lesson, press RETURN. - huonompi: Begin the lesson by pressing RETURN. Huomaa myös tavoitteen ja toimintaohjeen järjestys
Ohjeiden muotoilu Positiivista kannustusta tulee antaa, muttei liikaa - huono: Excellent! That's correct! You are doing great! Sopii lapsille (fanfaarien kera) - parempi: 6 correct 2 incorrect Huomaa kuitenkin kohderyhmä (esim. lapset) Komentokielisten liittymien perusongelma Komennot vaikeita muistaa ja kirjoittaa Useissa nimeämiskokeissa havaittu, että ihmisten luonnostaan antamat nimet vaihtelevat hyvin suuresti Ratkaisumahdollisuuksia - sallitaan synonyymien käyttö - annetaan ohjelman mukautua käyttäjään - kiinnitetään tietty komentojoukko Komennon osien järjestys P.J. Barnard, N.V. Hammond, J. Morton, J.B. Long, I.A. Clark, Consistency and compatibility in human-computer dialogue. International Journal of Man-Machine Studies 15 (1981), 87-134.: - yhteisen argumentin sijainti merkittävämpää kuin luonnollisen kielen mukainen järjestys - yhteinen argumentti ensimmäisenä oli paras kaikilla mittareilla (suoritusnopeus, käytetyn opastuksen määrä, virheiden määrä) Komennon osien järjestys Jatkokokeet: - vahvistivat yo. tulokset - osoittivat, että järjestys komento argumentti on parempi kuin päinvastainen - käyttäjille ei pitäisi antaa edes mahdollisuutta valita komennon ja argumentin järjestystä itse - valikkoperustaisissa ja suoravaikutteisissa liittymissä on sen sijaan luontevaa valita argumentti ensin
Lyhenteet Hyväksi havaittuja periaatteita: - katkaisu (ensimmäisen toisen kolmannen kirjaimen jälkeen) - vokaalien pudotus (BROWSE BRWS, SELECT SLCT) - ensimmäinen ja viimeinen kirjain (SORT ST) - monisanaisen komennot alkukirjaimet Tärkeintä lyhennekäytännön johdonmukaisuus Joskus mahdollista käyttää hyväksi näppäinten sijoittelua, esimerkiksi E A S D F Mikä on valikko? Valikko (menu) = keskustelevassa tietojenkäsittelyssä luettelo, josta käyttäjä valitsee seuraavan toiminnon. Atk-sanakirja Yksinkertaisimmillaan luettelo vaihtoehdoista: 3 articles in tut.ihte.kaper - read now? [ynq] Mahdollisten toimenpiteiden kiinteä luettelo Nykyisin yleensä pystysuora luettelo; eri ympäristöjen valikot eroavat ulkonäöltään ja ominaisuuksiltaan Valikkotyypit Pudotusvalikko (drop-down menu) vetovalikko (pull-down menu) pudotusvalikko (drop-down menu) ponnahdusvalikko (pop-up menu) pysyvä valikko, ns. paletti
Vetovalikko (pull-down menu) Mukautuva valikko (adaptive menu) Kuten drop-down, mutta pitääkseen valikon näkyvillä käyttäjän täytyy pitää hiiren nappia alhaalla Ei erikseen suomenkielistä vastinetta
Contextual menu asiayhteysvalikko? Ponnahdusvalikko (popup menu) Suoravaikutteiset liittymät SHNEIDERMANIN LUONNEHDINTA - Visuaalisuus: käyttäjälle esitetään kuva maailmasta sen sijaan, että käyttäjän pitää kuvitella maailma - Suoruus: käyttäjä manipuloi (osoittaa, siirtää) suoraan objekteja sen sijaan, että kuvaisi haluamansa toimenpiteen jollakin kielellä - Toimintojen toteutuvuus: toiminnot toteutetaan yleensä välittömästi, usein vähittäin, ja ne voidaan yleensä peruuttaa - Analogia: auton ajaminen vs. autonkuljettajan käyttö Navigaattori? Suoravaikutteiset liittymät... NORMANIN LUONNEHDINTA - Lyhyt etäisyys (short distance): prosessin, joka muodostaa tehdyn päätöksen perusteella tarvittavat toimenpiteet, tulee kuormittaa kognitiivisia resursseja mahdollisimman vähän - Osallistumisen tuntu (direct engagement): käyttäjän täytyy tuntea käsittelevänsä suoraan kohteen objekteja - Suoravaikutteisuuden tunteeseen vaikuttaa oppiminen tehtävä Suoravaikutteisen liittymän tulee olla näkymätön.
Hyviä puolia - Satua vai totta? Käyttäjät pääsevät nopeasti alkuun, usein jonkun toisen opastamana Kokeneet käyttäjät pystyvät työskentelemään erittäin nopeasti Satunnaiskäyttäjät pystyvät muistamaan käytön perusteet Virheilmoituksia tarvitaan harvoin Käyttäjät näkevät heti, johtavatko toimenpiteet haluttuun tulokseen Hyviä puolia - Satua vai totta? Käyttäjät ovat tyytyväisiä: - tuntevat hallitsevansa koko järjestelmän ja samalla työnsä suorittamisen - haluavat oppia lisää kokeilemalla järjestelmän kaikkia piirteitä - esittelevät mielellään järjestelmää toisillekin Huonoja puolia Soveltuvat huonosti monta kertaa toistettaviin operaatioihin Vaativat käyttäjiltä joskus liikaa tarkkuutta Perustuvat käyttäjän tunteman maailman visualisointiin rajoittaa uusien käyttömahdollisuuksien keksimistä Vertauskuvat (metafora = kielikuva) Metaphor: a figure of speech in which a word or phrase literally denoting one kind of object or idea is used in place of another to suggest a likeness or analogy between them Webster s New English Dictionary Esimerkki: työpöytämetafora - yritys käyttää systemaattisesti hyväksi käyttäjällä muusta ympäristöstä olevaa tietämystä - ihmiselle luonteenomainen tapa orientoitua uuteen tilanteeseen - hyvä perusta sisäisen mallin rakentamiselle, oppimiselle - aina puutteellinen
Muita vertauskuvia Sovellus Tekstinkäsittelyohjelma Sivuntaitto-ohjelma Piirrosohjelma Taulukkolaskenta Käyttöjärjestelmä Musiikkiohjelma Vertauskuva Kirjoituskone Ladonta Maalausvälineet Ruutupaperi Työpöytä Soitin Päivän aiheet Käyttöliittymän vuorovaikutustapoja Graafisen käyttöliittymän elementtejä Graafinen käyttöliittymä Esimerkkinä muutamia komponentteja Komponentin valinnassa mietittävä - mikä komponentti helpoin käyttää - minkä avulla saadaan oleelliset tulokset - onnistuuko tekninen toteutus Käännökset Tietotekniikan Liitto ry:n julkaisemasta ATK-sanakirjasta Ikkunan peruskomponentit oikonäppäin ikkunanhallintavalikko valikko otsikkopalkki suurennuspainike kutistuspainike sulkupainike valikkopalkki pikapainike vierityspalkki tilapalkki
Dialogi, välilehti, oletuspainike välilehti oletuspainike Viestiruutu (message box) SDI single document interface
MDI multiple document interface Valintanappi (radio button) Kyllä Ei En osaa sanoa Asetusnappi (check box) Perjantai Lauantai Sunnuntai
Combo box Vierivä luetteloruutu (scrolling listbox) Tekstiruutu (text box) Auto-exit Yleisesti käytössä myös suomennos tekstikenttä - Salasanakenttä (password field): tekstiruutu johon kirjoitettaessa ilmestyy vain tähtiä Päivämäärä: 28 10 2001 Yritys:
Piirakkavalikot Kursori aluksi piirakan keskellä Kaikki kohteet (viipaleet) lähellä Kohteet eri suunnissa Yleensä kaikki kohteet suuria Helppoja sekä aloittelevalle että kokeneelle käyttäjälle - aloittelevalle JOS osaa käyttää hiirtä Piirakkavalikot Toimivat parhaiten, kun - kohteita vähän - tekstin sijaan valittavana on kuvakkeita Tottunut käyttäjä voi käyttää nopealla eleellä jo ennen kuin menu tulee näkyville - lihasmuistin hyödyntäminen - ei toimi yhtä hyvin muuttuvalla sisällöllä
Muita mietittäviä asioita Jos automaattinen sisällöntarkistus, erotellaanko isot ja pienet kirjaimet (case-sensitive / caseinsensitive)? Visuaalisen suunnittelun periaatteet Asioiden järjestys ja sijoittelu, asettelu Muista palaute! Onko käyttäjällä riittävät oheislaitteet elementtien helppoon käyttöön?