Artikkeli

Sivuston helppokäyttöisyys: vauhdita verkkokauppaasi saavutettavuudella

Jesper Dalgas Zachariassen
02 maaliskuuta 2018

 

”Älä testaa asiakkaidesi kärsivällisyyttä.”

Useimmat verkkokauppiaat pitänevät tätä hyvänä ohjeena.

Verkkokauppoja on paljon, eivätkä ostajat viihdy pitkään sivustolla, jolla ostaminen on hankalaa tai hämmentävää. Olemme jo käsitelleet ostoskorin hylkäämistä, ja voit lukea artikkelin tästä.

Koska ostokokemus on myynnin kannalta ratkaiseva, jää myyntiä paljon toteutumatta, jos sivustoa ei voi käyttää.

Konversioaste on verkkokaupan ratkaiseva menestystekijä. Tuttu juttu. Olet todennäköisesti käyttänyt tuntikausia sen varmistamiseen, että sivusto toimii eri selaimissa.

Mutta oletko varmistanut, että se toimii eri ihmisillä?

Tässä artikkelissa paneudutaan käytettävyyteen. Saat kahdeksan perusohjetta, joiden avulla teet sivustostasi saavutettavan.

Saavutettavuus kunniaan

Yksi sivuston käyttökokemuksen tärkeä osa-alue on sen helppokäyttöisyys (ja saavutettavuus).

Vaikka helppokäyttöisyyden optimointi on suhteellisen edullinen tapa varmistaa asiakkaille hyvä ostoskokemus, se jää usein vähälle huomiolle.

Tämä on sääli, sillä helppokäyttöisyydellä on valtava vaikutus sivustoon, vaikka asia on sinänsä yksinkertainen.

Verrataanpa vähän…

Kuvittele, että omistat monikerroksisen myymälän keskellä suurkaupunkia. Pysäköintipaikkoja ei ole. Asiakkaiden käytössä on vain yksi ahdas sisäänkäynti, ja puolet asiakkaista iskee varpaansa kynnykseen. Ainoa reitti kerroksesta toiseen on jyrkkä portaikko, joka on piilossa oven takana myymälän perällä. Tuotteet ovat esillä sikin sokin ja monelle hyllylle yltää vain tikkailla.

On helppo sanoa, että tällaisessa myymälässä ostokokemuksesta ei tule kovin hyvää – eikä sen käytettävyys ole kunnossa.

Kuvittele sitten naapuriin toinen myymälä, joka tarjoaa saman tuotevalikoiman. Sillä on oma pysäköintihalli, suuret automaattiset liukuovet ilman kynnyksiä ja useita hissejä lähellä sisäänkäyntiä. Tuoteosastot ovat hyvin järjestettyjä karttaohjeineen, ja kaikki tuotteet on helppo löytää ilman apua. Tuotteet kuitenkin maksavat hieman enemmän kuin sinulla.

Kumpaan myymälään asiakkaat mahtavat mennä?

Pyörätuolissa kulkeva asiakas pääsee myymälääsi vain vaivoin ja ylempiin kerroksiin pääsystä hän voi vain haaveilla. Naapurimyymälässä pyörätuoli ei ole ongelma, ja kaikki muutkin hyötyvät hisseistä. Autistisen henkilön on vaikeaa tai mahdotonta kulkea epäjärjestyksessä olevien tuotteiden seassa, kun taas hyvästä järjestyksestä hyötyvät kaikki.

Toisen myymälän käytettävyys on parempi, ja se tarjoaa paremman ostokokemuksen kaikille.

Verkkokaupat ovat oma lukunsa.

Ostokokemus ja käytettävyys ovat verkkokauppojen osalta paljon uudempi aihe kuin vanhoissa kivijalkakaupoissa. Lisäksi verkkokaupan ostokokemuksen suunnittelijat eivät ole välttämättä koskaan tavanneet asiakkaitasi. Tuntevatko he asiakassegmenttisi? Tunnetko itse oman asiakassegmenttisi?

Maailman terveysjärjestön (WHO) mukaan noin 15 %:lla ihmisistä on toiminnallinen rajoite, ja noin 8 % maailman väestöstä on näkörajoitteisia tai kokonaan sokeita.

