Sininen Härkä, Author at Digimarkkinointitoimisto Sininen Härkä

15 vinkkiä visuaaliseen työkalupakkiin

Posted on 29.10.20196.3.2023 by Sininen Härkä

Visuaalisen suunnittelun työkalut kehittyvät jatkuvasti, ja kynän ja paperin lisäksi käytössä on iso liuta erilaisia digityökaluja. Uusia työkaluja putkahtelee listalleni lähes viikottain, ja vaikka osa karsiutuu pois heti kättelyssä, jotkut pääsevät suoraan osaksi luottopakkiani. Listasin tähän muutamia omia lemppareitani, joita käytän lähes jokaisessa projektissa, riippuen toki aina työstettävästä asiasta.

Ohjelmistot

Adoben ohjelmistot on varmasti luonnollisin osa suunnittelijan työkalupakkia. Meillä säännöllisessä käytössä ovat Illustrator, Photoshop, Xd layoutien suunnittelua varten ja silloin tällöin myös InDesign taitto-ohjelma. Tällä hetkellä alamme sisällä porukka jakautuu hieman kahteen leiriin ohjelmistotarjoajien välillä, mutta me olemme toistaiseksi pitäneet kiinni Adobesta.

Toisinaan piirrän myös iPadilla, jolloin käytössäni on Procreate.

Automaatio värisuunnittelun tukena

Värisuunnittelu perustuu niin kutsuttuun väripsykologiaan. Värit ovat osa kulttuuriamme ja yhdistämme tiettyjä värejä tietynlaisiin tunteisiin ja tunnetiloihin, ja tätä tietoa hyödynnämme brändivärien valinnassa. Perusteet suunnittelulle lähtevät aina väriympyrästä, mutta onneksi nykypäivänä automaatio ja tekoäly ovat tulleet tähän myös avuksi.

Colormind.io on loistava työkalu väripalettien suunnitteluun. Jos visiossa on vain yksi tai kaksi väriä, mutta paletin täydentäminen on hankalaa, niin käännyn aina Colormindin puoleen. Se generoi minulle tekoälyllä yleisesti sopivaksi oppimiaan väripaletteja haluamieni värien ympärille. Ilmainen työkalu sisältää täysin valmiita paletteja (esimerkiksi teemoilla Amélie tai vesivärimaalaukset) sekä vapaan mahdollisuuden kokeilla yhdistelmiä erilaisilla pohjilla täällä http://colormind.io/bootstrap/.

Mikäli perusasiat väriympyrässä kaipaavat muistutusta tai kaipaan väriharmoniaan tarkkoja sävyjä, käytän apuna color.adobe.com-sivustoa tai vielä perusteellisempaa colordesigner.io-sivustoa. Myös paletton.com-sivustoa käytän joskus, ym. kolme palvelua ovat loppupeleissä melko samanlaisia.

Joskus, jos inspiraatio on täysin kadoksissa, selailen myös picular.co-palvelua, joka on omien sanojensa mukaan Google väreille. Palvelusta voit hakea vaikkapa sanalla “bull”, ja tulokset näyttävät värejä, joita yleensä kuvahaussa vastaan tulevat kuvat sisältävät. Myös tämä palvelu pohjaa tekoälyyn.

Nyt kun saavutettavuus on ollut yhä useammin mielessäni saavutettavuusdirektiivin vuoksi, on pakkiini tullut lisää myös saavutettavuuden tarkistamiseen tarkoitettuja työkaluja. Näiden avulla tarkistan väripintojen ja erityisesti tekstin kontrastia. Käytössäni on sekä http://accessible-colors.com/ & http://colorsafe.co/.

Erilaisia värityökaluja minulla on pakissani eniten ehkä siksi, että värit ovat minulle visuaalisessa suunnittelussa kaikkein eniten lähellä sydäntä.

Kuvat

Mikäli kuvia ei ole saatavilla projektikohtaisesti, haen kuvia eri kuvapankeista. Kuvapankkeja olenkin listannut jo täällä postauksessa vuonna 2017 4+4 vinkkiä ilmaisista kuvapankeista.

Fontit

Fontit haen lähtökohtaisesti projekteihin joko Googlen fonttipalvelusta, tai Adoben fonttikirjastosta.

