Zaujíma ma
20. mája 2019

Ivan Potančok

Managing Director Vibration
20. mája 2019

Redizajn e-shopu

5 min čítanie

Predpokladom pre tento článok je, že máte existujúci e-shop a rozmýšľate nad jeho redizajnom. V tomto článku vám zodpoviem otázky, či do toho ísť a ako. Na redizajn budete potrebovať čas aj vyčlenený budget.

Kedy robiť redizajn e-shopu?

Je niekoľko prípadov, kedy by som odporúčal zmenu dizajnu:

Zastaralý dizajn

Dizajn vášho e-shopu je váš výklad v digitálnom svete. Mohlo sa stať, že váš e-shop:

  • nespĺňa požiadavky vašich zákazníkov;
  • radikálne ste zmenili sortiment, a vybraný dizajn sa nehodí k produktom;
  • počas existencie e-shopu ste pridávali nové kategórie produktov, podstránky, blog, zmenili ste informačnú architektúru, až z toho postupným nabaľovaním vznikol mačkopes;
  • je postavený na starej šablóne, s ktorou sa už nedá ďalej pracovať;
  • zmeny v pôvodnom dizajne sa robia ťažkopádne – zmeny sú nákladné;
  • obmedzenia v pôvodnom kóde – CSS nie je štruktúrované, nie je použitý CSS framework, nedá sa A/B testovať a podobne.

Dizajn vášho e-shopu je váš výklad v digitálnom svete.

Pri takýchto situáciách je dobré spraviť revíziu a jednoducho to prekopať nanovo. V google analytics vidíte, čo sa najviac predáva a na čo najviac ľudia klikajú. Na základe toho môžete upraviť štruktúru e-shopu. Cez služby ako smartlook alebo hotjar vidíte, kde sa vaši zákazníci strácajú. Viete, na čo sa zákazníci najčastejšie pýtajú na helpdesku, prípadne ďalšie obmedzenia starého dizajnu. Toto všetko si uvedomujete, viete to spísať a zadať dodávateľovi dizajnu.

E-shop sa nezobrazuje správne na mobilných zariadeniach

Takáto situácia súvisí so zastaralým dizajnom, ale tejto téme venujem samostatné miesto, keďže sa jedná o veľmi podstatný problém.

Až 48 % slovákov chodí na e-shopy z mobilných zariadení.

Problém sa dá riešiť dvomi spôsobmi:

  • Úplným redizajnom – ak je CSS kód a šablóny zastaralé a úpravy by boli drahšie ako spraviť to nanovo, tak odporúčam túto možnosť.
  • Dorobiť responzivitu do pôvodného dizajnu – štandardne sa spravia doplnkové CSS štýly a cez media queries sa nadefinujú stĺpce, zalomenia, skryjú sa niektoré prvky, vytvorí sa responzívne menu.

Robíte presun e-shopu na iný systém

Ďalším častým dôvodom na redizajn je zmena e-shopového systému. Je to pomerne radikálna zmena a keď sa to už robí, tak popri migrácii pôvodného obsahu, prekódenia e-shopu a funkcionalít sa už dá spraviť aj ten redizajn.

Dôvodom na zmenu systému môže byť viacero. Od obmedzenia e-shop systému, nespokojnosť s pôvodným dodávateľom až po potrebu expandovať. Dizajn a HTML šablóny sú úzko prepojené s e-shop systémom, a preto sa pôvodný kód niekedy ani použiť nedá.

V tejto situácií je potrebné zhodnotiť

  • koľko prostriedkov ste do dizajnu už investovali;
  • či ste spokojní s konverzným pomerom;
  • či máte veľa stálych zákazníkov, ktorí nakupujú u vás často a sú zvyknutí na dizajn.

Väčšinou, ale nič nebráni tomu, aby sa spravila revízia obsahu, dizajnu a kódu.

Merateľné ukazovatele výkonnosti e-shopu nie sú vyhovujúce

Štvrtým dôvodom je slabá ekonomická výkonnosť e-shopu. Tu nie je nutný úplný redizajn e-shopu, niekedy postačuje len vylepšenie niektorých častí e-shopu, ktoré ovplyvňujú optimálny prechod zákazníka jednotlivým výberom produktov a nákupným procesom. Zvykneme to nazývať optimalizácia nákupného procesu, zvyšovanie konverzného pomeru, prípadne vylepšovanie UX e-shopu.

Robiť kompletný redizajn alebo postupné vylepšovanie dizajnu e-shopu?

