Pitääkö verkkopalveluiden tekemisen olla vaikeaa?
Sivustokehityksen perinteisiin on juurtunut “artesaanityön” ihanne. Koetaan kunniallisena tehdä kaikki itse ihan alusta pitäen. Suunnittelupöydällä ollaan kunnianhimoisia, kuten kuuluukin. Sen ajamana eksytään kuitenkin usein harhaan, jos ei hahmoteta, mitä kuuluu innovoida ja missä on tärkeää pitäytyä toimiviksi todistetuissa parhaissa käytännöissä.
On keksitty pyörä uudelleen. Pyörästä on tullut aluksi soikea ja kulmikas ja sitten testailujen, korjailujen ja iteraatiokierrosten jälkeen, aivan, pyöreä. Kaikki osapuolet asiakkaasta käyttöliittymäsuunnittelijoihin ja varsinkin devaajiin ovat huutaneet hoosianna, aikataulut ovat paukkuneet ja budjetti mennyt reilusti pitkäksi.
Parempi tapa olisi tietysti hyväksyä heti alkuun, että pyörän muotoinen pyörä on paras vallitseva käytäntö (koska se on konventio ja tukee siksi käyttötottumuksia), päätyä siihen suoraan ja käyttää aika, resurssit ja luova innovointi designin ja sisältöjen luomiseen.
Miksi näin käy? Taustalla harvoin on pahaa tahtoa, enemmänkin kokemattomuutta. Taustalla voi olla myös toimittajan kiusaus tehdä koodaushankkeesta isompi projekti, sillä jos kaikki tehdään alusta alkaen ja mukana on paljon erikoisratkaisuja niin onhan siinä enemmän laskutettavaa tekemistä. Ja lisää laskutettavaa saadaan aikaiseksi, kun iteroidaan kulmikasta pyörää pyöreämmäksi aina kehityssprintti kerrallaan.
No miten verkkosivustoja sitten pitäisi 2020-luvulla tehdä?
Aluksi on tärkeää tehdä asiat avoimen läpinäkyväksi. Mistään erityisen salamyhkäisestä hommasta kun ei lopulta ole kyse. Tärkeää on, että koko työryhmä jakaa käsityksen siitä, millä tavoittein, millä metodein ja millä työkaluin hanke viedään läpi. Alla on kuvattu tärkeimmät seikat näihin liittyen.
Mitä on moderni sivustokehitys?
Moderni sivustokehitys tarvitsee systemaattisen mallin, oikeat metodit ja oikeanlaiset työkalut tapahtuakseen.
1. Growth-Driven Design ja systemaattinen kehitysmalli
Tekemisen tulee ohjautua tavoitelähtöisesti ja tekemistä tulee johtaa faktoihin perustuen. On tärkeää määritellä peruslähtökohdat, kuten kenelle sivusto tehdään (ostajapersoonamääritykset), mihin käyttökontekstiin (ostopolkumallinnokset) ja mistä syystä (konkreettiset mitattavat tavoitteet sille, mitä sivustolla halutaan saada aikaiseksi).
Growth-Driven Design viittaa tavoiteohjattuun kehitysmalliin, jossa voidaan ketterästi testata ja todentaa, mikä toimii ja ohjata tekemistä tämän pohjalta.
Myös jatkokehityksen tulee tapahtua tavoiteohjatusti. Jos tavoitteena on vaikkapa parantaa konversiotehokkuuta on todella olennaista olla aukikirjatut hypoteesit ja metriikka sille, miten konversiotehokkuutta kehitetään. Ja kun voidaan todentaa, että A toimii paremmin kuin B, on helppo jatkaa kehitystä oikeaan suuntaan.
Liian usein tehdään asioita heppoisin perustein tai vääristä syistä. Linjauksia ohjaa faktojen ja asiantuntemuksen sijaan asema työryhmän hierarkiassa (HiPPO, eli highest paid person's opinion), kovin ääni tai suurin ego. Kun tällainen hahmo lataa näkemyksiään koko arvovaltansa voimalla, on kynnys korkealla lähteä haastamaan annettuja “totuuksia”.
Lopputuloksen kannata parempi tapa on nojautua mittareihin ja todennettavaan tietoon. Ei vaadi ameriikantemppuja todentaa, miten asiat oikeasti menevät. Jos taas tehdään random-asioita random-tavoilla, saadaan aikaiseksi random-toteutus. Lue lisää Growth-Driven Designista Blinkin oppaasta!
2. Suunnittelumetodit ja design-systeemi
Jos pyörää ei kannata keksiä aina uudelleen, ei käyttöliittymiäkään ole tarkoituksenmukaista ideoida tuulesta temmaten. Vierailijat käyttävät verkkosivustoa käyttökonventioiden ohjaamana. Siksi esimerkiksi linkin tulee näyttää linkiltä, navigaation tulee löytyä headeristä, käyttölogiikan tulee olla johdonmukainen ja käyttöä kannattaa ohjata visuaalisen hierarkian avulla. Olisi epätarkoituksenmukaista keksiä täysin omanlainen tapa sijoittaa navigaatio alasivulle ihan vaan sen vuoksi, ettei kilpailijalla ole samanlaista.
Tietyt asiat ovat tietyllä lailla ihan syystä. Iso osa käyttöliittymäelementeistä on osin tai kokonaan standardeja. Sen vuoksi suunnittelun taustalla tulee olla ammattimainen design-systeemi, eli systemaattinen malli niille suunnittelun peruselementeille, joilla sivuston rakenne toteutetaan.
Design-systeemissä on määritelty tyypillisesti käytetyt käyttöliittymäkomponentit, kuten vaikka päänostoelementti, sisältöpalsta, button, listaus tai lomake. Projektista riippuu, minkälaisen muodon nuo komponentit saavat, jotta ovat brändinmukaiset ja palvelevat tarkoitustaan.
Esimerkiksi värit, kuvakoot, palstamäärät, välistykset ja sivupohjien tyylit määritellään aina kulloiseenkin tarpeeseen sopivaksi. Itse elementtejä ei tempaista tuulesta vaan olemassa oleville konventionaalisille elementeille määritellään parametrit (värit, fontit, leveydet, muodot, efektit jne).
Design-systeemin taika on siinä, että määrittelemällä vaikkapa primäärivärit ja fontit (brändinmukaisesti), toistuvat ne jokaisessa moduulissa ja komponentissa automaattisesti. Esimerkiksi Figma on erittäin käyttökelpoinen työkalu design-systeemin käytännön toteutukseen.
Suunnittelu on verraten nopeaa, tehokasta ja strukturoitua laajoissakin verkkopalvelutoteutuksissa. Yksittäisiin elementteihin ei unohdu vääriä määrityksiä eikä aikaa hassata ihmettelyyn, korjailuun tai empimiseen. Sitten kun komponentit on suunniteltu ja määritelty, “siirretään” ne koodiin.
3. Työkalut: Räätälöitävä kehitysteema
Räätälöitävä kehitysteema on kokoelma sivupohjia, moduuleja ja komponentteja, joiden avulla sivusto toteutetaan. Sen sijaan, että jokainen komponentti koodattaisi alusta, annetaan olemassa olevalle komponentille suunnitteluvaiheessa määritellyt arvot. Suunnitelma siirtyy näin saumattomasti toteutukseksi.
Komponentti on moneen kertaan testattu ja kaikille päätelaitteille ja selaimille toimivaksi optimoitu. Näin voidaan hyödyntää vuosien työtä ja saada toteutus valmiiksi ennätyksellisen nopeasti ja vieläpä niin, että laatu on merkittävästi parempaa kuin “artesaanitekemisessä”.
Sivustot toteutetaan modernin verkkoteknologian (HubSpot) päälle, jolloin niistä tulee turvallisia, nopeita ja ketteriä kehittää sen lisäksi, ettei sivusto ole yksin eristetyssä siilossaan vaan saumaton osa markkinoinnin, myynnin ja asiakaskokemuksen johtamisen kehää.
Rajaako kehitysteema sitä, miltä toteutus näyttää?
Ei rajaa. Kaikki tyyliasetukset ja moduulit ovat täysin räätälöitävissä.
Entä jos asiakas haluaa vaikka, että jokainen linkki on erilainen? Sekin on mahdollista, joskaan ei suositeltavaa. Kehitysteema ei rajaa mitään erikoistoteutuksia. Kaikki kummallisuudet eivät ole kehitysteemassa mukana, sillä se on kokoelma sellaisia sivupohjia, moduuleja ja komponentteja, joiden varaan suurin osa laadukkaista ja käytettävistä sivustoista on rakennettu. Kehitysteeman ohi voidaan kuitenkin sivustolle koodata mitä vaan, jos sellainen tarve syntyisi.
Käyttäjän näkökulmasta räätälöitävän kehitysteeman avulla toteutettu sivusto poikkeaa perinteisestä toteutustavasta ainastaan siten, että se on merkittävästi laadukkaampi ja ratkaisevasti nopeampi toteuttaa.
Kuulostaa hyvältä. Miksei aina ole tehty näin?
Siksi että räätälöitävä kehitysteema vaatii mittavan määrän kehitystyötä. Kehitysteemassa kiteytyy vuosien kokemus laadukkaasta ohjelmoinnista ja parhaista käytännöistä sekä mitattaviin faktoihin pohjautuva ymmärrys verkkosivustojen käytettävyydestä.
Toinen syy, miksi näin ei ole aina tehty on perinteisen sivustokehityksen ansaintalogiikka. Mitä enemmän sekoillaan suunnittelupöydällä sitä enemmän koodataan (vaikkapa erikoistoteutuksia) - ja sitä enemmän syntyy laskutettavaa työtä. On olemassa myös kiusaus antaa homman lipsua sotkuksi ja korjata sitten jäljet maksua vastaan. Lopulta himmeli pysyy kasassa vain lisäämällä purkkaa (ja kustannuksia).
Tällaisessa tilanteessa on usein viisasta putsata pöytä ja rakentaa sivusto uudelleen. Räätälöitävän kehitysteeman avulla sivuston saa pystyyn nopeasti ja ongelmattomasti.
Ok. Entä olenko pakkoliitossa kehitysteemaan, jos sivusto on toteutettu sillä?
Et ole. Kehitysteema on tapa saada korkealuokkainen sivusto ketterästi julkaistuksi. Se ei rajaa sitä, miten sivustoa kehitetään sen jälkeen. Kehitystä voi jatkaa kehitysteeman avulla tai ilman, jos sellainen tulisi tarkoituksenmukaiseksi.
Haluatko demon aiheesta?
Jos verkkosivustouudistus tai nykysivuston kehittäminen on teillä ajankohtaista, tai haluat muuten vaan vaihtaa ajatuksia aiheesta, varaa aika asiantuntijamme kalenterista 👇
