Toimiminen verkkokauppaympäristössä

Verkkokaupan osat ja rakenne

HEADER

Header on verkkokaupan sisäänlaskeutumissivun yläosa, voidaan kutsua myös näyteikkunaksi. 

Hyvä header sisältää seuraavat ominaisuudet: 
  1. URL-osoite: SSL sertifioitu turvallinen ja suojattu https-linkki
  2. Verkkokaupan nimi (domain)
  3. Yrityksen logo 
  4. Vaihtuva, nimetty ja kuvauksen sisältävä stillkuva, karuselli tai video
  5. Myyntivaltit sivun yläreunassa (tuotteet, kotiinkuljetus, maksut ym.)
  6. Hakutoiminto
  7. Ostoskori
  8. Käyttäjän tili
  9. Käyttäjälähtöinen, looginen navigointivalikko 
  10. Toimintokehotus (osta tästä) 
  11. Oston esteen vähentäminen (lue lisää, osta nyt) 
  12. Tuotenostot (uutuudet, suosittelemme, myydyimmät, last chance) 
  13. Chat-osio
  14. (nuoli; palaa etusivulle)

FOOTER

Verkkokaupan etusivun alaosan tulee sisältää: 
  1. Ohjaus tuotesivulle ja ostokehotus
  2. Tilaus- ja toimitusehdot
  3. Maksutavat
  4. Vaihto-ja palautusehdot
  5. Tietosuojaseloste (GDPR)
  6. Yhteystiedot ja y-tunnus
  7. Somejaot

KATEGORIASIVU

Kategoriasivun sisältö: 
  1. Kategorian URL-osoite (selkeä, järkevä)
  2. Oston esteitä vähentävä tieto (toimitusnopeus, ei postikuluja) 
  3. Murupolku (vierailijan polku sivustolla, mahdollistaa helpon paluu edeltäville sivuille) 
  4. Brändin mukainen kategoriakuva (jaettava linkki FB- tai IG - julkaisuissa)
  5. Harkittu kategorian SEO-optimoitu nimi ja kuvausteksti
  6. Haun suodattimet: väri, koko, materiaali, brändi ym.)
  7. Kategoriaan kuuluvien tuotteiden määrä
  8. Visuaalisesti yhtenäiset kuvat
  9. Kategoriaan kuuluvat tuotteet ja kuvat. Huomiot kuvissa: ale, uutuus, bestseller, last chance ) 
  10. Kuvassa myös pikaostosmahdollisuus: siirto suoraan ostoskoriin

TUOTESIVU

  1. Tuotteen URL-osoite
  2. Oston esteitä vähentävä tieto
  3. Laadukkaat, selkeät ja nopeasti latautuvat kuvat
  4. Tuotekuvaus ja lisätiedot
  5. Tuotenostot ja ehdotukset (lisämyynti: saattaisit pitää näistä)
  6. Kuvan vieressä kategoria, tuotteen nimi, brändi, lyhyt kuvaus, hinta
  7. Valintapalkit: koko, väri, määrä
  8. Lisää ostoskoriin-nappula

Tuotesivu
Tuotesivu

KASSA

Kassa-sivun sisältö:
  1. Uutiskirjeen tilaus (valintaruutu) 
  2. Tilaajan tiedot
  3. Peruutusehdot
  4. Toimitusehdot
  5. Toimitustavat
  6. Maksutavat
  7. Tilausvahvistus

***

Toimivan verkkokaupan ominaisuuksia

Millainen on hyvä verkkokauppa? 
  • Etusivun 1 sekunnin vaikutelma ratkaisee
  • Hakukoneoptimointi on tehty huolellisesti
  • Navigointi on helppoa; Murupolku
  • Kategoriat on tehty loogisesti ja asiakaslähtöisesti
  • Kuvat ja videot on nimetty ja kuvaukset kuvaavat selkeästi sisällön (SEO)
  • Kuvat ja videot ovat laadukkaita ja ne latautuvat nopeasti
  • Tuotekuvat sisältävät myös yksityiskohtia
  • Tuotteen kuvaus ja lisätiedot näkyvillä
  • Hintatiedot selkeästi esillä
  • Hakutoiminto ja ostoskori esillä heti etusivulla
  • Tuotesivuilla on pikaostostoiminto
  • Klikkauksien määrän tulee olla vähäinen
  • Verkkokaupan tulee toimia sekä verkko- että mobiiliversiona (responsiivisuus)
  • Sopimusehdot ovat selkeästi näkyvillä
  • Yrityksen ja asiakaspalvelun yhteystiedot ovat selkeästi näkyvillä
  • Ostoksen voi tehdä ilman rekisteröitymistä
  • Ostospolku on helppokäyttöinen tuotteen valinnasta kassalle asti
  • Riittävästi maksutapoja
  • Riittävästi toimitustapoja
  • Kohtuuhintainen tai maksuton toimitus
  • Jakelukanavat toimivat moitteettomasti ja asiakas saa tuotteen nopeasti
  • Selkeät palautuskäytännöt
  • Automatisoitu tilausvahvistus
  • Verkkokauppa tarjoaa asiakkaille ostettavien tuotteiden lisäksi myös tuotetietoa, ohjeita ja käyttökokemuksia. 
