Noudata näitä ohjeita, niin saat enemmän lukijoita teksteillesi. Oppaan neuvoilla muotoilet tekstit houkuttelevan näköisiksi ja parannat niiden löydettävyyttä hakukoneissa.

Käytä sanoja, joita lukijakin käyttää

Selvitä suosituimmat sanamuodot ja synonyymit ja käytä niitä ammattikielen ja teknisesti ”oikeiden” sanojen sijaan. Näin teksti puhuttelee paremmin lukijaa ja löytyy helpommin hakukoneilla.

Selvitä näitä avainsanoja Googlen maksuttomalla avainsanatyökalulla. Lue ohje työkalun käyttöön.

Vastaa lukijoiden kysymyksiin

Käsittele tekstissä tyypillisiä kysymyksiä, joita lukijoilla on kirjoituksen aiheesta.

Selvitä nämä kysymykset Googlen avainsanatyökalulla. Ihmisten käyttämät hakutermit kielivät siitä, mistä nämä haluavat tietoa.

Karsi turha, älä asiaa

Keskity olennaiseen

• Älä käsittele asioita, jotka eivät ole olennaisia lukijoille. Irrallisten ”kiva tietää” -faktojen luetteleminen tekee tekstistä puisevaa.
• Mainitse aina ensin hyöty- tai haitta-aspekti. Kerro vasta sen jälkeen perusteleva fakta tai ominaisuus.
• Älä poikkea aiheesta. Moni tulee sivulle sen otsikon perusteella: he odottavat, että teksti käsittelee nimenomaan otsikon aihetta eikä jaarittele muuta aiheen tiimoilta.

Tiivistä – säilytät lukijan

• Karsi toisto ja jaarittelu tekstistäsi.
• Lyhennä virkkeet ja lauseet ytimekkäiksi.
• Älä lykkää johtopäätösten esittämistä. Lukija voi silmäillä päättelyketjusi ohi tai lopettaa ennen huipennusta.

Tekstin pituus riippuu tarpeesta

Verkkotekstille ei ole ihannepituutta. Usein kuitenkin väitetään, että pitkiä tekstejä ei lueta. Tämä pitääkin paikkansa, jos tämän oppaan keinoja ei noudateta. Osa artikkelista saakin jäädä lukematta: lukija voi silti saada haluamansa tiedon silmäilemällä.

Pitkääkin tekstiä silmäillään eteenpäin mikäli se motivoi muotoiluillaan. Lyhytkin teksti voi jäädä lukematta, jos se näyttää tylsältä.

Aiheiden pilkkominen omille sivuilleen riippuu sivuston sisältöstrategiasta. Siihen ei ole mitään yleispätevää sääntöä.

Otsikot motivoivat lukemaan

Koukuta otsikoilla kävijä lukijaksi. Niitä silmäillään ennen kuin muun tekstin lukemista edes aloitetaan.

Pääotsikko kertoo sivun pointin

• Tärkein avainsana alkuosaan, mielellään ensimmäiseksi.
• Kerro otsikossa keskeinen hyöty tai muu tärkeä pointti.
• Älä lupaa liikoja, vaan lunasta otsikon sanoma tekstissä.

Hyvä otsikko vastaa artikkelin sisältöä. Monesti kävijä saapuu sivulle esimerkiksi hakutuloksessa näkyvän otsikon perusteella. Teksti pettää kävijän odotukset, jos se ei vastaa kunnolla otsikkoa tai harhautuu aiheesta.

Väliotsikot auttavat silmäilijää

• Tiivistä väliotsikkoon sen alla olevien kappaleiden keskeinen aihe tai sanoma.
• Yhden väliotsikon alla enintään 3-5 tekstikappaletta.
• Käytä täydellisiä väliotsikoita: älä sano ”Oireet”, vaan ”Nivelrikon oireet”.

Myös väliotsikoissa kannattaa käyttää avainsanoja. Avainsanat lisäävät hakukonenäkyvyyden lisäksi tekstin houkuttelevuutta: ne ovat sanoja, jotka ovat monen silmäilijän ajatuksissa.

Leipätekstistä ilmavaa ja silmäiltävää

Sano aina aluksi tärkein asia ja vasta sen jälkeen siihen liittyvät perustelut ja yksityiskohdat. Tärkein asia on yleensä johtopäätös, hyöty tai haitta.

Tekstin ensimmäinen kappale on tärkein

• Pidä aloituskappale lyhyenä: 1-2 lausetta, 1-2 riviä.
• Tiivistä mitä koko teksti käsittelee.
• Sisällytä tärkeä avainsana tai pari hakukonenäkyvyyden edistämiseksi.

Aloituskappale voidaan myös muotoilla erottuvaksi. Silloin siitä käytetään nimitystä ”ingressi”.

Kappalejako: lyhyempi parempi

• Rakenna kukin tekstikappale yhden tärkeän pointin varaan.
• Pidä kappaleet enintään 3 virkkeen mittaisina.
• Vaihtele kappaleiden pituutta, niin teksti näyttää vähemmän yksitoikkoiselta.

Lyhyitä kappaleita on helpompi silmäillä ja kynnys lukea niitä on pienempi. Pitkiä kappaleita on taas raskasta lukea ruudulta ja ne näyttävät puisevilta silmäiltäessä.

Kappaleen esitysjärjestys: tärkein ensin

• Tärkein pointti, hyöty tai johtopäätös alkuun.
• Kappaleen loppuosa perustelee, selittää ja täsmentää alussa esitetyn pääpointin.
• Vain yksi tärkeä pointti per tekstikappale.

Koko kappale voi jäädä lukematta, jos sen alussa oleva teksti ei vaikuta tärkeältä. Lukijan silmät näet osuvat eritoten kappaleiden alkuihin, kun tämä silmäilee artikkelin tekstiä.

Virkkeiden rakenne ei saa kuormittaa aivoja

• Sano tärkein asia virkkeen alussa. Esitä vasta sen jälkeen perustelu, selitys tai täsmennys virkkeen loppuosassa.
• Pidä virkkeet lyhyinä, jotta et ylikuormita lukijan lyhytmuistia.
• Vältä aloittamista konjunktiolla (”vaikka”, ”kun”, ”jos” jne.).

