Käyttäjälähtöisen verkkopalvelun suunnittelu Tietalo Academy webinaari 7.11.2013

Tietotalo Academy Palvelupolut Informaatioarkkitehtuuri Toiminnallinen verkkopalvelu Esittely: Antti Brunni 050 407 2766 antti.brunni@tietotalo.fi Kimmo Alaraudanjoki 045 107 4499 kimmo.alaraudanjoki@tietotalo.fi Jarno Malaprade 050 546 1110 jarno.malaprade@tietotalo.fi

Palvelupolku Käyttäjä- ja toimintalähtöinen kuvaus palvelun vaiheista verkkopalvelussa 3

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 4

Yleisöt Tietoa hakevat Kuluttajaasiakkaat Yritysasiakkaat Kumppanit Matkailijat Tapahtumakävijät Rahoittajat Media Majoittujat Yleisön tarpeet ja toiminta Etsii Osallistuu Seuraa Hakee tietoa Lukee Kommentoi Hakee töihin Ostaa Kanavat www-sivusto Facebook Twitter Perusstrategia Teemat Profiilit Laajuus Syvyys Tavoitteet Tarkoitus Liiketoiminnan tarpeet Puhuttelu ja Arvon tuottaminen Tulos / Mittaaminen Call To Action Triggeri ATTITUDE ACTION 5

Yleisö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) 7

Yleisön tarpeet ja toiminta 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? 9

Kanavat 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. 11

Kanavien hyödyntäminen Eri formaattien soveltuvuus eri käyttötarkoituksiin ja kanaviin Jones, Colleen (2010-12-03). Clout: The Art and Science of Influential Web Content 12

Strategia ja pääviesti 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ä? 14

Tavoitteet ja tarkoitus 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? 16

Puhuttelu ja Arvon tuottaminen 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ä? 18

Artikulointi vs. todistaminen Väitteen artikulointi: Blogikirjoitus Media artikkelu/toimituksellinen sisältö Asiantuntija-arvio Tuote- tai palvelukuvaus White paper/faktat/raportti Haastattelu 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. 19

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 20

Toimintakehote Toimintakehote 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 22

Mittarit Mittareiden 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 24

Esimerkki palvelupolusta 25

Tutkintohakijan polku Kohderyhmä: Potentiaaliset hakijat ja heitä välillisesti auttavat, esim. opot, vanhemmat, työkkärin neuvojat Kanavat: 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 26

Toiminnot 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 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 27

Sisällöt: Tutkintokoulutus Opetus - Sisältökuvaukset - Menetelmät - Kesto - Laatu - Tilat Nimikkeet - Työnkuvat - Uratarinat Tutkimus - Caset Koulutushaku Korostukset: - Fiilis - Tasokkuus - Erityisesti hakuaikana - Yhteydenotot hakutoimistoon ja koulutusohjelmiin - Reaaliaikaisuus - Näkyväksi tekeminen some - Ohjeistukset ja helpottavat sisällöt 28

Informaatioarkkitehtuuri tiedon hallinta, luokittelu ja rikastaminen 29

Käyttäjäkokemus sisältöstrategia käytettävyys palvelupolut käyttöliittymä informaatioarkkitehtuuri 30

IA Informaatioarkkitehtuuri kuvaa tiedon rakenteet, ryhmittelyt ja mahdolliset metatiedot. 31

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 32

Kokonaisuuksien hallinta kanavat ja palvelut läpäisevä informaatioarkkitehtuuri 33

Siiloutunut kokonaisuus blogit, artikkelit pääsivusto Kumppaninäkyvyys sisältömarkkinointi Kampanjat piensivustot sosiaalinen media 34

Verkottunut kokonaisuus palvelupolut konversiopolut blogit, artikkelit sisältömarkkinointi kampanja pääsivusto kumppani näkyvyys tagit syötteet integraatiot linkitykset sisällön pitkä häntä sosiaalinen media 35

Kanavat läpäisevät polut Some Blogit SEO, SEM Artikkelit Uutiset Sisältömarkkinointi Artikkeli Laskeutumissivu Palvelu Tuote Tarjoama Lisätiedot Konversio Tavoite 36

Umpikujien ehkäiseminen Päänavigaatio Nostot Sisäinen haku Laskeutumissivut Hakukonemarkkinointi Hakukoneet Sosiaalinen media Suora linkki (suositus) Sisältömarkkinointi Blogit Artikkelit Uutisointi Mainokset Arviot 37

