Etusivu ei ole galleria eikä esite. Se on ohjausmekanismi. Sen ainoa tehtävä on saada oikea kävijä oikean tuotteen luo mahdollisimman nopeasti. Jokaisen etusivun suunnittelupäätöksen pitäisi palvella tuota tavoitetta.
Tässä artikkelissa kerrotaan, miten suunnittelet toimivan verkkokaupan etusivun. Mitä sisällyttää, mitä jättää pois, mitkä virheet tappavat konversiota ja miten ajatella asettelua mobiilissa, jossa suurin osa ostajistasi selaa.
Jos haluat kokonaiskuvan siitä, mitä sivuja kauppasi tarvitsee, aloita artikkelista mitä sivuja jokainen verkkokauppa tarvitsee.
Mihin etusivua oikeastaan tarvitaan?
Etusivu palvelee kävijöitä, jotka eivät ole vielä päättäneet. He tietävät jotain brändistäsi tai löysivät sinut haun tai sosiaalisen median kautta, mutta eivät ole vielä sitoutuneet ostamaan. Etusivu on hetki, jolloin he päättävät, menevätkö pidemmälle.
Sen täytyy vastata kolmeen kysymykseen heti. Mitä tämä kauppa myy? Onko se minunlaiselleni ihmiselle? Mitä minun pitäisi tehdä seuraavaksi? Jos jokin näistä vastauksista on epäselvä, kävijät lähtevät. Ei siksi, että tuotteesi olisivat huonoja, vaan siksi, että etusivu ei antanut heille syytä jäädä.
Miten suunnittelet hero-osion
Hero-osio on ensimmäinen asia, jonka kävijä näkee. Se sijaitsee ensimmäisellä näytöllä, ennen vierittämistä, ja kantaa suurimman osan ensivaikutelman painosta.
Vahvassa hero-osiossa on neljä elementtiä. Otsikko, joka nimeää, mitä myyt, selkeällä kielellä. Lyhyt tukirivi, joka lisää kontekstia, usein keskeinen hyöty tai erottava tekijä. Visuaali, joka näyttää tuotteen tai sen luoman lopputuloksen. Yksi toimintakehotuspainike, joka kertoo kävijälle täsmälleen, minne mennä.
Otsikko on tärkein osa. Pidä se täsmällisenä. "Käsintehdyt nahkalaukut arkikäyttöön" toimii. "Missä käsityö kohtaa toimivuuden" ei. Ostajat silmäilevät nopeasti. Jos otsikko vaatii tulkintaa, olet jo menettänyt heidät.
CTA-painikkeen pitäisi nimetä määränpää, ei tunnetta. "Osta laukkuja" tai "Katso uutuudet" toimii. "Tutustu lisää" tai "Tutki nyt" ei. Anna kävijälle suunta, ei ehdotus.
Hero-visuaalin pitäisi näyttää tuote selvästi. Tunnelmakuvat toimivat hyvin, kun tuote tarvitsee kontekstia ollakseen järkevä, kuten vaatteet tai kodin tuotteet. Pelkät tuotekuvat toimivat paremmin, kun selkeys on tärkeämpää kuin haaveilu, kuten työkaluilla tai elektroniikalla. Käytä laadukkaita kuvia. Epäselvä tai huonosti valaistu hero heikentää kaikkea muuta.
Mitä nostaa esiin hero-osion alapuolella
Kun kävijä vierittää hero-osion ohi, hän etsii täsmällisempiä syitä jäädä. Etusivun tämän osan pitäisi nostaa esiin tuotteita tai kategorioita, jotka vastaavat sitä, mitä ostajasi todennäköisimmin haluavat.
Älä yritä nostaa esiin kaikkea. Valitse myydyimmät tuotteesi, korkeimman katteen tuotteesi tai kategoria, johon suurin osa ostajistasi päätyy. Kolmesta kuuteen esiin nostettua tuotetta on kohtuullinen määrä. Sitä enemmän alkaa näyttää sotkuiselta ja luo päätöshalvauksen.
Kategorialohkot toimivat hyvin kaupoille, joilla on laaja valikoima. Yksittäisten tuotteiden sijaan näytä kolme tai neljä tärkeintä kategoriaa selkeällä kuvalla ja nimellä jokaiselle. Anna ostajien valita itse oikea osa kauppaa.
Esiin nostetun osion pitäisi myös olla dynaaminen. Kierrätä mukaan kausituotteita, alennustuotteita tai uutuuksia. Etusivu, joka ei koskaan muutu, ei anna palaaville kävijöille syytä vierittää.
Miten käytät sosiaalista todistetta etusivulla
Ostajat luottavat muihin ostajiin enemmän kuin kauppoihin. Etusivun sosiaalinen todiste rakentaa uskottavuutta, ennen kuin kävijä pääsee tuotesivulle.
Tehokkaimmat etusivun sosiaalisen todisteen muodot ovat lyhyet asiakasarvostelut tai tähtiarvosanat, asiakasmäärä tai lähetettyjen tilausten määrä, lehdistömaininnat tai mediatunnukset sekä kolmannen osapuolen luottamusmerkit, kuten turvallisen maksun kuvakkeet tai tunnetut sertifiointimerkit.
Pidä se tiiviinä. Yksi tai kaksi vahvaa suositusta on tehokkaampi kuin seinällinen viiden tähden arvosteluja. Yksi tunnetun median logo tekee enemmän kuin lista kymmenestä tuntemattomasta nimestä. Valitse todiste, jolla on suurin merkitys ostajalle, joka epäilee eniten ostamista sinulta ensimmäistä kertaa.
Pitäisikö mukana olla brändin tarinaosio?
Lyhyt brändin tarinaosio etusivulla on valinnainen, mutta se auttaa tietyissä yhteyksissä. Se toimii parhaiten, kun perustajan tarina on osa syytä, miksi ostaja valitsisi tämän brändin suuremman kilpailijan sijaan. Käsintehdyt tuotteet, eettinen hankinta, yhteisölähtöiset brändit ja perustajalähtöiset tuotteet hyötyvät kaikki lyhyestä inhimillisestä hetkestä etusivulla.
Jos sisällytät sellaisen, pidä se lyhyenä. Kaksi tai kolme lausetta ja linkki täydelle Tietoa meistä -sivulle riittää. Älä sijoita sitä ensimmäiselle näytölle tai esiin nostettujen tuotteiden yläpuolelle. Tarina lisää lämpöä, mutta tuotteet ohjaavat päätöksiä.
Kaupoissa, joissa tuote puhuu puolestaan, ohita tarinaosio. Perustuotteita myyvä sivu ei tarvitse alkuperätarinaa. Käytä tila mieluummin tuotteiden esittelyyn.
Mitä etusivu ei tarvitse
Etusivun sotku on yhtä vahingollinen kuin puuttuva osio. Jokainen elementti, joka ei tee tehtävää, vie huomiota pois jostain, joka tekee.
Yleisiä etusivun virheitä ovat liian monta toimintakehotusta, jotka kilpailevat samalla tasolla, automaattisesti toistuvat videot tai animaatiot, jotka hidastavat sivua, suuret tekstilohkot, joita kukaan ei lue, navigointivalikko, jossa on yli kuusi tai seitsemän kohtaa, ja ponnahdusikkunat, jotka ilmestyvät ennen kuin kävijä on ehtinyt nähdä mitään.
Jokainen lisävalinta, jonka pakotat kävijälle, on pieni kitkakustannus. Etusivun pitäisi tuntua selkeältä, ei kiireiseltä. Jos et voi päättää kahden elementin välillä, poista se, joka ei ole suoraan sidoksissa kävijän ohjaamiseen tuotteen luo.
Etusivun suunnittelu mobiiliin
Yli puolet kaikesta verkkokaupan liikenteestä tulee mobiilista. Etusivusi suunnittelu pitäisi rakentaa mobiili edellä, ei mukauttaa tietokoneesta jälkikäteen.
Mobiilissa hero-otsikon pitäisi olla niin lyhyt, että sen voi lukea kahdelta riviltä. CTA-painikkeen pitäisi olla tarpeeksi suuri napautettavaksi helposti. Tuotekuvien pitäisi pinoutua siististi yhteen sarakkeeseen. Navigoinnin pitäisi tiivistyä valikoksi, joka ei dominoi näyttöä.
Testaa jokainen etusivun muutos puhelimella ennen julkaisua. Se, mikä näyttää siistiltä tietokoneen näytöllä, voi muuttua sekavaksi vieritykseksi pienellä näytöllä. Ostajan kokemus mobiilissa on ensisijainen suunnitteluehtosi, ei jälkikäteinen ajatus.
Myös toimituksen selkeys on tärkeää mobiilissa. Puhelimella olevat ostajat ovat usein lähellä ostopäätöstä. Näkyvä banneri etusivulla, joka näyttää ilmaisen toimituksen rajat tai arvioidun toimitusajan, voi muuttaa selailun ostamiseksi. Lisää siitä, miten otat toimituksen käyttöön kaupassasi, katso miten otat toimituksen käyttöön verkkokaupassasi.
Miten WEMASY tukee etusivun suunnittelua
WEMASYn verkkokauppajärjestelmässä on verkkokauppoja varten rakennetut etusivun asettelutyökalut. Hero-osiot, esiin nostettujen tuotteiden ruudukot, kategorialohkot ja sosiaalisen todisteen osiot ovat kaikki käytettävissä ilman räätälöityä koodia. Sama järjestelmä hoitaa mobiiliasettelun automaattisesti.
Katso, mitkä etusivu- ja kauppatyökalut ovat käytettävissä kullakin tasolla, WEMASYn hinnoittelusivulta.
Usein kysytyt kysymykset
Kuinka monta CTA-painiketta etusivulla pitäisi olla?
Yksi ensisijainen CTA ensimmäisellä näytöllä ja sen jälkeen toissijaisia CTA-painikkeita alempana sivulla sidottuna tiettyihin osioihin. Ensisijaisen CTA:n pitäisi olla tärkein toiminto, jonka haluat ensikertalaisen kävijän tekevän, tyypillisesti "Osta nyt" tai linkki tiettyyn kategoriaan. Kilpailevat ensisijaiset CTA-painikkeet samalla visuaalisella painoarvolla hajauttavat huomion ja vähentävät klikkauksia kaikkiin. WEMASYn sivustonrakentajalla voit tehdä tämän suoraan kauppaasi.
Pitäisikö etusivulla näyttää hintoja?
Ei välttämättä itse etusivulla, mutta hintojen näyttäminen esiin nostetuilla tuotekorteilla on hyödyllistä. Ostajat silmäilevät hintahaarukoita selvittääkseen, onko kauppa heidän budjetissaan. Hintojen piilottaminen tuotesivulle asti lisää kitkaa ja voi tuntua kierrelleeltä. Jos tuotteesi ovat premium-luokkaa, lähtöhinnan näyttäminen asettaa odotukset myönteisesti sen sijaan, että luo yllätyksen.
Kuinka usein etusivu pitäisi päivittää?
Päivitä esiin nostetut tuotteet ja kausiosiot aina, kun sinulla on uutuuksia, kampanja käynnissä tai kausimuutos siinä, mitä ostajat etsivät. Hero-osio voi pysyä vakaana pidempään, mutta päivitä se, kun pääasiallinen tarjouksesi tai asemointisi muuttuu. Etusivu, joka näyttää samalta koko vuoden, viestii kaupasta, joka ei ole aktiivinen.
Vaikuttaako etusivun latausnopeus myyntiin?
Kyllä. Etusivu, jonka lataus mobiilissa kestää yli kolme sekuntia, menettää merkittävän osan kävijöistä ennen kuin he näkevät mitään. Suuret pakkaamattomat kuvat ovat yleisin syy. Pakkaa kuvat ennen lataamista, vältä automaattisesti toistuvaa videota hero-osiossa ja rajoita kolmannen osapuolen skriptejä. Nopeus on etusivun suunnittelupäätös, ei vain tekninen.
Pitäisikö etusivun linkittää jokaiseen tuotekategoriaan?
Ei välttämättä. Linkitä kategorioihin, joita useimmat ostajistasi haluavat. Navigointivalikko voi sisältää kategorioiden koko listan. Etusivun rungon pitäisi nostaa esiin kategoriat, jotka tuottavat eniten konversioita tai joita haluat priorisoida. Kaikkeen linkittäminen luo visuaalista kohinaa ja laimentaa tärkeimpiä sivuja.
Minne luottamusmerkit pitäisi sijoittaa etusivulla?
Hero-osion lähelle, CTA-painikkeen viereen tai omaan luottamuspalkkiin hero-osion ja esiin nostettujen tuotteiden väliin. Ostajat etsivät luottamusta herättäviä elementtejä todennäköisimmin hetkellä, jolloin he harkitsevat CTA-painikkeen klikkaamista. Merkkien sijoittaminen vain alatunnisteeseen tavoittaa vain ostajat, jotka ovat jo vierittäneet alas asti, mikä on useimmille ensikertalaisille liian myöhäistä.