Kaiken kaikkiaan verkkokaupan tulee toimia teknisesti moitteettomasti, vastata kysyntää ja lopulta johtaa ostoksen tekemiseen.


***

VERTAILE ERI VERKKOKAUPPOJA

Tutustu 10 eri verkkokauppaan ja tutki niiden ominaisuuksia ja toteutusta.

  • Saarentaika 
    Shopify-alusta, ei pakollista rekisteröitymistä, runsaasti toimintokehotuksia, myyntivaltti heti etusivun ylälaidassa. Kuvat fiiliskuva-tyyppisiä, lisätiedot näkyvillä. Hyvä latautumisnopeus. Pikaostospainikkeet ja pikakatselumahdollisuus. Hengästyttävä määrä tuotteita! Asiakkaiden arvostelut ja ohjeita. FAQ-osuus. Someikonit. Mobiilihaussa listan kärjessä (mainos), sivu responsiivinen. Ei murupolkua.

  • Lankamaailma 
    Oscar Software-alusta. Paljon värejä, etusivu sekava. Oleelliset toiminnot heti etusivun alussa. Toimintokehotuksia, ei kuitenkaan ostoskoripainiketta tuotteen kuvassa, lisätiedot klikkauksen päässä. Murupolku löytyy. Kuvat yksipuolisia, ei yksityiskohtia tai eri kuvakulmia (vaatteet). Maksutapa PayTrail. Yleisilme vanhahtava. Mobiiliversio vähän tönkkö.

  • Living Deauville 
    Alusta? Etusivu selkeä ja freesin näköinen. Musta esim. logojen pohjalla tehokas katseenvangitsija. Toimintokehotukset, myyntivaltit ym. hyvin näkyvillä. Kategoriat ja hakutoiminto heti alussa. Kategoriat tuotteittain tai brändi haulla. Myymälän aukiolot heti näkyvillä. Tuotekuvissa lisää koriin ja määrä-painikkeet. Tuotteen lisätiedot tulee vasta kuvaa klikkaamalla. Kuvissa Zoom-toiminto. Yhteystiedot ja someikonit erittäin selkeästi! Murupolku. Toimitus- ja Klarna- maksu avautuvat uudessa popup-ikkunassa. Vähän jähmeä latautumisnopeus. Hyvät kuvat, yksityiskohtia. Responsiivinen. 

  • Le Follie 
    Alusta Wordpress. Sivulla paljon tyhjää tilaa -> paljon skrollausta. Yhteystiedot ja yhteydenottolomake, Bambora Payform-maksut. Paljon tuotekuvia, zoom-toiminto, kuvaus- ja lisätiedot selkeästi. Lisää ostoskoriin-painike vasta tuotesivulla. Murupolku. Ostokori ja viimeksi katsotut tuotteet näkyvät koko ajan kategoria- ja tuotesivun oikeassa reunassa. Responsiivinen. 

  • Kitchen Time 
    Alusta? Sivulle aukeaa heti popup-ikkuna, jossa tervetuliais-alennuskoodi, joka vaatii rekisteröitymisen. Ajankohtainen kategoriakuva. Freesi ilme, valikko, logo, hakukenttä ja ostoskori heti alussa. Best seller, Nice Deal-tiedot. Lahjavinkit, suositukset ja inspiraatioartikkelit. FAQ-osio. Pohjoismainen verkkokauppa, kielivalikko usealla eri kielellä: etusivun sisältö muokattu kohdemaan mukaan.
    Tilannut itse tuotteita tästä verkkokaupasta: helppo, nopea sivusto, tarvittavat lisätiedot saatavilla. Sopivasti ostokehotuksia. Riittävästi maksutapoja, äärettömän nopea toimitus (maksuton kotiinkuljetus BudBeella) ja tuotteet pakattu hyvin. Tuotteet vastaavat kuvausta. 

  • Sibbes 
    Alusta? Valju ensivaikutelma, etusivulla kahteen kertaan tervetuloa verkkokauppaostoksille (?) Suhruiset kuvat huonoilla taustoilla, vaikkakin runsaasti tuotekuvia. Tuotetiedoissa luvattoman PALJON kirjoitusvirheitä.
    ESIM: Trendikäs ja tyylikäs musta pitsipusero. Kauniisti läpi siftaava malli.

    Ranskalaista tyylikkyyttä. Edessä isot paljetit koristeet. 
    Lyhyt hihainen mallikisa erittäin näyttävä selkä. Rinnan ympärys 1.00 ja pituus  0,50 ??
    Ei murupolkua, linkki FB-sivustolla, jossa postauksia n. 1 kk syklillä: sivussa teksti "
    Seuraa meitä Facebookissa! Saat uutiset uusista tuotteista ja tapahtumista suoraan seinällesi!" 

    Ei houkuta ostoksille, paljon klikkauksia, sivusto tehty huolimattomasti. Sisältää vain perustoiminnot, yleisilme vanhahtava. Into ei enää riittänyt siirtymään mobiiliversioon.

  • Dom Dom 
    Alusta WordPress. Tämä sivusto tietää rahan menoa...Selkeä, kaikki oleelliset elementit löytyy. Kauniit fiiliskuvat, mutta myös yksinkertaiset tuotekuvat valkoisella pohjalla. Zoom-mahdollisuus. Tuote- ja lisätiedot löytyvät helposti, aleprosentit kuvan päällä. Tuotesivulla lisämyyntiä (saatat pitää myös näistä ja tutustu myös). Suosikki-painike ja murupolku tuotesivulla. Kategoriat heti sivun ylälaidassa, mutta myös vasemmassa sivupalkissa, samoin uutiskirjeen tilaus löytyy täältä. Ostoskorin sisältö näkyy vasemmassa sivupalkissa. Sivusto on responsiivinen. Ei rekisteröitymispakkoa. Ilmainen toimitus vain liikkeestä noudettaessa. PayTrail-maksut. Nopea ostos- ja maksutapahtuma, tilausvahvistus sähköpostiin välittömästi. Luvattu toimitusaika 1-3 vrk. 

  • Kukkakauppa Regina 
    Alusta WordPress. Oleelliset elementit löytyy, yrityksellä ei kuitenkaan somealustoja. Yhteystiedot ja yhteydenottolomake. Kuvien laatu epätasainen, zoomatessa kuvan laatu kärsii. Hintatiedot suuntaa antavia johtuen kimpun koosta ja väristä. Toimitusmaksuja useita, luettelo epäselvä, maksuton toimitus liikkeestä noudettaessa. Kassalla valtava määrä täytettäviä tietoja, joista kuitenkin suuri osa on valinnaisia. Maksutapa BamboraPayForm, noudettaessa liikkeestä maksun voi suorittaa myös pp. Kimpun kaveriksi voi tilata myös suklaarasian. 

  • Spa Shop 
    Alusta Oscar Software? Logo, hakukenttä, ostoskori ja kategoriat heti sivun yläosassa. Kategoria jaottelu pääryhmittäin, kategoria näkyy myös sivun vasemmassa laidassa.  Etusivun karusellikuvan päällä Ostoksille-painike. Tuotemerkkien logot heti kuvan alla, logoja klikkaamalla ei kuitenkaan pääse navigoimaan suoraan tuotesivulle. Uutuudet, tarjoukset, uutiskirjeen tilaus ja yhteydenotto ym. näkyvillä isoina kuvina, joista linkki toimintoon. Sisäänkirjautuminen vasta sivun alalaidassa. Tuotekuvissa ostoskori, hinta ja FB- jakomahdollisuus. Kategoriasivua klikkaamalla avautuu tuotesivu, jossa tuotetiedot, tekniset tiedot, hinnat, varastosaatavuus, ostoskori. Lisämyyntituotteet avautuvat klikkaamalla katso myös-painiketta. Murupolku. Arvosteluja tuotteista ei ole, tuotemerkkien alta löytyy melko hyvät kuvaukset tuotemerkeistä.Yhteystiedot löytyy, ei yhteydenottolomaketta. FB-ikoni löytyy, IG uupuu, vaikka on olemassa. Yli 60 euron tilaukset postipakettina ilman maksutta, nouto mahdollinen yrityksen toimipisteistä. Verkkokauppa on lähinnä ammattilaiskäyttöön, joten visuaalinen ilme on ehkä vähän tylsä... Responsiivinen. Kirjautuneena löytää oman tilaushistorian. PayTrail-maksutapa. Nopeat toimitukset. 

  • Weecos 
    Alusta? Weecos on "v
    erkkokauppapaikka, jossa Palveluun kauppiaksi rekisteröityneet tuotteiden valmistajat voivat ilmoittaa tuotteitaan myytäväksi palvelun välityksellä ja asiakkaat voivat ostaa palvelun kautta Weecosin yhteistyökumppaneina olevien kauppiaiden tuotteita."
    Asiakas näin ollen tekee ostoksen kauppiaan kanssa, ei Weecosin, ja esim. toimitusehdot ja kulut määräytyvät kauppiaan hinnaston mukaan. Ennen sitovan tilauksen tekemistä asiakkaan tulee vahvistaa ostoskorinsa sisältö, jonka Weecos välittää kauppiaalle. Weecos on siis käytännössä vain kauppapaikka, jolla ei ole omaa varastoa ja joka huolehtii tilauksen vastaanottamisesta ja maksuista. Jos tilaat useamman eri valmistajan tuotteen, saat usean erillisen lähetyksen ja maksat jokaisesta toimitusmaksun. Weecos on vastuullisten brändien kauppapaikka ja valikoima on valtaisa, latausnopeus pöytäkoneella takkuaa. Kuvat ovat tyylikkäitä,  Vastuullisuus ja arvot tuodaan esille selkeästi etusivun palkissa ja lisäksi sivun alalaidassa ja tuotetiedoissa tämä on huomioitu näkyvästi. Sivuston vasemmassa laidassa on leima-valikoima. Tuotekuvissa ei ostoskoria, vasta tuotesivulla. Tuotesivulla tuotteen vastuullisuusleimat, sekä tuotetiedot, huolto ja postituspainikkeet. Tuotesivuilla erikseen tuotteen valmistajan ja brändin linkki. Someikonit näkyvillä, palkista pääsee klikkaamalla lukemaan myös blogia, jossa enemmän artikkeleita tuotteista ja brändeistä, tosin ne eivät ole artikkeleita, vaan alennusmyynti mainoksia...
    Sivusto on ammattimaisen näköinen. 
