Käyttöliittymän suunnittelu Ohjelmistotekniikka kevät 2003
HCI (Human-computer interaction) Kielitiede Ohjelmistotekniikka Psykologia HCI Antropologia Ergonomia Sosiologia Vaatii erityisosaamista!
Uuden järjestelmän käyttöönottokustannukset (Bjørn-Anderson 1986) Laitteistokustannukset Ohjelmistokustannukset Organisaatiokustannukset HCI 1980 1980 1990
Alas ammuttu kone (Lee 1992) Pentagon ilmoittaa ampuneensa alas Iranilaisen F-14 hävittäjän Myöhemmin se paljastuu matkustajakoneeksi, jossa oli 290 matkustajaa Järjestelmä oli antanut oikeaa tietoa Syynä inhimillinen erehdys, koska tietoa jouduttiin yhdistelemään kahdesta eri näytöstä Oletettavasti paremmalla käyttöliittymän suunnittelulla olisi onnettomuus vältetty
Huonon käyttöliittymän seuraukset Tehokkuus laskee Järjestelmää ei käytetä Työpaikoilla investoinnit hukkaan WWW-palvelua ei käytetä Terveysongelmat Jopa loppuunpalaminen Silmien rasitus Turvallisuusuhka (Iranin tapaus)
Yleistä käyttöliittymistä Tekstipohjaiset, graafiset, www-käyttöliittymät, mobiililaitteet, uudet laitteet Käyttöliittymä usein iso osa ohjelmistoa (30-35% vuonna 1984), ainakin käyttäjälle tärkein osa. Käyttötyytyväisyys ja ensivaikutelma (varsinkin wwwpalvelut) tärkeää Liiallinen ulkonäön painottaminen voi johtaa monimutkaisuuteen ja sisällön heikkouteen
Käyttöliittymän kehittäminen Protoilu sopii hyvin Jokainen vaihe katselmoindaan asiakkaan kanssa Käyttöliittymään ei saa tulla suuria muutoksia kesken kehityksen tai päivitettäessä Oltava käyttäjälähtöistä -> Vaatii paljon yhteistyötä käyttäjien kanssa
Yleisiä suunnitteluperiaatteita 1/4 Käyttäjäkunnalle tuttu sovellusalueelle kuuluva käsitteistö esim. kansio, asiakirja Siis sovellusalueen osaamista oltava mukana Toiminnan tulee olla yhdenmukaista sovelluksen kaikissa osissa, sama terminologia vastaavissa asioissa (komentokielet, tuoteperheet) Esim. Word <-> PowePoint
Yleisiä suunnitteluperiaatteita 2/4 Järjestelmän tulee käyttäytyä ennakoitavasti, vastata käyttäjän mielikuvitusta. (Normit, kommunikaattori) http://www.baddesigns.com/timer.html Esim. opetusryhmän koko korpissa Esim. toiminto oltava standardivalikossa) Toiminto tulisi voida peruuttaa. Vaarallisille toiminnoille varmistus. Esim. Tiedoston poisto Esim. mysql delete from Järjestelmän tulee antaa palautetta Informatiivista palautetta virhetilanteissa Kuvataan suorituksen etenemistä tarpeeksi usein/tarkasti
Yleisiä suunnitteluperiaatteita 3/4 Selkeät dialogit suoritussarjan etenemisestä täytyy antaa palautetta (esim. www-tilaus). Myös hyvä kertoa etukäteen, mitä seuraava vaihe sisältää. (Sitoudunko tilaamaan, jos menen vielä eteenpäin? Postimaksu www-kaupoissa) Avustustoiminnot (usein ongelma www-puolella). Selitettävä vähänkin tulkinnanvaraiset käsitteet. Automaattinen avustus?? Tieto saatava helposti Mukauttaminen käyttäjän mukaan
Yleisiä suunnitteluperiaatteita 4/4 Virheilmoitukset Tarpeeksi informaatiota Ehdotus vian korjaamiseksi Linkki ohjeisiin Huomioidaan inhimilliset tekijät: Lyhytkestoinen muisti: ei odoteta, että käyttäjä muistaa edellisen näytön tiedot
Näkyvyys Oikea tieto oikeaan aikaan näkyvällä paikalla http://www.baddesigns.com/mopsnk.html http://www.finnkino.fi/ Värit Sijainti Huom! Kulttuuri Postimaksu www-kaupassa Mitä tietoa käyttäjä haluaa? Personointi (esim. uudet MSOfficet)
Tuttuus/ennakko-odotukset http://www.baddesigns.com/cell-phone.html Esim. kuvankäsittelyohjelmien erilaisuus
Värien valinta Rajallinen määrä värejä 4-5 ikkunassa, 7 koko sovelluksessa Ilmoita värillä tärkeät asiat. Huomio keskittyy voimakkaisiin väreihin. Huomioi riittävä kontrasti. Värisokeus. Värien käyttö koodaukseen oltava harkittua. (Esim. virheilmoitukset punaisella) Assosiaatiot väreistä yritysmaailman www-sivut usein konservatiivisia www.ibm.com/us/ www.nokia.com
Vuorovaikutustyylin valinta Aloite, kenellä on kontrolli Oppimisen nopeus Käytön nopeus (kun järjestelmä opittu) teksitpohjainen vs. graafinen + pikanäppäimet Yleisyys, joustavuus Sekä aloittelijoille, että eksperteille Voidaan mukauttaa käyttäjän mukaan
Valikkopohjainen tyyli http://www.jyu.fi/kielikeskus/mindterm/kieku.shtml Suoraviivainen eteneminen, parhaimmillaan informatiivinen -> Helppo aloittelijoille Ei usein vastaa nykyajan vaatimuksia
Lomakepohjainen tyyli Esim. vakuutusjärjestelmä, monet www-palvelut Terminologian oltava tuttua Opasteet lähellä kohdetta: http://laskuri.vero.fi/verolaskuri2002/laskuri.php Tiedonsyötön ohjaus (postinumerossa 5 numeroa) Kentän pakollisuuden ilmaiseminen Valmiuden ilmaisu käyttäjälle -> ohje (ei www) Tietojen tarkastus, eteenpäin vasta kun kaikki tiedot täytetty -> palaute käyttäjälle
Komentokieli Helppo toteuttaa ei vaadi konetehoa Vain asiantuntijakäyttöön (? kännykät) Nimeäminen on tärkeää Kuvaavat luonnollista kieltä vastaavat nimet(search, OPEN) Komento ennen argumenttia Yleisen käytännön (esim. Unix) noudattaminen Lyhenteiden muodostus Katkaisu, vokaalien poistaminen, ensimmäinen ja viimeiden kirjain, lauseen sanojen ensimmäiset kirjaimet, standardilyhenteet Esim. Unix-komennoissa lyhennys vaihtelevaa
Luonnollinen kieli Puhesynteesi Kehittyneempää Puheen tunnistaminen Vaatii vielä paljon työtä (puhelimet)
Windows-käyttöliittymä Käytetään vakiokomponentteja, jotka ovat tuttuja muista sovelluksista. (valikot ym.) Ei suuria muutoksia päivitettäessä. Inkrementaalisessa kehityksessä on käyttöliittymä suunniteltava alun perin hyvin. Pikanäppäimet Navigointi näppäimistöllä (ALT+f, CTRL+s, TAB) Avusteet (F1, hiiri pysähtyy, hiiren oikea näppäin)
WWW-ympäristö Jos palvelu ei pelaa, asiakas etsii sen muualta. (vrt. ostettu pakettiohjelma) Vaatii päivitystä rikkinäiset linkit ja vanha tieto karkoittaa asiakkat Ei liikaa tietoa sivun tarkoitus www.mtv3.fi Haluttu tieto löydyttävä helposti. Sijoitetaan halutuimmat tiedot näkyvimmälle paikalle. Vaaditaanko rekisteröityminen? Valtä vierityksen tarvetta
WWW-ympäristö Ei under construction -tekstejä Personointi Navigointi jokaisella sivulla. Ei saa luottaa Backnäppäimeen. Toiminnallisuus on tärkeämpi kuin ulkonäkö. Koristeellinen ulkonäkö voi antaa monimutkaisen vaikutelman, vaikka sommittelu olisikin tehty hyvin. Käyttäjän ei pitäisi joutua etsimään linkkiä haluamalleen sivulle