Vaihe 2: suunnittelu

Suunnitteluvaiheessa ei tietokonetta ei juuri kannata ottaa heti alussa käyttöön, sillä tällöin ryhdytään aivan liian helposti tekemään ratkaisuja aivan väärältä pohjalta. Amatöörikoodaajien (ja myös ammattilaisten) suurin ongelma on käyttää tietokonetta liian varhaisessa vaiheessa, ja tällöin kone määrittelee sen mitä ollaan tekemässä - ja nuo aiemmin huolella suunnitellut (ja erittäin tärkeät) lähtökohdat unohtuvat.

On erittäin tärkeää (korostan vielä kahteen kertaan että tämä on erittäin erittäin tärkeää) että suunnitteluvaiheeseen käytetään riittävästi aikaa ja harkintaa. Usein projektin kokonaisajasta jopa puolet saattaa mennä tähän, mutta se kannattaa. Hyödyt ovat ilmiömäiset: sivustosta tulee selkeämpi, paremmin navigoitava, edustavampi, helpompi ylläpitää ja rakentaa. Lisäksi sivuilla vieraileva löytää haluamansa tiedot nopeasti, on tyytyväinen ja saattaa mainostaa hyväksi toteamaansa sivustoa muillekin.

Huolellisen suunnittelun tuloksena rakenteesta tulee looginen ja selkeästi jäsennelty, turhat hörhöilyt on karsittu pois, navigoinnissa käytetään yksiselitteisiä termejä, tieto löytyy nopeasti eikä vierialija turhaudu turhanpäiväisten kuvien, animaatioiden tai teknisten kikkojen latautumisiin. Ohjelmoinnin (myös WWW-ohjelmoinnin) tärkein periaate on KISS: Keep It Simple, Stupid.

Ihmiset haluavat järjestelmiä, jotka ovat yksinkertaisia ja helppoja käyttää. Tämä pätee niin laitteisiin ja ohjelmiin kuin web-sivuihinkin.

Jäsentely

Useimmat tuntemani web-suunnittelijat ottavat tässä vaiheessa käteen ultramodernit työkalut eli kynän ja paperin. Paperille luonnostellaan minkälainen pitäisi sivuston pääsivun olla? Mitä tietoja sieltä pitää löytyä? Missä sijaitsevat navigointilinkit? Minkä nimisiä nuo linkit ovat? Mistä osista sivusto koostuu?

Esimerkiksi artistin sivusto saattaa koostua seuraavista osista:

  1. Uutiset: uusimmat uutiset ei yli 2 kk vanhoja juttuja, jos tällaisen sivuille laittaa sitä pitää päivittää lähes viikottain.
  2. CV/Bio: artistin lyhyt historia
  3. Diskografia: julkaistut levyt/videot/muut teokset
  4. Musiikki: ääniesimerkit (mp3-muodossa ladattavat biisit tai 30 sek pätkät). Teosto on jokin aika sitten muuttanut säännöksiään ja nykyään artisti saa omilla henkilökohtaisilla sivuilla julkaista omia (julkaistujakin) biisejään vaikka kokonaisina, kunhan niillä ei ole kustannussopimusta.
  5. Kuvagalleria: kuvia bändistä/artistista, keikoilta ja mistä milloinkin.
  6. Lehdistölle: korkearesoluutioisia kuvia toimittajille lehtiartikkeleita varten
  7. Forum, chat tai vieraskirja. Tätäkään ei kannata laittaa ellei siellä sitten tapahdu jotain. Jos kirjoittajia ja tarinoita ei löydy, on parempi ottaa koko systeemi pois kuin antaa sivuista sellainen kuva, ettei siellä kukaan ikinä käy eikä siellä mitään tapahdu eikä niitä koskaan päivitetä.
  8. Keikkakalenteri: jos selaaja kiinnostuu artistista, voi hän olla myös kiinnostunut näkemään tämän livenä, ja mikä voisi olla parempi paikka löytää sopiva keikkapaikka kuin samaisen artistin sivuilta löytyvä keikkakalenteri.
  9. Yhteystiedot: lähinnä tapa millä keikkamyyjät tai muu hyödyllinen porukka saavat yhteyttä bändiin/artistiin. Ei kannata laittaa ikinä omaa henkilökohtaista osoitetta eikä välttämättä puhelinnumeroakaan (riippuu tietty vähän minkä tyyppisestä artistista on kyse), eikä yksityiskäyttöön tarkoitettua sähköpostiakaan.
