MPV-sivusto Sivukartta
WWW-aiheista aineistoa

Matti Vuori

Hyvien weppisivujen laadinta - "kalvosarja" / 1999

Tämä esitys on suunniteltu asiantuntijaorganisaation henkilöstön kouluttamiseen. Näkökulma aiheeseen on siksi käytännönläheinen. Edellisissä koulutustilaisuuksissa on luotu yhteinen käsitys siitä, mitkä ovat hyvien sivustojen tunnusmerkkejä. Nyt käydään läpi tärkeämpää kysymystä: miten niitä hyviä sivustoja saadaan käytännössä aikaiseksi!

Yleiset hyvän suunnittelun periaatteet

• Päätettävä ja priorisoitava kohderyhmät. Mietittävä kenelle viestitään
• Selvitettävä ja priorisoitava heidän tarpeensa. Palvelujen on vastattava tärkeimpiä tarpeita
• Määritettävä ja priorisoitava (taas!) palvelun toiminnot. Tärkeimmät toiminnot toteutettava erityisen hyvin
• Suunniteltava sivut monipuolisesti hyvin. Keinoja: Valmiit sivusto- ja sivumallit, hyvät kehittämisen periaatteet, oikea kehittämisprosessi oikea kyvykkyyspaletti tiimissä
• Suunniteltava sisältöjen tuotanto- ja ylläpitoprosessi. Hyvän kehittämis- ja ylläpitoympäristön luominen
• Hyvyyttä ei saa uskoa arvioimatta ja testaamatta
• Ei isompaa kakkua, kuin minkä jaksaa syödä! Rajattava toiminnot niiksi, mitkä voidaan hallita. Vanha sananlasku: Design 200 %, implement 90 (or something like that).
• Prosessin riskit hallittava. Ks. WWW-sivustoprojektin riskien tarkistuslista

Muutamia sivujen suunnittelun reunaehtoja

• Käytettävä vakiofontteja, jotka löytyvät asiakkailta
• Sopivuus tietyn sukupolven selaimille: vasta vuonna 2000 voidaan olettaa kaikilla "4.0"-selaimet. Eli: Eli JavaScriptiä yms. voi käyttää, mutta rajoitukset tietäen (kaikki eivät sitä edes käytä), Java latautuu edelleen liian hitaasti - käytä vain äärimmäisessä hädässä
• Sopiva sivun suunnitteluleveys yleensä 600 pikseliä, ja vakiokorkeus, (jos halutaan rajata) 400 pikseliä - mutta hyvä sivu mukautuu selainikkunan leveyteen. Mutta tämä riippuu kohderyhmästä. Tarvitaanko toimivuutta pienlaitteissa?
• Väripaletti on edelleen hyvä olla "WWW-turvallinen" (sivun väritykset, kuvitus, fontit), paitsi valokuvissa
• Taustaan sulautuvia kuvia voi realistisesti tehdä vain läpinäkyvillä GIF-kuvilla
• Yleisin modeeminopeus 30 kilobittiä; ensi vuonna 56 kiloa -> Kuvat ja ladattavat PDF:t pitää edelleen optimoida

Tyypillinen kehittämisprosessi

Tarveanalyysi

• Millainen sivusto, millainen järjestelmä todella tarvitaan?
• Mitä palveluja asiakkaat tarvitsevat eniten?
• Millaista tukea eri viestintä- ja liiketoimintaprosessit tarvitsevat?
• Nykyisten verkkopalvelujen analysointi ja puutteiden ja vahvuuksien tunnistaminen

Konseptisuunnittelu

• Konseptisuunnittelutiimin perustaminen
• Alustava toiminnallinen konsepti: mitä palveluja, mille kohderyhmille, mihin tarkoituksiin, millä tavoilla käytettäviksi, edut ja haitat, alustava laite- ja teknologia-alusta
• Nykyisten konseptien luova muuntelu
• Alustava liiketoiminta-suunnitelma: tavoitteet, liiketoiminta, organisointi
• Vaihtoehtoisten konseptien kehittäminen
• Konseptien visualisointi ja nopea prototypointi
• Vision jakaminen eri sidosryhmien ja ammattiryhmien välillä
• Protojen esittely, arviointi ja testaus. Ulkopuolinen arvioija
• => Toteutettavan konseptin valinta
• => Toteutettavan konseptin määrittely, vaatimusmäärittely
• => Toteuttavan organisaation määrittely

Toimintojen suunnittelu

