http://www.cs.tut.fi/ihte

Käytettävyyskäyttöliittymäsuunnittelussa

Grako-luento9.9.2008

Timo PartalaPuh. 040 849 0855Email timo.partala@tut.fi

Luennon sisältöTavoite: Keskeisten käytettävyyteen liittyvien

lähtökohtien ja UI-suunnitteluperiaatteidenmieleenpalautus.

• Miksi käytettävyys on tärkeää?

• Käyttöliittymäsuunnittelun perusteita- Vuorovaikutustyylit- Käyttöliittymien suunnitteluperiaatteita

http://www.cs.tut.fi/ihte

Miksi käytettävyys ontärkeää?

”Työajasta tuhraantuu yli kolme tuntiaviikossa””Kotimaiset yritykset menettävät vuosittain kymmeniätuhansia henkilötyövuosia it-ongelmien takia.Tietotekniikan ongelmat ovat nousseet uhaksisuomalaisten yritysten tehokkuudelle. Niistä aiheutuu jo2,7 miljardin taakka kansantaloudelle.”

”Tutkimuksen mukaan kansantalouden tehokkuudenkannalta olisi tärkeää, että tietotekniikan käytettävyysvarmistetaan niin yksilö- kuin organisaatiotasolla.Käytettävyyttä kohentavat esimerkiksi [...] pitkäjänteinenkäyttäjälähtöinen tutkimus- ja kehitystoiminta.”

[ITviikko 18.09.2003]

Käytettävyyden liiketaloudellisia perusteita

• Alhaisemmat kehityskustannukset• Lyhyempi kehitysaika• Asiakasmäärän kasvu• Asiakkaiden menetyksen estäminen• Suurempi tuotekehityksen tehokkuus• Vahvempi brändi• Alhaisemmat tuotetukikustannukset

• Huomattava kilpailutekijä!

