tietotalo academy - käyttäjälähtöisen verkkopalvelun suunnittelu

Tietalo Academy webinaari 7.11.2013

Käyttäjälähtöisen verkkopalvelun suunnittelu

Tietotalo Academy

PalvelupolutInformaatioarkkitehtuur

iToiminnallinen verkkopalvelu

Antti Brunni 050 407 [email protected]

Jarno Malaprade 050 546 [email protected]

Esittely: Kimmo Alaraudanjoki045 107 [email protected]

3

PalvelupolkuKäyttäjä- ja toimintalähtöinen kuvaus palvelun vaiheista

verkkopalvelussa

4

Palvelupolku Verkkoympäristöön sovitettu

palvelumuotoilun menetelmä, joka tukee verkkopalvelun käyttäjälähtöistä suunnittelua.

Tietotalo on jalostanut menetelmän tukemaan verkkopalvelun suunnittelua ja analysointia.

Käyttäjän toiminta palvelussa keskeistä Influence Action Plan - Brian Solis, The Rise of Digital

Influence Report Where Clout Begins and Ends - Colleen Jones, Clout – The

art and science of the influential web content

Palvelupolun osat

Yleisöt Yleisön tarpeet ja

toiminta Kanavat Strategia Tavoitteet ja tarkoitus Puhuttelu ja arvon

tuottaminen Toimintakehote (call

to action) / Laukaisin Tulokset ja

mittaaminen

5

YleisötYleisön tarpeet ja toiminta

Kanavat PerusstrategiaTeematProfiilit

TavoitteetTarkoitus

Liiketoiminnan tarpeet

Puhuttelu ja Arvon tuottaminen

Call To ActionTriggeri

Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

6



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

7

Ylei

söt Kohderyhmä/ryhmät joille verkkopalvelu ja sen sisällöt on

erityisesti suunnattu

Palvelupolun määrittelyssä yleisö pitää pystyä yksilöimään

mahdollisimman tarkasti ja yksiselitteisesti

Yleisö on oikeita henkilöitä, joiden tulee olla olemassa ja

mahdollisuuksien mukaan jo tunnettuja (viestinnän kohde)

8



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

9

Ylei

sön

tarp

eet

ja to

imin

ta Yleisöllä on aina olemassa toiminnallinen tarve suhteessa

palveluun ja sen sisältöön.

”Lukee, kommentoi, seuraa, varaa, ostaa, seuraa, etsii tietoa…”

Käyttäjätutkimus tuottaa tietoa siitä millaisia tarpeita yleisöllä on.

Asiakasymmärrys = Oman roolin asiakkaan tarpeen toteutumisessa.

Miten käyttäjät tunnistetusti toimivat?Millaista toimintaa yleisölle sallitaan?

10



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

11

Kana

vat Kanavat määrittävät mihin kanaviin kyseisen kohderyhmän

palveluviestintä liittyy ja missä kanavissa sitä toteutetaan.

Kanavien määrittäminen tuo näkyväksi viestinnälliset ja

toiminnalliset tarpeet.

Kanavien tunnistaminen luo pohjan kanavahallinnan ja kohdennetun markkinoinnin toteuttamiselle.

12

Kanavien hyödyntäminen

Jones, Colleen (2010-12-03). Clout: The Art and Science of Influential Web Content

Eri formaattien soveltuvuus eri käyttötarkoituksiin ja kanaviin

13



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

14Stra

tegi

a ja

pä

ävie

sti

Polulle määritetty strategia määrittää millä toiminnoilla ja viestinnällisillä

sisällöillä käyttäjän palveluun liittyvään tarpeeseen vastataan.

Mitä on tärkein palvelu, jota käyttäjälle tällä polulla tarjotaan ja

mikä on kyseiselle polulle suunnattu pääviesti?

Mitä käyttäjä voi tehdä?

Tavoitellaanko yleisön laajuutta vai vuorovaikutuksen syvyyttä?

15



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

16Tavo

ittee

t ja

tark

oitu

s Liiketoiminnallisten tavoitteiden nimeämisessä on huomioitava

verkkoympäristön rooli suhteessa kokonaispalveluun.

Miten palveluun tulleesta käyttäjästä halutaan hyötyä ja mikä käyttäjän

toiminta verkossa tuottaa liiketoiminnalle/palveluviestinnälle

