Selkeät ja helppokäyttöiset kotisivut vaatii tekijältä työtä ja ajattelua etukäteen. 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ä:
- Kerro viestisi lyhyesti ja selkeästi (selkokielellä)
- Älä pakota käyttäjää miettimään (liikoja)
- 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, jne. Kerro myös selkeästi missä käyttäjä sivuillasi on, jotta käyttäjän muistia ei kuormiteta. Hyvät, selkeät ja helppokäyttöiset kotisivut käyttävät yleisesti käytössä olevia kuvakkeita ja selkeitä toimintopainikkeita.
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:
- Wikipedian artikkeli käytettävyydestä »,
- Jukka Korpelan » (älä säikähdä sivuston karua ulkoasua) teksteihin,
- Jakob Nielsenin » ja Steve Krugin » (älä säikähdä sivuston karua ulkoasua) tuotantoa
- Suomenkielinen opinnäytetyö käytettävyydestä » (2015 © Kalle Mäkynen)
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).
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:
- HTML-ja XHTML -kielen opas » (https://fi.wikibooks.org/wiki/XHTML/HTML-opas).
- Web-julkaisemisen opas » Jukka Korpelalta (http://jkorpela.fi/www/indeksi.html)
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