Dizajn používateľského rozhrania elektronického obchodu: Ako vytvoriť pútavé stránky kolekcie produktov (6 použiteľných taktík)

Úvod

Stránky kolekcie produktov sú bohužiaľ často prehliadané dizajnérmi aj copywritermi. Zatiaľ čo na vytvorenie veľmi pútavých produktových stránok a vstupných stránok sa vynakladá veľa úsilia, stránky kolekcií sa dostávajú na vedľajšiu koľaj a zostávajú žalostne nezaujímavé.

Pozrime sa na šesť použiteľných spôsobov, ako vytvoriť stránky kolekcie produktov, ktoré zaujmú, inšpirujú k činnosti a podporujú návštevnosť a konverzie.

Uistite sa, že primárna fotografia produktu je pútavá

Prvou prekážkou, ktorú musia stránky s kolekciou produktov prekonať, je zabezpečiť, aby bola hlavná fotografia pútavá a zaujímavá. Ak nezaujmete pozornosť nakupujúceho prakticky hneď po pristátí alebo počas niekoľkých posunutí, pravdepodobne ste ho stratili.

Začnite tým, že zvážite všetko, čo viete o svojej cieľovej skupine. Čo majú radi? Prečo majú radi vaše produkty? Čo sa im na vašich výrobkoch páči? Ako môžete tieto vlastnosti umiestniť do popredia?

Potom začnite uvažovať o rozložení. Je potrebné obrázky zväčšiť? Vyžadujú živé alebo neutrálne pozadie? Koľko výrobkov by ste mali zobraziť za sebou?

V ideálnom prípade otestujete niekoľko variantov dizajnu. Niekedy môžu aj tie najmenšie zmeny priniesť najväčší rozdiel.

Pozrite sa na túto stránku s kolekciou detského oblečenia. Samotné výrobky sú roztomilé a pútavé, takže ich netreba zobrazovať nijako zvlášť novým spôsobom. Štítok "new in" jasne odlišuje niektoré výrobky a zabezpečuje, aby si ich kupujúci všimol.

Ak takéto produkty umiestnite na neutrálne pozadie, je to skvelý spôsob, ako ich zvýrazniť.

Zdroj: mamasandpapas.com

Ďalším spôsobom, ako urobiť hlavnú fotografiu na stránke zbierky pútavou, je zobraziť položku pri používaní. Ak sa pozriete na túto stránku so sklonenými skleníkmi, uvidíte, ako sa to dá bez námahy vykonať. Každý obrázok je úplne iný, v inej farebnej palete a zobrazuje položku z iného uhla. Vďaka nim si môžete výrobok ľahko predstaviť vo svojom vlastnom dome.

Zdroj: greenhouseemporium.com

Je to skvelá taktika, ak chcete zákazníkovi uľahčiť predstavu o tom, ako bude konečný produkt vyzerať, a pomôcť mu predstaviť si celý životný štýl.

Uistite sa, že filtre nie sú príliš rušivé

Aby boli stránky kolekcie užitočné, vyžadujú filtre. Od zákazníkov nemožno očakávať, že budú prechádzať stránky a stránky produktov, aby našli jednu konkrétnu položku. Pravdepodobne si neuvedomujú šírku vašej ponuky a nemusia mať čas na zdĺhavé nakupovanie.

Filtre by mali zmysluplne kategorizovať vaše produkty. Cena, veľkosť a materiál sú len niektoré z najbežnejších filtrov, ktoré sa používajú. Zvážte samotné produkty a to, aké sú ich rozlišovacie faktory.

Čím je výrobok zložitejší, tým viac filtrov by malo byť k dispozícii. Môžete tiež ponúknuť užitočné, ako napríklad "nie je pre začiatočníkov" alebo "len pre profesionálov", ak zákazníkom pomôžu vybrať správny tovar.

Filtre by tiež nemali byť príliš rušivé. Mali by byť ľahko prístupné, ale nemali by zaberať veľkú časť stránky ani nijako narúšať prehliadanie.

