Ako vznikol e-shop Kovár: vŕtačka, ktorá sa pri posúvaní rozloží

Väčšina e-shopov s náradím vyzerá rovnako: biele pozadie, fotka produktu, tabuľka parametrov a tlačidlo „Do košíka“. Funguje to, ale nič to nepredáva. Chcel som ukázať, ako môže e-shop vyzerať, keď produkt dostane priestor ako pri predstavení nového telefónu.

Tak vznikol Kovár — ukážkový e-shop s vymyslenou značkou akumulátorového náradia. Pozrite si ho tu.

Nápad: ukázať, čo je vo vnútri

Prečo stojí jedna vŕtačka 80 € a druhá 300 €? Zvonka vyzerajú podobne. Rozdiel je vo vnútri: motor, prevodovka, skľučovadlo, elektronika, akumulátor. Preto sa hlavná vŕtačka D18 Pro pri posúvaní rozloží na diely a pri každom diele sa objaví krátke vysvetlenie, napríklad „Bezuhlíkový motor · 85 Nm“.

Zákazník tak za pár sekúnd pochopí, za čo platí — bez čítania tabuľky.

Prečo to nie je video

Prvý nápad bol vygenerovať video, v ktorom sa vŕtačka rozpadá, a prehrávať ho podľa posúvania. Má to dva problémy:

1. Video pri posúvaní seká. Prehliadač musí pri každom pohybe dekódovať iný snímok videa a to na slabšom počítači alebo telefóne nestíha.
2. Kvalita a cena. Generované video má nižšie rozlíšenie ako fotka a video v dobrej kvalite stojí desiatky až stovky kreditov.

Namiesto videa preto stačili dva obrázky: vŕtačka zložená a vŕtačka rozložená na diely, z rovnakého uhla.

Ako sa vŕtačka rozkladá

Z rozloženého obrázka skript automaticky vystrihol 8 dielov: telo, vrchný kryt, zadný kryt, motor, prevodovku, skľučovadlo, spúšť s elektronikou a akumulátor. Každý diel je samostatný obrázok s priehľadným pozadím a pre každý je zapísané, kde sedí v zloženej vŕtačke.

Pri posúvaní stránky:

1. sa zložená fotka nenápadne vymení za vrstvy dielov,
2. diely sa presúvajú zo svojho miesta v zloženej vŕtačke na miesto v rozloženej,
3. diely skryté vo vnútri (motor, prevodovka, elektronika) sa postupne objavia, ako vychádzajú von,
4. po rozložení sa jeden po druhom ukážu popisy dielov a nakoniec cena s tlačidlom „Kúpiť“.

Prečo je to plynulé

Prehliadač zvláda dve veci veľmi rýchlo: posunúť hotový obrázok a zmeniť jeho priehľadnosť. Obe robí grafická karta a nič sa pri tom znova nevykresľuje ani nedekóduje. Rozklad Kovár používa iba tieto dve operácie.

K tomu je posúvanie mierne vyhladené: krokové otáčanie kolieska myši sa zmení na plynulý pohyb, ale animácia za stránkou nezaostáva. V meraní v prehliadači Chrome beží rozklad pri 60 snímkach za sekundu a všetkých 8 vrstiev má spolu menej ako 300 kB, menej ako jedna bežná fotka.

Zvyšok obchodu

Rozklad je len začiatok. Pod ním je to, čo má mať každý dobrý e-shop:

• veľké čísla parametrov namiesto tabuľky,
• detaily motora a skľučovadla na celú šírku obrazovky,
• konfigurátor výbavy — len telo, set s akumulátormi, kufor — s cenou a splátkou, ktoré sa prepočítavajú hneď,
• celý rad strojov s rýchlym pridaním do košíka,
• porovnanie, ktorý stroj sa hodí na akú prácu,
• košík v bočnom paneli bez opúšťania stránky.

Čo z toho plynie pre váš e-shop

Nemusíte predávať náradie. Rovnaký prístup funguje pri nábytku, technike, kozmetike alebo strojoch — všade, kde je produkt drahší a zákazník potrebuje pochopiť, prečo. Stačia dva dobré zábery produktu.

E-shop v Aurazur stojí od 1 500 € a 3D alebo video scéna produktu, ako je tento rozklad, od 490 €. Celý cenník je na stránke Prémiové weby. Porovnanie typov e-shopov nájdete v článku Krabicový e-shop alebo e-shop na mieru.