Käyttäjälähtöisen verkkopalvelun suunnittelu Menetelmiä ja välineitä

Käyttäjälähtöisen verkkopalvelun suunnittelu Menetelmiä ja välineitä

Tietotalo Academy Käyttäjäkokemus Käyttäjätutkimus Arviointi ja analysointi 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

Käyttäjälähtöinen suunnittelu 3

Käyttäjälähtöinen suunnittelu Tutkimus Analyysi Toimenpiteet Seuranta 4

Käyttäjälähtöinen suunnittelu Palvelun kehittäminen Palvelurajapinta Asiakkaan palvelupolku Kontaktipisteet Palvelumallit Palvelumuotoilu Service Design (SD) Käyttäjäkokemus User Experience (UX) Tuotekehitys Käytettävyystestaus Käyttäjätutkimus Emootiot Vuorovaikutteisuus Informaatioarkkitehtuuri 5

Käyttäjäkokemus 6

Käyttäjäkokemus on niiden ilmiöiden ja vaikutusten kokonaisuus, jotka käyttäjä kokekee siinä vuorovaikutuksessa ja käyttöyhteydessä, jossa käyttää järjestelmää, laitetta, tuottetta tai palvelua - sisältäen käytettävyyden, käyttöhyödyt ja tunnevaikutukset vuorovaikutuksen aikana ja palauttaessaan mieleen muiston vuorovaikutuksen jälkeen. Käyttäjäkokemus Hartson, Rex; Pyla, Pardha S. (2012-01-25). The UX Book: Process and Guidelines for Ensuring a Quality User Experience 7

Käyttäjäkokemus on niiden ilmiöiden ja vaikutusten kokonaisuus, jotka käyttäjä kokekee siinä vuorovaikutuksessa ja käyttöyhteydessä, jossa käyttää järjestelmää, laitetta, tuottetta tai palvelua - sisältäen käytettävyyden, käyttöhyödyt ja tunnevaikutukset vuorovaikutuksen aikana ja palauttaessaan mieleen muiston vuorovaikutuksen jälkeen. Käyttäjäkokemus Hartson, Rex; Pyla, Pardha S. (2012-01-25). The UX Book: Process and Guidelines for Ensuring a Quality User Experience 8

Käyttäjälle vuorovaikutustilanteessa syntyvä vaikutelma /elämys, joka kattaa käyttöliittymän, käytettävyyden ja syntyvät tunnevaikutukset Käyttäjäkokemus Käytännönläheinen ja asiakaslähtöinen suunnittelunäkökulma tuotteen kehittämiseen 9

Mikä on meistä siistiä ja mitä asiakas haluaa nähdä Kill your darlings! 10

Suunnittelun teesit Käyttäjäymmärrys Millainen on nykyinen palvelun käytön kokemus asiakkaillemme? Mistä he pitävät? Mikä heitä turhauttaa ja mitkä ovat kipupisteet? Mitä voimme oppia kilpailijoiltamme? Miten käyttäjiä on aiemmin ilahdutettu vastaavan palvelun tai tarjonnan parissa? Miten? Miksi? Hyvät suunnittelun teesit 1. Pohjautuu käyttäjätietoihin 2. Lyhyet ja muistettavat 3. Ottaa riittävän laajasti tarpeet huomioon 4. Oman näköiset ja tukevat erottumista 5. Mitattavat Brändi Mitkä ovat brändiarvomme? Miten haluamme niiden toteutuvan käyttökokemuksessa? Mitkä ovat vahvuutemme ja kykymme erottumisessa? 11

Tuottajan näkökulma Tuotteen ominaisuudet - Sisältö - Esitystapa - Toiminnot - Vuorovaikutus Tarkoitettu tuotteen luonne - Tarkoituksenmukai suus - Miellyttävyys Seuraukset - Vetovoima - Nautinto - Mielihyvä Käyttäjän näkökulma Tuotteen ominaisuudet - Sisältö - Esitystapa - Toiminnot - Vuorovaikutus Tarkoitettu tuotteen luonne - Tarkoituksenmukai suus - Miellyttävyys Tilanne Seuraukset - Vetovoima - Nautinto - Mielihyvä - Hassenzahl Model: Funology: From Usability to Enjoyment - Hassenzahl M. (2011) User Experience and Experience Design 12