***

OSTAJAPERSOONAT

Ostajapersoonat_verkkokauppa
Ostajapersoonat

 
***

KUVAT VERKKOKAUPASSA

Kuvan tekniset ominaisuudet

  • mitat pikseleinä PX
  • resoluutio 72px/inch (kuvan laatu)
  • < 200 Kt (kuvakoko -> latautumisnopeus)
  • kuvan nimeäminen + Alt-teksti
  • kuvan pienentäminen (TinyPNG, GIMP)



Mihin kaikkeen tarvitsen kuvia verkkokaupassa?

  • näyteikkunakuva: houkutuskuva, ajankohtaista, toimintokehotus
  • ostokehotus-palkki: lue lisää, osta nyt
  • tuotesivukuvat: laadukkaat kuvat tuotteista, 1.kuva?, 3-5 kuvaa, miten käyttöyhteys näkyy, miten mittasuhteet näkyy. 
  • kategoriakuvat: brändinmukaiset, houkuttelevat, visuaalisesti yhtenäiset kuvat

Hyvän tuotekuvan resepti

  • mikä on kuvan tavoite
  • selkeä ja suunniteltu kuvausympäristö
  • hyvä valaistus (vain yhtä valoa -> valokuvausvalo, EI keltaista valoa)
  • kuvan tarkoitus on auttaa asiakasta hahmottamaan tuotteen ominaisuuksia, katsoja näkee välittömästi mistä on kyse
  • totuudenmukaiset värit ja mittasuhteet
  • riittävän tiukka rajaus (huomio tuotteen koko)