Yrityksellä vastaava peruslista voisi olla vaikka seuraava:
  1. Uutiset: lehdistötiedotteet, uudet tuotteet, palkinnot, maininnat lehdistössä tms.
  2. Tuotteet: lista yrityksen tuotteista ja niiden lyhyet kuvaukset
  3. Lataukset: ohjelmien demoversiot, päivitykset, lisäohjelmat ja laajennukset jne
  4. Yritystiedot: mistä yritys tulee, kuka tai mitkä tahot omistavat, strategia etc.
  5. Yhteystiedot: osoite, sähköposti ja puhelin. Joissain tapauksissa voi laittaa myös pankkiyhteyden.

Pääsääntö on ettei edellä mainittuja tasoja saisi olla kuin korkeintaan noin 7. Ihmisen hahmotuskyky ei kykene omaksumaan kerralla suurempaa määrää tietoyksiköitä (tästä on tehty useita psykologisia testejä). Jos pääsivulla on heti kymmenen tai viisitoista eri kategoriaa, sivuilla vieraileva käyttäjä (eli mahdollinen asiakas) turhautuu liian suuren tietomäärän edessä ja saattaa häipyä paremmille apajille eli sellaisille web-sivuille, jotka on rakennettu selkeämmin ja loogisemmin.

Esimerkki 1: kaikki osiot samalla tasolla

Jos paperille ilmestyy liikaa päätason osioita, on sivuston rakennetta muutettava niin että selkeys ja yksinkertaisuus säilyy. Esimerkiksi yllä olevasta artistin listasta voidaan yhdistää saman osion alle Diskografia ja Biografia, mahdollisesti jopa CV. Samoin Kuvagalleria ja Lehdistön osuus voidaan tarvittaessa yhdistää:

Esimerkki 2: osiot jäsenneltynä hierarkisesti

Diskografia voidaan periaatteessa laittaa (ainakin jonkin logiikan mukaan) joko Biografian tai Musiikin alle. Juuri tällaisessa kohtaa pitää pysähtyä miettimään erittäin tarkkaan kumpi tai mikä ratkaisu on kaikista paras ja loogisin käyttäjän kannalta. Joissain tapauksissa tuo Diskografia saattaa olla erittäin oleellinen ja keskeinen tieto, jota sivulta haetaan, joten sen voisi ehkä jopa laittaa päätasolle heti näkyviin. Toisissa tilanteissa taas Musiikki-osassa olevat näytteet eivät ehkä olekaan niin tärkeitä, joten ehkä tuollaisessa tilanteessa voitaisiin se ottaa pois päätasolta ja pistää sinne vaikka Diskografia, tai Keikkalistat.

Toisaalta, Ajakohtaista-osioon voidaan suoraan kirjoittaa esim. kaikki uutiset, eikä niille tarvita siis omaa osiotaan. Uutisten vieressä voi sitten olla linkki josta pääsee keikkalistaan. Tai sitten päinvastoin: keikkalista ensin, ja sen vieressä linkki uutisiin. Joillain sivuilla uutiset-osio aukeaa ensimmäisenä, eli siitä on tehty tuo pääsivu.

Tässä kohtaa täytyy päättää, mitkä asiat ovat toisia tärkeämpiä, eli mihin osioihin käyttäjän tulee päästä yhdellä klikkauksella, ja mitkä voivat olla kahden tai kolmen klikkauksen päässä. Tämä kuulostaa pieneltä erolta, mutta suureksi sen tekee se, että käyttäjän tulee löytää oikea paikka ennen kuin hän voi tehdä tuon toisen klikkauksen. Olet varmaan itsekin usein tuskaillut kun et löydä haluamaasi tietoa kun sivuston rakenne tai termit ovat vähän liian epämääräisiä.

Yhä lisää jäsentelyä

