Miten teen selkeät ja helppokäyttöiset kotisivut?

Miten teen selkeät ja helppokäyttöiset kotisivut?

Annan muutaman vinkin siitä miten voit parantaa kotisivujesi käytettävyyttä, eli miten tehdä hyvät kotisivut. Kotisivujen tärkein tarkoitus on toimittaa käyttäjälle hänen etsimänsä sisältö selkeästi, nopeasti ja helposti.

Käytettävyydellä on suuri merkitys vierailijoiden viihtyvyyteen sivuillasi ja täten sen tekijä myynnin edistäjänä tulisi ottaa huomioon. Palveluita myyvän sivuston on hyvä tehdä asioita käyttömukavuuden edistämiseksi, jotta kävijä pysyisi sivuillasi mahdollisimman pitkään.

Suositukseni TOP 3 käytettävyysvinkistä:

  1. Kerro viestisi lyhyesti ja selkeästi (selkokielellä)
  2. Älä pakota käyttäjää miettimään (liikoja)
  3. Suosi yksinkertaisuutta

1. Kerro viestisi lyhyesti ja selkeästi

Mene heti asiaan. Tärkein asia sivun yläosaan. Voit kertoa asiasta alempana tarkemmin tai käyttää alisivuja tiettyjen asioiden tarkempaan kuvaamiseen.

Käytä kohtuu napakoita tekstikappaleita ja rytmitä lukemista mukavasti väliotsikoin ja kuvin. Kerro asiasi ytimekkäästi välttäen ammattisanastoa: älä hämmennä käyttäjää erikoisilla sanoilla.

Käytä kuvaavia otsikoita ja linkkejä, jotta käyttäjä tietää missä kerrotaan mistäkin ja minne siirrytään jos linkistä klikkaa. Otsikoiden ja kappaleiden lisäksi kannattaa miettiä olennaisten kuvien lisäämistä tekstin sekaan, ettei koko sivu ole täynnä pelkkää tekstiä.

2. Älä laita käyttäjää miettimään

Vältä tilanteita, missä käyttäjä joutuu miettimään tai ponnistelemaan mitä seuraavaksi tapahtuu jos painan tästä, mistä löydän asian Y, missä olen, mitä olen lukemassa, yms. Kerro myös selkeästi missä käyttäjä sivuillasi on, jotta käyttäjän muistia ei kuormiteta.

Suosi nettipuolella vakiintuneita käytäntöjä:

  • linkkien korostus (väri ja alleviivaus/koroste eroaa leipätekstistä)
  • ikonit/painikkeet yleisten toimintojen mukaisina (X sulkee, yms)
  • painikkeiden ja valikkojen sijainnit (logosta etusivulle, ylhäällä päävalikko, yms)
  • miten www-sivusto toimii, mistä löytää navigaatiolinkit, miten hakea

 

Kannattaa myös käyttää hypertekstin (eli ”www-sivun”) ominaisuuksia hyväksi: voit luoda linkkejä asiayhteyksien lähelle, niitä kuvaavilla linkkiteksteillä. Näin käyttäjä pääsee siirtymään suoraan asiaan avainsanoista. Vältä siis ”avataan tästä”, dokumentti löytyy ”tästä”. Linkitä ennemmin sisältö suoraan sitä kuvaaviin sanoihin.

Esimerkki:

Kirjoitin fontin selvittämisestä vinkkejä.

Järjestä sivusi mahdollisimman yleisen ymmärryksen mukaisesti: yhteystiedot-sivulta löytyy yhteystiedot ja lomakkeet;  palveluiden alla kaikki palvelut/tuotteet ja niiden alasivut; jne.

Lue lisää ideasta ”älä laita minua miettimään” » (engl.).

3. Suosi yksinkertaisuutta

