• Design uživatelského rozhraní (UI) a e-commerce

Návrh uživatelského rozhraní pro elektronické obchodování: Jak vytvořit poutavé stránky kolekce produktů (6 použitelných taktik)

  • Felix Rose-Collins
  • 5 min read
Návrh uživatelského rozhraní pro elektronické obchodování: Jak vytvořit poutavé stránky kolekce produktů (6 použitelných taktik)

Úvodní stránka

Stránky s kolekcemi produktů jsou bohužel často přehlíženy designéry i copywritery. Zatímco na tvorbu velmi poutavých produktových stránek a vstupních stránek se vynakládá velké úsilí, stránky kolekcí se dostávají na vedlejší kolej a zůstávají žalostně nezajímavé.

Podívejme se na šest použitelných způsobů, jak vytvořit stránky kolekce produktů, které zaujmou, inspirují k akci a zvyšují návštěvnost a konverze.

Ujistěte se, že primární fotografie produktu je poutavá

První překážkou, kterou musí stránky s kolekcí produktů překonat, je zajištění poutavosti a zajímavosti hlavní fotografie. Pokud nezaujmete pozornost nakupujícího prakticky hned po přistání nebo během několika posunutí, pravděpodobně jste ho ztratili.

Začněte tím, že zvážíte vše, co víte o své cílové skupině. Co mají rádi? Proč mají rádi vaše produkty? Co se jim na vašich výrobcích líbí? Jak můžete tyto vlastnosti postavit do popředí?

Pak začněte uvažovat o uspořádání. Je třeba obrázky zvětšit? Vyžadují živé nebo neutrální pozadí? Kolik produktů byste měli zobrazit za sebou?

V ideálním případě otestujete několik variant designu. Někdy mohou i ty nejmenší změny znamenat největší rozdíl.

Podívejte se na tuto stránku s kolekcí dětského oblečení. Samotné výrobky jsou roztomilé a poutavé, takže je není třeba zobrazovat nijak zvlášť neotřelým způsobem. Označení "new in" jasně odlišuje některé výrobky a zajišťuje, že si jich zákazník všimne.

Seznamte se s nástrojem Ranktracker

Univerzální platforma pro efektivní SEO

Za každým úspěšným podnikem stojí silná kampaň SEO. Vzhledem k nesčetným optimalizačním nástrojům a technikám je však těžké zjistit, kde začít. No, už se nebojte, protože mám pro vás přesně to, co vám pomůže. Představuji vám komplexní platformu Ranktracker pro efektivní SEO.

Konečně jsme otevřeli registraci do nástroje Ranktracker zcela zdarma!

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Pokud takové produkty umístíte na neutrální pozadí, skvěle vyniknou.

mamasandpapas

Zdroj: mamasandpapas.com

Dalším způsobem, jak udělat hlavní fotografii na stránce sbírky poutavou, je ukázat položku v provozu. Pokud se podíváte na tuto stránku se skloněnými skleníky, uvidíte, jak to lze bez námahy provést. Každý obrázek je zcela jiný, v jiné barevné paletě a ukazuje položku z jiného úhlu. Snadno si díky nim představíte výrobek ve svém vlastním domě.

greenhouseemporium

Zdroj: greenhouseemporium.com

Seznamte se s nástrojem Ranktracker

Univerzální platforma pro efektivní SEO

Za každým úspěšným podnikem stojí silná kampaň SEO. Vzhledem k nesčetným optimalizačním nástrojům a technikám je však těžké zjistit, kde začít. No, už se nebojte, protože mám pro vás přesně to, co vám pomůže. Představuji vám komplexní platformu Ranktracker pro efektivní SEO.

Konečně jsme otevřeli registraci do nástroje Ranktracker zcela zdarma!

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

To je skvělá taktika, pokud chcete zákazníkovi usnadnit představu o tom, jak bude konečný produkt vypadat, a pomoci mu představit si celý životní styl.

Zajistěte, aby filtry nebyly příliš rušivé

Stránky sbírky vyžadují filtry, aby byly užitečné. Od zákazníků nelze očekávat, že budou procházet stránky a stránky produktů, aby našli jednu konkrétní položku. Pravděpodobně si nebudou vědomi šíře vaší nabídky a možná nebudou mít čas na zdlouhavé nakupování.

