kotisivut ja verkkokauppa - lab-ammattikorkeakoulu · • tyyli ja käytettävyys säilyy...

40
Kotisivut ja verkkokauppa

Upload: others

Post on 14-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Kotisivut ja verkkokauppa

Page 2: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Jani Kiviranta

Page 3: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Millainen nettisivu on hyvä?

Page 4: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Title

Yksinkertaisuus12 %

Sivun tarkoitus12 %

Visuaalisuus23 %

Navigoinnin helppous24 %

Sisällön kiinnostavuus ja hyöty14 %

Helppokäyttöisyys16 %

Lähde: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4974011/

Tutkimukset 2000–2014

Page 5: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Huom! Ei ole verrattu tehokkuuteen.

Page 6: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Navigaatio• Helppous ja tunne kontrollista • Haku • Näkyvät linkit

Page 7: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Visuaalisuus• Ilmavuus • Latautuu nopeasti (kuvat, videot, animaatiot) • Kuvien ja videoiden käyttö

Page 8: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Rakenne• Helppo hahmottaa heti • Logiikka nopeasti omaksuttavissa • Elementtien toistuvuus käyttäjäkokemuksessa • Merkitykselliset otsikot ja avainsanat

Page 9: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Sisältö• Sisällön laatu (asiantuntijuus, palvelu, hyöty) • Oltava käyttäjälle merkityksellistä • Linjassa sivuston tarkoituksen kanssa

Page 10: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Yksinkertaisuus• Yksinkertaiset otsikot • Nopeasti annettava etsitty tieto • Skaalautuvuus näytölle • Helposti ymmärrettävät toiminnallisuudet • Tyyli ja käytettävyys säilyy samanlaisena koko

sivustolla

Page 11: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Luettavuus• Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti oikein • Ei puuduttavan pitkiä kappaleita • Sisältö vastaa odotuksia

Page 12: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

(61%) Alennus

(55%) Ostaminen

(53%) Tuotearviot

(53%) Yleistieto

(52%) ”Sisäpiirin tieto”

(51%) Tuotetietous

(49%) Mielipide

(37%) Asiakaspalvelu (34%) Tapahtumat

(33%) Yhteenkuuluvuus (30%) Kehitysideat

(22%) Yhteisöllisyys

Tuotetietous (73%)

Yleistieto (71%)

Mielipide (69%)

”Sisäpiirin tieto” (68%)

Tuotearviot (67%)

Yhteenkuuluvuus (64%)

Asiakaspalvelu (63%)

Kehitysideat (63%)

Yhteisöllisyys (61%)

Tapahtumat (61%)

Ostaminen (60%)

Alennus (60%)

Hellen Baird & Parasnis (2011) - Link

Page 13: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

UX-DesignMikä on ongelma ja sen ratkaisu?

Page 14: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Hyvä UX auttaa käyttäjää löytämään nopeammin

haluamansa, vähentämällä aikaa ymmärtämisen ja toiminnan väliltä.

Page 15: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti
Page 16: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Hinta Alle 80.000 km Farmari Punainen Automaattivaihteet …

Valitse väri

Korityyppi

Automaatti?

80.000 km

MERKKI JA MALLI

76.000 km automaatti

SUODIN

MERKKI JA MALLI

75.000 km automaatti

MERKKI JA MALLI

79.000 km automaatti

MERKKI JA MALLI

77.000 km automaatti

MERKKI JA MALLI

77.500 km automaatti

12.000 €

Ajokilometrit

Hintaluokka

Vahtitoiminto?

Email Tuleeko uusia vastaavuuksia?

Page 17: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Profilointi

Page 18: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Henkilö• Tarina • Demografiset tiedot • Kiinnostuksen kohteet • Tarpeet • Ratkaisu

Page 19: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Miten profiili löytää yrityksen? Mikä saa hänet sitoutumaan? Mikä saa hänet palaamaan? Mikä saa suosittelemaan?

Kon

takt

ipis

teet

Kan

avat

ONGELMA TARVE RATKAISU

Mikä saa hänet ostamaan?

Miten hän saa tietää yrityksestä ja sen palveluista/tuotteista?

Mistä voimme päätellä, että hän on kiinnostunut/sitoutunut)

Miten tiedämme, että hän palaa palveluiden/tuotteiden pariin?

Mikä saa hänet suosittelemaan?

Kanava? Kanava? Kanava? Kanava?

Matti Meikäläinen• Ongelma 1• Ongelma 2• Ongelma 3

• Tarve 1• Tarve 2• Tarve 3

• Ratkaisu 1• Ratkaisu 2• Ratkaisu 3

Käyttäjäryhmä

Miten tiedämme, että hän palaa palveluiden/tuotteiden pariin?

Kanava?

Page 20: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Miten käyttäjälöytää haluamansa?

Tietoisuus

Mikä saa hänetsitoutumaan?

Sitoutuminen

Mikä saa hänetpalaamaan?

Muistaminen

Mikä saa hänetsuosittelemaan?

Suosittelu

Mikä saa hänetostamaan?

Myyntitulot

Page 21: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Miten käyttäjäprofiilin X löytää haluamansa?