Käyttäjäkokemuksen ulottuvuudet Käytettävä Usable Käyttökelpoinen Useful Haluttava Desirable - Käytettävyys / tarkoituksen mukaisuus - Miellyttävyys Löydettävä Findable Arvokas Valuable Saavutettava Accessible Luotettava Credible Peter Morville: Facets of User Experience 13

UX suunnittelu Menetelmä Ohjeet Koordinaatio Visuaalinen suunnittelu Tiedon visualisointi Arkkitehtuuri Sisällön tuotanto Animaatiot Sisältöteksti Copy Järjestelmän vasteet Toiminnot Virheilmoitukset Tiedon rakenne Rakenne Navigointi Esitettävät tiedot 14

Mitä hyötyä tuottaa? Käyttäjälähtöisen suunnittelun liiketoimintahyödyt UX tutkimus tuottaa tietoa omista asiakkaista Vaikuttaa käyttötilanteessa asiakkaan muodostamaan mielikuvaan palvelusta Auttaa määrittämään mitkä ongelmat ovat akuutteja ja suuria, mistä taas saatavissa nopeita voittoja, jne. Mahdollistaa käyttäjän roolin uudelleen määrittämisen suhteessa palveluun käyttäjät jotka eivät koe tarkoitusta ja arvoa lähtevät Käyttökokemuksen merkitys pitkäaikaisessa asiakassuhteessa korostunut Kehittämisestä saatava hyöty on mitattavissa 15

Milloin pitäisi panostaa? Laajat palvelut Käyttäjille tuodaan arvoa palvelevuuden kautta Uudet palvelut Erottuminen ja oman kohderyhmän löytäminen markkinassa Palvelut joissa suuri käyttäjämäärä Laaja käyttäjämäärä tarkoittaa entistä laajempaa joukkoa erilaisia käyttäjiä, jolloin kokemus vaatii hallintaa Palvelut joissa paljon kilpailua ja joissa erottuminen tärkeää Erottuminen käyttäjäkokemuksen kautta tuo kilpailuetua Jatkuva kehittäminen Käyttäjäkokemuksella voidaan tuoda kestävyyttä useissa kehityssykleissä tehtävään työhön 16

Käyttäjätutkimus Käyttäjien tarpeiden ja toiminnan selvittäminen 17

Käyttäjän ääni Parempi ymmärrys verkkopalvelun käyttäjäkokemuksesta ja palvelun merkityksestä ja toimivuudesta. 18

Käyttäjän ymmärtäminen Motivaatiot Tarpeet Tavoitteet Käyttötavat Puhuttelu Ryhmät ja segmentit Käyttäytyminen

Menetelmät Suora kontakti Fokusryhmä Haastattelu Päiväkirja Tehtäväanalyysi Muu seuranta Korttijärjestäminen Epäsuora kontakti Kysely Analytiikka Asiakaspalaute Help desk Asiakaspalvelu Lähde : *1 Raportoitu Havainnoitu 12

Menetelmät Suora kontakti Fokusryhmä Haastattelu Päiväkirja Tehtäväanalyysi Muu seuranta Korttijärjestäminen Epäsuora kontakti Kysely Analytiikka Asiakaspalaute Help desk Asiakaspalvelu Raportoitu Havainnoitu 21

Haastattelut Keskustelu suoraan käyttäjän kanssa Motivaatiot Tarpeet Tavoitteet Konteksti Ongelmat Kommentit Kehitysajatukset Vahvuudet - vuorovaikutteinen - aihe ja sisältö täysin vapaa - syvällinen ymmärrys Huomioitavaa - rohkea vuorovaikutus - vaatii aikaa ja suunnittelua - mahdollisuus toteuttaa samalla muita tehtäviä työpajamuotoisesti 22

Kyselyt Verkkokysely (Webpropol, etc.) Kokemukset Tilastointitarpeet Ongelmat Kehitysajatukset Kommentit Vahvuudet - laaja yleisö - suuri otanta mahdollinen pienehköllä panostuksella Huomioitavaa - avoimet kysymykset (kerro miksi) - suljetut kysymykset (valitse sopivin) - tilastollinen vs. laadullinen analyysi - vastausten analysointi vie aikaa ja vaatii pureskelua 23