E-shop by sme mali vnímať ako živý organizmus. Cieľom majiteľa e-shopu je zisk. Ten vieme dosiahnuť aj krajším a použiteľnejším e-shopom, a preto by sme ho mali neustále inovovať. Nie je to jednorázová činnosť. Ak máte dizajn e-shopu, ktorý vám vyhovuje na 90 percent, nerobte kompletný redizajn. Dizajn e-shopu by sa nemal radikálne meniť aspoň 4 roky. Ak máte pocit, že dizajn e-shopu má rezervy, robte vylepšovanie postupne.

K e-shopu a jeho vylepšovaniu by ste mali pristupovať agilným spôsobom, hlavne keď v dnešnom uponáhľanom svete sa veci menia zo dňa na deň. Pri postupnom vylepšovaní môžete zmeny zapracovávať rýchlejšie. Ak vám vaša hypotéza v danej iterácií nevyjde, viete malú zmenu vrátiť rýchlo späť. Výhodou je aj časové hľadisko.

Maličkými krôčikmi napredujete pravidelnejšie a rýchlejšie, ako pri veľkých skokoch.

Ideálne ak robíte zmeny za pomoci A/B alebo multi testovania. Existujú aj nástroje zadarmo ako optimise od Google. Spojte sa s vaším dizajnérom a programátormi a robte spolu veci postupne.

Načo si dávať pozor pri redizajne

  • Nevymýšľajte piate koleso na voze – používajte dizajnové patterny, ktoré zákazníci poznajú z iných e-shopov.
  • Stáli zákazníci, ktorí sú už naučení e-shop používať – po redizajne môžu byť zmätení, kde nájdu veci, ktoré už riešili intuitívne. Problém to môže byť pri veľkých e-shopoch s dlhou históriou. Príkladom môže byť portál autobazar.eu, kde po redizajne museli vrátiť pôvodný dizajn kvôli kritike zákazníkov. Pri veľkých e-shopoch je preto lepšie robiť postupný redizajn po krokoch.
  • SEO – nezabúdajte, že pri zmene HTML štruktúry e-shopu, treba myslieť na optimalizáciu pre vyhľadávače. Určite ste investovali do získavania spätných odkazov, tvorby obsahu, onpage SEO optimalizácie a škoda to stratiť. Pri zmene informačnej architektúry preto treba robiť presmerovania starých liniek na nové.
  • Spoznajte vašich zákazníkov – majú svoje potreby, využívajú špecifické zariadenia v rôznom prostredí. Príkladom môže byť e-shop pre kuchárov. Väčšina bude nakupovať cez mobil počas pauzy v robote. Budú vyhľadávať bez diakritiky s preklepmi. Preto treba prispôsobiť hlavne mobilnú verziu stránky, zjednodušiť košík na čo najmenej krokov, a počítať s preklepmi vo vyhľadávaní.
  • Iný príklad zákazníka je pre výrobnú firmu, ktorej zákazníkmi sú veľkoodberatelia, väčšinou manažéri. Nakupujú hromadne, používajú pracovný notebook. Im potrebujeme uľahčiť opakované nákupy, zobrazovať im pridelené nákupné ceny, platbu na faktúru a možnosť vytlačenia objednávky do excelu.
  • Najlepšou formou zisťovania potrieb vašich zákazníkov sú užívateľské testovania s konkrétnymi zástupcami danej cieľovej skupiny zákazníkov.
  • Pocity – vy a vaši zamestnanci sa na váš e-shop pozeráte každý deň. Neriešte zmeny v dizajne pocitovo, ale na základe dát. Hromada dát je v Google Analytics, prípadne v nástrojoch ako smartlook, hotjar, atď. Dáta o predajoch máte v objednávkach v e-shop systéme, časť dát v účtovníctve, dáta o zákazníkoch v CRM. Ďalšie dáta viete zozbierať pomocou užívateľského testovania.
  • Viac hláv, viac rozumu – pýtajte sa na názor vašich zákazníkov, vašich kolegov, vašich dodávateľov, na facebook skupinách. Nebojte sa osloviť aj profesionálov v oblasti dizajnu a UX. Každý rozumný konzultant vám aspoň odpíše. Ak sa nevyznáte v UX, dajte si skontrolovať výstup dodávateľa treťou stranou, napríklad UX špecialistom, či výsledný výstup redizajnu spĺňa moderné trendy a správne dizajnové patterny.

Tipy pre vylepšenie UX e-shopu

