← Back to front page

Seurakuntasivustojen visuaalisesta suunnittelusta

Rauhallinen vai vauhdikas?

Luotettava vai yllättävä?

Perinteikäs vai innovatiivinen?

Arvostettu vai lähestyttävä?

Osallistava vai tiedottava?

Visuaalinen suunnittelu alkoi eräässä workshopissa tällaisilla adjektiivien vastakkainasetteluilla, joita pienryhmät pohtivat keskenään ja yrittivät päästä yhteisymmärrykseen, miltä seurakunnan pitäisi tuntua ja mitä sen pitäisi viestiä seurakuntalaiselle. Pienryhmissä oli sekaisin eritaustaista väkeä: seurakuntien työntekijöitä, hankkeessa mukana olijoita ja ambientilaisia. Kun tuloksia tarkasteltiin jälkeenpäin, huomattiin että vaikka hajontaa mielipiteissä oli, kaikki olivat yhtä mieltä siitä, että lähdetään tekemään lähestyttävää, luotettavaa ja osallistavaa kokonaisuutta.

Seurakuntien verkkohanke on seurakuntien käynnistämä yhteishanke, jossa hankkeessa mukana olevat seurakunnat ja seurakuntayhtymät ylläpitävät yhtä järjestelmää. Lopputuloksena tuotetaan seurakuntien verkkopalveluita, jotka ovat yhdenmukaisia sisällöiltään ja sukulaisia ilmeeltään, kuitenkin säilyttäen seurakuntien paikallisuuden ja oman ilmeen. Hankkeen pilottivaiheessa toteutetaan Oulun seurakuntayhtymän ja Keravan seurakunnan verkkopalvelut. Seurakuntien yhteiseksi alustaksi on valittu Liferay Portal. Lisää hankkeesta voit lukea sakasti.evl.fi-palvelusta.

Oulun layoutin yläosa Keravan layoutin yläosa

Verkkopalvelun yläosat: Sama pohja, kaksi erilaista ilmettä ja tunnelmaa.

Oma ilme

Jokaiselle hankkeeseen liittyvälle seurakunnalle ei suunnitella erikseen ilmettä vaan hankkeen aikana luodaan vaihtoehtoisia pohjia, joista seurakunta voi valita lähinnä omaa identiteettiä olevan pohjan, johon sovittaa oman logonsa, kuvansa ja sisältönsä. Nämä valmiit pohjat perustuvat kirkon graafiseen ohjeistukseen, eli kirkkaisiin väreihin ja Martti-fonttiin typografian osalta. Graafisen ohjeen mukaisesti suositaan yhtä kirkasta väriä yhdessä palvelussa. Kirkasta väriä tukee yksi tukiväri, tummempi harmaan sävy, joka rauhoittaa palvelun ilmettä, ollen kuitenkin yhtä vahva kuin pääväri. Jos seurakunnalla tai yhtymällä on oma graafinen ohjeisto, värejä voi itse vaihtaa järjestelmässä vastaamaan ohjeistoa.

Oman logon sijoittamisen ja väripaletin valinnan jälkeen seurakunta voi valita palvelulle suuren pääkuvan, mikä tuo etusivulle paikallisen tunnistettavuuden. Isolla kuvalla on haasteensa, sillä kuvan tulisi olla paikallinen, mutta korkeatasoinen. Lisäksi kuvan sommittelussa ylläpitäjän täytyy käyttää omaa silmää, sillä kuva jää joidenkin käyttöliittymäelementtien alle, jolloin kuvan fokus on sijoitettava näkyvään osaan. Kuvien valitsemista varten liitetään ohjeistus ylläpitäjän työtä helpottamaan. Lisäksi ylläpitäjät voivat käyttää kirkon kuvapankkia apuna kuvien etsimiseen.

Kun ilmeen perusta on suunniteltu, siitä tehdään nopea ohjeisto, jonka pohjalta voidaan tyylitellä käyttöliittymäelementtejä ilmeen perustan mukaan. Ilmeen perustaan on suunniteltu yleinen tyyli, mikä muodostuu käytettävistä fonteista, väreistä, palstakoista ja marginaaleista.

Oranssi paletti Keravan paletti

Esimerkki ohjeistosta: väripaletit

Suunnittelun flow – ominaisuus kerrallaan