Filtry by měly smysluplně kategorizovat vaše produkty. Cena, velikost a materiál jsou jen některé z nejčastěji používaných filtrů. Zvažte, jaké jsou samotné produkty a jaké jsou jejich odlišující faktory.

Čím složitější produkt, tím více filtrů by mělo být k dispozici. Můžete také nabídnout užitečné, jako například "není pro začátečníky" nebo "pouze pro profesionály", pokud pomohou zákazníkům vybrat správnou položku.

Filtry by také neměly být příliš rušivé. Měly by být snadno přístupné, ale neměly by zabírat velkou část stránky nebo jakkoli narušovat prohlížení.

Podívejte se na tuto stránku s kolekcemi kompozitních palubek. Vlevo jsou k dispozici filtry, které dosahují správné rovnováhy mezi tím, aby byly snadno viditelné a nepřekážely. Všimněte si, že jsou také sbalitelné, takže obrovské množství informací zákazníka nezahltí.

Jejich řazení je také logické - většina lidí si bude chtít zúžit výběr barev a materiálů, než se pustí do konkrétnějších detailů, jako je velikost.

Ovaeda

Zdroj: Ovaeda.com

Můžete snadno implementovat podobné řešení, které nezabere mnoho místa, ale přesto výrazně zlepší uživatelský komfort a umožní zákazníkům zúžit výběr během několika sekund.

Zobrazení krátkého popisu produktu při najetí myší

Představte si stránky kolekce produktů jako informační centrum. Zde se zobrazují všechny vaše produkty v určité kategorii. Čím užitečnější budete, tím pravděpodobněji zákazník konvertuje.

Snažte se, aby zákazníci nemuseli kliknout na položku, přečíst si popis produktu a pak kliknout zpět. Musí tak ztrácet čas rolováním, aby zjistili, kde právě skončili. Nebo pokud budou produkty neustále otevírat na nových kartách, brzy budou zahlceni množstvím položek, které se snaží porovnat.

Čím více užitečných informací můžete na stránce sbírky zobrazit, tím lépe. Přidáním jednoduchého, krátkého popisu produktu, když někdo najede na produkt, můžete zákazníkům pomoci porovnat produkty přímo na místě.

Tato bariatrická stránka sbírky žvýkaček na vápník odvádí skvělou práci. Získáte stručný popis výrobku, který vám řekne, jaké vitamíny a minerály v něm najdete. Zdůrazněny jsou také výhody: skvěle chutná, podporuje imunitní zdraví atd.

Bariatricfusion

_Zdroj: Bariatricfusion.com _

Všimněte si, jak krátké jsou popisy. Můžete si je přečíst během několika sekund a pokračovat v porovnávání produktů.

Při použití této taktiky pečlivě zvažte popis hoveru. Nemusí být stejný jako popis na stránce produktu. Měl by stručně pojednávat o výhodách nebo klíčových vlastnostech položky a jasně ji odlišit od ostatních produktů na stránce.

Zaměřte se spíše na informovanost než na prodej. Zákazníci budou s větší pravděpodobností konvertovat, pokud si budou jisti svou volbou.

Přidejte nějaký sociální důkaz

Sociální důkaz je skvělým nástrojem, jak udělat stránky poutavějšími a užitečnějšími. Ukážou zákazníkům, že jste důvěryhodní, spolehliví a že vaše produkty jsou kvalitní. To je důležité zejména pro nové zákazníky, kteří vaši značku ještě neznají a kteří mohou s konverzí více váhat.

Sociální důkaz má mnoho podob, ale nejužitečnějším typem důkazu, který lze na stránkách sbírky umístit, je hodnocení hvězdičkami. Poslouží k několika účelům:

  • hodnotit kvalitu jednotlivých výrobků
  • ukázat, kolik zákazníků si jej zakoupilo a věnovalo mu čas na posouzení.
  • pomáhat zákazníkům rychleji se rozhodovat při nákupu

Hvězdičkové hodnocení lze snadno začlenit. Podívejte se na stránku kolekce očních stínů Sephora. Jsou snadno viditelné a zobrazují všechny důležité informace: kolik je recenzí a jaká je celková spokojenost se zbožím. Můžete také jasně vidět, že jedna z těchto palet je mnohem oblíbenější než ostatní.

sephora

Zdroj: sephora.com

Dalším skvělým signálem sociálního důkazu, který můžete začlenit na své stránky sbírky, jsou oznámení o prodeji v reálném čase.

