Verkkosivujen suunnittelu

verkkosivut1. internet 20162. asiakasymmärrys3. suunnittelu

verkkosivut Digital Senior Art DirectorKATY [email protected]+358 50 599 3356https://www.linkedin.com/in/katy-tuupanen

verkkosivut 1. internet 2016

verkkosivut

INTERNETIN KÄYTTÄJIÄ 2016

www.internetlivestats.com

5,107,402 92,5 % 416,502(Ruotsi 93,1 %, Somalia 1,7 %, Libya 21,1 %, Kiina 52,2 %)

verkkosivut 2. asiakasymmärrysSuomalainen kuluttaja 2016

verkkosivut

Googlen kuluttajabarometrin mukaan suomalaiset ovat:

vertailijoita alehaukkojarationaalisia

eletään niukemmin

asiakasymmärrys

https://www.consumerbarometer.com/

verkkosivut

Mitä laitteita käytät?

KännykkäÄlypuhelinTietokoneTablettiTVINTERNET TVMP3EREADERDIGITAALISET TALLENTAJAT

99 %

73 %

86 %

43 %

92 %

30 %

36 %

asiakasymmärrys


Googlen kuluttajabarometri

verkkosivut

Älypuhelimen käyttö

27 % kartatuutisetsäämusiikin kuuntelukalenteriOSTOSLISTAT JNE.pelitKIRJAT/LEHDETherätyskuvatpuhelut

44 %

47 %

26 %

41 %

18 %

19 %

70 %

53 %

67 %

asiakasymmärrys



verkkosivut

Mitä tietoa haet?

29 %

13 %

6 %

40 %

55 %

17 %

13 %

29 %

26 %

8 %

23 %

Yrityksen sijaintiaajo-ohjeitaLIIKENNETIETOJAaukioloaikojahintojasuositteluitaKUVIASIJAINTIIN PERUSTUVIA PALVELUITAyhteystieTojamaksutapojaaleT, KUPONGIT...

asiakasymmärrys



verkkosivut

Missä näit tuotetta mainostettavan?

20 %

20 %

15 %

25 %

Online

tv

RADIO

JULISTE

lehti

SÄHKÖPOSTI

suorakirjE

MAINOS

MUU

asiakasymmärrys



verkkosivut

Mistä lähdit etsimään lisätietoa?

34 %

VERKKOSIVULIIKESOITTO, TEKSTAUSMUU

asiakasymmärrysGooglen kuluttajabarometri


59 %

verkkosivut

ostopolkuAsiakkaan ostoprosessi voidaan jaotella:- tiedonkeruu- harkinta- päätöksenteko

Ostoprosessit muuttuvat nykyään nopeammin

google ratkaisuja valtava määrä

some suositukset blogit arvostelutkuvat ja videot

verkkosivut

Google on julkaissut (2011) ajatuksen Zero Moment of Truthista (Totuuden nollapiste). Se on siis hetki milloin tarve syntyy ja siihen pitää saada välittömästi vastaus/ratkaisu verkosta.

Tarve/kysymykset voivat olla mitä tahansa:“Mikä vaippa auttaa lastani nukkumaan läpi yön?” “Mikä hammastahna tekee hymystäni kirkkaamman?” “Mikä auto on turvallisin perheelleni?”

Brändi/yritys, joka vastaa näihin kysymyksiin juuri oikeaan aikaan voittaa!

www.thinkwithgoogle.com/collections/zero-moment-truth.html

Zero Moment of Truth = ZMOT

miten helpotat kuluttajan elämää!

verkkosivut

ZMOT on muuttunut sitten vuoden 2011. Puhumme jo tuhansista “lyhyistä hetkistä” (micro-moments),jotka muokkaavat meitä kuluttajina.

5 minuutissa 7,5 miljoonaa hakuaälypuhelimet 1/3 googlen hauista

Micro-moments

Micro-moments are critical touch points within today’s consumer journey, and when added together, they ultimately determine how that journey ends.

https://www.thinkwithgoogle.com/micromoments/intro.html

verkkosivut

Micro-moments

https://www.thinkwithgoogle.com/micromoments/intro.html

Ennakoi + ole paikallaEnnakoi kuluttajien mikro-hetket (micro-moments)ja ole silloin paikalla valmiina auttamaan.

Tarjoa hyötyäTarjoa hyödyllistä tietoa juuri oikealla hetkellä.

Ole nopeaMobiilikäyttäjät haluavat tietää, mennä ja ostaa nopeasti. Sinun vastineesi heille pitää olla myös nopea ja kitkaton.

