webshop landing oldal

Webáruház landing oldal - tippek, trükkök

Az első benyomás számít. A legtöbb látogató a landing oldal alapján dönti el, hogy szimpatikus-e az oldal, a márka és, hogy tovább marad-e az oldalon. Azt is tudjuk, hogy a látogatók az véleményüket elsősorban (75%-ban) a design alapján alkotják meg és csak ezt követi az oldal tartalma.

A következőkben a néhány alapvető tippet és tanácsot gyűjtöttünk össze, mellyel javíthatod a webshopodba érkezők élményét.

Webshop landing oldal

Kezdjük azzal, mit is tekintünk landing oldalnak. A legnagyobb látogatottságú oldal minden esetben a webshopod főoldala lesz, így ennek optimalizációja kulcsfontosságú. Landing oldalaknak tekintjük azokat az oldalakat is, melyekre  valamilyen kampányból - Google Search vagy Facebook/Instagram hirdetés - érkeznek a látogatók. A két oldalnak eltérő funkciója van, míg a főoldal abban segít a látogatónak, hogy megismerje a márkádat, a betekintést nyerjen a termékpalettába, addig a kampányhoz kapcsolódó landing oldal célja a konverzió.

Tanácsok webáruház főoldalának kialakításához

A legjobb megoldás megtalálásához a következő szempontokat érdemes figyelembe vennünk:

  • Az oldal jelenjen meg a lehető leggyorsabban a látogató eszközén, még akkor is, ha éppen rossz internet kapcsolattal nyitotta meg az oldalad - pl.: éppen a metrón ül.
  • Az oldal tartalma nézzen ki jól mobiltelefonon és asztali számítógépen egyaránt, ne vesszen el tartalom azért, mert a potenciális vásárló kisebb képernyőn tekinti meg az oldalt
  • Találja meg a látogató amit keres. Ehhez biztosítsunk intuitív navigációt, mind a fejlécben, mind az oldal tartalmában.

Képek használata

A képek a márka arculatának legmeghatározóbb elemei, ezért elengedhetetlen, hogy ezek jó minőségűek legyenek, ugyanakkor érdemes ügyelni a kép méreteire és a képarányra.

Ne használjunk túl nagy felbontású képet. Ha profi fotós készíti a brand és termékfotókat, a képfájlok rendszerint nagy felbontásúak, nyomdai minőségű képek, melyek túl nagyok egy weboldal lehetőségeihez képest. Az 1920x1080-es képfelbontás tökéletesen elég mind mobil, mind asztali képernyőkre, ezért ne sajnáljuk a képeinket átméretezni. Erre számos ingyenes, online eszköz áll rendelkezésünkre, mint pl az Adobe megoldása.

Amikor a weboldalt összeállítjuk igyekezzünk az adott építő blokkhoz igazodó képet választani. Ne tegyünk állóképet egy tájkép elrendezésű blokkba, hiszen ilyenkor a kép méretezésekor annak egy része nem jelenik meg, ennek ellenére betöltődik. A képek vágására a fent említett eszközök szintén megoldást adnak.

A túl nagy képek lassú oldalbetöltést eredményeznek, ami egyenes út a látogatók elvesztéséhez.

webshop landing képarányok

A Stylehub webshopok a felsorolt 'kézi' optimalizáció mellett automatikusan a legmodernebb, legkisebb fájlméretű .WebP formátumba konvertálják a feltöltött képeket, így az garantáltan a legrövidebb idő alatt jelenik meg. A gyors betöltést szolgálja az is, hogy a webshopoknak a Google szerverei adnak otthont, ami a világ leggyorsabb hálózata, és villámgyors elérést biztosít a Föld bármely pontján.

Carousel blokkok

Szinte minden webshop elengedhetetlen kelléke a carousel, mellyel megragadjuk a látogató figyelmét és görgetés nélkül is több képernyőnyi tartalmat tudunk megmutatni. Érdemes betartani az aranyszabályt, ami szerint 3-4 slide-nál nem bővítjük nagyobbra ezt a blokkot, hiszen jellemzően ennél többet még a legtürelmesebb látogatóink sem fognak megvárni. Így az ötödik vagy a hatodik képernyő csak feleslegesen veszi el az időt más blokkok betöltésétől. Ahhoz, hogy ne váljon az oldalunk egy szédítő, izgő-mozgó webshoppá, érdemes egy ilyen blokkot alkalmazni oldalankét.

