WWW-sovelluksen käytettävyys Käytettävyys Sananen saavutettavuudesta Esimerkkejä tyypillisistä ongelmista Suunnitteluohjeita Yhteystiedot tms: http://www.cs.hut.fi/~jparkkin/ PM&RG: http://www.cs.hut.fi/~pmrg/index.html; Adage: http://www.adage.fi/ 1/31
Terminologiaa Nuorten yleisin respiratorinen arytmia on inspiraation yhteydessä esiintyvä benigni paroksysmaalinen takykardia non-steroidaalisia antiinflammatorisia lääkkeitä 2/31 Ohjeita dokumentointiin: http://www.gooddocuments.com/homepage/
WWW- sovelluksen laatu Käytettävyys 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ä 3/31
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... 4/31
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... 6/31 Nielseniltä samanlaisia havaintoja: http://www.useit.com/alertbox/990530.html
termit 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ä Selkokieli lyhyitä sanoja selkeät lauserakenteet vältä ja selitä abstraktiot http://www.verkkouutiset.fi/arkisto/1997.02.07/selko.htm 7/31 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/ 8/31 Spool, Jared et al. Web Site Usability: A designers Guide
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 9/31
Konsistenssi Toimintojen samanlaisuutta Ulkoasun ja toiminnan yhteneväisyys Eri toiminto on erilainen Eri asia kuin monotonisuus Aiheuttaa eksymistä, unohtamista Mutta konsistenssi minkä kanssa? Palvelun sisäinen Palveluperhe, sidospalvelut Internet Sama ikkuna Javalla ja Ntllä (Cordis: Protool) Kokeeko käyttäjä toimivansa WWWvai desktop-maailmassa Kapeneva ero -- ja sitten Windows design guidelines: http://msdn.microsoft.com/ui/ Java design guidelines: http://java.sun.com/products/jlf/dg/ 10/31
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 11/31
Joitain ohjeita 12/31
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, Aivot prosessoivat havainnoksi 13/31 Ilpo.Kojo@occuphealth.fi
14/31
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/ 15/31
16x16 paras 32x8 ja 8x32 melkein yhtä hyviä 8x8x4 paljon huonompi Kuoppa, suora, mäki 8x2x2x8 paras 4x4x4x4 2x8x8x2 huonoin Rakenne Kategorisoinnin suorittaa ammattilainen Testataan Kategorisointi käyttäjien kanssa lappusulkeisia Testataan 8X32 - rakenne: 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 16/31
Lay-out Tukee työtä Painikkeiden vaikutusalue selvä Työn eteneminen selkeää ylhäältä alas, vasemmalta oikealle Näppäimistön käyttö helppoa Antaa lisätietoa - ei opasta harhaan Konventiot Totuttuja tapoja Käyttäjillä eri kuin suunnittelijalla Saattavat ohjata harhaan tai helpottaa opittavuutta 17/31 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 18/31
Kuvien oikea käyttö Kuvien tarkoitus voi olla: tuotteesta tai uutisesta kertominen asian havainnolistaminen 1000 sanaa tunnelman luonti huomionkiinnittäminen legitimitointi (logot yms) Välkkyvät, vilkuvat, liikkuvat kuvat saattavat viedä huomion tärkeimmältä, sisällöltä 19/31
Merkitään selvästi Linkit perinteinen sininen ja alleviivauttu eroaa leipätekstistä Ei saa mennä sekaisin korostuksien kanssa Erilaisia linkkejä Miten merkitä sivustolta ulos suuntaavat linkit? yleisin tapa lay-outilla Milloin avataan uuteen ikkunaan? Kuvalinkit, varsinkin artikkeleissa ja uutisissa kuva tunnistetaan sanaa nopeammin, muistetaan pidempään Sivut eivät sisällä linkkiä itseensä! -> linkki tulee passivoida 20/31
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 21/31 Miten kirjoittaa webiin: http://www.useit.com/papers/webwriting/
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/31
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/31
Kaksi palautteen detaljia Palaute tilasta paikasta Haun palaute mitä haettiin tulokset mielekkyysjärjestyksessä (paniikki: sanojen määrä / aakkosjärjestys) 24/31 Don t Make Me Think; Steve Grugg, 2000
Tehdäänkö se weppiin? 25/31
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 26/31
Tehtävien tunnistaminen Tehtävät ovat käyttäjäryhmäkohtaisia Onko työ vai huvi? Säännöllinen / epäsäännöllinen? Tiedot, taidot, entiset kokemukset konventiot Halu oppia 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 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 27/31
Verkkoon muuntaminen... 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 28/31
... 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) 29/31
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 30/31 Prototyypit GUI-maailmassa: Isensee, S., Rudd J. The Art of Rapid Prototyping
WWW-Käytettävyys Yhteenveto WWW-sovellus on keino asioiden hoitamiseen, tiedon saamiseen tai yhteyden pitämiseen Toiminnallisuuksien ja tietojen priorisoiminen tärkeää Webissä on kilpailua Sisältö käytön kohteena; navigaatio ja lay-out keinona WWW-käyttöliittymä Ajatellaan nykyisin rakenteen ja lay-outin yhdistelmänä Oikean sivun löytyminen ja sivun käyttäminen Sivujen vertaaminen Tyypilliset ongelmakohdat: termit, palaute, sekava layout 31/31