[http://www.theusabilitycompany.com/approach/return.html]- sisältää myös ROI-laskimen Internet-sivustojen kehittämiselle

• Alhaisemmat kehityskustannukset• Lyhyempi kehitysaika• Asiakasmäärän kasvu• Asiakkaiden menetyksen estäminen• Suurempi tuotekehityksen tehokkuus• Vahvempi brändi• Alhaisemmat tuotetukikustannukset

• Huomattava kilpailutekijä!

[http://www.theusabilitycompany.com/approach/return.html]- sisältää myös ROI-laskimen Internet-sivustojen kehittämiselle

Käytettävyyden osatekijät

IhminenKyvyt, odotukset,tavoitteet, tehtävät

Vuorovaikutus,käyttöliittymä

KäyttöympäristöFyysinen, sosiaalinen, tekninen, ...

Käyttäjäkeskeinen suunnitteluprosessi (UCD = User-Centered Design)

Sovellus/järjestelmäToiminnallisuus,tekniset ominaisuudet,muoto, I/O-laitteet

Mitä käytettävyys on?• Käytettävyyttä ei voida määritellä absoluuttisesti ”tyhjiössä”

- se riippuu tuotteen lisäksi aina käyttäjistä, heidän tavoitteistaan jakäyttöympäristöstä

• Käytettävyys tarkoittaa tuotteen soveltuvuutta käyttäjälle jatehtävään- On tunnettava tarkasti käyttäjät,

tehtävät ja käyttöympäristöt

Käytettävyyden määritelmä• ISO 9241-11 (1998) -standardi määrittelee

käytettävyyden seuraavasti:- ”Tarkoituksenmukaisuus, tehokkuus ja tyytyväisyys, jolla

tuotteen määritellyt käyttäjät saavuttavat määritellyt tavoitteettietyissä käyttöympäristöissä.”

Mittarit:• Tarkoituksenmukaisuus (Effectiveness)

- miten hyvin tuotteella voi saavuttaa tavoitteen• Tehokkuus/suorituskyky (Efficiency)

- tehokkuus, mitattuna ajankäytöllä per tehtävä tai muillakäytetyillä resursseilla

• Tyytyväisyys (Satisfaction)- käyttäjän subjektiivinen kokemus käytön miellyttävyydestä

Käytettävyystavoitteet ja mittaaminen• Käytettävyyden mittaamista ja systemaattista kehitystä varten on

määrittelyn yhteydessä asetettava määrilliset tavoitteet

Järjestelmän xxx käytettävyysspesifikaatio

Käyttäjäpopulaatio: Kohderyhmän 1 käyttäjätEsiehdot: Mittaukset tehdään viikon käyttöajan jälkeen

67641ArvioTyytyväisyys

414510 tai yliKäytettyaika (min)

Tehokkuus

9010088850Suoritetuttehtävät(%)

Tarkoituksen-mukaisuus

TavoiteParastaso

Suunniteltutaso

Alinhyväksyt-tävä taso

Pahintapaus

SuureAttribuutti

Systeemin hyväksyttävyys

Sosiaalinenhyväksyttävyys

Käyttökelpoisuus(utility)

Käytettävyys(usability)

Hyödyllisyys(usefulness)

Opittavuus

Tehokkuus

Muistettavuus

Virheettömyys

Miellyttävyys

Hinta

Yhteensopivuus

Luotettavuus

Jne n. 100 muuttujaa

Käytännöllinenhyväksyttävyys

Systeeminhyväksyttävyys

[Jakob Nielsen]

Käyttäjäkeskeisensuunnitteluntavoite

Käytettävyydeltään hyvän järjestelmänominaisuuksia

Johdonmukaisuus Opittavuus

Hallittavuus

Sopiva esitystapaVirheiden sieto (errorhandling, error recovery,forgiveness)

Muistettavienasioiden määrä

Tehtävään sopivuus

Opastus,käyttöohjeMiellyttävyys

Virheettömyys

[Jacob Nielsen,Ben Shneiderman]

Esteettisyys

UCD= User-Centered DesignKäyttäjäkeskeinen suunnitteluprosessi

Ymmärrä jamäärittele

käyttökonteksti

Määrittelekäyttäjän ja

organisaationvaatimukset

Tuotasuunnittelu-ratkaisuja

Järjestelmätäyttää määritellyt

käyttäjän jaorganisaationvaatimukset

Evaluoisuunnitteluratkaisutvaatimuksia vasten

Tunnista tarvekäyttäjäkeskeiselle

suunnittelulle

[ISO 13407]

Ohjelmistoteknisen toteutusprosessin jakäyttäjäkeskeisen suunnittelun integrointi

Esitutkimus

Määrittely

Suunnittelu

Toteutus

Integrointi

Testaus

Käyttöönotto& ylläpito

Ymmärrä jamäärittele

käyttökonteksti

Määrittelekäyttäjän ja

organisaationvaatimukset

Tuotasuunnittelu-ratkaisuja

Järjestelmätäyttää määritellyt

käyttäjän jaorganisaationvaatimukset

Evaluoisuunnitteluratkaisutvaatimuksia vasten

Tunnista tarvekäyttäjäkeskeiselle

suunnittelulle

[ISO 13407]

}

Käyttäjäkeskeisen suunnittelun periaatteet

• Käyttäjien aktiivinenosallistuminen ja selkeäymmärrys käyttäjän jatehtävien vaatimuksista

• Tarkoituksenmukainen”työnjako” käyttäjien jateknologian välillä

• Suunnitteluratkaisujen iterointi• Monialainen

suunnitteluprosessi

[ISO13407]

UCD:n menetelmiäHttp://www.usabilitynet.org/tools/methods.htm

Esimerkki käytön sekvenssistä, johon UI-suunnittelu voi perustua

Ennen suunnittelun alkamistaon tunnistettava keskeisetTavoitteet ja tehtävänkulut

Käyttöliittymän rakenteenpitäisi tukea tehtävientehokasta suorittamista

Keskeisiä tehtäviä voidaankäyttää testi-caseina mm.protoiluvaiheessa

http://www.cs.tut.fi/ihte

Käyttöliittymien perusteita

• Vuorovaikutustyylit• UI-suunnittelun periaatteita

Vuorovaikutustyylit

• Kysymys-vastaus –dialogi• Lomakkeen täyttö• Komentokieli• Luonnollinen kieli• Valikot• Suoramanipulaatio• Hypermedia• Agentit

Vuorovaikutustyylit...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ääntietokoneeseen

Hyvän lomakkeen ominaisuuksia

• Looginen järjestys• Ryhmittely• Termit käyttäjän kielellä• Pakolliset kentät ilmaistu selkeästi• Mahdollisuus poistua (keskeyttää

lomakkeen täyttö, Cancel) tai palauttaaoletusarvot

Vuorovaikutustyylit ...

5) Valikot- 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ä