Erilaiset ”design systemit” ja ”cheat sheetit”

Design systemejä, eli suunnitteluohjeistuksia löytyy verkosta suuri kirjo, ja näistä minulla ei ole vakiintuneita suosikkeja. Googlen Material Designia kurkin kuitenkin säännöllisesti ja käytän suunnittelun tukena erilaisia lunttilappuja, kuten uxesign.cc:n nappien suunnitteluun keskittyvää.

Mikäli visuaaliset työkalut kiinnostavat, mutta niiden käyttöön tarvitset silti apua, älä epäröi ottaa meihin yhteyttä. Tarjoamme verkkosivustojen suunnittelun lisäksi laajoja visuaalisen suunnittelun ja graafisen suunnittelun palveluja.

Mistä on hyvät verkkokaupat tehty? 8 vinkkiä käyttökokemuksen parantamiseksi

Posted on 23.10.201921.5.2023 by Sininen Härkä

Verkkokauppa kasvattaa osuuttaan voimakkaasti markkinoilla ja siitä onkin muodostunut tärkeä asiakaskohtaamisen kanava verkossa. Verkkokauppa ei kuitenkaan ole pelkkää teknologiaa yrityksen myynnin ja prosessien tehostamiseksi, vaan se on ennen kaikkea syvää ymmärrystä sekä tuntemusta kohderyhmän ostokäyttäytymisestä. Tässä blogiartikkelissa käyn läpi, mitä verkkokaupan käyttökokemuksella tarkoitetaan ja mitkä seikat siihen vaikuttavat.

Älä aliarvioi käyttökokemuksen merkitystä

Oli kyse sitten yritys-, jälleenmyyjä- tai kuluttaja-asiakkaista, on verkkokauppa noussut oleelliseksi kanavaksi kohdata asiakkaat. Asiakkaiden tavat etsiä ja vertailla tietoa sekä tehdä ostopäätöksiä ovat muuttuneet, mikä vaatii yritykseltä kykyä saada käännettyä muuttunut ostokäyttäytyminen hyödyttämään omaa liiketoimintaa.

Asiakkaiden vaatimukset ja odotukset verkossa tarjottaville palveluille kasvattavat merkitystään ja ostopäätökseen voikin vaikuttaa ratkaisevasti se, miltä palvelun käyttäminen tuntuu tai kuinka sujuvaa käyttö on. Käyttökokemuksen merkitystä verkkosivustoilla ei sovi vähätellä, sillä sen vaikutus antaa huolellisesti suunniteltuna ja toteutettuna valtavan kilpailuedun ja voi parhaimmillaan olla myös ratkaisevakin tekijä yrityksen menestyksen kannalta.

UX-suunnittelulla kohti sujuvampaa käyttökokemusta

Koska käyttäjäkokemus on muodostunut yhdeksi oleellisimmista kilpailuvalteista verkkokaupalle, on siihen vaikuttavien elementtien ja ominaisuuksien löytäminen keskeisessä roolissa. Lisäksi oman kohderyhmän tunteminen auttaa ymmärtämään asiakkaiden tarpeita. Käyttäjäkokemuksen suunnittelu vaatii hyviä ongelmanratkaisutaitoja, sillä tavoitteena on löytää ratkaisu siihen, kuinka verkkokauppa saadaan luomaan lisäarvoa käyttäjälleen tehden samalla palvelun käytöstä mahdollisimman luontevaa.

UX-suunnittelun avulla pyritään vastaamaan käyttäjän tarpeisiin ylittäen heidän odotuksensa, kuitenkin niin, että palvelun käytettävyydessä säilyy vaivattomuus ja selkeys. Suunnittelussa keskitytään nimenomaan siihen, miltä palvelu käyttäjästä tuntuu. Käyttökokemus ei muodostukaan yksin upeista leiskoista ja hienoista erikoisefekteistä, vaan se kattaa kaikki verkkopalvelun toiminnot aina navigoinnista sivuston sisältöihin ja hierarkioihin saakka.

Mihin sitten pitäisi kiinnittää huomiota?

Kattavan kirjallisuustietopohjan haalimisen lisäksi toteutin aiheesta kyselytutkimuksen osana tietojenkäsittelyn tradenomin opintojani. Kyselytutkimuksessa selvitin, mitkä asiat vaikuttavat käyttäjän näkökulmasta verkkokaupan käyttökokemukseen. Nappaa tästä tiivistettynä vinkit suoraan käyttäjiltä itseltään:

1. Luotettavuus ennen kaikkea

Verkkokaupalle tärkeimmäksi valintakriteeriksi nousi luotettavuus. Luotettavuuden esiintuominen ja siihen panostaminen on tärkeää menestyksen kannalta.

2. Navigointi ja kategoriat kuntoon

Navigoimisen verkkokaupassa tulee olla yksinkertaista. Lisäksi käyttökokemukseen vaikuttaa, että verkkokaupan tuotteet on lajiteltu selkeästi kategorioittain. Mieti siis sivuston hierarkia ja rakenne niin, että sivuston käytettävyys on mahdollisimman sujuvaa.

3. Tee tuotteiden selailusta ja hakemisesta selkeää

Tuotteiden hakeminen, suodattaminen ja selailuominaisuudet ovat käyttökokemuksen kannalta tärkeässä asemassa. Kannattaa siis pohtia, onko tuotteiden hakeminen verkkokaupassa selkeää. Etenkin, jos tuotteita ja variaatioita on paljon.

4. Kattavat tuotetiedot tukevat ostopäätöstä

Yksittäisen tuotteen tiedot, laadukkaat kuvat sekä varastotilanteen näkyvyys on käyttäjille arvokasta informaatiota ostopäätöksen kannalta. Lisäksi muiden käyttäjien arviot tuotteesta vaikuttavat ostopäätöksen tekemiseen, joten kannattaa harkita tuotearviointien tuomista yksittäisen tuotteen tietoihin.

5. Turhat liirumlaarumit pois – verkkokauppaan tullaan ostoksille

Verkkokauppa saa mennä suoraan asiaan ilman erillisiä yritysesittelyitä etusivulla. Muista kuitenkin, että käyttäjän tulee löytää yhteystiedot sekä toimitus- ja muut ehdot helposti ilman yksityisetsivän jaloja taitoja. Toimitus- ja maksutavat vaikuttavat myös verkkokaupan käyttäjälle muodostuvaan kokonaiskokemukseen, joten niiden esilletuomiseen ja toimivuuteen on syytä kiinnittää huomiota.

6. No pitäähän sen myös näyttää hyvälle

Verkkokaupan visuaalisuus ja yrityksen brändi-ilmeen esiintuominen on myös tärkeä huomioida käyttökokemuksen nimissä ja niihin kiinnitetään huomiota jopa niin paljon, että se vaikuttaa ostopäätökseen. Visuaalisuus lisää verkkokaupan käyttömukavuutta, mutta se ei kuitenkaan saa mennä toimivuuden edelle. Käyttäjille on tärkeämpää se, että palvelu pelittää.

7. Responsiivisuus

Ehkä sanomattakin selvää, mutta sanotaanpa silti: shoppailu tapahtuu kasvavissa määrin mobiililaitteilla, joten verkkokaupan tulee olla käytettävissä kaikilla laitteilla.

8. Nopeat syö hitaat

Latausnopeus on tärkeässä osassa verkkokaupan käyttökokemusta tarkastellessa. 88 % vastaajista kertoi, että latausnopeus vaikuttaa siihen, käyttääkö kyseistä verkkokauppaa vai ei. Älä siis unohda verkkokauppasi nopeuden optimointia.

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!

UX- ja UI-design – mitä sinunkin tulisi tietää web design -jargonista

Posted on 25.9.20196.3.2023 by Sininen Härkä

Työskentely nopeasti kehittyvällä alalla takaa sen, että työ saa jatkuvasti uusia ulottuvuuksia ja trendejä. Myös termistö kehittyy, ja koska trendit lähtevät monesti liikkeelle englantia puhuvan väestön keskuudesta, ovat termit luonnollisesti ensin englanniksi. Ammattislangin ja -termistön kehittyessä hurjaa vauhtia, käännöksiä ei usein tehdä ja termit vakiintuvat suomalaiseenkin suuhun englanninkielisinä. Kaksi tällaista ratkaisevaa työmme uutta ulottuvuutta ja termiä ovat UX- ja UI-design. Tässä blogiartikkelissa avaan perustasolla mitä nämä käsitteet tarkoittavat, ja miten ne liittyvät ratkaisevasti Sinisen Härän verkkosivustoprojekteihin.