Listaa kun voit

Esitä asiasi luettelomuodossa aina kun se on luontevaa. Listat kiinnittävät tehokkaasti tekstiä silmäilevän lukijan huomion ja helpottavat asioiden omaksumista.

Numeroimattomat listat (”pallolistat”)

• Käytä asioiden luettelemiseen.
• Sijoita tärkein asia listauskohdan alkuun.
• Vältä pitkiä yksittäisiä listoja: 3-4 kohtaa on ihannepituus.

Numeroidut listat, kun määrällä tai järjestyksellä on väliä

On kaksi syytä käyttää numeroitua listaa:

1. Vaiheiden esittäminen (esimerkiksi ohjeen työvaiheet).
2. Luettelointi, kun kohtia on merkityksellinen määrä.

Korosta tärkeä ja erityinen

Lihavointi korostaa tärkeimmät pointit

• Lihavoi tärkeitä pointteja, jotka voi ymmärtää ilman ympäröivän tekstin lukemista.
• Lihavoi vähintään 2-3 sanan kokonaisuuksia, yksittäisiä sanoja vain poikkeustapauksissa.
• Älä lihavoi yleisesti tunnettuja seikkoja tai asioita, joita lukija pitää itsestään selvinä.

Kursivointi: vain erikoistilanteisiin

Käytä kursivointia harvoin, sillä sitä on hankalaa lukea näyttölaitteen ruudulta. Täysin ilmankin pärjää.

Kursivoinnin käyttökohteita voivat olla

• sanojen painottaminen
• teosten nimet
• vierasperäiset sanat.

Vastaa kysymyksiin linkeillä

Anna lukijalle tarpeellista ja kiinnostavaa lisätietoa linkittämällä muille sivuille. Näin vastaat herääviin kysymyksiin ja lisäät tekstisi uskottavuutta.

Linkit leipätekstissä vastaavat kysymyksiin

• Linkitä leipätekstistä muille saman sivuston sivuille, jotka voivat vastata lukijan kysymyksiin.
• Käytä harkintaa, jos linkität muille sivustoille leipätekstin seasta. Liika linkitys voi saada lukijan hylkäämään sinun tekstisi.

Sivuston sisäiset linkit voivat palvella etenkin spontaaneja lukijoita, jotka eivät jaksa lukea tekstejä sanasta sanaan.

Linkit tekstin lopussa: lisää samasta aiheesta

• Linkitä lopussa lisätietoon tai lähteisiin.
• Listaa linkit pallolistalla, jos niitä on useampi.
• Käytä informatiivisia linkkitekstejä.

Piristä kuvilla, tiivistä kuvateksteillä

Kuvat ja niiden alla olevat kuvatekstit ovat tärkeitä mielenkiinnon herättäjiä. Ne tekevät sivusta vähemmän tylsän näköisen ja kuvatekstejä myös luetaan paljon sivua silmäiltäessä.

Suosi aitoja kuvia

• Käytä vähintään yhtä kuvaa tekstissä, mieluiten jo tekstin alussa.
• Käytä persoonallisia kuvia. Vältä kuluneita ja falskeja kuvapankkikuvia.
• Flickr voi olla parempi lähde kuville kuin iStockphoto ja vastaavat halvat kuvapankit.

Kuvatekstit luetaan: käytä se hyväksesi

• Hyvä kuvateksti liittyy keskeisesti sekä kuvaan että koko artikkeliin.
• Tiivistä kuvateksteihin jotain tärkeää. Hyvin moni lukee ne, ja hyvä kuvateksti ”myy” muunkin tekstin lukemista.
• Pituus 1-2 virkettä.

Taulukoi ja laatikoi

Tietoa on usein helpompi omaksua taulukoista tai graafisesta esityksestä. Myös erilleen asetetut faktalaatikot herättävät kiinnostusta.

Taulukot tilastoille

Käytä tiedon esittämiseen taulukkoa, kun se on mahdollista. Verkkosivuilla voi käyttää myös sellaisia taulukoita, joita kävijä voi järjestää eri sarakkeiden perusteella (esim. hinta, kesto yms.).

Infografiikka elävöittää asian

Käytä infografiikkaa, jos taitosi tai resurssisi riittävät.

Katso esimerkkinä Julius Janssonin infografiikkaa. Kiinnostava infografiikka voi olla jo itsessään varsinainen linkkipyydys.

Faktalaatikot täydentävät

Laita teksti erilliseen faktalaatikkoon, kun se esittää irrallisia tai täydentäviä vinkkejä, esimerkkejä tai tiedonjyviä. Faktalaatikot nostavat sisältöä esiin ja tekevät tekstin vähemmän ikävystyttäväksi.

Oppaan tausta: julkista opetusmateriaalia

Tämä pikaopas pyrkii esittämään nopeasti, millaista on laadukas verkkokirjoittaminen. Se on laadittu vauhdittamaan kirjoittajien koulutusta.

Aiemmin tukenani oli tiivis tarkistuslista, jonka jaoin kouluttamilleni kirjoittajille. Se puri kuitenkin vain osittain (lue: sitä ei aina käytetty). Jatkossa tulen myös jakamaan linkin tälle sivulle.

Oppaaseen ilmestyy parannuksia ja lisäyksiä sitä mukaa kuin aihetta tulee.

Lisää kirjoittamisoppia ja taustatietoa

• Kirjoituskoulu a la Alasilta Facebookissa
• Jere Rinteen SlideShare-esitys verkkokirjoittamisesta
• Luetelma & Miten tehdään luetelma? – Kielitoimiston ohjeet, jotka pätevät myös netin pallolistoihin.
• Blogiin kirjoittamisen muoto-opas – Millaisia muotoiluja blogissa kannattaa käyttää? Osin tämän oppaan kanssa päällekkäisiä neuvoja.
• Sivun sisäinen hakukoneoptimointi – Näin huomioidaan hakukoneoptimointi sisällöntuotannossa (osa opasta Hakukoneoptimointi lyhyesti).
• F-Shaped Pattern For Reading Web Content – Tämän takia kappaleiden ja otsikoiden alkuosat ovat niin tärkeitä.

