Miten uutiskirje tulee suunnittella

Uutiskirjeeseen mahtuu helposti tapahtumia, uutisia, palveluita ja ajankohtaisia nostoja. Sisällöntuottajalle jokainen niistä voi olla tärkeä. Lukijalle samanarvoisten nostojen pitkä jono tekee kuitenkin valinnasta vaikean. Suunnittelijan tehtävänä on antaa sisällöille selkeä suhde: mikä ansaitsee huomion ensimmäisenä, mikä täydentää pääviestiä ja mikä palvelee vain osaa vastaanottajista?

Mitä visuaalinen hierarkia tarkoittaa uutiskirjeessä?

Visuaalinen hierarkia tarkoittaa tapaa, jolla ulkoasu ilmaisee sisältöjen tärkeysjärjestyksen. Suuri otsikko, erottuva kuva ja selkeästi rajattu sisältöalue keräävät huomiota. Pienempi tekstinosto ja hillitty linkki viestivät kevyemmästä painotuksesta.

Hierarkia toimii, kun lukija ymmärtää jo silmäilemällä, mitä kirje tarjoaa. Hän löytää kiinnostavan aiheen otsikosta, saa lyhyestä tekstistä riittävän perustelun ja tunnistaa linkistä tai painikkeesta, mitä seuraavaksi tapahtuu. Jokaisen elementin ei tarvitse erottua yhtä voimakkaasti.

Aloita uutiskirjeen tavoitteen ja pääviestin määrittelystä

Ennen värien tai kuvien valintaa kannattaa vastata kahteen kysymykseen: kenelle kirje lähetetään ja mitä vastaanottajan toivotaan tekevän sen luettuaan? Tapahtumakutsun, jäsenkirjeen ja asiantuntijakoosteen rakenteet voivat olla erilaiset, vaikka ne käyttäisivät samaa visuaalista ilmettä.

Jos tavoitteena on tapahtumaan ilmoittautuminen, tapahtuman hyöty, ajankohta ja ilmoittautumislinkki kuuluvat rakenteen alkuun. Jos kirje kokoaa alan ajankohtaisia aiheita, tärkeintä voi olla selkeästi otsikoitu sisältövalikoima. Yhtä päätoimintoa ei tarvitse pakottaa jokaiseen uutiskirjeeseen, mutta sisältöjen painotukset on silti ratkaistava.

Myös sähköpostin aiherivin ja esikatselutekstin tulee vastata kirjeen sisältöä. Kun postilaatikossa annettu lupaus jatkuu kirjeen ensimmäisessä nostossa, lukija pääsee suoraan asiaan.

Typografia tekee sisällöstä silmäiltävää

Uutiskirjeen typografiassa ratkaisevat fonttivalinnan lisäksi tekstin koko, riviväli, rivipituus ja otsikkotasojen väliset erot. Pääotsikon, sisältönoston otsikon ja leipätekstin tulee erottua toisistaan johdonmukaisesti. Jos jokainen otsikko on yhtä suuri ja lihavoitu, ulkoasu ei auta lukijaa tunnistamaan painotuksia.

Hyvä otsikko kertoo sisällön aiheen tai hyödyn. ”Ajankohtaista” tarvitsee rinnalleen tarkemman lupauksen, kuten ”Kolme muutosta, jotka vaikuttavat syksyn koulutussuunnitteluun”. Lyhyt ingressi täydentää otsikkoa ja antaa syyn avata koko sisältö.

Leipätekstin kooksi voi ottaa suunnittelun lähtökohdaksi noin 16 pikseliä, mutta toimivuus pitää arvioida käytetyn fontin ja todellisen mobiilinäkymän avulla. Brändifontin rinnalle tarvitaan sopiva varafontti, sillä sähköpostiohjelmien tuki fonteille vaihtelee. Taiton tulee kestää myös fontin vaihtuminen.

Tilankäyttö yhdistää ja erottaa sisältöjä

Tyhjä tila auttaa lukijaa hahmottamaan, mitkä elementit kuuluvat yhteen. Otsikon, esittelytekstin ja painikkeen välinen etäisyys voi olla pienempi kuin kahden erillisen sisältönoston väli. Näin rakenteen logiikka välittyy ilman jatkuvaa kehystämistä tai uusia taustavärejä.

