Näköpiste Polar Printin saavutettava verkkokauppa

Lähtökohdat

Mikä oli toimeksianto tai ongelma joka piti ratkaista?

Näköpiste Polar Print myy teknisiä apuvälineitä sokeille, heikkonäköisille ja lukivaikeuksista kärsiville. Toiminnan fokus on ihmisten auttamisessa, ei pelkästään teknologiassa ja laitteissa. Yritys pyrkii myös kasvattamaan tietoisuutta apuvälineistä ja näkövammaisten arjen haasteista esimerkiksi podcastinsa kautta.

Kela ja hyvinvointialueet tukevat usein apuvälinehankintoja, mutta niiden tilaukset tehdään muiden kanavien kautta. Verkkokaupan ensisijainen käyttäjäryhmä on kuluttajat, joita palvellaan suoraan hankintaprosessin aikana. Sivustolla julkaistut tuotetiedot palvelevat kuitenkin myös muita asiakasryhmiä.

Näköpisteen liiketoimintatavoitteisiin kuului muun muassa markkinoinnin kehittäminen, tuotetietojen esitteleminen verkossa selkeästi nykyisiä asiakasryhmiä varten sekä verkkokauppamyynnin aloittaminen uusien asiakasryhmien tavoittamiseksi.

Helmikuussa 2023 Näköpiste oli myös monella tavalla uuden ja haastavan tilanteen edessä:

• Yritys oli irtaantunut ruotsalaisesta emoyhtiöstään kotimaiseen omistukseen
• Aiempi emoyhtiön visuaalinen ilme ei enää palvellut yrityksen tarpeita
• Vanha kotisivujen alusta oli jouduttu sulkemaan tietoturvasyistä
• Yrityksellä ei ollut enää kunnollisia kotisivuja eikä tuotetietoja verkossa

Toisaalta tilanne tarjosi mahdollisuuden uudistaa yrityksen markkinointi kokonaisvaltaisesti.

Kumppaniksi tähän vaativaan uudistukseen valikoitui Konsepto.

Strategia

Minkälainen strategia haasteen ratkaisemiseksi valittiin? Mikä oli insight joka ohjasi suunnittelua?

Näköpisteen asiakkaat ovat ihmisiä, joilla on näkemiseen tai lukemiseen liittyviä haasteita. Lisäksi yrityksen henkilöstö, toimitusjohtajaa lukuun ottamatta, koostuu näkövammaisista ammattilaisista. Useimmat heistä eivät käytä verkkosivustoja visuaalisesti, vaan hyödyntävät ruudunlukuohjelmia, näppäimistöä ja pistenäyttöjä. Tästä syystä sekä verkkokaupan julkisen puolen että hallintapuolen tuli olla mahdollisimman saavutettavia ja käytettävissä apuvälineillä.

Vaikka kesällä 2025 kuluttajaverkkokauppaan laajenevat saavutettavuusvaatimukset eivät vielä lakisääteisesti koske Näköpistettä yrityksen kokoluokan vuoksi, asiakkaamme päätti silti sitoutua saavutettavuuden parhaisiin käytäntöihin. Tämä tarkoitti saavutettavuuden huomiointia kaikissa vaiheissa, saavutettavuusauditointia sekä saavutettavuusselosteen julkaisemista.

Verkkokauppa-alustaksi harkittiin kahta suosituinta vaihtoehtoa: Shopify ja WordPress. Shopify on suljettu, kaupallinen SaaS-palvelu, kun taas WordPress on avoimen lähdekoodin julkaisujärjestelmä, jota käytetään myös verkkokauppojen alustana WooCommerce-lisäosan avulla. Kummankaan hallintapuolen saavutettavuudesta meillä ei ollut aiempaa kokemusta, joten päätimme selvittää sen heti aluksi turhan työn välttämiseksi.