arvoa?

Mitä liiketoiminnallista tarkoitusta/haastetta tälle

palvelupolulle toteutettavat toiminnot palvelevat/ratkaisevat?

17



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

18

Puhu

ttelu

jaAr

von

tuot

tam

inen

Käyttäjän puhuttelemisessa käytetään kohderyhmään ja palvelun

tarkoitukseen soveltuvaa lähestymistapaa.

Miten juuri nämä käyttäjät vakuutetaan tästä asiasta?

Viestittävä asia vaikuttaa käytettävään taktiikkaan.

Mitä nopeaa hyötyä/arvoa asiakas voi saada palveluamme käyttäessä?

19

Väitteen artikulointi:• Blogikirjoitus • Media

artikkelu/toimituksellinen sisältö

• Asiantuntija-arvio Tuote- tai palvelukuvaus White paper/faktat/raportti Haastattelu

Artikulointi vs. todistaminen

Väitteen todistaminen• Kuvaajat, graafit ja datan

visualisoinnit Testimoniaalit ja case-

kuvaukset

Jones, Colleen (2010-12-03). Clout: The Art and Science of Influential Web Content (Voices That Matter) (p. 51). New Riders.

20

Puhuttelun tavat Korosta (framing)

• Käyttäjän huomion ohjaaminen• Teemat , Pääviestit

Väitä ja todista• Käytä todistusaineistoa

Muistuttaminen ja ohjeistaminen

Viestinnälliset metaforat• Vahvista olemassa olevia metaforia • Puhuttele metaforan mukaisesti• Tasapaino, Muodonmuutos, Matka, Sisällä-Ulkona,

Joukkoon kuuluminen, Resurssi, Hallinta

21



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

22Toim

inta

keho

teToimintakehote eli ”Call to Action” on

polulle määritetty toiminallinen päämäärä.

Toimintakehote on se yksittäinen toimenpide, joka käyttäjän toivotaan

tekevän palvelupolulla.

”Sähköpostilistalle liittyminen, Ajanvaraaminen, Ostoprosessin

vahvistaminen, Tiedoston lataus”

23



TavoitteetTarkoitus




Tulos / Mittaaminen

Etsii

Lukee

Osallistuu

Kommentoi

Seuraa

Ostaa

Hakee töihin

Hakee tietoa

www-sivusto

Facebook

Twitter

Laajuus

Syvyys

ATTITUDE ACTION

Tietoa hakevat

Kuluttaja-asiakkaat

Yritysasiakkaat

Kumppanit

Matkailijat

Tapahtumakävijät

Rahoittajat

Media

Majoittujat

24

Mitt

aritMittareiden nimeämisessä keskeistä

on perustaa ne verkkopalvelussa mitattavissa oleviin toimenpiteisiin.

Tuloksia on pystyttävä mittaamaan ja mittarit on pystyttävä ottamaan

käyttöön projektin aikana. Välillisten mittareiden osalta tulee muodostaa

baseline-tietoa.

”Sivujen jakaminen, analyytikan kriittisten mittareiden myönteinen

kehitys, uudet kommentit, lataukset, ajanvarausten määrän kasvu,

verkosta syntyvän liikevaihdon kehitys, konversioasteen kehitys”

25

Esimerkki palvelupolusta

26

Tutkintohakijan polku Kohderyhmä: Potentiaaliset hakijat ja heitä välillisesti auttavat, esim. opot,

vanhemmat, työkkärin neuvojatKanavat: Google-haku, Facebook, verkkomainonta, Studentum, OPH:n palvelut, sähköiset uutiskirjeet, a, muu suora mainonta, esitteet

Perusstrategia/pääviesti: Opetuksen sisältö, opetusmenetelmät, opetuksen kesto, opetustilojen esittely, koulutuksen erityisyys, työnimikkeet, työnkuvat, tutkimus-caset, opiskelufiilis kuvien, videoiden ja tarinoiden kautta.

Tavoitteet/tarkoitus: Verkkosivuilla pysyminen kasvaa, haussa ensisijaiseksi hakukohteeksi, hyvän ja tasokkaan fiiliksen kasvattaminen.

Arvon tuottaminen: Chat yhteys hakutoimistoon, Shoutbox, FAQ-sivu, FB-ryhmässä tietoa ja kisoja

