WWW-SIVUJEN, SISÄLLÖN JA SIVUSTON SUUNNITTELU

Transkriptio

1 WWW-SIVUJEN, SISÄLLÖN JA SIVUSTON SUUNNITTELU

2 2

3 3 sivuston suunnittelun ja toteutuksen vaiheet 1. Vaatimusmäärittely Verkkopalvelun vaatimusmäärittelyssä kuvataan yksiselitteisesti ja selkeästi verkkopalvelun tulevien käyttäjien ja heidän vaatimustensa näkökulmasta palvelun tavoitteet, kohderyhmät, sisällöt, toiminnallisuus ym. mitkä ovat palvelun tavoitteet, mitä hyötyä siitä on liiketaloudellisesti tms. palvelun käyttäjät, kohderyhmä. Käyttäjien kartoitus, kuvaus miksi verkkopalvelu tehdään, mihin tarkoitukseen mitä ominaisuuksia palvelulla pitää olla, mitä sillä pitää pystyä tekemään esim. varaus, tilaus, ilmoittautuminen tms. nykytilanteen kartoitus: vanhan tuotteen analysointi, kilpailijavertailu

4 4 sivuston suunnittelun ja toteutuksen vaiheet 2. Palvelun suunnittelu Toiminnallisuus: palvelun toiminnallisuudet eli ne asiat mitä lopullisen palvelun tulee sisältää ja miten sen tulee toimia. Sisältöhierarkia: sivukartta raffi Sisältöosioiden kuvaus Käyttöliittymän perusajatus Näyttökuvaukset, rautalankamallit Käsikirjoitus Graafinen suunnitelma eli verkkopalvelun ulkoasu

5 5 sivuston suunnittelun ja toteutuksen vaiheet 3. Palvelun toteutus - sisällön tuotanto - visuaalinen toteutus - koodaus - mediaelementit

6 6 sivuston suunnittelun ja toteutuksen vaiheet 4. Testaus ja käyttöönotto - käyttöympäristö - selaimet - laajennukset - yhteysnopeus - muisti- ja näyttörajoitukset 5. Jälkiseuranta ja ylläpito

7 7 1. KOHDERYHMÄ, SIVUSTON TAVOITTEET Kohderyhmä, käyttäjät Kun aletaan luomaan sivustoa, mietitään kenelle sivusto on suunnattu: millainen on käyttäjien ikä, sukupuoli, koulutus, kulttuuriympäristö ym. - Millaisia käyttäjäryhmiä palvelulla on? Miten ne poikkeavat toisistaan? Mitä yhteistä niillä on? - Mitä tietoa kohderyhmän jäsenet sivustolta hakevat? - Kuinka sivustoa tullaan käyttämään? Mihin tarkoitukseen? - Minkälaiset taidot kohderyhmillä on käyttää ja ymmärtää tietotekniikkaa? - Kuinka nopea Internet-yhteys heillä on?

8 8 Sivuston tarkoitus Sivuston tarkoitus - Miksi sivusto halutaan toteuttaa? - Mitä sivuston toteuttamisella saavutetaan? - Mikä on sivuston rooli koko organisaation viestinnässä? - Onko sivusto organisaation ainut sivusto vai onko kyseessä kampanjasivusto? - Tehdäänkö nyt täysin uusi sivusto vai onko jo olemassa aikaisempi versio?

9 9 Sivuston tavoitteet ja toiminnallisuus Sivuston tavoitteet ja toiminnallisuus - Mitä sivustolla halutaan sanoa? - Minkälainen vaikutus sillä halutaan saada aikaan? - Mitä asiakokonaisuuksia sillä halutaan tuoda esiin? - Mikä on lyhyt ja tärkein perussanoma?

