Esityksen teknisestä toteutuksesta

Muutama maininta esityksen toteutuksesta:

• Käytössä on W3-konsortion Dave Raggettin HTML Slidy -kirjasto.
• Tulostaminen: parhaan tuloksen saavutat, kun otat CSS-tyylit ja Javascriptin pois käytöstä ennen tulostamista. Paperia hukkaava tuloste syntyy, kun painat a-kirjainta ja tulostat.
• Navigointi tapahtuu seuraavilla painikeilla: nuoli vasemmalle, nuoli oikealle, PgUp ja PgDn. Eteenpäin pääsee myös välilyönti painikkeella. Kun haluat suurentaa tekstiä, paina b. Kun haluat pienentää, paina s.
• Lisää ohjeita: W3C Slide Shows in XHTML

Luennon teemat

Suunnittelutyön dokumentointi

• Projektinhallinta ja dokumentointi (ei käsitellä tällä opintojaksolla)
• Tarjous ja toimeksianto
• Synopsis ja konseptisuunnitelma
• Asiakäsikirjoitus
• Tuotantokäsikirjoitus
• Muut dokumentit

Luennon tavoitteena on perehdyttää suunnittelutyön dokumenttityyppeihin. Dokumentteihin palataan kurssin kuluessa aika ajoin.

Dokumentointi -välttämätön paha?

Valokuva: Frank Jepsen CC-By-2.0

• Miksi pitäisi dokumentoida?
• Miksi dokumentointi on haastavaa?
• Mitä pitäisi dokumentoida?

Miksi pitäisi dokumentoida?

Dokumentointi

• palvelee projektin hallinnon, projektiryhmän ja tilaajan tarpeita,
• toimii tuottajan ja tilaajan välisen keskustelun tukena,
• tukee organisaation oppimista,
• tukee monin tavoin käytännön projektityöskentelyä, esimerkiksi
  • projektin yhteisen tavoitteen hahmottamisessa,
  • projektin etenemisen seurannassa,
  • vähentää henkilöriippuvuuksia,
  • ongelmanratkaisun tukena - ongelma on helpompi hahmottaa, kun ajatus on ulkoistettu,
  • suunnitteluratkaisujen muistaminen - miten ongelma ratkaistiin,
  • ajantasaisen tiedon löytämisessä
  • päätösten muistaminen - mitä olikaan sovittu?

Miksi dokumentointi on haastavaa?

• Ei ole vakiintuneita formaaleja dokumenttimalleja tai -pohjia. Käsikirjoitus- ja dokumenttimalleja on yhtä monta kuin on tuotantoryhmääkin.
• Dokumenttien nimet voivat vaihdella riippuen esimerkiksi yrityksestä (nimityksiä käytetään myös ristiin).
• Verkkopalvelun suunnittelun ja toteutuksen jokaiseen vaiheeseen liittyy oma dokumentaationsa.
  • Vaadittavien dokumenttien tyypit ja niiden määrä riippuu tuotantoprojektin laajuudesta ja suunniteltavasta verkkopalvelutyypistä.
• Edellyttää suunnittelua
  • Dokumentoinnin taso: Mitä dokumentteja suunnittelu- ja toteutustyöstä tässä projektissa laaditaan? Huomioitava projektin taloussuunnittelussa, koska dokumentointi vaatii resursseja. Mitä dokumentteja eri sidosryhmät tarvitsevat?
  • Dokumentoinnin hallinta: Selkeä ja johdonmukainen hakemistorakenne, dokumenttion versionhallinta, ylläpitovastuut ja suojaukset sekä vanhentuneiden dokumenttien arkistointi.

Mitä pitäisi dokumentoida?

Erilaiset dokumentit voidaan jakaa karkealla tasolla kolmeen eri ryhmään:

• Projektin hallintaan liittyvät dokumentit: tarjoukset, tuotantosopimukset, projektisuunnitelmat, tekijänoikeussopimukset, salassapitosopimukset, palaverimuistiot, työpäiväkirjat jne.
• Verkkopalvelun suunnitteluun liittyvä dokumentointi: esimerkiksi käsikirjoitusvaiheen dokumentit, synopsis, konseptisuunnitelma, asiakäsikirjoitus ja tuotantokäsikirjoitus.
• Verkkopalvelun toteutukseen liittyvät dokumentit: erilaiset teknisen määrittelyn dokumentit

Katso taulukko verkkopalvelun sisällöntuotannossa käytettävistä dokumenteista.

Aloitusvaiheen dokumentit

Valokuva: Emma Jane Hogbin CC-By-2.0