verkkosivut

kuluttaja SIIS tänään- kiireellinen- älypuhelimen käyttäjä- vertailija- alehaukka- rationaalinen- keskittymiskyvytön- vaativa- useita micro-moments/vrk- haluaa laadukkaan ratkaisun ongelmaansa- jne. jne.

laadukasdata

verkkosivut 3. verkkosivujen suunnittelu

verkkosivut

tik tak, kello käy

0,05 s 2,6 sHylkäys (40 %)Silmäily

3,0 s

Asiakkaan hurmaaminen pitää tehdä alle kymmenessä sekunnissa tai kävijä on menetetty.10 s

Mielipide

Kuluttajan saapuessa verkkosivulle...

verkkosivut

Pitää huonoa verkkosivun visuaalisuutta syynä siihen, etteivät luota kyseisen yrityksen palveluihin tai tuotteisiin.

75 %

Kävijöistä perustaa ensivaikutelmansa yrityksestä pelkästää sivuston visuaalisen ulkonäön perusteella.

94 %

muutamia lukuja

Huom! Luvut ovat suuntaa antavia.

verkkosivut

verkkosivun tavoitteet- saada myyntiä lisää- vahvistaa brändiä- löytyä verkosta paremmin (hakukonelöydettävyys)- parantaa asiakaspalvelua- tehostaa automaattisia toimintoja- tavoitella uusia asiakkaita/kohderyhmiä- tunnistaa kävijät tehokkaammin- päivittää vanhentunut visuaalinen ilme tähän päivään- osallistaa asiakkaita paremmin- jne. jne.

Mitkä ikinä tavoitteet onkaan, aina määritellään se tärkein tavoite!

verkkosivut

suunnittelun aloitus1. Briiffaus:- verkkosivun tavoitteet- tieto yrittäjän tuotteista/palveluista, positiostaan markkinoilla, kilpailueduista jne.- tieto asiakkaista (käyttäytyminen verkossa)

2. Verkkosivujen käyttöliittymäsuunnittelu ja rautalankamalli (sketching)- palvelun käyttöliittymästä rautalankamalli- suunnitella sivuston hierarkia ja priorisoidaan sisältöä.- ei oteta kantaa esim. sivuston visuaalisiin element-teihin, kuten väreihin ja kuviin.

3. Verkkosivujen visuaalinen suunnittelu- silta käyttäjän ja sisällön välillä. - designtyötä ohjaavat asiakkaan tavoitteet.- strategista työtä käyttäjän katseen ohjaamiseksi ja huomion kiinnittämiseksi oikeisiin toiminnal-lisuuksiin.- symbolista viestintää käyttäjälle (sommittelut, värit, typografi a, muodot...) joiden avulla kerrotaan käyttäjälle, miten toiminnallisuuksia käytetään, mitkä osat kuuluvat yhteen, mikä on tärkeää jne.

Visuaalisuus on käytettävyyden viimeistelevä taso, joka voi pelastaa tai tuhota käyttäjäkokemuksen!

visuaalinen suunnittelu

verkkosivut

verkkosivut

- mobiililla huonot konversiot!

- yksinkertainen suunnittelu- käyttäjäkokemus vieläkin tärkeämpää- tarkkaile latausnopeuksia- kaikki ylimääräinen pois (tekstit, sliderit jne.)- jätä painavat visuaaliset elementit pois- whitespace- jne. jne.

“Think thumb, rather than pixel”

Mobiilisuunnittelusta

verkkosivut

Mobiilisuunnittelusta

vASEN YHDISTETTY OIKEAKuva: https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/

verkkosivut

Psykologia suunnittelussa

= rauhoittaa

= uhkaa

- hahmotamme maailmaa hlökohtaisilla suodattimilla- mikä tekee toisen suunnitelman houkuttelevam- maksi kuin toisen?

Ihmisaivot kaipaavat järjestystä = koulutettu tunnistamaan kuvioita(esim. tekstirivi)

Tunnistus(esim. tutun tapaaminen)Google = aut. täyttöAmazon = viimeisimmät selailut, suositukset

= miellyttävä käyttäjäkokemus!

verkkosivut

esteettinen suunnitteluvärit

93 % Ulkonäkö(1 % tuoksu tai ääni, 6 % rakenne)

85 %

80 % Lisää tunnistettavuutta(suora yhteys kuluttajien luottamukseen)

Väri

Huom! Luvut ovat suuntaa antavia.