Tehtäväanalyysi Käyttökokemuksen toimivuuden arvioimiseen tärkeissä tehtävissä Ostaminen Rekisteröityminen Ilmoittautuminen Päätehtävät (vrt. Twitter -> twiittaus) Palvelupolun/kokemuksen analyysi Vahvuudet - kipupisteiden selkeä paljastuminen - käyttäjän näkökulma läpinäkyväksi - konkreettiset kehitystarpeet - syvällinen ymmärrys Huomioitavaa - eri käyttäjäprofiilit (kokeneet, uudet, jne) - huomioiden taustat selvitykseen - mittaaminen (silmien liikkeen seuranta, suoritusaika) 24

Korttijärjestäminen Rakenteiden, hierarkioiden ja kategorioiden mieltämisen ymmärrykseen Pääotsikot Navigaatiot Aiheet Kategoriat Vahvuudet - mahdollistaa havainnot siitä miten käyttäjät jäsentävät tietoa tai osaalueita Huomioitavaa - avoimet/suljetut kysymykset - kvantitatiivinen vs. kvalitatiivinen analyysi - vastausten analysointi vie aikaa ja vaatii pureskelua 25

Analytiikka Kokonaisnäkymän muodostukseen Tilastollinen näkymä ja siitä muodostettu analyysi Statistiikka Ongelmakohdat Räätälöidyt mittarit Profiilit ja segmentointimahdollisuudet Mainonnan analytiikka Kanavatilastot ja raportit Hakusanat* Vahvuudet - Kokonaistilastointi - Selvitettävien asioiden kerääminen Huomioitavaa - raportoinnin ja analyysin ero - syiden selvittäminen haastavaa 26

Soveltuvuuden arviointi Menetelmä Käyttäjän ymmärtäminen Sisältö ja rakenne Haastattelu Kyllä Kyllä Kyllä Kyselyt Kyllä Kyllä Kyllä Käyttäjäkokemus Tehtäväanalyysi Kyllä Ei Kyllä Korttijärjestäminen Kyllä Kyllä Ei Analytiikka Ei Kyllä Ei Hyvä sopivuus

Näkemyksen muodostaminen Osaksi kokonaisvaltaista analyysia Tärkeimmät kommentit Selkeimmät ongelmakohdat Mikä toimii? Mikä ei toimi? Mitä tulisi kehittää? Millaisia toimenpiteitä vaaditaan? Huomioitavaa - Tiedon määrä - Vaadittava aika - Resurssit 28

Arviointi ja analyysi Verkkopalvelun rakenteen ja toimintojen arviointi 29

Ylös, ulos ja analysoimaan Huomioita kontekstuaalisesta analyysistä 30

Ylös, ulos ja analysoimaan Kontekstuaalinen analyysi Jalkaudutaan asiakkaan arkeen, missä tuotteita käytetään. Usein hyödyllinen kun tuotteita käytetään tai haluttaisiin käyttää useissa eri tilanteissa tai tarkoituksissa, joita ei voi helposti ennustaa. Missä tuotetta tai palvelua käytetään ja miten, mitä haasteita käyttäjät kohtaavat? Miten esim. responsiivinen ratkaisu tai mobiilisovellus toimii käyttötilanteissa (kadulla, ajoneuvoissa, lenkkeillessä ) 31

Paikkatietoon perustuva palvelu Erilaiset laitteet ja käyttötavat Käyttäjät ja odotukset Käyttötilanteet 32

Vertaisarviointi Huomioita verrokkiarvioinnista 33

Vertailun toteuttaminen Toteuta heti UX-projektin alussa samaan aikaan kun tehdään muita analyysejä. Analysointitehtäviin mukaan henkilöitä palveluketjun varrelta. Asiantuntijapohjaisen analyysit yleisiä, + Niissä ei välttämättä löydetä aina liiketoiminnan ja strategian kannalta kaikkein olennaisia asioita. Yhdistelmä suositeltava. Kohteina keskeiset kilpailijat, mutta myös rinnakkaisten toimialojen ja muiden relevanttien toimialojen ratkaisut (heikot signaalit, ideointi ). 34