10 10 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS Toiminnallisuus Palvelun toiminnallisuudet eli ne asiat mitä lopullisen palvelun tulee sisältää ja miten sen tulee toimia. Toiminnallisuuden suunnitteluun voidaan käyttää esim. tarinoita. Tarinat paljastavat sellaisia toimintoja, joita käyttöliittymällä tulee saada tehtyä. Toimintatarinoiden avulla kerätään tietoa käyttötilanteesta ja niihin liittyvistä tehtävistä, mahdollisuuksista, rajoitteista ym. Ne kuvaavat jonkun käyttäjän toimintaa käyttöliittymän parissa. Käyttötarinan avulla kerätään tietoa siitä, miten asiat tehdään kyseisen tuotteen avulla. Käyttötarinat tehdään toimintatarinoiden ja kerätyn materiaalin, kuten käyttäjätutkimuksen pohjalta. Käyttö-ja toimintatarinoiden edut ovat siinä, että kun suunnittelija kirjoittaa tiettyä tapahtumaa auki, hän huomaa helposti puutteet käyttöliittymässä. Käyttötarinat kirjoitetaan jonkin tietyn persoonan mukaan ja tämä persoona myös esitellään.

11 11 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS Sivukartta (sitemap) Sisältösuunnittelu ja sivukartta muodostavat verkkopalvelun perustan. Sisältö jaotellaan aiheiden mukaan ja niille muodostetaan otsikot. Aiheet ja niiden otsikot antavat pohjan käyttöliittymäsuunnittelulle. Rakenteen suunnittelussa lähdetään liikkeelle sivuston sisällöstä, jota käyttäjälle halutaan tarjota tai jota käyttäjä sivulta etsii. Rakenne on usein hierarkkinen ja sivuja on eri tasoissa. Sivukartan avulla nähdään helposti, onko sisältö tasapainossa. Liian monitasoinen navigointi aiheuttaa käyttöliittymäsuunnittelun ja visuaalisen suunnittelun vaiheessa usein ongelmia.

12 12 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS

13 13 2. PALVELUN RAKENNE, SIVUKARTTA JA TOIMINNALLISUUS Sivukartan julkaiseminen www-sivulla Kartan tulee antaa lukijalle selvä kuva sivuston rakenteesta siten, että hän halutessaan tietylle sivulle voi klikata karauttaa ja päästä sille suoraan tarvitsematta kahlata sivuston läpi. Pidä kartta ajan tasalla.

14 14 3. RAUTALANKAMALLI Rautalankamallit tehdään, kun verkkosivuston, -palvelun tai järjestelmän toiminnallisuus on suunniteltu ja eri sivujen pääasiallinen sisältö on päätetty. Rautalankamallit ovat yksinkertaisia, visuaalisia esityksiä toiminnoista, sisäisestä rakenteesta sekä informaatiohierarkiasta. Ne voidaan piirtää joko käsin paperille tai käyttää niihin tarkoitettuja ohjelmia. Niidenavulla kuvataan esimerkiksi valikkojen, leipätekstin, kuvien, painikkeiden ja animaatioidenpaikat. Yksi rautalankamallien tärkeimmistä tehtävistä on se, että niiden pohjalta tehtyjen prototyyppien avulla testataan käyttöliittymän toimivuutta. Prototyypit voivat olla käsin piirrettyjä luonnoksia, joita käyttäen käyttäjä suorittaa testin. Testausten ja palautteenjälkeen rautalankoja ja toimintoja parannellaan uusilla suunnittelukierroksilla. Toisin sanoen käyttöliittymää iteroidaan päästen lähemmäs lopputulosta.

15 15 3. RAUTALANKAMALLI

16 16 3. RAUTALANKAMALLI Rautalankamallissa ei oteta kantaa siihen, miltä verkkosivusto näyttää visuaalisesti ja esimerkiksi joidenkin elementtien paikat käyttöliittymässä voivat muuttua visuaalisen suunnittelun yhteydessä. Käyttöliittymäsuunnittelu voidaan yhdistää visuaaliseen suunnitteluun, jos sivuston kokonaisuus on suhteellisen yksinkertainen. Rautalankamalleista on erityisesti hyötyä responsiivisia sivuja suunnitellessa, jolloin jokaisesta näkymästä tulee suunnitella esimerkiksi tässä tapauksessa kolme eri näkymää (läppäri, täppäri ja mobiili).

17 17 4. 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