Valo ja sen lämpötila

  • ulkokuvaus vs. sisäkuvaus
  • valon suunta ja luonne: suora <-> epäsuora
  • varjot
  • WB: white balance, valkotasapaino
  • värilämpötila
  • lisävalot 

  • EXPOSURE = valotus
  • WB = valkotasapaino
  • CONTRAST = kontrasti
  • SHARPNESS = terävyys
  • SATURATION = värikylläisyys
  • SUORISTUKSET
  • RAJAUS

Kuvankäsittelyohjelmia

  • SnapSeed
  • InShot
  • Adobe Lightroom
  • VSCO


***

Kuvaustreeniä kotistudiossa

Harjoittelua Sunborn Bakery verkkokauppaa varten. Sulkutilasta johtuen leipomo on suljettu ja kuvausharjoittelu piti tehdä kaupan valikoimista löytyvillä tuotteilla. Kuvat otettu kotistudiossa kännykkäkameralla: HONOR JSN-L21 Ai Camera. 

 
Näyteikkunakuvat: 


Suklaaleivos_chocolatepastry
Näyteikkunakuva: Leivokset

Sfogliatine
Näyteikkunakuva: Pikkuleivät

Porkkanakakku_carrotcake
Näyteikkunakuva: Porkkanakakku

Kategoriakuvat:

Porkkanakakku_carrotcake
Kategoriakuva: KAKUT

Leipä_bread
Kategoriakuva: LEIVÄT


Tuotekuvat: 

Kauraleipä








Porkkanakakku







Suklaaleivos






***

Tuotteen viimeistely ja pakkaaminen

Kun asiakas on tehnyt verkkokaupassa tilauksen, paketin on aika lähteä asiakkaalle. Verkkokauppiaan kumppanina tuotteiden toimittamisessa voi toimia esim. Pakettikauppa tai Shipit

Tuotteen viimeistelyyn ja pakkaamiseen liityy muutamia huomioitavia asioita. 
  • mieti mitä arvomaailmaa pakkaus edustaa: kierrätys, kestävä kehitys, luksus ym.
  • huolehdi että tuote on pakattu niin että se kestää kuljetuksen ja on perillä asiakkaalla ehjänä: kuplamuovi, kartonki, styrox
  • viimeistelyyn silkkipaperi ja tervehdys / kiitos verkkokauppiaalta
  • pakkauksen mukaan lähetyslista, kierrätysohjeet, tarjous, kanta-asiakaslahja
  • elintarvikkeet vaativat omat pakkausmateriaalit
Pakkausmateriaaleja toimittaa mm. NapakkaPaperilla ja Pa-Hu
Pakkaustarvikkeita AJ Tuotteet

***

Sähköpostiautomaatiot

Liiketoiminnalliset viestit (tilausten vastaanotto, tilausvahvistukset ja toimitusilmoitukset) toimivat verkkokaupassa yleensä automaatiolla. Samoin jälkimarkkinointi verkkokaupassa tapahtuu sähköpostiautomaatioiden avustuksella. Näiden tavoite on lisätä ostotiheyttä, kasvattaa kertaostoksia ja sitouttaa asiakasta. 
  • Auttaa asiakasta sellaisella sisällöllä, että ne tuntuvat asiakkaasta palvelulta 
  • Ohjata asiakasta ostamaan oikean tuotteen tai tuotteita
  • Ohjata asiakas ostamaan useammin
  • Ohjata asiakasta ostamaan enemmän

Esimerkkejä sähköpostiautomaatiotoiminnoista 

  • Kiitä asiakasta
  • Muistuta hylätystä ostoskorista
  • Muistuta vanhaa asiakasta, jos viimeisestä ostoksesta on jo aikaa
  • Tee lisämyyntiä (saatoit kiinnostua myös näistä)
  • Muistuta uuden tuotteen ostamisesta
  • Mainosta kampanjoita
  • Lähetä uutiskirjeitä uutuuksista
  • Palkitse kanta-asiakas etuosto-oikeudella tai erikoishinnalla
  • Pyydä palautetta
  • Pyydä tuotearvosteluja
  • Lähetä kiinnostuksen kohteisiin perustuvia linkkejä tai artikkeleita
Uutiskirjepohjien suunnitteluun löytyy apua mm. Mailchimp tai Active Campaign alustoilla.

***


Ei kommentteja:

Lähetä kommentti