Persoonat edustavat tapoja, joilla ihmiset tekevät ostoksia. Tämä artikkeli esittelee neljä persoonaa, joilla pääsee jo aloittamaan myyntisivujen konversio-optimoinnin.

Neljä perustavaa ostajan persoonaa

Bryan ja Jeffrey Eisenberg ovat esittäneet 4 peruspersoonaa, jotka jaetaan päätöksenteon järki-/tunneperäisyyden ja sen nopeuden mukaan:

	Järki	Tunne
Nopea	kilpailullinen	spontaani
Hidas	järjestelmällinen	humanistinen

Kilpailullinen (competitive)

Kilpailullinen ostaja tekee ostopäätöksen nopeasti mutta järkiperustein.

Hän on vaativa ja kriittinen asiakas, joka haluaa tietää heti aluksi hyödyt sekä edut kilpailijoihin verrattuna. Hän haluaa nämä tiedot lyhyesti ja valmiiksi pureskeltuina. Miksi hän ostaisi juuri teiltä?

Kilpailullinen haluaa ostaa myyjältä, joka vaikuttaa luotettavalta ja jolla on ”homma hanskassa”. Perustellusti paras vetoaa kilpailulliseen.

Näin myyt kilpailulliselle:

• Listaa tuotteen hyödyt tiiviisti heti myyntisivun alussa.
• Esitä näkyvästi uniikki myyntiargumentti (unique value proposition).
• Kerro miten tuotteesi on parempi kuin kilpailijoiden tuotteet.
• Siteeraa vertailuja, joiden mukaan tuotteesi on paras (jossakin).
• Korosta hyötyjä joka käänteessä: esitä ominaisuudetkin hyötyinä.
• Luo uskottava kuva yrityksestäsi designilla, referensseillä yms.

Järjestelmällinen (methodical)

Järjestelmällinen ostaja valitsee tuotteen, joka vaikuttaa ominaisuuksiltaan sopivimmalta.

Nämä ostajat suhtautuvat skeptisesti myyntiargumentteihin. Niiden sijaan heitä kiinnostavat speksit, todisteet ja ”pieni printti”. He ovat valmiita käyttämään paljon aikaa tuotteiden tutkimiseen ja vertailuun.

Myyjän kanssa kommunikointi on järjestelmälliselle usein pelkkä transaktio, jossa raha vaihdetaan tuotteeseen. Kaiken muun he selvittävät itsenäisesti saatavilla olevan tiedon avulla. Siinä he käyttävät ahkerasti myös kolmannen osapuolen sivustoja.

Näin saat järjestelmällisen ostamaan:

• Listaa kaikki vähänkin olennaiset ominaisuudet.
• Korosta kilpailijoihin nähden ylivoimaisia ominaisuuksia.
• Vertaile eri mallien ominaisuuksia taulukossa.
• Selitä palveluprosessi (tai miten tuote toimii).
• Linkitä puolueettomiin lähteisiin, jotka kertovat tuotteesi laadusta.
• Älä pihtaa tietoa: järjestelmällinen ei ota yhteyttä kysyäkseen.

Spontaani (spontaneus)

Spontaani persoona on kärsimätön impulssiostaja, joka hakee elämyksiä ja elämänlaatua – mahdollisimman helposti.

Spontaanit ostajat ovat toiminnallisia. He eivät jaksa lukea sivujen tekstejä kunnolla, vaan he silmäilevät nopeasti vastauksia kysymyksiinsä.

Spontaaneja varten kannattaa aina esittää jotakin, jota he voivat konkreettisesti tehdä. Tällaista toimintaa voi olla esimerkiksi linkkien klikkaaminen tai tuotteen kustomointi mieleiseksi optioita valitsemalla.

Näin saat spontaanin toimimaan:

• Käytä selkeitä ja näkyviä toimintakehotteita – jo sivun alussa.
• Tee ostoprosessi mahdollisimman helpoksi ja karsi siitä kaikki turha.
• Luo kuvilla ja videoilla mielikuvia siitä fiiliksestä, jonka tuote tuo.
• Painota nopeaa toimitusta ja palvelua.
• Tarjoa ”Auta minua valitsemaan” -toiminto.
• Kokeile rahat takaisin -takuita ja määräaikaisia tarjouksia.

Humanistinen (humanistic)

Humanistisia ostajia kiinnostavat tuotteen jo ostaneet asiakkaat ja näiden kokemukset tuotteesta.

Humanisti on kärsivällinen, kuten järjestelmällinen, ja häntäkin etovat hypetys ja markkinointikliseet.

Hän haluaa tietää myyjäyrityksen arvoista ja henkilökunnasta. Keitä olette ja voiko teihin luottaa?

Humanistiset käyttäjät usein ostavat muiden puolesta tai suosittelevat näille tuotteita.

Näin saat humanistisesta asiakkaasi:

• Siteeraa testimoniaaleja tyytyväisiltä asiakkailta.
• Kerro asiakkaiden määrä ja millaisia asiakkaat ovat.
• Salli julkinen tuotearviointi (verkkokaupassa).
• Kerro tarina siitä miten tuote tai yritys sai alkunsa.
• Laadi kunnollinen ”tietoa meistä” -sivu.
• Esittele työntekijöitäsi sivustolla.

Persoonat ovat kuvitteellisia henkilöitä,
jotka edustavat ostajia

Persoonat ovat fiktiivisiä ”henkilöitä”, jotka edustavat erilaisia tapoja käyttää sivustoa ja ostaa. Niitä ei pidä sekoittaa yleisiin stereotyyppeihin ihmisistä.

Mieti persoonat kävijöidesi perusteella

Ostoprosessit ovat erilaisia eri verkkopalveluissa eivätkä ne typisty 4 peruspersoonaan.  Persoonat, normaalisti 2-7 sellaista, kannattaakin miettiä oman sivuston ja sen kävijöiden pohjalta.