• Tarkempi projektisuunnitelma
• Osioiden ja toimintojen määrittely ja lopullinen valinta
• Vuorovaikutussuunnittelu, Information design ja graafinen suunnittelu => käyttöliittymäsuunnittelu
• Ohjelmistokehitys
• Tietovirtojen ja työnkulkujen suunnittelu - tiedontuottajan sisäiset prosessit
• Ylläpitoprosessien suunnittelu

Testaus

• Käytettävyysanalyysit ja -testit
• Tekninen testaus
• Rajatut julkistukset
• Focus group -esittelyt

Sisältötuotanto

• Tekstituotanto
• Tekstien tiivistäminen
• Tekstien rakenteistaminen
• Kuvatuotanto

Palvelun avaamiseen valmistautuminen

• Ylläpito- ja liiketoimintaorganisaation valmennus
• Alpha-testaus
• Organisaatioiden käynnistys
• Beta-testaus

Lanseeraus

• Markkinoinnin uudet vaiheet

Seurantavaihe

• Käytön seuranta
• Ylläpito
• Muutostenhallinta

Kehittämisprosessin hallinta

Oikea tuotevisio - mitä ollaan kehittämässä?

Nykyaikaisten verkkopalvelujen kehittämisessä on ensiarvoisen tärkeää tehdä kaikille selväksi, millaista palvelua ollaan kehittämässä? Tämä siksi, että mainnossivut ja Internet-pohjainen tietojärjestelmä edellyttävät:

• Erilaista ja eri tavalla painottuvaa kehittämisprosessia
• Erilaista osaamista ja erilaisia rooleja
• Erilaista kehittämisen johtamista
• Niillä on erilaiset laatutekijät

"WWW-palvelu" ei enää vuonna 2001 kerro palvelusta yhtään mitään. Jos organisaation ainoa kehittämismalli on vuoden 1993 ToolBookin manuaalista kopioitu hypermediateoksen esittelemä malli, sillä ei pitkälle pötkitä.

Uusmediayritykset suhtautuvat usein sivustoihin staattisen sivuston kehittämisprojektina. Sivuston perustavan organisaation kannalta on kuitenkin menestymisen kannalta merkittävintä suhtautua kehittämiseen tietojärjestelmäprojektina! Tällöin kehittämisprosessissa vaikutetaan eniten tietovirtoja käsittelevään organisaatioon. Jos tämä unohtuu, saadaan tuotettua vaikuttavan näköinen sivusto, joka kuolee hyvin nopeasti.

Sivustoprojektin riskien ennakointi

Projektin suunnitteluvaiheessa on tärkeää tunnistaa mahdolliset myöhempien vaiheiden ongelmat, ja tunnistettavat puutteet projektin suunnitelmissa. Jos riskit laukeavat, on yleensä liian myöhäistä - ja liian kallista - hallinta ongelmia. WWW-projektit ovat luonteeltaan sellaisia, että ongelmat kasautuvat ja lisääntyvät lumivyöryn tavoin. Siksi projektisuunnittelun ja jämäkän projektinhallinnan merkitystä ei voi korostaa liikaa.

Seuraavaa riskien tarkistuslistaa voi käyttää alkuvaiheen apuna katselmoinnissa (lista on täydennetty versio Pk-yrityksen riskienhallinta-palvelussa julkaistusta versiosta).

1 Sivuston konsepti

• Onko sivustolle olemassa selkeä tarve?
• Onko tarve olemassa vielä muutaman vuoden päästä?
• Onko sivustolla selvä kohderyhmä ja asiakaskunta?
• Onko sivustolla aidot mahdollisuudet menestyä, jos se toteutetaan laadukkaasti?
• Sopiiko sivusto tilaajan liikeideaan tai toiminta-ajatukseen?
• Ovatko tilaaja ja sen sidosryhmät aidosti sitoutuneet projektiin ja valmiita resurssoimaan sitä riittävästi?
• Onko sivustoprojektin riskit kartoitettu? (Sivustoidea, SWOT yms.)

2 Alihankkijan kokemus

• Onko alihankkijalla esittää laadukkaita referenssejä vastaavista projekteista?
• Oletteko tutustuneet alihankkijan toteuttamiin sivustoihin?
• Onko alihankkijalla laaja aiempi ja nykyinen projektikanta?

3 Alihankkijan osaaminen

Onko alihankkijan - uusmediatalon - osaaminen riittävää kaikilla näillä osa-alueilla