Ennakointi ja edelläkävijyys Näkökulmat Palvelussa voisi toimia (mahdollisuudet) Ennakoidaan suunnittelussa Suunnittelun perusta Palvelussa toimii (vahvuudet) Toistetaan ja jalostetaan Palvelussa ei toimi (heikkoudet) Ei näin 35

Uutta palvelua kehitettäessä A B C Mahdollisuuksia Mitä nykypalveluissa tehdään hyvin, mikä voisi hyödyttää omaa palveluamme? Puutteita Mitä nykypalveluissa tehdään huonosti tai ei ollenkaan? Mihin nykypalvelut eivät vastaa / pysty? Uuden palvelun keskeiset liiketoiminta-tavoitteet nostavat arvioinnin kontekstiin. Mitä käyttäjäryhmiä voi tunnistaa ja miten niitä puhutellaan? Toimiiko? Tiedon keräilijät, vertailijat, osallistujat, ostajat? Miten rekisteröityminen tapahtuu? Miten maksutapahtumat on toteutettu? 36

Vanhaa palvelua kehitettäessä Hyvä toteuttaa säännönmukaisesti. Oman palvelun vahvuuksien ja heikkouksien selvittämisen suhteessa muihin. Pikavoittojen (quick wins) löytäminen vs. laajemmat muutostarpeet. Hyvien ideoiden löytäminen ja jalostaminen. Selkeiden puutekohtien korjaaminen. Oman palvelun yksi tai useampi tuote/palvelu mukaan arviointiin. Tilannetta nyt ja sitten, miten onnistuttiin. 37

Arvioinnin suunnittelu Paljonko arviointiin panostetaan ajallisesti ja rahallisesti? Projekteissa yleisesti 1-2 päivän allokaatiolla. Aika ja raha rajaavat arvioinnin laajuutta ja syvyyttä. Mitä ydinasioita halutaan selvittää? Sisältö, löydettävyys, valitut osiot, palvelut tai toiminnot Vaikuttaa vertailun toteutustapaan ja raportointiin. Raportointitapa Esim. kuvankaappaukset auttavat seuraavissa kehitysvaiheissa. Millä hakutermeillä palvelu nousee hakutuloksiin? Visuaalinen ilme ja ajanmukaisuus. Asiointitavat ja yhteydenoton helppous. Tarjousten esitystapa, selkeys ja hinnoittelu. Palvelujen kategorisointi ja löydettävyys. Tuote-esittelyjen laatu, laajuus ja esitystavat. Tilausprosessin sujuvuus ja toimituksen seuranta. Rekisteröinti / asiakastietojen kerääminen. Palvelun yleiset heikkoudet ja vahvuudet. Mitä asiakasryhmiä on tunnistettavissa ja miten niitä puhutellaan? Miten haku ja filtterit toimivat? Yleisarvio. 38

39

40

Day Two, 10am Start a shopping blitz at Stockmann (11) (Aleksanterinkatu 52; stockmann.com; 00358 9 1211). The fifth floor is a riot of Moomins and Angry Birds along with Aalto chairs in steamed birch ( 1,800/ 1,500), Iitala glassware and Arabia fine ceramics. The Aalto-designed Academic Bookstore caters to a nation of voracious readers. 41

Missä käyttäjämme kulkevat? Huomioita analytiikkaan 42

Mikä analytiikka? Yleinen web-analytiikka Hakusana-analytiikka A/B- ja muu variointistatistiikka Branditutkimukset ym. Myynnin analytiikka Muiden palvelukanavien käyttötilastot Käyttäjäprofilointi Mitä paremmin relevantit tietolähteet voi yhdistää lähtötilanteessa, sitä paremmin tavoitteet ja menetelmät niihin pääsemiseksi on hahmotettavissa. 43