Shopifyn hallintaa testattiin sekä asiakkaan että meidän toimesta, ja sen todettiin olevan kohtalaisen saavutettava ja toimivan riittävän hyvin ainakin keskeisten toimintojen osalta. Koska Shopify on myös sitoutunut saavutettavuuden tarjoamiseen ja kehittyneempi verkkokauppa-alustana, päätettiin verkkokauppa rakentaa Shopify-alustalle.

Näköpiste tarjosi meille myös erittäin kiinnostavan perehdytyksen erilaisiin näköongelmiin ja apuvälinetarjontaansa. Tutuksi tulivat muun muassa suurennuslaitteet, silmälaseihin kiinnitettävä ja käyttäjän edessä näkyvät tekstit ääneen lukeva laite, erilaisia näköongelmia simuloivat lasit sekä verkkosivustojen “tehokäyttö” ruudunlukuohjelmalla, pistenäytöllä ja näppäimistöllä.

Luova ratkaisu

Millä idealla tai näkökulmalla toimeksiantoa lähestyttiin?

Tavoitteenamme oli uudistaa asiakkaan markkinointi täysin nykyisiä tarpeita vastaavaksi, sekä rakentaa moderni, responsiivinen, kestävä ja varmasti saavutettava verkkokauppa. Lisäksi halusimme varmistaa, ettei asiakas jäisi pitkäksi aikaa ilman toimivaa verkkosivustoa.

Projektin laajuuden ja aikataulun takia työ suoritettiin vaiheittain:

1. Visuaalisen ilmeen suunnittelu – mahdollisimman pian
2. Kotisivujen rakentaminen ja julkaisu – mahdollisimman pian
3. Markkinointi- ja messumateriaalien suunnittelu – ajoissa ennen Apuvälinemessuja
4. Verkkokauppatoimintojen lisääminen ja julkaisu – myöhemmin rauhassa

Projekti aloitettiin uuden visuaalisen ilmeen suunnittelusta. Visuaalinen ilme rakentui asiakkaan aiemmin tietyissä yhteyksissä käyttämän huuhkajan kuvan ympärille, mikä toimiikin hyvin – pöllöillä on tunnetusti tarkka näkö.

Muilta osin uusi ilme suunniteltiin tyhjältä pöydältä asiakkaan toiveiden mukaiseksi. Esimerkiksi värimaailma suunniteltiin asiakkaan toiveesta vahvat kontrastit edellä. Mustavalkoista värimaailmaa värittämään valittiin liekehtivä oranssi. Logon kuva-aiheeksi valittiin huuhkajan silmä, leikkisällä twistillä.

Valitsimme selkeän ja helppolukuisen kirjasintyypin, jota käytettiin suurehkossa koossa saavutettavuuden vuoksi. Visuaalista ilmettä elävöitettiin valokuvilla huuhkajista, sekä hienovaraisia yksityiskohtia sisältävillä sulkagrafiikoilla.

Sivusto jouduttiin suunnittelemaan heti projektin alussa varsin pitkälle, välttääksemme ylimääräisen työn myöhemmin. Lähinnä ostotoiminnot ja tietyt muut yksityiskohdat voitiin jättää myöhempään vaiheeseen. Tiettyjä yksityiskohtia oli tarpeen muuttaa projektin aikana, mutta suunnitelmien suuret linjat toimivat erinomaisesti projektin alusta loppuun.

Koska Näköpiste tarjoaa henkilökohtaista neuvontaa, ja koska saavutettavankin sivuston käyttö saattaa olla vaikeaa apuvälineiden puuttuessa, verkkokauppa suunniteltiin ja sisällöt tuotettiin siitä näkökulmasta, että yritys vaikuttaisi helposti lähestyttävältä ja yhteydenotto olisi mahdollisimman helppoa.

Verkkokaupan suunnittelu aloitettiin sisällöstä ja sivukartasta, jotka suunniteltiin yhteistyössä asiakkaan kanssa. Sen jälkeen edettiin rakenteeseen ja rautalankamalleihin, ja kun ne oli hiottu valmiiksi ja hyväksytetty asiakkaalla, siirryttiin sivuston ulkoasun suunnitteluun ja layout-kuviin.

