Käytettävyys www-sivujen suunnittelussa Anna Perttilä

Transkriptio

1 Käytettävyys www-sivujen suunnittelussa Anna Perttilä 1 Mitä käytettävyys on 2 Tavoite, kohderyhmä ja motiivi 3 Ymmärrettävyys 4 Www-sivusto on kokonaisuus 5 Konkreettista www-suunnittelussa 5.1 Ohjeisto 5.2 Sivujen resoluutio 5.3 Title -merkki 5.4 Laitteistovaatimukset 5.5 Linkit 5.6 Kuvat 5.7 Päivitys 5.8 Luettavuus 5.9 Animaatiot 5.10 Testaus LÄHTEET

2 Käytettävyys www-sivujen suunnittelussa Käyttöliittymä on tuotteen ja käyttäjän välinen rajapinta. Se kattaa kaiken, minkä käyttäjä havaitsee tuotteesta ja minkä avulla hän on vuorovaikutuksessa tuotteen kanssa. Käyttöliittymiin törmää päivittäin muun muassa työskennellessä tietokoneella, käyttämällä kännykkää tai katsoessaan kotona dvd:ltä elokuvaa. Www-sivut ovat yksi tuote jossa käyttöliittymä on merkittävässä asemassa. Millä perusteella sinä surfaat Internet-sivuilla? Tässä ohjeessa käytän esimerkkinä Oikotie.fi verkkosivuja. Sivuston löytää osoitteesta www. oikotie.fi. Ensivaikutelma on tärkein ja tämän takia visuaalinen ulkoasu on merkittävä www-sivuilla. Käyttäjä tekee hyvin nopeasti havaintonsa sivuista ja mikäli se ei miellytä, käyttäjä saattaa vaihtaa palveluntarjoajaa. Ulkoasun lisäksi käytettävyys vaikuttaa käyttäjäkokemukseen. 1 Mitä käytettävyys on? ISO eli kansainvälinen standardijärjestö määrittelee käytettävyyden näin: Käytettävyyden mittareita ovat vaikuttavuus, tehokkuus ja tyytyväisyys: miten tarkasti ja täydellisesti käyttäjä saavuttaa asetetut tavoitteet, kuinka paljon tähän kuluu voimavaro- 2 Tavoite, kohderyhmä ja motiivi Käyttöliittymän yleisenä tavoitteena on olla huomaamaton. Käyttöliittymä huomataan aina kun käyttäjä ei onnistu tekemässään toiminnossa tai käyttöliittymässä on virhe. Hyvässä www-sivun käyttöliittymässä sanoma, ilmaisu ja kohderyhmä ovat sopusoinnussa.

3 Sellaista www-sivustoa ei taida ollakaan, joka miellyttäisi kaikkia ihmisiä. Joku ei pidä väreistä, toinen haluaisi animaatiota, kolmas ei ymmärrä kieltä, jota sivustoilla käytetään. Tämän takia suunnitteluvaiheessa on hyvä määrittää sivuston tavoite, kohderyhmä ja käyttäjien motiivi. Määrittelyssä tulisi siis vastata kysymyksiin: Mitä me haluamme? Kenelle sivusto suunnitellaan? Miksi käyttäjän pitäisi kiinnostua tästä sivustosta? Kohderyhmä kannattaa rajata hyvin. Pelkästään suomalaisille ihmisille määritelty sivusto jättää liian paljon liikkumavaraa. Ikä, mieltymykset, arvot sekä käyttäjän kokemus Internetissä liikkumisesta auttavat jo paljon suunnittelemaan sivuston juuri oikealle kohderyhmälle. Motiivilla tarkoitetaan käyttäjän syytä käyttää sivustoa. Minkä takia käyttäjä olisi kiinnostunut sivustosta? Onko sivusto tarkoitettu viihteeksi, opetuskäyttöön, tiedonhakuun, kulutustoimintaan vai mihin? 3 Ymmärrettävyys Www-sivuissa, kuten myös muissa käyttöliittymissä tärkeää on helppo omaksuminen. Muihin laitekäyttöliittymiin verrattuna wwwsivujen tulisi olla niin helppokäyttöiset että käyttäjä pystyy etenemään tehtävissään jo heti ensimmäisellä käyttökerrallaan. Harvoin saat erikseen ohjekirjaa, jossa sinua neuvotaan kuinka www-sivuja tulisi käyttää. Hyvänä esimerkkinä voidaan pitää www-sivuja, joissa on hakutoimintoja. Hyvä käyttöliittymä sisältää itsessään ohjeita, millaisia merkkejä, missä muodossa ja mihin kohtaan käyttäjä täyttää tietoja. Monesti tulee vastaan sivustoja joissa on liian paljon oletuksia, joiden takia käyttäjä saattaa jäädä paikoilleen, koska ei esimerkiksi tiedä että kaikki sivun sarakkeet tulisi täyttää, jotta ohjelma voi jatkaa eteenpäin.

