perjantai 22. heinäkuuta 2016

Kohti parempia uutissisältöjä – PlusDeskin havaintoja

Meillä on PlusDeskissä tavoitteena kehittää omaa, mutta koko Yle Uutisten, kerrontaa suuntaan, joka houkuttelee enemmän ja uusia yleisöjä sisältöjemme pariin. Haluamme myös, että jutuissa vietetään enemmän aikaa. Yle Uutiset on siirtynyt sivulatausten mittauksesta sivuilla vietettävän kokonaisajan mittaukseen.

Olemme PlusDeskissä keränneet havaintoja, miten lukijoita voidaan sitouttaa sisältöihin. Kokoan tässä muutamia havaintojamme, joita olemme hiljaisena tietoa keränneet toimintamme aikan. Havainnot eivät ole itseisarvoja vaan esitystapa täytyy aina miettiä sisällön ehdoilla. On kuitenkin huomioitavaa, että samansuuntaisia huomiota tulee myös ulkomailta.

Älä piilota, tuo esille


Ensimmäinen havainto on, että sisältöä ei kannata piilottaa klikkauksen taakse. Sanotaan, että jos käyttäjän täytyy klikata sen täytyy tapahtua jotain todella poikkeuksellista. Internetissä käyttäjän näkökulmasta vierittäminen on halpaa, klikkaukset ovat kalliita.

Pitkissä jutuissa tämä näkyy niin, että teemme mieluummin juttuja joita vieritetään "Kauniista Pelistä Tuli Ruma Mafia – Kuinka Pomot Tahrasivat Jalkapallon" kuin juttuja, jotka on jaettu välilehdillä alisivuiksi "Venäjän varjo Walesin taivaalla – sota Ukrainassa sähköistää Naton huippukokouksen". Lukijan on vaivattomampaa selata juttua vierittämällä kuin klikata välilehtiä. On myös niin, että kun juttu jaetaan välilehtiin täytyy lukijan hoksata, että juttu jatkuu vielä ja että jossain on navigaatio. Usein kuitenkin rakennamme pitkiin juttuihin jonkinlaisen sisäisen navigaation tukeaksemme jutun rakennetta kuten Fifa-jutussa on tehty. Rakenne tukee lukijan ymmärrystä ja toimii siten sisällysluettelona.

Älä piilota tietoa sivutuksen taakse

Laskureissa ja lomakkeissa jos meillä on meillä on jokin tulos Riittääkö nettisi nopeus? – Katso miten mobiiliyhteys toimii kunnassasi" on hyvä näyttää heti jokin esimerkki. Mobiiliyhteysjutussa olisi voinut olla näkyvillä suoraan jonkin kaupungin tiedot. Tällöin lukijalle olisi heti syntynyt kuva siitä mitä tietoja lomakkeeseen tulee syöttää ja mitä tietoja hän saa "Katso Ylen homekoulukoneesta, onko teidän koulussanne ollut sisäilmaongelmia". On kuitenkin tärkeää, ettei lukijalle välity oletusvalinnasta sellaista mielikuvaa, etteikö tietoja voisi muuttaa.

Anna esimerkkinäkymä

Grafiikoiden osalta meille tulee usein pyyntöjä jos osan grafiikan tiedoista voisi laittaa klikkauksen taakse. Kartoissa tämä "tarve" korostuu. Halutaan esimerkiksi asettaa kartalle pisteitä, joita klikkaamalla kohteesta saisi lisää tietoa. Näissä tilanteissa pyrimme ohjeistamaan, että jos vain mitenkään on sisällöllisesti mahdollista laitettaisiin kaikki tiedot suoraan näkyviin eikä mitään piilotettaisi klikkauksen taakse. Jos tämä ei ole mahdollista pyrimme pohtimaan vielä jos grafiikan voisi jakaa useampaan osaan. Analytiikkamme kertoo hyvin yksiselitteisesti, että aina kun vaadimme lukijaa valitsemaan menetämme suuren osan yleisöistä. Se, että teemme valintoja sisällön suhteen ja näytämme vain oleellisimmat tiedot on journalistista valintaa, jota meidän toimituksena oletataan tekevän lukijan puolesta.