• Tarjouspyyntö ja tarjous
• Toimeksianto
• Synopsis
• Konseptisuunnitelma

Tarjouspyyntö ja tarjous

Suunnittelu- ja toteutusprojekti lähtee liikkeelle useimmiten tarjouspyynnöstä.

• Tilaajalla voi olla valmis synopsis ja konseptisuunnitelma, joista selviää mitä tehdään, kenelle, miksi ja milloin (tärkeimmät rajaukset). - Helppo laatia tarjous.
• Useimmiten tarjouspyyntö sisältää liian vähän informaatiota tarjouksen laatimisen pohjaksi. Mitä sitten?
  • Tavataan tilaaja ja keskustellen selvitetään, mitä tilaaja haluaa ja mitkä hänen tavoitteensa ovat.
  • Laaditaan vastineeksi tiukka tarjous. Tarjotaan asiakkaalle perustoiminnallisuuden sisältävä ratkaisu.
  • Tarjotaan asiakkaalle esitutkimus- ja kartoitustyötä. Tarkoituksena on selvittää asiakkaan tarpeet.

Tarjous

• Aina kirjallisena - tarvittaessa tarjouksen sisällöstä voidaan varmistua.
• Tarjous on juridisesti sitova.
  • Tarjouksen jättäjä ei voi yksipuolisesti peruuttaa tarjoustaan.
  • Tilaajalla on oikeus saada tarjottu tuotanto tarjouksessa mainitulla hinnalla ja mainituilla ehdoilla.
  • Tarjous sitoo tarjouksen jättäjää tarjouksen voimassaolon ajan.
• Joissakin yksittäistapauksissa tarjous voidaan peruuttaa.

(Esim. Lukkari 2004, 90 - 92.)

Lähtökohtana toimeksianto

Tarjouksen hyväksymisen jälkeen tilaaja laatii toimeksiannon.

• Toimeksianto (briefing) on lähtökohtana koko suunnittelu- ja tuotantoprosessille.
• Tilaaja määrittelee minkälaisen verkkopalvelun tai -sisällön hän tilaa.
• Toimeksianto on tilaajan vastuulla.
  • Usein se tehdään kuitenkin yhteistyössä (tässä vaiheessa voidaan esim. tehdä yhdessä ideointityötä tilaajan kanssa)
  • Toimeksiannon tulee olla riittävän yksiselitteinen ja kattava, jotta molemmat sekä tilaaja että toimittaja ovat yhtä mieltä siitä, mihin lopputulokseen pyritään.

(Keränen, Lamberg & Penttinen 2003, 24.)

Synopsis

• Ensimmäinen varsinainen käsikirjoitus- eli suunnitteludokumentti.
• Tiivistää ideointivaiheen tulokset yhteen dokumenttiin.
• Synopsis
  • tiivistelmä verkkopalvelun perusideasta eli sisällöstä ja toiminnallisuudesta,
  • hahmotelma tai luonnos; paperi, josta selviää palvelun sisältö ja muoto,
  • tehtävänä on ennen muuta tiivistää verkkopalvelun perusideat siten että eri osapuolet (rahoittaja, tilaaja, toteuttava työryhmä, suunnittelija) pääsevät yhteisymmärrykseen siitä mitä ollaan tekemässä
  • ei sisällä kuvallisia tai muita yksityiskohtaisia ratkaisuja
• Erityisesti laajojen operatiivisten verkkopalveluiden suunnittelutyön yhteydessä laaditaan myös ns. konseptisuunnitelma.

Synopsis

• Suunnittelijan tai käsikirjoittajan kirjoittamassa synopsiksessa määritellään: aihe (mitä), kohdeyleisö (kenelle), käyttötapa- ja tarkoitus (miten) sekä tavoite (miksi).
• Synopsis on hyväksytettävä aina tilaajalla.
• Synopsista hyödynnetään jatkotyöskentelyn pohjana. Sen perusteella voidaan hahmotella alustava
  • rakennekaavio,
  • sisältöjäsennys,
  • käyttöliittymän ominaisuus- ja toimintamäärittelyt,
  • toiminnallisuuden määrittely,
  • aikataulu ja
  • budjetti.

Konseptisuunnitelma

• Palvelun strategisen vaiheen suunnittelu
  • tavoitteena on selvittää ja määritellä verkkopalvelun idea, sisältö ja toiminnan perustavoitteet
  • huomioidaan palvelun tilaajaorganisaation strategiset tavoitteet sekä keskeisten asiakas(käyttäjä)ryhmien ja sidosryhmien tavoitteet ja tarpeet
