Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 17.8.2009 Elina Ulpovaara Käyttäjäkeskeinen suunnittelu Tavoitteena: * käytettävyys tuotteeseen * hyvä käyttökokemus käyttäjälle tuotteen liiketoiminnalliset tavoitteet käyttäjät eli kohderyhmä * nykyiset * potentiaaliset Käyttäjälähtöinen tuote tai palvelu ei yleensä synny yhdellä kerralla, vaan on iteratiivinen prosessi, joka alkaa käyttäjätarpeiden kartoittamisesta. 1
Mitä on käytettävyys? Käytettävyydellä (usability) tarkoitetaan tuotteen soveltuvuutta käyttäjälleen ja tehtäväänsä. Käytettävyys on tuotteen laatuominaisuus, jolla kuvataan, kuinka helppoa, tehokasta ja miellyttävää on tuotetta käyttää. Käytettävyyssuunnittelu on todellisten käyttäjätarpeiden ja käyttötilanteiden ennakointia suunnittelussa. ISO 9241-11 standardin mukaan käytettävyys kertoo tuotteen käytön tuottavuudesta, tehokkuudesta ja miellyttävyydestä. Käytettävyyden arviointi on sidottu käyttäjiin, käyttöympäristöön ja töhö työhön, jill joille ja joihin jihi tuote t on tarkoitettu. kittt Jakob Nielsenin mukaan käytettävyys jakautuu viiteen laatukomponenttiin: opittavuus: Kuinka helppoa on suorittaa perusasiat ensimmäisellä kerralla. tehokkuus: Kun asiat on opittu, kuinka tehokkaasti ja nopeasti käyttäjät pystyvät käyttää tuotetta. muistettavuus: Kuinka helppoa on käyttää tuotetta, kun sen on kerran oppinut. virheettömyys: Kuinka paljon käyttäjät tekevät virheitä? Kuinka vakavia virheet ovat? Kuinka helppoa niistä on toipua? miellyttävyys: Tuotteen käytön tulisi olla mahdollisimman miellyttävää. Lisäksi Nielsen määrittelee käsitteen tuotteen hyödyllisyys: Kuinka hyvin tuote sopii tehtävään, johon se on tarkoitettu. 2
Käyttökokemus? Käyttökokemuksella (use experience) tarkoitetaan käyttäjän tuntemuksia käyttäessään tuotetta. tuote tuotteen terminologia ja visuaalinen ilme miten palvelun logiikka vastaa käyttäjän tapaa toimia? merkittävyys käyttäjälle käyttäjän vanhat kokemukset ja mielipiteet Hyödyt käytettävyyssuunnittelusta Kustannussäästöjä Laadukkaampi tuote Tyytyväinen käyttäjä -> käyttäjä tulevaisuudessakin Tunnetaan - käyttäjät - tuotteet liiketoiminnalliset mahdollisuudet Sivuston -sisältö - kieli - rakenne Sivuston toiminnot käyttäjien ja tilanteiden tarpeisiin. Ulkoasu eli visuaalinen ilme. Käyttökokemus Käytettävyydeltään hyvä tuote. 3
Www-toteutuksen vaiheet Vaatimusmäärittely Palvelun suunnittelu Toteutus Testaus ja käyttöönotto Jälkiseuranta ja ylläpito liiketoiminnalliset tavoitteet kartoitus: nykytilanne kilpailijat sisältö sivusto -rakenne sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma -sisällön tuotanto - visuaalinen toteutus - koodaus - mediaelementit - käyttöympäristö -selaimet - laajennukset - yhteysnopeus -muisti-ja näyttörajoitukset Vaatimusmäärittely kohderyhmä toimintatavat toiminnallisuus liiketoiminnalliset tavoitteet - Kenelle palvelu on tarkoitettu? -Miksi käyttäjät mahdollisesti käyttävät palvelua? - Mikä on palvelun tavoite? Tee myös asiakasselvitys: yksi vaihtoehto asiakasselvityksen tekemiseen: www.web-redesign.com 4
kohderyhmä Käyttäjätutkimus on vaihe, jossa hankitaan tietoa käyttäjästä. Käyttäjien tunteminen (tehtävät, tavoitteet, rajoitukset, motiivit ) i on edellytys tuotteen menestymiselle. Käyttäjäryhmät: Millaisia käyttäjäryhmiä tuotteella on? Miten ne poikkeavat toisistaan? Mitä yhteistä niillä on? Miten löydät käyttäjäryhmät? ät? - Ketkä ovat vastaavien muiden tuotteiden käyttäjiä? - Ketä toivot tuotteesi käyttäjäksi? - Ketkä tarvitsevat tuotettasi? - Ketkä ovat tuotteesi käyttäjiä luonnostaan? - Ketkä jätät tietoisesti ulkopuolelle? Tee käyttäjäkuvaukset kohderyhmästä: Alustavat käyttäjäryhmät Käyttäjätutkimus Tulosten organisointi Käyttäjäkuvaus haastattelut kyselyt tarinat -tutkittavat kirjaavat itse kokemuksiaan havainnointi - toiminnan seuraamista simulaatiot 5
Käyttäjäkuvaus käyttäjäryhmästä sisältää mm.: ikä Käyttäjäkuvauksen voi sukupuoli kirjoittaa myös koulutus persoonana eli antaa persoonalle nimen ja tuotteen käyttötarkoitus käyttäjälle muut tarkat mitä tehtäviä käyttäjä tekee tuotteella henkilötiedot ja kirjoittaen miten käyttäjä tekee asiat nyt konkreettisen tuotteen käyttöpaikka, -tilanne kuvauksen käyttäjästä. käytettävissä olevat tekniikat tietotekniset taidot kuinka käyttäjät ratkovat ongelmia? rajoitteet tuotteen käyttämiselle käyttäjän käyttämä sanasto tuotteeseen nähden mitä ominaisuuksia käyttäjä arvostaa tuotteessa päästäkseen tavoitteeseensa (nopeus, virheettömyys, ) käyttäjä ihmisenä käyttäjän kulttuuriympäristö käyttäjän toimintaympäristö käyttäjien toiveet ym. tuotteen käyttämiseen liittyviä tekijöitä Käyttäjäryhmiä voi olla useita, jotka eroavat täysin toisistaan tai vain osittain. 6
kartoitus: nykytilanne kilpailijat Vanhan tuotteen analysointi: Kysymyksessä on tällöin www-sivujen uusiminen Miksi sivut uusitaan? Mitä uusia tavoitteita on uusille sivuille? Käytä asiakaspalautetta, jos sellaista on. Tee käytettävyystestejä sivustosta. Mikä toimii ja mikä ei? Mikä on hyvää ja mikä huonoa? Arvio sisältö: Mikä on oleellista säilyttää ja mikä on tarpeetonta? Käy sisältö läpi sivu kerralla ja kirjaa ylös: sivun nimi, sivun sijainti sivun tavoite ja sisältö korjaustarpeet, korjausehdotukset sivupohja vastuuhenkilöt Kilpailijavertailu: Minkälaisia sivustoja verrataan: saman aihepiirin sivustot alan tärkeimmät toimijat asiakkaan välittömät kilpailijat vastaavan laajuisia sivustoja, kuin omasi tulee olemaan 1. Määrittele kilpailijoiden joukko 2. Kuvaa lyhyesti kunkin palvelu. 3. Tarkista kohderyhmät. 4. Vertaa sivujen ominaisuuksia. - Mitä on etusivulla? - Miten sisältö on organisoitu? - Mitä on valikoissa? - Mitä toimintoja on? - Millaista terminologiaa sivuilla käytetään? - Sivun rakenne? Palstat? Kuvat? Animaatiot? - Mitä hyvää ja huonoa on sivuilla? 7
Palvelun suunnittelu toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat vuokaaviot käyttötapaukset -nimi - suorittaja -tarkoitus - alkutilanne - lopputilanne -kuvaus - vaihtoehdot - poikkeukset sisältö sivusto -rakenne sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma Kaiken suunnittelun taustalla on tavoite ja kohderyhmä. sisältö Sisällön käsittely: Sisältö on tärkeintä jokaisessa sivustossa/sivussa. Paraskaan tekniikka ja hieno kuvitus ei pelasta huonoa sisältöä. Hyvä sisältökään ei riitä vaan sisältö täytyy organisoida eli järjestää hyvin. Muista kohderyhmän vaikutus sisältöön ja sisällön järjestykseen. Tehtävänäsi on suunnitella ja toteuttaa pk-yrityksen wwwsivusto. sivuston tavoite ja kohderyhmä 1. Mitä asioita sivustoosi tulee? 2. Järjestä asiat loogisella tavalla. Aloita jakamalla sisältö eri osuuksiin. Tee myös alijaot osuuksien sisällä. 3. Tee sisältörunko. Voit käyttää esim. ranskalaisia viivoja tai miellekarttaa. 4. Arvioi valmis sisältörunko. 8
sivusto -rakenne Sivustokartta eli sivuston rakenne Sivustokartta on kuvallinen esitys sivuston rakenteesta, kulusta sekä sisällön ja tietojen ryhmittelystä. Jokainen sivu omaan laatikkoon Linkit näkyviin (tärkeimmät) Nimeämiskäytännöt: Päätä vakiotapa, jolla tiedostot nimetään. Organisatorinen nimeäminen Html-nimeäminen 1. Kotisivu 2. Yritys 2.1 Yrityksen historia 2.2 Yhteystiedot Kotisivu index.html Yritys company.html Y. Historia c_biographies.html Yhteystiedot c_contact.html 6. Toteuta sivustokartta tekemäsi sisältörungon perusteella. Mieti vielä rakenteen loogisuutta. 7. Mieti ja toteuta samalla nimeämiskäytäntö. kotterot vaihtoautot jätä ilmoitus yritys Tämä on myös hyvä pohja hakemistorakenteen suunnitteluun. henkilöautot pakettiautot yhteystiedot ti t työntekijät erikoisuudet 9
sivu - rautalankamallit - käsikirjoitus graafinen suunnitelma Rautalankamallit Sivuston kuvallinen käsikirjoitus Tehdään luonnokset tärkeimmistä sivuista: navigointi otsikot tekstin sijoittelu kuvat jne - graafinen suunnitelma navigointi, otsikot, tekstin sijoittelu, kuvat jne. logo Kuva etsi etsi Pää- navigointi alinavigointi Asiasisältö 8. Suunnittele ja piirrä kaikista tärkeimmistä sivumalleista rautalankamallit. Tässä tehtävässä toteutetaan pieni sivusto, joten suunnitellaan kaikki mallit. 9. Numeroi tai nimeä mallit (etusivu, alasivu, sisältösivu, tietosivu...) Käyttöliittymän iteratiivinen kehittäminen paperiprototyypeillä: toteuta riittävän samankaltainen prototyyppi tuotteen käyttöliittymästä kuin lopullinen palvelu testaa prototyyppiä ja analysoi tulokset Hyödyt y tee korjaukset prototyyppiin ja testaa uudelleen paperiprotoilusta: - edullista kun prototyyppi on valmis, tee siitä rautalanka malli suunnitellaan - iterointi nopeaa - helppoa, ei vaadi erikoistekniikoita - arvioinnin ja arvostelun kynnys matala korjataan ja tehdään suunnitellaan paperiprototyyppi lisää yksityiskohtia analysoidaan valmis rautalankamalli 10
Käsikirjoitus Kirjoitetaan auki jokainen sivu, eli mitä tekstejä, taulukoita, kuvia jne. sivuilla on. Sivujen yhteiset osiot kuten tunnuskuvat/logot, navigoinnit riittää, että kirjoitat vain yhden kerran. Käsikirjoittamisen työvälineet: vapaamuotoinen kirjoittaminen taulukkokäsikirjoitusmenetelmä ohessa olevan esimerkin mukaisesti Esimerkki: Kotterot vaihtoautot netistä ilman välikäsiä 2) navigointi 1) tunnuskuva + otsikko 3) sivun otsikko 4) Tekstit, kuvat ja muu sisältö 5) Yhteistyökumppa- nien linkit ja mainokset 11
Sivu: index.html, Kotterot Oy:n kotisivu Sivun idea: Kotterot Oy:n kotisivu, kerrotaan liikeidea ja linkit muille sivuille. Osio 1) Tunnuskuva ja otsikko Sisältö Kotterot.gif Kotterot OY 2) Navigointi kotisivu vaihtoautot jätä ilmoitus - yritys 3) Sivun otsikko Kotterot vaihtoautot netistä ilman välikäsiä 4) Tekstit, kuvat ja muu sisltö Kotterot Oy:n sivuilta löydät nopeasti ja edullisesti sinulle sopivan vaihtoauton. Autojen välitys tapahtuu suoraan myyjältä ostajalle ilman turhia välikäsiä. Palvelun kautta voit myös jättää autosi myyntiin ja odotella kotona takkatulen ääressä yhteyden ottoa autosi oston merkeissä. Kuva: kottero2.jpg Huom. Jos tekstit ovat pitkiä, niistä kannattaa tehdä erillinen liite. Graafinen suunnitelma eli verkkopalvelun ulkoasu Teema Mikä on sivuston tavoitemielikuva? Mikä on visuaalinen teema? Perustele valintasi. Sivujen sommittelu Mihin sivun eri komponentit tulevat? Typografia Millainen fontti otsikoille, leipätekstille? Millaisia kokoja ja tyylejä käytetään? Värit Minkälainen värimaailma sivustolla on ja miksi? Käytetäänkö värisymboliikkaa? Kuvat Millaisia kuvia käytetään: valokuvia, piirroksia jne? Missä kuvia käytetään: taustalla, kuvituksessa, navigoinnissa jne? Muut elementit: animaatiot, videot 12
Palvelun suunnittelu Toteutus Testaus ja käyttöönotto Jälkiseuranta ja ylläpito viikot 2-8 sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma -sisällön tuotanto - visuaalinen toteutus - koodaus - mediaelementit viikot 2-15 - käyttöympäristö -selaimet - laajennukset - yhteysnopeus -muisti-ja näyttörajoitukset viikot 14-15 Lähteet Irmeli Sinkkonen, Esko Nuutila, Seppo Törmä: Helppokäyttöisen verkkopalvelun suunnittelu, Tietosanoma, 2009 Anja Hatva toim.:verkkografiikka, IT Press, 2003 Kelly Goto, Emily Cotler: Verkkopalveluprojekti, IT Press, 2003 Adagen artikkelit käytettävyydestä www.adage.fi/julkaisut/arkisto uusin vuodelta 2005 Irmeli Sinkkonen, Hannu Kuoppala, Jarmo Parkkinen, Raino Vastamäki: Käytettävyyden psykologia kirja saatavilla pdf-tiedostona www.adage.fi/pdf/kaytettavyyden_psykologia.pdf 13