Vuorovaikutustyylit

6) Suoravaikutteinen (direct manipulation)liittymä- käsittelyn kohteet ovat näkyvissä ja osoitettavissa,

”manipuloitavissa”- Jatkuva visuaalinen palaute- ”drag and drop” on tehokas ja miellyttävä, erityisesti

silloin kun objektille pitää antaa sijainti

- sopii melko hyvin aloittelijallekin- houkuttelee kokeilemaan- helppo oppia ja muistaa- toteutus on ”vaativaa”

Merkkipohjainen vs. graafinen liittymäRef: Temple, Barker, Sloane (1990; sponsorit: Microsoft ja Zenith)

CUI GUI

35 % enemmän

74 % 91 %

5.3 2.7

5.8 4.3

Mittari

Valmistuneitatehtäviä

Oikein tehtyjätehtäviä

Noviisienturhautuneisuus

Rasittuneisuus

Yritettyjätehtäviä 23 % enemmän

Yhteenvetoa vuorovaikutustyyleistä

• Eri tyylien käyttökelpoisuus riippuu ainatilanteesta: tehtävästä, käyttäjästä, tavoitteista;tapoja ei voi asettaa yleispätevästiparemmuusjärjestykseen- Yksi yleisluontoinen sääntö: GUI on parempi

noviiseille, komentokieli tehokkaampi kokeneillekäyttäjille

• Useimmiten käyttöliittymässä sovelletaanrinnakkain useita eri keskustelutapoja- suoravaikutteisuus, valikot, lomakkeet- jopa suoravaikutteisuus ja komennot (esim. CAD)

http://www.cs.tut.fi/ihte

Käyttöliittymiensuunnitteluperiaatteita

Käyttöliittymäsuunnittelun sääntöjä

• ”the Eight Golden Rules of Interface Design”,Ben Shneidermann, Designing the UserInterface (Addison-Wesley, 1993)

- Myös: Normanin periaatteet, Donald Norman,Design of Everyday Things, Basic Books, 2002.

Käyttöliittymäsuunnittelun 8 kultaista sääntöä

1. Noudata yhtenäisyyttä toimintaketjuissaja toimintatavoissa

• Terminologia• Värit, fontit, kuvakkeet• Samanlainen toimintatapa samassa tilanteessa

Norman: Johdonmukaisuus

• Sisäiseen johdonmukaisuuteen vaikuttaa mm:- Komponenttien sijainti ja käyttötapa- Värien käyttö (sama värikoodaus läpi ohjelman)- Vihjeiden käyttö (fontin tyyli: kursiivi, lihavointi…)- Terminologia (yhtenäinen läpi koko ohjelman)- Samantyyppinen toimintatapa samantyyppisissä

tilanteissa• Tyylioppaat hyvä tapa ohjata johdonmukaisuutta

Kahdeksan kultaista sääntöä

2. Tarjoa edistyneille käyttäjille oikoteitä• näppäinoikotiet• makrot

Kahdeksan kultaista sääntöä

3. Tarjoa informatiivista palautetta

Suoramanipulointi edellyttäätoiminnon aikana jatkuvaa palautetta!

Norman: Palaute• Nopea palaute on onnistuneen ja järkevän

toiminnan kannalta keskeistä- Jo 300 ms:n viiveen jälkeen käyttäjä alkaa turhautua

• Voi perustua esim. näkö- tai kuuloaistiin- Molempia ei yleensä tarvita yhtaikaa

• Palautetta tulee antaa käyttäjän ymmärtämillätermeillä tai visuaalisilla viesteillä

Kahdeksan kultaista sääntöä

4. Suunnittele dialogit siten, että ne johtavatlopputulokseen

• Järjestä toimintoketjut siten, että niillä on alku,keskikohta ja loppu

Kahdeksan kultaista sääntöä

5. Tarjoa yksinkertaista virheenkäsittelyä• estä virheet• auta käyttäjää toipumaan virhetilanteista

(EI näin :-})

Norman: Virheiden käsittely

• Käyttäjän ei tulisi syyttää itseään virheistä- Ihmisillä on taipumus pyrkiä löytämään

toiminnoille (etenkin kummallisille) selityksiä,eivätkä ne aina osu kohdalleen

