Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013
•
1 like•792 views
Esitykseni Kelan verkkopalvelun responsiivisesta suunnittelusta ja toteutuksesta (PowerPointista tallennettu PDF-versio) Viestintäviraston järjestämässä koulutus- ja keskustelutilaisuudessa 28.8.2013. Tilaisuuden osallistujat olivat Liikenne- ja viestintäministeriön hallinnonalan verkkoviestijöitä.
Recommended
More Related Content
Similar to Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013
Similar to Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto 28.8.2013 (20)
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.
- 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
- 23. Responsiivinen suunnittelu Toteutus • Alun perin mobiilinavi omina elementteinään 23
- 24. Responsiivinen suunnittelu Visuaalisuus • Typografia • Hyvä luettavuus ja latausnopeus • Moodboard • Layoutit 24
- 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
- 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
- 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
- 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
- 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
- 51. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 51
- 52. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 52
- 53. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 53
- 54. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 54
- 55. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 55
- 56. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 56
- 57. Kiinnitä huomiota 4. Testaa oikealla sisällöllä 57
- 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