Verkkosivujen suunnittelu lähtee asiakasymmärryksestä.

1. verkkosivut
1.internet2016
2.asiakasymmärrys
3.suunnittelu

2. verkkosivut DigitalSeniorArtDirector
KATYTUUPANEN
katynen@gmail.com
+358 50 599 3356
https://www.linkedin.com/in/katy-tuupanen

3. verkkosivut 1.internet2016

4. verkkosivut
INTERNETINKÄ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 %)

5. verkkosivut 2.asiakasymmärrys
Suomalainenkuluttaja2016

6. verkkosivut
Googlen kuluttajabarometrin mukaan suomalaiset ovat:
vertailijoita alehaukkoja
rationaalisia
eletäänniukemmin
asiakasymmärrys
https://www.consumerbarometer.com/

7. verkkosivut
Mitä laitteita käytät?
Kännykkä
Älypuhelin
Tietokone
Tabletti
TV
INTERNETTV
MP3
EREADER
DIGITAALISETTALLENTAJAT
99%
73%
86%
43%
92%
30%
36%
asiakasymmärrys
https://www.consumerbarometer.com/
Googlen kuluttajabarometri

8. verkkosivut
Älypuhelimen käyttö
27% kartat
uutiset
sää
musiikinkuuntelu
kalenteri
OSTOSLISTATJNE.
pelit
KIRJAT/LEHDET
herätys
kuvat
puhelut
44%
47%
26%
41%
18%
19%
70%
53%
67%
asiakasymmärrys
https://www.consumerbarometer.com/
Googlen kuluttajabarometri

9. verkkosivut
Mitä tietoa haet?
29%
13%
6%
40%
55%
17%
13%
29%
26%
8%
23%
Yrityksensijaintia
ajo-ohjeita
LIIKENNETIETOJA
aukioloaikoja
hintoja
suositteluita
KUVIA
SIJAINTIINPERUSTUVIAPALVELUITA
yhteystieToja
maksutapoja
aleT,KUPONGIT...
asiakasymmärrys
https://www.consumerbarometer.com/
Googlen kuluttajabarometri

10. verkkosivut
Missä näit tuotetta mainostettavan?
20%
20%
15%
25%
Online
tv
RADIO
JULISTE
lehti
SÄHKÖPOSTI
suorakirjE
MAINOS
MUU
asiakasymmärrys
https://www.consumerbarometer.com/
Googlen kuluttajabarometri

11. verkkosivut
Mistä lähdit etsimään lisätietoa?
34%
VERKKOSIVU
LIIKE
SOITTO,TEKSTAUS
MUU
asiakasymmärrys
Googlen kuluttajabarometri
https://www.consumerbarometer.com/
59%

12. verkkosivut
ostopolku
Asiakkaan ostoprosessi voidaan jaotella:
- tiedonkeruu
- harkinta
- päätöksenteko
Ostoprosessit muuttuvat nykyään nopeammin
google ratkaisujavaltavamäärä
some suositukset blogit arvostelutkuvatjavideot

13. 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
ZeroMomentofTruth=ZMOT
mitenhelpotatkuluttajanelämää!

14. verkkosivut
ZMOT on muuttunut sitten vuoden 2011. Puhumme jo
tuhansista “lyhyistä hetkistä” (micro-moments),
jotka muokkaavat meitä kuluttajina.
5minuutissa 7,5miljoonaahakua
älypuhelimet 1/3googlenhauista
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

15. verkkosivut
Micro-moments
https://www.thinkwithgoogle.com/micromoments/intro.html
Ennakoi + ole paikalla
Ennakoi kuluttajien mikro-hetket (micro-moments)
ja ole silloin paikalla valmiina auttamaan.
Tarjoa hyötyä
Tarjoa hyödyllistä tietoa juuri oikealla hetkellä.
Ole nopea
Mobiilikäyttäjät haluavat tietää, mennä ja ostaa
nopeasti. Sinun vastineesi heille pitää olla myös
nopea ja kitkaton.

16. verkkosivut
kuluttajaSIIStänään
- kiireellinen
- älypuhelimen käyttäjä
- vertailija
- alehaukka
- rationaalinen
- keskittymiskyvytön
- vaativa
- useita micro-moments/vrk
- haluaa laadukkaan
ratkaisun ongelmaansa
- jne. jne.
laadukas
data

17. verkkosivut 3.verkkosivujensuunnittelu

18. verkkosivut
tiktak,kellokäy
0,05s 2,6s
Hylkäys (40 %)Silmäily
3,0s
Asiakkaan hurmaaminen pitää
tehdä alle kymmenessä sekunnissa
tai kävijä on menetetty.10s
Mielipide
Kuluttajan saapuessa verkkosivulle...

19. 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%
muutamialukuja
Huom! Luvut ovat suuntaa antavia.

20. verkkosivut
verkkosivuntavoitteet
- 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!

21. verkkosivut
suunnittelunaloitus
1. 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.

22. 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,
typografia, 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!
visuaalinensuunnittelu
verkkosivut

23. 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

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

25. verkkosivut
Psykologiasuunnittelussa
= 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!

26. verkkosivut
esteettinensuunnittelu
vä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.

27. verkkosivut Serif Sans-serif
GroteskiAntiikva
- rivinvälit, merkkien välit jne.
- fonteilla voidaan luoda identiteetti yritykselle
- muistijälki
Perinne, ammattitaito Nykyaika, modermi
esteettinensuunnittelu
typografia

28. verkkosivut
kuvat
esteettinensuunnittelu
“kuva kertoo enemmän kuin tuhat sanaa”

29. 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öä.
TESTAAMISENTÄRKEYS

30. 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.
testaamisentärkeys

31. verkkosivut
emotionaldesign
- 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.

32. verkkosivut
käytettävyys
Kä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

33. verkkosivut
verkkosivujenkäytettävyys
nopeastilatautuvatsivutresponsiiviset
hyvänavigaatioflow luettavatfontit
toimivatlinkit
lyhyetlomakkeet
aukioloajatesillä
yhteystiedot
Laadukkaatkuvat
Selkeätsivunimet
Sommittelu
Murupolku
Tekstisisällöteikuvina
Haku SelkeätCTA:t
Selkeätotsikot Metatiedotkunnossa Vastaatavoitteita
Kävijäseuranta
jne.jne.

34. 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öä
VERKKOSIVUJENSISÄLTÖ
asiakas+ongelmat=ratkaisu
- tuota tunne, että voi auttaa asiakasta!
- kerro miten olet jo auttanut muita!

35. 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ä.
VERKKOSIVUJENSISÄLTÖ

36. verkkosivut
TEKNINENOSUUS=KOODAUS
5. Verkkosivun tekninen toteutus
- järjestelmät
- toimivuus ja virheettömyys
- helppo päivitettävyys
- nopeus
- käyttäjäkokemus
- jne.

37. verkkosivut
VERKKOSIVUJENPAKETOINTI
- selvitä tavoite
- tunne asiakas
- tee rautalanka
- käytettävyys
- visuaalisuus
- testaa
- sisällöntuotanto
- tekninen toteutus
- seuraa