Älä jätä journalistista valintaa lukijalle

Interaktio ei toki ole kiellettyä. Toisissa jutuissa se on välttämätöntä ja olennaista "Paljonko lainaa, montako neliötä? Asuntokone kertoo, missä sinulla on varaa asua". Esimerkiksi kun dataa on paljon täytyy sen selaamiseen rakentaa jonkinlainen käyttöliittymä. Niiden rakentamisessakin kuitenkin valintojen määrä kannattaa pyrkiä minimoimaan ja pyrkiä tarjoamaan lukijalle mahdollisimman valmis kokonaisuus. Itse mukailen tällaisten datakäyttöliittymien suunnittelussa Shneidermanin mantraa:

"Quick overview, Details-on-demand"

Eli pyrimme antamaan lukijalle nopean kokonaiskuvan ja ymmärryksen asiasta. Asuntokoneessa tämä toteutuu kartan värityksellä, joka tukee ymmärrystä siitä millä alueilla asuntojen hinnat ovat korkeita. Jos lukija on kiinnostunut hänellä on mahdollisuus syventyä aineistoon tarkemmin muuttamalla kartan rajausta, tarkastelemalla yksittäisten alueiden hintoja ja vertaamalla alueiden hintoja suhteessa omaan palkkatasoonsa. Nämä lisävalinnat lisäävät ymmärrystä aiheesta, mutta pelkästä alkunäkymästä lukija saa esimerkiksi kuvan siitä, että pääkaupunkiseudulla asuntojen hinnat ovat ympäröiviä alueita korkeampia. Toinen hyvä käyttöliittymien suunnittelussa hyödynnettävä preiaate on KISS.

Kiinnitä huomiota jutun rakenteeseen


Toinen – etenkin pidempiin juttuihin liittyvä havainto – on, että kiinnitä huomiota jutun silmäiltävyyteen ja visuaaliseen asetteluun. Pelkkä hyvä teksti tuntuu lukijasta helposti raskaalta jos jutussa ei ole keventäviä visuaalisia elementtejä, kuten väliotsikoita, lainauksia, kuvia ja faktalaatikoita. Räätälöidyissä toteutuksissa visuaalisuus voidaan ottaa keskiöön "He valvovat rajojamme – tervetuloa työvuoroon itärajalle", mutta visuaalisista keveyttä on mahdollista tuoda myös perinteisemmin keinoin rakennettuihin juttuihin "Henkilökuva: Kemin katujen pikkukingi – kuinka Mika Ranta tuli perustaneeksi Soldiers of Odinin".

Lisää luettavuutta visuaalisilla elementeillä

Laskureiden ja koneiden osalta tämä rakenteen miettiminen näkyy niin, että pyrimme aina sijoittamaan ne jutun alkuun "Mikä on Suomen yleisin nimipäivä? Se selviää Ylen nimipäiväkoneesta". Näin otsikossa lukijalle tehty lupaus täyttyy mahdollisimman nopeasti eikä lukien tarvitse etsiä niin sanottua konetta jutusta. Jos lukija on kiinnostunut aiheesta hän lukee kyllä jutussa olevan leipätekstin. Poikkeuksena tähän ovat pitkät taulukot "Ministeriö julkaisi sote-laskelmia – Katso kotikuntasi tilanne", jotka sijoitamme usein lyhyen leipätekstin jatkoksi jutun loppuun.

Lunasta otsikossa tehty lupaus