Käyttäjäkyselyt, asiakaspalautteet, demografinen data ja kävijätilastot kannattaa huomioida persoonien kehittelyssä. Lähtökohtana on syytä pitää todelliset sivuston kävijät ja asiakkaat – eivät sellaiset joita toivottaisiin.

Mieti esimerkiksi seuraavia kysymyksiä, kun luonnostelet persoonia:

• hintatietoisuus
• kiireisyys
• palvelun tarve
• halu tehdä vaikutus pomoon/puolisoon/työtovereihin
• alan tuntemus
• uskollisuus merkeille, tuotteille ja yrityksille
• mukavuudenhaluisuus
• nettitaidot
• mieluisin yhteydenottotapa (lomake/puhelin/sähköposti/myymälä)
• aiempi käyttökokemus
• tuotteen käyttötarkoitus
• turhautumisen aiheet.

Persoona on käytännössä 1-2 sivun (A4) tarinamainen kuvaus, jossa esitellään kuvitteellinen henkilö: missä hän on töissä, mitä hän tekee päivisin, mitä hän tavoittelee jne. Persoona on onnistunut, jos kuvaus tuo mieleen konkreettisia asiakkaita niille, jotka toimivat asiakasrajapinnassa (myyjät, asiakaspalvelijat yms.).

Peukalosääntöjä persoonien huomiointiin

Sama myyntisivu voi huomioida 4 peruspersoonaa näin:

• Tiivistä hyödyt alussa kilpailullisille.
• Kerro tarkat speksit sivun lopussa tai linkitettynä omalla sivullaan järjestelmällisiä varten.
• Anna erottuva toimintamahdollisuus ja -kehote sivun yläosassa spontaaneille. Käytä 3d-nappulaa, jossa lukee ”Pyydä tarjous”, ”Kokeile heti”, ”Tilaa näyte” tms.
• Esitä testimoniaaleja ja linkitä tarinoihin esimerkiksi oikeassa sivupalkissa humanistisia varten. Myös ”Yli 100 000 tyytyväistä käyttäjää” tms. toimii paremman puutteessa.

Tässä on yksi mahdollinen tapa laatia myynti- tai laskeutumissivu, jotta se tehoaisi eri persooniin:

Lisää aiheesta

• An introduction to personas and how to create them
• Get In Your Customers’ Heads: Creating Great Personas
• Making Personas More Powerful: Details to Drive Strategic and Tactical Design
• Dishing Out What the Customer Really Wants
• Cooperin persoona-aiheiset artikkelit (Alan Cooper loi persoona-käsitteen).

1. sisältö
2. toiminnallisuus
3. osallistaminen.

Sisältö

Suurin osa netin käytöstä on passiivista sisältöjen silmäilyä, lukemista, katselua ja kuuntelua. Kiinnostava ja aikaa kestävä sisältö takaa kävijävirtoja pitkälle tulevaisuuteen.

Sisältöä voivat olla esimerkiksi

• artikkelit
• sarjakuvat
• videot
• podcastit
• kuvat.

Sisältö voi olla myös palvelun käyttäjien luomaa, kuten ilmoituksia, blogijuttuja tai valokuvia. Tällaisen osallistumisen käynnistämiseksi tarvitaan kuitenkin yleensä jotakin toimituksellista sisältöä.

Suuri osa verkkopalveluista julkaisee sisältöä liian yksipuolisesti, kuten pelkkiä artikkeleita, vaikka osalle kävijöistä luontevampi omaksumismuoto olisi video.

Toiminnallisuus

Osa sivuston kävijöistä haluaa toimintaa: kun kärsivällisyys ei riitä sisällöille tai osallistumiseen, sivuston toiminnallisuus sitoo heitä uskollisiksi käyttäjiksi ja suosittelijoiksi.

Yksittäinen web-pohjainen  toiminto voi olla esimerkiksi

• laskuri (kalorilaskuri, ROI-laskuri, elinikälaskuri)
• generaattori (widgetille, grafiikalle, bullshitille)
• kehittynyt hakutoiminto (esim. semanttinen vertikaalihaku)
• aggregaattori (äkkilähdöistä, uutisista)
• jakopalvelu (tiedostoille, videoille, kuville, musiikille)
• Flash-peli (omaan toimialaan liittyvä humoristinen linkkipyydys?)
• suunnittelusovellus (talolle, sisustukselle)
• muunnin (tiedostomuodoille, valuutoille, mittayksiköille, nimille)
• ilmoitusmahdollisuus (osta, myy, anna, vuokraa, vaihda)
• vahtipalvelu (aiheille, ilmoitetuille kohteille, vertikaalihaun tuloksille)
• varausmoottori (matkalle, huoneelle, lautapelille, futikselle)
• kalenteri (henk. koht. raskaudelle, matkoille, harrastuksille).

Toimintojen suuri etu on se, että kerran valmistuttuaan ne eivät useinkaan vaadi paljon työtä tai rahaa. Toiminnallisuus tahkoo kävijöitä, markkinointihyötyä ja tuloja vuodesta toiseen.

Toiminnot ovat usein jo itsessään tehokasta markkinointia: tyytyväiset käyttäjät levittävät niistä tietoa Facebookissa, Twitterissä, blogeissa ja sähköpostilla.

Osallistaminen

Kun sivusto osallistaa käyttäjiä jakamaan ja keskustelemaan, nämä palaavat sille sosiaalisten tarpeidensa johdosta ja houkuttelevat muitakin luomallaan sisällöllä.

Tavoiteltavaa osallistumista voi olla esimerkiksi

• kommentointi ja keskustelu
• toisten käyttäjien kysymyksiin vastaaminen
• uuden sisällön jakaminen (esim. reseptit, ohjeet, kuvat)
• suhteiden muodotus muihin käyttäjiin (”lisää kaveriksi”)
• sisällön tai asioiden arviointi
• oman profiilin kehittäminen
• linkittäminen Facebookista ja Twitteristä.

Käyttäjien luoman sisällön ”rosoisuus” luo palvelulle uskottavuutta ja näyttää kävijöille esimerkkiä että ”muutkin tätä käyttävät”. Muiden esimerkki houkuttelee kuluttamaan sisältöjä, käyttämään toimintoja ja osallistumaan itsekin.