Verkkopalvelujen toteutus ei tapahdu perinteiseen vesiputousmalliin valmiista konseptoinnista toteutukseen ja ohjelmointiin, vaan suunnittelu etenee toteutuksen mukana parin viikon sprinteissä ominaisuus kerrallaan. Tehtävät määritellään työlistalle, josta asiakkaan product owner valitsee seuraavassa sprintissä tehtävät asiat. Suunnittelun on oltava mieluusti pari askelta edellä toteutusta, jotta kaikille riittää jatkuvasti tekemistä. Tämä asettaa haasteita suunnittelutiimille; kokonaisuus on suunniteltava jonkinlaiselle tasolle menemättä liiaksi yksityiskohtiin. Pohdintaa suunnittelun flowsta Tuulin blogikirjoituksessa.

Suunnittelua nopeuttaa se, että jokaista näkymää ei piirretä kuvina, vaan ilme rakentuu elementti kerrallaan. Ambientian AD:na vastaan visuaalisuudesta, mutta tukenani on muita UX-ammattilaisia, jotka tarkastelevat ilmettä omien työtehtäviensä pohjalta. Tuuli Aalto-Nyyssönen vetää hankkeen konseptointia ja ottaa kantaa visuun käytettävyyden kannalta. Laura Savolainen rakentaa sivustoa html:ksi ja määrittelee palvelun css-tyylit. Laura ottaa kantaa ilmeeseen mm. responsiivisuuden, eli sivuston skaalautuvuuden kannalta. Esimerkkinä tällaisesta käyttöliittymäelementistä voisi olla pikakyselymoduuli. Ensin moduulin käyttöliittymä suunnitellaan, sitten siihen luodaan ilme ja lopuksi viedään järjestelmään. Jokainen suunniteltu käyttöliittymäelementti kulkee siis kolmen UX-ammattilaisen läpi Ambientialla, ennenkuin se siirtyy sovelluskehittäjille. Ei pidä myöskään unohtaa asiakkaan, eli Kirkkohallituksen puolelta Titti Kalliota, joka testaa käyttöliittymiä ja niiden yksittäisiä elementtejä testiryhmillä tarpeen mukaan.

Pikakysely

Esimerkki visualisoidusta käyttöliittymäelementistä.

Avoimesti esillä

Hanke on ollut yleisölle avoin ja siten myös konseptointivaihe. Hankkeen Facebook-ryhmä kutsuu asiasta kiinnostuneita yhteisöksi ideoimaan ja kommentoimaan. Samalla yhteisö levittää sanomaa hankkeesta ja sitoutuu siihen. Hankkeen edistymistä voi seurata myös Kirkonkellon sivuilla. Facebook-ryhmässä on tiedotettu sprintien kuluessa väliraportteja, benchmarkkailtu, kysytty mielipiteitä käyttöliittymistä, on järjestetty nimikilpailua ja myös kommentoitu visuaalisia leiskoja.

Visuaalisten leiskojen suhteen pelkäsin ristiriitaisia kommentteja, jotka eivät auta projektin etenemistä. Keskustelua syntyi etenkin väreistä, kuvista ja sisällön määrästä etusivulla. Vaikka ristiriitaisia kommentteja tulikin, se ei hidastanut työtämme vaan pikemminkin vahvisti käsityksiämme siitä, että olemme menossa oikeaan suuntaan. Jotkin asiat on hyvä käsitellä suuremmalla testiporukalla, ennenkuin koodia aletaan kirjoittamaan. Lisäksi ymmärsin, että jotta suunnitelmat toimisivat halutulla tavalla lopputuotteina, ne tarvitsevat yhteisön tuen ja hyväksynnän.

Kaksi muistettavaa asiaa:

  • Visuaalinen suunnittelu ei ole yhden ihmisen luomistyötä vaan nivoutuu kiinteästi palvelun käytettävyyteen, responsiivisuuteen ja sisältöön, eli palvelun käyttökokemukseen.
  • Palvelua ei suunnitella pelkästään loppukäyttäjille, vaan myös sisällön ylläpitäjille ja työntekijöille ja hankkeessa toimijoille.

Leave a Reply

  • (will not be published)

Time limit is exhausted. Please reload CAPTCHA.

Please, leave us a message and we'll contact you.
You can also contact our Service Desk by phone +358 290 010 500 or email servicedesk@ambientia.fi.