Tuotesivun tarkistuslista: mikä estää asiakasta ostamasta

Tuotesivun tarkistuslista Baymardin ja WebAIMin tutkimuksista: hinta, toimitus, palautus, kuvat, arvostelut, mobiili, ponnahdusikkunat, haku, näppäimistö.

FixReportsin toimitusLukuaika 9 min

Asiakas jättää ostoksen tuotesivulla kesken useimmiten silloin, kun hän ei saa selville kokonaishintaa, ei löydä toimitus- ja palautusehtoja, ei pysty arvioimaan tuotetta kuvien ja arvostelujen perusteella tai ei löydä ja pysty helposti käyttämään ostopainiketta, varsinkaan puhelimella. Ostoksia estävät myös sivun peittävät ponnahdusikkunat, vaikeasti löydettävät ehtosivut, sivustohaku, joka ei vastaa yksinkertaisiin kysymyksiin, sekä säätimet, jotka eivät toimi näppäimistöllä. Alla olevat luvut ovat Baymard Instituten ja WebAIMin alan tutkimuksista, ja ne perustuvat suuriin sivusto- ja asiakasotoksiin. Ne kuvaavat yleisiä ilmiöitä, eivät ennusteita yksittäiselle kaupalle.

Tärkeimmät kohdat

  • Baymardin vuoden 2026 kyselyssä, johon vastasi 1 083 yhdysvaltalaista aikuista, jotka olivat ostaneet verkosta edellisten kolmen kuukauden aikana, 40 % kertoi jättäneensä ostoksen kesken kassalla, koska lisäkulut, kuten toimituskulut, verot ja maksut, olivat liian suuret (Baymard Institute (avautuu uuteen välilehteen)).
  • Baymardin tuotesivuvertailussa 67 % johtavista verkkokaupoista ei näyttänyt arviota kokonaishinnasta ostoalueen lähellä, ja 44 % ei näyttänyt palautusehtoja tai linkittänyt niihin tuotesivun pääsisällöstä (Baymard Institute (avautuu uuteen välilehteen), päivitetty 18. maaliskuuta 2026).
  • Samassa vertailussa 62 %:lla mobiilisivustoista tuotesivun käyttökokemus oli ”keskinkertainen” tai sitä heikompi.
  • WebAIM havaitsi helmikuussa 2026 WCAG-virheitä 95,9 %:lla miljoonan suosituimman sivuston etusivuista (WebAIM (avautuu uuteen välilehteen)).
  • Baymardin vuonna 2021 tekemässä katsauksessa, joka kattoi 33 liikevaihdoltaan suurinta verkkokauppaa, 45 %:lla oli toimintoja, joita ei voinut käyttää näppäimistöllä (Baymard Institute (avautuu uuteen välilehteen)).

Miksi asiakkaat jättävät ostoksen kesken?

Yleisin vastaus on, että asiakas vain selaili. Sen jälkeen tulevat lisäkulut, hidas toimitus, epäluottamus korttitietojen käsittelyyn ja pakko luoda asiakastili.

Baymardin ostoskorin hylkäämistä käsittelevä sivu ilmoittaa dokumentoiduksi keskimääräiseksi hylkäysasteeksi 70,22 %, joka on laskettu 50 tutkimuksesta (sivu päivitetty viimeksi 22. syyskuuta 2025). Sivun syitä esittävä kaavio, joka on merkitty vuoden 2026 dataksi, perustuu kyselyyn, johon vastasi 1 083 yhdysvaltalaista aikuista, jotka olivat ostaneet verkosta edellisten kolmen kuukauden aikana. Vastaajat saivat valita useamman kuin yhden syyn (Baymard Institute (avautuu uuteen välilehteen), lokakuun 2026 tilanne):

Syy verkko-ostoksen keskeyttämiseen kassallaOsuus vastaajista
Selailin vain / en ollut valmis ostamaan42 %
Lisäkulut olivat liian suuret (toimitus, verot, maksut)40 %
Toimitus oli liian hidas20 %
En luottanut sivustoon luottokorttitietojeni kanssa19 %
Sivusto vaati minua luomaan tilin18 %
Kassaprosessi oli liian pitkä tai monimutkainen17 %
Sivustolla oli virheitä tai se kaatui17 %
Palautusehdot eivät olleet tyydyttävät13 %
En nähnyt tai pystynyt laskemaan tilauksen kokonaishintaa etukäteen12 %
Luottokortti hylättiin10 %
Maksutapoja ei ollut tarpeeksi9 %

