Tässä kolmannessa ja viimeisessä sarjan osassa käymme läpi verkkosivuston käyttöliittymää. Saavutettava käyttöliittymä tekee sivustosta saavutettavan lisäksi myös esteettömän. Esteettömyyden ja saavutettavuuden ero tässä tapauksessa on se, että jos sivusto ei ole esteetön, sen käytön ongelman vaikuttavat kaikkiin käyttäjiin. Saavutettavuuden ongelmat koskettavat enemmän vain käyttäjiä, joilla on jokin rajoite.

Navigointi

Navigointi sivustolla on tärkeässä osassa sivuston käytettävyyttä. Yläpalkin tai sivupalkin valikon tulisi olla jokaisella sivulla yhtenäinen, jotta käyttäjä ei hämmenny siirtyessään sivulta toiselle. Yhtenäinen valikko tekee sivusta helpommin ennalta-arvattavan ja myös ulkoasusta siistimmän.

Valikoiden otsikoiden olisi hyvä olla yhden tai kahden sanan mittaisia ja kuvata mahdollisimman hyvin sivun sisältöä. Suositeltavaa on pitää alaotsikoiden määrä myös kohtuullisena, jos se vain on mahdollista.

Valikon alavalikoiden tulisi aueta klikkaamalla ylempää otsikkotasoa. Ongelmia syntyy usein hover-tyyppisissä valikoissa (joissa alavalikko aukeaa viemällä hiiren valikon otsikon päälle). Jos käyttäjällä ei ole esimerkiksi hyvä silmä-käsi koordinaatio, voi tällaisen valikon avaaminen olla vaikeaa. Hiiren lipsahtaessa pois otsikon päältä, valikko sulkeutuu ja täytyy yrittää jälleen uudelleen. Kuulostaa turhauttavalta, eikö?

Painikkeet

Kirjoita painikkeeseen teksti, joka kertoo käyttäjälle mitä painikkeesta tapahtuu. Älä siis käytä ”lue lisää” ja ”klikkaa tästä” tyyppisiä tekstejä, koska ne eivät kerro käyttäjälle mitään. Luo painikkeille erottuva ulkoasu ja pidä se yhtenäisenä koko sivustollasi. Tämä helpottaa käyttäjää erottamaan sisällön joukosta painikkeet ja nopeuttaa sivuston käyttöä.

Painikkeissa tulee käyttää niille kuuluvaa <button> elementtiä koodissa. Näin myös ruudunlukijan käyttäjä tietää kyseessä olevan painikkeen. Koodatessa painikkeelle voi määritellä myös tyypin käyttötarkoituksen mukaan (tyypit: button, reset ja submit). WordPressillä sivustoa luodessa nämä määritykset tulevat usein automaattisesti, jos vain käyttää oikeaa elementtiä.

Lomakkeet

Jos sivustollasi on paljon lomakkeita, käytä niissä samanlaista tyyliä. Otsikoi lomakkeen kentät (koodatessa käytä <label>) selkeästi ja kerro mitä haluat käyttäjän kirjoittavan tekstikenttään. Yleensä lomakkeiden kenttiin on myös helppoa lisätä esimerkkiteksti, joka kertoo käyttäjälle mitä kenttään toivotaan kirjoitettavan. Esimerkiksi sähköpostikentässä voi lukea valmiiksi ”example@mail.com” ja kun käyttäjä klikkaa kentän aktiiviseksi, tämä esimerkkiteksti katoaa. Tällä tavoin käyttäjälle ei pitäisi jäädä epäselväksi mitä kenttään tulee syöttää.

Lomakkeisiin voi lisätä ominaisuuden, joka korostaa aktiivista kenttää vaikkapa värillisin reunoin. Tämä ominaisuus voi helpottaa joitakin käyttäjiä pysymään kartalla siitä, missä kohtaa on menossa.

Pakolliset kentät kannattaa merkitä jollain näkyvällä tavalla. Pelkästään värillä korostus ei riitä. Yleisimmin käytetty on tähtimerkki *. Tällöin lomakkeen alkuun tai loppuun lisätään selitys ”pakolliset kentät merkitty tähdellä *”. Merkin lisäksi voidaan käyttää korostusväriä.

Jos lomakkeen lähetys sivustolla epäonnistuu, varmista käyttäjän tietävän miksi näin kävi. Pakollisten kenttien ollessa tyhjänä voi vaikka korostaa nämä kentät värillä ja huutomerkillä, sekä antaa lähetyspainikkeen päälle tekstin ”täytä pakolliset kentät”. Anna käyttäjälle myös ilmoitus siitä, kun lomake on lähetetty onnistuneesti. Ilmoitus voi tulla joko sivustolle tai vaikka käyttäjän antamaan sähköpostiosoitteeseen.

Toistuvuus

Saavutettava sivusto on sisällöltään edellä mainittujen asioiden lisäksi myös toistuva ja ennalta-arvattava. Toistuva sivusto on nopeampi käyttää kuin sellainen, jossa sisällön paikat vaihtelevat suuresti ja ulkoasu muuttuu sivustoa selatessa.

Esimerkki toistuvuudesta on tekstin ja kuvien asettelu sivulla. Kun kaikilla sivuilla teksti on yhtä leveästi asetettu sivulle, on se helppo lukea ja näyttää visuaalisesti hyvältä. Jos haluat myös käyttää bannerikuvia sivustolla, varmista niiden toistuvuus jokaisella sivulla.  Kuvituskuvien on hyvä myös olla suunnilleen samaa kokoluokkaa, jotta ne näyttävät yhteneväiseltä eivätkä häiritse suuresti tekstin lukua.

Kirjoittajasta

Reetta Tanskanen.

Reetta Tanskanen
CPACC, Web-suunnittelija
reetta[at]funlus.fi
https://www.linkedin.com/in/reetta-tanskanen-1008a4160/