Thl.fi Terveyden ja hyvinvoinnin laitos Kati Haanpää, Katri Kleemola Käytettävyyden asiantuntija-arviointi Marjo Haahtela 20.12.2013
Sisältö 1. Johdanto 2. Havainnot 2.1. Nykyisiä hyviä ratkaisuja 2.2. Etusivu 2.3. Navigaatio 2.4. Sivurakenne ja ulkoasu 2.5. Aiheen etusivu 2.6. Mobiiliversio 3. Yhteenveto 3.1. Yhteystiedot 4. Liitteet 4.1. Havaintojen luokittelu 4.2. Käytettävyyden asiantuntijaarvio 4.3. Adage Oy
1. Johdanto Uudistettavan Thl.fi-sivuston suunnitelmille tehtiin käytettävyyden asiantuntija-arviointi joulukuussa 2013. Arviointi tehtiin kuvakaappausten ja videoklippien avulla. Sivujen sisältö on vielä keskeneräistä, joten siihen ei arvioinnissa ole juurikaan puututtu. Arvioinnissa asiantuntija kävi sivuston suunnitelmat läpi arvioiden niitä käytettävyysalan kokemuksensa ja heurististen arviointivälineiden avulla. Tämän jälkeen tulokset koottiin yhteen, analysoitiin ja kirjattiin tähän raporttiin. Havaitut parannuskohteet, mielipiteet ja perustelut on esitetty kohtaan liittyvän kuvan vieressä. Havainnot on luokiteltu symbolien avulla. Mitä useampi jakoavain, sitä tärkeämpi havainto. Luokitus kuvataan tarkemmin liitteessä. Kuhunkin kohtaan on liitetty myös parannusehdotus. Esitetyt parannusehdotukset eivät ole ainoita mahdollisia tapoja parantaa tuotteen käytettävyyttä. 3
2. Havainnot 2.1. Nykyisiä hyviä ratkaisuja 2.2. Etusivu 2.3. Navigaatio 2.4. Sivurakenne ja ulkoasu 2.5. Aiheen etusivu 2.6. Mobiiliversio
2.1. Nykyisiä hyviä ratkaisuja Thl.fi:ssä on paljon hyviä ratkaisuja, mutta niitä ei tutkimuksessa erikseen kerätty. Haluamme kuitenkin mainita muutamia erityisen onnistuneita ratkaisuja, joiden säilyttämiseen on syytä pyrkiä. Sisältösivu (esimerkiksi Rikos- ja riita-asioiden sovittelu) vaikuttaa rakenteellisesti helpolta hahmottaa. Sivun värimaailma on riittävän selkeä, jotta asiat erottuvat hyvin ilman voimakkaita korostuksia. Tyhjää tilaa on käytetty onnistuneesti sekä raikastamaan että selkiyttämään sivuston ulkoasua. Yhtenevän värin käyttäminen teemoittain sivujen yläosan taustakuvassa ja valikoiden värissä sekä eri osioiden erottaminen eri väreillä saattaa olla hyvä apu selventämään käyttäjän sijaintia sivustolla. Valikoitujen THL:n tuotteiden nostaminen etusivun karuselliin saattaa olla osalle käyttäjistä hyvä tapa löytää sivustolta sellaista heitä kiinnostavaa sisältöä, mitä he eivät muuten tulisi etsineeksi. Mobiiliversioissa on riittävästi tilaa linkkien välillä. 5
2.2. Etusivu 1/2 Karuselli Valikoituja THL:n tuotteita vaikuttaa mainiolta elementiltä tarjota oikopolkuja THL:n sisältöön. Vaikka tavallisten sivustojen käyttäjät eivät useinkaan katso mainosmaisia elementtejä, THL:n käyttäjät saattavaa karusellin eri sivuja katsoakin. Karuselli jää kuitenkin sivulla melko alas eikä sitä välttämättä huomata. Harkitaan aihelistauksen madaltamista. Aiheet-alue vie melko korkean alueen etusivulta pyöreiden kuvien takia. Alueen madaltamista voisi harkita. Eri aihealueiden tunnistamisen nopeuttamista auttavien kuvien löytäminen on hankalaa, sillä käytettävien kuvien ei myöskään pitäisi lisätä visuaalista hälyä etusivulle. 6
2.2. Etusivu 2/2 Sivun vieritys Käyttäjä saattaa lopettaa sivun vierityksen liian aikaisin. Vaaleanvihreällä taustalla oleva alue vaikuttaa jonkin verran alatunnisteelta: Vaaleanvihreä tausta on koko sivun levyinen. Edellisen sisällön ja vihreällä taustalla olevan sisällön välillä on melko paljon tyhjää. Muutetaan etusivun ulkoasua niin, että leveä taustapalkki ei saa alaosan sisältöä vaikuttamaan alatunnisteelta. Harkitaan esimerkiksi tapahtumien nostamista ylemmäs etusivulla. Mikäli yläosan vihreissä alueissa on tapahtumia kuten kuvakaappauksessa, samaan yhteyteen voi lisätä Kaikki tapahtumat -linkin. 7
2.3. Navigaatio 1/6 Valikoiden erilaiset toiminnat Sivuston navigaatio toimii eri tavoin eri osioissa. Osassa osioista käytetään harmaata vaakavalikkoa ja osassa kaikki sisältö näytetään vasemmassa valikossa. Pyritään käyttämään yhtenäistä valikon toimintatapaa sivuston eri osioissa. 8
2.3. Navigaatio 2/6 Valikon toinen taso Valikon toinen taso katoaa käyttäjän edetessä ilmeisesti sen takia, että vasempaan valikkoon ei haluta kuin kolme tasoa. Tämä on ongelmallista, sillä muutosta on hyvin vaikea huomata etenkin kun käyttäjän katse on todennäköisesti sisältöosassa. Edelliselle tasolle palaaminen vaatisi murupolun käyttämistä. Se on kuitenkin melko kaukana valikosta, joten kaikki eivät sitä edes huomaa. Lisäksi on edelleen käyttäjiä, jotka eivät osaa käyttää murupolkua. Mikäli käyttäjä ei huomaa murupolkua, hän käyttää joko selaimen Takaisin-painiketta tai joutuu etsimään valikkotason varsin pitkän matkan kautta Aiheet-valikosta. Jatkuu seuraavalla sivulla 9
2.3. Navigaatio 3/6 Valikon toinen taso Jatkoa edelliseltä sivulta Toinen ongelma on, että Googlen tai ristiinlinkityksen kautta tulevat eivät edes huomaa, että jokin valikon taso puuttuu. Näytetään kaksi harmaata valikkotasoa allekkain mutta hieman erivärisellä taustalla. Valikoilla pitää olla hieman erilainen tausta, jotta ne eivät sekoitu keskenään. Jos tason lisääminen vaakavalikkoon on hankalaa, niin silloin alempi harmaa taso (alemmassa kuvassa oleva valikko Ajankohtaista, Koulutus, Peliongelman hoito jne.) kannattaa siirtää vasempaan laitaan. Tämä saattaa olla parempi ratkaisu, jotta valikko toimisi kaikissa osioissa samalla tavalla ja vasemmasta valikosta löytyisi aina yhden aihealueen kaikki sisältö. 10
2.3. Navigaatio 4/6 Vasen valikko Vasemmasta valikosta katoaa taso käyttäjän klikatessa jotain valikon kohtaa. Ainoa indikaatio tästä on murupolku. Vasemman valikon toimintaan liittyy muutamia seikkoja, jotka haittaavat sen ymmärtämistä: Poistuvasta tasosta ei jää mitään merkkiä. Monilla sivustoilla jätetään klikattu termi näkyviin, jolloin käyttäjä näkee sisennyksistä hierarkian. Esimerkiksi Thl.fi:ssä näkyisi vasemmassa valikossa Alkoholi, sen alla sisennettynä Alkoholitilastot ja sitten alla sisennettynä Alkoholitilastot-kohdan alakohdat. Alkoholi ei siis poistuisi näkyvistä vasemmasta valikosta, kun käyttäjä klikkaa Alkoholitilastot. Jatkuu seuraavalla sivulla 11
2.3. Navigaatio 5/6 Vasen valikko Jatkoa edelliseltä sivulta Käyttäjän katse on harmaan valikon alapuolella. Hän ei katso vaakavalikon ja ison otsikon yläpuolella olevaa murupolkua. Jos käyttäjä klikkaa Päihdehaittakustannukset-linkkiä, Alkoholitilastot-kohdan perään ilmestyy pieni valkoinen nuoli. Se ei kuitenkaan erotu eikä näin ollen auta käyttäjää. Jatkuu seuraavalla sivulla 12
2.3. Navigaatio 6/6 Vasen valikko Jatkoa edelliseltä sivulta Vasemman valikon toimintaa on syytä selkeyttää niin, että sen sisältö on selvä. Oikean ratkaisuehdotuksen ehdottaminen on hankalaa, kun emme tunne sisällön kokonaismäärää. Yksi vaihtoehto on näyttää vasemmassa valikossa klikatut kohdat sisennettynä: esimerkiksi Alkoholi sekä Alkoholitilastot ja niiden alla Alkoholitilastot-kohdan alatasot. Tämä mahdollistaa koko alkoholiaiheisen sisällön löytämisen vasemman valikon kautta eikä käyttäjän tarvitse klikata vaakavalikkoa löytääkseen Alkoholihaittojen ehkäisy tai Alkoholin kulutus -kohdat. Eräs vaihtoehto on käyttää harmaassa valikossa kahta hieman eriväristä vaakavalikkotasoa kunhan niiden hierarkia käy selkeästi esille. Tällöin saattaisi olla mahdollista, että vasen valikko jäisi riittävän matalaksi, jotta siinä voitaisiin näyttää kaikki termit. Ongelmana on toki se, että saman aihepiirin asiaa on sekä alemmassa vaakavalikon tasossa että vasemmassa tasossa. Joillain sivustoilla poistetaan vasemman valikon ylempiä tasoja kuten Thl.fi:n versiossakin, mutta näytetään kaksi alinta tasoa kokonaan. Tällöin rinnakkaisten termien välillä liikkuminen on helppoa eikä vaadi klikkaamaan edellistä valikkotasoa auki. 13
2.4. Sivurakenne ja ulkoasu 1/2 Alareunan linkit Sisältösivujen alareunassa ovat Lisää aiheesta - ja Muualla verkossa -otsikot, joiden alapuolella on aiheeseen liittyviä linkkejä. Käyttäjät eivät välttämättä vieritä riittävän pitkälle nähdäkseen linkkilistat. Tämä johtuu siitä, että sisältöosan alapuolella on sekä päivitystieto että sosiaaliseen mediaan liittyvät elementit ja sivun tulostus. Nämä ovat yleensä vasta aivan sivun lopussa. Näytetään linkkilistat ennen sivun päivitystietoja. 14
2.4. Sivurakenne ja ulkoasu 2/2 Lisätietolinkit Sisältöosan viereen oikeaan palstaan on lisätty selkeitä lisätietolinkkejä. Joitain linkkejä on kuitenkin aivan sivun alalaidassa. Käyttäjälle jäänee epäselväksi, mitä linkkejä on oikealla ja mitä alhaalla. On myös mahdollista, että käyttäjä olettaa kaiken lisätiedon löytyvän oikean laidan kautta eikä edes osaa etsiä sivun alalaidasta lisätietoa. Mikäli mahdollista, tarjotaan lisätieto samassa paikassa. Jos eri linkkipaikat liittyvät sivun sijaintiin (sivustolla, THL:n palveluissa tai sivuston ulkopuolella), niin linkin yhteydessä on syytä selkeämmin mainita, mihin linkki vie. Ulkopuolisen sivuston nimen voi mainita sulkeissa, mikäli se ei ilmene linkin tekstistä. 15
2.5. Aiheen etusivu Sisällön järjestys Sisällöt ovat suuntaa-antavia, joten havainto saattaa johtua siitä, että sisältöä ei ole vielä mietitty. Aiheen etusivulla on kuitenkin sivun yläosassa melko korkea kuva. Sen alapuolella on esitelty kuvien kera ne osiot, jotka löytyvät valikosta. Vasta melko pitkän vierittämisen jälkeen näkyvät Hankkeet ja ohjelmat sekä esimerkiksi Käsikirjat. Kannattaa pohtia, olisiko sivun yläosaa syytä lyhentää, jotta tärkeä aihepiiriin liittyvä tieto saataisiin nostettua. Yläosan tietoihin pääsee suoraan valikosta, mutta sivun alareunassa olevia asioita pitää etsiä navigaation kautta. Jos sivun alaosan asiat ovat ristiinlinkityksiä, on ymmärrettävää, että ne ovat vähäisemmällä painoarvolla. 16
2.6. Mobiiliversio 1/3 Valikko Valikon vihreä symboli erottuu hieman heikosti. Se olisi helpompi huomata oikeasta laidasta etenkin jos se on vastaavan harmaan valikkosymbolin yläpuolella. Oikeassa laidassa se olisi myös helpommin oikean käden ulottuvilla. Harkitaan valikkosymbolin siirtämistä oikeaan laitaan. Esimerkiksi Kela.fi-sivustolla valikkosymboli on oikeassa laidassa. Yhteystiedot ja kielivalinnat ovat toisinaan valkoisella ja toisinaan harmaalla pohjalla. Harmaa pohja vaikuttaa selkeämmältä. Tällöin sen alapuolella olevat asiat ryhmittyvät paremmin yhteen. Käytetään yhteystiedoilla ja kielivalinnoilla harmaata taustaa. 17
2.6. Mobiiliversio 2/3 Sisällön järjestys Mobiiliversion sisältösivulla järjestys menee niin, että ensin näytetään koko sisältösivun keskipalsta lisätietolinkkeineen ja sen jälkeen oikean palstan sisältö. Tämä aiheuttaa sen, että tärkeämpi oikean laidan sisältö (eli linkit aihepiiriin liittyvään lakiin) näkyvät vasta Muualla verkossa -linkkien jälkeen. Mikäli mahdollista, näytetään linkit tärkeämpään sisältöön ensin. Ylipäätään kannattaa huolellisesti miettiä elementtien järjestys, kun useampi palsta yhdistetään. 18
2.6. Mobiiliversio 3/3 Tablettiversion valikko Tablettiversiossa yhden valikkotason katoaminen korostuu. Alemmasta kuvasta on hankala päästä enää Alkoholi-tasolle. Ongelmaa korostaa myös se, että murupolku on melko kaukana valikoista. Säilytetään vasemmassa valikossa näkyvissä klikatut termit. Harkitaan älypuhelinversiota vastaavan valikkoratkaisun lisäämistä oikeaan laitaan. 19
3. Yhteenveto 3.1. Yhteystiedot
3. Yhteenveto Monet Thl.fi-sivuston sisällön esittämiseen liittyvät tavat vaikuttavat selkeiltä. Sisältösivujen ulkoasusta ja rakenteesta on saatu tehtyä sellainen, että käyttäjä pystyy keskittymään oleelliseen asiaan. Ylipäätään suunnitelmien asiallisen rauhallinen ja luotettavalta vaikuttava tyyli sopii hyvin Thl.fi-sivustolle. Valikkorakenteesta katoaa toisinaan tasoja ja ne aiheuttavat käyttäjille hankaluutta. Todennäköisesti huomattava osa käyttäjistä ei edes huomaa, että jokin valikon taso katoaa. He katsovat sisältöalueelle ja näkevät mahdollisesti kuvan ja tekstin muuttuvan. Pieni muutos valikossa ei erotu. Vasemmassa valikossa on myös syytä säilyttää kaikki käyttäjän klikkaamat kohdat. Todennäköisesti myös se termi, jonka käyttäjä on vaakavalikosta valinnut. Etusivulla ja osioiden etusivuilla on syytä varmistaa, että sivu ei näytä loppuvan ennen kuin se todellisuudessa loppuu. Sisältösivuilla alareunan linkit kannattaa siirtää päivitystietojen yläpuolelle, jotta käyttäjä huomaa ne. 21
3.1. Yhteystiedot Kirjoittaja: Marjo Haahtela Senior User Experience Specialist 050 554 1259 marjo.haahtela@adage.fi Adage Oy Arabiankatu 12 00560 Helsinki 050 566 7980 http://adage.fi/ Lisätietoja: Raino Vastamäki Research Director 050 309 6169 raino.vastamaki@adage.fi Matti Helenius Sales Director 050 387 7038 matti.helenius@adage.fi 22
4. Liitteet 4.1. Havaintojen luokittelu 4.2. Käytettävyyden asiantuntija-arvio 4.3. Adage Oy
4.1. Havaintojen luokittelu Luokittelu Erittäin tärkeä Tärkeä Kohtalainen Vähäinen Luokittelematon Kuvaus Korjaamattomana voi estää keskeisen toiminnon käytön. Vaikutus tuotteen käytettävyyteen/käyttäjäkokemukseen erittäin suuri. Ehdottomasti korjattava. Korjaamattomana häiritsee tai hidastaa merkittävästi tehokasta tai miellyttävää käyttöä tai käytön oppimista. Vaikutus tuotteen käytettävyyteen/käyttäjäkokemukseen merkittävä. Syytä korjata. Korjaamattomana häiritsee tai hidastaa kohtalaisesti tehokasta tai miellyttävää käyttöä tai käytön oppimista. Vaikutus tuotteen käytettävyyteen/käyttäjäkokemukseen kohtalainen. Suositellaan korjattavaksi. Korjaamattomana häiritsee tai hidastaa jonkin verran tehokasta tai miellyttävää käyttöä tai käytön oppimista, yleensä kuitenkin melko rajatussa tilanteessa. Vaikutus tuotteen käytettävyyteen/käyttäjäkokemukseen vähäinen. Kannattaa korjata, jos siitä ei ole suurta vaivaa. Havaintoa ei voitu tutkimuksen perusteella selkeästi luokitella. Tähän voi olla syynä esimerkiksi tutkitun prototyypin keskeneräisyys. 24
4.2. Käytettävyyden asiantuntija-arvio Asiantuntija-arviossa Adagen asiantuntijat tutkivat tuotteen käytettävyyttä ja käyttökokemusta ammattitaitonsa pohjalta. Työssä hyödynnetään tietoa käytettävyyden ja käyttöliittymäsuunnittelun parhaista käytännöistä kognitiivisen psykologian käsitystä ihmisen toiminnasta, havaitsemisesta ja tiedonkäsittelystä erilaisia arviointimenetelmiä (heuristinen arviointi, kognitiivinen läpikäynti) asiantuntijoiden työssään kasvattamaa kokemusta. Arviointi voidaan suorittaa joko toimivalle tuotteelle tai sen eritasoisille prototyypeille aina paperiprototyypistä alkaen. Arvion suorittaa tyypillisesti 1 3 asiantuntijaa. Asiantuntijat suorittavat työn ensin itsenäisesti, minkä jälkeen tulokset kootaan yhteen ja analysoidaan. Analyysin pohjalta suunnitellaan parannuksia tuotteen käyttöliittymään. 25
4.3. Adage Oy Adage Oy on vuonna 2001 perustettu, käytettävyystutkimukseen ja käyttöliittymäsuunnitteluun erikoistunut suomalainen yritys. Adage työllistää 25 käytettävyyden huippuasiantuntijaa. Nykyisin Adage tekee yli 100 projektia vuodessa. Adagella on laaja kokemus vaativien projektien toteuttamisesta ja koordinoinnista sekä kotimaassa että ulkomailla. Teemme yhteistyötä sekä yritysten että julkishallinnon tuottamien palvelujen ja tuotteiden käytettävyyden ja käyttökokemuksen parantamiseksi. Olemme tehneet projekteja seuraavilla menetelmillä ja seuraavissa ympäristöissä: Tutkimus: käytettävyystestit, käytettävyyden asiantuntija-arvioinnit, esteettömyystutkimukset, vertailututkimukset, ryhmähaastattelut, yksilöhaastattelut, konseptitutkimukset, käyttäjäkyselyt, paneelitutkimukset, silmänliiketutkimukset, web-analytiikkatutkimukset, hankintavaiheen käytettävyyskriteeristöt ja arvioinnin, koulutukset Suunnittelu: esiselvitys, palvelustrategia, konseptisuunnittelu, käyttöliittymäsuunnittelu, visuaalinen suunnittelu, käyttöliittymän toteutus, sisällöntuotanto, tyyliopas, koulutukset Ympäristöt: verkkosivustot, verkkokaupat, intranetit, dokumentinhallintajärjestelmät, asiantuntijasovellukset, BI-järjestelmät, älypuhelin- ja tablettisovellukset, terveydenhuollon laitteistot, teollisuuden käyttöympäristöt, useat tekniset alustat (esim. SharePoint, EpiServer, Liferay, SAP). 26