Podívejte se na tuto stránku s nálepkami na notebook. Během prohlížení se v pravém dolním rohu objeví nenápadné vyskakovací okno, které vás informuje o tom, kdo na webu nakoupil, odkud je a co si koupil.

Je to skvělý způsob, jak do svých marketingových taktik vnést trochu FOMO. Zákazníkům se budou zobrazovat další položky, položky, které jsou zjevně oblíbené, protože si je právě někdo koupil. Bude to také vysílat silné signály důvěry a důvěryhodnosti.

Ujistěte se, že vyskakovací okno není příliš nápadné nebo rušivé. Snažte se je také rozmístit tak, aby nezačaly nakupující obtěžovat.

vinylstatus

Zdroj: vinylstatus.com

Zobrazení více zobrazení produktu

Čím lépe si zákazníci mohou produkt prohlédnout, tím větší je šance, že provedou konverzi. Čím více obrázků zboží na stránce kolekce zobrazíte, tím větší zapojení a zájem vyvoláte.

Více než jeden obrázek můžete začlenit několika způsoby. Můžete umožnit procházení galerie produktů nebo zobrazit jinou fotografii při najetí myší.

Tato stránka s chlapeckým oblečením od H&M obsahuje rolovací galerii produktů. Všechny fotografie, které se nacházejí na stránce jednotlivých produktů, si můžete prohlédnout přímo ze stránky kolekce, takže nikdy nemusíte klikat jinam.

hm

Zdroj:hm.com

Pokud chcete při najetí myší zobrazit jinou fotografii, podívejte se na tuto stránku s kolekcí dámského plážového oblečení, kde najdete inspiraci. Značka chytře zobrazuje zadní stranu zboží při najetí myší, takže si můžete prohlédnout celý kus, aniž byste museli otevírat další stránku. To je skvělá taktika pro oděvní značky.

simplybeach

Zdroj:simplybeach.com

Při rozhodování, zda přidat galerii, nebo fotografii na výšku, zvažte povahu položky. Kolik fotografií potřebuje nakupující vidět? A jaké by to měly být fotografie?

Můžete ukázat používaný produkt nebo fotografie zákazníků, pokud je pravděpodobnější, že nové zákazníky přesvědčí. Můžete ukázat položku zblízka, nebo dokonce uvést specifikace výrobku.

Zobrazení nedávno zobrazených položek

Doporučení produktů jsou obvykle vyhrazena pro jednotlivé stránky produktů. Sem také značky umisťují karusel "nedávno zobrazené".

Pokud ji však uvedete na stránce kolekce, můžete zákazníkům jemně připomenout položky, které již viděli a které se jim líbily. Ušetříte jim tak čas a námahu při procházení historie, kdy mají otevřeno mnoho karet najednou.

Podívejte se na stránku pánské běžecké obuvi Adidas. Jakmile si prohlédnete jednotlivý produkt, zobrazí se ve spodní části stránky kolekce funkce "nedávno zobrazené", která vám pomůže sledovat položky, které vás zaujaly.

adidas

Seznamte se s nástrojem Ranktracker

Univerzální platforma pro efektivní SEO

Za každým úspěšným podnikem stojí silná kampaň SEO. Vzhledem k nesčetným optimalizačním nástrojům a technikám je však těžké zjistit, kde začít. No, už se nebojte, protože mám pro vás přesně to, co vám pomůže. Představuji vám komplexní platformu Ranktracker pro efektivní SEO.

Konečně jsme otevřeli registraci do nástroje Ranktracker zcela zdarma!

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Zdroj: adidas.com

Stejný karusel se zobrazuje také na stránkách jednotlivých produktů, což umožňuje individuální prohlížení.

Zákazníkům můžete také doporučovat produkty na základě položek, které si prohlédli, stejně jako na stránkách produktů.

Závěrečné shrnutí

Zvažte, které z těchto taktik návrhu stránky kolekce produktů můžete implementovat na své vlastní stránky. Možná, že všech šest může hrát roli při zvyšování konverzního poměru.

Vždy mějte na paměti povahu svého produktu (produktů) a bolestivé body svého publika. Co hledají a jak jim vaše designové úsilí může pomoci to najít?

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Začněte používat Ranktracker... zdarma!

Zjistěte, co brání vašemu webu v umístění.

Vytvoření bezplatného účtu

Nebo se přihlaste pomocí svých přihlašovacích údajů

Different views of Ranktracker app