Miten huomioit tukijalat?

Jos sinulla on verkkokauppa, voit kirjoittaa itsellesi sopivaan tahtiin blogia kaupan alaan liittyen. Kiinnostavat kirjoitukset luovat sympatiaa ja kenties kiitollisuuttakin, jotka aukaisevat monen lukijan kukkarot. Arviointimahdollisuus saa ostajat suosittelemaan tuotteitasi toisilleen (katso esimerkkiä Mulletoi.comista).

Mediataloille sosiaaliseen mediaan liittyen paras ROI on nykyisten sivustojen kehittämisessä osallistavammiksi, osaksi sosiaalista mediaa. Myös hauskat ja hyödylliset toiminnallisuudet on syytä ottaa käyttöön, kun niiden tehtailuun kerran riittää resurssejakin. Häviäjiä ovat ne, jotka jäävät historiallisista syistä ”sisältöloukkuun” eivätkä opi uusia temppuja.

B2B-yritykselle blogi luo paitsi asiantuntevuuden vaikutelmaa niin myös parempia hakukonesijoituksia ja uusia asiakkaita niiden kautta. Twitterissä, Facebookissa ja LinkedInissä voi verkostoitua muiden yrittäjien kanssa ja tulla huomatuksi. Tarjottujen palveluiden tuomaa hyötyä tai säästöä voidaan puolestaan perustella laskurin avulla.

Jotkut verkkosovellukset menestyvät keskittymällä toiminnallisuuteen ja jättävät vähemmälle huomiolle muut tukijalat. Silti monella tällaisellakin palvelulla on sivustollaan blogi ja ne osallistavat käyttäjiään Facebookissa ja Twitterissä. Näin ne saavat enemmän huomiota ja arvostusta varhaisilta omaksujilta, jotka levittävät niistä tietoa sijoittajille ja potentiaalisille käyttäjille.

Oppaan neuvot on tarkoitettu erityisesti pidempien artikkelien kirjoittamiseen. Lyhyissä kappaleen tai parin teksteissä korostuskeinot ja muotoilut eivät ole yhtä hyödyllisiä.

Tekstin muotoilu ja jäsentely

Teksti ei saa näyttää yksitoikkoiselta ja sen tärkeimmät pointit on paljastuttava silmäyksellä. Blogeihin päätyvät ihmiset eivät näet usein lue tekstejä vaan he silmäilevät niitä etsien itseään kiinnostavaa materiaalia. Silmäily edeltää monesti alusta loppuun lukemista, jos blogin lukija ei ole siihen etukäteen motivoitunut.

Seuraavaksi esiteltävät muotoilut saa useimmissa blogeissa käyttöön yhdellä hiiren klikkauksella. Tarvittavat työkalurivit voivat näyttää esimerkiksi tältä:

(Ylläoleva ruudunkaappaus on otettu WordPress-julkaisujärjestelmästä.)

Otsikko

Kirjoituksen otsikko voi ratkaista luetaanko juttua ollenkaan. Otsikon on syytä olla

• kuvaava: ei nokkela tai arvoituksellinen
• ytimekäs: tärkeä avainsana kannattaa sijoittaa alkuun
• rehellinen: otsikon antama lupaus lunastetaan tekstissä
• kiinnostava: esimerkiksi rohkeus, uusi aihe tai lupaus hyödyllisestä tiedosta herättävät mielenkiinnon
• yksilöllinen: otsikossa kannattaa yleensä välttää blogin rajattua teemaa kuvaavia itsestäänselviä sanoja

Alaotsikot

Alaotsikko helpottaa tekstin silmäilyä ja kertoo lukijalle kirjoituksen sisällöstä ja rakenteesta.

• Käytä alaotsikoita pidemmissä postauksissa.
• Alaotsikko tiivistää sitä seuraavien kappaleiden aiheen.
• Sisällytä alaotsikkoon aihetta kuvaavia tärkeitä avainsanoja.

Kappaleet

Blogissa normaali teksti jakautuu kappaleisiin, joiden ylä- ja alapuolella oleva tyhjä tila helpottaa sisällön hahmottamista.

• Pidä kappaleet lyhyinä.
• 1-3 virkettä, 2-5 riviä per kappale.
• Vaihtele kappaleiden pituutta.

Numeroimattomat listat

Listaukset ovat netin vastine ranskalaisille viivoille. Ne johdattavat lukijan silmiä ja jäsentävät asiat omiksi kohdikseen.

• [Tämä on numeroimattoman listan yksi kohta.]
• Käytä jos asiat voidaan esittää luetteloina.
• Tekevät silmäilyn huomattavasti helpommaksi (vai mitä?).
• Helpottavat asioiden mieleenpainamista.

Numeroidut listat

Numeroidut listat helpottavat tekstin seuraamista, erityisesti kun kohtien määrä ilmoitetaan etukäteen.

• [Kuten tämä mutta täplän tilalla juokseva järjestysnumero.]
• Käytä aina jos lueteltavia asioita on tietty merkityksellinen määrä …
• … tai jos esitetään sarja vaiheita, esimerkiksi ruokaohjeen työvaiheita.
• Voidaan käyttää kokonaisen kirjoituksen jäsentämiseen.
• Luovat tekstiin juoksevuutta ja turvallisen loogisuuden vaikutelman.

Lihavoinnit

Lihavointi on paras tapa korostaa listauskohtien ensimmäisiä lauseita ja tärkeitä asioita tekstin seassa.

Lihavoi

• tärkeimmät pointit, älä kuitenkaan lihavoi itsestäänselvyyksiä
• valikoiden: jos lihavoit liikaa, korostus menettää merkityksensä,
• vähintään 2-3 sanan kokonaisuuksia, jotka ilmaisevat jotakin tärkeää jo ilman ympäröivän tekstin lukemista. Yksittäisten sanojen lihavointi leipätekstin seasta tekisi siitä levottoman oloista, minkä vuoksi sitä kannattaa käyttää vain poikkeustapauksissa.

Kursivoinnit

