späť na články

Ako navrhnúť dobrý e-shop: Takto ušetríte čas, nervy aj rozpočet

Andrej Košťál
UX dizajnér
Ako navrhnúť dobrý e-shop: Takto ušetríte čas, nervy aj rozpočet

Rýchle zhrnutie: Blueweb tvorí e-shopy už cez 10 rokov. Za ten čas sme si prešli všeličím, ale nikdy nám nechýbala chuť posúvať sa ďalej a šperkovať to, čo robíme. Dnes vám podrobne predstavíme, čo sa skrýva za návrhom našich e-shopov a prečo vôbec návrhom prikladáme takú váhu.


E-shopy sa na seba podobajú: predávajú produkty, obsahujú kategórie, zobrazujú produkty a ponúkajú možnosť nakúpiť. Tajomstvo spočíva v detailoch. Rozličné sú produkty, ciele, zákazníci, marketingová stratégia, interné systémy. Sú to práve detaily, ktoré odlišujú priemerné e-shopy od špičky na trhu. Ako s nimi pracovať? Ako navrhnúť e-shop tak, aby bol dokonale funkčný, dizajnovo vyladený a dokázal, čo má dokázať?

Jednoduchosť je základ. E-shop by mal používateľovi ponúknuť čo najjednoduchšiu a najprehľadnejšiu navigáciu.

Ako potenciálny zákazník toho veľa nepotrebujem, len:

  • Nájsť to, čo hľadám a najsť to rýchlo.
  • Objednávku uskutočniť na pár kliknutí a nespotiť sa pri tom.
  • Informácie o produkte potrebujem vidieť tak, aby som sa vedel/a rýchlo rozhodnúť a nestratil/a som sa.

Ako navrhujeme e-shop v Bluewebe

E-shopy tvoríme už 10 rokov a každým ďalším projektom sa niečo nové vieme naučiť. Zefektívňujeme procesy, vidíme, čo fungovalo a čo nie, čo treba robiť určite hneď na začiatku a bez čoho sa dá zaobísť. Z toho vznikli naše zlaté pravidlá, ktorých sa držíme pri návrhu tých najvýkonnejších e-shopov. Začíname dvomi hlavnými fázami – návrh a vývoj. V tomto článku sa bližšie pozrieme práve na návrhovú časť, ktorá je u nás rozdelená na dve časti: discovery (výskum a analýza) a delivery (tvorba konkrétneho návrhu e-shopu).

1. Discovery fáza: bez čoho sa pri návrhu e-shopu nepohneme

Discovery fáza je zameraná na získanie čo najväčšieho množstva relevantných informácií o projekte. V tomto bode zisťujeme, aký problém v rámci projektu riešime a ubezpečujeme sa, že riešime správny problém.

Ako to vyzerá v praxi? Spoznáme klienta a jeho zákazníkov:

  • od klienta získame všetky informácie potrebné k tomu, aby sme správne pochopili, aké má požiadavky na e-shop,
  • zisťujeme, kto je cieľovka, teda, pre koho e-shop robíme, čo je špecifické v danom segmente, aké problémy riešia zákazníci, ako im vieme pomôcť,
  • skúmame, aká je situácia na trhu, kto je konkurencia, v čom je klient napred a v čom naopak pozadu či aké sú štandardy vo svete.

Aj samotnú discovery fázu ďalej delíme – na výskum a analýzu. Zozbierame čo najviac informácií a vytvoríme hodnotné výstupy, ktoré budú podstatné pre ďalšiu fázu návrhu.

Na získavanie informácií používame rôzne metódy:

Na definovanie výstupov používame najmä:

Z tohto celého vznikne približne do jedného mesiaca od začiatku práce výskumný dokument, v ktorom zosumarizujeme výsledky. A ideme ďalej.

Otázka: Dokážeme vytvoriť e-shop bez prechádzajúceho výskumu a analýzy?

Dokážeme, ale výsledok nebude ideálny. Máme nejaké podklady od klienta, funkcie sa navrhnú pocitovo, zákazníci ich možno nechcú alebo nebudú potrebovať, návrh bude nedostatočne otestovaný, nenájdeme skryté šance, ktoré by sme mohli využiť v náš prospech.

Tu by sme ešte zdôraznili: Výstupy tejto časti sú zároveň zaujímavé pre biznis ako taký, nie len pre návrh e-shopu. Zmapovanie konkurencie, popísanie cieľovej skupiny, vytvorenie persón/segmentov a ich potrieb sú všeobecne hodnotné informácie aj k biznis plánu či marketingovej stratégii. Všetko sú to spojené nádoby, ktoré fungujú ako dobre namazaný stroj.