Nämä ovat kassaa koskevan yhdysvaltalaisen kyselyn tuloksia, eivät mittauksia sinun kaupastasi. Useat syistä syntyvät jo aiemmin, tuotesivulla, jossa asiakas näkee ensimmäisen kerran hinnan, toimitusehdot ja palautusehdot. Vain oma analytiikkasi voi näyttää, mitkä niistä ovat sinulle merkityksellisiä.

Onko kokonaishinta selvä tuotesivulla?

Nykyisen hinnan, mahdollisen alkuperäisen hinnan, sen, mitä hintaan sisältyy tai ei sisälly, sekä toimituskuluarvion pitäisi olla ostopainikkeen vieressä.

Baymardin vuoden 2026 tuotesivuvertailussa 67 % sivustoista ei tarjonnut ostoalueen lähellä arviota ”tilauksen kokonaishinnasta”, ja 81 % ei näyttänyt yksikköhintaa tuotteille, joita myydään eri määrinä tai kokoina (Baymard Institute (avautuu uuteen välilehteen)). Tarkista, että sivulla näkyvät:

  • Nykyinen hinta ja alennustuotteissa alkuperäinen hinta.
  • Yksikköhinta tuotteille, joita myydään useina kokoina.
  • Tieto siitä, sisältyvätkö verot tai tullit hintaan.
  • Toimituskulut tai tilauksen arvo, josta alkaen toimitus on ilmainen.

Shopify: Dawn-teemassa hintalohko lisää tekstin ”Taxes included.” (verot sisältyvät hintaan) ja linkin ”Shipping calculated at checkout.” (toimituskulut lasketaan kassalla), kun nämä asetukset ja toimitusehdot on määritetty (Dawnin lähdekoodi (avautuu uuteen välilehteen)). Tieto on oikea mutta ei ole arvio, joten lisää todelliset toimitushinnat tai ilmaisen toimituksen raja tekstilohkoon.

WooCommerce: asetukset ”Enable the shipping calculator on the cart page” (toimituskululaskuri ostoskorisivulla) ja ”Hide shipping costs until an address is entered” (toimituskulut piiloon, kunnes osoite on annettu) kohdassa WooCommerce > Asetukset > Toimitus (Settings > Shipping) vaikuttavat ostoskoriin ja kassaan, eivät tuotesivuun (WooCommercen lähdekoodi (avautuu uuteen välilehteen)). Lisää toimitushinnat tuotesivupohjaan tai lyhyeen kuvaukseen.

Löytääkö asiakas toimitus- ja palautustiedot ennen kuin lisää tuotteen ostoskoriin?

Lisää ostopainikkeen lähelle lyhyt yhteenveto toimitusajasta, toimituskuluista ja palautusajasta sekä linkki täydellisiin ehtoihin.

Baymardin Consideration & Purchase Behavior -kyselyssä, johon vastasi 1 032 henkilöä, 60 % kertoi etsivänsä palautusehtoja tuotesivulta, mutta silti 44 % vertailun sivustoista ei näytä niitä tai linkitä niihin tuotesivun pääsisällöstä (Baymard Institute (avautuu uuteen välilehteen)). Edellä mainitussa vuoden 2026 hylkäyskyselyssä 20 % mainitsi syyksi hitaan toimituksen ja 13 % epätyydyttävät palautusehdot.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: kirjoita ehtosi kohdassa Asetukset > Käytännöt (Settings > Policies) (Shopify Help Center (avautuu uuteen välilehteen)). Dawnissa tuotesivun Collapsible row -lohko (kutistuva rivi) voi näyttää tekstiä tai jonkin sivun sisällön (Dawnin lähdekoodi (avautuu uuteen välilehteen)), joten yksi toimitus- ja palautussivu voi näkyä jokaisella tuotteella.

WooCommerce: WooCommerce luo ”Refund and Returns Policy” -sivun luonnoksena (WooCommercen lähdekoodi (avautuu uuteen välilehteen)). Se pysyy julkaisemattomana, kunnes muokkaat ja julkaiset sen.

Vastaavatko tuotekuvat asiakkaiden kysymyksiin?