• Tärkeä virheisiin vaikuttava tekijä onkuviteltu syy-yhteys- esim. verkkoyhteys katkeaa yllättäen: teinkö

minä jotain väärin?

Kahdeksan kultaista sääntöä

6. Salli toimintojen helppo peruminen• yksittäisen tapahtuman• toimintosarjojen

- Myös ”Redo”- Huom! Yleensä pitää suunnitella jo ohjelmistoarkkitehtuuritasolla

Kahdeksan kultaista sääntöä

7. Tue käyttäjän kontrollin tunnetta• Käyttäjä käynnistää tapahtumat ja toiminnot• Käyttäjä voi tehdä valintoja• Salli keskeytykset

• Tosin: Automaatio- ja ”läsnä-äly” –järjestelmissäkäyttäjän kontrolli ei voi olla täydellinen- Silti käyttäjälle pitää antaa mahdollisuus kontrolliin

vähintäänkin keskeytyksen muodossa

Kahdeksan kultaista sääntöä

8. Rajoita käyttäjän lyhytkestoisen muistinkuormitusta

• tarvittava informaatio joka näytöllä- Mutta ei liikaa! (7±2, ryhmittely)

• ohjeet, opasteet, syöteformaatit

Norman: Näkyvyys• Tee asiat näkyviksi• Toiminnot ja informaatio esille• Anna luonnollisia visuaalisia viestejä

- Jos yksinkertaisen välineen yhteyteen tarvitaankäyttöohje, on se todennäköisesti merkkiepäonnistuneesta suunnittelusta

Yhteenveto

• Määrittele aluksi käyttäjän tavoitteet japäätehtävät

• Tee suunnitelma käyttöliittymän rakenteestaperustuen tehtävänkulkuihin- Sekä näyttöjen väliset että sisäiset rakenteet

• Sovella Shneidermanin/Normanin (tms.) UI-suunnitteluohjeita- Voitte miettiä myös omaa ”tyyliopasta”

• Jos mahdollista, tee (paperi)proto ja testaa sitä2-4 potentiaalisella käyttäjällä

Kirjallisuutta• Cooper, A. About Face: The Essentials of User Interface Design. Wiley, 2003.• Earthy, J., Usability Maturity Model, Lloyd’s Register, INUSE project, 1998.• Beyer, H. & Holtzblatt, K. Contextual Design. Academic Press, 1998.• ISO13407. Human-centred Design Processes for Interactive Systems. Switzerland, Genève:

International Organization for Standardization, 1999.• ISO 9241-11. Ergonomic requirements for office work with visual display terminals, Part 11:

Guidance on usability.• Jokela, T. Assessment of UCD processes as a basis for improvement action. University of Oulu,

A374, 2001• Kotler, P. (2000). Marketing management, the millenium edition. Prentice Hall, 2000.• Mayhew, D. and Bias, R. Cost-Justifying Usability. Morgan Kaufmann, 1994 (new edition coming

in 2005) & Update for the Internet Age, 2005.• Moore, G. (1991). Crossing the Chasm. Harper Business, NY.• Nielsen, J. Usability Engineering. Morgan Kaufmann, 1994.• Norman, D. Design of Everyday Things, Basic Books, 2002.• Norman, D. (1998). The Invisible Computer: Why Good Products Can Fail. MIT Press, MA.• Preece, J. et al, Human-Computer Interaction. Addison-Wesley Publishing Company, 1994• Thomas B. Sheridan, Humans and automation: System design and research issues, Wiley Inter-

Science, 2002• Shneiderman, B. Designing the User Interface. Addison-Wesley, 1993.• Sinkkonen et al. Käytettävyyden psykologia. IT Press, 2002.

Web-linkkejä• http://www.usabilitynet.org

- ”A project funded by EU to promote usability and user-centered design”• http://www.upassoc.org/

- The Usability Professionals' Association (UPA)• http://www.useit.com/

- Jacob Nielsenin webbisivut, osittain kaupalliset- Nielsenin ”kuuluisa” Alert Box: http://www.useit.com/alertbox/

• http://www.theomandel.com/- Kaupallinen yritys, jossa lisäksi tarjolla julkista käytettävyystietoa

• www.usability.serco.com/trump/• www.ejeisa.com/nectar/inuse• www.baddesigns.com/ (esimerkkejä huonosta käytettävyydestä)