UX-design eli User Experience Design

Voidaan vapaasti suomentaa esimerkiksi käyttöliittymän suunnitteluksi, käyttäjäkokemuksen muotoiluksi tai palvelun muotoiluksi. Käyttäjäkeskeinen UX-design kattaa sateenvarjon lailla alleen monia erilaisia alueita, joiden avulla pyritään parempaan käyttäjäkokemukseen. Muutamia mainitakseni:

– Käyttäjätutkimus ja palvelun testaaminen käyttäjillä. Palvelua kehitetään käyttäjille sopivaksi keräämällä dataa käyttäjistä ja heidän preferensseistään, joiden perusteella pystytään tekemään oletuksia ja käyttäytymismalleja kehityksen pohjalle. Datan perusteella voidaan ratkoa niitä ongelmia, mitä käyttäjät kohtaavat. Palvelun testaamisen järjestäminen oikeilla käyttäjillä esimerkiksi prototyyppivaiheessa on myös UX-designia, toimiiko datan perusteella tehdyt hypoteesit oikeasti ja miten käyttäjä kulkee suunniteltuja polkuja.

– Informaatioarkkitehtuuri, eli verkkopalvelun hierarkia, vielä käytännöllisemmin valikkorakenteen suunnittelu. Eli miten asiat ja informaatio jäsennellään ja rakennetaan ymmärrettävään muotoon.

– Wireframing, eli rautalankamalli on yksi vaihe suunnittelussa. Tässä vaiheessa keskitytään nimenomaan verkkosivuston tai -palvelun toimivuuteen, käyttäjän polkuihin saavuttaa tavoite ja niin edelleen. Rautalankamalli on ikään kuin luuranko, ja visuaalinen UI-puoli on vaatetus.

– Analytiikka ja mittarit ovat oma taiteenlajinsa, mutta liittyvät vahvasti käyttäjätutkimukseen. Erilaiset työkalut, kuten lämpökartat, antavat arvokasta dataa käyttäjistä, mikäli sitä osaa tulkita ja hyödyntää palvelun kehityksessä.

– Copywriting, eli tekstin tuotto. Tekstisisältö ohjailee ja helpottaa käyttäjää verkkopalveluissa ratkaisevasti, joten myös tekstin suunnittelu on osa UX-designia.

UI-design eli User Interface Design

Vapaasti suomennettuna ulkoasun suunnittelu, eli visuaalinen puoli suunnittelusta. Ulkoasun suunnittelu on myös osa käyttäjäkokemusta ja käyttöliittymän suunnittelua, joten kahtiajako UX:n ja UI:n välillä ei ole tasapuolinen. Maalaisjärjelläkin ajateltuna visuaalinen puoli vaikuttaa ratkaisevasti käyttäjän kokemukseen. Ulkoasun suunnittelu on eriytetty kuitenkin omaksi palveluksi sen takia, että myös tämä suunnitteluprosessi on täynnä omia sääntöjään, lainalaisuuksiaan ja kommervenkkejään, joihin visuaalinen suunnittelija/UI designer/graafikko/tmv. on erikoistunut. Muutamia näistä mainitakseni:

– Värien käyttö sivustolla niin, että se on yrityksen graafisen ohjeiston mukaista, mutta myös käyttäjäystävällistä. Esimerkkinä tilauksen lähetys verkkokaupassa: ”Lähetä”-napin ei tulisi koskaan olla punainen, koska miellämme punaisen napin tarkoittavan asioita, kuten keskeytä tai tyhjennä valinnat.

– Fonttien käyttö sivustolla jälleen niin, että mukaillaan yleistä ilmettä, mutta ei tuhota käytettävyyttä hankalasti luettavilla fonteilla.

– Kuvien käyttö mukaillen tavoiteltavia tunnetiloja ja toimintoja.

– Ulkoasun suunnittelun on tarkoitus toki myös luoda palvelulle arvoisensa ilme, ja olla näin osaltaan tukemassa tavoitteita.

Miten termit liittyvät Sinisen Härän verkkosivustoprojekteihin?