Kursivointi ei ole yhtä hyvä korostuskeino kuin lihavointi, koska kursivoitua tekstiä on vaikeampi lukea näytöltä. Kursiivia voidaan kuitenkin käyttää esimerkiksi seuraaviin erikoistarkoituksiin:

• teosten nimet
• painotukset
• kysymykset
• lainaukset
• vieraskieliset sanat

Sisennetyt lainaukset

Lainausten sisentäminen on yleinen keino erottaa muiden sanomiset omalla muotoilullaan.

• Sisennä kaikki lainaukset paitsi hyvin lyhyet.
• Sisennykset tekevät tekstistä vähemmän yksitoikkoista.
• Muotoillut lainaukset helpottavat pikaista lukijaa erottamaan muiden ajatukset ja kommentoinnin kohteet blogin kirjoittajan mielipiteistä.

Kuvat

Kuvien käyttö voi olla tärkeä osa kirjoituksen jäsentämistä ja blogin viestintää. Monet eivät jaksa lukea kuvattomia tai vähäkuvaisia blogeja (kuten tätä).

• Kuvat katkaisevat ja piristävät tekstiä, joka voisi muuten näyttää tylsältä.
• Ne kiinnittävät lukijan huomiota johonkin tekstin aspektiin.
• Toimiva kuva voi olla esimerkiksi symbolinen havainnollistus, sarjakuva, ruudunkaappaus tai tilastokuvaaja.
• Erityisen tehokkaita voivat olla kirjoituksen alussa olevat kuvat, kenties jo ensimmäisen kappaleen tai parin jälkeen.

Linkit

Linkit muille sivustoille ja oman blogin muihin kirjoituksiin ovat myös osa blogin muotokieltä.

Hyvä linkki

• suosittelee olennaista sisältöä kirjoitukseen liittyen,
• kuvaa kohdesivua linkissä olevalla tekstillä eli ankkuritekstillä,
• kiinnittää silmäiltäessä huomiota kuten lihavointi, minkä vuoksi…
• … voi herättää kiinnostusta ankkuritekstillään koko kirjoitusta kohtaan (eikä vain kohdesivua kohtaan).

Blogin CSS-tyylit

Epähoukutteleva ulkoasu ei aina kumpua kirjoittajasta vaan sen voi aiheuttaa blogin template eli ulkoasun määrittävä teema.

Blogin yleinen ulkoasu määrittyy pitkälti CSS-tyylitiedostossa (tässä esimerkkinä tämän blogin CSS-tiedosto). Tyylitiedoston arvoja muokaamalla blogista voi saada huomattavasti helpommin luettavan.

Riviväli

Riittävä riviväli tekee tekstin ilmavaksi ja silmäilyn helpoksi. Sitä säädetään CSS:n line-height-ominaisuudella, jonka arvoksi sopii kerroinluku (tässä blogissa se on 1.5).

Tasaus

Tasauksen suhteen on vain yksi hyvä vaihtoehto: tasaus vasemmalle. Molemmilta sivuilta tasattu teksti tekee vaikeaksi erottaa rivejä toisistaan. Netissä estetiikka on paljon toissijaisempaa kuin painetussa tekstissä.

Tekstin leveys

Kumotakseni edellisen pointin:

• tekstipalstan on syytä olla kapea – ei siksi että sitä olisi niin nopeampi lukea vaan jotta teksti näyttäisi houkuttelevammalta.
• Käyttäjät pitävät eniten riveistä joiden leveys on noin 10-13 cm. (Lähde: ”Optimal Line Length”, WebUsability.com)
• Leveys kannattaa pitää blogissa kiinteänä (fixed width layout) myös siksi, että ruudun leveyden mukaan levittäytyvää tekstimassaa (fluid width layout) olisi hankalampi lukea isolta näytöltä jos selainikkuna täyttää koko ruudun.

Kontrasti

Liian pieni tekstin ja sen taustan välinen kontrasti on usein ongelma erityisesti mustaa taustaväriä käytettäessä. Siihen voidaan päätyä jos web-suunnittelijan näyttö esittää kontrastin paremmin kuin joidenkin käyttäjien monitorit.

Mustaa taustaväriä käytettäessä tekstin fontti kannattaa lihavoida tai säätää isokokoiseksi jotta kirjaimet eivät hukkuisi taustaan. Täysin valkoinen teksti mustalla pohjalla voi olla kuluttavaa silmille, joten paras kompromissi mustalla taustalla on isohko ja vaaleahko fontti.

Vaalealla taustavärillä tekstin on syytä olla riittävän tummaa, silloinkin kun se on vaikkapa punaisella murrettua harmaata kuten tässä blogissa. Täysin musta tekstin väri ei ole huono vaihtoehto.

Kirjaisinlaji

Hyvä fontti verkkotekstille on usein Arial tai Verdana (n. 99% todennäköisyydellä sinäkin näet tämän tekstin Verdanana).

Arial löytyy lähes kaikilta tietokoneilta, tai ainakin sen jokin lähisukulainen kuten Helvetica. Sillä voi siten saada blogin käyttäjille yhtenäisen ulkoasun määrittämällä fonttiperheeseen (font-family) myös noita lähisukulaisia. Omasta mielestäni Arial sopii hieman paremmin otsikoihin kuin leipätekstiin.

Verdana on helposti luettavaa pienenäkin. Tämä mahdollistaa pienehkön fonttikoon käyttämisen, jolloin tekstin silmäily on helpompaa.

Saavutettavuudesta paasaavat änkyrät ovat eri mieltä Verdana-fontista: teksti näkyy sitä käytettäessä liian pienenä sillä pienellä joukolla jolta Verdana puuttuu käyttöjärjestelmästä. Verdana on näet isompaa kuin samalla numeerisella koolla määritetyt muut sans-serif-fontit, joihin selain joutuu Verdanan puuttuessa turvautumaan.

Itsekin aikoinaan välttelin Verdanaa tuosta syystä ja käytin leipätekstissä Arial- tai Georgia-fonttia. Lopulta päädyin siihen, että enemmistön parempi lukukokemus on tärkeämpää kuin erittäin pienen vähemmistön pikku hankaluus.

Fontin koko