Kuvien pitäisi näyttää tuote useista kulmista, mittasuhteissaan ja käytössä, koska moni asiakas arvioi koon ja istuvuuden kuvista eikä teknisistä tiedoista.

Baymardin testeissä 42 % käyttäjistä yritti päätellä tuotteen koon sen kuvista, mutta 37 % vertailun sivustoista ei tarjoa kokoa havainnollistavaa kuvaa, jossa tuote näkyy ihmisen tai tutun esineen vieressä. Lisäksi 23 % ei tarjoa kuvaa tuotteesta mallin päällä, mikä on tärkeintä vaatteissa, asusteissa ja kosmetiikassa (Baymard Institute (avautuu uuteen välilehteen)).

Tarkista myös, että galleria vaihtaa oikeaan kuvaan, kun väri valitaan, että zoomaus toimii puhelimilla ja että jokaisella kuvalla on vaihtoehtoinen teksti, joka kertoo, mitä kyseinen näkymä esittää, esimerkiksi ”Pellavapaita takaa”.

Ovatko arvostelut helppo löytää ja luotettavia?

Näytä keskimääräinen arvosana ja arvostelujen määrä tuotteen nimen lähellä, linkitä ne täydellisiin arvosteluihin ja vastaa negatiivisiin arvosteluihin.

Baymardin mukaan 89 % vertailun sivustoista ei vastaa negatiivisiin arvosteluihin, ja 63 % ei anna asiakkaan siirtyä yhden arvostelijan kuvista seuraavan arvostelijan kuviin (Baymard Institute (avautuu uuteen välilehteen)). Myöhään latautuvat arvostelu-widgetit voivat myös työntää sivua alaspäin, joten varaa niille tila etukäteen.

Shopify: Dawnin Product rating -lohko (tuotearvio) näyttää tähdet arvostelusovelluksesta, ja teema huomauttaa, että se edellyttää sovellusta (Dawnin lähdekoodi (avautuu uuteen välilehteen)).

WooCommerce: kohdan WooCommerce > Asetukset > Tuotteet (Settings > Products) arvosteluasetuksiin kuuluvat ”Enable product reviews”, ”Show 'verified owner' label on customer reviews”, ”Reviews can only be left by 'verified owners'” ja ”Enable star rating on reviews”, eli tuotearvostelut, vahvistetun omistajan merkintä, arvostelujen rajaaminen vahvistetuille omistajille ja tähtiarviot (WooCommercen lähdekoodi (avautuu uuteen välilehteen)).

Onko ostoskoriin lisäämisen painike helppo löytää ja napauttaa puhelimella?

Puhelimella asiakkaan pitäisi nähdä hinta, valita variantti ja napauttaa ostoskoriin lisäämisen painiketta etsimättä, ja säätimien pitäisi olla tarpeeksi suuria, jotta niihin osuu.

Baymardin vuoden 2026 vertailussa 52 %:lla tietokonesivustoista ja 62 %:lla mobiilisivustoista tuotesivun käyttökokemus oli ”keskinkertainen” tai sitä heikompi, ja 57 % sivustoista ei käyttänyt koon valintaan painikkeita, vaan koot olivat piilossa pudotusvalikoissa (Baymard Institute (avautuu uuteen välilehteen)).

Avaa tuotesivu oikealla puhelimella ja tarkista:

  • Ensimmäinen näkymä. Puhelimen pinotussa asettelussa galleria tulee usein ensimmäisenä, joten korkea kuva voi työntää tuotteen nimen, hinnan ja painikkeen ensimmäisen näkymän alapuolelle.
  • Kiinteät ostopalkit. Jos käytät sellaista, se ei saa peittää fokuksessa olevia elementtejä. W3C:n yhteenveto WCAG 2.2:n kriteeristä 2.4.11 (AA-taso) käyttää esimerkkinä kiinteää alatunnistetta, joka piilottaa fokuksessa olevat elementit (W3C (avautuu uuteen välilehteen)).
  • Kosketuskohteet. WCAG 2.5.8 (AA-taso) asettaa vähimmäiskooksi 24 × 24 CSS-pikseliä tietyin poikkeuksin (W3C (avautuu uuteen välilehteen)); Shopifyn teemaohjeistus suosittelee mobiilissa vähintään 48 × 48 pikselin kokoa (Shopify (avautuu uuteen välilehteen)).
  • Vaakasuuntainen vieritys. WCAG 1.4.10 Reflow edellyttää, että sisältö toimii 320 CSS-pikselin levyisenä ilman vieritystä kahteen suuntaan (W3C (avautuu uuteen välilehteen)). Leveät kokotaulukot ja vertailutaulukot ovat yleisiä syitä.