• Asiakkaan ja projektin tarpeiden selvittäminen ja kirkastaminen
• Projektinhallinta
• Tekninen osaaminen - ohjelmointiteknologiat, tietokannat jne...
• Tietojärjestelmäosaaminen (jos projektissa käsitellään muuttuvaa tietoa, tehdään raportteja, käytetään lomakkeita)
• Hyperkirjaosaaminen - miten tietoaineistosta tehdään hyvin jäsennetty, helposti käytettävä linkitetty kokonaisuus?
• Graafinen suunnittelu. Onko käytettävissä tämän alan ammattilainen?
• Tekstin tuottaminen ja toimittaminen (copywriting). Onko käytettävissä tämän alan ammattilainen?
• Luovuus
• Käyttöliittymäsuunnittelu ja käytettävyys (usability)

4 Resurssit

• Onko alihankkijalla osoittaa pätevät resurssit kaikkiin projektin tehtäviin?
• Voidaanko niiden saatavuus taata koko projektin ajan?
• Onko alihankkija riittävän sitoutunut projektiin?
• Onko alihankkijan kanssa mahdollista kehittää laajempaa yhteistyötä?
• Onko tilaajalla riittävä pätevyys osallistua kehittämistyöhön ja sen valvontaan?

5 Teknologiavalinnat

• Onko ehdotettu/valittu teknologia sopivaa ottaen huomioon sivuston luonteen?
• Sopiiko teknologia tilaajan palvelinympäristöön ja tilaajan käyttämiin ohjelmistoihin?
• Onko teknologia käytössä muissa tilaajan järjestelmissä ja sivustoissa?
• Kuuluuko täydellinen dokumentointi suunnitelmaan?

6 Kehittämisprosessi

• Onko suunnitellussa prosessissa seuraavat vaiheet
  • Tarvekartoitus - mihin sivustolla pyritään?
  • Määrittelyvaihe, jossa luodaan sivuston peruskonsepti ja luonnostellaan tärkeimmät toiminnot?
  • Detaljisuunnitteluvaihe, jossa kaikki toiminnot suunnitellaan?
  • Selkeät arviointi- ja testausvaiheet, mukaanlukien käytettävyystestaus?
  • Testausvaihe ennen sivuston avaamista?
• Suhtautuuko alihankkija projektiin kehittämisprojektina (eikä suoraviivaisena "tuotantona")?
• Onko prosessissa ymmärretty iteraation ja prototyypityksen merkitys?
• Onko prosessissa toimia, joilla sivuston loppukäyttäjien näkökulma ja mielipiteet saadaan vaikuttamaan lopputulokseen? (Muita toimia kuin käytettävyystestaus; esimerkiksi focus group-keskustelut, demojen esittely tilaisuuksissa, käyttäjien ottaminen mukaan suunnitteluryhmään, haastattelut...)
• Onko projektissa vahvat säännönmukaiset menettelyt tilaajan ja suunnittelijoiden väliseen ajatustenvaihtoon? (Yhteiset työpajat, yhteiset suunnittelupalaverit, nopean kommentoinnin käytännöt...)
• Onko varmistettu, että alkuvaiheiden tuottamat tiedot siirtyvät luotettavasti detaljisuunnittelusta ja tuotannosta vastaaville henkilöille?
• Jos sivustossa on tietojärjestelmämäisiä piirteitä, onko suunnitelmassa selvä vaihe, jossa suunnitellaan niiden tietovirrat, tiedonkäsittelyprosessit, raportit yms.
• Onko projektin seurantaan sovittu katselmointi- ja raportointikäytännöt?

7 Kokonaistuotteen suunnittelu

• Onko suunniteltu sivuston tekninen ylläpito?
• Onko suunniteltu sen sijoituspaikka ja palvelinsijoitukseen liittyvät hosting-palvelut ja niiden kustannukset ja resurssit?
• Onko suunniteltu sisällön ylläpitoprosessit?
• Onko tehty esisopimuksia alihankkijan tekemästä ylläpito- ja korjaustoiminnasta?
• Kuuluuko täydellinen dokumentointi suunnitelmaan?
• Kykeneekö tilaaja ylläpitämään sivustoa sen käyttöönoton jälkeen?
• Onko projektilla riittävä rahoitus kehittämisprojektin ohella myös ylläpitoon?

8 Varautuminen ongelmiin

