Tekijä: Sininen Härkä

Verkkosivusuunnittelua tehdään aina tapauskohtaisesti kun suunnitellaan uniikkeja kokonaisuuksia, mutta tietyt periaatteet pätevät aina sivustosta riippumatta. Periaatteita voi jaotella visuaalisen suunnittelun tai käytettävyyden alle, mutta seuraavat kahdeksan periaatetta pätevät yleisesti projektista riippumatta.

Hierarkia on sivuston selkäranka

Sivuston hierarkia on yksi ensimmäisenä suunniteltavista asioista sivustolla. Hierarkia tarkoittaa sivustolla sisällön esittämisen järjestystä ja järjestämistä. Sisältöä järjestellään pääotsikoiden alle, mahdollisesti kahteen navigaatioon ja erilaisten määreiden alle. Hierarkia ja järjestely on välttämätöntä sivuston pohjalle ja loppukäyttäjälle, sillä se toimii sivuston selkärankana. Hierarkian perusteella pystytään tekemään myös päätöksiä teknisistä ratkaisuista ja toteutuksista loogisesti. Hierarkia voidaan määritellä joko tarpeen mukaan kevyin perustein tai siihen voidaan käyttää tarpeen vaatiessa runsaasti aikaa ja erilaisia työkaluja. Laajuuteen vaikuttaa pitkälti sisällön määrä ja esitettävän konseptin monisyisyys.

Navigointi, eli kuinka päästä paikasta A paikkaan B (ja paikkaan konversio)

Navigoinnin ilmeisin osa on tietenkin sivuston navigaatiot. Navigaatiota tärkeämpää on kuitenkin sivuston sisällä navigointi eli asiakkaan polku. Tässä vaiheessa suunnittelua on tärkeää tietää sivuston tavoitteet, eli minne haluamme loppukäyttäjää ohjata. Erilaisilla suunnittelun keinoilla saamme ohjattua kävijää haluttuun suuntaan ja mahdollistamme myös sen, että kävijä tietää missä kulkee.

Samankaltaisuus/tuttuus on suunnittelun kulmakivi

Asia, mihin jokainen meistä törmää joka päivä muotoiltuja palveluita käyttäessä, mukaan lukien verkkopalvelut. Kaikki meistä on tottunut kahvipaketin muotoon, liikennevalojen napin sijaintiin tai siihen, että miten päin sinulta kysytään kirjautuessa käyttäjätunnus ja salasana. Samankaltaisuus on erittäin tärkeää minkä tahansa palvelun suunnittelussa, niin myös verkossa. Kun suurimmassa osassa verkkosivustoja logo löytyy vasemmalta ylhäältä ja navigaatio yläreunasta, on ne syytä asettaa myös omalla sivustolla näille paikoille. Monesti tässä kohtaa haluttaisiin ’erottautua’ ja tehdä ’jotain repäisevää’, mutta jos käyttö vaatii loppukäyttäjältä aivopähkinän pureksimista, niin käyttäjä on ehtinyt siirtyä sillä aikaa jo kilpailevalle sivustolle.

Visuaalinen jatkuvuus

Aasinsiltana aikaisempaan kohtaan – jatkuvuus ja tuttuus on ehdotonta myös brändin sisällä. Visuaalisen ohjeiston avulla sivustosta rakennetaan jatkuva kokonaisuus brändin muiden elementtien kanssa. Näin varmistamme, että käyttökokemus säilyy loppukäyttäjällä mediasta riippumatta samanlaisena.

Basic SEO-palikat paikalleen

Vaikka sivuston rakentaminen ei varsinaista hakukoneoptimointia olekaan, niin sivustoa rakennettaessa huolehditaan silti SEO:n peruspalikoiden kuntoon laitosta. Sivuston URL:it pidetään loogisina, sivuille rakennetaan paikat tärkeille elementeille, kuten pääotsikolle, kuvat nimetään SEO-periaatteiden mukaan ja niin edelleen.

Nopeuden varmistaminen alusta asti

Sivuston nopeus vaikuttaa sekä SEM-menestykseen, mutta ennen kaikkea käyttäjäkokemukseen. Nopeuden optimoimiseksi voi sivustolla tehdä runsaastikin eri asioita, mutta jokaista sivustoa rakentaessa huomioidaan nopeuteen vaikuttavia tekijöitä. Sivustot pyritään rakentamaan mahdollisimman nopeaksi ruohonjuuritasolta asti, minkä takia esimerkiksi teemat, lisäosat ja muotoilujen sijoitukset huomioidaan jo alkuvaiheessa.

Kohderyhmä, jolle sivustoa rakennat

Kaikilla sivustoilla on oma kohderyhmänsä ja kaikilla kohderyhmillä omat tarpeensa. Kohderyhmän tarpeet tulee huomioida jo suunnittelun alkuvaiheessa, että lopullinen kokonaisuus palvelee ostavaa asiakasryhmää.

”Less is more”

Viimeisimpänä, muttei todellakaan vähäisimpänä pointtina – vähemmän on enemmän. Suunnitteluvaiheessa monesti kaikille osapuolille tulee paljon ideoita ja asioita, jotka olisi niin siistiä saada sisällytettyä sivustolle. Esimerkiksi video houkuttelisi ja animaatiot innostaisi, tai ensinäkymään haluttaisiin tuoda peruselementtien lisäksi myös lisäpalikoita. Totuus on kuitenkin se, että mitä selkeämpi design on ja mitä vähemmillä elementeillä se on toteutettu, niin sitä selkeämpää se tekee käyttökokemuksesta. Liian useat rinnakkaiset call to action-kehotukset tai visuaaliset ärsykkeet saavat loppukäyttäjän hämääntymään tavoitellulta polulta ja pahimmassa tapauksessa poistumaan ennen aikojaan.