Tekstisisällöstä, laajoista tuotetiedoista sekä tuotekuvista asiakas halusi vastata itse. Aihepiiri on siinä määrin erikoisosaamista vaativa, että sisällöntuotanto olisi ollut vaikeaa muille. Koulutimme asiakkaan Shopifyn hallinnan käyttöön, teimme yhteistyötä tuotetietojen ja -kuvien täydentämiseksi ja käsittelemiseksi verkkokauppaa varten, ja avustimme asiakasta tuotetietojen tuomisessa uudelle alustalle.

Projektin keskivaiheilla autoimme asiakasta uudistamaan messuseinän, roll-upit, nimikyltit ja dokumenttipohjan uuden ilmeen mukaisiksi. Kiinnostavana lisänä asiakkaalla oli tarvetta myös pistekirjoitusta hyödyntäville painomateriaaleille, kuten käyntikorteille ja esitteelle, jotka myös suunnittelimme visuaalisen ilmeen pohjalta. Nämä suunniteltiin asiakkaan ja AD:mme yhteistyönä.

Verkkomyynnin mahdollistaminen aloitettiin vaatimusmäärittelyllä, jossa tarkennettiin muun muassa tavoitteet, kohderyhmät, tuotteet ja integraatiotarpeet. Lisäksi määriteltiin keskeiset ominaisuudet, kuten asiakastilit, ostoprosessi, maksutavat, varastonhallinta ja logistiikka.

Toteutus

Millainen on lopullinen toteutus ja miksi siihen päädyttiin?

Verkkokaupan teeman toteutus oli projektin suurin haaste, sillä valmiit teemat sopivat huonosti räätälöidyn ulkoasun ja rakenteen toteuttamiseen, eikä valmiiksi saavutettavia teemoja ollut saatavilla.

Shopify on SaaS-palvelu, jonka koodia ei voi muokata vapaasti, vaan uusia ominaisuuksia voi lisätä vain rajapintojen ja lisäosien avulla. Shopifyn hallintapuolta ei voi muokata itse, mutta verkkokaupan julkisia sivuja (paitsi kassasivua) voi räätälöidä teemojen avulla – joko rakentamalla oman, ostamalla valmiin kaupallisen tai käyttämällä Shopifyn tarjoamia ilmaisia teemoja.

Shopify-teemat koostuvat käytännössä Liquid-kielellä koodatuista sivupohjista, JSON-muotoisista asetus- ja sisältötiedostoista, CSS- ja JavaScript-koodista, kuvista, fonteista ja mahdollisista muista resursseista. Shopify tarjoaa myös visuaalisen teeman kustomointikäyttöliittymän, jonka avulla käyttäjät pystyvät muuttamaan eri tyyppisten sivujen asetuksia ja lisäämään eri sivuille erilaisia sisältölohkoja ilman koodaustaitoja, sen mukaan mitä kustomointimahdollisuuksia teeman rakentajat ovat mahdollistaneet.

Koska suunnittelimme asiakkaalle räätälöidyn visuaalisen ilmeen sekä sivuston rakenteen ja ulkoasun, joissa myös asiakkaan tarpeet, toiveet ja saavutettavuus on huomioitu, niin ne tuli myös toteuttaa verkkokaupan teemaksi. Valitettavasti Shopifyyn ei ollut olemassa kunnollista saavutettavaa pohjateemaa, vaan ainoastaan monia hyvin pitkälle tietyn ulkoasun ja rakenteen mukaisiksi suunniteltuja ja toteutettuja valmisteemoja, jotka eivät yleensä ole kovinkaan saavutettavia.