Miten hän kiinnostuu ja osoittaa sen?

Mikä saa hänet palaamaan?

Mikä saa hänet suosittelemaan?

Ystävä kertoi palvelustaHän on tilannut uutiskirjeenHän tilaa kumppaniyrityksen uutiskirjeenEtsii hakukoneella tietoja

Näkee kaltaistensa kuviaRekisteröityy nähdäkseen lisääAntaa nimen ja sähköpostiosoitteenTulee lasketutumissivulle ”Tervetuloa Mikko”

CTA: suunnittele seuraava reissuIlmoittaa päivämäärät, jolloin on lähdössä reissuunKertoo suunnitelmistaan kavereilleVaraa reissun

Hän saa ”Tervetuloa käyttäjäksi” -sähköpostinHänen erityistoiveensa on tallennettuna palveluunHän haluaa jakaa palvelusta esim. kuvia itsestään erämökin käyttäjänä

Page 22: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Ominaisuudet tärkeysjärjestykseen

Page 23: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Konsepti Aikajänne S, M, L

Saavutettavuus1–10

Haluttavuus1-10

Organisaatio X/henkilön tavoitteet

Portfolio Case 1 M 7 10

Portfolio Case 2 M 7 10

Portfolio Case 3 M 7 10

Some: Behance S 9 9

Some: Pinterest S 9 9

Yhteydenottolomake S 6 9

SEO S 9 10

Koulutus S 8 9

Page 24: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Yksi

nker

tain

enM

onim

utka

inen

Pieni arvo KorkeaARVO ASIAKKAALLE

TOTE

UTU

S

Ominaisuus X

Ominaisuus Y

Ominaisuus Z

Page 25: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Ostajapersoonat

Page 26: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

“Asiantuntijat pitävättätä parhaana.”

“Vielä kaksi jäljellä”

“Ainahan tätämeillä on ostettu.”

“Meidän suosituinmalli.”

“Myyjä oli niin kiva.” “Tästä ilmaisnäyte,ole hyvä.”

Page 27: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

“Me ajetaan kaikki Harlikalla.”

“Me harrastetaan kaikki CrossFittiä.”

Page 28: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Body Level One Body Level Two

Verkkokaupan persoonat

Page 29: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

ALE

Shoppailijat

Tiedonhakijat

Säästäjät

Skeptikot

Page 30: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

ShoppailijatShoppailu on kivaa

Halu vastaanottaa sähköistä markkinointia

Huomioi:

• Ostohistoria, joustavat palautukset, eri noutotavat

Page 31: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

TiedonhakijatHakee arvosteluja ja käyttäjäkokemuksia

• Tietää tuotteesta enemmän kuin myyjä

Huomioi:

• Yksityiskohtaista tietoa ja kuvia, anna mahdollisuus arvostella tuote

Page 32: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

SäästäjätEtsii halvinta hintaa

• Tilaavat tarjousposteja, käyttävät hintavahteja

Huomioi:

• Monipuoliset hinnoittelumallit, alennuskupongit,ilmaiset postitukset/palautukset

ALE

Page 33: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

SkeptikotPelkäävät menettävänsä rahat ja identiteetin

• Sekava ostoprosessi ja mm. postikulut pelottavat

Huomioi:

• Korosta yksityisyyden suojaa, turvallista maksuaja ilmaista postitusta/palautusta

Page 34: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Verkkokaupan tekniikka?

Page 35: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Tekniikka kk-maksulla• Plussat: ‣ helppo ottaa käyttöön ja ylläpitää ‣ edullinen

• Miinukset ‣ merkittävästi jo tehdystä toiminnallisuudesta poikkeavat toteutukset lähes

mahdottomia

Page 36: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Avoimen lähdekoodin kauppa• Plussat: ‣ paljon vaihtoehtoja ‣ vain oma/tiimin osaaminen rajana

• Miinukset ‣ ilman todellista osaamista voit rikkoa tekniikan ‣ ylläpito vaatii paljon huomioitavaa teknisestä näkökulmasta

Page 37: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Vinkit

Page 38: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Hakukoneoptimointi• Käytä aikaa otsikkoon <title> • Mieti hyvä metakuvaus <meta description> • Älä kopioi tekstiä, huonontaa laatupisteitä • Hyvä sisältö palvelee käyttäjää ja hiljalleen parantaa

löydettävyyttä • Työkalut: Google Ads (avainsanatyökalu), Google Trends

Page 39: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

Hakusanamainonta• Jotta löytyisit hakutuloksista: jos joku etsii tuotetta,

joka sinulla on myynnissä, haluaisit varmaan saada kontaktin?

• Jos budjetti pieni, kannattanee tehdä itse

Page 40: Kotisivut ja verkkokauppa - LAB-ammattikorkeakoulu · • Tyyli ja käytettävyys säilyy samanlaisena koko sivustolla. Luettavuus • Helppoa kieltä • Hyvin kirjoitettua • Kieliopillisesti

SSL / https://• Ehdottomasti oltava! • Let’s Encrypt on maksuton: kysy web-hotellista • Analytiikka tarvitsee • Hakukone luottaa