Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus

Arto Paavola

Erikoisasiantuntija, Kela

28.8.2013

Kuka olen?

• Arto Paavola

• Suunnitellut ja toteuttanut verkkopalveluita vuosituhannen

alusta lähtien

• Kelan IT-osastolla 2009 –

• Front end –kehittäjä (HTML, CSS, JavaScript)

• Responsiivinen suunnittelu ja toteutus

• Saavutettavuus

2

Sisältö

• Uudistuksen sisältö ja rajaukset

• Miksi mobiiliin?

• Responsiivinen suunnittelu

• Kiinnitä huomiota

3

Sisältö

• Uudistuksen sisältö ja rajaukset

• Miksi mobiiliin?

• Responsiivinen suunnittelu

• Kiinnitä huomiota

4

Uudistuksen sisältö ja rajaukset

• Viestinnällisen sivuston uudistus

• Vuonna 2012 palvelussa 19 miljoonaa käyntiä

• Palvelee henkilöasiakkaita, työnantajia,

yhteistyökumppaneita, sidosryhmiä

• Lähes 7000 sivua, 1000 liitetiedostoa

• Suomi, ruotsi, englanti, suomenkielinen viittomakieli

5

Uudistuksen sisältö ja rajaukset

• Responsiivinen

käyttöliittymä

• Teknisen alustan

nopea vaihto

• Helpottaa asiointia

Kelan sivustolla

6

Uudistuksen sisältö ja rajaukset

• Uudistusprojektiin ei sisältynyt

• Tunnistautumista vaativat asiointipalvelut

• Erillissovelluksia (PDF-lomakepankki, palvelupisteen haku)

7

Miksi mobiiliin?

• Uudistuksen sisältö ja rajaukset

• Miksi mobiiliin?

• Responsiivinen suunnittelu

• Kiinnitä huomiota

8

Miksi mobiiliin?

• Käyntimäärät* mobiililaitteilla

• toukokuu 2011

− 1,1 % kaikista käynneistä

− 15 209 käyntiä

• toukokuu 2012

− 4,1 % kaikista käynneistä

− 62 299 käyntiä

• toukokuu 2013 (toukokuussa 2012 ennustin):

− 13 % kaikista käynneistä ??

− 200 000 käyntiä ??

* Google Analytics: Käynnit tarkoittavat kaikkien kävijöiden yksittäisten istuntojen määrää sivustossasi.

Miksi mobiiliin?

• Käyntimäärät* mobiililaitteilla

• toukokuu 2013 (toukokuussa 2012 ennustin):

− 13 % kaikista käynneistä ??

− 200 000 käyntiä ??

• toukokuu 2013 (toteutunut):

− 9,9 % kaikista käynneistä

− 173 335 käyntiä

• heinäkuu 2013 (toteutunut):

− 13,8 % kaikista käynneistä

− 249228 käyntiä

* Google Analytics: Käynnit tarkoittavat kaikkien kävijöiden yksittäisten istuntojen määrää sivustossasi.

Miksi mobiiliin?

11

Miksi mobiiliin?

• Perinteiset resoluutiot

• 1280 x 1024

• 1366 x 768

• 1440 x 900

• 1600 x 900

• 1920 x 1200

12

Miksi mobiiliin?

• ”Uudet” resoluutiot

• 320 x 480

• 768 x 1024

• 480 x 800

• 360 x 640

• 1280 x 800

• 800 x 1130

• 240 x 320

• 800 x 480

• 800 x 1003

• 800 x 1125

• 480 x 762

• 943 x 1332

• 800 x 358

• 540 x 960

• 943 x 1326

• 320 x 508

• 320 x 396

• 800 x 1200

• 1280 x 752

• 320 x 416

• 640 x 480

• 800 x 1333

• 943 x 1352

• 960 x 540

• 282 x 349

• 816 x 1023

• 943 x 1006

• 282 x 355

• 228 x 240

• 533 x 295

• 320 x 455

• 816 x 1156

• 240 x 301

• 816 x 1025

• 943 x 437

• 240 x 400

• 470 x 161

• 320 x 452

• 943 x 699

• …

13

Miksi mobiiliin?

• Vanhalla sivustolla keväällä 2012 yhden kuukauden

käynneissä yli 500 eri resoluutiota

• pelkästään mobiililaitteilla

14

Responsiivinen suunnittelu

• Uudistuksen sisältö ja rajaukset

• Miksi mobiiliin?

• Responsiivinen suunnittelu

• Kiinnitä huomiota

15

Responsiivinen suunnittelu

• Tarjoamme asiakkaillemme pääsyn samaan

sisältöön, joka on aseteltu käyttäjälle

mahdollisimman helposti luettavaksi ja

navigoitavaksi riippumatta siitä, millä

päätelaitteella tämä sivustolle saapuu

• => responsiivinen sivusto

16

Responsiivinen suunnittelu

• Visuaalinen ilme ja responsiivinen käyttöliittymä

• Projekti keväällä 2012

• Kumppanina Deasign

− Recommended Finlandin alihankkijana

• Ketterä menetelmä => nopea iterointi

• Mahdollisimman nopeasti protoilua selaimella

17

Responsiivinen suunnittelu

• Konsepti

