Verkkopalvelun suunnittelun periaatteita Kirjoittajat: Tommi Tolkki Virpi Blom Petteri Kilpiö Petra Pietiläinen
Muistio 1(10) Sisällysluettelo 1 Suunnittelun lähtökohdat... 2 2 Käytettävyyssuunnittelu... 2 2.1 Käytettävyysheuristiikat (Jakob Nielsen, 1994)... 2 2.2 Erityisryhmien huomioiminen suunnittelussa... 3 2.4 Verkkopalvelujen käytännön standardit... 4 2.3 Työskentelytapa... 4 3 Konsepti... 4 3.1 Työskentelytapa... 5 4 Rakenne... 5 4.1 Rakennemalli... 5 4.2 Ryhmittely... 5 4.3 Nimeäminen... 5 4.4 Työskentelytapa... 6 5 Käyttöliittymä... 6 5.1 Navigaatio... 6 5.2 Haku... 6 5.3 Linkitykset... 6 5.4 Sisältöjen esittäminen... 7 5.5 Etusivu... 7 5.6 Työskentelytapa... 7 6 Ulkoasu... 8 6.1 Kuvitus... 9 6.2 Typografia... 9 6.3 Työskentelytapa... 10
Muistio 2(10) 1 Suunnittelun lähtökohdat Verkkopalvelun suunnittelun lähtökohtana on laajan ja tarpeiltaan moninaisen käyttäjäryhmän huomioon ottaminen. Suunnittelussa pitää huomioida paitsi käyttäjien erilaisista tarpeista johtuvat käytettävyysvaatimukset, myös palvelun saatavuus erityisryhmille. Jotta verkkopalvelu olisi kaikkien saatavilla vaivattomasti, sen on toimittava kaikilla viime vuosina julkaistuilla yleisimmillä selaimilla, eikä siinä saa käyttää sellaisia selainlaajennuksia, joita käyttäjiltä ei yleisesti löydy. Lisäksi verkkopalvelusta suunnitellaan niin yksinkertainen, että sen käyttö on myös hitailla modeemiyhteyksillä luontevasti mahdollista. Saatavuuden periaatteita sovelletaan myös siten, että palvelun käyttö tekstipohjaisella selaimella on tarvittaessa mahdollista. Saatavuuden rinnalla toinen merkittävä vaatimus verkkopalvelulle on käytettävyys. Käytettävyys voidaan määritellä viiden tekijän avulla, jotka ovat muistettavuus, tehokkuus, opittavuus, käytön virheettömyys ja miellyttävyys. Näiden pohjalta määritellään suunnitteluprosessin aluksi tärkeimmät käytettävyystavoitteet, joihin ensisijaisesti pyritään suunnitteluprosessin kuluessa. Verkkopalvelun päivityksestä syntyy myös vaatimuksia ja rajoitteita lopulliselle käyttöliittymälle. Sivut on suunniteltava siten, että niiden päivittäminen on tekstieditorilla vaivatonta, ja että uusia sivuja luotaessa on liikkumavaraa uusien sivujen erilaisille sisällölle. 2 Käytettävyyssuunnittelu Yleisesti suunnittelussa noudatetaan seuraavia perusperiaatteita: Käytettävyysheuristiikat (J. Nielsen) http://www.useit.com/papers/heuristic/heuristic_list.html Julkishallinnon WWW-sivuston suunnittelun ohjeet http://194.89.205.3/juhta/suositukset/jhs129.htm Verkkopalvelujen käytännön standardit Key Partners hyödyntää suunnittelutyössä näitä lähtökohtia. Suunnittelussa ohjeita on kuitenkin sovellettava tapauskohtaisesti kunkin yksittäisen palvelun vaatimien tarpeiden mukaan. 2.1 Käytettävyysheuristiikat (Jakob Nielsen, 1994) Käytettävyysasiantuntija Jakob Nielsen on tutkimustulosten ja kokemuksensa perusteella koonnut listan heuristisista periaatteista, jotka käyttöliittymäsuunnittelussa on otettava huomioon. Listalla ovat seuraavat suunnittelun perusperiaatteet: Käytä yksinkertaista ja luonnollista dialogia Käytä käyttäjän omaa kieltä Minimoi käyttäjän muistikuorma
Muistio 3(10) Ole yhdenmukainen Anna käyttäjälle palautetta toiminnoista Osoita selkeä poistumistapa Anna mahdollisuus oikopolkuihin Anna selkeät virheilmoitukset Vältä virhetilanteita Anna riittävä ja selkeä apu Key Partnersin suunnittelijat käyttävät heuristiikkoja tottuneesti aina käyttöliittymien suunnittelun ja myös käytettävyyden arvioinnin apuna. 2.2 Erityisryhmien huomioiminen suunnittelussa Verkkopalvelun tulee olla saavutettava myös erilaisille marginaaliryhmille, joilla voi olla fysiologisia rajoitteita sivuston käyttöön. Projektin käyttöliittymän ja sisällön suunnittelussa tulee ottaa huomioon mahdollisimman monen eri kohderyhmän tarpeet ja edellytykset, jotta verkkopalvelun käyttöaste ja käytettävyys voidaan maksimoida. Hyvin yleisiä käyttäjien ongelmia ovat muun muassa seuraavat: 1. Käyttäjä ei pysty näkemään, kuulemaan, käsittelemään tai prosessoimaan tietyn tyyppistä informaatiota helposti tai ollenkaan 2. Käyttäjällä voi olla lukemiseen tai ymmärtämiseen liittyviä ongelmia 3. Käyttäjä ei välttämättä kykene käyttämään näppäimistöä tai hiirtä 4. Käyttäjällä voi olla käytössään ainoastaan tekstin esitykseen tarkoitettu näyttö, pieni monitori tai hidas Internet-yhteys 5. Käyttäjä ei osaa sujuvasti kieltä, jolla sisältö on toteutettu 6. Käyttäjä voi olla tilanteessa tai ympäristössä, jossa hän ei pysty käyttämään näkötai kuuloaistejaan tai käsiään (esimerkiksi autossa tai työskennellessään kovan metelin keskellä) 7. Käyttäjällä saattaa olla käytössään vanha selainversio, tavallista harvinaisempi selain (esim. Opera), äänitunnistein toimiva selain tai standardeista poikkeava käyttöjärjestelmä. Laajan saavutettavuuden takaamiseksi palvelussa hyödynnetään www.w3.org järjestön ohjeita saavutettavien www-sivustojen suunnittelusta ja totetuksesta. Web Content Accessibility Guidelines 1.0 http://www.w3.org/tr/1999/wai-webcontent-19990505
Muistio 4(10) 2.4 Verkkopalvelujen käytännön standardit Verkkopalvelujen suunnitteluun on muodostunut median kehittyessä käytäntöjä, jotka ovat totuttuja ja hyväksi todettuja. Key Partnersin asiantuntijoilla on vuosien kokemus verkkopalvelujen suunnittelusta, joten he tuntevat nämä konventiot ja osaavat hyödyntää niitä. Usein on houkuttelevaa keksiä jotain uutta ja raikasta sivustolle, eikä käytännön standardien noudattaminen tarkoita, ettei näin saisi tai voisi tehdä. Sen sijaan vakiintuneiden konventioiden noudattaminen tarkoittaa tutuksi tulleista suunnittelun perusperiaatteista kiinnipitämistä. Tämä on käytettävyyden kannalta erityisen olennaista webissä, jossa toimintatavat eivät ole vielä ehtineet standardien tasolle, mutta olemassaolevia käytäntöjä on paljon. Monet käyttäjät pitävät niitä punaisena lankana WWW:tä käyttäessään. 2.3 Työskentelytapa Käytettävyys otetaan huomioon kaikissa suunnittelun vaiheissa. Jokainen Key Partnersin suunnittelija noudattaa omassa työssään käytettävyyden periaatteita, mutta lisäksi yksi tiimin jäsen on vastuussa kokonaisuuden käytettävyydestä. Heti projektin alkuvaiheessa pohditaan käyttäjäryhmän tarpeita ja muodostetaan käyttäjistä käyttäjäkuntaa mahdollisimman hyvin vastaavat käyttäjäprofiilit. Käyttäjäprofiilissa kuvataan käyttäjän tarpeet, mieltymykset ja erityispiirteet. Tässä vaiheessa voidaan esimerkiksi haastatella käyttäjiä ja siten saada luotettavaa tietoa heidän todellisista tarpeistaan. Apua on myös palvelun aiempien versioiden kävijätilastoista ja kerätystä palautteesta. Käytettävyyttä voidaan testata käyttäjillä kaikissa projektin vaiheissa rakennesuunnittelusta ulkoasusuunnitteluun. Päävastuu käytettävyyssuunnittelusta on Key Partnersilla. Asiakas on mukana, kun palvelulle määritellään käytettävyystavoitteet. Lisäksi asiakas kommentoi kaikkia suunnittelun vaiheita, osallistuu testien suunnitteluun ja vastaa testihenkilöiden hankinnasta. 3 Konsepti Konsepti määrittelee lähinnä verkkopalvelun tavoitteet, kohderyhmät ja tarjottavat palvelut. Konsepti kannattaa suunnitella huolellisesti, koska kaikki myöhemmät vaiheet perustuvat siihen. Samalla kaikki työhön osallistuvat sitoutuvat tekemään samanlaista verkkopalvelua. Aluksi verkkopalvelulle määritellään tavoitteet. Yleensä palveluntarjoajalla on jo jonkinlainen käsitys tavoitteistaan, mutta niitä on yleensä hyvä täsmentää. Jos organisaatiossa on erilaisia käsityksiä tavoitteista, niistä on lopulta päästävä yhteisymmärrykseen. Kun tavoitteet ovat selvillä, päästään pohtimaan kohderyhmiä. Jos kohderyhmä on laaja, määritellään eri ryhmien tärkeysjärjestys. Lisäksi kannattaa pohtia, millaisia kohderyhmät ovat ja millaisella tilanteessa ne käyttävät sivustoa. Lopuksi päätetään, millaisia palveluja kullekin kohderyhmälle tarjotaan. Tässä vaiheessa mietitään myös, miten sisältö kohdennetaan käyttäjälle ja miten organisaatio
Muistio 5(10) voi ajaa omia tavoitteitaan. Tärkeä kysymys on myös se, kuinka kohderyhmät löytävät verkkopalveluun. 3.1 Työskentelytapa Konseptin suunnittelevat asiakas ja toimittaja tiiviissä yhteistyössä. Suunnitteluprosessiin kuuluu tyypillisesti esikartoitus, benchmarking ja työpajoja. 4 Rakenne Rakenne on tietopainotteisen verkkopalvelun ensimmäinen ja olennaisin käytettävyyden ehto. Alkuaikoina sivustot olivat vain irrallisia sivuja, jotka oli linkitetty toisiinsa. Nykyisin jo pienimmillekin sivustoille suunnitellaan rakenne. 4.1 Rakennemalli Yleensä rakenne perustuu hierarkiamalliin, jossa ylätasot jakautuvat alatasoihin ja alatasot jälleen alatasoihin. Tällaista rakennetta voivat joissain osioissa kuitenkin täydentää lineaarinen rakenne (esim. prosessikuvaus) tai tietokantamalli (esim. asuntojen haku tietyin kriteerein). Hierarkkista rakennettaessa suunniteltaessa on ensinnäkin otettava huomioon se, että käyttäjällä on kerrallaan valittavissa kohtuullinen määrä vaihtoehtoja. Jos esimerkiksi etusivulla on kymmeniä eri linkkejä, niitä on hyvin vaikea hahmottaa. Hahmottamista voi helpottaa ryhmittelemällä alaosiot osiot selkeiksi kokonaisuuksiksi. Käyttäjän pitää toisaalta pystyä löytämään etsimänsä sisältö mahdollisimman vähin klikkauksin. Laajoissa verkkopalveluissa kaikkea tietoa on kuitenkin mahdotonta sijoittaa hierarkian ylätasoille. Tärkeintä onkin se, että olennaisin tieto on nopeasti löydettävissä. Yksityiskohtaisia tietoja käyttäjä malttaa etsiä syvemmältä hierarkiasta, kunhan joka tasolla tarjotaan samaan aihepiiriin liittyvää olennaista tietoa. 4.2 Ryhmittely Verkkopalvelun sisältö ryhmitellään yleisimmin aiheen mukaan, esimerkiksi tuotteet, sijoittajatieto, työpaikat ja yhteystiedot. Nykyisin näkee yhä useammin myös käyttäjäryhmittäin ryhmiteltyjä sivustoja: sijoittajat, työnhakijat, asiakkaat... Asiointipalveluissa sisältö saatetaan ryhmitellä toiminnoittain: selaa, tilaa, maksa... Rakenteen suunnittelussa on pohdittava etenkin tietosisältöjen yhteenkuulumista ja sitä, miten käyttäjät hahmottavat tiedon. Usein palvelun tuottajat pitävät itselleen tuttuja organisatorisia tai vastuualueellisia jakoja luonnollisena rakenteena palvelulle, vaikka nämä eivät välttämättä ole käyttäjälle lainkaan yhtä itsestään selviä. Käyttäjien tietotaustat, terminologia ja kokonaisuuden hahmotustavat ovat erilaisia, joten verkkopalvelun loogiseen rakenteensuunnitteluun on käytettävä loppukäyttäjien näkökulmaa. 4.3 Nimeäminen Yksi rakennesuunnittelun tärkeimpiä vaiheita on osioiden nimeäminen. Hyvä osion nimi kertoo käyttäjälle tehokkaasti, mitä sisältöä linkin takana on. Lisäksi nimeämine antaa kokonaiskuvan palvelun sisällöstä ja luo kuvaa palveluntarjoajasta. Hyvä nimeämisen
Muistio 6(10) periaatteita ovat mm. lyhyys, kuvaavuus, ymmärrettävyys, käyttäjälähtöisyys, erottuvuus, yhdenmukaisuus ja samantasoisuus. 4.4 Työskentelytapa Ensimmäisen version rakenteesta suunnittelee Key Partnersin konseptisuunnittelija tai konsultti konseptin perusteella. Tuloksena syntyy rakennekaavio ja tarvittaessa myös runkokäsikirjoitus. Asiakas kommentoi dokumentteja, minkä jälkeen niistä tehdään korjatut versiot. Rakenne voidaan myös testata käyttäjillä. Tässä vaiheessa rakenteeseen on helppo tehdä korjauksia testitulosten perusteella. 5 Käyttöliittymä Käyttöliittymäsuunnittelussa verkkopalvelulle laaditaan konseptin ja rakenteen perusteella selkeä, havainnollinen ja erilaisiin sisällöllisiin vaatimuksiin mukautuva käyttöliittymä. 5.1 Navigaatio Palvelun navigaatiotoimintojen avulla käyttäjä siirtyy rakenteen tasolta toiselle mahdollisimman pienellä määrällä klikkauksia, jotta saavutetaan käytön mukavuus ja helppous. Navigaation pitää olla helposti ymmärrettävä ja muistettava. Lisäksi käyttäjän on ymmärrettävä navigaation avulla sijantinsa palvelun rakenteessa. Verkkopalvelun navigaation suunnittelun peukalosääntönä voidaan pitää pysyvien valikoiden säilyttäminen jokaisella sivulla. Valikosta on hyvä aina olla korostettuna kohta, jossa parhaillaan ollaan, jotta käyttäjä tietää oman sijaintinsa palvelussa. Navigaatiossa voi olla yksi tai useampi taso, jotka avautuvat ja toimivat kaikissa palvelun osissa saman logiikan mukaan. Valikko yleensä sijoitetaan ensisijaisesti yläreunaan tai vasempaan reunaan sivua. Yläreunassa ongelmana on se, että tilaa on paljon rajoitetummin kuin reunassa, jolloin valikon päätasoja ei voi olla kuin muutama. 5.2 Haku Kun verkkopalvelu sisältää runsaasti dokumentteja ja informaatiota, on tärkeää suunnitella sivustolle kattava ja käytettävä hakutoiminto. Verkkopalveluiden käyttäjät suosivat hakutoiminnon käyttöä, koska sen avulla voidaan välttää tarpeeton navigointi ja etsitty tieto löytyy näin nopeasti. Hakutoiminto suositellaan sijoitettavaksi siten, että se on saatavilla kaikilla sivuilla, esimerkiksi sivun yläosassa. 5.3 Linkitykset Olennaiset linkit ovat hyvää palvelua, koska ne auttavat käyttäjää löytämään lisätietoa häntä kiinnostavasta aiheesta. Epäolennaiset linkit vaikeuttavat olennaisen linkin löytämistä suuresta linkkimäärästä. Lisäksi käyttäjä turhautuu helposti, jos linkin takaa löytyvä tieto on esimerkiksi huonolaatuista.
Muistio 7(10) Sisäiset linkit auttavat huomattavasti käyttäjää tiedon etsinnässä. Mikään sivustorakenne ei ole niin hyvä, että suuri tietomassa istuisi siihen täydellisesti. Ulkoisia linkkejä kannattaa käyttää harkiten. Muille sivustoille ei kannatta linkittää linkittämisen ilosta vaan ainoastaan siinä tapauksessa, että kohdesivulla on jotain hyödyllistä lisätietoa. Linkeille on hyvä suunnitella vaikiopaikat ja -muoto, jotta käyttäjä tunnistaa linkeiksi ja pystyy arvioimaan linkin hyödyllisyyden. 5.4 Sisältöjen esittäminen Sisältöjen esittäminen vaatii huolellista suunnittelua, jotta käyttäjät pystyvät silmäilemään nopeasti heitä kiinnostavat sisällöt. Erilaiset listaukset ja selvät väliotsikoinnit edistävät silmäiltävyyttä. Ihmiset eivät myöskään jaksa lukea pitkiä tekstejä näytöltä, vaan tulostavat ne. Usein onkin järkevää tarjota verkkopalvelussa lyhyitä tiivistelmiä pitkiin sisältöihin ja liittää näihin ladattavat versiot dokumenteista (esimerkiksi PDF-muodossa). Sisällön esittämisessä on tärkeätä käyttää yhdenmukaisia dokumenttipohjia ja typografisia sääntöjä sisällön luettavuuden ja ymmärrettävyyden parantamiseksi. Sisältöosioiden suunnittelussa on otettava huomioon tulostaminen, saavutettavuus ja sisällön lukeminen erilaisilta päätelaitteilta. 5.5 Etusivu Aiemmin verkkopalvelun etusivut usein tehtiin näyttäviksi, toimettomiksi kansisivuiksi palveluun. Tämä ratkaisumalli todettiin käytettävyydeltään varsin huonoksi, koska palvelun kansisivut toimivat lähinnä hidasteina ja esteinä sille, että käyttäjät pääsisivät välittömästi tarvitsemaansa sisältöön kiinni. Verkkopalvelun etusivu on parhaimmillaan kokoelma kaikkein olennaisinta tietoa, jota tarjolla kulloinkin on. Yleensä tietoa ei tarjota sivulla kokonaan, vaan siihen tarjotaan nostoja. Etusivulla tyypillisesti tarjotaan esimerkiksi tuoreimmat asiat kattava uutislista tai tapahtumalista. Verkkopalvelun etusivun tulisi tukea käyttäjien kaikkein yleisimpiä tarpeita. Etusivulla on myös useimmiten perusteltua tarjota selitys palvelusta; mikä se on, kenelle se on, ja mitä sieltä kannattaa etsiä. 5.6 Työskentelytapa Verkkopalvelun käyttöliittymän runko voidaan tehdä paperiprototyyppinä tai riisuttuna HTML-prototyyppinä. Prototyyppiä on syytä testata muutamalla käyttäjällä, jotta voidaan varmistua, että palvelun suunnittelussa ollaan menty oikeaan suuntaan. Näin voidaan saada konkreettista tietoa vaadittavista parannuksista. Käytettävyystestaus voidaan kaikissa suunnitteluprosessin vaiheissa tehdä kevyesti ja ilman massiivisia järjestelyjä. Testiin tarvitaan vain testattava prototyyppi, käyttäjä ja testin ohjaaja. Aikaa testiin ei tarvitse mennä kuin 10 30 minuuttia käyttäjää kohden. Tarvittaessa käytettävyyttä voidaan myös arvioida asiantuntijoiden toimesta, mikä on vielä edullisempaa, mutta tulokset eivät ole yhtä luotettavia.
Muistio 8(10) 6 Ulkoasu Palvelulle suunnitellaan organisaation tavoitteita edistävä ulkoasu, jossa otetaan huomioon palvelun kohderyhmä, mukaan lukien mahdolliset rajoittuneet käyttäjät. Suunnittelun lähtökohtana on käytettävyyteen ja yksinkertaisuuteen keskittynyt käyttöliittymä, joka avustaa käyttäjiä löytämään itseään kiinnostavat tiedot. Palvelun ilmeen suunnittelussa on tärkeätä panostaa informaation selkeään ja johdonmukaiseen esittämiseen. Käyttöliittymässä tulee olla miellyttävä ulkoasu, mutta visuaalisen kokemuksen vahvuus ei ole ensisijaista. Palvelun käyttöliittymä koostuu seuraavista suunniteltavista elementeistä: Yleinen käyttöliittymä perusosineen - Toiminnot - Navigaatioratkaisut - Linkitykset - Logot - Kuvat - valikkolinkit, lisätietolinkit, ulos vievät linkit - ikonit ja kuvat linkkeinä - Ylä- ja alatunnukset Käytetyt värit ja niiden merkitykset Kuvakoot ja mallit Sisältöosat - Taulukot - Tarvittavat dokumenttipohjat - Erilaiset mallit graafisista esityksistä - Listaussivut Toiminnalliset elementit Haku Lomakkeet - Liitetiedostojen käsittely - Kenttätyypit - Kenttien ryhmittely ja kokovalinnat - Kenttien merkitseminen - Asettelu ja nimeäminen
Muistio 9(10) - Toimintapainikkeiden sijoittelu 6.1 Kuvitus Kuvia tulisi käyttää verkkopalvelussa mahdollisimman vähän, jotta sivusto olisi saavutettava, skaalautuva, helposti kieliversioitavissa ja erilaisissa päätelaitteissa toimiva. Yksi osa käytettävyyttä on kuitenkin myös verkkopalvelun miellyttävä ulkoasu. Kuvituksella voi olla suuri merkitys palvelun miellyttävyyteen, kun kuvitus tehdään ilman ylilyöntejä. Tyypillisesti verkkopalvelun kuvat voidaan jakaa kolmeen luokkaan: navigaatiossa ja layoutissa käytettäviin kuvin, kuvituskuviin ja informatiivisiin kuviin. Mitä syvemmälle palvelussa mennään, sitä vähemmän kuvituskuvia yleensä käytetään. 6.2 Typografia Verkkopalvelun ulkoasua suunniteltaessa on tärkeätä ottaa huomioon palveluissa käytettävä typografia. Palvelun typografia tulisi olla johdonmukainen ja samanlainen jokaisessa julkaistussa dokumentissa sekä interaktiivisissa toiminnoissa. Suunnitellun typografian huolellinen ja johdonmukainen käyttö parantaa palvelun käytettävyyttä ja tarjoaa käyttäjälle laadukkaan kokemuksen. Seuraavassa on kerätty verkkopalveluissa yleisimmin esiintyvät tekstityypit, joita varten suunnitellaan typografiset määritteet: otsikot (kaikki perus HTML-koot: H1-H6) leipäteksti kuvateksti lomakkeet - otsikot - ohjetekstit - syöttökenttien tekstit taulukoiden otsikko ja tietosolujen tekstit interaktiivisten osien typografia - linkit - navigaatio - otsikot - painikkeet kuvioiden typografia listaukset - aktiiviset valinnat - toimimattomat valinnat
Muistio 10(10 ) 6.3 Työskentelytapa Kun ensimmäinen käyttöliittymän prototyyppi on hyväksytty, voidaan sitä ruveta tarkentamaan lisäämällä grafiikkaa ja tarkentamalla sivujen sisältöä. Kun verkkopalvelu alkaa näyttää halutunlaiselta, toistetaan testaus muutamalla käyttäjällä ja näin paikannetaan viimeiset käytettävyysongelmat. Testitehtävät suunnitellaan siten, että niillä saadaan selville, onko asetetut käytettävyystavoitteet saavutettu. Mikäli testien tulokset ovat tyydyttävät, voidaan palvelu tämän jälkeen siirtää tuotantoon. Päävastuu ulkoasusuunnittelusta on Key Partnersilla. Asiakas kommentoi ulkoasuehdotusta, ja sitä korjataan kommenttien perusteella. Lisäksi asiakas osallistuu ulkoasutavoitteiden määrittelyyn.