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, esimerkiksi pelkkiä artikkeleita, vaikka osalle kävijöistä luontevampi omaksumismuoto olisi video. Esimerkiksi sisällön esittäminen pelkkinä slaideina voi turhaan rajoittaa sen kulutusta.

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. Katso vaikka miten voi laskea hitaasti latautuvien sivujen tuomat menetykset.

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.

1. Global white space reset

Eri selaimet antavat XHTML- ja HTML-elementeille oletuksina erilaisia padding- ja margin-arvoja. Tästä syystä monet web-suunnittelijat ovat tottuneet nollaamaan näiden arvot usealle elementille erikseen, mikä lisää koodin määrää. Asian voi kuitenkin hoitaa kerralla kuntoon Global white space reset -nimisellä CSS-tempulla aivan CSS-tiedoston alussa. Näin:

* {
padding: 0;
margin: 0;
}


2. Letter-spacing

Tekstiä voi korostaa tai tehdä helpommin luettavaksi kasvattamalla kirjainten etäisyyttä toisistaan. Tätä voi käyttää myös linkkien tai lihavointien tyylikeinona. Vastaavaa korostuskeinoa näkee joskus vanhoissa kirjoissa.

strong {
letter-spacing: 0.1em;
}

Tällaiselta se näyttää: strong-elementti (lihavointi), jonka kirjainten väliksi on asetettu 0.1em.

3. White-space: pre

Huvittaisiko joskus saada tilaefekti pelkillä välilyönneillä ilman mittojen CSS-säätämistä? Tämä onnistuu asettamalla elementille “white-space: pre” -ominaisuus. Se kertoo selaimelle että kaikki välilyönnit on näytettävä.

p.vapaa_muotoilu {
white-space: pre;
}

Välilyönnit ja white-space:pre sallivat vapaat muotoilut

aivan kuten runoudessa

4. Monospace-fontti + white-space: pre = taulukko

Haluatko saada taulukkomaisen vaikutelman minimaalisella koodilla? CSS-määritys “white-space: pre” yhdistettynä välilyönteihin ja tasalevyiseen eli monospace-fonttiin tuottaa pienen taulukon ilman turhaa HTML-koodia. Yksi hyvä monospace-fontti on esimerkiksi Courier New.

p.taulukko {
font-family: "Courier New", monospace;
white-space: pre;
}

Kielitaito:

englanti: erinomainen

ruotsi: tyydyttävä

saksa: tyydyttävä

5. Word-spacing

CSS:n word-spacing -ominaisuutta voi käyttää sanojen välisen tilan kasvattamiseen tai vähentämiseen. Joillakin fonteilla ja ulkoasuilla kasvattaminen saattaa parantaa luettavuutta, usein siitä ei ole mitään hyötyä. Vähentämistä voi kuitenkin käyttää hakukoneoptimointiin…

Google ei pysty tunnistamaan suomenkielisten yhdyssanojen osasanoja. Jos luovuus tai aika ei riitä tämän ongelman kiertämiseen hakukoneoptimoinnissa, asia voidaan ratkaista naamioimalla CSS-tyylisäännöllä kaksi tai useampi erillistä sanaa yhdyssanaksi. Word-spacing -arvon tulee tällöin olla negatiivinen, esimerkiksi näin:

span.yhteen {
word-spacing: -0.3em;
}

Ja HTML:

<p>Tämän blogin aiheita on mm. <span class="yhteen">hakukone optimointi tekniikat</span>.</p>

Tältä se näyttää:
Tämän blogin aiheita on mm. hakukone optimointi tekniikat.

Onko tämän vinkin soveltaminen hakukoneiden spämmäämistä? Uskallan väittää, että hakutulokset muuttuisivat monelle suomalaiselle huonommiksi, jos web-sivut eivät edes vahingossa huomioisi yhdyssanavirheitä (tai “osiinsa analysoituja tapoja käsitteellistää asioita” jos haluaa olla ymmärtäväinen) . Esimerkkikin (hakukone optimointi tekniikat) on poimittu tämän blogin Google Analytics -tilastoista eli joku on suorittanut noilla sanoilla Google-haun.

Mielestäni ihmisten todelliseen kielenkäyttöön perustuva hakukoneoptimointi ei ole eettisesti ongelmallista (enkä nyt tarkoita satunnaisia kirjoitusvirheitä varten optimointia). Ääniselaimia tai pistenäyttöjä käyttävät sokeat ja tekstiselainten käyttäjät tosin huomaavat piilotetut yhdyssanavirheet, joten esimerkiksi julkisen sektorin sivuilla tätä CSS-kikkaa ei kannata käyttää vaikka se ei sivujen käytettävyyttä varsinaisesti tuhoakaan.

6. Position: absolute

Joskus sivuille pitää sisällyttää esimerkiksi Javascript-elemettejä, jotka hidastavat sivun latautumista. Tämän haittavaikutus varsinaisen tekstisisällön käytettävyydelle voidaan kiertää laittamalla elementit HTML-koodin loppuun ja pakottamalla niiden paikka sivulla CSS-tiedostossa.

