Ako si zlepšiť e-shop / 6. časť: Dizajn karty produktu

Tento článok je súčasťou ročnej série ­článkov Ako si zlepšiť e-shop, zameraných na budovanie, zlepšenie a pretvorenie e-shopu. V seriáli sa dotkneme filozofických, technických, ale aj dizajnových zlepšení.

V predošlých článkoch sme sa venovali kategórii a parametrizácii produktov. Vysvetlili sme dôležitosť parametrov a aj to, ako pozitívne môžu ovplyvňovať prezeranie e-shopu vašimi zákazníkmi. Na to, aby sa zákazník po úspešnom prefiltrovaní dostal k produktu, musí byť schopný naň kliknúť. Prvok, na ktorý zákazník kliká, sa nazýva karta produktu. V tomto článku sa budeme venovať karte produktu, vysvetlíme, aké sú možnosti, a identifikujeme jednotlivé prvky na nej.

Karta produktu by mala byť čo najviac výstižná a konzistentná. Pod konzistentnosťou rozumieme celistvosť a jednotnosť prvkov. Návštevník podvedome vníma prvky na stránke a spája si ich s funkčnosťou, ktorú nesú. Ak sa naučí, ako vyzerá karta produktu a ako je produkt reprezentovaný, nie je vhodné tieto veci meniť a striedať dizajny. Odporúčam jeden hlavný dizajn karty, ktorý sa následne objavuje všade na stránke. Výstižnosť karty produktu tkvie v informačnej hodnote, ktorú poskytuje návštevníkovi. Z karty produktu musí byť jasné, o aký produkt ide, za akú cenu sa predáva a či je na sklade. Samozrejme, existujú odchýlky a špecializované e-shopy, kde nemôže byť zobrazená cena alebo skladová dostupnosť. My sa však v tejto sérii článkov zameriavame na najrozšírenejšiu formu e-shopov, ktorou sú B2C čiže e-shopy zamerané na maloobchod.

Aké prvky sa nachádzajú a môžu nachádzať na produktovej karte?

Názov produktu: Je to samozrejmý prvok, ktorý nemusí byť až taký triviálny. Produkty zvyknú mať rôzne dlhé názvy, a ak chceme zabezpečiť konzistentnosť, musíme vyriešiť problém, čo ak má jeden produkt dvojslovný názov a názov iného zaberie tri riadky. Závisí od konkrétneho dizajnu, ale my zvykneme definovať maximálnu dĺžku názvu, ktorá pokryje majoritu produktov, a dlhšie následne odstrihneme a dodáme "...". Ak je názov príliš krátky, vertikálne aj horizontálne ho centrujeme na priestor, ktorý je vyhradený na najdlhší názov. Takto je zabezpečené, že karty majú rovnakú výšku a sú jednotné.

Fotografia/fotografie produktu: Je ­ideál­ne pre vizuálnu čistotu e-shopu, aby boli produkty fotené pokiaľ možno z rovnakého uhla a s rovnakým pomerom strán. Fotografia je skvelý prvok na stabilizáciu vizuálu karty produktu. Dnes sa hlavne pri e-shopoch s oblečením zvykne do karty produktu dávať aj galéria, ktorá sa zobrazí buď na hover effect, alebo kliknutím na šípku. Klikanie neodporúčam, pretože vnáša na kartu produktu ďalšiu funkcionalitu a narúša jednoduchosť. Zaujímavá implementácia, ktorú sme robili, bolo na hover zobraziť fotky farebných variantov obuvi. Je to inovatívna funkcionalita, ktorá môže rozšíriť pohľad na použitie viacerých fotografií pri produkte.

Skladová dostupnosť: Jedna z mandátnych informácií, ktoré má obsahovať karta produktu so správnou informačnou hodnotou, je aj to, či je produkt dostupný, alebo nie. Pri e-shopoch zohráva rýchlosť doručenia  kľúčovú úlohu a poskytnúť túto informáciu zákazníkovi včas môže rozhodnúť o tom, aký pocit z e-shopu návštevník má. 

Situácia sa komplikuje v prípadoch:


• pokiaľ je dostupnosť rôzna pri rozličných veľkostiach produktu. Toto platí pri e-shopoch s oblečením. Vtedy odporúčame dať jednu hlavnú informáciu, či je produkt na sklade, alebo nie, a následne zobraziť na karte len dostupné veľkosti oblečenia, ktoré korešpondujú s hlavnou informáciou. Napríklad ak máme tenisky na sklade, ale len vo veľkostiach 44 a 45, zákazník to vidí bez toho, že by musel vojsť do detailu produktu;