Pozrite si túto stránku so zbierkami kompozitných paluboviek. Filtre sú uvedené na ľavej strane a dosahujú správnu rovnováhu medzi tým, aby boli ľahko viditeľné a neprekážali. Všimnite si, že sú tiež skladacie, takže obrovské množstvo informácií zákazníka nezahltí.

Sú tiež zoradené logickým spôsobom - väčšina ľudí si bude chcieť zúžiť výber farieb a materiálov skôr, ako sa začnú zaoberať konkrétnejšími detailmi, ako je napríklad veľkosť.

Zdroj: Ovaeda.com

Podobné riešenie, ktoré nezaberie veľa miesta, ale napriek tomu výrazne zlepší používateľský zážitok a umožní zákazníkom zúžiť výber v priebehu niekoľkých sekúnd, môžete ľahko implementovať.

Zobrazenie krátkych popisov produktov pri zobrazení kurzorom myši

O stránkach kolekcie produktov premýšľajte ako o informačnom centre. Tu sa zobrazujú všetky vaše produkty v určitej kategórii. Čím ste nápomocnejší, tým je väčšia pravdepodobnosť, že zákazník konvertuje.

Snažte sa, aby zákazníci klikali na položku, prečítali si opis produktu a potom klikali späť. Musia strácať čas posúvaním, aby zistili, kde práve skončili. Alebo ak budú produkty neustále otvárať na nových kartách, čoskoro budú zahltení množstvom položiek, ktoré sa snažia porovnať.

Čím viac užitočných informácií sa vám podarí na stránke kolekcie zobraziť, tým lepšie. Pridaním jednoduchého, krátkeho popisu produktu, keď niekto nabehne na produkt, môžete zákazníkom pomôcť porovnať produkty priamo na mieste.

Táto bariatrická stránka na zber vápnika robí skvelú prácu. Dostanete stručný popis výrobku, ktorý vám povie, ktoré vitamíny a minerály nájdete vo výrobku. Zdôraznené sú aj výhody: výborne chutí, podporuje imunitné zdravie a podobne.

_Zdroj: Bariatricfusion.com _

Všimnite si, aké krátke sú opisy. Môžete si ich prečítať za pár sekúnd a pokračovať v porovnávaní produktov.

Pri uplatňovaní tejto taktiky pozorne zvážte popis hoveru. Nemusí byť rovnaký ako popis na stránke produktu. Mal by stručne pojednávať o výhodách alebo kľúčových vlastnostiach položky a jasne ju odlíšiť od ostatných produktov na stránke.

Zamerajte sa skôr na informatívnosť než na predaj. Zákazníci budú s väčšou pravdepodobnosťou konvertovať, ak si budú istí svojou voľbou.

Pridajte nejaký sociálny dôkaz

Sociálny dôkaz je skvelým nástrojom na zvýšenie pútavosti a užitočnosti stránok. Ukážu vašim zákazníkom, že ste dôveryhodní, spoľahliví a že vaše produkty sú kvalitné. To je dôležité najmä pre nových zákazníkov, ktorí ešte nepoznajú vašu značku a ktorí môžu s konverziou viac váhať.

Sociálny dôkaz má mnoho foriem, ale na stránkach kolekcie je najužitočnejším typom dôkazu hodnotenie hviezdičkami. Poslúžia na niekoľko účelov:

• hodnotiť kvalitu jednotlivých produktov
• ukázať, koľko zákazníkov si ho zakúpilo a venovalo mu čas na posúdenie.
• pomáhať zákazníkom rýchlejšie sa rozhodovať pri nákupe.

Hodnotenie hviezdičkami sa dá ľahko začleniť. Pozrite si stránku kolekcie paliet očných tieňov Sephora. Sú ľahko viditeľné a zobrazujú všetky dôležité informácie: koľko recenzií je a aká je celková spokojnosť s daným produktom. Môžete tiež jasne vidieť, že jedna z týchto paliet je oveľa obľúbenejšia ako ostatné.

Zdroj: sephora.com

Ďalším skvelým signálom sociálneho dôkazu, ktorý môžete začleniť na svoje stránky kolekcie, sú oznámenia o predaji v reálnom čase.