Kuten yllä on avattu, niin UX- ja UI-design eivät ole verkkosivustoprojekteista eroteltavia palveluita, vaan kriittisiä osia verkkopalveluiden suunnittelussa. Kun Sinisellä Härällä asiantuntijuus on kasvanut, on myös UX- ja UI-designin menetelmiä ja toimintatapoja integroitu osaksi prosessejamme. Nykyinen käytäntömme viedä projektit läpi sisältääkin paljon aiempaa enemmän erilaisia ja aiempaa parempia suunnittelun menetelmiä liittyen esimerkiksi wireframingiin, mittareihin sekä hierarkiaan. Näin voimme paremmin taata verkkopalveluiden toimivuuden ja tavoitteisiin pääsemisen. Meille verkkosivut eivät ole vain käyntikortti, vaan tärkeä, joskus ratkaisevakin pala yrityksen markkinointia.

TLDR: et voi rakentaa verkkosivustoja tekemättä UX- ja UI-designia. Se, miten paljon näihin panostetaan vaikuttaa ratkaisevasti lopputuloksen laatuun.

Lataa ilmainen verkkosivujen ostajan opas

Vieraskirjoitus: Flashnode – Automaatio kilpailukykyisen verkkokaupan ytimessä

Posted on 20.8.201911.3.2024 by Sininen Härkä

Jos automatisoitua verkkokauppaa pitää edelleen futuristisena visiona, on otettava kiriä. Verkkokauppojen jatkuvasti kiristyvä kilpailu ja tavoite olla kuluttajien ykköskauppapaikka on tuonut automaation verkkokauppa-alan keskiöön.

Asiakkaiden odotukset erityisesti verkkokaupan toimituksia, palauttamista ja asiakaspalvelua kohtaan on kiristynyt. Jos verkkokauppa ei vastaa näihin vaatimuksiin, on kilpaileva yritys vain yhden Google-haun päässä.

Myös suurten verkkokauppojen tuomat jännitteet vaikuttavat alaan merkittävästi. Esimerkiksi länsimaissa ylivoimainen Amazon on luonut omia patenttiratkaisuja, joilla hyödynnetään automaatiota tehokkaasti ja asiakkaan odotukset ylittäen – kuten toimittamalla tuotteen ennen kuin asiakas on sen edes tilannut.

Automaatio ei kuitenkaan ole vain verkkokauppajättien etuoikeus, vaan helposti muidenkin ulottuvilla.

Mitä on verkkokaupan automaatio?

Verkkokaupan automaatiota käytetään tyypillisesti sekä prosessien tehostamiseen että ongelmanratkaisuna. Jos automaatio pystyy suorittamaan jonkin tehtävän reaaliaikaisesti ja ehkä jopa tehokkaammin kuin ihminen, se kannattaa ehdottomasti antaa tietokoneen hoidettavaksi. Näitä tehtäviä ovat esimerkiksi automaattiset sähköpostit sekä varastosaldojen ja tilaustietojen reaaliaikainen päivittäminen. Yksin nämä tehtävät eivät ole ihmiselle vaativia, mutta yhdessä ja jatkuvasti toistuvina ne vievät työpäivästä suuren osan aikaa.

Automaatiota käytetään apuna myös ratkaisemaan esimerkiksi hylätyt ostoskorit. Noin 70% verkkokaupan ostoskoreista hylätään, eli asiakas poistuu sivustolta maksamatta ostoskoriin lisättyjä tuotteita. Näiden asiakkaiden kontaktointi muistutussähköpostilla voidaan automatisoida.

Verkkokauppiaille tuttu ongelma on myös se, että varastosaldoja ei välttämättä ehditä päivittää verkkokauppaan. Tämä voi johtaa siihen, että asiakas tilaa tuotteen, joka todellisuudessa on jo myyty loppuun. Tämä voidaan ratkaista verkkokauppa-alustan ja varastonhallinnan väliin rakennettavalla liitännällä (eli integraatiolla), joka päivittää saldon automaattisesti varastonhallinnasta verkkokauppaan. Tämä helpottaa erityisesti yritystä, jolla on yhteinen varasto kahdessa kauppapaikassa, kuten kivijalassa ja verkkokaupassa.

Kilpailuedun saavutus