Toistuva rytmi tekee pitkästäkin kirjeestä hallittavamman. Kun toissijaiset nostot käyttävät samaa rakennetta, lukijan ei tarvitse opetella jokaisen kohdalla uutta esitystapaa. Pääviesti voi puolestaan saada enemmän tilaa ja vahvemman visuaalisen painotuksen.

Värit ja kuvat tukevat viestin painotuksia

Brändivärien käytölle kannattaa määritellä roolit. Yksi väri voi toimia tärkeimmän toimintakehotuksen korostuksena, toinen sisältöalueen taustana ja neutraalit sävyt tekstin sekä rakenteen tukena. Jos sama voimakas korostus toistuu kaikissa nostoissa, sen kyky ilmaista tärkeysjärjestystä heikkenee.

Kuvan tulee auttaa ymmärtämään aihetta tai vahvistaa sen tunnelmaa. Jokainen uutinen ei tarvitse kuvaa, ja pienissä nostoissa teksti voi toimia paremmin. Erityisesti mobiilissa suuri aloituskuva voi siirtää varsinaisen viestin kauas kirjeen alusta.

Olennainen sisältö kannattaa toteuttaa tekstinä, eikä sijoittaa sitä pelkästään kuvaan. Kirjeen pääviestin ja toimintakehotusten tulee olla ymmärrettävissä myös silloin, kun kuvat eivät lataudu. Sisältöä välittävälle kuvalle kirjoitetaan tarkoitusta kuvaava vaihtoehtoinen teksti; pelkästään koristeellisen kuvan vaihtoehtoinen teksti jätetään tyhjäksi.

Toimintakehotus kertoo, mitä lukija saa

Toimintakehotus eli CTA ohjaa lukijan seuraavaan vaiheeseen. ”Tutustu koulutuksen ohjelmaan” tai ”Ilmoittaudu webinaariin” kertoo määränpäästä enemmän kuin yleinen ”Klikkaa tästä”. Myös artikkelilinkin kannattaa nimetä aihe, etenkin jos kirjeessä on useita luettavia sisältöjä.

Päätoimintoa voi korostaa painikkeella ja täydentäviä linkkejä esittää hillitymmin. Painikkeen koko, kontrasti ja ympäröivä tila vaikuttavat sekä sen havaittavuuteen että käytettävyyteen. Toteutuksessa kannattaa suosia tekstipohjaista painiketta, jonka toiminta ei riipu kuvan latautumisesta.

Esimerkki: tapahtumakutsu ja kolme ajankohtaista nostoa

Kuvitellaan järjestön uutiskirje, jossa kerrotaan tulevasta webinaarista, kahdesta asiantuntija-artikkelista ja uudesta jäsenpalvelusta. Jos kaikki neljä sisältöä saavat saman kokoisen kuvan, otsikon ja painikkeen, lukija joutuu päättelemään niiden tärkeysjärjestyksen itse.

Kun kirjeen päätavoitteena on webinaarin osallistujien saaminen, rakenne voidaan suunnitella näin:

Päänosto: webinaarin hyötyä kuvaava otsikko, lyhyt esittely, ajankohta ja selkeä ilmoittautumispainike.
Asiantuntija-artikkelit: kaksi kevyempää nostoa, joissa on kuvaavat otsikot, lyhyet esittelyt ja artikkelikohtaiset tekstilinkit.
Jäsenpalvelu: oma tiivis sisältöalue, jonka otsikko kertoo, kenelle palvelu on tarkoitettu.
Alatunniste: lähettäjän tiedot, yhteystiedot ja tilauksen hallintaan liittyvät linkit selkeästi luettavina.

Ratkaisu syntyy toimituksellisesta valinnasta, jonka ulkoasu tekee näkyväksi. Jos seuraavan kirjeen tärkein sisältö on asiantuntija-artikkeli, sama pohja voi nostaa sen ensimmäiseksi.

Suunnittele mobiilinäkymä ja saavutettavuus alusta lähtien

Mobiilissa sisältöjen tärkeysjärjestys näkyy erityisesti niiden lukujärjestyksessä. Rinnakkaiset palstat voidaan pinota yhdeksi sarakkeeksi, mutta samalla on varmistettava, että otsikko, teksti ja niihin liittyvä linkki pysyvät yhdessä. Lukijan ei pitäisi joutua siirtymään edestakaisin ymmärtääkseen noston.