• Onko sovittu mahdollisten myöhästymisten kompensoinnista, mm. myöhästymissakosta?
• Onko varauduttu mahdollisiin ylimääräisiin kustannuksiin tai resurssitarpeisiin?
• Onko suunniteltu, miten toimitaan, jos jotkin sivuston toiminnallisuudet osoittautuvat mahdottomiksi toteuttaa suunnitellusti?
• Onko kaikkien avainhenkilöiden osalta varauduttu työpaikanvaihdoksiin?
• Onko varauduttu alihankkijan tai palveluntarjoajan mahdolliseen konkurssiin?

Kehittämistiimin kyvykkyyspaletti

Tyypillinen kehittämistiimin kyvykkyyspaletti on tämänkaltainen. On syytä huomata, että yhdellä tiimin jäsenellä voi olla monia kyvykkyyksiä. Kunhan vain jokainen kyvykkyysalue - ja sitä vastaavat erityistehtävät - saadaan osoitettua jollekin!

• Asiakkaiden ja käyttäjien tarpeiden tunteminen
• Viestintäosaaminen: Weppikirjoittaminen, kohderyhmäviestintä
• Käyttöliittymäosaaminen: Navigointi, käytettävyys
• Graafinen osaaminen: Tyylilajit, graafinen suunnittelu, typografia, kKuvitus, piirtäminen ja kuvavalinnat
• Tuotekehitysosaaminen! Prosessin ja tk-prosessin hallinta, vaatimusten hallinta, muutostenhallinta, aikataulu- ja vaihesuunnittelu, laatu
• Teknologian hallinta: tietokannat, tietoturvallisuus, ohjelmistot
• WWW-mahdollisuuksien ja tarpeiden tuntemus

Kehittämistyön teknologiakysysyksiä

Teknologioiden valinta

• Yksinkertainen on kaunista ja helppoa
• Kyettävä hallitsemaan luotettavasti
• Ei riippuvuutta jostain "hakkerista"
• Pitääkö olla siirrettävä toiselle palvelimelle?
• Poistuvien teknologioiden välttäminen - esimerkiksi Java selainpuolella
• Uusien teknologioiden arviointi - esimerkiksi onko PHP kypsä sovellukseesi
• Client- vai palvelinratkaisut?
• Tarpeiden ja kohderyhmän valmiuksien mukaan

- Sopiiko kohderyhmälle "selainten nelosversiot", vai pitääkö olettaa vanhempi versio?
- PDF-tiedostoissa Acrobat 4-taso käyttökelpoinen v. 2001

Eri ohjelmistot ja teknologiat sivujen tekemisessä

• Työvälineet tehtävän mukaan
• Sivueditorit

- Wordin omat rutiinit, DOHTML-makro

- Netscapen sivueditori Composer toimii, mutta taulukoiden kanssa kankea

- FrontPage Express (ilmainen, tulee Internet Explorerin mukana) riittävän hyvä, mutta ei sivuston hallintaa

- Kun tarvitaan sivuston hallintaa: DreamWeaver, NetObjects TeamFusion, Frontpage

- Yhteisprojektien tarpeet?

• Kuvankäsittelyohjelma
• Kuolleiden linkkien testausohjelma
• Tiedonsiirto-ohjelma, jolla muuttuneet tiedostot siirretään palvelimelle
• Erikoissovellukset esimerkiksi lomakkeiden ja CGI-skriptien luomiseen

Hyvä kehittämisympäristö

• Muualla kuin julkaisupaikassa, jotta voi rauhassa työstää, kokeilla, arvioida ja testata
• Usein hyvä paikka muun aineiston luona: Esimerkiksi projektisivut projektin hakemistossa alihakemistossa www. Siellä valmis komentotiedosto, jolla tiedostot saa siirrettyä nappia painamalla palvelimelle. Omat rutiinit eri sivustotyypeille: vakiosivut, päivitettävät listat, ylläpidettävät raportit jne...
• Hyvä hakemistorakenne: Looginen, sopii sekä kehittäjälle että julkaisun rakenteeksi
• Sekä itselle että asiakkaille sopivat loogiset hakemistonimet (sekä suomalaiselle että kansainväliselle yleisölle sopivat lyhyet, kuvaavat nimet). Raporteille ja muulle "ladattavalle" aineistolla erillinen hakemisto (docs tai downloads)
• Tiedostojen nimeämiskäytäntö
• Rutiinit varmuuskopiointia varten. Kirjoittava CD on nykyään hyvä valinta (Direct CD -teknologialla toimii lähes kuin kovalevy)

Muutamia teknisiä detaljeja:

• Yleiset kuvat hakemistoon images
• Ne tiedostot, joita ei siirretä Weppiin, hakemistoihin, joiden nimi alkaa _alleviivausmerkillä tai _alleviivausmerkillä alkavat tiedostonimet. Tämä on yleinen käytäntö
• Muista! Ei ääkkösiä tai välilyöntejä nimissä. Alleviivausmerkki hankala_sanoa_puhelimessa -> mieluummin-tavuviiva
• Verkkoonsiirtorutiinit omaan hakemistoonsa tai WWW-hakemiston juureen

Sisällön ja toimintojen suunnittelusta

Muutama vihje

• "Mitä?" on tärkein kysymys

- Etua?

- Mitä uutta?

- Mitä erottuvaa; mitä tullaan kehumaan?

• Etusivu tärkeä:

- Sivujen idea avauduttava heti

- 7 sekuntia aikaa voittaa vierailija ja saada hänet jäämään, ja tutustumaan tarkemmin

• Tärkeimpiin asioihin lyhyt reitti

- Tiedettävä, mitkä tärkeimpiä tärkeimpien kohderyhmien kannalta

Graafinen suunnittelu

• Erottumiskeino
• Tehtävä tietoisesti ja ammattitaitoisesti
• Viestitään sitä, mitä halutaan viestiä

- Oma identiteetti ja yrityskuva - pitää tuntea!

- Projektin arvot ja viestit ja "tyyli"

- Samaa paria muun aineiston kanssa

• Panostettava! Esimerkiksi logosuunnittelua ei saa tehdä kuka tahansa
• Yksinkertainen usein paras
• Toimivuus sekä näytöillä että (usein mustavalko) printtinä
• Kuvissa:

- Viesti! Jokaisen kuvan viestittävä jotain

- Visuaalinen tyyli

- Tekninen laatu

- Kuvatiedostojen kilotavukoko (sopiva JPG-pakkaus): Max 50 kt per sivu. Kuvagallerioilla n. 120 kt (tilanne v. 2001)

- "ALT"-merkinnät (kertovat kuvan latautuessa, mikä se on)

Ylläpidon suunnittelu

• Jos sivuilla on muuttuvaa asiaa, on sen tuottamis- ja ylläpitoprosessin suunnittelu ja sopiminen tärkeää
• Jos ei sovita, ei ylläpidetä; jos ei ylläpidetä, sivut ovat vanhat ja vialliset => asiakkaat tyytymättömiä ja kuva meistä huono
• Mielellään välineet ja prosessit, jotka sopivat ko. henkilöiden arkeen

- Esimerkki: Ei erikoisohjelmia, vaan niitä, joita muutenkin käytetään pitkin päivää

- Ylläpidettävän aineiston hajautus tarvittaessa työprosessien kannalta sopiviin paikkoihin (kompromissi...)

• Varmuuskopioinnin suunnittelu

Testaus ja hyväksyminen

• Ei julkiselle levylle ennen kuin on hyväksi todettu
• Testaus:

- Toimivuus eri selaimilla (Netscape ja Internet Explorer) ja tarvittaessa niiden eri versioilla

- Kuolleiden ja väärien linkkien metsästys (kuolleiden linkkien metsästys toistettava säännöllisesti)

- Jos ei valmiiden mallien mukaiset sivut: käyttöliittymän ja käytettävyyden arviointi ja testaus

Aina tarpeen, että joku muu tsekkaa!

• Hyväksymismenettely riippuu sivuista

- Sisältö

- Esitys, visuaalinen laatu

- Oikeinkirjoitus (jopa ohjelmallinen testaus tuntuu Weppisivuilla unohtuvan)

- Tekninen laatu ja käytettävyys

Löytyvätkö sivut? Uusista ja muuttuneista sivuista tiedottaminen

• Avainsanojen määrittely sivuille (sivueditorin Page Properties -komennolla)

- Hakukoneet alkavat jatkossa käyttää näitä yhä enemmän - muuten ei WWW-suosta saa mitään tolkkua!

• Ilmoitus hakukoneille

- Koneet kahlaavat osoitteita, joista ovat jo kuulleet, mutta oma ilmoitus on aina varminta

• "Uutta"-sivut ko. sivustossa ja hierarkkiassa sen yläpuolella olevilla sivustoilla

- Organisaation "kotisivulla"

• Mainospaikat verkostojen ja yhteistyökumppanien sivuilla.
• Osoitteiden viestintä kaikessa viestintä-aineistossa (miksi monissa lehdistötiedotteissa ei ole sähköisiä osoitteita vielä vuonna 2001?)