• Tulokset dokumentoidaan konseptisuunnitelmassa (strategy document)
  • tilaajaorganisaation strategiset tavoitteet kuten esim. verkkopalvelun strateginen tarkoitus, liiketaloudelliset tavoitteet ja mahdollisuudet, markkinatilanne, palvelun imago ja tyyli, palvelun mahdolliset riskit ja haitat sekä liittymäkohdat organisaation muuhun markkinointiin
  • vaihtoehtoisia konseptisuunnitelmia
  • selvityksen asiakasryhmistä (käyttäjäryhmistä) ja heidän tarpeistaan.

Personat suunnittelun tukena

Kuvitteellinen esimerkki tyypillisen käyttäjän profiilista (Erimenu.fi)

• Ikä: 45
• Perhestatus: aviossa, 2 lasta
• Ammatti: toimihenkilö
• Tietotekniikan käyttö: Suhtautuu tietotekniikkaan ristiriitaisesti. Kokee Internetin käytön hyödylliseksi. Kohtaa toisinaan ongelmia, joita ei osaa ratkaista. Käyttää Internetiä 4- 6 h/vko. Käytössä pari vuotta vanha kone (Windows XP) ja ADSL-yhteys.
• Internetin käyttö: 100% kotona, pankkipalvelut, keskustelupalsta, ostokset
• Motiivi: AnneMaritta haluaa tietää millaisia uusia vilja-allergiselle soveltuvia elintarvikkeita on tullut markkinoilla. "Ei minulla ole aikaa etsiä sopivia elintarvikkeita kaupoista."

Lisätietoja: Develop Personas

Suunnitteluvaiheen dokumentointi

Valokuva: Mai Le CC-By-2.0

• Asiakäsikirjoitus liitteineen
• Tuotantokäsikirjoitus
• Muut dokumentit

Keskeisin dokumentti = asiakäsikirjoitus

• Tarkoituksena on kuvata ja rajata verkkopalvelun asia(informaatio)sisällöt ja toimintoprosessit - muodostaa rungon, jonka ympärille palvelu rakennetaan.
• Pyrkii konkretisoimaan esim. synopsiksessa, konseptisuunnitelmassa esitettyjä asioita
  • määrittelevät verkkopalvelun tietosisältö sekä asiointi- ja toimintaprosessit - informaatioarkkitehtuuri (information architecture)
  • kertoo sisällön, sen rakenteen ja muodon, toiminnallisuuden sekä luonnokset käyttöliittymästä
• Dokumentin pohjalta tulisi kyetä muodostamaan käsitys lopullisesta verkkopalvelusta.
• Erityisen tärkeätä hyväksyttää lopullinen asiakäsikirjoitus tilaajalla ennen varsinaista tuotantokäsikirjoituksen tekemistä ja tuotannon aloittamista.

(Vrt. Garret 2003, 62 - 65; Lukkari 2004, 105; Keränen, Lamberg & Penttinen 2003, 28; Metsämäki 2000, 29 - 35.)

Asiakäsikirjoituksen sisältö

Asiakäsikirjoitus toimii pohjana tuotantokäsikirjoitukselle ja tekniselle määrittelylle. Tyypillisesti asiakäsikirjoituksesta selviää:

• mitä sisältöjä verkkopalveluun sisällytetään
  • miten laaja verkkopalvelu on,
  • miten sisällöt tuotetaan verkkopalveluun (mahdollinen sisällönhallintajärjestelmä)
• miten sisältö jäsennetään (informaatioarkkitehtuuri),
  • millainen rakenne verkkopalvelulla on,
  • miten rakenteessa liikutaan,
• mitä mediaelementtejä käytetään ja missä yhteydessä,
• miltä sisältö näyttää,
  • mikä on informaation esitystapa ja
  • millainen verkkopalvelun visuaalinen ulkoasu (lay-out) on.

Toiminnallisuuden kuvaus

• Toiminnallisuuden dokumentoimisessa voidaan hyödyntää esim. käyttötapauksia:
  • Yksittäinen käyttötapaus (use case) kuvaa käyttäjän ja järjestelmän välisen vuorovaikutuksen jonkin tavoitteen saavuttamiseksi käyttäjän näkökulmasta.
  • käyttötapauskuvaus (use case description) kertoo sanallisesti yhden käyttötapauksen sisällön käyttäen käyttäjän termejä.
  • Käyttötapauskaavioiden (use case diagram) avulla järjestelmän käyttötapaukset, toimijat sekä niiden väliset suhteet esitetään graafisesti.
