Hypertekstidokumentin käytettävyys Terminologiaa Käytettävyys Sananen saavutettavuudesta Esimerkkejä tyypillisistä ongelmista Suunnitteluohjeita Suunnitteluprosessi Nuorten yleisin respiratorinen arytmia on inspiraation yhteydessä esiintyvä benigni paroksysmaalinen takykardia non-steroidaalisia antiinflammatorisia lääkkeitä Yhteystiedot tms: http://www.cs.hut.fi/~jparkkin/ PM&RG: http://www.cs.hut.fi/~pmrg/index.html; Adage: http://www.adage.fi/ 1/42 Ohjeita dokumentointiin: http://www.gooddocuments.com/homepage/ 2/42 Palvelun laatu WWW- sovelluksen käytettävyys Tekniikka 10 5 0 Käyt... 1 5 9 Sisältö Palvelun laatu on multidimensionaalinen Kaikki dimensiot eivät ole riippumattomia Riippuvaisille ja riippumattomille dimensioille voi olla yhteisiä ja erillisiä rajoittavia tekijöitä Eivät toisistaan riippumattomia 3/42 Käytettävyys Soveltuu tarkoitukseen Käytön helppous Opittavuus Tehokkuus Navigointi Palaute Tarjonta Esteettisyys / sisältö Tekniikka Soveltuu tarkoitukseen Standardien mukainen Tarvitsijoiden saavutettavissa Sisältö Käytöntarkoitus; opittu asia Käyttäjän kokema merkitys Etsiminen / oppiminen Oikea tekniikka Käyttäjän kieltä, oikeaan paikkaan objektiivista, Teknisesti tarjolla ytimekästä hakukoneet 4/42 Saavutettavuus ja käytettävyys Saavutettavuus on tietoista työskentelyä tasaarvoisuuden hyväksi Hannele Hyppönen, Stakes (mukaellen) Laatu Tyypillisiä ongelmia Saavutettavuus Käytettävyys Hyväksyttävyys... Erityisryhmät Tehokkuus Laillisuus Erityistilanteet Tuottavuus Eettisyys... Miellyttävyys... Nielsen 1993 (mukaellen) 5/42
Tyypillisimmät WWWkäytettävyysongelmat Termit. Internet, WWW, Java, HTML, URL, saitti, proxy, cache, browseri, selain, ohjelma Kontrollin ottaminen Uudet ikkunat, backpainikeeseen vaikuttaminen, bookmarkittomuus Tekniikkalähtöisyys sanahaku, jargon Hypertekstin puuttuminen Hyppiminen hierarkiassa, linkkien puute / liikaa linkkejä Väärät konventiot Mainoksen näköiset otsikot, linkin näköiset korostukset Konsistenssin puute Java-liittymä työasemasovelluksessa Mutta mikä on oikea... 7/42 Käyttäjät eivät tiedä ATK-alan sanastoa eikä tarvitsekaan Merkitys eri suunnittelija, tilaaja,asiakas Internet = WWW modeemi... Markkinointijargon Pitäisi olla Yleiskieltä Käyttäjien kieltä termit Selkokieli lyhyitä sanoja selkeät lauserakenteet vältä ja selitä abstraktiot http://www.verkkouutiset.fi/arkisto/1997.02.07/selko.htm 8/42 Nielseniltä samanlaisia havaintoja: http://www.useit.com/alertbox/990530.html Tutkimus: miten käyttäjät lukevat Netistä: http://www.useit.com/papers/webwriting/ Ihminen huomaa, kone muistaa Toimintojen tulisi näkyvissä ja huomattavissa Läpinäkyvyys hyvä Bottom-up Haun syntaksi tärkeä Esimerkit, standardinmukaisuus Tarkoituksellisuus Kuvat osa kommunikaatiota Kuva + otsikko Http://www.ytv.fi/aikataulut/ Http://www.amazon.com/ Http://www.nokia.com/ 9/42 Käyttäjille tulee tiettyjä tottumuksia Vaikea ilmaista Ohjaavat käyttöä Jos tottumus ja tarve törmäävät, tottumus usein voittaa Tottumuksen rikkominen koetaan epämiellyttävänä? Linkki, otsikko, mainos... Konventiot Lukutottumukset verkossa ja printissä eroavat: http://www.useit.com/alertbox/20000514.html Spool, Jared et al. Web Site Usability: A designers Guide Web ja desktop lähstyvät toisiaan: http://www.user.com/chi98/workshop/fellenz/applets.htm 10/42 Teoriaa silmänliikkeistä Kaksi vaihetta: fiksaatio sakkadi 2-5 fiksaatiota sekunnissa 0,25s tiedostamattomia Silmä kerää tietoa vain fiksaation aikana, terävän näon alueelta Terävä näkö n. 5astetta, tällä alueella tarkkaavaisuus Aivot prosessoivat havainnoksi 11/42 Ilpo.Kojo@occuphealth.fi 12/42
Median lukutottumuksia... Kokeneet WWWkäyttäjät eivät katso graafeja - vain tekstiä http://www.poynter.org/e yetrack2000/ Käyttäjät kehittävät bannerisokeuden http://www.sandia.gov/it g/newsletter/dec98/banne r_blindness.html Lähinnä tottumusta (konventiot) http://www.poynter.org/eyetrack2000/ Toimintojen samanlaisuutta Sama toiminto näyttää samalta ja toimii samalla tavalla Eri toiminto on erilainen Eri asia kuin monotonisuus Mutta konsistenssi minkä kanssa? Konsistenssi Sama ikkuna Javalla ja Ntllä (Cordis: Protool) Kokeeko käyttäjä toimivansa WWWvai desktop-maailmassa Kapeneva ero -- ja sitten 13/42 Windows design guidelines: http://msdn.microsoft.com/ui/ Java design guidelines: http://java.sun.com/products/jlf/dg/ 14/42 Saavutettavuusongelmia Ylitarkat sivustot ( Youneedabrowser that supports... ) Muotoilu kuvilla Erillinen tekstiversio kuka toteuttaa ominaisuudet & pitää yllä? Animoinnit välkkyminen, nopeus Huonot värivalinnat kontrasti, puna/viher 15/42 Joitain ohjeita 16/42 16x16 paras 32x8 ja 8x32 melkein yhtä hyv 8x8x4 paljon huonompi Kuoppa parempi kuin suora 6x2x2x12 parempi kuin 4x4x4x4 Rakenne Mäki huonompi kuin suora 8X32 - rakenne: Kategorisoinnin suorittaa ammattilainen Testataan Kategorisointi käyttäjien kanssa lappusulkeisia Testataan Linnut, kalat, kasvit, sienet, hämähäkit, hyönteiset, nisäkkäät, luokittelemattomat Tukee työtä Painikkeiden vaikutusalue selvä Työn eteneminen selkeää Antaa lisätietoa - ei opasta harhaan Näppäimistön käyttö helppoa Lay-out Konventiot Totuttuja tapoja Käyttäjillä eri kuin suunnittelijalla Saattavat ohjata harhaan tai helpottaa opittavuutta Linnut 32 linkkiä Kalat 32 linkkiä Kasvit... Sienet Hämähäkit Hyönteiset Nisäkkäät Luokittelemattomat Kanalinnut Pingviinit Ja samaa vielä 28 kertaa 17/42 18/42 Design guidelines: http://www.lboro.ac.uk/research/husat/eusc/index_r_guides.html
Luettavuus Riittävä kontrasti (mustavalko-koe) Riittävä fonttikoko (esim. 12 px); muuteltavissa Ei liian leveätä tekstiä Ei villisti linkkejä testin sisään (hidastuttavat lukemista; muuttavat merkitystä) Tarpeeksi väljää tekstiä; ei isoja tekstimassoja; otsikoiden runsaskäyttö Liehureuna (nopeuttaa ja tarkentaa lukemista, mutta vaikea hallita) Lyhenteet auki Kuvien oikea käyttö Kuvien tarkoitus voi olla: tunnelman luonti asian havainnolistaminen 1000 sanaa huomionkiinnittäminen legitimitointi (logot yms) Välkkyvät, vilkuvat, liikkuvat kuvat saattavat viedä huomion tärkeimmältä, sisällöltä Tekijänoikeuskysymykset 19/42 20/42 Linkit Merkitään selvästi perinteinen sininen ja alleviivauttu muutkin käy, kunhan selkeä, eroaa muusta tekstistä Ei saa mennä sekaisin korostuksien kanssa Erilaisia linkkejä Miten merkitä sivustolta ulos suuntaavat linkit? Miksi linkki ei avaa uutta ikkunaa? Milloin se on sopivaa? Kuvalinkit, varsinkin artikkeleissa ja uutisissa Huom! Sivut eivät sisällä linkkiä itseensä! -> linkki passivoidaan Ruudulta lukeminen 10% - 30% paperia hitaampaa Dokumentin rakenne tärkeää Osuvat otsikot Lyhyet kappaleet Katseen ohjausta: Lihavointia varovaisesti Kursivoitu vaikea lukea Alleviivaus vain linkkeihin! Miten kirjoitetaan? Tehtäväkeskeisyys Ei PDF-tehtailua vaan vastauksia käyttäjän kysymyksiin Ei FAQ-fileä vaan tehtäväkohtaisia ohjeita Käännetty pyramidi Leveät, matalat hierarkiat tieto ylös 21/42 Miten kirjoittaa webiin: http://www.useit.com/papers/webwriting/ 22/42 Luonnollista, etenemisestä kertovaa eivain virheilmoituksia ei vain keskeytyksiä esim: näppäimen painallus saa aikaiseksi kirjaimen Käyttäjän kielellä kohti tavoitetta vai siitä pois? Palaute Tyypilliset aikarajat <0,1s: välitön 0,1-1s: luonnollinen (1-3s: siedettävä) 1-10s: pitkä >10s: huomio siiryy pois lasketaan käyttäjän havainnosta 23/42 Missä palaute luuraa? Selaimen logo, alalaidan palkki, kursorin animointi jotain tapahtuu Navigaatioavut, sivupolku (tracker) jossain ollaan Linkit, URLit jonnekin voi mennä Painikkeet jotain voi tehdä Sivun muutokset 24/42
Uutuudet Mynti Kaikkea kivaa Kaksi palautteen detaljia Palaute tilasta paikasta Haun palaute mitä haettiin tulokset mielekkyysjärjestyksessä (paniikki: sanojen määrä / aakkosjärjestys) 25/42 Median valinta viestiin Multimedia on yhdistelmä tekstiä, kuvia, graafeja ja grafiikoita, animaatiota, videokuvaa ääntä ja puhetta Käyttö hiirellä, kosketusnäytöllä, kynällä, näppäimistöllä tai puheella Erilaisten medioiden yhdistelmä Ota-ja-käytä - paradigma Aina tiettyyn tarkoitukseen suunniteltuja Tietty tehtävä Tietyt käyttäjät Don t Make Me Think; Steve Grugg, 2000 Multimediaohjeita: http://www.lboro.ac.uk/research/husat/eusc/r_usability_guides.html#multimedia 26/42 Pysäytetty kuva Vertaaminen, oppiminen Animointi Huomio, yleisnäkymä, todellisuus Teksti Selittäminen, oppiminen, abstraktit asiat, lyhentäminen Puhe Ohjaus, opastus Ääni Huomio, muutos Muuttuva (dynaminen&ajasta riippuva) Puhe, ääni, animaatio, video Ei-muuttuva (Valo)kuva, teksti Abstrakti Tunne, esteettinen kokemus Konkreettinen Saavutettavuusohjeita Teknisestä toteutuksesta (WWW-palvelut näkövammaisille) http://www.cs.tut.fi/~jkorpela/acc/esit.html (lyhyt) http://www.tieke.fi/esteettomyysopas/estohje.html (pidempi) Tarkastaminen http://www.delorie.com/web/lynxview.html www.temple.edu/inst_disabilities/piat/wave/ Tilojen ja laitteiden sijoittelu http://usability.hut.fi/laboratory/material/saavutettavuus/ 27/42 28/42 ISO 14915-3 (draft) Selection of media and media combination http://www.ijkk.fi/tasanet/seminaarit_e.htm WWW-tuotekehitysprosessi työvaiheineen Miksi meillä on ongelmia? Suunnittelijan malli Suunnitteluorientoitunut (top-down) Tarkka (explicit) tehty kommunikoimiseen ja tehtävien jakamiseen yksityikohtainen teknisesti ja rakenteellisesti Käyttäjän malli Tehtäväorientoitunut (bottom-up) Sumea (implicit), rakentunut käytön ja uskomusten kautta Yksityiskohtainen käytännön ongelmien ratkaisemisessa 29/42 30/42
WWW-tuotekehitysprosessi Käyttäjien tunnistaminen Tarvekartoitukset, Käyttäjähaastattelut Kokemukset olemassaolevista tuotteista Tuotemäärittely Vaatimusmäärittely Skenaariot, Käyttäjä- ja tehtäväkuvaukset Toteutus Läpikäynnit, heuristiset menetelmät, pienet käytettävyystestit Tuotekehitysprojekti Pilotti Hyväksymistesti(t) WWW-sovelluksen tuotantoprosessi ja käytettävyys: http://www.uiah.fi/mediastudio/survey4/ Käyttöönotto Projektin lopetus 31/42 Julkisilla palveluilla määritelty lain ja käytäntöjen kautta Pitääköyhdenpalvelunsopia kaikille? Ei Esteettömyys on kuitenkin tärkeää Tärkeimmät käyttäjäryhmät Päivittäin käyttävät Tietoa syöttävät Satunnainen käyttö Tekninen tuntemus Tekniset Ei-tekniset Käyttäjäryhmien tunnistaminen, havainnointi: Beyer, H & Holtzblatt K Contextual Design 32/42 Tehtävien tunnistaminen Tehtävät ovat käyttäjäryhmäkohtaisia Verkkoon muuntaminen... Onko työ vai huvi? Säännöllinen / epäsäännöllinen? Tiedot, taidot, entiset kokemukset konventiot Haluoppia Mitä on jo oppinut? Toistuvat tehtävät Tiedon syöttäminen Tarkastaminen Tärkeimmät tehtävät Tiedon käsitteleminen Kriittiset tehtävät Maksusitoumuksen tekeminen Metafora / analogia voi olla toimiva Fyysinen palvelu siirretään verkkoon tilisiirtolomakkeen lay-out verkkopankin lomakepohjana Metafora / analogia voi olla harhaanjohtava Fyysisen palvelun rajoitteeti siirretään verkkoon Windowsin laskin Käyttäjistä ja tehtävistä: Hackos, J & Redish, J User and Task Analysis for Interface Design Browsing, interacting, using: http://www.user.com/chi98/web-and-desktop.htm 33/42 34/42... muuntaminen Pullonkaulat Konseptien ristiriitaisuus (paperilomakke / verkkolomake) Tekniikan ehdoilla (lomakkeen haussa tiedettävä tarkka nimi) Tekniikan läpinäkyvyys ( tämä on JAVA-lomake ) Ratkaisun jäykkyys (osittain muutettu järjestelmä vaatii työtapojen muutoksia) 35/42 Kokonaisuuden hahmotus Mihin osiin palvelu jakautuu Käyttäjäryhmien tarpeet Onko osissa samanlaista toiminnallisuutta Voidaanko protoilla / toteuttaa moduleina? Konsistenssi Samanlainen logiikka palvelun sisällä sovelluksen toteutus Sivujen suunnittelu Tehtävän kannalta järkevä tiedon esitys Vuorovaikutus Sivutasoinen navigointi Mitkä osuudet käyttäjä havaitsee Muodostuuko oletuspoluista järkeviä Proto testaukseen 36/42
Uutuudet Mynti Kaikkea kivaa Uutuudet Kaikkea kiv aa Mynti Prototyyppi Horisontaalinen Prototypisoidaan koko sovellukseen vaikuttavat asiat Lay-out, päivämäärän esitystapa, muodot Paperiprotot, eitoiminnalliset (Lo-Fi) Testataan Navigoitavuus konsistenssi Vertikaalinen Prototypisoidaan tapahtumaketjuja, loogisia kokonaisuuksia Käytön aloitus, tuotetiedon haku, ostotapahtuma Näennäistä tai todellista toiminnallisuutta Dummy, (Hi-Fi) Testataan toimintojen loogisuutta Tärkeiden toimintojen opittavuutta 37/42 Heuristiset menetelmät Menetelmä Verrataan sovelluksen piirteitä nyrkkisääntöihin Listataan kohdat joissa sovellus eroaa säännöistä Esimerkiksi Nielsen -93, Usability engineering... Tulokset Kohtia, joissa sovellus eroaa suositellusta tavasta Keskittyy opittavuuteen, affordanceen, toimintojen samanlaisuuteen. Myös yksityiskohtia, pintavikoja Prototyypit GUI-maailmassa: Isensee, S., Rudd J. The Art of Rapid Prototyping Heuristinen arviointi: http://www.useit.com/papers/heuristic/ 38/42 Menetelmä Laaditaan tehtäviä, joita sovelluksella tehdään. Yksi tai kaksi käyttäjää kerrallaan tekee tehtävät, yleensä ääneen ajatellen Tuloksista analysoidaan virheet ja niiden syyt. Käytettävyystesti Tulokset Tuloksena havaittuja ongelmia ja tietoa siitä mikä ongelmat aiheutti Osasovelluksen tulokset yleensä yleistettävissä. Uutta, objektiivista tietoa Eivät synny itsestään Tarvittavat tekniset ratkaisut Käyttäjien käytössä oleva tekniikka Yhteydet käytetty laitteisto mielenkiinto Java... Serveripuolen tekniikka Oikealla tavalla tehokas Laajentuva Serverin ohjelmisto Avoin Ei itsevaltias Itse sovellus Tietokantojen rakenne Vuorovaikutus Tulevaisuus Avoimuus Skaalautuvuus Standardit 39/42 40/42 Kallista? http://www.zdnet.com/devhead/stories/articles/0,4413,2224316,00.html Uutuudet Mynti Kaikkea kivaa Kyselyt, logit tukena ja apuna Käyttäjällä ei ole täydellistä mallia palvelun toiminnasta Ei voi tietää sitä mistä ei tiedä Kyselyihin vastataan huonosti, epäselvästi. Kyselyt ja laskurit apuna. Ei perusteena. Yhteenveto Käytettävyys tapa katsoa tietokonetta vuorovaikutusvälineenä (mediana) on ~ tehokasta ja tuottavaa helppokäyttöisyyttä ei (nykytiedon mukaan) synny ilman yhteistyötä käyttäjien kanssa Käyttöliittymä tärkeä osa (nykyisten) tietojärjestelmien käytettävyyden toteuttamisessa tulisi soveltua käyttäjälle, tehtävään, päätelaitteeseen... Palautteen keräämisestä: http://www.useit.com/alertbox/990110.html 41/42 42/42