Ecommerce UI tervezés: Hogyan hozzunk létre vonzó termékkollekció oldalakat (6 megvalósítható taktika)

Intro

A termékkollekciós oldalakat sajnos gyakran figyelmen kívül hagyják a tervezők és a szövegírók egyaránt. Míg a rendkívül vonzó termékoldalak és céloldalak létrehozására rengeteg erőfeszítést fordítanak, a kollekciós oldalak az út szélére kerülnek, és sajnálatosan érdektelenek maradnak.

Nézzünk meg hat megvalósítható módot arra, hogy olyan termékgyűjtő oldalakat hozzon létre, amelyek bevonzanak, cselekvésre ösztönöznek, valamint forgalmat és konverziót generálnak.

Biztosítsa, hogy az elsődleges termékfotó magával ragadó legyen

Az első tervezési akadály, amelyet a termékkollekciós oldalaknak le kell küzdeniük, az elsődleges fotó vonzó és érdekes megjelenítésének biztosítása. Ha a vásárló figyelmét nem tudja megragadni gyakorlatilag azonnal, amint a termékre érkezik, vagy néhány görgetésen belül, akkor valószínűleg elvesztette a vásárlót.

Kezdje azzal, hogy mindent átgondol, amit a célközönségéről tud. Mit szeretnek? Miért szeretik az Ön termékeit? Mi az, ami tetszik nekik a termékeidben? Hogyan tudná ezeket a tulajdonságokat előtérbe helyezni?

Ezután kezdje el fontolóra venni az elrendezést. Szükség van a képek nagyítására? Élénk vagy semleges háttérre van szükségük? Hány terméket mutasson meg egymás után?

Ideális esetben több tervezési variációt tesztel A/B teszteléssel. Néha a legkisebb változtatások jelentik a legnagyobb különbséget.

Nézze meg ezt a babaruha-kollekció oldalt. Maguk a termékek aranyosak és vonzóak, így nem kell különösebben újszerű módon megjeleníteni őket. Az "újdonság" címke egyértelműen megkülönböztet bizonyos termékeket, és biztosítja, hogy a vásárló észrevegye őket.

Az ilyen termékek semleges háttérrel való beállítása nagyszerű módja annak, hogy kiemelkedjenek.

Forrás: mamasandpapas.com

Egy másik módja annak, hogy az elsődleges fotó a gyűjtemény oldalán vonzóvá váljon, az, hogy a tárgyat használat közben mutatja be. Ha megnézi ezt az oldalunkat, láthatja, hogyan lehet ezt könnyedén kivitelezni. Minden kép teljesen más, más színpalettával, és más szögből mutatja a tárgyat. Megkönnyítették, hogy a terméket a saját otthonában képzelje el.

Forrás: greenhouseemporium.com

Ez egy nagyszerű taktika, ha azt szeretné, hogy az ügyfél könnyebben lássa, hogyan nézne ki a végtermék, és segítsen neki elképzelni egy teljes életstílust.

Biztosítsa, hogy a szűrők ne legyenek túl zavaróak

A gyűjtőoldalaknak szűrőkre van szükségük ahhoz, hogy hasznosak legyenek. A vásárlóktól nem várható el, hogy oldalakon át böngésszenek a termékek között, hogy megtaláljanak egy adott terméket. Nem valószínű, hogy tisztában vannak a kínálat széles skálájával, és nem biztos, hogy van idejük hosszas kirakatnézegetésre.

A szűrőknek értelmes módon kell kategorizálniuk a termékeket. Az ár, a méret és az anyag csak néhány a leggyakrabban használt szűrők közül. Vegye figyelembe magukat a termékeket, és azt, hogy mik a megkülönböztető tényezők.

Minél összetettebb a termék, annál több szűrőnek kell lennie. Olyan hasznosakat is kínálhat, mint például "nem kezdőknek" vagy "csak profiknak", ha ezek segítenek az ügyfeleknek kiválasztani a megfelelő terméket.

A szűrők sem lehetnek túlságosan zavaróak. Könnyen hozzáférhetőnek kell lenniük, de nem szabad, hogy az oldal nagy részét elfoglalják, vagy bármilyen módon zavarják a böngészési élményt.