Automaatio ei tuo ainoastaan helpotusta verkkokauppiaan arkeen, vaan se tekee yrityksestä asiakkaan silmissä houkuttelevimman vaihtoehdon.

Verkkokauppa voi luvata asiakkaalle enemmän. Prosessit eivät tule hidastumaan edes myyntipiikkien aikana, kun tietokone osallistuu rutiinityöhön.
Automaatio säästää rahaa. Nämä vapautuneet resurssit voidaan käyttää vaikka huokeampiin tuotteiden hintoihin tai myynti- ja markkinointitoimenpiteisiin, jolla houkutellaan lisää asiakkaita.
Yrityksestä tulee luotettavampi. Jos tietokone hoitaa laskuttamisen, ei synny (näppäily)virheitä. Asiakas voi aina luottaa, että laskutustiedot ovat oikein. Sama pätee myös ajantasaisiin varastosaldoihin ja tuotetietoihin.

Ajan ja rahan tuoma säästö antaa myös vapautta kokeilla ja uudistua. Verkkokauppa-ala kehittyy kovaa vauhtia, ja yritysten on löydettävä jatkuvasti uusia keinoja pysyä virkeänä. Mitä jos vapautuneet resurssit käytettäisiin entistä parempaan messuosastoon, digimarkkinointiin tai uuden tuotteen/palvelun lanseeraukseen?

Automaation käyttöönotto

Automaation käyttöönottoon vaikuttaa ensisijaisesti yrityksellä käytössä olevat ohjelmistot, kuten verkkokauppa-alusta. Osa verkkokauppa-alustoista saattavat tarjota omia plugineja, joita kauppiaat voivat ottaa käyttöön joko ilmaiseksi tai lisämaksusta. Esimerksiksi WooCommerceen löytyy paljon valmiita toteutuksia eri järjestelmillä.

Automaatioon on myös erikoistuneita ohjelmistointegraatioiden palveluntarjoajia, joista Suomessa johtavin on Flashnode. Flashnoden palvelussa on valmiiksi rakennettuja integraatioita useimpiin verkkokauppaohjelmistoihin, jolloin asiakkaan ei tarvitse maksaa kehitystyöstä. Jos omaa ohjelmistoa ei kuitenkaan palvelusta löydy, voi integraation tilata myös projektityönä.

Flashnoden integraatioilla voidaan automatisoida kiinteällä kuukausimaksulla muun muassa varastosaldot, tilausstatukset, laskutuksen ja asiakasprofiilien päivittymisen. Palveluun kuuluu myös ylläpito, eli tarkka valvonta integraation toiminnasta ja nopea puuttuminen mahdollisiin virhetilanteisiin. Katso myös koko lista mitä Flashnode voi automatisoida WooCommerce-verkkokaupassa. Samalla näet, löytyykö käyttämäänne ohjelmistoon valmis integraatio.

Automaation palveluntarjoajia on myös logistiikan puolella, jolloin lähettäminen ja palautusten käsittely tapahtuu vaivattomammin. Automaatio myös nopeuttaa tuotteiden lähettämistä, jolloin pystytään vastaamaan asiakkaiden odotuksiin nopeista toimitusajoista.

Verkkokauppiaan ei siis tarvitse itse osata rakentaa integraatiokoodia (tai edes puhua niistä). Luotettavan palveluntarjoajan kanssa hän saa automatisoitua liiketoiminnastaan ylimääräisiä käsitöitä, eikä tämä useimmiten vaadi edes uuden opettelua. Päinvastoin: täytyy muistaa, ettei asioita tarvitse enää tehdä itse. Sininen Härkä ja Flashnode hoitavat toimivan integraation puolestasi. Kysy lisää.

Nico Härkönen

CEO, Founder, Partner
Asiakkuudet, yhteistyöt, digimarkkinointi ja koulutukset
040 8222 843
nico@sininenharka.fi

Tai

Tomi Räsänen

Co-Founder / Chief Sales & Marketing Officer
+49 163 716 7767 / +358 44 7767 826
tomi.rasanen@flashnode.com
www.flashnode.com

8 periaatetta verkkosivusuunnitteluun

Posted on 25.4.20196.3.2023 by 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

Hatsolo.fi-sivustolle Gold-palkinto ja parhaan blogin palkinto Finnish Web Awardsissa

Posted on 20.12.20186.3.2023 by Sininen Härkä

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