4 4 W Www-sivusto on kokonaisuus Omaksumisessa helpottaa sivuston yhtenäinen ulkoasu, rakenne ja toimintamalli. Käyttäjän tulisi nähdä sivusto kokonaisuutena, eikä vain sivu sivun jälkeen. Yhtenäinen ulkoasu saavutetaan graafisen suunnittelun avulla, kuten ottamalla huomioon sivuston värimaailma. Yhtenäinen värimaailma sivujen välillä kertoo käyttäjälle, mitkä asiat kuuluvat yhteen. Tätä voi myös käyttää tehokeinona, jos halutaan erottaa asioita toisistaan. Rakenteella tarkoitetaan niin sanottua sivuston pohjaratkaisua. Usein näkee sivustoratkaisuja joissa sivun keskellä on osa, johon sijoitetaan pääteksti ja sivuille linkkejä, mainoksia tai muita pienempiä tekstikenttiä sekä yläosaan navigointia helpottavat linkit. Tärkeää on, ettei käyttäjän katse joudu harhailemaan aina kun siirtyy toiselle sivuston sivulle vaan löytää etsimänsä aina samasta paikasta kuten esimerkiksi päätekstin. Toimivan rakenteen avulla käyttäjän huomio voidaan suunnata haluttuihin kohtiin. Esimerkiksi yrityksen logo on usein sijoitettu sivun vasempaan ylänurkkaan, koska on huomattu että ihmisen katse kiinnittää huomion ensimmäisenä vasempaan ylänurkkaan ja etenee siitä sivuille ja alaspäin. Erottuvuudessa auttaa värikontrastit sekä kirjainten ja kuvioiden koko. Toimintamalli on asia, jonka käyttäjä oppii sivustoilla ollessaan, mikäli sivusto tukee yhtenäistä toimintamallia. Navigointi eli suunnistaminen sivustolla tulee tehdä yhdenmukaisesti. Käyttäjän tulisi aina tietää missä hän sijaitsee sivustolla, kuinka hän pääsee eteenpäin ja kuinka taaksepäin. Sivu, joka sisältää lomakkeen, esimerkiksi rekrytointi tai kysely, ei riitä että käyttäjä painaa selaimen Takaisinnappia. Tämä saattaa pyyhkiä muististaan edelliset täytetyt kohdat, eikä välttämättä päästä enää käyttäjää takaisin. Sivujen suunnittelijan ei siis pidä luottaa selainkohtaisiin navigointi työkaluihin.

5 Navigointia helpottavat sivuston sisäiset linkit. Esimerkkinä voisi ottaa Oikotien www-sivut. Vasemmassa yläkulmassa on Oikotien-logo, joka on linkitetty aina siirtymään sivuston etusivulle. Koko yläosa on varattu navigointiin sivustolla. Se sisältää välilehtiä, joiden alta löytyy vielä alavalikkoja. Värien avulla käyttäjä huomaa missä kohtaa hierarkkisesti käyttäjä sijaitsee. Sivukartta onkin tärkeimpiä asioita mitä suunnittelussa tulee ottaa huomioon. Sivukartta helpottaa sekä suunnittelijaa, että käyttäjää. (ks.kuva1) Kuva 1. Oikotie.fi verkkosivut 5 Konkreettista www-suunnittelussa 5.1 Ohjeisto Yrityksillä saattaa olla käytössään graafinen ohjeisto, jolla voidaan määritellä fontti, värimaailma, logot ynnä muuta. Tarkista ensin toimeksianto ennen kuin alat suunnittelemaan sivuja pidemmälle. 5.2 Sivujen resoluutio Yleensä sivut suunnitellaan toimimaan resoluutiolla 800x600 näytöllä. Tässä tapauksessa sivu saa olla enintään 800