Jutun rakenteessa mietimme usein myös milloin juttu kannattaa julkaista yhtenä kokonaisuutena ja milloin se taas kannattaa pilkkoa useammaksi artikkeliksi. Mitään kovin selkeää ohjetta tähän ei ole, mutta usein esimerkiksi datavetoisissa jutuissa kuten Asuntokoneessa julkaisimme niin sanotun featurejutun erillisessä artikkelissa "Kolmikymppiset ovat asuntomarkkinoiden häviäjiä – "Mistä nuoret löytävät rahat asuntoihin?"". Tämä on usein luontevaa, koska muuten yksittäisestä jutusta tulee sisällöllisesti erittäin runsas, mutta toisaalta myös tällä tavalla voimme tehdä jutuille omat erilliset sisältöjään kuvaavat otsikkonsa.

Eräs ohjenuora yhden vai useamman jutun ongelmaan voisi olla, että jos jutussa on useita uutisia ne kannattaa julkaista omilla vetävällä otsikoillaan ja rytmittää niiden julkaisu vuorokauden eri vaiheisiin. Jos taas juttu on yksi yhtenäinen kokonaisuus se kannattaa julkaista sellaisena eikä pakottaa lukijaa etsimään kokonaisuuksien osia eri jutuista.



Yritä aina asettua lukijan asemaan. Missä juttua luetaan, mistä laitteesta, mitä lukijan tarvitsee tietää ymmärtääkseen mistä on kyse, kenelle juttu on ylipäänsä tehty, mikä on kiinnostavaa. Luetuta juttusi muilla. Kysy mielipiteitä ihmisiltä, jotka eivät ajattele kuten sinä.


tiistai 19. heinäkuuta 2016

Yle Uutisten Plus-toteutuksien kehitys

PlusDesk on Yle Uutisissa toimiva tiimi, joka toteuttaa Yle Uutisten verkkosivuille niin sanottuja Plus-toteutuksia. Plus-toteutukset ovat uutisjuttuja, joita ei ole mahdollista toteuttaa julkaisujärjestelmässä. Toisinsanoen esimerkiksi interaktiiviset tai datajournalistiset toteutukset – kun ne vaativat jonkinlaista erityistä verkonkerrontaa – tehdään yhteistyössä PlusDeskin kanssa. Konkreettisesti tällaisia toteutuksia ovat olleet muun muassa:

PlusDesk on toiminut vuoden 2013 alusta eli nyt kolmen ja puolen vuoden ajan. Tänä aikana Plus-toteutuksien toteuttaminen ja julkaiseminen on kehittynyt monilla tavoin. Aloitimme julkaisemisen Ylen verkkolevyn nurkalta, josta on sittemmin luovuttu. Nyt olemme siirtymässä käyttämään AWS-palvelua ja projektikohtaisia Git-repositorioita.

Toteutusten kehitys


Tällä hetkellä PlusDeskissä työskentelee neljä kehitystyötä tekevää henkilöä. Käytössämme on niin Linux- kuin Mac-koneita. Meillä on kaikilla henkilökohtaiset kehitysympäristöt, jotka pyörivät lokaalisti. Kehitysympäristöjen ylläpito ja päivittäminen on pääasiassa käyttäjän vastuulla.

Kehitystyön kannalta olennaista on, että toteutuksia voidaan kehittää ja testata omilla laitteilla mahdollisimman pitkälle ja mahdollisimman vaivattomasti. Tämä helpottaa toteutusten julkaisemista, kun jo kehitysvaiheessa toteutukset testataan mahdollisimman autenttisessa ympäristössä. Eli rautalangasta väännettynä, kehittäjillä on omalla koneellaan kopio Yle Uutisten verkkosivuista, jossa he pystyvät testaamaan kehittämäänsä toteutusta ja näkemään miten toteutus toimii suhteessa muuhun sivustoon. (Kuva 1)

Lokaalisti toimiva kehitysympäristö helpottaa toteutusten testaamista. Kehitysympäristö on kuvankaappaus Yle Uutisten artikkelisivusta. (Kuva 1)