Haittaavatko ponnahdusikkunat ostamista?

Ponnahdusikkunat, jotka peittävät tuotesivun heti saapuessa, piilottavat tiedot, joita asiakas tuli etsimään, joten suosi pieniä bannereita ja rajoita tilauskehotteita.

Googlen Search Central -ohjeistus kuvaa häiritsevät välisivut ja valintaikkunat elementeiksi, jotka estävät sisällön näkymisen, ja suosittelee koko sivun peittävien kerrosten sijaan pieniä bannereita (Google Search Central (avautuu uuteen välilehteen)). Shopify huomauttaa, että ponnahdussisältö voi myös aiheuttaa asettelun siirtymiä (Shopify Help Center (avautuu uuteen välilehteen)). Jokaisen säilyttämäsi valintaikkunan on oltava suljettavissa näppäimistöllä; WCAG 2.1.2 Ei näppäimistöansaa (A-taso) edellyttää, että fokus voidaan siirtää pois komponentista pelkällä näppäimistöllä (W3C (avautuu uuteen välilehteen)).

Löytääkö asiakas luottamusta herättävät sivut ja ehtosivut?

Linkitä palautus-, toimitus-, tietosuoja-, käyttöehto- ja yhteystietosivut jokaisen sivun alatunnisteesta.

Baymardin vuoden 2026 kyselyssä 19 % vastaajista kertoi jättäneensä ostoksen kesken, koska ei luottanut sivustoon korttitietojensa kanssa. Selkeät ehdot ja yhteystiedot ovat perusmerkkejä siitä, että kauppa on aito.

Shopify: kun lisäät ehdot kohdassa Asetukset > Käytännöt (Settings > Policies), Shopify linkittää ne automaattisesti kassan alatunnisteeseen. Jotta ne näkyvät myös kaupassa, lisää ne valikkoon kohdassa Sisältö > Valikot (Content > Menus) (Shopify Help Center (avautuu uuteen välilehteen)) tai ota käyttöön Dawnin alatunnisteen Policy links -asetus.

WooCommerce: julkaise palautusehtojen luonnossivu ja lisää sitten ehto- ja yhteystietosivusi alatunnisteeseen.

Löytääkö sivustohaku tuotteet ja vastaukset?

Haun pitäisi palauttaa oikeat tuotteet, kun haetaan nimellä, väärällä kirjoitusasulla tai synonyymillä, ja sen pitäisi myös vastata kysymyksiin, kuten ”palautukset” tai ”toimitus”.

Baymardin vuoden 2026 hakuvertailu, joka kattoi yli 170 sivustoa ja sovellusta, arvioi 46 % tietokoneen, 58 % mobiilin ja 64 % sovellusten hakukokemuksista ”keskinkertaisiksi” tai sitä heikommiksi. Lisäksi 66 %:lla sivustoista havaittiin ongelmia muissa kuin tuotehauissa, esimerkiksi palautusehtoja etsivä haku palautti tuotteita (Baymard Institute (avautuu uuteen välilehteen), päivitetty 29. huhtikuuta 2026).

Testaa kauppaasi myydyimmän tuotteen nimellä, sen virheellisellä kirjoitusasulla, tuoteryhmän nimellä ja sanalla ”palautukset”. Shopifyssa kaupan haku palauttaa tuotteita, blogikirjoituksia ja sivuja, ennakoiva haku ja kirjoitusvirheiden sieto ovat oletuksena käytössä, ja Search & Discovery -sovellus lisää suodattimet ja tuotteiden nostot (Shopify Help Center (avautuu uuteen välilehteen)). Tavallinen sivu, joka tiivistää toimitus- ja palautusehdot, voi siksi näkyä näissä hauissa.

Voiko kaupasta ostaa pelkällä näppäimistöllä?

Jokaisen vaiheen variantin valitsemisesta kassalle siirtymiseen pitäisi toimia pelkällä näppäimistöllä, ja fokuksen ilmaisimen pitäisi näkyä.