6 pikselin levyinen. Tätä leveämpi sivu saisi aikaan vaakasuuntaisen vierityspalkin. Taulukoiden avulla on myös mahdollista suunnitella resoluutiosta riippumaton sivu, joka joustaa selainikkunan koon mukaisesti. 5.3 Title -merkki Kun aloitat www-sivun tekemistä, tee sivulle otsikko. HTML-koodissa merkki title tarkoittaa otsikkoa juuri kyseiselle sivulle. Tämä otsikko tulee myös käyttäjälle näkyviin selaimen yläkehykseen niin sanottuun siniseen palkkiin. Nimeäminen on tärkeää yleisvaikutelman kannalta. Saattaa herättää kysymyksiä jos selaimessa lukee vain Default.html tai Untitled.html sen sijaan siinä voisi lukea vaikka YritysX - Etusivu. 5.4 Laitteistovaatimukset Kohderyhmää määriteltäessä piti ottaa huomioon käyttäjän kokemus Internetin käytöstä. Toinen mikä tulee ottaa huomioon www-sivujen toteutuksessa, on tapa, jolla ne toteutetaan. On syytä miettiä käyttäjän laitteistovaatimuksia. Esimerkkinä, jos suunnittelet www-sivut käyttäen Flash- tekniikkaa ota huomioon, ettei kaikilla ole asennettuna flashia tukevaa ohjelmistoa selaimessaan. Mieti miltä sivustosi näyttää kun tämä tilanne toteutuu. Saako käyttäjä eteensä vain tyhjän sivun, jossa ei lue mitään vai tuleeko esiin sivu josta käyttäjää pyydetään lataamaan flash- tuki koneelleen linkin kautta tai vielä paremmin että hän pääsee sivustolle, jossa ei käytetä flash- tekniikkaa. Muista että käyttäjä tekee havaintonsa näkemästään ja kyllästyy nopeasti, mikäli ei pääse etenemään. 10 sekuntiakin saattaa olla jo liian pitkä aika odottaa sivuston latautumista.

7 5.5 Linkit Sekä kuvia että tekstiä voidaan linkittää muihin sivuihin. Käyttäjän kannalta on kuitenkin hyvä, jos hän tietää, mitä linkin takaa löytyy, eli mitä tapahtuu kun käyttäjä painaa linkkiä. Linkitetyssä tekstissä on hyvä käyttää selventävää tekstiä, esimerkiksi Laurean etusivulle. Linkit on hyvä myös erottaa muusta tekstistä fontin tai värin avulla. Ihmisen huomio kiinnittyy liikkeeseen ja poikkeavuuteen, joten jos asetat linkin niin että se reagoi kursorin liikkeeseen, linkki tulee sivulla paremmin esille. Tämä voi myös haitata luettavuutta. Mieti siis linkkien paikat huolella. Kun sivua linkitetään samassa sivustossa olevaan sivuun, on syytä asettaa linkin kohde eli target samoihin kehyksiin eli html -koodissa arvo top. Mikäli taas linkki lähtee ulos sivustoilta vaikkapa yrityksen yhteistyökumppanin sivuille, on linkin kohde syytä määrittää arvo blank. Tämä tarkoittaa että sivu aukeaa uuteen selainikkunaan. Muiden tekemiä sivuja ei saa ilman tekijän lupaa avata omiin kehyksiin. Linkit kannattaa myös sijoittaa muiden linkkien läheisyyteen, jolloin käyttäjälle muodostuu kuva kokonaisuudesta, jossa on mukana toiminnallisuutta. 5.6 Kuvat Kuvia käytettäessä niiden tulee olla aiheeseen liittyviä. Ne herättävät huomiota, mutta niiden tarkoituksena on myös tukea esitettävää asiaa. Verkkosivuilla kuvien tallennustyyppinä käytetään sekä Jpg- että gif- muotoa. Jpg soveltuu parhaiten, mikäli sivulla käytetään taustakuvaa. Kuvien tiedostokoko tulee pitää pienenä. Yksittäisen kuvan koko suositellaan olevan maksimissaan 20 kilotavua, jotta se ei haittaisi sivujen latautumisessa. Kuvien resoluution ei tarvitse olla niin korkea kuin esimerkiksi painotöissä. Suositus resoluutio onkin 72. Kuvat eivät aina lataudu ja joskus käyttäjä saattaa asettaa selaimensa niin, ettei se lataa kuvia näytölle sivuston lataamisen nopeuttamiseksi. Tämän takia yksittäisissä kuvissa olisi hyvä sisällyttää Alt-teksti, jonka tarkoituksena on kuvata käyttäjälle, mikä kuva on kyseessä.