KISS (Keep It Simple, Stupid) toimii aina. Liittyy myös kohtaan kaksi (Älä pakota käyttäjää miettimään), missä pyritään välttämään käyttäjältä liikoja ponnisteluita sivuston käytössä ja käyttöliittymän ymmärtämisessä. Käyttäjävirheitä syntyy yllättävän helposti jos vakiintuneista käytöistä poiketaan – ellet ole sattunut keksimään todella intuitiivista tapaa kuvata/visualisoida uusi asiointitapa.

On riskialtista yrittää keksiä pyörää uudelleen: pahimmillaan sivut (eli sivujen käyttäjät) kärsivät epäloogisen ratkaisun vuoksi ja menetät lukijoita.

Ei vilkkumista ja välkkymistä: 90-luku oli ja meni.

Miten testaan käytettävyyttä?

Jos käytettävyys kiinnostaa enemmän, kannattaa tutustua asiaan tarkemmin esimerkiksi aloittamalla:

Voit ottaa tämän jälkeen mahdollisesti yhteyttä käytettävyystestausta tekeviin yrityksiin. Käytettävyystestaukset eivät välttämättä ole mahdottoman kalliita. Nauhoitettavat loppukäyttäjätestit käytettävyysanalyyseineen toki maksaa jo enemmän, mutta nopeasti ja edullisesti pääsee alkuun.

Huomioi eri päätelaitteet.

Netissä surffataan yhä enemmän puhelimilla ja tableteilla. Kannattaa varmistaa, että sivusto sopeutuu myös mobiililaitteille hyvin. Sopeutuvasta ulkoasusta käytetään nimitystä responsiivinen ulkoasu. Jokaisessa www-sivujen toteutuksessani on responsiivinen ulkoasu. Mobile first -nimistä (mobiili ensin) toteutustapaa suositaan monesti, sillä se aiheuttaa vähiten ongelmia, kun sisältö tulee näkyä myös puhelimella.

Hakukoneoptimointi

Kun sisältö on hyvin rakennettu ja sivusto on selkeä, kannattaa suunnata kohti sivustosi löydettävyyden parantamista. Käytännössä se tarkoittaa hakukoneoptimointia (SEO= Search Engine Optimization) ja markkinointia (mainokset, Google-mainonta, Facebook-mainonta, yms).

Kuvan ottanut: Angelo Giordano @ Pixabay.com

Hakukoneoptimointi kuuluu osaksi mm. www-sivu-palveluani, mutta niitä voi tilata myös erikseen – toimittajasta riippumattomasti. Hakukoneoptimoinnista ei kuitenkaan kannata maksaa liikaa vaan lähteä perusteista (sisältö, kuvaukset, avainsanat,  sivustokartta, yms) ja katsoa miten näkyvyys edistyy ennen suurempia ostopalveluita.

HTML-kieli eli kotisivujen koodi

Kotisivut on rakennettu yleensä HTML-merkkikielellä (tai vastaavalla). Nettiselain lukee koodin ja tulkkaa/parsii sen käyttäjän näytölle luettavaksi, kuvineen ja linkkeineen. Tavallinen käyttäjä ei siis koskaan näe itse sivun ”rakentamiskoodia” – vaan esitettävän sisällön.

Joskus on hyvä hallita hieman HTML-kieltä, jotta voit siivota mahdollisen sisältöeditorin virheitä tai edistyneempänä käyttäjänä lisätä jopa omaa koodia sivuille sisällön sekaan.

Tämän vuoksi voi olla hyvä lukaista vaikka:

Jotkin asiat eivät vanhene – tai säilyttävät ainakin hyvän perusperiaatteen nettimaailmassa (netiketti) sekä hyviä ja selkeyttäviä käytäntöjä. Seuraavassa linkkejä, vaikka osa artikkeleista onkin 90-luvulta.

Top 10 mistakes in Web Design:
http://www.useit.com/alertbox/990516.html
1996: http://www.useit.com/alertbox/9605.html
2002: http://www.useit.com/alertbox/20021223.html
1999: http://www.useit.com/alertbox/990530.html

Changes in Web Usability Since 1994:
http://www.useit.com/alertbox/9712a.html
How Users Read on the Web:
http://www.useit.com/alertbox/9710a.html