Toteutukset upotetaan suoraan Yle Uutisten sivupohjaan, joten kehittäjän on halutessaan mahdollista rikkoa (muuttaa) koko sivuston toimintaa. Pyrimme hallitsemaan tätä mahdollisuutta rajaamalla kaikki toteutukset koskemaan vain niitä elementtejä, jotka liittyvät itse toteutukseen. Tämä rajaaminen estää, etteivät koodit vaikuta mihinkään toteutuksen ulkopuolisiin elementteihin. Se, että toteutukset asetetaan suoraan sivupohjaan (esimerkiksi iFrame-upotuksen sijaan) kuitenkin mahdollistaa sen, että kehittäjän on helppoa manipuloida myös sivupohjaa niin halutessaan.

Toteutukset noudattavat tiedosto- ja kansiorakenteeltaan aina samaa muotoa, joka on kuvattu alla.

js/
data/
css/
img/
index.html

Näiden lisäksi projekteissa voi soveltuvasti olla mukana esimerkiksi audio, video tai script -nimisiä kansioita. Eri osa-alueet on siis jaettu omiin kansioihinsa. CSS-tyylitiedostot löytyvät omasta css/-kansiosta. Javascript-tiedostot eli toimintalogiikka löytyy js/-kansiosta ja niin edelleen. Käytämme toteutuksissa aina tätä samaa rakennetta, joka helpottaa projektien hallinnointia jälkikäteen ja eri kehittäjien kesken.

Koodauksessa pyrimme käyttämään apuna hyväksi havaittuja ja luotettuja kirjastoja kuten D3.js, jQuery ja Highcharts. Aina tarpeen mukaan käytämme projekteissa myös uusia kirjastoja, mutta näiden käytössä olemme tarkkoja, että ne toimivat varmasti kaikilla laitteilla. Soveltuvasti käytössämme on myös Three.js:n, Reactin ja Angular.js:n kaltaisia kirjastoja. Kirjastot tarjoillaan projekteille joko staattisina tiedostoina tai Node-moduuleina.

Javascriptissä käytämme niin ES5:sta kuin ES6:sta. CSS:ssä meillä on käytössä niin LESS kuin SASS. Nämä kehittäjästä ja projektista riippuen.

Yksinkertaiset projektit pyrimme pitämään mahdollisimman yksinkertaisina (KISS).

Alusta asti olemme käyttäneet Git-versionhallintaa. Versionhallinta mahdollistaa muun muassa koodien jakamisen kehittäjien kesken, mutta myös toteutusten versioinnin. Tähän päivään asti meillä on ollut jokaisen vuoden projekteja varten yksi repositorio, mutta nyt olemme siirtymässä käyttämään projektikohtaisia repositorioita. Projektikohtaiset repositoriot mahdollistavat ketterämmän versionhallinnan hyödyntämisen. Jatkossa nimeämme repositoriot seuraavasti:

"vvvv-kk-projektin_nimi"

Eli esimerkiksi 2016-06-asuntokone. Aikaisemmin kansiorakenne oli muotoa vvvv/kk-projektin_nimi. Meillä on komento, joka luo projektin perustamisen yhteydessä uuden repositorion (myös remoten).

Testaus


Testaamme toteutuksiamme vaihtelevasti, mutta etenkin uudet teknologiat isoimmat projektimme testaamme kattavasti eri laitteilla ja eri ympäristöissä. Tämä tarkoittaa, että kokeilemme toteutuksia puhelimilla, tableteilla, Mac- ja Windows-koneilla sekä eri selaimilla. Meillä on erikseen testaamiseen hankittuja laitteita.

Testaamiseen hyödynnämme Google Chrome DevTools:a, Xcode Simulator:a ja Ghostlab-ohjelmistoa.

Pyrimme siihen, että kaikki toteutuksemme toimivat teknisesti kaikilla nykyisillä laitteilla ja ympäristöillä.

Teemme myös käyttäjätestejä mahdollisuuksien mukaan.