• Kuvauksen tarkkuus voi vaihdella varsin vapaamuotoisista tarinoista suhteellisen formaaleihin kuvauksiin.
  • Tyypillisesti kuvauksessa kerrotaan, mitä käyttötapauksessa tapahtuu ja mistä asioista käyttäjä ja järjestelmä vaihtavat tietoa.
  • Yleensä esitellään myös vuorovaikutustilanteen peruskulku, jota täydennetään edelleen kuvaten erilaiset muunnelmat ja poikkeustilanteet.
• Myös: olennainen käyttötapaus (essential use case) tai hierakkinen tehtäväanalyysi (hierarcial task analysis HTA)

(Esim. Schneider & Winters 1998, 14 - 38; Wiio 2004, 110 - 122.)

Toiminnallisuuden kuvaus

Valokuva: Sample Hand-drawn Storyboard [online]. Charlotte: University of North Carolina at Charlotte [viitattu 17.12.2008] http://www.lhup.edu/jyoho/participation/STORYBOARDING.doc

Toiminnallisuuden kuvaamisessa voidaan hyödyntää myös

• erilaisia luonnoksia (sketches)
• kuvakäsikirjoituksia (storyboard)
• prototyyppejä sekä mock-up -malleja
• kaavioita ja diagrammeja

(Newman & Landay 1999)

Ensimmäisiä luonnoksia Erimenu.fi -verkkopalvelun toiminnallisuuden hahmottamisesta (klikkaa kuvaa, niin näet sen suurempana).

Sisällön hahmottaminen

• Laaditaan kulloistakin käyttötarkoitusta varten sopiva verkkopalvelun informaatioarkkitehtuuri, jolle pohjana voi toimia
  • asian käsitteellinen jäsennys (valmis sivusto: Saavutettavuus verkkopalveluissa)
  • luonnos verkkopalvelun toimintaprosesseista
• Pienissä verkkopalveluprojekteissa esim. sivukartan tasoinen esitys sisällöstä.
• Laajoissa verkkopalveluiden ollessa kyseessä tarvitaan yksityiskohtaisempia dokumentteja
  • paljon tekstiä sisältävästä palvelusta laaditaan ns. sisältökäsikirjoitus,
  • vahvasti kuvaan tukeutuvasta palvelusta usein ns. kuvakäsikirjoitus (storyboard).

Katso esimerkit: Käyttäjään liittyvän informaatiosisällön ja toimintojen alustava hahmottaminen

(Vrt. Metsämäki 2000, 181 - 185.)

Sisällön hahmottaminen

• Luettelo on sisällysluettelon tapainen luettelo, missä pääasiat on jaettu valmiiksi alakohtiin ja niiden tarkennuksiin.
• Sivukartta jakaa sisällön ja toiminnallisuudet sivutasolle. Sivukartta kuvaa verkkopalvelun rakenteen.
• Sisältökäsikirjoitus koostuu tekstistä, jossa on huomioitu jo tehdyt sisältömäärittelyt.
  • kuvaus verkkopalvelun informaatiosisällöstä
  • mitä informaatiota kukin osio (mahdollisesti myös alaosiot)
  • usein myös kuvaideat, kuvatekstit ja ääniosiot jne.
• Kuvakäsikirjoitus kertoo sarjakuvamaisesti piirrettynä sen, mitä esim. videossa tai animaatiossa tapahtuu.
  • voi hyödyntää myös verkkopalvelun toiminnallisuuden havainnollistamisessa (Newman & Landay 1999).
