050-5748041 | ilkka.olander (at) sometek.fi

Verkkosivujen uudistus: 10 vinkkiä joilla onnistut

Verkkosivujen uudistus: 10 vinkkiä joilla onnistut
elokuu 19, 2015 Ilkka Olander
M

illoin olet viimeksi uudistanut verkkosivut? Verkko muuttuu valtavaa vauhtia ja jo muutaman vuoden vanhat sivut voivat olla vanhentuneet.

Verkon megatrendejä ovat mm. mobiilikäyttäjien räjähdysmäinen kasvu, sosiaalinen median integroituminen lähes kaikkeen kuviteltavissa olevaan, käyttökokemuksen merkityksen korostuminen ja helppokäyttöisten julkaisujärjestelmien yleistyminen. Lisäksi verkossa pärjääminen vaatii yrityksiä muuttumaan medioiksi, mihin harva vielä kykenee. Yllättävän monen suomalaisen yrityksen verkkosivuilla on puutteita edellä mainitulla alueilla.

Seuraavassa 10 vinkkiä, joiden avulla onnistut paremmin verkkosivujen uudistuksessa. Käytän esimerkkinä Suomen ilmailumuseon verkkosivuja, jotka uudistin juuri. Niitä suunnitellessa kirkastui, miten paljon verkko on muuttunut reilussa viidessä vuodessa.

1. Julkaisujärjestelmä luo puitteet

Useimmat asiakkaat haluavat nykyään itse päivittää sivustoaan ja se onnistuu helposti nykyaikaisella julkaisujärjestelmällä. WordPress on noussut Suomessa ja maailmalla ylivoimaisesti suosituimmaksi julkaisujärjestelmäksi, joka pyörittää jo miltei neljäsosaa verkosta. Drupal, Joomla ja muut tulevat suosiossa kaukana perässä.

Monilla yrityksillä on edelleen käytössä omia marginaalisia julkaisujärjestelmiä, joiden päivittämiseen on vaikea löytää tekijöitä. Jos tekijän löytää, voi työ tulla kalliiksi eikä lopputulos tyydytä. Myös Ilmailumuseolla oli vaikeuksia löytää ketään, joka hallitsisi heidän aiemmin käyttämänsä markkinoilta poistuvan julkaisujärjestelmän. Valitsimme uuden sivuston alustaksi WordPressin, minkä museon henkilökunta on kokenut erittäin helpoksi käyttää.

Olipa teknologia mikä tahansa, siihen tulisi voida luottaa pitkälle pitkälle tulevaisuuteen, jotta ei tarvitse parin vuoden päästä lähteä uudelleen kivuliaaseen vaihdosprosessiin. Tällä hetkellä WordPressin kasvulle ei näy rajoja ja se tavoittelee 50% osuutta maailman verkkosivuista.

2. Responsiivinen sivusto

Mobiilikäyttäjien määrä ylittänee 2015 verkon selaamisen pöytäkoneella. Suosituin tapa palvella mobiilikäyttäjiä on suunnitella responsiivinen, eri kokoisille näytöille skaalautuva sivusto. Näin toteutettiin myös Ilmailumuseon uudet sivut.

Verkkosivut - responsiivinen sivustoVerkon kehitystä mobiiliystävällisemmäksi vauhdittaa se, että Google alkoi viime keväänä rankaista hakutuloksissa sivustoja, jotka eivät ole optimoitu mobiiliselaamiseen. Googlen hakurobotille responsiivinen toteutustapa on selkein ja sitä he myös suosittelevat.

3. Koko selainikkunan levyinen (full width) taitto

Viime vuosina on yleistynyt taitto, jossa sisältö levittäytyy koko selainikkunan leveydeltä, eikä sivun reunoja eroteta taustasta. Isot taustakuvat ”imevät” käyttäjän sivuston visuaaliseen maailmaan ja ne toimivat mainiosti myös mobiilinäkymässä.

Ilmailumuseon aiempien sivujen ahdas taitto esti heidän laadukasta kuvamateriaaliansa pääsemään oikeuksiinsa. Uusi taitto on ilmavampi, selkeämpi ja helpommin silmäiltävä. Se antaa rohkeasti tilaa visuaaliselle sisällölle eikä sulje sitä postimerkin kokoisiin kehyksiin. Tyhjä tila tuo sisällölle lisää arvokkuutta.

Ennen:

ilmailumuseon vanhat sivut - taitto

Jälkeen:

selainikkunan levyinen taitto

4. Kortit, grid

Joustavasti ruudukkoon (grid) asemoituvat ”kortit” ovat yksi viime vuosien toimivimmista designratkaisuista. Kortit popularisoi alunperin somepalvelu Pinterest, mutta nykyään niitä näkee kaikkialla verkossa.