18 18 Graafinen suunnitelma (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

19 19 5. KÄYTETTÄVYYS ISO standardi määrittelee käytettävyyden sen mukaan, kuinka käyttäjä saavuttaa määritellyt tavoitteensa tietyssä ympäristössä". Vaikuttavuus: miten tarkoin ja täydellisesti käyttäjä saavuttaa tavoitteensa. Tehokkuus: tavoitteiden saavuttamista suhteutettuna käytettyihin resursseihin. Tyytyväisyys: käyttäjän tyytyväisyys laitteen tai järjestelmän käyttöön, tyytyväisyyttä vuorovaikutuksen sujuvuuteen ja sen tulokseen. Esimerkiksi astianpesukoneen pakkauksen käytettävyys voi olla hyvä tai huono.

20 20 5. KÄYTETTÄVYYS IT-alalla Jakob Nielsen on laajentanut ISO-määritelmää opittavuuden, muistettavuuden ja virheiden vähyyden kriteereillä: Opittavuus: miten nopeasti ja helposti uusi vuorovaikutteisen laitteen tai järjestelmän käyttäjä oppii laitteen toimintalogiikan ja käyttämisen. Muistettavuus: miten helppoa jo aiemmin laitteen käytön oppineen henkilön on palauttaa mieleen laitteen käyttö ja sen toiminnallisuus. Virheiden määrä (vähyys): käyttäjän suorittamissa toimenpiteissä tapahtuvien virheiden määrää.

21 21 5. KÄYTETTÄVYYS Palvelun, järjestelmän tai verkkosivun käyttökokemukseen vaikuttavat verkkosivun tai järjestelmän hyödyllisyys, helppokäyttöisyys käytön tehokkuus. Mitä helpommalla käyttäjä saavuttaa tavoitteensa, esimerkiksi löytää hakemansa tiedon, sitä käytettävämpi verkkosivu on. Käytettävyyden lisäksi käyttökokemukseen vaikuttaa verkkosivun tai järjestelmän visuaalisuus.

22 22 5. KÄYTETTÄVYYS Huono käytettävyys ajaa käyttäjän pois verkkosivuilta hakemaan etsimäänsä palvelua muualta. Käyttäjä siirtyy helposti pois sivustolta, jos sivustolla on huono tai käyttökelvoton navigaatio käyttäjän etsimä informaatio on epäselvästi aseteltu eikä vastaa nopeasti haettuihin kysymyksiin. Käytettävyydellä KILPAILLAAN kävijöiden suosiosta.

23 23 6. LAYOUT Useimpien verkkosivujen sommittelurakenteet koostuvat ylätunnisteesta (header), alatunnisteesta (footer) sekä navigointi- ja sisältöelementeistä. Ylätunniste sisältää tiedot sivustosta/organisaatiosta sekä hakukentän. Ylätunnisteen alapuolella on tyypillisesti sivuston päänavigointipalkki ja alanavigointipalkki. Paikallinen eli sivukohtainen navigointi sijoitetaan usein vasempaan (tai oikeaan reunaan). Sisältöelementit käsittävät suurimman alueen sivusta ja niitä voidaan jakaa moniin erilaisiin osa-alueisiin. Alatunniste sisältää usein esim. yksityiskohtaiset yhteystiedot, tekijänoikeudet ja palvelun vastuutahot. Verkkopalvelun tyypistä ja laajuudesta riippuen ei ole välttämätöntä käyttää kaikkia elementtejä. Suppeissa sivustoissa paikallinen navigointi on usein tarpeeton.

24 24

25 25 6. LAYOUT Layoutin suunnittelu Verkkosivuja suunniteltaessa kannattaa näkymä suunnitella niin, että sivun molemmille puolille jää tyhjää tilaa. Sivut kannattaa suunnitella esimerkiksi niin, että itse sivu vie näytöstä 80 % ja ympärille jää 10 % tyhjä tila. Sivut kannattaa myös palstoittaa, jotta tekstiriveistä ei tule liian pitkiä.

26 26 6. LAYOUT Layoutin suunnittelu Layoutin linjaus selaimessa a. Layout keskitetään b. Layout linjataan vasempaan reunaan c. Layout venyy selaimen ikkunan koon mukaan mukana Keskitetty layout Visuaalinen layout pystytään kontrolloimaan Tekstipalstoille pystytään määrittämään kohtuullinen leveys Pystytään hallitsemaan koko selaimen alue riippumatta siitä, kuinka leveä selaimen ikkuna on Väripalkit, värialueet, taustakuvat ja osa elementeistä ulottuu reunasta reunaan Mitä tummempi tai voimakkaampi taustaväri, sen hallitumpi kokonaisuus

27 27 6. LAYOUT Layoutin suunnittelu Vasempaan reunaan tasattu layout, Pystytään hallitsemaan tekstipalstat Layout säilyy rikkoutumattomana ja suunnitellun kaltaisena Selaimen levyinen layout Saadaan käytetyksi koko selainikkunan alue Dynaaminen: layout mukautuu selaimen mukaan, jos vain tekstiä Sivun layout ja ulkoasu voivat vaihdella selainikkunan koon muuttuessa

28 28 7. TYÖKALUJA 960 Grid System, taittopohjatyökalu Taittopohja eli grid on hyödyllinen apuväline sommittelussa. 960 Grid System on taittopohja, joka helpottaa verkkosivujen suunnittelua ja asettelua. Se on yksi kaikkien aikojen suosituimmista pohjamalleista internetsivujen suunnittelussa ja toteutuksessa. Pohjan ideana on sivun jakaminen määrätyn levyisiin palkkeihin. Palkkeja apuna käyttäen kootaan sivun rakenteen perusta ja elementit sijoitellaan sivulle.

29 29 7. TYÖKALUJA 960 Grid System, taittopohjatyökalu 960 Grid System pakottaa siihen pohjautuvat sivustot samaan kaavaan ja saattaa näin ohjata sivuston suunnittelua tiettyyn suuntaan ja rajoittaa luovuuden käyttöä suunnitteluprosessissa. Toinen työkalun heikkous on sen staattisuus ja sidonnaisuus 960 pikseliin. Kaikkien sivuelementtien koko on rajoitettu -- kokojen muuttaminen voi helposti rikkoa layoutin. Ei ole helppo työkalu.

30 30 7. TYÖKALUJA

31 31 8. WWW-SIVUN TAITTO Taitolla tarkoitetaan jonkin julkaisun esimerkiksi lehden tai nettisivun. elementtien sommittelua ja tyylittelyä haluttuun muotoon. Hyvän taiton tunnusmerkkejä ovat informatiivisuus, puhuttelevuus, mielenkiintoisuus helppolukuisuus.

32 32 8. WWW-SIVUN TAITTO Web-julkaisun taittomalleja Web-julkaisu suunnitellaan ensisijaisesti näytön ja linkkien sekä käytettävissä olevan sisällön, tekstin ja kuvien pohjalta. Web-julkaisun sivu voidaan jakaa pystysuoriin palstoihin. Tämän lisäksi sivu usein jaetaan myös vaakasuuntaisiin osiin joko ylä- tai alareunasta tai molemmista. Keskelle jäävä tila voidaan lisäksi jakaa kahteen tai kolmeen palstaan.

33 33 8. WWW-SIVUN TAITTO Web-julkaisun taittomalleja Yksinkertainen taittomalli, jossa vain pakolliset lohkot container eli koko sivun kehys, header, navigointi, sisältö. footer

34 34

35 35 8. WWW-SIVUN TAITTO Vasen palsta, jossa linkit sisäsivuille ja osastoille

36 36 8. WWW-SIVUN TAITTO Yläpalkki, jossa nimiö ja/tai linkit Lähde: Huovila: Look - visuaalista viestisi, Inforviestintä, 2006

37 37 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS Harjoitustyövaatimukset Harjoitukseen käytetään 1-3 päivää

38 38 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS Työ tehdään dokumenttipohjaan (Moodlessa) Kuvataan dokumenttipohjan asiat Heuristinen arviointi on tehty käyttötapaukset läpikäyden ja kohtuullisen kriittisesti (ei vain todettu että kohdat ok). Testisessiota varten laadituista näkymistä luodaan muutama lopullinen versio Layout - Wordpressillä tai jollain muulla työkalulla.

39 39 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS Tekemiseen vaaditaan 2-4 hengen ryhmiä Roolit: Moderaattori, prosessori, havainnoitsija MUODOSTAKAA ryhmät Miettikää mikä projektiaiheenne voisi olla. Ideoikaa ryhmässä Mikä on työkalu (Wordpress, Dreamweaver, Muu?) Testihenkilöinä toimivat muiden ryhmien jäsenet. HUOM! KAIKKIEN ryhmien jäsenten työpanosta tarvitaan!

40 40 9. KÄYTTÖLIITTYMIEN SUUNNITTELU JA TESTAUS KYSYKÄÄ APUA TARVITTAESSA!! Työn iloa