Analytiikka - onnistumisen mittaaminen Analytiikka on yksi sisällön ja rakenteen suunnittelun ja onnistumisen mittaamisen väline. Web-analytiikka on asetettava mittaamaan oikeita asioita mahdollisimman varhaisessa vaiheessa Perusmittaus usein kunnossa, mutta esim. ecommerceseurantaa ei usein asetettu käyttöön tai se ei mittaa oikein. Mitataanko CTA-pisteitä: Lomakkeiden lähetykset, pääelementtien klikkaukset, esitteiden lataukset On hyvä konsultoida analytiikkapalvelua tarjoavaa tahoa hyvissä ajoin ennen projektin aloittamista, mikäli sille on tarve. Projekti saavuttaa paremmat tulokset kun analytiikka mittaa liiketoiminnan kannalta olennaisia asioita. 44

Analytiikka - olennaisia seikkoja Eri lähteet: Mistä sivustolle tullaan ja mitä laitteita käytetään? Mitkä konversiot? Miten käyttäjät kulkevat palvelussa? Mitä käyttäjät tavoittelevat? Tätä voi valistuneesti arvailla web-analytiikan osalta, varman tiedon saa kysymällä. Analytiikka voi parhaimmillaan auttaa kyselytutkimuksen laadinnassa. Missä kohdin käyttäjät poistuvat sivulta? Vaikuttavatko poistumiseen saapumisreitit tai käytetyt laitteet? Onko eri laitteita käyttävien toiminnassa eroja? Nousevatko oikeat sisällöt hakutuloksiin (sisäinen/ulkoinen) halutuilla ja käyttäjien hyödyntämillä termeillä? Ym. moninaisia tapauskohtaisia tilanteita. 45

Not Provided Google ilmoitti lokakuussa 2011 muuntavansa haut salatuiksi tietyin ehdoin, jolloin käytetyt hakutermit eivät enää välity kohdesivustolle. Nämä tulokset näytetään ryhmänä Not Provided. Syy tälle on yksityisyys. vaikka toisaalta AdWord-asiakkaat pääsevät hyödyntämään AdWords-mainonnan hakutermistöä normaalisti. 46

Not Provided Google teki syyskuussa 2013 kaikista hauista suojattuja. Spekulaatiota: Google julkaisee uuden maksullisen palvelun Analytics-palveluun, jossa pääsy hakutermistöön. Yritykset siirtyvät käyttämään AdWordsia laajemmin erityisesti testatakseen uusien hakusanaalueiden / markkina-alueiden toimintaa. SEO-optimointi siirtyy hakusanapainotteisuudesta kohti kokonaisvaltaisuutta - sisällöllinen laatu merkitsee enemmän. 47

Miten palvelussa kuljetaan? Esimerkki: Hakukoneesta saapuvat käyttäjät tulevat InfoWeb-sivulle, josta siirtyvät 1. toteutuksiin, 2. ajankohtaisiin, 3. muihin tuotteisiin ja 3. yhteystietoihin. Puolet käyttäjistä poistuvat palvelusta. Vastaako odotuksia? Mitä käyttäjä odottaa saavansa siirtyessään sivulle ja miten se lunastetaan? Miten haluamme käyttäjän kulkevan? Miten käyttäjää puhutellaan ja kannustetaan jatkamaan? Mitä pitää muuttaa? 48

49

Viestimme kärjet Huomioita tiedon rakenteesta 50

Tiedon rakennetta suunniteltaessa Konversio A Sisältövaatimusten (lue: liiketoimintatarpeiden) koostaminen Mitä palvelu tarjoaa? Mikä on suuri idea tai konsepti? Käyttäjäryhmien motivaation ja tarpeiden ymmärtäminen Keskeisten käyttäjäpolkujen suunnittelu Sisältösuunnittelu Informaatiomallien suunnittelu (sivutyyppit, sivujen tiedollinen ja toiminnallinen rakenne) Navigaatioiden toiminnan ja yleisrakenteen suunnittelu Haun suunnittelu (saavutettavuus, toiminnot ja hakujoukot, ryhmittely) Lähde A Lähde B 51

Sisältöanalyysi Rajaa tapauskohtaisesti Täysimittainen sisällön inventaari Pohjana usein skriptillä haettu sivuston täysi kuva koko sisällöstä. Osainventaari Liiketoiminnan / palvelun tavoitteiden keskeinen osa-alue Otos Muodostetaan tarpeen mukaan. Esim. tietty tuotekategoria tai nimetyt tuotekortit. 52