8 Alt-tekstin ei tule olla pitkä. Alt-tekstissä ei tarvitse selittää tarkasti koko kuvaa sininen soikio, josta on halkaistu röpelöinen V-muotoinen aukko. Soikion alla lukee LAUREA vaan pelkkä Laurean logo tai punainen auto riittävät kuvaamaan, mistä on kyse. Mikäli teet yritykselle www-sivuja, kannattaa kuvamateriaalia sekä logot pyytää suoraan yritykseltä itseltään. Näin säästytään tekijänoikeusongelmilta sekä usein yritys noudattaa jotakin graafista ohjeistusta ja näin on helpompi pysyä sovitussa, kun esimerkiksi logot ovat yhdenmukaiset. Esimerkkinä Laurean viralliset logot on ladattavissa www-sivuilta. Muista tekijänoikeus eli kysy lupa, mikäli kuva ei ole omasi tai yleisessä käytössä. 5.7 Päivitys Internetin parhaita puolia on se että sieltä löytyy tietoa reaaliajassa. Tieto vanhenee nopeasti, joten päivityksellä on suuri merkitys sivuston käytettävyyden kannalta. Sivusto karkottaa käyttäjän, mikäli hän huomaa että olemassa oleva tieto on vanhentunut ja hän löytää tarvitsemansa tiedon muuta kautta. Sivustoilla on hyvä merkitä, milloin sivuja on päivitetty. Käyttäjä näkee heti, onko jotakin uutta tullut, ilman että hänen tarvitsee lähteä selaamaan koko sivustoa läpi. 5.8 Luettavuus Jotta sivusto olisi mahdollisimman luettavaa, kiinnitä huomiota seuraaviin asioihin. Mahtuuko sivu kuvaruudulle kerrallaan? Scrollausta eli vierityspalkkia tulee välttää erityisesti vaakasuunnassa. Onko sivun otsikot ymmärrettävissä? Otsikoiden perusteella on hahmotettava, mitä sivu käsittelee. Sama koskee linkkejä. Ne tulee erottua muista. Käyttäjälle on hyvä kertoa mitä avattavan linkin alta paljastuu. Tekstin kieliasun tulee noudattaa samaa linjaa. Slangia ja kirjakieltä ei kannata sekoittaa samalla sivulla. Sama koskee vieraskielisyyttä. Esimerkiksi suomenkieliset sivustot kannattaa tehdä erikseen kuin että samalle sivulle kirjoittaa ensin suomeksi ja sitten englanniksi. Fonttina www-sivuissa käytetään yleisiä kirjasinleikkauksia, jotka kuuluvat käyttöjärjestelmän peruskirjasimiin.

9 Näitä ovat muun muassa Arial, Helvetica, Times ja Verdana. Käyttämällä näitä, voidaan varmistua siitä että käyttäjän selaimessa sivusto näyttää samanlaiselta kuin suunnitellussakin. Kirjaisin koko voidaan määrittää joko pisteinä tai se voidaan suhteuttaa selain ikkunaan sopivaksi. Olennaista on, ettei käyttäjä tarvitse suurennuslasia lukeakseen sivustoa. Versaalit eli isot kirjaimet herättävät huomiota, mutta ovat luettavuudeltaan huonoja. Älä siis käytä niitä muuten kuin tarvittaessa lyhyenä otsikkona. Ota huomioon sivun informaation määrä. Näytöltä on raskaampaa lukea kuin paperista tai kirjasta. Pyri siis pakkaamaan informaatio mahdollisimman luettavaan muotoon, niin ettei käyttäjä sekoa riveissä tai nukahda lukiessaan. 5.9 Animaatiot Mikäli sivustoilla käytetään animaatioita, tulee miettiä, onko niiden käyttö perusteltua. Animaatiot kuin myös kuvat ovat tehokeinoja ja niillä tulee havainnollistaa käsiteltävää asiaa. Animaatiot on hyvä myös pystyä pysäyttämään, mikäli käyttäjä ei niitä halua nähdä. Esimerkkinä elokuvien viralliset www-sivut, joissa usein alussa on jokin intro, jonka yli käyttäjä voi hypätä, mikäli ei halua kuluttaa aikaa sen lataamiseen ja katsomiseen Testaus Lopuksi testaa sivustoa vaikkapa kaverillasi. Pyri siihen että kohderyhmääsi kuuluva henkilö saa myös testata sivustoa. Tällöin saat tiedon, mikä on hyvää ja mitä pitää kehittää. Harvoin testauksenkaan jälkeen sivusto on virheetön, koska testaustilanteet ja henkilöt vaikuttavat tuloksiin. Jokainen huomio on kuitenkin tärkeä, koska silloin voidaan pois sulkea aina yksi virhe enemmän loppukäyttäjältä.

10 LÄHTEET HTML-perusteet, Satu Luojus Kerava 2005, Laurea- ammattikorkeakoulu www-sivut jokaiselle sopiviksi Korpela J.K. Tietoyhteiskunnan kehittämiskeskus ry TIEKE, Helsinki 2003 Digitaalinen media, Keränen V. Lamberg N. Penttinen J Jyväskylä, Docendo Finland Oy, Sanoma WSOY- konserni Käyttäjän ehdoilla: Verkkografiikka Hatva A. International Standardization Organization