Tätä työvaihetta, jossa jäsennellään sivuston rakenne ja suunnitellaan navigointi, kannattaa tehdä pitkään ja harkitusti. Erittäin hyvä apu on käydä tutkimassa miten muut ovat nämä asiat ratkaisseet, kokeilla noita sivustoja ja miettiä, onko niissä navigointi tehty mahdollisimman loogiseksi ja näppäräksi. Löytyykö kaikki oleellinen tieto heti vai pitääkö klikkailla kahden tai kolmenkin tason taakse ennen kuin haluttu tieto löytyy?

Kun on päätetty, mikä on sivuston kokonaisrakenne, pitää vielä miettiä mitä sanoja tai termejä noissa linkeissä käytetään ja missä järjestyksessä niiden tulisi olla. Tässäkin vaiheessa pitää ajatella koko hommaa KÄYTTÄJÄN näkökulmasta - kaikki mielipiteet ja ideat kannattaa kyseenalaistaa, ellei niitä pysty perustelemaan selkeyden, yksinkertaisuuden ja käytettävyyden nimissä.

Perusvirhe on esimerkiksi pistää pääsivulle kaikki mahdollinen tieto sivuston omistajan henkilöhistoriasta aina mp3-linkkejä ja CV:tä myöten. Kun käyttäjä tulee ensimmäistä kertaa sivuillesi, ei häntä kiinnosta kaikki mahdollinen vaan hän haluaa löytää vain ja ainoastaan haluamansa tiedot. Mietipä itse miten etsit ja haet tietoa muiden nettisivuilta.

Toinen perusvirhe on unohtaa kertoa käyttäjälle, missä hän milläkin hetkellä on ja mistä hän pääsee eteenpäin/takaisin. Jollain tavalla sivulta tulee käydä helposti selville missä kohtaa sivustoa ollaan menossa ja mistä pääsee takaisin pääsivulle tai muuhun valikkoon. Perusmenetelmät ovat:

  • se osio jossa selaaja sillä hetkellä on näkyy navigointipalkissa eri värillä:
    http://www.jazzfin.com/uutiset.htm
    http://www.scriptsoftware.com/iKey
    (näistä ensimmäinen on saavutettavuuden kannalta parempi, sillä jokaisen sivun linkin voin kertoa URLilla, kun taas jälkimmäisessä pitää kertoa URL ja sen lisäksi mitä kohtaa menussa pitää klikata... menee hankalaksi)
  • sivun otsikko kertoo saman eli millä sivulla ollaan
  • sivun yläosaan sijoitetaan pienellä polku kyseiselle sivulle:
    http://www.stadia.fi/opiskele/kulpa/popjazz/index.asp
    (yläpalkin alapuolella on musta osio, jossa on tämä polku)

Usein kannattaa käyttää kahta tai kolmeakin tapaa yhtä aikaa, niin kuin ensimmäisessä esimerkissä onkin tehty.

Jos sivustosta tulee todella laaja, etsimisongelmaa voi helpottaa lisäämällä sivustoon sisällysluettelon (site index):
http://www.nashvilleareainfo.com/Default.aspx?Page=SiteMap
http://www.helsinki.fi/yliopisto/hakemisto.htm
http://www.stadia.fi/etsi_sivustosta/kartta.shtml

Jos suunnitteluvaiheessa fuskaa ja ryhtyy suoraan toteuttamaan vielä raakileita ideoitaan, on lopputulos kokeneellekin ohjelmoijalle usein fiasko. Ja jos kerran antaa itsestään (tai yrityksestään) huonon kuvan, on tätä hyvin hankala korjata.

Ja vielä lisää

Suosittelen 110%:sti seuraavan parin artikkelin lukemista. Internet-guru Jukka Korpela on käyttänyt aikaa ja vaivaa meidän kuolevaisten ojentamiseksi, jotta osaisimme tehdä sivut hyvin ja järkevästi. Artikkelit luettuasi ymmärrät hyvin miten sivuja ei kannata tehdä:

Kun olet nuo lukenut läpi voit jatkaa seuraavaan eteenpäin. Ihan oikeasti, älä jatka eteenpäin ennen kuin nuo on opiskeltu! Nyt ei kannata lintsata ja mennä sieltä missä aita on matalin!