Sopiva fontin koko riippuu monesta tekijästä: tekstien pituudesta, fonttilajista, taustaväristä, tekstin leveydestä, sanoman luonteesta yms. Asiatekstiin sopii pienikokoinen Verdana, pamfletissa tai lyhyissä jutuissa voi toimia isokin fontti. Vältä synnyttämästä vaikutelmaa että teksti hyppii silmille tai että sitä joutuu tihrustamaan läheltä näyttöä.

Tyhjä tila elementtien välissä

Whitespace eli tyhjä tila on keskeinen tapa helpottaa silmäilyä ja tehdä web-sivu ilmavaksi. Ilmava teksti helpottaa yksittäisten tekstinkohtien silmäilyä ja antaa vapautta lukijan omille ajatuksen harhailuille.

Tämän vuoksi käytä alaotsikoissa lihavointien sijasta niille varattuja omia HTML-elementtejään, eli h2,… , h6 -tageja. Näille voidaan antaa erikseen tyylitiedostossa tilaa ympärille, toisin kuin luokittelemattomille lihavoinneille.

Marginaali tekstin sivuilla

Tyhjä tila tekstin molemmilla sivustoilla

• luo visuaalista kontrastia, joka tekee koko tekstin ilmavamman ja miellyttävämmän näköiseksi,
• luodaan monesti keskittämällä sisältö, kuten tässäkin blogissa on menetelty,
• on oltava riittävä myös tekstin omalla taustavärillä.

Tiivistelmä

Tämän oppaan tärkeimmät suositukset voidaan tiivistää näin:

• Älä kikkaile otsikoilla vaan lupaa ja pidä lupauksesi.
• Riko yksitoikkoisuus kuvilla ja korostuksilla.
• Pidä kappaleet lyhyinä.
• Lihavoi tärkeät kohdat.
• Esitä asiat listoina ja vaiheina kun mahdollista.
• Käytä avainsanoja linkeissä ja alaotsikoissa.
• Lisää tyhjää tilaa tekstin väliin ja ympärille.

Pidä mielessä että blogiin kirjoittamiseen pätevät erilaiset laatukriteerit kuin painettuun sanaan. Ranskalaisia viivoja vastaavat ”pallolistat” ovat netissä hyvää tyyliä, samoin lyhyet kappaleet ja vapautuneen epämuodollinen kirjoitustyyli. Jokainen blogi ja bloggaaja on kuitenkin yksilö sopivien tyylien suhteen, joten tämäkin opas sopii enemmän bloggaamisen tueksi kuin orjallisesti noudatettavaksi säännöstöksi.

8 syytä miksi esteettömyys on hyvää bisnestä

Saavutettavuus mielletään usein hyvää hyvyyttä tehtäväksi vammaisten palvelemiseksi. Esteettömyys koskee kuitenkin samalla paljon laajempia ihmisjoukkoja, minkä vuoksi sen huomioiminen on myös liiketoiminnallisesti perusteltua.

Seuraavat 8 syytä valoittavat miksi yrityksen kannattaa kallistaa korvaansa saavutettavuudelle kun se on ostamassa web-suunnittelua kotisivuilleen tai esimerkiksi verkkokaupalle.

1. Saavutettavuus tuo enemmän asiakkaita. Iäkkäät, keski-ikäiset, kännykällä nettiä selaavat, heikkolukutaitoiset, sokeat, värisokeat, lukihäiriöiset, PDA-, Linux- ja vanhojen selainten käyttäjät sekä muut saavutettavuutta tarvitsevat ryhmät muodostavat yhdessä merkittävän joukon potentiaalisia asiakkaita. On selvä kilpailuetu jos yrityksen web-sivut toimivat moitteetta myös näillä käyttäjillä.

2. Saavutettavuus on halpaa. Saavutettavuudesta puhuva web-suunnittelija ei pyri lypsämään prospektilta ylimääräistä rahaa, vaan esteettömyyden toteuttaminen kuuluu olennaisena osana hänen työtapoihinsa.

3. Saavutettavat sivut ovat luonnostaan hakukoneystävällisiä. Monet esteettömän web-suunnittelun ratkaisut auttavat sivuja sijoittumaan hyvin Googlessa ja muissa hakukoneissa ja tuovat niiden kautta lisää asiakkaita.

4. Saavutettavuus lisää käytettävyyttä. Monet saavutettavuutta lisäävät ratkaisut tekevät sivut helpommin käytettäviksi myös niille jotka eivät kuulu mihinkään erikoisryhmään. Esimerkiksi tärkeiden sanojen sijoittaminen navigaatiolinkkien ja muiden tekstinosien alkuun helpottaa ääniselaimia käyttävien sokeiden lisäksi myös aivan tavallisten käyttäjien silmäilyä.

5. Saavutettavuus on moraalisesti hyvä asia ja saa yrityksen näyttämään hyvältä. Sokeiden, iäkkäiden, kännykällä selaavien, PDA- ja Linux-käyttäjien sekä muiden erityisryhmien elämä on huomattavasti parempaa mitä useampi sivusto on heille saavutettava. Moraalisesti kestävä toiminta netissä saa koko yrityksen näyttämään hyvältä.

6. Saavutettava design tuo arvostusta kokeneilta netin käyttäjiltä. Nämä hallitsevat suurta osaa Internetistä ja vaikuttavat linkittämällä siihen, mitkä sivut nousevat kärkeen Googlen hakutuloksissa. Jos yritys antaa mainostoimiston tehdä visuaalisesti upeat mutta saavutettavuudeltaan karmeat flash-sivut, se saa osakseen väheksyntää ja halveksuntaa Internetin tehokäyttäjien piirissä, tai vähintään he pitävät yritystä netin suhteen vihjeettömänä.

7. Saavutettavuudesta tunnistaa pätevän web-suunnittelijan. Asiansa osaava web-suunnittelija seuraa tiiviisti alansa kehitystä, tuntee esteettömyyttä tukevat web-standardit eikä pyri kusettamaan asiakasta vain ulkoisesti näyttävillä sivuilla, jotka ovat silkkoa sisältä ja käytettävyydeltään kammottavia. ”Entä saavutettavuus?” on itse asiassa sopiva kysymys suunnittelijan pätevyyden testaamiseen: jos suunnittelija antaa ymmärtää että kyseessä on työläs ja merkittävästi hintaa nostava lisä uusien sivujen suunnittelussa, hänen osaamisensa ei ole ajan tasalla.