2. Delivery fáza návrhu e-shopu: od základov po strechu

V druhej fáze pracujeme s konkrétnymi výstupmi – informačnou architektúrou, wireframe, špecifikáciou a samotnou grafikou.

Informačná architektúra

Informačná architektúra nám napovie, ako bude štruktúrovaný hlavný obsah. Z pohľadu e-shopu odpovedá na 4 otázky:

  1. Ako bude obsah štrukturovaný (kategórie, stránky, blogy,…)?
  2. Aké kategórie produktov budeme mať (hĺbka kategorizácie, počet kategórií a ich názvy)?
  3. Aké budú možnosti filtrácie produktov?
  4. Aká bude navigácia e-shopu?

Toto všetko spracujeme a pripravíme ďalší cenný dokument. Na jeho tvorbu používame zvyčajne metódy ako card sorting alebo tree testing a aktívne pracujeme s analýzou kľúčových slov.

Wireframe

Wireframe je (zvyčajne) čiernobiely návrh e-shopu, na ktorom vieme rýchlo definovať jeho funkčnosť. Wireframe môže mať rôzne úrovne detailnosti. Od veľmi hrubých náčrtov po takmer detailný návrh s reálnym obsahom a rozložením prvkov (chýbajú už len farby a niektoré špecifické grafické prvky).

Aký wireframe používame my? Začíname hrubým návrhom a postupujeme k detailnému návrhu. Vo finále wireframe dávame do veľmi detailnej podoby, z ktorej vychádzame aj pri tvorbe špecifikácií. Ak je potrebné, detailný wireframe premeníme na „klikateľný“ prototyp. Návrh vďaka tomu testujeme ako reálny klikateľný e-shop. Vychytáme teda kopec múch a nedostatkov už na začiatku procesu.

Otázka: Prečo tvoríme najskôr wireframe a nie rovno grafiku? Dôvod je, že tvoriť projekt hneď vo finálnej grafike trvá v skutočnosti dlhšie. Ak začíname od grafiky, musíme sa venovať už aj detailom na úrovni pixelu. A tie predsa v úvodnej fáze nie sú dôležité. Navyše grafika odvádza pozornosť od podstatných vecí. Potrebujeme testovať funkčnosť návrhu a nie to, či farba na tlačidle má byť tmavomodrá alebo svetlomodrá.

Výnimka však potvrdzuje pravidlo. Sú prípady, kedy je dizajn e-shopu nosný prvok. Vtedy sa rozhodneme malú časť návrhov nadizajnovať už v skorých fázach a ladiť ho ďalej v symbióze s funkčnosťou.

Ako to vyzerá v praxi?

Pracujeme v cykloch, aby návrh neprebiehal tak, že sa zatvoríme na pár týždňov do officu, potom vylezieme s novým e-shopom a vy nebudete chápať, kde sme ho vzali. E-shop začíname navrhovať od troch hlavných častí: vytvoríme si zoznam produktov, detail produktu a spracujeme objednávkový proces.

Po dokončení každej časti máme spoločné stretnutie s klientom, na ktorom si prechádzame návrh. Ak má klient pripomienky, diskutujeme, návrh upravujeme, kým nie sú obe strany spokojné a produkt je vyladený. Ak je to možné, už v tejto fáze sa návrh začína testovať a snažíme sa odhaliť jeho slabé miesta. Testovanie prebieha zvyčajne formou testovania použiteľnosti, buď s reálnymi zákazníkmi alebo interne.

Priemerný e-shop môže obsahovať viac ako 100 rôznych screenov, na ktorých sú znázornené všetky možné stavy, ku ktorým môže dôjsť. Už len v rámci produktov natrafíte na množstvo stavov: produkt je v zľave, vypredaný, má farebné varianty, má veľkosti, veľkosť je vypredaná, má video, má 360 stupňové fotky a ešte mobilná verzia e-shopu! Všetko treba do detailov pripraviť a vyšpecifikovať. Potom budú vývojári vedieť, čo a ako programovať, aby bol výsledok dokonalý – estetický a funkčný.

Špecifikácia e-shopu

Rokmi praxe sme sa naučili, že tu sa chyby neodpúšťajú. Špecifikácie totiž presne popisujú, ako má e-shop fungovať.