Shopify suosittelee omien teemojen pohjaksi itse kehittämäänsä ilmaista teemaa nimeltä Dawn. Se ei kuitenkaan ole hyvä valinta räätälöityjen verkkokauppojen teemaksi, sillä se on suunniteltu alusta lähtien tietyn näköiseksi, eikä ulkoasun ja rakenteen toteutusta ole eroteltu toisistaan, minkä takia sen kustomointi eri näköiseksi on erittäin työlästä. Lisäksi teema sisältää huomattavan määrän toistoa, varsinkin tyylitiedostoissa, sekä paljon ylimääräistä HTML-koodia. Dawn ei myöskään ole täysin saavutettava, vaikka saavutettavuus onkin pyritty monessa kohdassa huomioimaan.

Pitkälti samat ongelmat koskevat muitakin Shopifyn valmisteemoja, eikä sen parempia kaupallisia vaihtoehtoja löytynyt. Vaihtoehtona olisi ollut myös aloittaa oma teema tyhjästä, mutta siinä on huomattavan paljon työtä, ja mallia joutuu joka tapauksessa ottamaan muista teemoista.

Nämä ongelmat olivat meillä tiedossa projektin alusta lähtien, mutta aikataulu ei mahdollistanut niiden ratkaisua ennen ensimmäistä julkaisua. Kokemukset ensimmäisestä julkaisusta osoittivat, ettei valmisteeman päälle saada toteutettua tavoittelemaamme käyttökokemuksen ja saavutettavuuden tasoa, ainakaan kohtuullisella työmäärällä. Siksi päätimme kehittää oman pohjateeman, joka vastaisi Näköpisteen tarpeisiin ja palvelisi myös tulevia projektejamme.

Onneksi meillä oli huomattavasti kokemusta teemoituksesta, sekä paljon valmiita ratkaisuja ja koodia oman täysin kustomoitavan pohjateeman toteuttamiseksi. Olemme kehittäneet omaa WordPress-pohjateemaa ja front-end-koodikirjastoa vuodesta 2013 lähtien, ja käyttäneet niitä käytännössä kaikkien asiakkaille rakentamiemme WordPress-sivustojen pohjana.

Näin ollen kehitimme oman pohjateeman Dawn-teeman pohjalta, karsien siitä turhan toiston, kirjoittamalla jäljelle jääneet koodit uudestaan yksinkertaisempaan muotoon, sekä suunnitellen teeman ja sen lohkojen asetukset, tekstit sekä toimintalogiikan uudestaan sillä ajatuksella, että ne sallisivat mahdollisimman vapaan räätälöinnin erilaisiin tarpeisiin. Tämä oli varsin suuri urakka, mutta auttaa meitä jatkossa, joten suoritimme sen sisäisenä kehitystyönä.

Rinnakkain pohjateeman toteuttamisen kanssa toteutimme myös sitä hyödyntävää uutta versiota Näköpisteen verkkokaupan teemasta. Saavutettavuus ja responsiivisuus huomioitiin toteutustyössä testaamalla jatkuvasti ruudunlukuohjelmilla ja auditointityökaluilla, sekä eri laitteilla ja erikokoisilla näytöillä.

Muilta osin verkkokaupan toteutus oli helppoa layout-kuvia noudattamalla. Myöhemmässä vaiheessa tarvittavat verkkokauppaominaisuudet oli myös suhteellisen suoraviivaista ottaa käyttöön ja räätälöidä asiakkaan tarpeisiin vaatimusmäärittelyn ja aiemman kokemuksen pohjalta.

Ensimmäinen versio sivuston toteutuksesta julkaistiin kesäkuussa 2023 ja sitä paranneltiin joiltain osin julkaisun jälkeen. Projekti jatkui vuoden 2024 alusta eteenpäin verkkokauppaan liittyvien asioiden tarkemmalla määrittelyllä ja suunnittelulla. Verkkokauppaominaisuudet julkaistiin syyskuussa 2024.

Molempia julkaisuja varten verkkokaupan saavutettavuus auditoitiin kokonaisuutena toimestamme.

Saavutettavuus

Miten lopputuloksen saavutettavuus varmistettiin?