Ilmailumuseon sivuilla ratkaisua käytettiin mm. uutisseinällä ja kokoelmasivuilla. Ilma-alusten selailu muutettiin taulukosta visuaalisesti houkutteleviksi korteiksi, joita voi suodattaa helposti konetyypin mukaan. On tavallista, että sisäänheittokuvan sisältäviä posteja klikataan kaksi kertaa enemmän kuin tekstipohjaisia. Käyttökokemus onkin nykyisin kaikki kaikessa: käyttäjät katoavat nopeasti, jos siihen ei panosteta.

Ennen:

ilma-alusten-selailu-ennen

Jälkeen:ilma-alusten-selailu-jalkeen

5. Vaikuta visuaalisuudella

Verkko kehittyy päivä päivältä yhä visuaalisemmaksi. Yksi silmiinpistävä trendi on koko sivun taustakuvat (hero images), joiden päälle on ladottu tekstiä. Ilmailumuseon sivuilla panostimme erityisesti otsakekuvitukseen, joka virittää kävijän ilmailun elämykselliseen maailmaan.

Ennen:

Ilmailumuseo-verkkosivujen-kuvitus_ennen

Jälkeen:

Ilmailumuseo-verkkosivujen-kuvitus-jalkeen

Kuvasin suurimman osan kuvituskuvista iPhonella, vaikka kannoin museolla mukana myös ammattijärkkäriäni. Haimme ilmeeseen pientä vintage-särmää, ja sain sitä tuotettua nopeimmin itse kuvaustilanteessa iPhonen Appseilla. Katso lisää kuvia museon galleriassa.

Verkkosivujen uudistus - kuvitus

6. Interaktiivinen media

Teksti ja kuva riittävät vain tiettyyn pisteeseen asti. Hyvä interaktiivinen mediasisältö nostaa käyttökokemuksen seuraavalle tasolle. Elämyksellinen sivusto jää mieleen – sinne palataan ja siellä vietetään aikaa.

Ilmailumuseon sivuista haluttiin rakentaa mieleenpainuva kokemus. Esimerkiksi kokoustiloihin pääsee tutustumaan navigoimalla 360 asteen panoraamakuvia. Tapahtumakalenteri toteutettiin mediarikkailla tapahtumakorteilla (kartat, kuvitus). Lisäksi sivuille on suunnitteilla virtuaalinäyttely, jossa pääsee tutustumaan Suomen ilmailuhistoriaan.

Ennen:

verkkosivujen-uudistus-tapahtumat-ennen

Jälkeen:verkkosivujen-uudistus-interaktiivinen-media

7. Navigointi: Keep it simple

Navigointi ja käyttäjän ohjaaminen sivustolla (user flows) on kriittinen osa käyttökokemusta. Mitä yksinkertaisempi navigointi on, sen parempi. Mitä enemmän ajatustyötä käyttäjä joutuu tekemään löytääkseen haluamansa, sitä suuremmaksi kasvaa ”kitka” ja sivuiltapoistumisprosentti. Se mikä näyttää yksinkertaiselta, saattaa kuitenkin vaatia suunnittelijalta paljon työtä.

Ilmailumuseon aiempi sivusto koettiin rakenteeltaan sekavaksi. Itse en esimerkiksi meinannut löytää ensimmäisellä käynnillä sivuilta yhteystietoja, jotka oli piilotettu epäkonventionaalisesti sivupalkkiin pitkähkön leipätekstin sekaan. Yhteystiedot lukeutuvat asioihin, joiden suhteen ei kannata olla liian luova. Uusilla sivuilla tärkeimmät tiedot löytyvät selkeästi sieltä, mistä käyttäjä odottaakin niiden löytyvän: alatunnisteesta (footer) sekä ylävalikon viimeisestä info / yhteystiedot -kohdasta.

Ennen:

verkkosivujen-uudistaminen-navigointi-ennen

Jälkeen:

Verkkosivujen uudistaminen - navigointi

Käytimme sivuilla ns. ”mega-menua”, josta on tullut suosittu navigointiratkaisu viime vuosina. Sen avulla saimme pieneen tilaan mahtumaan suuren määrän informaatiota. Vaikka sivuja on paljon, niiden yläotsikointi ja järjestäminen lyhyiksi, silmäiltäviksi kokonaisuuksiksi valikossa auttaa käyttäjää löytämään haluamansa nopeasti.

8. Skrollaus, ei klikkailu

Mobiililaitteiden käyttäjät ovat tottuneet skrollaamaan sivuja, mikä onkin nopeampaa kuin linkkien klikkailu. Kun sisältöjä ennen jaettiin erillisiksi sivuiksi, nykyään sivut ovat pidempiä ja niitä jaotellaan osioiksi. Skrollaus pitää käyttäjät ”lukemisen flow:ssa”, eikä sivujen latautumista tarvitse odottaa. Viimeaikaisissa käyttäjätutkimuksissa tämä todettu miellyttävämmäksi tavaksi kuluttaa sisältöä.

Ilmailumuseon sivuilla aiemmin omiksi sivuikseen erotetut lentosimulaattorit koottiin yhdelle sivulle. Simulaattorien tiedot saatiin mahtumaan nätisti tabien alle, jolloin tilaa vapautui medisisällölle (video / kuvagalleria). Tuloksena on helpommin selailtava, mediarikas ja houkutteleva sivu, joka antaa nopeasti käsityksen museon simulaattoritarjonnasta.