Nie sú extrémne podrobné a ani príliš technické. Dôležité je, aby ich jednoducho pochopil aj bežný človek. Ide totiž o to, že celý e-shop má rôzne úrovne a v nich sa dá ľahko stratiť: stránka produktu je najvyššia úroveň, ktorá sa skladá z menších častí: hodnotenia produktov, popis produktu, zobrazovanie ceny, informácie o objednávke, pridávanie do košíka a pod. Každá z týchto častí má fungovať tak, aby bola dodržaná kvalita návrhu. Preto je každá časť popísaná formou požiadaviek alebo use case-ov.

Špecifikácie majú 3 dôležité funkcie:
  1. Kotva a jasná dohoda s klientom, ako majú jednotlivé časti e-shopu fungovať.
  2. Základné zadanie pre programátorov.
  3. Testovacie scenáre pre testera.

Ku každému návrhu pristupujeme tak, ako keby ho mal programovať niekto cudzí. Iná firma, bárs aj konkurent. Tu sa totiž odrazí kvalita a najmä uskutočniteľnosť. Vďaka tomu máme záruku detailného zdokumentovania dizajnu, ktorá výrazne pomáha bezproblémovému dokončeniu e-shopu.

A aby sme nezabudli, skôr, než sa špecifikácie dostanú na schválenie ku klientom, konzultujeme a schvaľujeme ich s našimi vývojármi.

Náš hlavný vývojár na projekte v tejto etape pripravuje technickú špecifikáciu. Zisťuje, aké systémy by mal e-shop používať a navrhuje ich prepojenie. Zisťujeme aj ako vieme optimalizovať klientove interné procesy. Často je skutočným víťazom redizajnu práve zjednodušenie procesov. Opäť platí to čo v úvode: „keep it simple“.

A až teraz prichádza na rad tvorba grafiky…

Grafika e-shopu

Vizuál e-shopu, grafika, UI je jeden z posledných krokov návrhu e-shopu v Bluewebe. Na scénu prichádzajú detaily, farby, marginy, veľkosť fontu, pixel hore, pixel dole. V tomto kroku riešime zaoblenia, priesvitnosť. Všetko dokopy vytvorí základný dizajnový systém tak, aby sme udržali konzistentnosť vizuálu aj v prípade, že na projekte bude pracovať viacero dizajnérov. E-shop tým pripravujeme aj na potenciálne úpravy a zmeny v budúcnosti. Od tohto kroku je už len krôčik k samotnému programovaniu. A spokojnému nakupovaniu.

Zhrnutie: Ako teda navrhnúť dobrý e-shop?

Čo je dobrý e-shop? Dobrý e-shop je prehľadný. Rýchly. Nákupný proces je jasný, zrejmý, efektívny, príjemný. Poskytuje príjemný zážitok z nakupovania. Klient je s ním spokojný. Všetky strany sú spokojné – klient, ale rovnako aj my (či už je to grafik, programátor, projekťák).

Dobrý e-shop stojí na detailoch.

Tento spracovaný proces návrhu e-shopov je pripravený tak, aby sme predišli potenciálnym problémom, ktoré nastávajú v neskorších fázach tvorby e-shopu a zároveň, aby sme dodali špičkový projekt, ktorý bude klientovi – a najmä jeho zákazníkom robiť radosť.

Áno, tvorba trvá dlhšie. Kvalita totiž vyžaduje čas. Klientom sa však investícia vráti v podobe profesionálne pripraveného návrhu s elimináciou chýb, čo garantuje naozaj prvotriedny funkčný e-shop. A aj ten čas sa v konečnom dôsledku ušetrí – menej chýb znamená menej opráv, úprav, problémov.

Návrhom sa to však nekončí, ale začína. Na scénu prichádza programovanie, špičkový vývoj, vlastný e-shopový systém Venalio s obrovskými možnosťami, dostupná podpora, možnosť rozvoja e-shopu v rámci optimalizácie konverzného pomeru, bezpečnosť systému, spoľahlivé servery či prvotriedny projektový manažment. Neľakajte sa. Všetko je vyladené tak, aby sme zvládli aj náročné softvérové projekty, ušetrili čas, nervy a optimálne využili rozpočet.

Máte otázky? Zaujala vás konkrétne časť procesu? Napíšte nám.

Andrej Košťál
UX dizajnér

Aďo začal v Bluewebe pracovať už počas vysokej školy. Najskôr ako frontend developer a teraz  ako UX dizajnér. Vďaka tomu má presahy, ktoré sú na tejto pozícií veľmi dôležité. Je…


Páčil sa vám článok?
Zdieľajte.

Zaujala vás naša práca
a máte záujem o kvalitný e-shop?

Začnime spolu
nový projekt

Napíšte nám
Blueweb

Navrhujeme, vyvíjame a
optimalizujeme e-shopy na mieru.