Silmäiltävä ja selkeä rakenne

Tee sisällöstä helposti silmäiltävää.
Sijoita tärkein asia sivun alkuun.
Rakenna sisältö selkeäksi kokonaisuudeksi.
Käytä otsikointia oikein.

Tee sisällöstä helposti silmäiltävää

Verkkosivuja luetaan silmäillen. Lukija silmäilee verkkosivun sisältöä joko saadakseen sen sisällöstä yleiskuvan tai löytääkseen etsimäänsä tietoa.

Siihen, miten verkkosivua silmäillään, vaikuttavat käyttäjän tavoite tai tehtävä sivulla, käyttöliittymän ulkoasu ja sivun sisältö. Tekstivoittoisilla verkkosivuilla lukija aloittaa silmäilyn yleensä sivun yläosasta. Sitten hän etenee alaspäin ja poimii niitä kohtia, joihin silmä osuu ja jotka tuntuvat itselle tärkeimmiltä.

Huolehdi, että lukija saa silmäilemällä käsityksen koko sisällöstä. Silmäilyä tukevasta tekstistä lukijan on helppo nähdä, mitkä kohdat hän haluaa lukea ja mitkä hän voi ohittaa. Suuret tekstimassat ohitetaan nopeasti. Sisällön tärkeimmät asiat kannattaa sijoittaa silmäilyä tukeviin kohtiin, joita ovat esimerkiksi väliotsikot, kappaleiden alut ja luetelmat.

  • Väliotsikot
    Käytä sopivan tiheästi väliotsikoita, joihin on sijoitettu sisältöä kuvaavia avainsanoja.
  • Kappaleiden alut
    Aloita kappaleet napakalla virkkeellä, joka esittelee aiheen. Tee kappaleenvaihto, kun asia vaihtuu.
  • Luetelmat
    Esitä asiat luettelomuodossa, kun se on luontevaa. Huolehdi, että luetelma on selkeä ja kaikki luetelman kohdat ovat rakenteeltaan samanlaisia.

Sijoita tärkein asia sivun alkuun

Esitä sisällön tärkein asia heti sivun alussa. Mieti, mikä on tekstin lukijan näkökulmasta tärkein asia, ja mene suoraan asiaan.

Sen jälkeen voit

  • kertoa aiheesta tarkemmin
  • antaa esimerkkejä ja havainnollistaa aihetta
  • ohjata lukijan lopuksi eteenpäin esimerkiksi lisätiedon äärelle toiselle sivulle, toiseen palvelukanavaan tai ottamaan yhteyttä.

Jos sivun tärkein tehtävä on ohjata lukijaa toimimaan esimerkiksi verkkoasioinnissa, sijoita tällainen toiminto sivun alkuun, niin että sivua ei tarvitse vierittää ja toimintoa etsiä. Moni käyttäjä ei vieritä sivua alaspäin vaan etsii tietoa ruudulle rajautuvasta näkymästä.

Varmista, että tärkein sisältö näkyy selkeästi myös mobiilikoossa.

Vinkki

Sisällön selkeyteen voi auttaa myös se, että esittelee aiheesta ensin kaikkein yleisimmän tapauksen ja vasta myöhemmässä vaiheessa sisällössä muut erikoistapaukset tai poikkeukset.

Näin sivun alkuun ei pakkaudu liikaa erilaisia vaihtoehtoja vaan lukija voi saada nopeammin selkeän peruskuvan asiasta.

Rakenna sisältö selkeäksi kokonaisuudeksi

Jaa sisältö sopivan kokoisiin kappaleisiin. Se helpottaa lukemista ja ymmärtämistä.

Käsittele yhdessä kappaleessa vain yhtä pääasiaa, ja aloita kappale tärkeimmällä asialla.

  • Aloita kappale napakalla virkkeellä, joka esittelee aiheen.
  • Jatka selittävillä, täsmentävillä tai esimerkiksi havainnollistavilla virkkeillä.
  • Kun aihe vaihtuu, tee kappaleenvaihto.

Kevyt kappale- ja virkerakenne helpottaa lukemista. Hyvä nyrkkisääntö on, että kappaleessa on korkeintaan neljä virkettä ja virkkeessä on yleensä korkeintaan kolme lausetta.

Etene johdonmukaisesti. Mieti, mikä on tekstin keskeinen tehtävä, ja etene sen mukaisessa järjestyksessä. Esimerkiksi toimintaohjeissa kannattaa noudattaa toimintojen aikajärjestystä.

Otsikoi huolellisesti

Mieti, mikä on olennaista sisällössä, ja kirjoita se otsikkoon. Hyvä otsikointi helpottaa sisällön hahmottamista ja kokonaiskuvan saamista. Hyvän otsikoinnin avulla sisällöt myös löytyvät paremmin hakukoneista.

Verkkosivulla voi olla vain yksi pääotsikko, joka kertoo kaikkein tärkeimmän asian lukijan näkökulmasta. Pääotsikon lisäksi sisällössä voi olla useita väliotsikoita, jotka jaksottavat tekstiä. Huolehdi, että otsikot vastaavat sisältöä.

Lausemuotoinen otsikko on usein toimiva, ja siihen saa helpommin lukijan näkökulman. Aktiivinen otsikko houkuttelee ja ohjaa toimimaan.

Esimerkki

Näin: Kaikille palkkatuloille on vain yksi verokortti
Ei näin: Palkansaajan verokortti

Näin: Asioi verkossa
Ei näin: Verkossa asioiminen

Vinkki

Kokeile lukea sivulta pelkät otsikot. Saatko niiden avulla käsityksen sivun sisällöstä kokonaisuutena?

Otsikkotasot muodostavat hierarkkisen rakenteen:

  • Jokaisella sivulla on vain yksi pääotsikko eli H1-taso.
    • Ensimmäisen tason väliotsikot = H2-taso.
      • Toisen tason väliotsikot = H3-taso.

Otsikkotasojen valinnassa kannattaa muistaa, että valintaa ei voi tehdä otsikon visuaalisen ilmeen tai tyylin perusteella. Otsikkotasojen on edettävä loogisesti oikeassa järjestyksessä myös teknisessä toteutuksessa. Näin niistä välittyy tieto myös esimerkiksi ruudunlukijakäyttäjälle.

Esimerkki

Tämän sivun otsikot noudattavat seuraavanlaista rakennetta:

  • Silmäiltävä ja selkeä rakenne (H1, pääotsikko)
    • Tee sisällöstä helposti silmäiltävää (H2)
      • Lue lisää (H3)
    • Sijoita tärkein asia alkuun (H2)
      • Työpohja (H3)
      • Vinkki (H3)
      • Lue lisää (H3)
    • Rakenna sisältö selkeäksi kokonaisuudeksi (H2)
      • Lue lisää (H3)
    • Käytä otsikointia oikein (H2)
      • Esimerkki (H3)
      • Esimerkki (H3)
      • Lue lisää (H3)