Tu je pár tipov, ktoré už pomohli veľa e-shopom:

  • Zjednodušujte košík – čím menej tlačidiel a priamočiarejšia cesta, tým lepšie. Ak má zákazník tovar v košíku, tak mu už nevkladajte polená pod nohy v zmysle vyrušenia pozornosti;
  • nebojte sa experimentovať a testujte;
  • niekedy stačí len zmena textácie, prípadne doplnenie textov – lacná a efektívna technika;
  • kľudne si pozrite existujúce vysoko obratové e-shopy a hľadajte čo majú lepšie ako vy. Kopírujte od nich dizajnové patterny;
  • myslite aj na skryté prvky ako validačné a chybové hlášky, prvky po vysunutí, vyskakovacie okná;
  • skúste si nakúpiť na starom mobile, staršom PC, horšom monitore, lacnom tablete. Čím váš zákazník ľahšie nájde to, čo hľadá, tým skôr nakúpi;
  • v košíku poznáme takisto rôzne dizajnové a predajné patterny ako cross sell a up sell, nakúpte ešte za a získate darček, nakúpte ešte za a získate dopravu zadarmo. Zamyslite sa, čo potrebuje daný zákazník k daným produktom. Kupuje si elektroniku, ale potrebuje baterky;
  • jednotlivé vychytávky nemusíte kresliť a programovať naraz. Postupne vylepšujte a testujte, čo funguje;
  • na Slovensku veľa ľudí ide po zľavách, preto označte produkty ak sú v akcii, vo výpredaji, no zobrazujte aj pôvodné ceny;
  • veľmi dôležitá je aj stránka produktu a stránka kategórie. Tieto obrazovky sú možno dôležitejšie ako úvodná stránka, lebo z kampaní alebo z google vyhľadávania prichádzajú zákaznici priamo tam. Častokrát pomôže prerozmiestnenie prvkov, zvýraznenie tlačidla alebo zvýraznenie určitých prvkov;
  • na väčšine e-shopov je na veľkom obrázku vodoznak. Škodí to dizajnu e-shopu, zhoršuje to vzhľad produktu pre užívateľa. Nerobil by som to. Ak vám konkurencia ukradne fotky, tak ich ukradne aj s vodoznakom. Dizajn je bez vodoznaku čistejší.

Čím váš zákazník ľahšie nájde to, čo hľadá, tým skôr nakúpi,

Ako postupovať pri redizajne e-shopu

Pri celkovom redizajne by sme mohli rozdeliť práce na tri časti, ktoré na seba nadväzujú. Každý e-shop bude mať procesy rôzne.

Prípravná fáza

  1. definovanie potrieb redizajnu
  2. spísanie nápadov
  3. dotazníky so zákazníkmi
  4. analytika dát

Dizajn a UX

  1. úprava informačnej architektúry
  2. návrh wireframes
  3. návrh dôležitých podstránok e-shopu
  4. užívateľské testovanie
  5. finalizácia dizajnov

Programovanie a finalizácia

  1. preprogramovanie šablón
  2. testovanie na zariadeniach
  3. integrácia šablón do e-shopového systému
  4. migrácia obsahu
  5. SEO presmerovania
  6. ladenie testovacej verzie
  7. testovanie testovacej verzie
  8. spustenie

Záver

Ako povedala Diana Scharf – Goals are dreams with deadlines. Určte si ciele, ktoré chcete dosiahnuť redizajnom, snívajte vo veľkom, ale dajte si termín dokončenia. Radšej po kúskoch a rýchlo, ako robiť pol roka redizajn a prichádzať o objednávky spomalením prác na spustenom e-shope.

Získaj novinky ako prvý

Prihlásením sa do noviniek súhlasíš s ich odberom a týmto úprimným dokumentom, ktorý sme k ochrane osobných údajov pripravili.

Autor článku

Ivan Potančok

Managing Director Vibration

Riaditeľ a zakladateľ vibration.sk. Od roku 2000 robí weby. Nadšenec snowboardingu, MTB, GTD a DJingu.

Tento článok prináša

Vibration je digitálna agentúra, ktorá spája dizajn, technológie a marketing v dokonale fungujúci celok. Vytvára eshopy na mieru, webové aplikácie a webové stránky. 6 rokov vyvíja vlastný eshopový systém sellio.

Posledné
Obľúbené
  • Kategórie

  • Podcasty





  • O nás

    Pravidlené novinky, rozhovory a dlhodobý obsah pre majiteľov eshopov a ecommerce marketérov. To je Ecommerce Bridge.

  • Tlačové správy

  • Získaj novinky ako prvý

    Prihlásením sa do noviniek súhlasíš s ich odberom a týmto úprimným dokumentom, ktorý sme k ochrane osobných údajov pripravili.