• Visuaalisuus

• Prototyyppi

18

Responsiivinen suunnittelu

Konsepti • Suunniteltavaksi valittiin kolme eri näyttökokoa

analytiikkaan perustuen

− Desktop

− Tabletti

− Puhelin

19

Konsepti: Ohjaa käyttäjä nopeasti sisältöön

20

Konsepti:

Rautalankojen iterointi

21

Konsepti: Päänavigaatioksi valikoitui megamenu

22

Responsiivinen suunnittelu Toteutus

• Alun perin mobiilinavi omina elementteinään

23

Responsiivinen suunnittelu

Visuaalisuus • Typografia

• Hyvä luettavuus ja latausnopeus

• Moodboard

• Layoutit

24

Responsiivinen suunnittelu Visuaalisuus

25

Responsiivinen suunnittelu Visuaalisuus

26

Responsiivinen suunnittelu Visuaalisuus

27

Responsiivinen suunnittelu Visuaalisuus

28

Responsiivinen suunnittelu Visuaalisuus

29

Responsiivinen suunnittelu Visuaalisuus

• Photoshop hyvin kankea ja hidas työkalu

responsiiviseen suunnitteluun

• Mahdollisimman nopeasti selaimeen

30

Responsiivinen suunnittelu

Prototyyppi • Selaimessa näkee, miten asiat oikeasti toimivat

• Html, css & JavaScript

31

Responsiivinen suunnittelu Prototyyppi

Käytettävyystestaus

32

Responsiivinen suunnittelu

Toteutus • Goforen ja Kelan muodostama kehitystiimi

• Visuaalisen ilmeen suunnittelija mukana

toteutusvaiheessa n. 1 htp / 2 vko

• Beta-versio helmikuussa

• Tuotantoon huhtikuussa

• Ekstranetit kesäkuussa

33

Responsiivinen suunnittelu

Toteutus • Ole valmis kehittämään ”valmiita” asioita

• Ole valmis luopumaan tehdyistä ratkaisuista

• Testaa

34

Responsiivinen suunnittelu Toteutus

35

Responsiivinen suunnittelu Toteutus

36

Responsiivinen suunnittelu Toteutus

37

Kiinnitä huomiota

• Uudistuksen sisältö ja rajaukset

• Miksi mobiiliin?

• Responsiivinen suunnittelu

• Kiinnitä huomiota

38

Kiinnitä huomiota

1. Kosketusnäyttö

• Puhelimen pieni näyttö vaatii riittävän suuren

kosketusalueen linkeille ja painikkeille

• Kaikki näyttökoot tarvitsevat riittävän suuren

kosketusalueen linkeille ja painikkeille

• => suunnittele kaikki siten, että palvelua käytetään

kosketusnäytöllä

39

Kiinnitä huomiota 1. Kosketusnäyttö

40

Kiinnitä huomiota 1. Kosketusnäyttö

41

Kiinnitä huomiota 1. Kosketusnäyttö

42

Kiinnitä huomiota 1. Kosketusnäyttö

43

Kiinnitä huomiota

1. Kosketusnäyttö

2. Breakpointit

• Käyttöliittymäprojektin aikana valitut näyttökoot eivät

toimineet oikealla sisällöllä

• => Breakpointit muuttuivat toteutusprojektin aikana

• Valitse breakpointit sisällön perusteella

44

Kiinnitä huomiota 2. Breakpointit

45

Kiinnitä huomiota 2. Breakpointit

46

Kiinnitä huomiota

1. Kosketusnäyttö

2. Breakpointit

3. Informaatioarkkitehtuuri

• Ei ole olemassa nopeaa alustanvaihtoa

• Panosta sisältösuunnitteluun

47

Kiinnitä huomiota 3. Informaatioarkkitehtuuri

Navigaatiossa 7. tasoa

Tämä siis tuotannosta

Ja on muuten vieläkin

48

Kiinnitä huomiota

1. Kosketusnäyttö

2. Breakpointit

3. Informaatioarkkitehtuuri

4. Testaa oikealla sisällöllä

• Mahdollisimman aikaisessa vaiheessa

• Huomioi kieliversiot

49

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

50

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

51

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

52

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

53

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

54

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

55

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

56

Kiinnitä huomiota 4. Testaa oikealla sisällöllä

57

Kiinnitä huomiota

1. Kosketusnäyttö

2. Breakpointit

3. Informaatioarkkitehtuuri

4. Testaa oikealla sisällöllä

5. Testaa oikeilla laitteilla

• Case: Nokia E7

58

Yhteenveto

• Analysoi kävijätilastot

• Sisältösuunnittelu on tärkeää

• Suunnittele (ja päätä) selaimessa

• ”Design & Decide”

• Testaa oikealla sisällöllä

• Breakpointit sisällön mukaan

• Testaa oikeilla laitteilla

59

Kela.fi-sivuston tyyliopas

• Sisällöntuottajien, suunnittelijoiden ja kehittäjien

avuksi: Kelan verkkosivujen tyyliopas (http://www.kela.fi/web/tyyliopas)

60

Kiitos!

Kiitos mielenkiinnosta!

Twitter: @artopaavola

fi.linkedin.com/in/artopaavola/

61