Linkeille ja painikkeille tarvitaan riittävästi tilaa, jotta niitä on helppo käyttää kosketusnäytöllä. Tekstin tulee olla luettavaa ilman jatkuvaa suurentamista, ja pitkien otsikoiden pitää mahtua näkymään hallitusti.

Saavutettavuuden kannalta keskeisiä ovat myös tekstin ja taustan kontrasti, kuvaavat linkit sekä looginen otsikkorakenne. WCAG:n AA-tason kontrastikriteerin mukaan tavallisen tekstin kontrastisuhteen tulee olla vähintään 4,5:1. Kontrastin tarkistaminen on yksi osa kokonaisuutta: pelkkä värien korjaaminen ei tee uutiskirjeestä saavutettavaa.

Lähetysvalmis uutiskirje kannattaa testata kohderyhmälle tärkeissä sähköpostiohjelmissa, sekä puhelimella että tietokoneella. Myös tumma tila, kuvien estäminen ja tavallista pidemmät sisältötekstit voivat paljastaa ongelmia, joita suunnittelunäkymässä ei huomaa.

Hyvä uutiskirjepohja auttaa myös sisällöntuottajaa

Uutiskirjepohjan suunnittelu onnistuu, kun visuaalinen hierarkia säilyy eri sisältömäärillä ja eri tekijöiden käytössä. Pohjaan kannattaa rakentaa muutama selkeä moduuli: päänosto, artikkelinosto, tapahtumatiedot ja tiivis tekstialue. Jokaisella on oma tehtävänsä ja sovittu painotuksensa.

Pohjan rinnalle tarvitaan lyhyt käyttöohje. Siinä voidaan määritellä esimerkiksi otsikoiden suosituspituudet, kuvien rajaukset, painikkeiden käyttö ja se, milloin sisältö kannattaa ohjata verkkosivulle kokonaisen tekstin kopioimisen sijaan. Ohjeita kannattaa kokeilla oikeilla sisällöillä ennen pohjan hyväksymistä.

Hyvin suunniteltu master-pohja vähentää tarvetta ratkaista ulkoasu jokaisella lähetyskerralla uudelleen. Samalla se antaa sisällöntuottajalle liikkumavaraa: eri kirjeiden tavoitteet voivat vaihdella, vaikka tunnistettava ilme ja selkeä rakenne säilyvät.

Tarkistuslista uutiskirjeen suunnitteluun

Ymmärtääkö lukija kirjeen aiheen ja tärkeimmän hyödyn heti alussa?
Erottuvatko pääviesti ja täydentävät sisällöt toisistaan?
Kertovatko otsikot ja linkit riittävän täsmällisesti, mitä sisältö tarjoaa?
Onko teksti luettavaa mobiilissa, ja ovatko linkit helposti käytettävissä?
Välittyykö olennainen sisältö myös ilman kuvia?
Ovatko kontrastit, vaihtoehtoiset tekstit ja otsikkorakenne kunnossa?
Toimiiko pohja myös pitkillä otsikoilla ja vaihtelevilla sisältömäärillä?
Onko valmis kirje testattu vastaanottajien käyttämissä sähköpostiohjelmissa?

Uutiskirje osaksi yhtenäistä visuaalista viestintää

Uutiskirje on yksi organisaation visuaalisen ilmeen käyttökohteista. Sen kannattaa tuntua samalta brändiltä kuin verkkosivut, esitykset ja muut viestinnän materiaalit, mutta rakenteen tulee palvella sähköpostin lukemista ja käyttämistä.

Alfons Digitalissa yhdistämme graafisen suunnittelun, käyttöliittymäsuunnittelun ja käytettävyyden osaamisen. Suunnittelemme sisältöjen painotuksia, visuaalisia ratkaisuja ja muokattavia pohjia niin, että ne palvelevat sekä vastaanottajaa että viestinnän tekijää.

Tutustu graafisen suunnittelun palveluihimme tai ota yhteyttä, kun haluat kehittää uutiskirjeesi ilmettä ja rakennetta.