Palvelun informaatioarkkitehtuuri tiedon koostaminen, luokittelu, visualisointi 38

Rakenteen hahmottaminen 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. Lähde : *3 39

Polut ja tiedon relaatiot 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 Lähde : *3 40

Luo ja pura järjestystä 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. Lähde : *3 41

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

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

Tiedollisesta verkkopalvelusta toiminnalliseen. 44

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

Jokainen haluaa inspiroida ja tulla inspiroiduksi. 46

Yksisuuntainen informaatio Vuorovaikutteinen toiminta

Yksisuuntainen informaatio Vuorovaikutteinen toiminta Pelikentät ovat jo olemassa. Ne pitää tunnistaa ja tunnustaa. On mahdollistettava, kanavoitava ja osallistuttava.

Esimerkki: Tuotekortti Sen 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. 49

Esimerkki: Tuotekortti Sen 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. 50

Rautalankamalli vastaa kysymykseen palvelun konseptista tiedollisella ja toiminnallisella tasoilla. Mallinnus mahdollistaa ketterän visuaalisen ideoinnin, rajaamisen ja suunnitellun testaamisen. 52

Rautalankamalli on vuorovaikutuksen väline. 53

Rautalankamallien tarkoitus on mahdollistaa nopea epäonnistuminen. Ratkaisumallin havaitseminen epäonnistuneeksi on huomattavasti kustannustehokkaampaa kuin lopullisen visuaalisen ilmeen tekeminen uudelleen. 54

Tiivistä palvelun idea, nimeä liiketoimintatavoitteet, käyttäjien tavoitteet, sisääntulopisteet, toimintatavoitteet (CTA) Idea Miksi palvelu on niin erinomainen? Käyttäjän tavoitteet Saapumispisteet Liiketoiminnan tavoitteet Toimintatavoitteet (CTA) 55

Polut ja tiedon relaatiot Lähde : *3 56

Lähtökohdista: Miksi käyttäjät tulevat palveluun, minkälaisiin kysymyksiin he odottavat vastauksia? 57

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? 58

Palvelumuotoilu + Käyttäjäkokemus + Wireframet

UI suunnittelu, 5 iteraatiota

Ratkaisutoteutus

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? 66

Esimerkki: Rovaniemen joukkoliikenne: 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. 67

Esimerkki: Rovaniemen joukkoliikenne 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. 68

Palveluohjaus Kuntalaisten 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ä.

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

Rovaniemi.fi Muut kanavat Viestintäpalvelut Strateginen ohjaus Organisoituminen Työkalupakki Tuki Palveluorganisaatio 1 Palvelu 1 Palvelu 2 Informaatio 1 Informaatio 2 Palveluorganisaatio 2 Palvelu 3 Palvelu 4 Informaatio 3 Informaatio 4 Palveluorganisaatio 3 Palvelu 5 Palvelu 6 Informaatio 5 Informaatio 6 73

Rovaniemi.fi Muut kanavat Viestintäpalvelut Strateginen ohjaus Organisoituminen Työkalupakki Tuki Kärki 1 Kärki 2 ja 3 Kärki 3 Palveluorganisaatio 1 Palvelu 1 Palvelu 2 Informaatio 1 Informaatio 2 Palveluorganisaatio 2 Palvelu 3 Palvelu 4 Informaatio 3 Informaatio 4 Palveluorganisaatio 3 Palvelu 5 Palvelu 6 Informaatio 5 Informaatio 6 74

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

Oman resepti - onnistumisen ABC Tavoitteet Kulttuuri/mielikuvat Organisoituminen Palvelumuotoilu Työkalupakki Teknologiset ratkaisut

Yhteenveto 79

Hajota huono. Tue toimivaa. Muuta mielikuvat. Mittari on menetelmä.

Kiitos Seraava webinaari 28.11. Ilmoittaudu nyt: http://www.tietotalo.fi/fi/ajankohtaista/tietotalo-academy Esittely: Antti Brunni 050 407 2766 antti.brunni@tietotalo.fi Jarno Malaprade 050 546 1110 jarno.malaprade@tietotalo.fi Kimmo Alaraudanjoki 045 107 4499 kimmo.alaraudanjoki@tietotalo.fi

Ikonit ja symbolit: 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; Create Database Designed by Ilsur Aptukov Russian Federation 2013 from The Noun Project www.thenounproject.com

Lähdeaineistoa: Spencer, Donna - A Practical Guide to Information Architecture *1 poetpainter.com *2 journalofia.org *3 Boxesandarrows.com*4 Usability.gov *5