WWW-palvelun suunnittelu WWW-käytettävyys Adage Oy Jarmo Parkkinen 30.1.2007 Adage Usability
WWW-käytettävyys Käytettävyys Sananen saavutettavuudesta Esimerkkejä tyypillisistä ongelmista Suunnitteluohjeita Suunnitteluprosessi Adage: http://www.adage.fi/ Sivu 2 / 45
Käytettävyyden määritelmä Hyvä käytettävyys tarkoittaa miellyttävää, nopeaa ja tehokasta työskentelyä laitteen tai tuotteen parissa. Käytettävyys on tuotteen ominaisuus, jota voidaan mitata ja parantaa. Käytettävyyteen vaikuttaa aina Käyttäjän tarpeet Käyttötilanne Hyvä käytettävyyden taso on prosessi Tarpeet ja tilanteet muuttuvat Teknologia antaa uusia mahdollisuuksia Liiketoiminta tarjoaa mahdollisuuksia ja tarpeita Riittävä käytettävyyden taso on tuotteen hyväksyttävyysvaatimus. Sivu 3 / 45
Käytettävyys suhteessa toteutukseen Adage Usability 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 / 45
Käytettävyydestä saatava mitattava hyöty? Ei ole suoranaista mitattavaa markkinointihyötyä samalla tavalla kuin väreillä ja muotoilulla (Panu Korhonen, Nokia NRC) Design-myönteiset yritykset ovat 200% tehokkaampia kasvajia kuin vertailuryhmä (David Kester, Design Council UK) Käytettävyys vahvistaa Nokian brändiä, parantaa käyttäjätyytyväisyyttä ja nopeuttaa tuotekehitystä (Jussi Kapanen, Nokia NET) Parantaa sivustojen kykyä ohjata käyttäjät haluttuihin toimintoihin ja tehostaa käyttäjien toimintaa (150% - mitä se tarkoittaakin) (Jakob Nielsen, NNGroup; Usability ROI study) Sivu 6 / 45
Tunnettuja ärsyttävyystekijöitä Design Element Pops-up in front of your window Loads slowly Tries to trick you into clicking on it Does not have a "Close" button Covers what you are trying to see Doesn't say what it is for Moves content around Occupies most of the page Blinks on and off Floats across the screen Automatically plays sound Users Answering "Very Negatively" or "Negatively" 95% 94% 94% 93% 93% 92% 92% 90% 87% 79% 79% Pop-up estosovelluksia löytyy noin 70 prosentissa koneista Mutta! Perinteinen, kehykseen asetettu Pop-up-ikkuna on tehokkain verkkomainonnan keino (Carl Patrik Nilsson: Attention To Advertising) http://www.useit.com/alertbox/20041206.html Sivu 7 / 45
Tyypillisiä ongelmia Adage Usability
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 9 / 45
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 10 / 45
Konventiot Adage Usability 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 11 / 45
Teoriaa silmänliikkeistä Kaksi vaihetta: fiksaatio sakkadi Adage Usability 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 12 / 45
Sivu 13 / 45
Saavutettavuusongelmia Adage Usability 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 14 / 45
WWW-sivujen 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 15 / 45
Konsistenssi Adage Usability 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) Windows design guidelines: http://msdn.microsoft.com/ui/ Java design guidelines: http://java.sun.com/products/jlf/dg/ Sivu 16 / 45
Kenelle sivujen tulee olla hyvät Investoinnin ammattilaiset Etsivät tietoja koti- ja ulkomaisia rahastoja varten tai hajauttavat salkkua Analyytikot Suosittelevat kohteita ja auttavat päätöksenteossa Toimittajat Talous- ja maallikkotoimitus Sivu 17 / 45
Joitain ohjeita - sivun suunnittelu Sivu 18 / 45
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
Tiedon esittäminen verkkosivulla Missä ollaan Mihin kokonaisuuteen esitetty asia kuuluu Miten pääsen liittyvään tietoon Milloin tieto on tuotettu, milloin se on julkaistu Ytimekkäät, lyhyet otsikot Väliotsikointi tärkeää Visualisoinnit ja kuvituskuvat Ovat hyvä, mutta ei pakollinen Sivu 20 / 45
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ä) kannattaa luoda eri tyylit (esimerksi linkin sijainti sivulla) syventävälle tiedolle, taustatiedolle, ulos johtaville linkeille Tarpeeksi väljää tekstiä; ei isoja tekstimassoja väliotsikoiden tai tärkeiden asioiden lihavoinnin käyttö parantaa silmäiltävyyttä Liehureuna (nopeuttaa ja tarkentaa lukemista, mutta vaikea hallita) Lyhenteet kirjoitetaan auki aina kun niitä käytetään Sivu 21 / 45
Kuvien oikea käyttö Kuvien tarkoitus voi olla: tunnelman luonti asian havainnolistaminen 1000 sanaa huomionkiinnittäminen legitimitointi (logot yms) Verkkotekstissä abstraktit kuvat eivät toimi hyvin kuvista tulkitaan niiden kirjaimellinen taso Tekijänoikeuskysymykset Sivu 22 / 45
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 23 / 45
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 24 / 45
Miten kirjoitetaan? Adage Usability 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 25 / 45
Joitain ohjeita - rakenne Sivu 26 / 45
Rakenne ja navigaatio Navigaatioelementit ovat sivuston keino auttaa käyttäjiä navigoimaan. Navigointi on mielenkiintoisen materiaalin löytymistä tehtävän suorittamista uuden oppimista Oletettu navigaatiorakenne ei ole aina sama kuin kohdealueen oikea rakenne. Sivu 27 / 45
Rakenne Adage Usability 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 28 / 45
Rakenteen hyvyyden arviointi Nopeus Siirtyminen ennestään tuttuun sijaintiin Siirtyminen ennestään tuntemattomaan sijaintiin Vastaus laajaan, useita sijainteja vaativaan kysymykseen Kohteen puuttumisen toteamisen nopeus Tarkkuus Avoimen kysymyksen vastauksen laatu (subjektiivinen) Kohteen puuttumisen toteamisen oikeellisuus Virheiden määrä Vääriin oksiin kohdistuneet klikkaukset Vääriin dokumentteihin johtaneet polut Kognitiivinen kuormitus Turhautuneisuuden, rasittumisen, väsymisen määrä Haluttomuus käyttää palvelua Miellyttävyys Mieltymys sivustoa tai esitystapaa kohtaan. Sivu 29 / 45
Erilaiset rakenteet suljettujen ja avointen tehtävien suhteen Polulta harhautumisia, Back painalluksia, kulunut aika (sekuntia) USA, 2002 http://psychology.wichita.edu/surl/usabilitynews/42/hypertext.htm Sivu 30 / 45
Navigaation sijoittelu Navigaatioelementille on varattava tilaa Navigaatiotyylit vasen laita 30% korvakkeet 30% ylälaita 18% kategorioita sivun keskellä 12% alasvetovalikot 10% muut 6% Odotettu sijainti sivuston sisäisille linkeille (USA, 2001) (SURL) Odotettu sijainti ulos johtaville linkeille (USA, 2001) (SURL) Sivu 31 / 45
Joitain ohjeita - palaute ja mediatyypit Sivu 32 / 45
Palaute Adage Usability 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 33 / 45
Missä palaute luuraa? Adage Usability 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 34 / 45
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 35 / 45
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 36 / 45
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) Adage Usability 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 37 / 45
Saavutettavuusohjeita Adage Usability 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 38 / 45
Sähköposti sivuston osana Rekisteröitymisen vaivattomuus Tiedotteiden kohderyhmäkohtaisuus personointi o saa mitä tilaa Muokkaaminen tai lopettaminen Helppoa Nopeaa Vahvistusviestit RSS (Really Simple Syndication) Sivu 39 / 45
WWW-tuotekehitysprosessi työvaiheineen Sivu 40 / 45
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 41 / 45
... muuntaminen Adage Usability 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 42 / 45
Miksi meillä on ongelmia? Adage Usability 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 43 / 45
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 44 / 45
References Adage Usability 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 45 / 45