Oletko valmis luovuttamaan muille 15 % kaikista verkkokauppasi potentiaalisista asiakkaista? Ja menettämään ehkä enemmänkin siksi, että sivustosi ei tarjoa kunnon ostokokemusta?

Kannattaa huomioida myös ihmiset, joilla on tilapäisiä tai tilanteesta johtuvia rajoitteita. Mieti, miten vaikea on selata sivustoa käsi paketissa tai vauva sylissä. Tai millaista on katsella kännykkää kirkkaassa auringonpaisteessa, kun näytössä on heikko kontrasti. Huonosti käytettävät sivustot vaikuttavat ihmisiin monin tavoin.

Käytettävyyden suunnittelu ei takaa helppokäyttöisyyttä, mutta helppokäyttöinen sivusto on usein hyvä myös käytettävyydeltään

Tarkastellaanpa, miten voit parantaa sivuston käytettävyyttä ja vauhdittaa verkkomyyntiä saavutettavuuden avulla.

1. Varmista sivun responsiivisuus

Responsiivisuus tarkoittaa, että sivusto skaalautuu automaattisesti mihin tahansa näyttökokoon ja tarjoaa optimaalisen kokemuksen riippumatta siitä, käytetäänkö sitä älypuhelimella, tabletilla vai tietokoneella.

Mobiilimaksaminen on voimakkaassa kasvussa (tutkimuksen mukaan mobiiliostosten osuus Yhdysvalloissa tehdyistä verkko-ostoksista on jo kolmannes), joten tämän puolen pitäisi olla kunnossa sinunkin verkkokaupassasi.

Yksi responsiivisen sivuston etu, joka jää usein vähälle huomiolle, on sen skaalautuvuus myös zoomattaessa.

Tämä auttaa näkörajoitteisia käyttäjiä merkittävästi.

Jos sivustosi ei ole vielä responsiivinen, näytä tämä kätevä opas sen kehittäjille.

Myös internetissä on paljon hyödyllisiä resursseja tätä varten.

2. Tue monenlaisia syöttölaitteita

Monien sivustojen navigointiin tarvitaan hiirtä. Tämä tekee selaamisesta hankalaa kosketusnäytön käyttäjille, toimintarajoitteisille – esimerkiksi näkövammaisille – sekä niille, jotka käyttävät ensisijaisesti pelkkää näppäimistöä.

Tyypillinen esimerkki rajallisesta syöttölaitetuesta ovat valikot, jotka aktivoituvat käyttäjän viedessä kohdistimen valikon päälle. Tämä ei siis toimi, jos käytät pelkkää kosketusnäyttöä tai näppäimistöä.

Ongelma ei liity ainoastaan hiiren käyttöön, vaan navigointi on hankalaa myös fyysisestä tai motorisesta toimintarajoitteesta kärsiville.

Ongelmana ovat myös interaktiiviset elementit, kuten linkit, syöttökentät ja painikkeet, joiden aktivoituminen ei näy navigoitaessa sarkainnäppäimellä.

Kokeile koko sivuston navigointia erikseen pelkällä näppäimistöllä, hiirellä ja kosketusnäytöllä.

Jos jokin navigointitavoista toimii huonosti tai aiheuttaa hämmentäviä tilanteita, useiden syöttölaitteiden tuessa on parantamisen varaa.

3. Suosi ulkoasussa yksinkertaisuutta ja lineaarisuutta

Kysytpä keneltä tahansa sivustokehittäjältä, mikä on suunnittelussa tärkeintä, vastaus on todennäköisesti samansuuntainen:

Tee asiat helpoiksi käyttäjälle!

Ironista on, että monimutkaisuutta on paljon helpompi lisätä kuin vähentää.

Jos käyttö on helppoa ja intuitiivista, kaikki hyötyvät. Jos näin ei ole, tulos on sekava kaikille – ja etenkin autismista tai lukihäiriöstä kärsiville.

Sivustoa voidaan yksinkertaistaa monin tavoin. Tässä esimerkkejä:

●        Lisää kuvakkeiden tueksi teksti.

●        Korosta selkeästi kohdat, joissa teksti sisältää linkin.

●        Vältä lomakkeita ja tee välttämättömistä lomakkeista mahdollisimman selkeitä ja yksinkertaisia.