• Sisällön jäsentäminen
  • esitystavan jäsennys (otsikko, tekstikappale, luettelo jne.)
  • sisältötason jäsennys (esim. ruokaohje: valmistusaineet, valmistusohje, välineet)
  • tietomallit (periaatteet, joiden mukaan tietokannan tietoalkiot jäsennetään) (katso esimerkki: Sisällön jäsentäminen tietomallin suunnittelun pohjaksi

Rakennesuunnitelma

Rakennesuunnitelma jäsentää verkkopalvelun informaatiosisällön ja toimii liikkumisjärjestelmän suunnittelun pohjana.

• Rakennesuunnitelmassa kuvataan mitkä asiat esitetään ja missä järjestyksessä.
• Erillisen rakennesuunnitelman tekeminen kannattaa.
• Rakenne esitetään kaavioiden ja piirrosten avulla.
  • Tarvittaessa täydennetään selventävillä teksteillä.
  • Kaikkia mahdollisia tasoja ja linkityksiä ei tarvitse suunnitelmassa esittää.
• Rakennesuunnitelmasta tulisi selvitä sivuston päätasot ja tärkeimmät liikkumismahdollisuudet.

Esimerkki 1: Yksinkertainen havainnollistus rakenteesta
Esimerkki 2: Garret, J.J. Sample diagram (pdf)

(Esim. Garret 2003, 106 - 111; Garret 2002; Keränen, Lamberg & Penttinen 2003, 35 -39.)

Asiakäsikirjoituksen liitteet

• Sisällöllisen suunnittelun rinnalla usein käynnissä myös muita suunnitteluprosesseja, joiden suunnitteludokumentit liitetään osaksi asiakäsikirjoitusta
• Käyttöliittymä
• Visuaalinen ilme: perusasettelu (lay-out), typografia, tekstielementtien tyyli ja sijoittelu, kuvallinen tyyli
• Mediakäsikirjoitus: mediavalinnat ja mediaelementtien käytön suunnittelu
• Tekniset määrittely

Käyttöliittymä

• Verkkopalvelun käyttöliittymä koostuu yksinkertaisimmillaan toiminnallisuutta ohjaavista elementeistä (navigointilinkit).
• Yleensä käyttöliittymästä laaditaan mallinäyttö (wireframe model), missä esitetään mm. päätason navigointi.
• Toisinaan laaditaan myös tyyliopas, joka sisältää ohjeita, sääntöjä ja suosituksia käyttöliittymän toteuttamiseksi.

Esimerkki 1: Käyttöliittymän luonnostelua
Esimerkki 2: Käyttöliittymän luonnos
Esimerkki 3: Valmis tuote

Tuotantokäsikirjoitus

Tarkka tekijöille laadittu ohje tuotantoon liittyvistä asioista.

• Kun tilaaja on hyväksynyt lopullisen asiakäsikirjoituksen, se laajennetaan tuotantosuunnitelmaksi - keskeisin dokumentti on tuotantokäsikirjoitus.
• Sisältää ohjeet tuotantoon osallistuville oman työnsä tueksi. Esim. äänisuunnittelija pystyy toteuttamaan tarvittavat äänet.
• Ohjaa verkkopalvelun tekijää "kokoamaan" lopullisessa asiakäsikirjoituksessa määritellyllä tavalla.
• Toimii myös dokumenttina tehdyistä ratkaisuista.
• Tuotantokäsikirjoitusta ei yleensä esitellä tilaajalle.

(Esim. Lukkari 2004, 105 -108.)

Tuotantokäsikirjoitus

• Mediaelementtien tuotanto-ohjeet
  • Videoiden, kuvien, äänen tuotanto-ohjeet, pakkausmenetelmät
  • Animaatioiden ja videoiden kuvakäsikirjoitukset
  • Tiedostomuodot ja ohjelmalisäkkeet (plug-in).
• Verkkopalvelun rakenne, rakenteessa liikkuminen, toiminnallisuus
  • Tuotannollisia ohjeita
  • Materiaalin varmuuskopiointi.
  • Materiaalin hallinta tuotantovaiheessa (aineistojen sijainti).
  • Käytetyt tiedostomuodot.
  • Käytetyt ohjelmistot, versiot, ohjelmointikielet jne.
• Visuaaliset ohjeet:
  • Perusasettelu (lay-out)
  • Kuvakoot
  • Tiedostomuodot
  • Värimäärät, väripaletit, pakkausmuodot
• Liitteenä tekninen määrittelydokumentti.

Muut dokumentit

Palaverimuistiot

• Projektin alkuvaiheessa sovitaan, millainen käytäntö muistioiden laatimisessa otetaan käyttöön
• Muistio on tiivis kuvaus siitä mitä päätettiin ja sovittiin (ei kannata uhrata kohtuuttomasti aikaan).
• Asiakaspalavereista kannattaa aina laatia muistio ja lähettää se asiakkaalle (tilaaja on tietoinen siitä, missä vaiheessa toteutus on ja millaisia kannanottoja tai päätöksiä tilaajalta mahdollisesti seuraavaksi odotetaan)
• Palaverimuistiossa on yleensä seuraavanlaiset asiat: projektin nimi, paikka ja päiväys, osallistujat, käsitellyt asiat, päätetyt asiat, jatkotoimenpiteet: kuka tekee mitäkin ja mihin mennessä?

Työpäiväkirjat

• Työn seurannan ja kommentoinnin apuvälineenä.
• Vapaamuotoinen päiväkirja: mitä on tehty, miksi tiettyihin ratkaisuihin on päädytty, miten ajankäyttö onnistui, mitä ongelmia mahdollisesti esiintyi ja miten ne ratkaistiin.

Dokumentointia wiki-ympäristössä

(Vrt. Lukkari 2004, 108.)

Lähteet