Tiimiakatemia on Jyväskylän Ammattikorkeakoulun yrittäjyyden huippuyksikkö

Designilla dollareita

Kirjoitettu 07.11.19
Esseen kirjoittaja: Sampsa Hakakoski
Kirjapisteet: 1
Kirja: Tekemisen 4.0
Kirjan kirjoittaja: Kristoffer Lawson
Kategoriat: 9. YPK:n ulkopuoliset, 9.06. Markkinointi

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Meillä kävi täällä Tiimiakatemialla Kristoffer Lawson puhumassa 1.11. Kristoffer on pitkän väylän sarjayrittäjä. Hän muun muassa kehittää tällä hetkellä attactive.ai yritystä, joka hyödyntää tekoälyä verkkosivustojen visuaalisessa suunnittelussa.

Kristoffer puhuikin designista ja sen tärkeydestä. Hän heitti alkuun faktan, jonka mukaan jopa 40% voitoista voi kadota huonon käyttökokemuksen takia. Tämä tarkoittaa Yhdysvaltojen verkkokauppamarkkinoilla 1 triljoonan dollarin tappioita. Hyvin herättävä luku.

Olen tällä hetkellä rakentamassa uusia nettisivuja Tiimiakatemialla, joten Kristofferin esitys tuli hyvään väliin. Käynkin seuraavaksi läpi, miten aion tai olen jo hyödyntäjät Kristofferin nostamia pointteja verkkosivujen rakentamisessa.

 

Selkeys ja helppokäyttöisyys

Jotta verkkosivut olisivat toimivat, ne täytyvät tietysti olla tarpeeksi selkeät, jotta vierailija osaa navigoida sivulla ja löytää hakemansa tiedon. Verkkosivujen selkeyttä voi parantaa ainakin parilla keinolla.

Ensinnäkin tarpeeksi suurella kontrastilla. Jotta teksti olisi helposti luettavaa, täytyy tekstin ja taustan välillä olla riittävä kontrasti (väriero), jotta teksti erottuu taustasta. Jos teksti on liian saman värinen kuin tausta, teksti maastoutuu sivulle. Tämä ei tietenkään ole haluttu tilanne. Tiimiakatemian sivuilla pyrinkin käyttämään paljon mustaa tekstiä valkoisella taustalla. Tai jos teksti on kuvan päällä, niin pyrin muokkaamaan kuvan värimaailman tekstille sopivaksi tai asetan tekstin ”tyhjään” kohtaan kuvassa.

Toiseksi voit parantaa selkeyttä yksinkertaistamalla navigointia. Tämä voi tarkoittaa esimerkiksi turhien sivujen karsimista tai käyttöpolun virtaviivaistamista. Käyttöpolkua voi selkeyttää muun muassa selkeillä Call-2-Actioneilla. Kun vierailija tulee sivulle, voit ohjata hänet oikeaan suuntaan esim. näkyvällä ”Lue lisää”-napilla. Nappeihin pätee Fitt:sin laki, eli mitä suurempi kohde, sitä helpompi siihen osua. Call-2-Action napista voi tehdä siis näkyvän tekemällä siitä ison ja korostamalla sitä huomio värillä (korkea kontrasti).

Olen jo tähän mennessä tehnyt sivujen tärkeimmistä napeista suhteellisen isoja ja korostanut niitä punaisella huomiovärillä (sopii Akatemian brändiin). Tämän lisäksi lisäsin sivuston puhelinnumeroihin ja sähköposteihin tel: ja mailto: linkit eli tekstiä klikkaamalla pystyt soittamaan tai lähettämään sähköpostin. Tämä siis poisti yhden askeleen asiakkaalta ja helpottaa sivuston käyttöä.

 

Yhtenäisyys

Tämä on aika itsestään selvä, mutta silti jotkut sivustot ei noudata tätä. Yksinkertaisuudessaan tämä tarkoittaa, että teema/brändi (värit ja tyyli) pysyisi samana koko sivustolla.

Vaikeinta Tiimiakatemian sivustojen kannalta on pitää yhtenäinen kirjoitustyyli, koska monet eri tyypit työntävät sisältöä sinne. Tai ylipäänsä on vähän vaikea hahmottaa, mikä on Tiimiakatemian ydinviesti: Mitä haluamme viestiä ulospäin? Yksinkertaista olisi, jos Tiimiakatemia olisi ”yrittäjäkoulu” ja that’s it, mutta siihen kuuluu paljon muutakin. Tästäkin on sata eri mielipidettä, että mikä on Tiimiakatemialla tärkeintä, minkä takia se onkin vaikeaa.

Visuaalista tyyli pidänkin samanlaisena käyttämällä rajattua määrää värejä, fontteja ja nappityylejä. Myös kaikkien kuvien täytyisi olla mahdollisimman saman tyylisiä, mikä voi myös osoittautua vaikeaksi, koska myös kuvia tulee eri lähteistä. Lisäksi Kristoffer neuvoi lisäämään kaikkiin kuviin alt tagit eli kuvien kuvaukset, koska se helpottaa Googlen hakukonetta.

 

Esteettisyys

Tässä kohtaa monet voi miettiä: ”Mitä väliä sillä on, miltä se näyttää, kunhan se toimii?”. Sillä on sen verran väliä, että esteettisyys ainakin parantaa asiakaskokemusta. Kristoffer kertoi tutkimuksesta, jossa testattiin kahta erilaista käyttöjärjestelmää pankkiautomaatissa. Toinen oli esteettinen, mutta monimutkainen ja toinen oli ruma, mutta yksinkertainen. Tutkimuksessa päästiin lopputulokseen, että asiakkaat kokivat esteettisen käyttöjärjestelmän helppokäyttöisemmäksi, vaikka se olikin monimutkaisempi.

Estetiikkaa voi parantaa symmetrialla, värien harmonialla ja antamalla tarpeeksi tilaa objekteille (älä aseta asioita liian tiheään). Tiimiakatemian sivustolla näistä vaikein on ollut harmonia. Tiimiakatemian pääväri on punainen (vielä suhteellisen kirkas sellainen), mikä ei sovi monenkaan muun värin kanssa. Lähinnä musta, valkoinen ja ruskea sopii punaisen kanssa. Lisäksi jos punaista käyttää liikaa, siitä tulee raskas fiilis. Tästä syytä olenkin käyttänyt punaista lähinnä korostusvärinä napeissa ja linkeissä.

 

Esimerkki

Tämä kuvankaappaus uusilta nettisivuilta tiivistää aika monta Kristofferin neuvoa. Mustassa tekstissä valkoisella taustalla on tarpeeksi kontrastia, joten teksti on helppo lukea. Tekstin kummallakin puolella on paljon valkoista tilaa, joten sivu ei näytä ahtaalta, Värit ovat harmoniassa toistensa kanssa ja punaista on käytetty korostusvärinä napissa sekä otsikossa. Napissa on myös selkeä call to action ja nappi on myös suhteellisen suuri, joten siihen helppo osua. Teksti on myös keskellä sivua, joten se on symmetrinen.

Keskustele artikkelista

Kirjoita kommentti

Kirjoita allaoleva koodi viereiseen kenttään roskapostin suodattamiseksi, kiitos!