●        Käytä tyhjä tila fiksusti niin, että se korostaa kontekstia.

●        Vältä ylimääräistä tekstiä ja suosi yksinkertaista ja selkeää ilmaisua.

Mitä teetkin, tee se johdonmukaisesti.

4. Optimoi luettavuus

Nykyään on valitettavan yleistä nostaa joitakin sivun elementtejä esiin käyttämällä muualla alhaista värikontrastia, esimerkiksi pehmeitä värejä.

Olipa syy alhaiseen kontrastiin mikä tahansa, se tekee käytöstä hankalaa näkörajoitteisille. Näkö on harvalla täydellinen, eikä kaikilla ole laitteessaan korkealaatuista IPS/AMOLED-retinanäyttöä.

Sivustosi voi näyttää hyvältä joissakin tilanteissa, mutta et voi koskaan olla varma, miten sisältö näkyy kussakin käyttötilanteessa ja pystyykö käyttäjä näkemään sitä lainkaan.

Älä myöskään käytä pelkkää väriä tiedon välittämiseen. Äläesimerkiksi ilmaise tietyllä värillä, toimiko käyttäjä oikein vai ei. Värisokeus on yleistä, eivätkä kaikki muutenkaan hahmota värejä samalla tavalla.

Sivustoa on tärkeää testata eri asetuksilla useissa käyttötilanteissa, ja on tärkeää tarjota mahdollisuus suurikontrastiseen tilaan.

Tässä on Lea Veroun kehittämä mainio työkalu, jolla voit laskea värien väliset kontrastisuhteet. Hyödynnä sitä sisällön tarkistuksessa.

Upea ulkoasu ei saa heikentää luettavuutta. Molemmat on mahdollista saada samalla kertaa.

5. Tarjoa aina tekstivaihtoehto

Kun esität muuta kuin tekstimuotoista sisältöä, kuten kuvia, videoita tai kaavioita, varmista aina, että tarjolla on myös tekstivaihtoehto. Tämä auttaa näkörajoitteisten lisäksi myös muita käyttäjiä, jos sisältö ei jostakin syystä näy kunnolla.

Lisää videoihin tekstitys. Näin sisällöstä voivat nauttia myös kuulorajoitteiset ja vieraskieliset käyttäjät. On myös hyvä muistaa, että laitteen ääntä ei voi syystä tai toisesta pitää aina päällä.

6. Testaa sivusto ruudunlukuohjelmalla

Monet näkörajoitteiset käyttäjät hyödyntävät ruudunlukuohjelmaa varsinaisen näytön täydentäjänä tai korvaajana.

Testaa sivustoa parilla ruudunlukuohjelmalla näytön ollessa sammutettuna. Eri ruudunlukuohjelmat lukevat eri selaimia vaihtelevalla menestyksellä, joten sivuston on tärkeää tukea ainakin yleisimpiä ruudunlukuohjelmia. Kyseeseen voivat tulla esimerkiksi Windowsille tarkoitetut NVDA ja JAWS, Chrome-selaimelle ja -käyttöjärjestelmälle tarkoitettu ChromeVox, Androidille tarkoitettu Talkback sekä macOS:lle ja iOS:lle tarkoitettu VoiceOver.

WAI on laatinut ohjeet sivustojen ja sovellusten varustamiseen käytettävyyttä parantavilla ominaisuuksilla. Aloite on nimeltään Accessible Rich Internet Applications (WAI-ARIA tai lyhyemmin ARIA).

Tästä saat ARIA-attribuuttien yhteenvedon ja useita oppaita, ja tästä pääset viralliseen esittelyyn.

7. Käytä semanttisia elementtejä

Semanttiset elementit auttavat ruudunlukuohjelmaa navigoimaan sivustolla.

Kun sivustolla käytetään asiaankuuluvia HTML-elementtejä, kuten <nav>-navigointitageja ja <header>-otsikkosisältötageja, ja kun otsikkoja käytetään oikein, ruudunlukuohjelman käyttäjä voi hypätä eri kohtiin helpommin eikä koko sivun sisältöä tarvitse kuunnella päästäkseen tiettyyn kohtaan.