Nézze meg ezt a kompozit deszkakollekció oldalt. A szűrők a bal oldalon találhatók, és megtalálják a megfelelő egyensúlyt a könnyen észrevehető és a nem útban lévő között. Vegye figyelembe, hogy összecsukhatóak is, így a puszta információmennyiség nem fogja túlterhelni a vásárlót.

Ezek is logikusan vannak elrendezve - a legtöbb ember le akarja szűkíteni a színeket és az anyagokat, mielőtt belemerülne a pontosabb részletekbe, például a méretbe.

Forrás: Ovaeda.com

Könnyen megvalósíthat egy hasonló megoldást, amely nem foglal sok helyet, de mégis jelentősen javítja a felhasználói élményt, és lehetővé teszi az ügyfelek számára, hogy másodpercek alatt leszűkítsék a választékot.

Rövid termékleírások megjelenítése Hover esetén

Gondoljon a termékgyűjtő oldalakra úgy, mint egy információs központra. Itt jeleníti meg az összes termékét egy adott kategóriában. Minél segítőkészebb vagy, annál valószínűbb, hogy a vásárló megtérül.

Próbálja meg nem rávenni a vásárlókat, hogy kattintsanak egy termékre, olvassák el a termékleírást, majd kattintsanak vissza. Így időt kell pazarolniuk a görgetésre, hogy rájöjjenek, hol hagyták abba az imént. Vagy ha folyamatosan új lapokon nyitják meg a termékeket, hamarosan túlterheli őket az összehasonlítani kívánt termékek száma.

Minél több hasznos információt tud megjeleníteni a gyűjtőoldalon, annál jobb. Egy egyszerű, rövid termékleírás hozzáadásával, amikor valaki a termék fölé viszi a mutatót, segíthet a vásárlóknak a termékek összehasonlításában már ott és akkor.

Ez a bariátriai kalciumrágók gyűjtőoldala nagyszerű munkát végez. Rövid termékleírást kap, amelyből megtudhatja, hogy milyen vitaminok és ásványi anyagok találhatók a termékben. Az előnyöket is kiemelik: jó az íze, elősegíti az immunrendszer egészségét, és így tovább.

_Forrás: Bariatricfusion.com _

Figyelje meg, milyen rövidek a leírások. Néhány másodperc alatt elolvashatja őket, és folytathatja a termékek összehasonlítását.

Ha ezt a taktikát alkalmazza, gondosan fontolja meg a lebegő leírást. Nem kell, hogy megegyezzen a termékoldalon található leírással. Röviden ki kell térnie a termék előnyeire vagy fő jellemzőire, egyértelműen megkülönböztetve azt az oldalon található többi terméktől.

Inkább az informativitásra koncentráljon, mintsem az értékesítésre. Az ügyfelek nagyobb valószínűséggel váltanak, ha biztosak a választásukban.

Dobj be néhány társadalmi bizonyítékot

A társadalmi bizonyíték nagyszerű eszköz arra, hogy az oldalakat vonzóbbá és hasznosabbá tegye. Megmutatják ügyfeleinek, hogy Ön megbízható, megbízható és termékei jó minőségűek. Ez különösen fontos az új ügyfelek számára, akik még nem ismerik a márkáját, és akik esetleg haboznak a konverziótól.

A társadalmi bizonyítéknak számos formája létezik, de a csillagok értékelése a leghasznosabb bizonyíték, amelyet a gyűjtőoldalakon elhelyezhet. Több célt is szolgálnak:

• az egyes termékek minőségének értékelése
• mutassa meg, hogy hány vásárló vásárolta meg, és mennyi időt szánt arra, hogy értékelje azt.
• segít az ügyfeleknek gyorsabb vásárlási döntést hozni

A csillagértékeléseket könnyű beépíteni. Nézd meg a Sephora szemhéjfestékpaletta-kollekció oldalát. Könnyen észrevehetőek, és minden lényeges információt megjelenítenek: hány értékelés van, és mennyi az általános elégedettség a termékkel. Az is jól látható, hogy az egyik paletta sokkal népszerűbb, mint a többi.