verkkosivut Serif Sans-serifGroteskiAntiikva

- rivinvälit, merkkien välit jne.- fonteilla voidaan luoda identiteetti yritykselle- muistijälki

Perinne, ammattitaito Nykyaika, modermi

esteettinen suunnittelutypografi a

verkkosivut

kuvatesteettinen suunnittelu

“kuva kertoo enemmän kuin tuhat sanaa”

verkkosivut

4. Testaaminen (emotional ja käytettävyys)

- emotionaalinen testauksen avulla arvioidaan kohderyhmän tunnetason reaktiota desingniin: kuinka hyvin/huonosti design tuottaa käyttäjässä halutun tunnetason reaktion.

- käytettävyystestauksella tarkoitetaan verkkopalvelun käytettävyyden arviointia: eli etsitään tekijöitä, jotka haittaavat palvelun tavoitteiden mukaista käyttöä.

TESTAAMISEN TÄRKEYS

verkkosivut

Hyvä (visuaalinen/käytettävyys) suunnittelu pitäisi perustua aina käyttäjien kokemuksiin = miten he kokevat tuotteen/palvelun

Luodaan palvelut/tuotteet kuluttajien tarpeisiin, toiveisiin jne. eikä niin, että heidän pitää vain sopeutua niihin.

testaamisen tärkeys

verkkosivut

emotional design- tehokas tapa aiheuttaa reaktio jolla vedotaan kuluttajien tunteisiin, tarpeisiin ja toiveisiin. - näin luodaan yhteys (uskollisuus) yrityksen/tuotteiden sekä kuluttajan välille- mainonta on visuaalisesti miellyttävää unohtamatta käytettävyyttä, luotettavuutta ja toiminnallisuuksia- paras mainontahan ei myy niinkään itse tuotetta vaan oikeaa tunnetta!

People love beautiful things, even if they don´t work. Even more if they work well.

verkkosivut

käytettävyysKäyttäjäkokemus sisältää kaikki käyttäjien tunteet, uskomukset, mieltymykset jne...

Käytettävyys voidaan jakaa pienempiin osiin:

OPITTAVUUS

MUISTETTAVUUS

TEHOKKUUS

MIELLYTTÄVYYS

VIRHEETTÖMYYS

tavoite (ensimmäinen kerta)

helppo käyttö (pidempi tauko)

kuinka nopea toiminta

tyytyväisyys ulkoasuun

virheiden määrä/vakavuus

verkkosivut

verkkosivujen käytettävyysnopeasti latautuvat sivutresponsiiviset

hyvä navigaatiofl ow luettavat fontit

toimivat linkit

lyhyet lomakkeet

aukioloajat esillä

yhteystiedot

Laadukkaat kuvat

Selkeät sivunimet

Sommittelu

Murupolku

Tekstisisällöt ei kuvina

Haku Selkeät CTA:t

Selkeät otsikot Metatiedot kunnossa Vastaa tavoitteita

Kävijäseuranta

jne. jne.

verkkosivut

5. Verkkosivujen sisällöntuotanto- paraskaan web design ei pelasta sivustoa, jonka tekstisisältö jää haaleaksi. - verkkosivut ilman asiakkaidesi ongelmia ratkovaa, puhuttelevaa ja johdonmukaista sisältöä

VERKKOSIVUJEN SISÄLTÖ

asiakas + ongelmat = ratkaisu

- tuota tunne, että voi auttaa asiakasta!- kerro miten olet jo auttanut muita!

verkkosivut

- jätä kaikki turha pois- tee tekstistä helposti luettavaa (lyhyitä lauseita/kappaleita, riittävästi tilaa ympärille)- luo keskustelua- ratkaise ongelmia, anna vastauksia syihin miksi he yleensä tulivat sivustolle.- älä kirjoita ammattikieltä- kuvat, kartat, piirrokset auttavat tehokkaasti tukemaan/korvaamaan tekstiä.

VERKKOSIVUJEN SISÄLTÖ

verkkosivut

TEKNINEN OSUUS = KOODAUS5. Verkkosivun tekninen toteutus- järjestelmät- toimivuus ja virheettömyys- helppo päivitettävyys- nopeus- käyttäjäkokemus- jne.

verkkosivut

VERKKOSIVUJEN PAKETOINTI- selvitä tavoite- tunne asiakas- tee rautalanka- käytettävyys- visuaalisuus- testaa- sisällöntuotanto- tekninen toteutus- seuraa

Design

Verkkosivujen suunnittelu