Call to Action:1. amkhaku.fi-sivuille siirtyminen, 2. liittyminen some-ryhmiin, myös alojen omiin ryhmiin, 3. yhteydenotto joko Hakutoimistoon tai koulutusohjelmaan. Videon lataus/katsominen. Koulutushakumoduulin käyttö.

Mittarit: Sivun jakaminen, peukuttaminen, analytiikan tulosten myönteinen kehitys, amkhaku.fi sivulle siirtyneiden määrä, uudet FAQ-kysymykset, videolataukset

27

Chat Videolista Video Tarinat? Shoutbox FAQ-sivu FB-ryhmät Yhteydenotto-lomake Koulutushaku Jako ja tykkäyspainikkeet Uutiskirjeen tilaaminen Twitter Ilmoittautuminen koulutukseen Nopea kontakti Nostot Kuvapankki

Toiminnot

Opinnäytetyölista Harjoittelupaikan ilmottaminen Aiheen ilmoittaminen Kysymyspalvelu Julkaisujen tilaaminen Kommentointi Verkostojen luettelo Ilmoittautuminen tapahtumaan Ilmoittautuminen täykkiin RSS-tilaus I am here / I was here Yhteystietolista Yhteystietohaku Kartta / Karttahaku Palaute-lomake Blogi

28

Opetus- Sisältökuvaukset- Menetelmät- Kesto- Laatu- Tilat

Nimikkeet- Työnkuvat- Uratarinat

Tutkimus- Caset

Koulutushaku

Sisällöt: Tutkintokoulutus

Korostukset:- Fiilis- Tasokkuus- Erityisesti hakuaikana- Yhteydenotot

hakutoimistoon ja koulutusohjelmiin

- Reaaliaikaisuus- Näkyväksi tekeminen –

some- Ohjeistukset ja

helpottavat sisällöt

29

tiedon hallinta, luokittelu ja rikastaminenInformaatioarkkitehtuuri

Käyttäjäkokemus

30

informaatio-arkkitehtuuri

käytettävyys

sisältöstrategia

käyttöliittymä

palvelupolut

31

IA

Informaatioarkkitehtuuri kuvaa tiedon rakenteet, ryhmittelyt ja

mahdolliset metatiedot.

32

IA

Informaatioarkkitehtuuri kuvaa palvelukokonaisuuden rakenteen,

ryhmittelyt ja mahdolliset metatiedot

...jonka lisäksi se on myös olennainen osa verkkopalvelun

sisältösuunnittelussa ja visuaalisen käyttäjäkokemuksen

rakentamisessa

33

kanavat ja palvelut läpäisevä informaatioarkkitehtuuriKokonaisuuksien hallinta

Siiloutunut kokonaisuus

34

pääsivusto

sisältömarkkinointi Kampanjat

piensivustot

sosiaalinen media

Kumppani-

näkyvyys

blogit, artikkel

it

35

Verkottunut kokonaisuus

pääsivusto

sisältömarkkinointi

kampanja

sosiaalinen media

kumppaninäkyv

yys

blogit, artikke

lit

palvelupolutkonversiopolut

tagitsyötteet

integraatiotlinkitykset

sisällön pitkä häntä

36

Kanavat läpäisevät polut

SomeBlogit

SEO, SEMArtikkelit

Uutiset

Sisältömarkkinointi

ArtikkeliLaskeutumissiv

u

PalveluTuote

TarjoamaLisätiedot

KonversioTavoite

37

Umpikujien ehkäiseminen

PäänavigaatioNostotSisäinen hakuLaskeutumissivut

HakukonemarkkinointiHakukoneet

Sosiaalinen mediaSuora linkki (suositus)SisältömarkkinointiBlogitArtikkelitUutisointiMainoksetArviot

38

tiedon koostaminen, luokittelu, visualisointiPalvelun informaatioarkkitehtuuri

39

Rakenteen hahmottaminen

Lähde : *3

Uuden sivustorakenteen hahmottamiseen on parasta lähteä puhtaalta pöydältä. Seuraavassa muutamia huomioita sisältöjen uudelleenjärjestelyyn.

Olemassaolevan tuunaamiseen voit käyttää muunmuassa sisältöversoiden avulla A/B ja multivariaattitestauksen työkaluja. Rakenteen, otsikoiden ja sisällön painotuksien testaamiseen tämä sopii mainiosti.

