A kezdőlap nem galéria és nem prospektus. Útvonalválasztó. Egyetlen feladata, hogy a megfelelő látogatót a lehető leggyorsabban a megfelelő termékhez juttassa. A kezdőlap minden dizájndöntésének ezt a célt kell szolgálnia.
Ez a cikk azt tárgyalja, hogyan tervezz működő webshop-kezdőlapot. Mit tegyél bele, mit hagyj ki, milyen hibák ölik meg a konverziót, és hogyan gondolkodj az elrendezésről mobilon, ahol a vevőid többsége böngész.
Ha teljes képet szeretnél arról, mely oldalakra van szüksége a boltodnak, ezzel kezdd: mely oldalakra van szüksége minden webshopnak.
Mire való valójában a kezdőlap?
A kezdőlap azokat a látogatókat szolgálja, akik még nem döntöttek. Tudnak valamit a márkádról, vagy kereséssel vagy közösségi médiából találtak rád, de még nem kötelezték el magukat a vásárlás mellett. A kezdőlap az a pillanat, amikor kitalálják, érdemes-e továbbmenni.
Három kérdésre kell azonnal válaszolnia. Mit árul ez a bolt? Hozzám hasonló embernek szól? Mit tegyek legközelebb? Ha bármelyik válasz nem világos, a látogatók elmennek. Nem azért, mert a termékeid rosszak, hanem mert a kezdőlap nem adott okot a maradásra.
Hogyan tervezd meg a hero szekciót
A hero az első, amit a látogató lát. A látható terület felső részén van, még mielőtt görgetne, és az első benyomás súlyának nagy részét ez viszi.
Az erős hero négy elemből áll. Egy címsorból, amely egyszerű nyelven megnevezi, mit árulsz. Egy rövid kísérősorból, amely kontextust ad, gyakran egy fő előnnyel vagy megkülönböztetővel. Egy vizuálból, amely a terméket vagy az általa létrehozott eredményt mutatja. És egyetlen cselekvésre ösztönző gombból, amely pontosan megmondja a látogatónak, hova menjen.
A címsor a legfontosabb elem. Légy konkrét. A "Kézzel készített bőrtáskák a mindennapokra" működik. A "Ahol a mesterség találkozik a funkcióval" nem. A vevők gyorsan átfutják az oldalt. Ha a címsorodat értelmezni kell, már elvesztetted őket.
A CTA gomb egy célt nevezzen meg, ne egy érzést. A "Táskák megtekintése" vagy az "Újdonságok" működik. A "Fedezz fel többet" vagy a "Fedezd fel most" nem. Irányt adj a látogatónak, ne javaslatot.
A hero vizuálnak világosan kell mutatnia a terméket. Az életstílus-képek jól működnek, ha a terméknek kontextus kell az értelméhez, például ruházatnál vagy háztartási cikkeknél. A csak terméket mutató képek jobban működnek, ha az érthetőség fontosabb a vágyakozásnál, például szerszámoknál vagy elektronikánál. Használj jó minőségű képeket. Egy életlen vagy rosszul megvilágított hero aláássa az összes többit.
Mit mutass a hero alatt
Miután a látogató túlgörgeti a herót, konkrétabb okokat keres a maradásra. A kezdőlapnak ez a része olyan termékeket vagy kategóriákat emeljen ki, amelyek megfelelnek annak, amit a vevőid a legvalószínűbben akarnak.
Ne próbálj mindent bemutatni. Válaszd a legkelendőbb termékeidet, a legnagyobb haszonkulcsúakat, vagy azt a kategóriát, ahol a vevőid többsége végez. Három-hat kiemelt termék észszerű tartomány. Ennél több zsúfoltnak tűnik, és döntési bénulást okoz.
A kategóriablokkok jól működnek a széles kínálatú boltoknál. Egyes termékek helyett mutasd a három-négy legfontosabb kategóriát egy-egy világos képpel és felirattal. Hagyd, hogy a vevők maguk válasszák ki a bolt megfelelő részét.
A kiemelt résznek dinamikusnak is kell lennie. Forgasd be a szezonális termékeket, az akciós tételeket vagy az újdonságokat. Az a kezdőlap, amely sosem változik, nem ad okot a visszatérő látogatóknak a görgetésre.
Hogyan használj társas bizonyítékot a kezdőlapon
A vevők jobban megbíznak más vevőkben, mint a boltokban. A kezdőlapon lévő társas bizonyíték hitelességet épít, még mielőtt a látogató termékoldalra érne.
A kezdőlapi társas bizonyíték leghatékonyabb formái a rövid vevői vélemények vagy csillagos értékelések, a vevőszám vagy a kiszállított rendelések száma, a sajtóemlítések vagy médialogók, és a harmadik fél által adott bizalmi jelvények, például a biztonságos fizetés ikonjai vagy elismert tanúsítási jelek.
Tartsd tömören. Egy-két erős vélemény hatékonyabb, mint öt ötcsillagos értékelés fala. Egyetlen ismert médium logója többet ér, mint tíz ismeretlen név listája. Azt a bizonyítékot válaszd, amely a legtöbbet jelenti annak a vevőnek, aki a legszkeptikusabb azzal kapcsolatban, hogy először vásároljon nálad.
Legyen-e márkatörténet szekció?
A kezdőlapon a rövid márkatörténet szekció opcionális, de bizonyos helyzetekben segít. Akkor működik a legjobban, ha az alapító története része annak az oknak, amiért a vevő ezt a márkát választaná egy nagyobb versenytárs helyett. A kézműves termékek, az etikus beszerzés, a közösségvezérelt márkák és az alapító vezette termékek mind profitálnak egy rövid emberi pillanatból a kezdőlapon.
Ha beteszel egyet, tartsd rövidre. Két-három mondat és egy link a teljes Rólunk oldalra elég. Ne a látható terület felső részére vagy a kiemelt termékek fölé tedd. A történet melegséget ad, de a termékek viszik a döntéseket.
Ahol a termék önmagáért beszél, hagyd ki a történet szekciót. Az alaptermékeket áruló oldalnak nincs szüksége eredettörténetre. Használd inkább ezt a helyet több termék bemutatására.
Mire nincs szüksége a kezdőlapnak
A kezdőlap zsúfoltsága ugyanolyan káros, mint egy hiányzó szekció. Minden elem, amely nem végez munkát, elvonja a figyelmet arról, ami igen.
A gyakori kezdőlapi hibák közé tartozik a túl sok, azonos szinten versengő cselekvésre ösztönző elem, az automatikusan lejátszódó videók vagy animációk, amelyek lassítják az oldalt, a nagy szövegblokkok, amelyeket senki nem olvas, a hat-hétnél több elemes navigációs menü, és a felugró ablakok, amelyek azelőtt jelennek meg, hogy a látogatónak ideje lett volna bármit meglátni.
Minden további választás, amelyet a látogatóra kényszerítesz, kis súrlódási költség. A kezdőlapnak tisztának kell éreznie magát, nem zsúfoltnak. Ha nem tudsz dönteni két elem között, vedd ki azt, amelyik nem kapcsolódik közvetlenül ahhoz, hogy a látogató terméket találjon.
Mobilos kezdőlap-dizájn
Az e-kereskedelmi forgalom több mint fele mobilról érkezik. A kezdőlap-dizájnodat mobil-first szemlélettel építsd, ne utólag alakítsd át az asztaliból.
Mobilon a hero címsora legyen elég rövid ahhoz, hogy két sorban elolvasható legyen. A CTA gomb legyen elég nagy a könnyű koppintáshoz. A termékképek tisztán egymás alá kerüljenek egyetlen oszlopban. A navigáció csukódjon be egy menübe, amely nem uralja a képernyőt.
Minden kezdőlapi változtatást teszteld telefonon, mielőtt közzéteszed. Ami tisztán néz ki egy asztali monitoron, az zavaros görgetéssé válhat egy kis képernyőn. A mobilos vevői élmény az elsődleges tervezési korlátod, nem utólagos gondolat.
A szállítási érthetőség is számít mobilon. A telefonon lévő vevők gyakran közel vannak a vásárlási döntéshez. A kezdőlapon látható szalag az ingyenes szállítási küszöbbel vagy a becsült kézbesítéssel böngészési munkamenetből vásárlási munkamenetet csinálhat. A boltod szállításának beállításáról itt olvashatsz tovább: hogyan állítsd be a szállítást a webshopodhoz.
Hogyan támogatja a WEMASY a kezdőlap-tervezést
Ha a WEMASY e-kereskedelmi rendszerét használod, a webshop kezdőlapját a WEMASY weboldalépítőben építheted fel. A hero szekciót, a kiemelt termékeket, a kategóriablokkokat és a társas bizonyíték szekciókat te alakítod ki az oldal tartalmaként.
Azt, hogy az egyes csomagok mit tartalmaznak, a WEMASY árazás oldalon nézheted meg.
Gyakran ismételt kérdések
Hány CTA legyen a kezdőlapon?
Egy elsődleges CTA a látható terület felső részén, aztán másodlagos CTA-k lejjebb az oldalon, konkrét szekciókhoz kötve. Az elsődleges CTA legyen a legfontosabb művelet, amelyet az első látogatótól várnál, jellemzően a "Vásárlás most" vagy egy konkrét kategórialink. Az azonos vizuális súlyú, versengő elsődleges CTA-k felhígítják a figyelmet, és mindegyikre csökkentik a kattintásokat. A WEMASY weboldalépítőjében te magad építheted fel a webshopod oldalait.
Mutassak árakat a kezdőlapon?
Nem feltétlenül magán a kezdőlapon, de a kiemelt termékkártyákon hasznos az árak mutatása. A vevők az árkategóriát nézik, hogy eldöntsék, belefér-e a boltja a költségvetésükbe. Az árak termékoldalig való elrejtése súrlódást ad, és kitérőnek érződhet. Ha a termékeid prémiumok, a kezdő ár mutatása pozitívan állítja be az elvárásokat, ahelyett hogy meglepetést okozna.
Milyen gyakran frissítsem a kezdőlapot?
Frissítsd a kiemelt termékeket és a szezonális szekciókat, valahányszor van újdonságod, fut egy promóció, vagy szezonális eltolódás van abban, mit keresnek a vevők. A hero szekció hosszabb ideig maradhat stabil, de frissítsd, amikor a fő ajánlatod vagy a pozicionálásod változik. Az a kezdőlap, amely egy teljes évig ugyanúgy néz ki, inaktív boltot sugall.
Befolyásolja a kezdőlap betöltési sebessége az eladásokat?
Igen. Az a kezdőlap, amely mobilon három másodpercnél tovább tölt, a látogatók jelentős részét elveszíti, mielőtt bármit látnának. A tömörítetlen nagy képek a leggyakoribb ok. Tömörítsd a képeket feltöltés előtt, kerüld az automatikusan lejátszódó videót a heróban, és korlátozd a külső szkripteket. A sebesség kezdőlap-dizájndöntés, nem csak technikai.
Linkeljen a kezdőlap minden termékkategóriára?
Nem feltétlenül. Linkelj azokra a kategóriákra, amelyeket a vevőid többsége keresni fog. A navigációs menü hordozhatja a kategóriák teljes listáját. A kezdőlap törzse azokat a kategóriákat emelje ki, amelyek a legtöbb konverziót hozzák, vagy amelyeket priorizálni szeretnél. Ha mindenre linkelsz, vizuális zaj keletkezik, és felhígítod a legfontosabb oldalakat.
Hol legyenek a bizalmi jelvények a kezdőlapon?
A hero közelében, a CTA mellett, vagy egy külön bizalmi sávban a hero és a kiemelt termékek között. A vevők a legvalószínűbben akkor keresnek bizalmi jelzéseket, amikor fontolgatják a CTA-ra kattintást. Ha a jelvényeket csak a láblécbe teszed, csak azokat éred el, akik már legörgettek az aljára, ami a legtöbb első látogatónak túl késő.