EU:n verkkopalveluiden saavutettavuusdirektiivi on ollut erittäin tärkeä uudistus, joka edesauttaa vammaisten ihmisten yhdenvertaisuuden toteutumista nykyisin erittäin keskeisessä digitaalisessa ympäristössä.

Olemme suunnitelleet, toteuttaneet ja auditoineet saavutettavuusvaatimusten mukaisia sivustoja siitä lähtien kun Suomen digipalvelulakia alettiin soveltaa ja niille syntyi kysyntää vuonna 2019.

Vaikka laki ei sitä vaadi, lähdimme heti alusta asti testaamaan sivustot myös apuvälineillä. Haluamme tehdä oikeasti käytettäviä sivustoja, myös niille joille visuaalisen käyttöliittymän käyttö on mahdotonta, ja pienetkin virheet toteutuksessa voivat estää käytön kokonaan. Tämän johdosta kaikki tekijämme ymmärtävät miltä sivut kuulostavat ruudunlukuohjelmilla ja mitä niiden saavutettavuuden eteen kannattaa tehdä.

Testasimme verkkokaupan saavutettavuuden kattavasti ennen molempia julkaisuja ja teimme siihen parannuksia myös julkaisujen välillä asiakkaan palautteen pohjalta. Koska sivustoa käytetään paljon ruudunlukijoiden avulla, muutimme asiakkaan ehdotuksesta tiettyjä sivuston ominaisuuksia palvelemaan käyttäjiä paremmin.

Auditoimme verkkokaupan saavutettavuuden WCAG 2.2 AA-tason ohjeita vasten. Versio 2.2 on ohjeiden uusin versio, joka sisältää muutaman lisäyksen suhteessa lain vaatimaan 2.1-versioon.

Testasimme myös käytännön saavutettavuuden yleisesti käytetyillä ruudunlukuohjelmilla NVDA (Windows), VoiceOver (Mac, OSX) ja TalkBack (Android), näppäimistöllä, kosketuslaitteella, tietokoneella ja mobiililaitteilla.

Laadimme samalla saavutettavuusauditoinnin sisällöstä ja löydöksistä raportin, jonka jaoimme kehittäjillemme tiedoksi.

Keskustelimme asiakkaan kanssa sisältöön liittyvien ongelmien ratkaisuvaihtoehdoista ja neuvoimme tarvittavat korjaustavat. Joiltain osin todettiin, ettei ongelmia kannata korjata. Tuotekuvien sisällön kuvailut ja videoiden tekstitykset eivät olisi tuottaneet lisäarvoa ruudunlukuohjelmien käyttäjille, ja laitevalmistajien toimittamien PDF- ja Word-tiedostojen muokkaaminen saavutettaviksi olisi ollut kohtuuton rasite.

Korjasimme saavutettavuusongelmat siltä osin kuin ne olivat korjattavissamme. Lähetimme Shopifyn kehittäjille tiedoksi kuvaukset ja korjausehdotukset Shopifyn hallinnan saavutettavuusongelmista apuvälineillä.

Lopuksi laadimme saavutettavuusselosteen sivustolle.

Haasteet

Mitkä olivat suurimmat haasteet projektissa?

Projektin suurin haaste oli se, että Shopifylle ei ollut saatavilla kunnollista pohjateemaa, mikä kasvatti projektin työmääriä merkittävästi. Sellaisen rakentaminen itse sisäisenä tuotekehityksenä vaati paljon työaikaa. Onneksi meillä oli siitä jo valmiiksi paljon kokemusta.

Toinen suuri haaste oli kiireellinen aikataulu – visuaalisen ilmeen suunnittelu ja sivuston ensimmäinen julkaisu piti tehdä mahdollisimman nopeasti – muiden projektien rinnalla. Projekti oli kuitenkin ammatillisesta näkökulmasta niin kiinnostava, ettei siitä voinut kieltäytyäkään, joten aikatauluun oli sopeuduttava.