40

Polut ja tiedon relaatiot

Lähde : *3

Mallinna ensin palvelupolkuihin tarvittavat tiedot käyttäjän ja liiketoiminnan tavoitteet huomioon ottaen. Huomioi erityisesti:

- Tukisisällöt- Mistä tullaan- Mihin siirrytään- Asiasanat ja tagit

41

Luo ja pura järjestystä

Lähde : *3

Polkujen kautta saadut sisältötarpeet on helpointa hahmottaa korttijärjestämisen keinoin.

Ryhmittele yhteenkuuluvat sisällöt/aiheet, räjäytä tarvittaessa työsi atomeiksi ja aloita alusta.

42

Visualisoi

Kuvaa aiheet, polut ja sisällöt!

A4 kuvastamaan sivua ja post-itit sisältöjä tai aiheita on ketterin tapa pyöritellä sisältöjä.

Älä yritä tehdä suoraan valmista rautalankaa tai vaan kuvaa tarvittavaa tietoa. Iteroi eli tee lyhyitä kierroksia useasti.

43

Lopuksi

Sisältö ei ole hallussasi – sitä jaetaan ja käytetään uudelleen jolloin sisällön rikastaminen luokitteluilla, metatiedolla ja asiasanoilla on elintärkeää. Se tukee tiedon uudelleenkäyttöä.

Toisinaan voit olla informaatioarkkitehti, toisinaan rakentaja. Innovatiivisuus tai dramaattinen uudistus ei aina ole mahdollinen tai tarpeellinen. Tärkein asia on löytää toimiva malli ja muistaa että paras IA on näkymätön ja intuitiviinen.

44

Tiedollisesta verkkopalvelusta toiminnalliseen.

45

Toiminnallisen voi ymmärtää vuorovaikutteisuudeksi tai pelillisyydeksi palvelussa.

46

”Jokainen haluaa inspiroida ja tulla inspiroiduksi.”

Yksisuuntainen informaatio

Vuorovaikutteinen toiminta

Yksisuuntainen informaatio

Vuorovaikutteinen toiminta

”Pelikentät” ovat jo olemassa. Ne pitää tunnistaa ja tunnustaa. On mahdollistettava, kanavoitava ja

osallistuttava.

49

Esimerkki: TuotekorttiSen lisäksi, että käyttäjät hakevat

tuotetietoja, haluavat he jakaa kokemuksiaan käytöstä ja olla mukana

kehittämässä tuotteesta yhä parempaa.

50

Esimerkki: TuotekorttiSen lisäksi, että käyttäjät hakevat

tuotetietoja, haluavat he jakaa kokemuksiaan käytöstä ja olla mukana

kehittämässä tuotteesta yhä parempaa.

Palvelu laajenee välttämättä klassisten rajojen ulkopuolelle.

52

Rautalankamalli vastaa kysymykseen palvelun konseptista tiedollisella ja toiminnallisella tasoilla. Mallinnus mahdollistaa ketterän visuaalisen

ideoinnin, rajaamisen ja suunnitellun testaamisen.

53

Rautalankamalli on vuorovaikutuksen väline.

54

Rautalankamallien tarkoitus on mahdollistaa nopea epäonnistuminen.

Ratkaisumallin havaitseminen epäonnistuneeksi on huomattavasti

kustannustehokkaampaa kuin lopullisen visuaalisen ilmeen

tekeminen uudelleen.

55

Tiivistä palvelun idea, nimeä liiketoimintatavoitteet, käyttäjien

tavoitteet, sisääntulopisteet, toimintatavoitteet (CTA)Idea

Miksi palvelu on niin erinomainen?

Liiketoiminnan tavoitteetToimintatavoitteet (CTA)

Käyttäjän tavoitteet

Saapumispisteet

56

Polut ja tiedon relaatiot

Lähde : *3

57

Lähtökohdista:Miksi käyttäjät tulevat palveluun,

minkälaisiin kysymyksiin he odottavat vastauksia?

58

Etusivu vastaa:Onko tämä luotettava paikka?

Saanko täältä tuotteen edullisemmin?Mihin ihmeeseen päädyin? Mikä tämä on?

Onko tämä palvelu todella niin hyvä?Miten saan teihin yhteyttä?