4+4 vinkkiä ilmaisista kuvapankeista

Posted on 17.5.201711.3.2024 by Sininen Härkä

Tämän hetken yksi suurimpia trendejä nettisivujen suunnittelussa on isot pääkuvat sivustojen etusivulla. On tutkittu, että ihmisen ensivaikutelma sivustosta syntyy 2,6 sekunnissa, joten pääkuvan käyttö on tärkeä osa yrityksen brändiviestintää. Aina kuvia ei kuitenkaan ole mahdollista itse sivulle järjestää, jolloin apuun tulee erilaiset kuvapankit. Kuvapankkeja on maksuttomia sekä maksullisia ja niitä löytyy erilaisilla hinnoitteluilla. Käytämme omassa työssämme paljon maksullisia kuvapankkeja (iStock, Shutterstock) sen takia, että hyvät kuvat ovat näistä usein nopeammin löydettävissä ja säästämme siinä aikaa. Maksuttomista kuvapankeista voi kuitenkin löytää todellisia helmiä, ja tässä parhaat tärpit maksuttomien kuvapankkien viidakkoon.

Pixabay

Kuvapankki, josta löytää paljon erilaisia kuvia sekä englannin-, että suomenkielisillä hakusanoilla. Kuvat ovat pääasiassa pikseleiltään suuria sekä hyvälaatuisia ja Pixabaysta löydät myös esim. vektorigrafiikkaa ja piirroskuvia. Käytännössä kuka tahansa voi ladata palveluun kuviaan, jotka tarkastetaan koneellisesti. Kaikki palvelun kuvat ovat vapaasti käytettävissä, muokattavissa ja jaettavissa ilman lisämaksuja CC0-lisenssillä*. Palvelu tosin mainostaa hakunäkymässä myös Shutterstockin maksullisia kuvia, millä palvelun toimintaa rahoitetaan. Nämä monesti huokuttelevat osuvuudellaan sekä kuvanlaadullaan, mutta ovat tosiaan maksullisia.

Pexels

Pexels tarjoaa yli 30 000 laadukasta valokuvaa. Valokuvat ovat palveluntarjoajan omien sanojen mukaan valittu sivulle käsityönä ja huolella, ja se näkyykin kuvien tasossa. Pexelsistä löytyy kuvia monenlaisiin tunnelmiin ja värimaailmoihin. Kaikki sivuston kuvat ovat vapaasti käytettävissä, muokattavissa ja jaettavissa ilman lisämaksuja CC0-lisenssillä*.

Picjumbo

Picjumbo tarjoaa laadukkaita valokuvia Pexelsin tyyliin, mutta palvelun kuvat ovat kaikki yhden kuvaajan kamerasta. Picjumbon erikoisuutena on maksuttomien kuvien lisäksi Premium-jäsenyys, jota palvelu ahkerasti mainostaa. Sivuston kuvat ovat käytettävissä ja muokattavissa vapaasti, mutta kuvien latauksen mahdollistaminen eli käytännössä edelleen jakaminen omalta sivulta tarkoituksen mukaisesti on kiellettyä.

Googlen kuvahaku

Maksuttomia kuvia miettiessä ei ehkä ensimmäiseksi tule mieleen etsiä kuvaa Googlesta, mutta Googlen kuvahaku on kuvapankeista monipuolisin. Eri lisenssien kirjo on myös valtava, mutta Googlen kuvahausta voi kuitenkin poimia kuvia myös ilmaiseksi, kun muistaa täpätä kuvahakua tehdessä seuraavan kohdan (tai oman käyttötarkoituksen mukaisesti):

Muita huomionarvoisia kuvapankkeja: Unsplash, SplitShire, kuviasuomesta.fi sekä Flickrin lisenssivapaat kuvat.

*Creative Commons Zero (CC0) lisenssi = Teosta voi lupaa pyytämättä kopioida, muokata, levittää ja esittää, mukaan lukien kaupallisessa tarkoituksessa.

HÄRKÄVINKKI

Nettisivuja tehdessä voit itse etsiä sopivat kuvat edellä mainituista kuvapankeista, tai me voimme tehdä sen puolestasi, jolloin saat varmasti visuaalisesti brändiäsi tukevat kuvat kriittisille paikoille.