WWW-käytettävyys Käytettävyys Sananen saavutettavuudesta Esimerkkejä tyypillisistä ongelmista Suunnitteluohjeita Suunnitteluprosessi Yhteystiedot tms: http://www.cs.hut.fi/~jparkkin/ PM&RG: http://www.cs.hut.fi/~pmrg/index.html; Adage: http://www.adage.fi/ 1/34
Lataa Acrobat reader tästä... 2/34
Palvelun laatu Tekniikka 10 5 0 Käyt... 1 5 Sisältö 9 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/34
WWW- sovelluksen Laatu Käyttöliittymä Soveltuu tarkoitukseen Käytön helppous Opittavuus Tehokkuus Navigointi Palaute Tarjonta Esteettisyys / sisältö Tekniikka Soveltuu tarkoitukseen Standardien mukainen Tarvitsijoiden saavutettavissa Oikea tekniikka oikeaan paikkaan Teknisesti tarjolla hakukoneet Sisältö Käytön tarkoitus; opittu asia Käyttäjän kokema merkitys Etsiminen / oppiminen Käyttäjän kieltä, objektiivista, ytimekästä 4/34
Saavutettavuus ja käytettävyys Saavutettavuus on tietoista työskentelyä tasaarvoisuuden hyväksi Hannele Hyppönen, Stakes (mukaellen) Laatu Käytettävyys Tehokkuus Tuottavuus Miellyttävyys Saavutettavuus Erityisryhmät Erityistilanteet... Nielsen 1993 (mukaellen) Hyväksyttävyys... Laillisuus Eettisyys... 5/34
Tyypillisiä ongelmia
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/34 Nielseniltä samanlaisia havaintoja: http://www.useit.com/alertbox/990530.html
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 Tutkimus: miten käyttäjät lukevat Netistä: http://www.useit.com/papers/webwriting/ lyhyitä sanoja selkeät lauserakenteet vältä ja selitä abstraktiot http://www.verkkouutiset.fi/arkisto/1997.02.07/selko.htm 8/34
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/34 Spool, Jared et al. Web Site Usability: A designers Guide
Teoriaa silmänliikkeistä Ilpo.Kojo@occuphealth.fi 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 10/34
11/34
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/ 12/34
Konventiot 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... Lukutottumukset verkossa ja printissä eroavat: http://www.useit.com/alertbox/20000514.html Web ja desktop lähstyvät toisiaan: http://www.user.com/chi98/workshop/fellenz/applets.htm 13/34
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) Palvelun sisäinen Läheisesti liittyvät Kilpailijat Muu netti Windows design guidelines: http://msdn.microsoft.com/ui/ Java design guidelines: http://java.sun.com/products/jlf/dg/ 14/34
Saavutettavuusongelmia Ylitarkat sivustot ( You need a browser that supports... ) Muotoilu kuvilla Erillinen tekstiversio kuka toteuttaa ominaisuudet & pitää yllä? Animoinnit välkkyminen, nopeus Huonot värivalinnat kontrasti, puna/viher 15/34
Joitain ohjeita 16/34
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 Pääsivu Linnut, kalat, kasvit, sienet, hämähäkit, hyönteiset, nisäkkäät, luokittelemattomat 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/34
Lay-out Tukee työtä Painikkeiden vaikutusalue selvä Työn eteneminen selkeää Antaa lisätietoa - ei opasta harhaan Näppäimistön käyttö helppoa Konventiot Totuttuja tapoja Käyttäjillä eri kuin suunnittelijalla Saattavat ohjata harhaan tai helpottaa opittavuutta 18/34 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 19/34
Miten kirjoitetaan? Ruudulta lukeminen 10% - 30% paperia hitaampaa Dokumentin rakenne tärkeää Osuvat otsikot Lyhyet kappaleet Katseen ohjausta: Lihavointia varovaisesti Kursivoitu vaikea lukea Alleviivaus vain linkkeihin! 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 20/34 Miten kirjoittaa webiin: http://www.useit.com/papers/webwriting/
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 21/34
Palaute Luonnollista, etenemisestä kertovaa ei vain virheilmoituksia ei vain keskeytyksiä esim: näppäimen painallus saa aikaiseksi kirjaimen Käyttäjän kielellä kohti tavoitetta vai siitä pois? 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 22/34
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 23/34
Kaksi palautteen detaljia Palaute tilasta paikasta Haun palaute mitä haettiin tulokset mielekkyysjärjestyksessä (paniikki: sanojen määrä / aakkosjärjestys) 24/34 Don t Make Me Think; Steve Grugg, 2000
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 25/34 Multimediaohjeita: http://www.lboro.ac.uk/research/husat/eusc/r_usability_guides.html#multimedia
Pysäytetty kuva Vertaaminen, oppiminen Animointi Huomio, yleisnäkymä, todellisuus Teksti Selittäminen, oppiminen, abstraktit asiat, lyhentäminen Puhe Ohjaus, opastus Ääni Huomio, muutos ISO 14915-3 (draft) Selection of media and media combination Muuttuva (dynaminen&ajasta riippuva) Puhe, ääni, animaatio, video Ei-muuttuva (Valo)kuva, teksti Abstrakti Tunne, esteettinen kokemus Konkreettinen 26/34
Käyttäjäkeskeinen tuotekehitys WWWpalveluiden kannalta 27/34
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 Webi saitti Pääsivu Tästää aletaan Huolto Type title here Webi saitti Uutuudet Mynti Type title here Type title here Huolto Type title here Kaikkea kivaa 28/34
WWW-tuotekehitysprosessi Tarvekartoitukset, Käyttäjähaastattelut Kokemukset olemassaolevista tuotteista Skenaariot, Käyttäjä- ja tehtäväkuvaukset Läpikäynnit, heuristiset menetelmät, pienet käytettävyystestit Hyväksymistesti(t) Tuotekehitysprojekti Tuotemäärittely Vaatimusmäärittely Projektin lopetus Toteutus Pilotti Käyttöönotto WWW-sovelluksen tuotantoprosessi ja käytettävyys: http://www.uiah.fi/mediastudio/survey4/ 29/34
Verkkoon muuntaminen... Metafora / analogia voi olla toimiva Fyysinen palvelu siirretään verkkoon tilisiirtolomakkeen lay-out verkkopankin lomakepohjana Metafora / analogia voi olla harhaanjohtava Fyysisen palvelun rajoitteet siirretään verkkoon Windowsin laskin 30/34
... 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) 31/34
sovelluksen toteutus 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ä 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 32/34
Prototyyppi Horisontaalinen Prototypisoidaan koko sovellukseen vaikuttavat asiat Lay-out, päivämäärän esitystapa, muodot Paperiprotot, eitoiminnalliset (Lo-Fi) Testataan Navigoitavuus konsistenssi Prototyypit GUI-maailmassa: Isensee, S., Rudd J. The Art of Rapid Prototyping 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 33/34
Yhteenveto Mitä WWW-kälin kautta tehdään? Haetaan informaatiota, piilovaikutuksia, viihdettä Hoidetaan työasioita, maksetaan laskuja, tilataan Jutellaan kavereiden kanssa WWW-käyttöliittymän tulisi olla tiettyyn tarkoitukseen laadittu (ei geneerinen) sopia tarkoitukseensa mahdollisimman hyvin olla konsistentti itsensä ja läheisten palveluiden kanssa sopia odotuksiin toimia riittävän esteettömästi 34/34