Videók

A legütősebb márkák mindig rendelkeznek egy-egy videóval, melyet előszeretettel  tesznek ki a főoldalra, teljes képernyős blokk formájában, vagy háttérképként. Ahogy fent már említettük a látogatók figyelme és sávszélessége is véges, így a 15-20 másodpercnél hosszabb videókat inkább egy külön link mögött osszuk meg közönségünkkel. A rövid brand videók ebben a terjedelemben is tökéletesen működnek, mint arculati elem és végtelenített lejátszást választva mindig vagány hátteret biztosít egy-egy szekciónak.

Reszponzív design

Amint elkészült a főoldal első változata, minden esetben ellenőrizzük tabletről és telefonról egyaránt. Érdemes megfigyelnünk, hogyan viselkednek a blokkok a különböző képarányok esetében. 

Ellenőrizzük, hogy a képeken mobiltelefonon is látható mindaz amit a meg akarunk rajta mutatni és nem veszik el semmi a képek széleiről. Azokban az esetekben amikor fontos, hogy a képek szélén elhelyezkedő részletek is láthatók maradjanak érdemes átméretezni a képet, vagy másik blokkot használni.

Itt érdemes meggyőződni arról is, hogy a képekre írt szövegek nem lettek-e túl hosszúak és jól megjeleníthetők-e a kisebb képernyőkön egyaránt.

Tudtad? A Stylehub admin felületén minden feltöltött képhez megadhatod a fókuszpontot, amely biztosítja, hogy a lényeg mindig látható maradjon, minden eszközről.

Könnyű navigáció

Nagyon gyakori, hogy az oldalra érkező látogatók egyszerűen nem találják meg amit keresnek, pedig ha tudnák hol keressék, valószínűleg vásárolnának is. A navigáció alfája és omegája a felső navigációs menü. Ha megnézzük a legnagyobb márkák menürendszerét láthatjuk, hogy az egyszerű legördülő listákat felváltották az ú.n. megamenük, melyek a kategóriák és alkategóriák teljes repertoárját felvonultatják, akár a legújabb termékek, promóciók képeivel kiegészítve. Az ú.n. “lusta látogatók” már el sem gördítenek a főoldalról, inkább a menürendszer kategóriáit böngészik és döntik el, hogy tovább maradnak-ez az oldalon. 

webshop megamenu

Érdemes kísérletezni olyan kategóriák kialakításával, melyek szintén a megfelelő termék megtalálását segítik. Ezeket érdemes önálló blokkokba szervezni és elhelyezni a weboldal hasábjain is.

webshop landing oldal kategoriak

Promóciókhoz kapcsolódó landing oldalak

Egy-egy szezonális, vagy új termékhez/kollekcióhoz kapcsolódó kampány esetében érdemes külön landing oldakat létrehoznunk. A főoldallal ellentétben ezeknek az oldalaknak egyetlen célja van, a látogató konvertálása.

Nem akarjuk megismertetni a teljes termékpalettával, a legrövidebb úton a kasszához akarjuk terelni a látogatókat. Ezért a landing oldalak felső navigációját rendszerint el is szokták rejteni és a tartalom is lényegesen rövidebb, mint bármely más - pl a főoldal - oldal esetében.

A "kevesebb, több" elv, itt hatványozottan igaz. Jelenítsük meg az oldalon a legújabb, akciós, limitált szériás kollekciónkat, de ne vonjuk el a látogató figyelmét arról ami miatt az oldalra érkezett.  Ne feledjük, a potenciális vásárló gyakran egy fizetett hirdetésre kattintva jutott a landing oldalra. Igyekezzünk ugyanazt a tartalmat - üzenetet és képi világot - megjeleníteni, mint ami a  hirdetés szövegében, kreatívjában szerepel.

Összefoglalás

A webshop landing oldalak - legyen az főoldal vagy akár egy kampányhoz létrehozott oldal - optimalizációjára számos lehetőségünk adódik. Fontos, hogy néhány alapvető szabály betartásával vágjunk bele:

  • könnyű navigáció
  • gyors betöltés
  • mobil-barát design

Ezt követően pedig apróbb változtatásokkal, folyamatos kísérletezéssel, és az eredmények monitorozásával javítsuk tovább online konverziónkat.



Tetszett a cikk? Oszd meg másokkal is.