Ennen:

verkkosivujen-uudistus-simulaattorit-ennen

Jälkeen:

Verkkosivujen uudistus - käyttökokemus

9. Blogi tuo kävijöitä

Ehkä suurin ajattelutavan muutos verkkobisneksessä on se, että yrityksen odotetaan muuttuvan mediaksi. Perinteinen tuputtava markkinointi on rikki. Asiakkaat haluavat, että heitä lähestytään mainospuheiden sijaan hyvällä sisällöllä. Tämä tarkoittaa, että koko sivuston käsikirjoitus tulisi kirjoittaa uusiksi asiakkaan näkökulmasta.

Moni organisaatio julkaisee sisältöjä sitkeästi PDF:inä, joita valitettavan harva viitsii ladata tai lukea. Fiksumpaa olisi julkaista sisällöt blogissa, joka lisää tuntuvasti sivuston hakukonenäkyvyyttä ja some-jakojen määrää. Siirsimme siksi Ilmailumuseon PDF-julkaisusarjan arkiston helmiä blogiin. Lisäksi uutisosion ilme päivitettiin ja artikkeleihin lisättiin sisäänheittokuvat, mikä tuplaa tutkitusti niiden klikkausmäärät.

Ennen:

verkkosivujen-uudistus-uutiset-ennen

Jälkeen:

Verkkosivujen uudistus - blogi

Nykyään on tavallista, että sivustoille tullaan ”takaportista” blogiartikkelien kautta eikä ”etuovesta” etusivun kautta. Parhaimmillaan blogi voi jopa viisinkertaistaa sivuston liikenteen. Harva asiakas näyttää tätä vielä ymmärtävän – etusivun suunnitteluun käytetään edelleen paljon vaivaa siihen nähden, kuinka moni sen kautta sivustolle saapuu.

10. Etusivu ohjaa eteenpäin

Vaikka sivustoille tullaan yhä useammin jonkin sisältösivun kautta, on etusivu edelleen tärkeä. Sen tulisi kertoa nopeasti mistä on kyse ja ohjata käyttäjää eteenpäin sivuilla.

Ilmailumuseon etusivun suunnittelun haastena oli, että museolla oli paljon palveluja ja useita kohderyhmiä. Toiveena oli, että ne saisivat kaikki tilaa etusivulla. Tämä on tyypillinen toive asiakkaalta ja johtaa helposti sekavahkoon etusivuun. Kun tarjoaa käyttäjälle liikaa valintoja, hän ei valitsekaan niistä mitään. Jos haluaa ohjata käyttäjää tiettyyn suuntaan, pitää priorisoida ja tehdä valintoja käyttäjän puolesta.

Etusivu vaati paljon kiteyttämistä ja palvelujen ryhmittelyä yhteen, jotta se saatiin toimimaan. Palvelut esitettiin interaktiivisina bannereina, jolloin kuvausteksti saatiin esiin hover-efektinä. Tavoitteena oli, että käyttäjä voisi silmäillä museon tarjontaa nopeasti ja elämyksellisesti ilman informaatioähkyä.

Ennen:

Verkkosivujen-uudistus-etusivu-ennen

Jälkeen:

verkkosivujen-uudistus-etusivu-jalkeen

Aika uudistaa verkkosivut?

Onko sivuillasi kehittämisen varaa useammassa yllämainitussa kohdassa? Todennäköisesti vastaus on kyllä, ellei sivujasi ole uudistettu muutamaan vuoteen.

Verkkosivujen suunnittelu on projekti, jolla ei ole selkeää päätepistettä. Hyvät bisnestä tukevat sivut syntyvät jatkuvan päivittämisen ja optimoinnin kautta. Apuna siinä on analytiikka, jonka avulla saa tietoa siitä, mitä käyttäjät sivuilla tekevät ja mistä he sinne tulevat. Jokainen muutos sivuilla onkin mahdollisuus oppia lisää ja kehittää bisnestään verkossa.

Kirjoittaja suunnittelee moderneja verkkosivuja, jotka erottuvat ja jäävät mieleen.

2 Kommenttia

  1. Christina Lundell 2 vuotta ago

    Hei Ilkka,
    sain ilokseni uusimman uutiskirjeesi. Voi mitä tyylikästä, miellyttävää, pätevää annat lahjaksi meille! Olen itse aina liekeissä kun kohtaan siistiä, puhuttelevaa, tyylikästä, ihmisenmakuista – tätä kaikkea kokonaisuutta mitä niin hyvin hallitset. Toivottavasti saat paljon toimeksiantoja – sellaisia jotka vievät eteenpäin ja inspiroivat sinua.
    Jos voisin niin tilaisin, mutta tällä hetkellä en pysty. Ehkä jonain päivänä. Sillä aikaa suosittelen sinua ihan joka puolelle.
    Ystävällisin terveisin
    Chrisse

Kommentoi

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

*