Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 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.
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 työhön, joille ja joihin tuote on tarkoitettu.
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.
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 Käyttökokemus 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. Käytettävyydeltään hyvä tuote. Ulkoasu eli visuaalinen ilme.
Www-toteutuksen vaiheet Vaatimusmäärittely Palvelun suunnittelu Toteutus Testaus ja käyttöönotto Jälkiseuranta ja ylläpito liiketoiminnalliset tavoitteet kartoitus: nykytilanne kilpailijat kohderyhmä toimintatavat toiminnallisuus 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 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
kohderyhmä Käyttäjätutkimus on vaihe, jossa hankitaan tietoa käyttäjästä. Käyttäjien tunteminen (tehtävät, tavoitteet, rajoitukset, motiivit ) 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? - 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
Käyttäjäkuvaus käyttäjäryhmästä sisältää mm.: ikä sukupuoli koulutus tuotteen käyttötarkoitus käyttäjälle mitä tehtäviä käyttäjä tekee tuotteella miten käyttäjä tekee asiat nyt tuotteen käyttöpaikka, -tilanne 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 Käyttäjäkuvauksen voi kirjoittaa myös persoonana eli antaa persoonalle nimen ja muut tarkat henkilötiedot ja kirjoittaen konkreettisen kuvauksen käyttäjästä.
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.
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?
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.
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) Kotisivu index.html Yritys company.html Y. Historia c_biographies.html Yhteystiedot c_contact.html 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
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 työntekijät erikoisuudet
sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma Rautalankamallit Sivuston kuvallinen käsikirjoitus Tehdään luonnokset tärkeimmistä sivuista: 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 tee korjaukset prototyyppiin ja testaa uudelleen kun prototyyppi on valmis, tee siitä rautalanka malli korjataan ja suunnitellaan lisää yksityiskohtia suunnitellaan tehdään paperiprototyyppi Hyödyt paperiprotoilusta: - edullista - iterointi nopeaa - helppoa, ei vaadi erikoistekniikoita - arvioinnin ja arvostelun kynnys matala analysoidaan valmis rautalankamalli
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ökumppanien linkit ja mainokset
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
Palvelun suunnittelu Toteutus Testaus ja käyttöönotto Jälkiseuranta ja ylläpito -sisällön tuotanto - visuaalinen toteutus - koodaus - mediaelementit - käyttöympäristö -selaimet - laajennukset - yhteysnopeus -muisti-ja näyttörajoitukset sivu - rautalankamallit - käsikirjoitus - graafinen suunnitelma
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