Hypertekstin käytettävyys Adage Oy Jarmo Parkkinen 9.2.2006
Hypertekstidokumentin käytettävyys Käytettävyys Sananen saavutettavuudesta Esimerkkejä tyypillisistä ongelmista Suunnitteluohjeita Suunnitteluprosessi Adage: http://www.adage.fi/ Sivu 2 / 35
Terminologiaa Nuorten yleisin respiratorinen arytmia on inspiraation yhteydessä esiintyvä benigni paroksysmaalinen takykardia non-steroidaalisia antiinflammatorisia lääkkeitä Ohjeita dokumentointiin: http://www.gooddocuments.com/homepage/ Sivu 3 / 35
WWW- sovelluksen käytettävyys 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ä 9.2.2006
Saavutettavuus ja käytettävyys Saavutettavuus on tietoista työskentelyä tasaarvoisuuden hyväksi Hannele Hyppönen, Stakes (mukaellen) Laatu Saavutettavuus Erityisryhmät Erityistilanteet... Käytettävyys Tehokkuus Tuottavuus Miellyttävyys Hyväksyttävyys... Laillisuus Eettisyys... Nielsen 1993 (mukaellen) Sivu 5 / 35
Tyypillisiä ongelmia
Tyypillisimmät WWW-kä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... Nielseniltä samanlaisia havaintoja: http://www.useit.com/alertbox/990530.html Sivu 7 / 35
termit Käyttäjät eivät tiedä ATKalan sanastoa eikä tarvitsekaan Merkitys eri suunnittelija, tilaaja, asiakas Internet = WWW 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 Tutkimus: miten käyttäjät lukevat Netistä: http://www.useit.com/papers/webwriting/ Sivu 8 / 35
Ihminen huomaa, kone muistaa Toimintojen tulisi näkyvissä ja huomattavissa Läpinäkyvyys hyvä o 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/ Spool, Jared et al. Web Site Usability: A designers Guide Sivu 9 / 35
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... Web ja desktop lähstyvät toisiaan: http://www.user.com/chi98/workshop/fellenz/applets.htm Sivu 10 / 35
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 Sivu 11 / 35
Sivu 12 / 35
Median lukutottumuksia... Kokeneet WWW-kä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/itg /newsletter/dec98/banner _blindness.html Lähinnä tottumusta (konventiot) http://www.poynter.org/eyetrack2000/ Sivu 13 / 35
Konsistenssi Toimintojen samanlaisuutta Sama toiminto näyttää samalta ja toimii samalla tavalla Eri toiminto on erilainen Eri asia kuin monotonisuus Mutta konsistenssi minkä kanssa? Sama ikkuna Javalla ja Ntllä (Cordis: Protool) Kokeeko käyttäjä toimivansa WWW- vai desktop-maailmassa Kapeneva ero -- ja sitten Windows design guidelines: http://msdn.microsoft.com/ui/ Java design guidelines: http://java.sun.com/products/jlf/dg/ Sivu 14 / 35
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 Sivu 15 / 35
Joitain ohjeita Sivu 16 / 35
Rakenne 16x16 paras 32x8 ja 8x32 melkein yhtä hyv 8x8x4 paljon huonompi Kuoppa parempi kuin suora 6x2x2x12 parempi kuin 4x4x4x4 Mäki huonompi kuin suora 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 Sivu 17 / 35
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 Design 9.2.2006 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 selaimen asetuksista 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 Sivu 19 / 35
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 Sivu 20 / 35
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 Sivu 21 / 35
Hyvää ja huonoa linkitystä Hypertekstin ajatus syntyi jo vuonna 1947 Vannevar Bushin kirjoituksessa. Ensimmäiset konkreettiset sovellukset ovat 70-luvulta, 80-luvulta useita sovelluksia (esimerkiksi Hypercard). Hypertekstin keskeinen käsite on linkki. Periaatteessa linkin käsite on selkeä tietystä asiasta saa lisätietoa. Jossain vaiheessa syntyy kuitenkin ongelma, koska oikean kohteen valinta riippuu lauseyhteydestä ja kokonaisuudesta. Voit ladata kaikki liitetiedostot tästä. Hakulomake 3a Liite 3a1 hakulomakkeeseen > Rahoituslaskelma (liite 3a2, excel) Hypertekstin ajatus syntyi jo vuonna 1947 Vannevar Bushin kirjoituksessa. Ensimmäiset konkreettiset sovellukset ovat 70-luvulta, 80-luvulta useita sovelluksia (esimerkiksi Hypercard). Hypertekstin keskeinen käsite on linkki. Periaatteessa linkin käsite on selkeä tietystä asiasta saa lisätietoa. Jossain vaiheessa syntyy kuitenkin ongelma, koska oikean kohteen valinta riippuu lauseyhteydestä ja kokonaisuudesta. Vannevar Bushin artikkeli vuodelta 1947 Hypercard, ensimmäisiä kaupallisia sovelluksia Linkin määritelmä (RFC zzxx) Miten ihmisen käsitteet muodostuvat Lukeminen ja kokonaisuuksien hahmottaminen Hakulomake: Lomake 3a (.doc): (Liitteen tyyppi): Liite 3a1 (.doc): Rahoituslaskelma Liite 3a2 (.xls) Voit myös ladata kaikki edellämainitut Lataa kaikki hakulomakkeen tiedostot (.zip, 488kb) Sivu 22 / 35
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 Miten kirjoittaa webiin: http://www.useit.com/papers/webwriting/ Sivu 23 / 35
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 Sivu 24 / 35
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 Sivu 25 / 35
Kaksi palautteen detaljia Palaute tilasta paikasta Haun palaute mitä haettiin tulokset mielekkyysjärjestyksessä (paniikki: sanojen määrä / aakkosjärjestys) Don t Make Me Think; Steve Grugg, 2000 Sivu 26 / 35
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 Multimediaohjeita: http://www.lboro.ac.uk/research/husat/eusc/r_usability_guides.html#multimedia Sivu 27 / 35
Pysäytetty kuva Vertaaminen, oppiminen Animointi Huomio, yleisnäkymä, todellisuus Teksti Selittäminen, oppiminen, abstraktit asiat, lyhentäminen Puhe Ääni Ohjaus, opastus Huomio, muutos Muuttuva (dynaminen&ajasta riippuva) Puhe, ääni, animaatio, video Ei-muuttuva (Valo)kuva, teksti Abstrakti Tunne, esteettinen kokemus Konkreettinen ISO 14915-3 (draft) Selection of media and media combination Sivu 28 / 35
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/ http://www.ijkk.fi/tasanet/seminaarit_e.htm Sivu 29 / 35
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 Sivu 30 / 35
... 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) Sivu 31 / 35
WWW-tuotekehitysprosessi työvaiheineen Sivu 32 / 35
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 Sivu 33 / 35
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 Toteutus Pilotti Käyttöönotto Projektin lopetus WWW-sovelluksen tuotantoprosessi ja käytettävyys: http://www.uiah.fi/mediastudio/survey4/ Sivu 34 / 35
References ISO 9241-11, Ergonomic requirements for office work with visual display terminals, Part 11, Guidance on usability 1999 ISO 13407, Human-centred design processes for interactive systems, Final Draft (1999) ISO 14915-dis 3, ISO 14915 Multimedia User Interface Design, Part 3 Media Selection and Media, Draft (1999) Isensee, S., Rudd J. The Art of Rapid Prototyping Nielsen J. (1993) Usability Engineering Lupton E., Miller A. Design Writing Research : Writing on Graphic Design Nielsen J. (1994-2000) Useit, http://www.useit.com/ Nielsen J., Mack R (1995), Usability Inspection Methods Norman, D. A (1988) The Psychology of Everyday Things Parkkinen, Jarmo: Hyvään verkkopalveluun! Käytettävyysopas verkkoviestijälle, Infor 2002 Sinkkonen I., Kuoppala H., Parkkinen J., Vastamäki R.: Käytettävyyden psykologia, IT-Press 2001 Raskin, J. (2000) The Humane Interface Sivu 35 / 35