Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013

1. Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus Arto Paavola Erikoisasiantuntija, Kela 28.8.2013

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

3. Sisältö • Uudistuksen sisältö ja rajaukset • Miksi mobiiliin? • Responsiivinen suunnittelu • Kiinnitä huomiota 3

4. Sisältö • Uudistuksen sisältö ja rajaukset • Miksi mobiiliin? • Responsiivinen suunnittelu • Kiinnitä huomiota 4

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

6. Uudistuksen sisältö ja rajaukset • Responsiivinen käyttöliittymä • Teknisen alustan nopea vaihto • Helpottaa asiointia Kelan sivustolla 6

7. Uudistuksen sisältö ja rajaukset • Uudistusprojektiin ei sisältynyt • Tunnistautumista vaativat asiointipalvelut • Erillissovelluksia (PDF-lomakepankki, palvelupisteen haku) 7

8. Miksi mobiiliin? • Uudistuksen sisältö ja rajaukset • Miksi mobiiliin? • Responsiivinen suunnittelu • Kiinnitä huomiota 8

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

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

11. Miksi mobiiliin? 11

12. Miksi mobiiliin? • Perinteiset resoluutiot • 1280 x 1024 • 1366 x 768 • 1440 x 900 • 1600 x 900 • 1920 x 1200 12

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

14. Miksi mobiiliin? • Vanhalla sivustolla keväällä 2012 yhden kuukauden käynneissä yli 500 eri resoluutiota • pelkästään mobiililaitteilla 14

15. Responsiivinen suunnittelu • Uudistuksen sisältö ja rajaukset • Miksi mobiiliin? • Responsiivinen suunnittelu • Kiinnitä huomiota 15

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

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

18. Responsiivinen suunnittelu • Konsepti • Visuaalisuus • Prototyyppi 18

19. Responsiivinen suunnittelu Konsepti • Suunniteltavaksi valittiin kolme eri näyttökokoa analytiikkaan perustuen − Desktop − Tabletti − Puhelin 19

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

21. Konsepti: Rautalankojen iterointi 21

22. Konsepti: Päänavigaatioksi valikoitui megamenu 22

23. Responsiivinen suunnittelu Toteutus • Alun perin mobiilinavi omina elementteinään 23

24. Responsiivinen suunnittelu Visuaalisuus • Typografia • Hyvä luettavuus ja latausnopeus • Moodboard • Layoutit 24

25. Responsiivinen suunnittelu Visuaalisuus 25

30. Responsiivinen suunnittelu Visuaalisuus • Photoshop hyvin kankea ja hidas työkalu responsiiviseen suunnitteluun • Mahdollisimman nopeasti selaimeen 30

31. Responsiivinen suunnittelu Prototyyppi • Selaimessa näkee, miten asiat oikeasti toimivat • Html, css & JavaScript 31

32. Responsiivinen suunnittelu Prototyyppi Käytettävyystestaus 32

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

34. Responsiivinen suunnittelu Toteutus • Ole valmis kehittämään ”valmiita” asioita • Ole valmis luopumaan tehdyistä ratkaisuista • Testaa 34

35. Responsiivinen suunnittelu Toteutus 35

38. Kiinnitä huomiota • Uudistuksen sisältö ja rajaukset • Miksi mobiiliin? • Responsiivinen suunnittelu • Kiinnitä huomiota 38

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

40. Kiinnitä huomiota 1. Kosketusnäyttö 40

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

45. Kiinnitä huomiota 2. Breakpointit 45

46. Kiinnitä huomiota 2. Breakpointit 46

47. Kiinnitä huomiota 1. Kosketusnäyttö 2. Breakpointit 3. Informaatioarkkitehtuuri • Ei ole olemassa nopeaa alustanvaihtoa • Panosta sisältösuunnitteluun 47

48. Kiinnitä huomiota 3. Informaatioarkkitehtuuri Navigaatiossa 7. tasoa Tämä siis tuotannosta Ja on muuten vieläkin 48

49. Kiinnitä huomiota 1. Kosketusnäyttö 2. Breakpointit 3. Informaatioarkkitehtuuri 4. Testaa oikealla sisällöllä • Mahdollisimman aikaisessa vaiheessa • Huomioi kieliversiot 49

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

58. Kiinnitä huomiota 1. Kosketusnäyttö 2. Breakpointit 3. Informaatioarkkitehtuuri 4. Testaa oikealla sisällöllä 5. Testaa oikeilla laitteilla • Case: Nokia E7 58

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

60. Kela.fi-sivuston tyyliopas • Sisällöntuottajien, suunnittelijoiden ja kehittäjien avuksi: Kelan verkkosivujen tyyliopas (http://www.kela.fi/web/tyyliopas) 60

61. Kiitos! Kiitos mielenkiinnosta! Twitter: @artopaavola fi.linkedin.com/in/artopaavola/ 61

Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013

Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013

Recommandé

Contenu connexe

Similaire à Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013

Similaire à Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013(20)

Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013