Ammattilaisen vinkki: Hoida HTML-elementit kuntoon samalla, kun teet sivustolle hakukoneoptimoinnin – tässä on hyödyllinen opas aiheesta.

8. Varmista, että sidosryhmäsi ymmärtävät käytettävyyden merkityksen

Käytettävyyden optimointi voi vaikuttaa kalliilta. Sen rahallinen merkitys on kuitenkin vähäinen, kun otetaan huomioon koko verkkokaupan luomiseen tarvittava työmäärä.

Varsinaisena haasteena on vakuuttaa sidosryhmät siitä, että optimointi todella on tarpeen, ja saada yritys omaksumaan empaattinen ja saavutettava ajattelutapa.

Toimintarajoitteiden tilastollinen yleisyys, johon edellä viitattiin, on jo itsessään hyvä syy, jonka pitäisi puhua puolestaan. Kuten jo tiedät, optimointi auttaa monin tavoin myös kaikkia muita.

Ison-Britannian viranomaiset ovat laatineet mainioita julisteita, jotka auttavat parantamaan verkkosivustojen käytettävyyttä. Voit tutustua julisteisiin tästä.

Omalla työpaikallani nämä julisteet avasivat monen silmät, kun ripustin ne seinälle. Niiden avulla ihmiset ymmärsivät, miten tärkeää saavutettavuus todella on. Ne ovatkin helppo tapa levittää sanomaa myönteisessä ja helppotajuisessa muodossa.

Kokeile vaikka itse!

Julisteiden tulostaminen maksaa vain musteen ja paperin verran, ja ne ovat saatavilla useilla kielillä.

Vahvassa ketjussa ei ole heikkoja lenkkejä

Oletetaan, että verkkokauppasi käytettävyys on hyvä ja saavutettavuus on huomioitu suunnittelussa. Verkkokauppaasi on todennäköisesti asennettu muutama lisäosa, tai asia on hoidettu integroimalla ulkoisia palveluja.

Jos nämä palvelut eivät ole käytettävissä, ketjusi on todennäköisesti poikki. Varmista, että kaikki palvelut ovat vaatimustesi tasalla, sillä muuten toimesi ovat turhia.

Maksuratkaisujen kehittäjät eivät valitettavasti kiinnitä useinkaan huomiota käytettävyyteen tai helppokäyttöisyyteen.

Tämä on valitettavaa, mutta meillä asiaa on mietitty, ja olemme varmistaneet Bambora PayForm -verkkomaksuratkaisumme käytettävyyden.

Esimerkkejä Bambora PayForm ominaisuuksista:

●        Täyttää värien kontrastisuhdetta koskevan AA-standardin vaatimukset.

●        Ulkoasu on yksinkertainen ja lineaarinen.

●        Värit, tekstit ja kuvakkeet erottuvat helposti kaikille, myös värisokeille käyttäjille.

●        100-prosenttisen skaalautuva eli mukautuu saumattomasti kaikkiin näyttökokoihin.

 

Mitä tämä tarkoittaa sinun kannaltasi?

Se tarkoittaa, että yhä useampi voi maksaa helposti verkkokaupassasi.

Maksu onnistuu myös huonossa valaistuksessa tai näkörajoitteisilta (myös värisokeilta) käyttäjiltä.

Maksu onnistuu millä tahansa näytöllä tai laitteella.

Kuulostaako hyvältä?

Voit nähdä, miten kaikki tämä toimii, luomalla ilmaisen testitilin tässä ja kokeilemalla Bambora PayFormia itse.

Ei luottokorttia, ei koodimuutoksia. Sopii minulle.

Toivottavasti artikkelista oli hyötyä.

Tarvitsetko muita resursseja?

Tutustu Web Accessibility Initiative -aloitteeseen, Web Content Accessibility Guidelines -ohjeisiin tai tähän Vox Median yksinkertaiseen tarkistusluetteloon .

Heräsikö kysymyksiä?

Kirjoita meille tätä kautta, niin palaamme asiaan.

Jesper Dalgas Zachariassen

Olen ohjelmistoinsinööri ja kehitän verkkosovelluksia yrityksille. Erikoisalaani ovat käyttökokemus ja asiakaskonversio.

We are open for business!

Welcome to the world of payment solutions. Choose your country and start accepting payments from customers all over the world.