Kun ulkonäkö menee käytettävyyden edelle, verkkosivuilla on iso ongelma
Verkkosivut voivat näyttää hyvältä ensisilmäyksellä, mutta ulkoasu ei kerro vielä siitä, miten hyvin sivusto toimii tai onko asioita suunniteltu käyttäjää ajatellen.
Pinnan alla ratkaisevat käytettävyys, rakenne ja hyvän hakukoneoptimoinnin edellytykset, jotka määrittävät, ymmärtääkö käyttäjä sivun ja löytääkö hän edes sinne. Siksi toimivaa verkkosivua kannattaa tarkastella myös visuaalisen ilmeen ulkopuolelta.
Sivut näyttävät kivalta, eikö se riitä?
Moni verkkosivuprojekti lähtee liikkeelle ulkoasusta. Värit, fontit ja visuaalinen ilme mietitään tarkasti ja lopputulos voikin näyttää upealta.
Silti sivusto ei välttämättä palvele käyttäjää.
Kun huomio keskittyy pintaan, helposti unohtuu se, mikä on sivustolla tärkeää: löytyykö tieto, toimivatko sivut, ymmärtääkö käyttäjä mitä tehdä seuraavaksi ja onko sivusto saavutettava kaikille.
Tämä ei ole pelkästään käytettävyyteen liittyvä kysymys. Samat asiat, jotka heikentävät saavutettavuutta, vaikuttavat suoraan myös hakukoneoptimointiin.
Ja juuri siksi kauniit verkkosivut eivät yksinkertaisesti riitä nykypäivänä.
Miksi saavutettavuus jää helposti taka-alalle
Kun verkkosivua suunnitellaan ensisijaisesti visuaalisuuden kautta, syntyy helposti ratkaisuja, jotka näyttävät hyvältä mutta eivät välttämättä toimi käytännössä.
Visuaalisuus ei vaikuta pelkästään siihen, miltä sivu näyttää, vaan myös siihen, miten se toimii.
Usein näyttävät elementit, kuten suuret kuvat, videot, animaatiot ja erilaiset efektit, tekevät sivustosta raskaamman. Tämä hidastaa latausaikoja ja heikentää herkästi käyttökokemusta erityisesti mobiilissa.
Kun sivu latautuu hitaasti tai reagoi viiveellä, käyttäjä poistuu helposti ennen kuin ehtii edes nähdä sisältöä. Vähintäänkin hidastelu ärsyttää, olemme tottuneet siihen, että tieto on saatavilla heti.
Samalla myös hakukoneet huomioivat sivuston suorituskyvyn osana arviointia, joten visuaaliset valinnat voivat vaikuttaa suoraan siihen, kuinka hyvin sivusto löytyy.
Lisäksi sisältö voi jäädä visuaalisten elementtien varjoon: teksti on vaikeasti luettavaa, rakenne epäselvä eikä sivu ohjaa käyttäjää eteenpäin.
Saavutettavuuden näkökulmasta nämä eivät ole pieniä yksityiskohtia, vaan keskeisiä asioita. Kansainväliset WCAG-ohjeistukset korostavat esimerkiksi riittävää kontrastia, selkeää rakennetta ja ymmärrettävää sisältöä eli juuri niitä asioita, jotka jäävät helposti taka-alalle, jos suunnittelu lähtee liikkeelle pelkästä ulkoasusta.
Kun sivusto ei ole saavutettava, se ei myöskään ole toimiva kaikille käyttäjille.
Mitä jos suunnittelisimme sivustoja automaattisesti kaikille?
Saavutettavuus pohjautuu ajatukseen, että suunnittelemme automaattisesti sivuston ihan jokaista käyttäjää varten. Verkkosivut tulisi aina rakentaa niin, että ne toimivat mahdollisimman monelle käyttäjälle erilaisissa tilanteissa. Tämä ei tarkoita erillistä lisäkerrosta, vaan tapaa ajatella suunnittelua alusta asti. Aihetta kaikille suunnittelu avataan hyvin Aalto-yliopiston Tietotekniikan laitoksen kirjoituksessa.
Saavutettavuus nähdään usein erillisenä vaatimuksena tai lisänä, joka otetaan huomioon vasta lopuksi tai kun on pakko. Todellisuudessa saavutettavuuden huomiointi on osa hyvää suunnittelua ja on mukana alusta alkaen.
Selkeä rakenne, ymmärrettävä sisältö ja looginen eteneminen eivät palvele vain erityisryhmiä, vaan kaikkia käyttäjiä. Juuri tätä ajatusta ”suunnittelu kaikille” tukee hyvin.
Väitän, että saavutettavuutta ei jätetä huomioimatta sen vuoksi, että se olisi vaikeaa, vaan siksi, että sen arvoa vähätellään. Ja tämä on oikeasti harmi!
Moni verkkosivuprojekti etenee niin, että huomio keskittyy vahvasti ulkoasuun. Visuaalisuus on konkreettista, siitä on helppo keskustella ja se on usein ensimmäinen asia, johon sekä tekijä että asiakas tarttuvat.
Sen sijaan saavutettavuus jää helposti taka-alalle. Se ei näy yhtä selvästi, eikä sitä välttämättä nosteta aktiivisesti esiin projektin aikana. Tämä ei johdu siitä, että saavutettavuus olisi vähemmän tärkeää, vaan siitä, että sitä ei aina osata huomioida osana kokonaisuutta.
Asiakkaan näkökulmasta tämä tekee tilanteesta haastavan. Jos saavutettavuudesta ei puhuta, sitä on vaikea myös vaatia.
Ja silloin lopputuloksena voi olla sivusto, joka näyttää hyvältä, mutta ei toimi kaikille käyttäjille ja sen myötä ei tue näkyvyyttä niin hyvin kuin voisi. Jokaisen verkkosivuja suunnittelevan olisi hyvä tutustua saavuettavuuden periaatteisiin ja ottaa ne osaksi omaa työskentelyään.
Saavutettavuuden puute näkyy myös hakutuloksissa
Hakukoneet ja tekoäly eivät arvioi sivustoa samalla tavalla kuin ihminen. Ne eivät näe visuaalista ilmettä, vaan tulkitsevat rakennetta, sisältöä ja kokonaisuutta. Hakukoneet näkevät myös sellaista, mitä sivuston käyttäjät eivät näe, kuten esimerkiksi strukturoidun datan.
Jos sivu on epäselvä käyttäjälle, se on yleensä epäselvä myös hakukoneelle ja tekoälylle.
Otsikkorakenne, sisällön loogisuus ja sivujen väliset yhteydet vaikuttavat siihen, miten hyvin sivusto ymmärretään ja miten se sijoittuu hakutuloksissa.
Siksi saavutettavuus ja hakukoneoptimointi eivät ole erillisiä asioita, vaan rakentuvat pitkälti samoista periaatteista.
Käytännössä tämä näkyy usein siinä, että sivun otsikointi ja kuvaukset eivät vastaa sisältöä. Esimerkiksi sivun title voi olla “Tervetuloa”, H1 “Etusivu” ja metakuvaus hyvin yleisluontoinen, vaikka sivulla kerrotaan tarkasti yrityksen palveluista.
Tällöin hakukoneelle jää epäselväksi, mistä sivussa oikeasti on kyse. Sama ongelma koskee myös käyttäjää: jos sivun pääviesti ei avaudu heti, on vaikea ymmärtää, onko sisältö relevanttia.
Selkeä ja saavutettava rakenne tarkoittaa sitä, että otsikot, kuvaukset ja sisältö tukevat toisiaan. Kun ne kertovat samaa tarinaa, sivu on helpompi ymmärtää sekä käyttäjälle että hakukoneelle. Jätetään siis morjenstukset suosiolla sinne arjen oikeisiin kohtaamisiin.
Merkit siitä, että saavutettavuuden kanssa on vielä tekemistä
Usein pinnan ehdoilla rakennettu verkkosivu näyttää ulospäin valmiilta, mutta ei ohjaa käyttäjää eteenpäin eikä kerro selkeästi, mistä on kyse.
Tyypillisiä merkkejä tästä ovat esimerkiksi:
Yksittäinen ongelma ei vielä kaada sivustoa, mutta yhdessä ne tekevät kokonaisuudesta vaikeasti hahmotettavan sekä käyttäjälle että hakukoneelle.
Työpaikkailmoituksissa toistuu todella usein, että ei kerrota, missä fyysisesti työpaikka sijaitsee ja tietoa ei näe helposti myöskään footerista. Innostus täydellisestä paikasta voi vaihtua pettymykseen, kun mainostettu lähityöskentelyä vaativa työpaikka ei olekaan Tampereen seudulla vaan Rovaniemellä.
Ongelma ei ole kauneudessa, vaan painotuksessa
Ja elkää ymmärtäkö väärin, visuaalisuus on tärkeä osa verkkosivua. Se luo ensivaikutelman yrityksestä ja tukee brändiä.
Ongelma syntyy silloin, kun visuaalisuus alkaa ohjata ratkaisuja enemmän kuin sisältö, rakenne ja toimivuus.
Toimiva verkkosivu ei ole joko kaunis tai käytettävä, vaan molempia. Visuaalisten ratkaisujen pitäisi tukea ymmärtämistä, ei vaikeuttaa sitä.
Kohti kaikille suunniteltuja sivustoja
Toimivan verkkosivun lähtökohta ei ole ulkoasu, vaan rakenne.
Kyse on siitä, miten tieto esitetään, miten käyttäjä etenee sivulla ja miten kokonaisuus tukee sitä, mitä sivustolla halutaan saavuttaa.
Kun rakenne on selkeä, myös saavutettavuus ja hakukoneoptimointi rakentuvat luonnollisesti sen päälle.
Tällöin visuaalisuus saa oikean roolin: se tukee sisältöä, ohjaa käyttäjää ja tekee kokonaisuudesta helpommin ymmärrettävän.
Hyvä verkkosivu ei synny yksittäisistä valinnoista, vaan kokonaisuudesta.
Kun rakenne, saavutettavuus ja sisältö tukevat toisiaan, sivusto ei ainoastaan näytä hyvältä, vaan myös toimii sekä käyttäjälle että hakukoneelle. Ja silloin se alkaa myös tuottaa tuloksia.
Lopuksi
Jos verkkosivut eivät tuo toivottuja tuloksia, se ei tarkoita, että ne olisivat huonot.
Usein kyse on siitä, mihin asioihin suunnittelussa on keskitytty.
Kun huomio siirtyy pelkästä ulkoasusta siihen, miten sivusto oikeasti toimii, muuttuu myös lopputulos.
Pienikin muutos ajattelussa voi vaikuttaa yllättävän paljon siihen, miten sivusto palvelee käyttäjiä ja miten hyvin se tukee yrityksen tavoitteita ja näkyvyyttä.
Jos haluat tutkia oman sivustosi saavuuteen liittyviä asioita niin WAVE Web Accessibility Evaluation -sivuston työkalut ovat tähän tarkoitukseen erinomaisia.
Lisätietoa saavutettavuudesta
Jos haluat syventää ymmärrystä saavutettavuudesta, näistä lähteistä löydät tarkempaa tietoa ja ohjeita:
Saavutettavuusvaatimukset: Tietoa saavutettavuudesta
Saavutettavuusvaatimukset: Ohjeita suunnittelun tueksi
Saavutettavasti.fi: Verkkosisältöjen saavutettavuus
W3: Accessibility Fundamentals Overview
Tarvitsetko apua sivustosi saavutettavuuden parantamisessa?
Voin auttaa sinua tarkastelemaan sivustoasi käytettävyyden, saavutettavuuden ja näkyvyyden näkökulmasta.