Julkaistavan version buildaaminen


Olemme siirtymässä ja pääosin jo siirtyneet projektien "buildaamiseen". Buildaaminen tarkoittaa, että teemme Plus-toteutuksien koodeista erillisen julkaistavan version. Julkaistavat versiot asetetaan projekteissa public/-nimiseen kansioon, jonka alta löytyy käytännössä sama kansiorakenne kuin yllä kuvatulla kehityspuolella. Public-kansiossa asuvat vain tiedostot joita julkaistava versio tarvitsee.

Käytössämme on muutamia rinnakkaisia buildaustyökaluja, mutta useimmat meistä käyttävät työkalua nimeltä Gulp (olisi mahdollista käyttää myös Grunt:a. Olemme integroineet Gulp:n Sublime Gulp:lla Sublime Text -editoriin, jota käytämme koodin kirjoittamiseen (Kuva 2).

Gulp tarkkailee muutoksia tiedoissa ja suorittaa buildin. (Kuva 2)

HTML, CSS ja JS tiedostoille Gulp suorittaa omat tehtävänsä. Javascript-tiedostojen buildaus tekee seuraavat toiminnot (Suluissa ovat käytettyjen Node-moduulien nimet):

Lint tarkistaa koodin syntaksia, Browserify tekee koodeista selaimessa toimivia, Uglify minifoi koodin, Sourcemaps mahdollistaa minifoidun koodin palauttamisen, Livereload kertoo selaimelle tiedostojen muuttuneen.

CSS-tiedostoille buildi tekee toiminnot:

Less muuntaa Less-syntaksin selaimen ymmärtämään CSS-muotoon, Cleancss minifoi koodin, Sourcemaps mahdollistaa minifoidun koodin palauttamisen, Livereload kertoo selaimelle tiedostojen muuttuneen.

HTML-tiedostoille ajetaan:

Htmlmin minifoi koodin, Livereload kertoo selaimelle tiedostojen muuttuneen.

Gulp rakentaa buildin public/-kansioon, jonka sisältö siirretään julkaisua varten julkisen verkko-osoitteen taakse. Tulevaisuudessa tämä julkinen paikka on AWS:ssa. AWS on pilvipalvelu, jonka kautta voidaan jakaa helposti ja tehokkaasti staattisia tiedostoja. Aikaisemmin olemme käyttäneet Ylen omia verkkolevyjä minne tiedostot on siirretty käsin. AWS:n myötä tämä tiedostojen siirtäminen automatisoituu. Tässä suhteessa yhtenäistämme käytäntöjä Ylen sisäisesti.

Toteutuksen siirtäminen julkaisujärjestelmään


Julkaisujärjestelmämme on nimeltään Escenic. Esceniciä käytetään Yle Uutisten sisällön luomiseen ja tallentamiseen. Escenicistä tiedot haetaan rajapinnan (Yle API) avulla yle.fi/uutiset-sivustolle. Plus-toteutuksien osalta Esceniciin luodaan erillinen sisältötyyppi nimeltä "Ulkoinen sisältö". Ulkoiselle sisällölle määritellään kaikki resurssit, joita toteutus tarvitsee eli tämä tarkoittaa HTML, CSS ja JS-tiedostoja. (Kuva 3)

Asetamme julkaisujärjestelmäämme projektin tarvitsemat resurssit. Tässä esimerkiksi Asuntokoneen ulkoinen sisältö. CSS ja JS resursseja voi tarvittaessa olla useita. (Kuva 3)
Ulkoinen sisältö voidaan sitten liittää uutisartikkelissa mihin tahansa haluttuun paikkaan, jolloin HTML-sisältö liitetään haluttuun kohtaan. CSS- ja JS-tiedostot menevät niille varattuun paikkaan sivupohjassa. Aikaisemmin ulkoiset sisällöt oli mahdollista sijoittaa vain jutun alkuun tai loppuun.