Zakladanie e-shopu: 4. Dizajn e-shopu
- Podrobnosti
- Uverejnené streda, 20. júl 2016
Ak sa hovorí, že šaty robia človeka, tak dizajn stránky robí e-shop. Aspoň na prvých pár sekúnd, ktoré môžu rozhodnúť o tom, či zákazník na vašom e-shope zostane a nakúpi, alebo sa radšej znechutene poberie ďalej.
Pri príprave dizajnu vášho e-shopu by ste sa mali riadiť najmä funkčnosťou v kombinácii s kvalitným grafickým návrhom, ktorý bude pôsobiť moderne a dôveryhodne. Dizajn by mal podporovať branding vašej firmy v súlade s dizajn manuálom.
Príprava dizajnu na mieru
Pre prípravu dizajnu na mieru potrebujete grafický návrh, ktorý sa následne naprogramuje ako webstránka. Ak nie ste grafik a ani programátor, budete musieť využiť služby profesionálov. Odborníci, ktorí majú skúsenosti s desiatkami podobných projektov, vás budú vedieť nasmerovať a upozornia vás už vopred na chyby, ktoré laik pri príprave nevidí. Rozloženie prvkov na hlavnej stránke, v detaile produktu, na blogu a ostatných častiach e-shopu si môžete pripraviť aj na papieri a následne skonzultovať s odborníkom na UX a UI – používateľskú skúsenosť a dizajn používateľského rozhrania. Pomôže vám spoznať zákazníka a už vopred mu pripraviť čo najprirodzenejší pohyb v e-shope. Trendom pri vytváraní webov je dnes najmä funkčnosť a použiteľnosť. Nezabudnite ani na zákazníkov so zrakovým postihnutím a uistite sa, že váš e-shop bude spĺňať pravidlá prístupnosti týkajúce sa dizajnu.
Skúste začať s dizajnom detailu produktu. Na produktovej stránke sa totiž zákazník rozhoduje, či bude pokračovať v nákupe. Nezanedbajte však ani úvodnú stránku a venujte pozornosť aj jednotlivým prvkom stránky, ako je napríklad navigácia. To, či ste zvolili správny postup, zistíte testovaním. A/B testing je metóda, pri ktorej zobrazujete náhodným návštevníkom e-shopu viaceré varianty jedného prvku a meriate ich výkon. Môžete tak napríklad zistiť, že tlačidlo s textom „Kúpiť“ má väčšiu úspešnosť v modrej farbe než v červenej.
Nepodceňte farby
Pre rôzne kategórie produktov sú charakteristické rôzne farebné kombinácie. Ak v segmente ešte nepôsobíte dlho, skúste sa inšpirovať konkurenciou. Nekopírujte, ale využite prvky, ktoré sa vám páčia vo vlastnom dizajne. Zvážte využitie farebnej kombinácie definovanej v dizajn manuáli vášho loga.
Výber farebnej kombinácie by mal závisieť aj od vašej cieľovej skupiny. Farby vnímajú inak muži a inak ženy. Rozdiely nájdeme aj medzi staršími a mladšími zákazníkmi. Pri výbere farieb dominantných na stránkach vášho e-shopu zhodnoťte ich psychologický vplyv na koncového zákazníka. Teplejšie farby môžu vzbudiť emóciu a vyvolať reakciu. Chladnejšie farby sa zasa používajú pre dosiahnutie profesionálneho a dôveryhodného dojmu. Pri vytváraní farebných paliet sa môžete inšpirovať dizajnérskymi nástrojmi, ktoré vám pomôžu vybrať vhodnú kombináciu farieb. Je vhodné dodržiavať tradičné a overené postupy, ktoré je však potrebné dopĺňať najnovšími trendmi v oblasti webového dizajnu.
Aj farby textu a pozadia by mali spĺňať určité normy. Mali by byť dostatočne kontrastné, aby ste čítanie zákazníkom čo najviac uľahčili. Najľahšie čitateľný text má tmavú farbu na svetlom pozadí. Pri svetlom texte na tmavom pozadí sa naše oči unavia podobne rýchlo, ako pri čítaní textov písaných kurzívou. Čitateľnosť textov si môžete overiť aj pomocou špeciálnych nástrojov. Stačí zadať farby textu a pozadia a uvidíte, či sú dostatočne kontrastné aj v rôznych veľkostiach.
Fotografie
Dôležitou súčasťou dizajnu vášho e-shopu budú fotografie. Či už sú to ilustračné obrázky pre blog, alebo produktové fotografie v detaile produktu. Aj vzhľad fotografií, prípadne používané filtre a podobné úpravy, môže byť zadefinovaný v dizajn manuáli. Aktuálnym trendom sú väčšie a kvalitné fotografie. Ak je to možné, používajte originálne fotografie vytvorené špeciálne pre vás. Pomôže vám to nielen v SEO, ale aj v budovaní imidžu e-shopu. V prípade, že musíte používať fotografie z fotobanky, vyberajte dôsledne. K dispozícii máte množstvo fotobaniek s fotografiami zdarma, ale vo väčšine prípadov už presýtili internet. Ilustračná fotografia, ktorú si kúpite, môže v konečnom dôsledku priniesť oveľa viac.
Dizajn zadarmo
Ak sa rozhodnete, že dizajn na mieru pre vás nie je až taký dôležitý, pomôžu vám šablóny. Je samozrejmosťou, že e-shopové riešenia ponúkajú na výber aspoň niekoľko druhov rôznych šablón pre váš e-shop. Vyberajte si také e-shopové riešenie, ktoré má responzívne a moderne pôsobiace šablóny, ktoré sú zároveň jednoducho editovateľné. Ak vám nestačia nastavenia v administrácii, so základnými vedomosťami z CSS by ste mali byť schopní pretvoriť si šablóny podľa svojich predstáv. Oveľa väčšiu voľnosť vo výbere máte v prípade, že používate najznámejšie redakčné systémy WordPress alebo Joomla. Medzi šablónami pre Wordpress a šablónami pre Joomlu si určite vyberiete tú správnu.
Responzívny dizajn alebo mobilná verzia?
Stúpajúci trend v používaní mobilných zariadení znamená, že používatelia budú prichádzať na váš e-shop z rôznych zariadení. To, že web vyzerá dobre na vašom počítači neznamená, že bude taký aj na zákazníkovom smartfóne. Vrcholom, ktorý sa snažíte dosiahnuť, je intuitívna ovládateľnosť a prehľadnosť e-shopu aj na mobile. Kým v minulosti sa preferovala pre mobilné zariadenia špeciálne vytvorená verzia stránky na subdoméne (napríklad v tvare m.google.com), v súčasnosti sa kladie dôraz takmer výlučne na responzívny dizajn. Znamená to, že v závislosti od používaného zariadenia sa pri prehliadaní vášho e-shopu budú jednotlivé prvky na stránke automaticky prispôsobovať používateľovi.
Už žiadne približovanie na malom displeji a skúšanie kliknúť na príliš malé tlačidlo. Responzívny dizajn ho umiestni na správne miesto a v správnej veľkosti. Keďže Google uprednostňuje responzívne stránky, pomôcť si môžete aj v umiestnení vo vyhľadávači. Určite vás to vďaka tomu neposunie na prvé miesto, ale aspoň budete mať pred konkurenciou so staršími webmi ďalšiu výhodu. E-shop optimalizovaný pre mobilné zariadenia je známkou modernej firmy, ktorej záleží na zákazníkovi. Ak neviete, ako optimalizovať web pre mobilné zariadenia tak, aby vždy vyzeral dobre, skúste sa inšpirovať najnovšími trendmi. Otestovať svoj e-shop z pohľadu responzívnosti si môžete aj automatizovane vďaka Googlu.
Odporúčané zdroje
Praktickou pomôckou pre každého začínajúceho e-shopára je e-book Michala Krála „13 najčastejších chýb pri prevádzkovaní e-shopu“. Michal sa spolu s kolegami venuje aj konzultáciám pre e-shopy. Ak neviete, či vášmu e-shopu pomôže redizajn alebo úplne nový vizuál, vďaka dlhoročným skúsenostiam v e-commerce vám určite budú vedieť poradiť.
Všetko, čo potrebujete vedieť o e-commerce, sa naučíte na praktických školeniach Pricemania Academy, ktoré sa zameriavajú najmä na majiteľov e-shopov.
Super tipy pre inšpiráciu v dizajne nájdete v článku od startitup.sk.
UXpin zverejňujú pravidelne aktualizované trendy vo web dizajne vo forme e-bookov.
Ďalšie časti seriálu Zakladanie e-shopu:
1. Príprava na podnikanie
2. Výber značky, domény, loga
3. Technické riešenie e-shopu
5. Obchodná a marketingová stratégia
6. Budovanie dôveryhodnosti e-shopu
7. Vytváranie konkurenčných výhod
Pavol Lelák, pricemaniaacademy.sk
Ilustračné foto: Shutterstock.com