Kolmas haaste oli varmistaa Shopifyn hallinnan saavutettavuus apuvälineillä, jotta asiakkaan henkilöstö pystyisi käyttämään sitä. Hallinnan saavutettavuus testattiin heti projektin alussa sekä meidän että asiakkaan toimesta riskien vähentämiseksi.

Tulokset

Minkälaisia tuloksia työllä saavutettiin?

Olemme erittäin tyytyväisiä projektissa suunniteltuun visuaaliseen ilmeeseen. Se on kekseliäs, tyylikäs, rohkea ja pelkistetty. Sen vahvat kontrastit, selkeä typografia ja suurikokoiset elementit tekevät siitä helppokäyttöisen ja saavutettavan. Ilme jää myös helposti loppukäyttäjien mieleen.

Graafiset materiaalit messuja ja muuta markkinointia varten onnistuivat myös hyvin, ja niissä hyödynnettiin visuaalista ilmettä tyylikkäästi ja yhteensopivasti verkkokaupan kanssa.

Mielestämme verkkosivuston ei tarvitse tinkiä näyttävyydestä saavutettavuuden vuoksi. Tässä projektissa saavutettiin molemmat – verkkokauppa tarjoaa ensiluokkaisen käyttökokemuksen niin apuvälinekäyttäjille kuin kaikille muillekin.

Valmis verkkokauppa palvelee käyttäjiä seuraavasti:

• Auttaa apuvälineitä tarvitsevia neuvomalla apuvälineiden valinnassa, apuvälineiden hakemisessa eri toimijoilta, apuvälineiden käytössä sekä muutostilanteissa
• Esittelee Näköpisteen edustamat laitteet houkuttelevasti
• Mahdollistaa laitteiden ostamisen helposti verkosta
• Esittelee yrityksen tarjoamat asiantuntijapalvelut selkeästi ja ymmärrettävästi
• Tarjoaa tietoa aihepiiristä blogikirjoitusten, podcastin ja vinkkien muodossa

Lähestymistapamme verkkokaupan teemoitukseen voisi hyödyttää monia muitakin yrityksiä, jotka rakentavat pitkälle kustomoituja ja saavutettavia verkkokauppoja, minkä takia haluaisimme julkaista oman pohjateemamme tulevaisuudessa avoimena lähdekoodina kenen tahansa hyödynnettäväksi.

Pohjateemassa on kuitenkin vielä paljon lisää kehitettävää. Esimerkiksi pois kommentoidun turhan koodin ja turhien tiedostojen siistimistä, koodin organisointia, asetusten parantelua, tässä verkkokaupassa tarpeettomien lohkojen ja ominaisuuksien toteuttamista, sekä pohjan testaamista käytännössä erilaisissa asiakasprojekteissa. Pohjateema kannattaisi myös esitellä ja ohjeistaa huolella muiden työskentelyn helpottamiseksi.

Seuraavaksi haluamme kehittää lisää saavutettavia Shopify-verkkokauppoja räätälöidyillä teemoilla. Tämä antaa meille mahdollisuuden testata ja viimeistellä pohjateemaamme, jotta voimme julkaista sen avoimena lähdekoodina tulevaisuudessa.

Tekijät

Sisältö

Näköpiste (Näköpiste Polar Print Oy)

• Tuija Ranta-Pere: sisällön suunnittelu

Text Stil Oy

• Leena Blomqvist: tekstit

Visuaalinen ilme, markkinointimateriaalit, pohjateema, verkkokaupan suunnittelu, toteutus, testaus, saavutettavuusauditointi

Konsepto (Konsepto Oy)

• Jukka Kalenius: toteutus, sisällön siirto, koulutus, projektinhallinta
• Mikko Paltamaa: vaatimusmäärittely, käyttöliittymäsuunnittelu, toteutus, testaus, saavutettavuusauditointi
• Hanna Lindewall: visuaalinen ilme, markkinointimateriaalit, ulkoasun suunnittelu
• Janne Hukka: projektinhallinta
• Taneli Perälä: testaus, saavutettavuusauditointi