Sivun ylälaidassa oleva AdSense-mainos voi latautua latautua vasta viimeiseksi, kun sen sisältävälle div-elementille on määritetty “position: absolute” -ominaisuus. Tämän div-elementin paikka voidaan sitten asettaa top-, left-, right- ja bottom-ominaisuuksien avulla. Usein riittää vain top- ja left-ominaisuuksien käyttö – erityisesti kiinteän leveyden eli fixed width -leiskoissa.

div#ylin_mainos {
position: absolute;
top: 0;
left: 20em;
}

7. Useita luokkia samassa class-attribuutissa

CSS sallii useamman kuin yhden luokan (class) käytön samalle HTML-elementille, mikä vähentää ylimääräistä koodia. Eri luokat erotetaan toisistaan välilyönneillä:

<p class="kuvateksti oikealla">A List Apart on valinnut ison rivivälin, mikä helpottaa lukemista.</p>

Jos luokkien “kuvateksti” ja “oikealla” määritykset ovat keskenään ristiriidassa, käytettävä tyyli määräytyy CSS:n cascade-prosessin mukaisesti.

Vinkki: luokkia voi käyttää tyylin määrittämisen lisäksi XHTML- ja HTML-elementtien käsittelyyn Javascriptillä.

8. Mozilla-spesifit määritykset

Haluatko suosia Firefoxin käyttäjiä makeammalla ulkoasulla? Tämä onnistuu Mozillan omilla CSS-määrityksillä, jotka eivät toimi muissa selaimissa. Esimerkiksi pyöreät kulmat saa tähän tyyliin:

div#main {
-moz-border-radius: 18px;
}

9. Riittävä riviväli

Monet ammattimaisetkin web-suunnittelua tarjoavat yritykset sortuvat tähän: tekstirivien välissä ei ole tarpeeksi tilaa, jolloin teksti näyttää luotaantyöntävän monotoniselta blokilta. Tässä ei niin esimerkillinen näyte A4 Median blogista:

Riviväliä voi säätää suuremmaksi line-height -ominaisuudella, joka tarkalleen ottaen asettaa rivin korkeuden. Usein tämä toimenpide kannattaa yhdistää pienehköön fonttikokoon parhaimman luettavuuden aikaansaamiseksi. Tässä esimerkki A List Apart -sivustolta, miten iso riviväli parantaa luettavuutta:

Rivin korkeus poikkeaa muista CSS-määrityksistä siinä, ettei mittayksikköä tarvitse välttämättä käyttää vaan arvoksi voi laittaa kerroinluvun:

p, li {
line-height: 1.5;
}

10. Avatun sivun valikkolinkin korostaminen

CMS:t eli sisällönhallintajärjestelmät ovat totuttaneet meidät siihen, että valikon kulloinkin avattuun sivuun johtavat linkit eivät aina poikkea muista ja että ne ovat ylipäätään toimivia linkkejä. Tämä on käytettävyyden kannalta hieman ongelmallista, jos linkkiä ei tarvita esimerkiksi sivuston sisällön päivittämiseen (refresh).

Mainostoimisto Mediakolmio on huomioinut käytettävyyden sivustonsa suunnittelussa:

Sivuun itseensä viittaava linkki kannattaa siis muokata valikossa erinäköiseksi. Tämä tapahtuu yksinkertaisimmillaan laittamalla avoimen sivun a-elementille esimerkiksi attribuutti id=”nykyinen” ja tyylittelemällä tämä linkki muista valikon linkeistä poikkeavalla CSS-määrityksellä. Jos linkin haluaa muuttaa lisäksi toimimattomaksi, href-attribuutti voidaan jättää a-elementistä kokonaan pois.

Manuaalinen nimeäminen jokaiselle sivulle erikseen on kuitenkin työlästä, joten asiassa voi hyödyntää joka sivulle yksillöllisesti nimettyjä body-tageja: <body id=”palvelut”>, <body id=”tuotteet”> jne. Valikossa oleville linkeille annetaan sen jälkeen class-attribuutit:

<ul>
<li><a href="index.html" class="etusivu">Etusivu</a></li>
<li><a href="palvelut.html" class="palvelut">Palvelut</a></li>
<li><a href="tuotteet.html" class="tuotteet">Tuotteet</a></li>
<li><a href="yhteystiedot.html" class="yhteystiedot">Yhteystiedot</a></li>
</ul>

CSS näyttää tällaiselta:

#etusivu .etusivu, #palvelut .palvelut, #tuotteet .tuotteet, #yhteystiedot .yhteystiedot {
laita tähän miltä haluat korostetun linkin näyttävän
}

Vaihtoehtoisesti linkin muotoilun voi myös automatisoida PHP:llä tai muulla web-ohjelmointiin käytettävällä kielellä. Tästä ei ole haittaa latautumisnopeudelle, jos cache- eli välimuistiin liittyvät asetukset ovat kunnossa.