• pokiaľ má e-shop viacero kamenných predajní. Platí tu obdobné pravidlo – zobrazíme hlavnú informáciu o dostupnosti a informáciu o počte predajní, kde sa produkt nachádza. Samozrejmým predpokladom je aktuálnosť informácií a dobrá synchronizácia so skladom, aby informácia, ktorú prezentujeme, bola aktuálna.

Cena a pôvodná cena: Skvelý nástroj je zobrazenie aktuálnej predajnej ceny a štandardnej ceny. Dobrým zvykom je, že pokiaľ je produkt v zľave, jeho predajná cena sa zvýrazňuje alebo odlišuje farbou. Pôvodná cena je subtílna a menej výrazná, aby nerušila a nepútala na seba priveľa pozornosti. V prípade, že je zhodná štandardná cena a predajná, zob­razujeme na karte produktu iba jednu cenu.

Tlačidlo: Ohľadom hlavného tlačidla na karte produktu sa vedú siahodlhé diskusie o tom, akú funkčnosť má v podstate mať – či sa týmto tlačidlom má zákazník dostať do detailu produktu, alebo to je tlačidlo na vloženie do košíka. My preferujeme tlačidlo na vstup do detailu produktu. Je to aj z toho dôvodu, že detail produktu je optimalizovaný na konverzie a zvykne mať pri sebe aj upsale možnosti. Toto platí dvojnásobne pri drahších produktoch, kde si zákazník chce o produkte prečítať, prípadne doobjednať doplnkové služby. 
V prípade tlačidla, ktoré odosiela zákazníka do detailu produktu, viažeme možnosť prekliknutia na celú kartu. Výsledkom je jednoduchá použiteľnosť, pretože kamkoľvek návštevník klikne, dostane sa na rovnaké miesto.

Parametre: Ak má e-shop veľa podobných produktov, ktoré sa zvyknú odlišovať v určitom parametri, odporúčame na karte zobraziť aj vybrané parametre. Ich počet by nemal byť viac ako 3 a mali by byť zreteľné a významovo priezračné. Príklady takéhoto parametra sú farba, diskový priestor a podobne.

Štítky: Sú veľmi dôležité, dokážu sprostredkovať dôležitú informáciu v jednoduchej, prehľadnej podobe. Hlavné a základné kritérium je, že pokiaľ je produkt v zľave, uvádzame výšku zľavy v štítku. Takto komplementárne dopĺňame informáciu o cene a zvyšujeme dôraz na to, že produkt sa oplatí. Nie zriedkavo sa stáva, že e-shopy spadnú do štítkového pekla, kde je produktová karta taká oblepená štítkami, že môže strácať návštevníkovu pozornosť. Ja jednoznačne odporúčam držať triezvy pomer medzi tým, čo všetko chceme na karte produktu komunikovať. Mali by to byť informácie, ktoré sa bezprostredne týkajú produktu a niečím ho odlišujú, prípadne taká dôležitá črta produktu, že môže rozhodnúť o tom, či návštevníka zaujme.

Aké sú zlé použitia štítkov? Ak každý produkt prezentujeme ako „novinku“. Ak na drvivú väčšinu produktov dáme štítok „Odporúčame“. Ak v období Vianoc zlacníme obrovský počet produktov a na každý dáme štítok „Vianoce“ a podobne.

Chápem, že na prvý pohľad sa takej banálnej veci ako karta produktu nezvykne venovať veľa pozornosti, lenže je dôležité si uvedomiť, že je to všadeprítomný prvok. Nachádza sa takmer na každej podstránke vášho e-shopu, a pokiaľ tento element zanedbáme, môžeme z celého e-shopu navodiť pocit zanedbanosti. Počas rokov praxe sme ladili a opravovali nespočetne veľa kariet produktu.

Moje jednoznačné odporúčanie je povedať si pri návrhu e-shopu, aký súbor informácií budeme zobrazovať, aké hodnoty môžu nadobúdať a ako ich budeme reprezentovať. Takto definované pravidlá treba následne aj dodržiavať.

ÚVODNY OBR. ZDROJ: sentavio on Freepik

PoradÍ Vam expert na e-shopy

Ivan Kopčík je e-commerce konzultant zo spoločnosti For Best Clients, s.r.o., ktorý poskytuje expertné poradenstvo ambicióznym alebo stagnujúcim e-shopom, ktoré si chcú rozšíriť a zmeniť pohľad na ich online biznis. Vďaka viac ako desaťročným skúsenostiam s tvorbou e-shopov dokáže ponúknuť pohľad, ktorý v sebe spája viacero odvetví potrebných na budovanie úspešných e-shopov.

www.forbestclients.com, www.grandus.sk
tel.: 0904 313 492
e-mail: info@forbestclients.com