Tuotesivun suunnittelu: 12 yksityiskohtaa, jotka lisäävät myyntiä

01Miksi tuotesivu on niin tärkeä?

Verkkokaupassa ostopäätös tehdään tuotesivulla. Etusivu ja kategoriasivut tuovat asiakkaan tuotteen luo; tuotesivu vastaa kysymykseen ”pitäisikö tämä ostaa?”. Pieni epävarmuus tällä sivulla riittää siihen, että asiakas sulkee välilehden ja siirtyy kilpailijan sivustolle.

Tuotesivun suunnittelun onnistumista seurataan yhdellä mittarilla: ostoskoriin lisäämisen osuudella. Se, kuinka suuri osa sivun nähneistä kävijöistä lisää tuotteen ostoskoriin, kertoo, tekeekö suunnittelu tehtävänsä. Alla olevat 12 yksityiskohtaa ovat tähän osuuteen eniten vaikuttavat perusalueet.

Ennen yksityiskohtiin siirtymistä muistutamme periaatteesta: tuotesivu ei ole mallipohja vaan sivu, joka rakennetaan tuotteesi luonteen mukaan. Vaatteiden, ruoan ja elektroniikan esittäminen samalla asettelulla työntää kunkin tärkeimmän tiedon taka-alalle.

02Kuva- ja tietoalue

Neljä ensimmäistä yksityiskohtaa koskevat aluetta, jossa asiakas tutustuu tuotteeseen. Tämän alueen tulee olla sivun ylimmässä osassa, näkyvissä ilman vierittämistä.

1. Zoomattava tuotegalleria

Tuotegalleria vastaa kaupan hetkeä ”otan käteen ja katson”. Käytä eri kulmista otettuja, zoomattavia kuvia ja mahdollisuuksien mukaan lyhyttä videota. Mobiilissa galleriaa pitää voida selata sormella ja pikkukuvien tulee olla sopivan kokoisia napautettaviksi. Kuvauksen yksityiskohdista voit lukea artikkelistamme verkkokaupan tuotekuvat.

2. Selkeä tuotteen otsikko

Otsikon tulee sisältää merkki, tuotetyyppi ja erottava ominaisuus. Otsikko kuten ”Merkki Malli X Ruostumaton teräs -termospullo 500 ml” kertoo sekä asiakkaalle että hakukoneelle, mikä tuote on, toisin kuin pelkkä ”Malli X”.

3. Keskeiset ominaisuudet

Otsikon alla oleva kolmen–viiden kohdan lyhyt tiivistelmä antaa tärkeimmän tiedon asiakkaalle, joka ei lue pitkää kuvausta. Jokaisessa kohdassa tulee kertoa sekä ominaisuus että sen tuoma hyöty.

4. Näkyvä variaatiovalinta

Väri- ja kokovaihtoehtoja ei pidä piilottaa pudotusvalikkoon vaan ne tulee näyttää painikkeina tai värilaatikoina. Kun kuva, hinta ja varastotilanne vaihtuvat heti valitun variaation mukaan, asiakas ei lisää väärää tuotetta ostoskoriin. Linkin kokotaulukkoon tulee olla valinta-alueen vieressä.

03Ostoalue

Seuraavat neljä yksityiskohtaa muodostavat alueen, jossa asiakas päättää ja toimii. Alueen tulee olla selkeä ja häiritsemätön.

5. Hinta, alennus ja osamaksu

Hinnan tulee olla yksi sivun luettavimmista tiedoista. Jos on alennus, vanha hinta näytetään yliviivattuna ja uusi hinta selvästi. Osamaksuvaihtoehdot voivat olla hinnan alla lyhyenä yhteenvetona ja yksityiskohtainen osamaksutaulukko yhdellä klikkauksella avautuvassa alueessa.

6. Varastotilanne

Tiedot kuten ”Varastossa”, ”viimeiset 3 kappaletta” tai ”ennakkotilaus” auttavat asiakasta päättämään. Tiedon on kuitenkin perustuttava todelliseen varastoon; keinotekoista kiirettä luovat valelaskurit heikentävät luottamusta. Loppuneen tuotteen kohdalla ”ilmoita, kun tuote on taas saatavilla” -vaihtoehto kutsuu asiakkaan takaisin sen sijaan, että hänet menetettäisiin.

7. Selvästi näkyvä Lisää ostoskoriin -painike

Lisää ostoskoriin -painike on sivun näkyvin elementti: kontrastinen väri, riittävä koko ja selkeä teksti. Kun painike pysyy mobiilissa näytön alareunassa sivua vieritettäessä, asiakkaan ei tarvitse etsiä sitä päätöshetkellä.

8. Toimitus- ja rahtitiedot

Asiakas haluaa hinnan vieressä tietää, milloin tuote on hänen käsissään ja onko toimitus maksullinen. Arvioitu lähetysaika ja ilmaisen toimituksen raja tulee kirjoittaa aivan painikkeen läheisyyteen. Se, että nämä tiedot nähdään ensimmäistä kertaa vasta maksuvaiheessa, on yksi yleisimmistä ostoskorin hylkäämisen syistä.