HÄRKÄVINKKI

Verkkosivuprojektia aloittaessa, keskustele yhteistyökumppanin kanssa tärkeistä periaatteista ja prioriteeteista. Näin pääsette kaikki kärryille siitä, mitä toinen sivustolla arvostaa.

Lataa ilmainen verkkosivujen ostajan opas

​

​
Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.
​
Lataa ilmainen opas!

Kuten ehkä oletkin jo huomannut, Sininen Härkä osallistui vuoden 2018 Finnish Web Awardsiin Johannes ”Hatsolo” Hattusen sivustolla hatsolo.fi. Valitsimme sivuston fwa.fi-kilpailuun monestakin syystä:

Onnistunut käyttöliittymän suunnittelu

Hatsolon laaja palveluvalikoima on saatu tuotua erittäin onnistuneesti esille sivustolla, ja kävijää ohjataan sulavasti eteenpäin haluamaansa osioon. Sivusto on suunniteltu kuitenkin siten, että myös muut brändille tärkeät elementit, kuten ainutlaatuinen blogi, innostavat podcastit ja Hatsolon aktiivinen somepresenssi tuodaan hyvin esille.

Raikas sisällöntuotanto

Ehdottoman tärkeänä asiana sivustoa rakennettaessa pidettiin myös Hatsolon henkilöbrändin ja elämänilon tuomista esiin sivustolla. Asiakkaan aiemman sivuston tekstisisällöt, lukuunottamatta blogiartikkeleita, olivat sekä meidän että asiakkaan mielestä liian virkamiesmäisiä. Ja jos olet nähnyt Johanneksen puhumassa, niin miehen presenssi ei ole sitä alkuunkaan. Virkamiesmäisyys heitettiinkin romukoppaan, ja tilalle sijoitettiin leikitteleviä sloganeita, kuten ”Tilaa mun jutut”, ”Nää mut” ja ”Kuule mun jutut”.

Visuaalisuus ja ammattimaiset valokuvat

Sivuston visuaalisuudessa käytettiin erittäin paljon hyödyksi Hatsolon laadukasta valokuvamateriaalia, joka tukee entisestään vahvemman henkilöbrändin luomista edellä mainittujen seikkojen kanssa. Isot ja hallitsevat bannerikuvat auttavat jo sivustolla luomaan fiilistä Hatsolon ainutlaatuisista, viihdyttävistä ja motivoivista puheenvuoroista.

Lopputulos miellytti molempia osapuolia

Itse olimme erittäin tyytyväisi sivustoon sen valmistuttua, ja myös tulokset ovat puhuneet puolestaan. Ehdottomasti tärkein asia kuitenkin toteutui myös – asiakas oli silminnähden tyytyväinen projektiin: ”Heti palaverin alkuminuuteista lähtien tuntui, että tää on se juttu. Sinisellä Härällä on tajuttu äärimmäisen tärkeä pointti. Jokainen asiakas on uniikki ja tarvitsee uunikin ratkaisun.”

Jaettu kultainen FWA-palkinto ja toinen sija yleisöäänestyksessä

Finnish Web Awardsin yleisöäänestys kesti alkukesästä pitkälle syksyyn asti, ja äänestys keräsi kokonaisuudessaan yli 35 000 ääntä. Hatsolo.fi roikkui koko ajan äänestyksen kärjessä. Äänestysajan loputtua saimme tietää, että olimme koko yleisöäänestyksen toinen! Kiitos todella paljon kaikille äänestäneille. 🙂

Yleisöäänestyksen jälkeen arvovaltainen tuomaristo (johon kuuluivat Jorma Ollila, Ilkka Paananen, Tarja Virmala, Heikki Ahdekivi, Jaakko Tapaninen, Jorma Silvasti ja tuomariston puheenjohtaja Pekka Nuikki) otti finaaliin edenneet sivustot tiukkaan syyniin. Tuomarien mukaan kolme parasta sivustoa erottui selvästi muista – Sinisen Härän toteuttama hatsolo.fi jakoi lopulta kultaisen FWA-palkinnon Evermaden toteuttaman Helsingin Diakonissalaitoksen sivuston kanssa. Tuomaristo kommentoi toteuttamaamme sivustoa seuraavasti: ”Hatsolon vilpittömyys ja positiivisuus on sivuston punainen lanka ja sivuston toteutus johdonmukainen.”

Kultaisen FWA-palkinnon lisäksi Hatsolo.fi nappasi vielä kilpailun Paras blogi -palkinnon. Ehdottoman ansaitusti!

Kiitos Johannes, FWA ja kaikki äänestäjät!

Iso kiitos lienee kohdallaan. Kiitos Johannes hienosta projektista ja yhteistyöstä, Finnish Web Awards hyvistä järjestelyista ja asian mahdollistamisesta, sekä tietysti kiitos kaikille yleisöäänestyksessä meitä jeesanneille! Tästä on hyvä lähteä viettämään rentouttavaa joulua – katsotaan, mikä sivusto valitaan ensi vuonna mukaan kilpaan. 😉

Finnish Web Awardsin tulokset
Hatsolon ja Sinisen Härän yhteistyö
Hatsolon artikkeli Finnish Web Awardsista

Lataa ilmainen verkkosivujen ostajan opas

​

​
Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.
​
Lataa ilmainen opas!