WCAG 2.2 edellyttää, että kaikki toiminnot toimivat näppäimistöllä (2.1.1, A-taso), että näppäimistöansoja ei ole (2.1.2, A-taso), että fokuksen ilmaisin näkyy (2.4.7, AA-taso) ja että muu sisältö ei piilota fokuksessa olevia elementtejä kokonaan (2.4.11, AA-taso) (W3C (avautuu uuteen välilehteen)). Nämä perusasiat puuttuvat usein. Baymardin vuonna 2021 tekemässä katsauksessa 33 liikevaihdoltaan suurimmasta sivustosta 45 %:lla oli toimintoja, joita ei voinut käyttää näppäimistöllä, ja 48 % ei pitänyt fokuksen ilmaisinta näkyvissä koko ajan (Baymard Institute (avautuu uuteen välilehteen)). WebAIMin helmikuun 2026 skannauksessa etusivuilta löytyi keskimäärin 56,1 virhettä ja ostosluokan sivustoilta 71,0 (WebAIM (avautuu uuteen välilehteen)).

Viiden minuutin testi:

  1. Lataa tuotesivu ja paina sarkainnäppäintä (Tab) koskematta hiireen.
  2. Tarkista, että näet koko ajan, missä fokus on.
  3. Valitse koko ja väri ja muuta määrää.
  4. Paina ostoskoriin lisäämisen painiketta ja tarkista, että fokus siirtyy ostoskorin sivupaneeliin ja että paneelin voi sulkea näppäimistöllä.
  5. Siirry kassapainikkeelle.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Ilmainen skannaus tarkistaa monet näistä kohdista noin minuutissa. Konversioraportti muuntaa sivutarkistukset, kuten hinnan näkyvyyden, ostoskoriin lisäämisen puhelimella, toimitus- ja palautustiedot, ponnahdusikkunat, alatunnisteen ehtolinkit, haun, näppäimistöllä ostamisen polun ja vaakasuuntaisen vierityksen, tärkeysjärjestykseen laitetuiksi suosituksiksi. Se perustuu sivutarkistuksiin eikä myyntidataasi, eikä se anna takuuta myynnistä.

Usein kysytyt kysymykset

Mikä on yleisin syy siihen, että asiakas jättää ostoksen kesken?

Baymardin vuoden 2026 kyselyssä, johon vastasi 1 083 yhdysvaltalaista aikuista, yleisin vastaus oli ”selailin vain” (42 %). Muista syistä ensimmäisenä olivat lisäkulut, kuten toimituskulut, verot ja maksut, 40 %:lla, ennen hidasta toimitusta 20 %:lla.

Nostaako näiden ongelmien korjaaminen konversioastettani?

Kukaan ei voi luvata sitä. Tutkimus kuvaa esteitä, jotka ovat yleisiä suurissa sivusto- ja asiakasotoksissa. Se, muuttaako niiden poistaminen tuloksiasi, riippuu tuotteistasi, hinnoistasi ja liikenteestäsi, joten mittaa tilanne ennen jokaista muutosta ja sen jälkeen.

Mihin toimitus- ja palautustiedot kannattaa sijoittaa tuotesivulla?

Hinnan ja ostopainikkeen lähelle lyhyenä yhteenvetona, jossa on linkki täydellisiin ehtoihin. Baymardin tutkimuksessa 60 % vastaajista kertoi etsivänsä palautusehtoja tuotesivulta.

Pitääkö ostoskoriin lisäämisen painikkeen näkyä puhelimella ilman vieritystä?

Mikään sääntö ei vaadi sitä, mutta asiakkaan pitäisi nähdä hinta ja päästä painikkeelle nopeasti. Kiinteä ostopalkki on yksi vaihtoehto, kunhan se ei piilota fokuksessa olevia elementtejä tai muuta sisältöä.

Onko saavutettavuus osa konversiota?

Kyllä, aivan yksinkertaisesti: asiakas, joka ei pysty käyttämään varianttivalitsinta tai ostoskoriin lisäämisen painiketta näppäimistöllä tai ruudunlukuohjelmalla, ei voi ostaa. WCAG 2.2:n AA-taso kattaa nämä perusasiat.

Lähteet

Kaikki oppaat