Pozrite si túto stránku s vlastnými nálepkami na notebook. Počas prehliadania sa v pravom dolnom rohu zobrazuje nenápadné vyskakovacie okno, ktoré vás informuje o tom, kto na stránke nakúpil, odkiaľ je a čo si kúpil.

Je to skvelý spôsob, ako do svojich marketingových taktík pridať trochu FOMO. Zákazníkom sa budú zobrazovať ďalšie položky, položky, ktoré sú zjavne populárne, pretože ich práve niekto kúpil. Bude to tiež vysielať silné signály dôvery a dôveryhodnosti.

Uistite sa, že vyskakovacie okno nie je príliš nápadné ani rušivé. Snažte sa ich tiež rozmiestniť tak, aby nezačali nakupujúcich obťažovať.

Zdroj: vinylstatus.com

Zobrazenie viacerých zobrazení produktu

Čím lepšie si zákazníci môžu produkt prezrieť, tým je väčšia šanca, že ho konvertujú. Čím viac obrázkov položky zobrazíte na stránke kolekcie, tým väčšiu angažovanosť a záujem vyvoláte.

Viac ako jeden obrázok môžete zakomponovať niekoľkými spôsobmi. Môžete povoliť posúvanie galérie produktov alebo môžete zobraziť inú fotografiu po nabehnutí myšou.

Táto stránka s chlapčenským oblečením od spoločnosti H&M obsahuje rolovateľnú galériu produktov. Všetky fotografie, ktoré sa nachádzajú na stránke jednotlivých produktov, si môžete pozrieť priamo zo stránky kolekcie, takže nikdy nemusíte kliknúť preč.

Zdroj:hm.com

Ak by ste radšej zobrazili inú fotografiu pri zobrazení myšou, pozrite si túto stránku s kolekciou dámskeho plážového oblečenia, kde nájdete inšpiráciu. Značka šikovne zobrazuje zadnú stranu položky pri zobrazení hoveru, takže si môžete pozrieť celý kúsok bez toho, aby ste museli otvoriť ďalšiu stránku. Je to skvelá taktika pre odevné značky.

Zdroj:simplybeach.com

Pri rozhodovaní, či pridať galériu alebo fotografiu s nápisom, zvážte povahu položky. Koľko fotografií potrebuje nakupujúci vidieť? A aké by to mali byť fotografie?

Môžete zobraziť používaný produkt alebo fotografie zákazníkov, ak je pravdepodobnejšie, že zaujmú nového zákazníka. Môžete ukázať položku zblízka alebo dokonca uviesť špecifikácie výrobku.

Zobrazenie nedávno zobrazených položiek

Odporúčania produktov sú zvyčajne vyhradené pre jednotlivé stránky produktov. Sem značky umiestňujú aj kolotoč "nedávno zobrazené".

Ak ju však uvediete na stránke kolekcie, môžete zákazníkom jemne pripomenúť položky, ktoré už videli a ktoré sa im páčili. Ušetríte im čas a námahu pri prechádzaní histórie, keď majú otvorených množstvo kariet súčasne.

Pozrite si stránku s pánskou bežeckou obuvou Adidas. Hneď ako si prezriete jednotlivý produkt, v spodnej časti stránky kolekcie sa zobrazí funkcia "nedávno zobrazené", ktorá vám pomôže sledovať položky, ktoré vás zaujali.

Zdroj: adidas.com

Rovnaký kolotoč sa zobrazuje aj na stránkach jednotlivých produktov, čo umožňuje individuálne prispôsobené prehliadanie.

Zákazníkom môžete tiež odporúčať produkty na základe zobrazených položiek, rovnako ako na stránkach produktov.

Zhrnutie

Zvážte, ktoré z týchto taktík dizajnu stránky kolekcie produktov môžete implementovať na svoje vlastné stránky. Možno všetkých šesť môže zohrať úlohu pri zvyšovaní miery konverzie.

Vždy majte na pamäti povahu svojho produktu (produktov) a bolestivé miesta svojho publika. Čo hľadajú a ako im vaše dizajnové úsilie môže pomôcť to nájsť?