Haluan hankkia tämän nopeasti ja helposti. Hop!Tiedän mitä haluan. Onko teillä se?

Inspiroi minua. Kerro mitä muut tekevät.Olen palvelun käyttäjä ja tarvitsen apua. Heti!

Missä on viimeisin tieto ja osaaminen?

Palvelumuotoilu + Käyttäjäkokemus + Wireframet

UI suunnittelu, 5 iteraatiota

Ratkaisutoteutus

66

Näkökulma:Ongelmalähtöinen ratkaisusuunnittelu

näkökulma, missä yleistavoitteiden sijaan/lisäksi havainnoidaan

käyttötapoja ja suoria palautteita. Mitä ongelmia palvelun pitää ratkaista?

67

Yksi PDF linkitettynä sivuston neljännellä tasolla & ”jäätävä määrä” sivuston ulkoisia ja sisäisiä hakuja tähän liittyvillä

termeillä syksyisin ja keväisin.

Esimerkki: Rovaniemen joukkoliikenne:

68

Yksi PDF linkitettynä sivuston neljännellä tasolla & ”jäätävä määrä” sivuston ulkoisia ja sisäisiä hakuja tähän liittyvillä

termeillä syksyisin ja keväisin.

Tunnistettu tarve ja ajankohta, sopiva sisältö ja työkalu --> nosto esille.

Esimerkki: Rovaniemen joukkoliikenne

PalveluohjausKuntalaisten mitattuihin tai ennakoituihin tarpeisiin ja kuntalaisten

termein voidaan rakentaa kevyesti palvelusegmenttikohtaisia nostoja omille palvelusivuille ja nostaa ne kaupungin päänostoihin

palvelualan viestin kärjeksi. Samalla hallitaan palveluhakemiston rakennetta ja sivustohaun toimintaa avainsanoilla ja optimoidaan

orgaanista löydettävyyttä.

72

Verkkopalveluprojekti ei ole milloinkaan ollut IT-projekti, vaikka

niitä on tehty sellaisina. Toiminnallinen verkkopalvelu muuttaa vääjäämättä

organisoitumisen ja tekemisen tapoja. Kulttuurisiin haasteisiin myös

vastattava: mielikuvien ja totutun muuttaminen.

73

Palveluorganisaatio 1

Palvelu 1 Palvelu 2 Informaatio 1 Informaatio 2





Viestintäpalvelut Strateginen ohjaus Organisoituminen Työkalupakki Tuki

Rovaniemi.fi

Muut kanavat

74







Viestintäpalvelut Strateginen ohjaus Organisoituminen Työkalupakki Tuki

Rovaniemi.fi

Kärki 1 Kärki 2 ja 3

Kärki 3

Muut kanavat

76

”Ketkä pääsevät palkintopaikoille?”Laadukas, ajankohtainen ja hyödyllinen sisältö

TavoitteetKulttuuri/mielikuvatOrganisoituminenPalvelumuotoiluTyökalupakkiTeknologiset ratkaisutOm

an re

sept

i - ”o

nnist

umise

n AB

C”

79

Yhteenveto

Hajota huono.Tue toimivaa.

Muuta mielikuvat.Mittari on

menetelmä.

KiitosSeraava webinaari 28.11.

Ilmoittaudu nyt: http://www.tietotalo.fi/fi/Ajankohtaista/Tietotalo-Academy

Antti Brunni 050 407 [email protected]

Jarno Malaprade 050 546 [email protected]

Esittely: Kimmo Alaraudanjoki045 107 [email protected]

Ikonit ja symbolit:

from The Noun Projectwww.thenounproject.com

Windsurfing designed by Unknown Designer, Newspaper designed by Diego Naïve, Brazil 2012; Worker designed by Bart Laugs, Australia 2012; Site map by Sergey

Barkin, Russia 2012; Crash Test Dummy designed by Luis Prado, US 2012; Soccer Field Designed by Erik Wagner United States 2013;

Tennis Court Designed by Erik Wagner United States 2013; Bike Messenger Designed by Luis Prado United States 2013

Lähdeaineistoa:

Spencer, Donna - A Practical Guide to Information Architecture *1 poetpainter.com *2

journalofia.org *3Boxesandarrows.com*4

Usability.gov *5

tietotalo academy - käyttäjälähtöisen verkkopalvelun suunnittelu

Technology