8. Esteetön suunnittelu suojelee oikeusjutuilta ja huonolta maineelta. Suomessa laki ei vielä kiellä esteettömyyden laiminlyövää suunnittelua (paitsi julkisten palvelujen osalta Vammaispalvelulaki). Yhdysvalloissa ja Iso-Britanniassa tällaisia lakeja kuitenkin on olemassa, ja Suomeenkin sellainen todennäköisesti joskus tulee. Suunnittelemalla sivut esteettömiksi jo nyt vältytään mahdollisilta kalliilta korjaustöiltä, oikeusjutuilta tai huonolta maineelta tulevaisuudessa, jolloin laki ja yleinen tapa saattavat vaatia saavutettavuutta.

Milloin saavutettavuutta ei tarvita?

Joillakin aloilla web-sivujen saavutettavuus ei ole niin tärkeää. Tällaisia ovat esimerkiksi bändit ja suuret brändit, joiden tuotteiden ominaisuuksista ihmiset eivät yleensä ole kiinnostuneita. Jos sivuston poitti on lähinnä brändäys eikä niinkään tiedonvälitys tai hyödylliset toiminnot, saavutettavuus on vähemmän olennaista.

Brändin rakentaminen ymmärretään kuitenkin usein liian keskeiseksi. Tällöin tuloksena voi olla ärsyttäviä flash-animaatioita silloin kun netin käyttäjä oikeasti haluaa vain nopeasti jotakin perustietoa.

Esimerkiksi sopii Sony Ericsson -sivusto, joka oli toteutettu flashilla, kun yritin taannoin käyttää sitä uutta puhelinta etsiessäni. Flash-toteutus oli selvä virhe, sillä kännykät ovat kuitenkin sellainen tuoteryhmä, josta ihmiset haluavat myös tietoa eivätkä vain mainosgrafiikoita. Tieto puhelimesta oli ahdettu säälittävään pikku laatikkoon, jota joutui selaamaan vierityspalkilla.

En löytänyt kännykästä etsimääni tietoa, ja muutenkin lopputulos oli turhauttava kokemus, jolta olisi vältytty, jos sivusto olisi suunniteltu saavutettavuuden ja käytettävyyden periaatteita kunnioittaen. Luultavasti osa negatiivisista tunteista siirtyi koskemaan myös Sony Ericssonin puhelimia.

Jos sivusto esittelee esimerkiksi valokuvia tai graafista suunnittelua, on selvää ettei se kiinnosta ainakaan sokeita. Tässäkään blogissa ei ole huomioitu täysin saavutettavuutta, koska olen aikaisemmin järkeillyt, että lukijakunta on lähinnä hyvin näkeviä webmastereita, markkinoijia, suunnittelijoita ja yrittäjiä. Toisaalta juuri tämä kirjoitus voisi aiheensa johdosta hyvinkin kiinnostaa jotakuta näkövammaista tai muuten esteettömästä suunnittelusta hyötyvää, joten taisin (taas) päätyä siihen ”suutarin lapset” -osastoon.

Miten markkinoida esteetöntä suunnittelua?

Eettisyys on minunkin mielestäni se tärkein peruste suunnitella saavutettavia web-sivuja. Yritysten liiketoimintaa ei kuitenkaan usein ohjaa moraali vaan voitontavoittelu. Siksi saavutettavuutta kannattaa markkinoida ovelammin kuin moraaliin vetoamalla.

Esteettömyys on seurausta hyvien web-standardien noudattamisesta. Näillä web-standardeilla on muitakin edullisia vaikutuksia kuin vammaisille saavutettava design. Siksi esteettömyyttä ei ehkä kannata nostaa markkinoinnin keskiöön vaan sitä voi esitellä yhtenä etuna web-standardien ja ajantasaisten työtapojen noudattamisesta.

Yksi web-standardien huomattava etu on hakukoneystävällisyys. Vaikka sivustolle joskus myöhemmin ostettaisiinkin myös erillistä hakukoneoptimointia, sekin tulee halvemmaksi jos sivujen lähdekoodia ei tarvitse uudistaa koska se on jo valmiiksi standardien mukaista. Ilmaiset asiakkaat hakukoneista kiinnostavat varmasti nuivempiakin web-suunnittelun tilaajia.

Lisää saavutettavuudesta ja sen myymisestä

Saavutettava.fi julkaisee silloin tällöin artikkeleita, uutisia ja mietteitä web-standardeista ja saavutettavuudesta.

Emil Virkki kirjoittaa esteettömän web-suunnitelun tuotteistamisen ja myynnin vaikeudesta.

Samainen Emil Virkki esittää yrityksensä sivuilla esteettömien web-sivujen hyötyjä ja tilastoja joidenkin erityisryhmien määristä Suomessa.

Lower-Literacy Users. Tässä on Jakob Nielsenin artikkeli joka oikeasti kannattaa lukea: heikkolukutaitoiset eivät ole suoranaisesti vammaisia mutta kuitenkin suuri ryhmä joka hyötyy saavutettavista ja käytettävistä web-sivuista.

Paul Boag opastaa ajattelemaan kuin asiakas. Suositeltavaa luettavaa asiakkaisiin tuskastuneille web-suunnittelijoille.

Saavutettavan suunnittelun osaajia

Suomestakin löytyy suunnittelijoita jotka kantavat saavutettavuuden ja web-standardien lyhtyä, esimerkiksi nämä kaksi:

Inventive Design. Yrittäjä Lasse Larvanko on kirjoittanut saavutettavuudesta myös sivuillaan olevassa yritysblogissa.

Rauha 2 Webdesign. Yrittäjä Emil Virkki on erikoistunut esteettömien sivustojen toteutukseen, saavutettavuutta koskevaan konsultointiin ja asiantuntija-arvioihin.