Forrás: sephora.com

Egy másik nagyszerű társadalmi bizonyíték, amelyet a gyűjtőoldalakon érdemes beépíteni, a valós idejű értékesítési értesítések.

Nézze meg ezt az egyéni laptop matricák oldalt. Böngészés közben a jobb alsó sarokban egy nem feltűnő felugró ablak jelenik meg, amely közli, hogy ki vásárolt a weboldalon, honnan jött és mit vásárolt.

Ez egy nagyszerű módja annak, hogy egy kis FOMO-t adj a marketing taktikáidhoz. A vásárlóknak más termékeket fognak mutatni, olyanokat, amelyek egyértelműen népszerűek, mert valaki éppen most vásárolta meg őket. Emellett erős bizalmi és hitelességi jeleket is küld.

Győződjön meg róla, hogy a felugró ablak nem túl feltűnő vagy zavaró. Próbálja meg úgy elhelyezni őket, hogy ne kezdjék idegesíteni a vásárlókat.

Forrás: vinylstatus.com

Több terméknézet megjelenítése

Minél jobban látják a vásárlók a terméket, annál nagyobb az esélye, hogy megtérül. Minél több képet jelenít meg egy termékről a gyűjtőoldalon, annál nagyobb elkötelezettséget és érdeklődést generál.

Egynél több képet többféleképpen is beépíthet. Lehetővé teheti a termékgalériában való görgetést, vagy megjeleníthet egy másik képet, ha a képet lebegtetik.

A H&Mfiú ruházati oldala gördíthető termékgalériával rendelkezik. Az egyes termékoldalakon szereplő összes fotót közvetlenül a kollekció oldaláról láthatod, így soha nem kell tovább kattintanod.

Forrás:hm.com

Ha inkább csak egy másik képet szeretne megjeleníteni a lebegő képre, nézze meg ezt a női strandruha-kollekció oldalt inspirációért. A márka ügyesen mutatja a darab hátoldalát a lebegtetéskor, így a teljes darabot láthatod anélkül, hogy egy másik oldalt kellene megnyitnod. Ez egy nagyszerű taktika a ruházati márkák számára.

Forrás:simplybeach.com

Amikor eldönti, hogy galériát vagy lebegőfotót adjon-e hozzá, vegye figyelembe az elem jellegét. Hány fényképet kell látnia a vásárlónak? És mik legyenek ezek a képek?

Megmutathatja a használt terméket, vagy a vásárlók fotóit, ha azok nagyobb valószínűséggel befolyásolnak egy új vásárlót. Megmutathatja a terméket közelről, vagy akár a termék specifikációit is felsorolhatja.

Nemrég megtekintett elemek megjelenítése

A termékajánlások általában az egyes termékoldalakra vannak fenntartva. A márkák itt helyezik el a "legutóbb megtekintett" körhintát is.

A gyűjtemény oldalán való megjelenítéssel azonban finoman emlékeztetheti a vásárlókat a már látott és kedvelt termékekre. Időt és energiát takaríthat meg számukra azzal, hogy visszalépjenek az előzményekhez, ha egyszerre számos lap van nyitva.

Nézd meg az Adidas férfi futócipők oldalát. Amint megnézel egy-egy terméket, a kollekció oldalának alján megjelenik a "legutóbb megtekintett" funkció, amely segít szemmel tartani az érdeklődésedet felkeltő darabokat.

Forrás: adidas.com

Ugyanez a körhinta jelenik meg az egyes termékoldalakon is, így egyénre szabott böngészési élményt nyújt.

A termékoldalakhoz hasonlóan a megtekintett termékek alapján is ajánlhat termékeket a vásárlóknak.

Befejezés

Gondolja át, hogy ezek közül a termékgyűjtemény-oldal tervezési taktikák közül melyeket alkalmazhatja saját oldalain. Talán mind a hat szerepet játszhat a konverziós arányok növelésében.

Mindig tartsa szem előtt a termék(ek) jellegét és a közönség fájdalmas pontjait. Mit keresnek, és hogyan segítheti őket a tervezéssel kapcsolatos erőfeszítései abban, hogy megtalálják azt?