04Luottamus- ja jatkoalue

Viimeiset neljä yksityiskohtaa ovat alueita, jotka vakuuttavat epäröivän asiakkaan ja pitävät ostoksen liikkeessä. Nämä osiot sijaitsevat yleensä ostoalueen alapuolella.

9. Yksityiskohtainen kuvaus

Pitkä kuvaus, tekniset tiedot sekä käyttö- ja hoito-ohjeet voidaan järjestää välilehdiksi tai avattaviksi osioiksi. Tekstin kirjoittamisesta olemme kertoneet oppaassamme tuotekuvauksen kirjoittaminen 10 säännön avulla.

10. Asiakasarvostelut

Kuvalliset arvostelut ja arvosanajakauma ovat tehokkaimpia vakuuttamiskeinoja, koska ne näyttävät tuotteen todellisen käytön. ”Vahvistettu ostaja” -merkintä ja kohteliaat vastaukset kielteisiin arvosteluihin lisäävät luottamusta. Arvostelujen poistaminen tai vain myönteisten näyttäminen puolestaan menettää luottamusta pitkällä aikavälillä.

11. Palautus ja turvallinen maksu

Lyhyt yhteenveto palautusehdoista ja hyväksytyistä maksutavoista voi olla pienenä tietopalkkina ostoalueen lähellä. Ensimmäistä kertaa ostavalle asiakkaalle nämä tiedot ovat ratkaisevia.

12. Samankaltaiset ja täydentävät tuotteet

Sivun alaosan samankaltaiset tuotteet pitävät sivustolla asiakkaan, joka ei löytänyt aivan etsimäänsä. Täydentävät tuotteet ja tuotesetit kasvattavat ostoskorin arvoa. On tärkeää, että tämän alueen tuotteet liittyvät oikeasti tuotteeseen; satunnaiset tuotteet häiritsevät.

05Ajattele mobiili edellä

Suurin osa verkkokaupan liikenteestä tulee mobiililaitteilta. Siksi tuotesivu tulee suunnitella ensin puhelimen näytölle ja laajentaa sitten työpöydälle. Mobiilissa hinnan, variaatiovalinnan ja Lisää ostoskoriin -painikkeen pitää näkyä ilman vierittämistä, ja kosketusalueiden tulee olla riittävän suuria sormella painettaviksi.

Nopeus on erottamaton osa mobiilikokemusta. Googlen Core Web Vitals -mittareissa hyvinä pidetyt rajat ovat LCP:lle 2,5 sekuntia, INP:lle 200 millisekuntia ja CLS:lle 0,1. Suurten tuotekuvien pakkaaminen, gallerian pysyminen paikallaan sivun latautuessa ja tarpeettomien skriptien poistaminen parantavat näitä arvoja suoraan. Tässä kohtaa tulevat mukaan mobiiliystävällinen suunnittelu sekä nopeus- ja suorituskykyoptimointi.

06Mittaa ja paranna suunnittelua

Hyvä tuotesivu ei valmistu kerralla; se kypsyy datan avulla. Tuotenäyttöjen, ostoskoriin lisäysten ja ostojen välisten suhteiden säännöllinen seuranta näyttää, missä vaiheessa ongelma on.

Lämpökartta- ja istuntotallennustyökalut näyttävät, mihin käyttäjät sivulla klikkaavat ja mihin he jumittuvat. Ennen muutoksen tekemistä koko sivustolle kokeile sitä muutamalla tuotteella ja vertaile tuloksia; näin vältät arvailuun perustuvat päätökset.

• Jos ostoskoriin lisäämisen osuus on alhainen: tarkista galleria, hinta ja variaatioalue.
• Jos ostoskoriin lisäys on korkea mutta ostot vähäisiä: tarkista toimituskulut ja maksuvaihe.
• Jos poistumisprosentti on korkea: tarkista sivun nopeus ja ensimmäisen näytön tieto.
• Jos mobiilin ja työpöydän välillä on suuri ero: testaa mobiiliasettelu erikseen.

07Tuotesivu Aurorassa

Aurora Smart E-Ticaretissa ei käytetä valmiita teemoja; jokaisen kaupan ulkoasu, tuotesivut mukaan lukien, suunnitellaan konseptisuunnittelu-palvelullamme yrityksellesi ja tuotteidesi rakenteelle ainutlaatuiseksi. Käyttäjäpolku ja käyttöliittymä suunnitellaan UI/UX-suunnittelun periaatteilla.

Tuotesivulle kuuluvat vakiona zoomattava galleria ja video, variaatiovalinta, samankaltaiset tuotteet, tuotesetit, pikakatseluikkuna sekä kuvalliset arvostelut ”Vahvistettu ostaja” -merkinnällä. Ladatut kuvat muunnetaan automaattisesti nopeasti latautuvaan muotoon. Itse kuviin voit hyödyntää tuotekuvaus-palveluamme.

Keinot voittaa takaisin tuotesivun jälkeen menetetty asiakas olemme koonneet artikkeliin ostoskorin hylkäysprosentti.