Sisältöanalyysi Analyysi tärkeä rajata aina niin, että se vastaa projektin kannalta olennaisiin kysymyksiin. 53

Aloita verkkopalvelun suunnittelu tiedollisesta ja tavoitteellisesta ytimestä - keskity vasta tämän jälkeen palvelun yleiseen teemoitteluun, tehtävämallinnukseen ja navigaatioon. 54

Tiedon rakenne Miksi verkkopalveluista ei löydy mitään helpolla? Käyttäjälähtöinen rakenne- ja sisältösuunnittelu? Ajattelevatko käyttäjät samalla tavalla esim. kuntapalvelusta kuin kunnan asiantuntijapalvelua tarjoavat työntekijät? Tiedolliset ja rakenteelliset tavoitteet, pakotteet ja pääviestit. Tiedon ryhmittely: Aakkostus, sijainti, ajankohta, kategoria, hierarkiaryhmittely, avaintermit Päätekijöiden hahmottamisen jälkeen voi avata palvelun kunkin osan/sivun merkitystä tarkemmin sisältötyökalulla, jonka pohjalta voi piirtää tarkennetun rakenne- ja sisältökuvauksen. 55

Käyttäjän tavoitteet: Sivun nimi: Pääsisältö / -toiminnot: Liiketoiminnan tavoitteet: Mistä tähän sisältöön saavutaan: Käyttäjää aktivoivat avainsanat: Tukisisältö: - Kuten esitteet, videot, ulkoiset lähteet jne. Sisällön/palvelun ydin elementit Mihin tästä sisällöstä siirrytään: Toimintakohdat (CTA)

Yhteenveto näkemys / toimenpiteet / priorisointi / toimeksi 58

Näkemys Käyttäjätutkimuksen, analyysien ja arviointien koostaminen dokumentoiduiksi palvelukehityksen toimenpiteiksi 59

Päätavoitteet Havainnoidaan toistuvat epäkohdat ja kehitystarpeet Tunnistetaan käyttäytymismallit ja profiloivat tekijät Muodostetaan kehitystavoitteet ja tehtävät Priorisoidaan toteutettavat tehtävät Jalkautetaan tehtävät jatkuvaan toimintaan tai projektiin

Käytännön toimenpiteet A/B- ja multivariaattitestaus Palvelupolkujen tai sisältöalueiden uudistukset Rakenteen uudistus Konversiopolkujen toiminnallinen kehitys Visuaalinen uudistus Sivuston uudistus

Priorisointi Laaja rakenteellinen tai toiminnallinen muutos Arvo ja haastavuus Laaja sisältömuutos Nopea voitto Vaadittava kehitysaika ja työ

Toimeksi Jäsennä isommat muutostarpeet yhtenäiseksi kokonaisuudeksi ja projektoi tavoitteet konseptoinnin, visuaalisen suunnittelun ja toteutuksen kautta tuotantoon Muodosta palvelun kehityspolku jossa nopeat voitot viedään läpi osana palvelukehitystä ja isommat muutokset huomioidaan läpivientiä vaativina projekteina

Lopuksi Aloita nyt ja aloita itsestäsi! 64

Kiitos 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: Route designed by Carlos Valério Portugal 2013; Argument designed by Adam Mullin United States 2013; Forest designed by Nicholas Burroughs United States 2012; Computer designed by Edward Boatman United States 2010; Map designed by Deadtype 2012; Tablet Designed by Luis Prado United States2012; People designed by Gina Rafaella Furnari 2013; Accouncement designed by Oliver Guin 2012; Construction by Laurent Patain, France 2010; Project by Kevin Laity, Canada 2013; Crosshair by Diego Naïve, Brazill 2011; Eiffel Tower designed by Thibault Geffroy France 2011; Windsurfing designed by Unknown Designer The Noun Project www.thenounproject.com

Lähdeaineistoa: Spencer, Donna - A Practical Guide to Information Architecture *1 Chudley, James; Allen, Jesmond - Smashing UX Design *2 Halvorson, Kristina; Ranch, Melissa - Concent Strategy for the Web, 2nd ed. *3 Usability.gov*4 Hartson, Rex; Pyla, Pardha S. - The UX Book *5 Uxdesign.smashingmagazine.com *6