--- title: "UX DESIGN - design, který nevidíte, ale cítíte | Eshop-rychle" description: "UX design dokáže zvyšovat výkon e-shopu. Často se však podceňuje nebo dokonce zcela opomíjí. Ať už patříte k eshopařům benjamínkům nebo zkušeným online matadorům podívejte se, co vám v online podnikání dokáže přinést právě UX design." url: "https://blog-staging.golemops.ing/ux-design-design-ktery-nevidite-ale-citite/" language: cs --- # UX DESIGN - design, který nevidíte, ale cítíte - 12.09.2018 - 8 minut čtení - [Nové funkce a vylepšení](https://blog-staging.golemops.ing/nove-funkce-a-vylepseni/) Určeno pro e-shopaře: začátečníky i pokročilé Odhadovaná doba čtení: 10 minut Dnes si posvítíme na design, který na první pohled nemusí být viditelný. Zní to jako nesmysl? Design, který není vidět? Sílu UX designu můžeme skutečně **vnímat spíše prostřednictvím pocitu,**který si z produktu či služby odnášíme, nikoli pouze z vizuálního ztvárnění. Podvědomé signály bývají silnější, než bychom si vůbec dokázali přiznat. Na zajímavých příkladech si proto ukážeme, že **UX design si zaslouží pozornost**, ať už patříte k eshopařům benjamínkům nebo zkušeným online matadorům. Tvůrce UX designu bychom mohli přirovnat ke kolegům, kteří nestojí v záři reflektorů, ale na které se můžete vždy spolehnout a jejich tvrdá práce v zákulisí **dokáže přinést mnoho užitku firmě i zákazníkům**. Jak pracovat s produktem a službou, abyste pozitivně ovlivnili dojem z jejich používání a ze zákazníků se stali loajální ambasadoři vaší značky? ## **Nakupujeme tam, kde se dobře cítíme** ![Chaotický design e-shopu](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB9V0PNFSSBXJQ9VQ2WM.jpg&w=800&h=507&q=80&f=webp) Pokud nakupování na vašem e-shopu není fajn zážitek, nenamlouvejte si, že váš skvělý produkt vše dožene a natřete to konkurenci. Zákazník se sebere a jde nakupovat jinam. UX design může být také velmi odlišný dle kulturních zvyklostí a teritoria. To co funguje např. v Asii by těžko přijali zákazníci v Evropě a naopak. V nekonečné záplavě produktů je získání zákazníků stále těžší. Vítězí ti, kteří nabízí nejen**dobrý produkt, ale také cestu plnou příjemných “uživatelských zážitků“** (user experience - odtud UX design) při jeho nákupu. UX design je o uživatelské zkušenosti / zážitku a o pocitu v našem případě z nakupování v e-shopu. Při nakupování v kamenném obchodě také **nechcete bloudit nepřehlednými regály**, zatímco v e-shopu vás asi nepotěší zdlouhavé pátrání po zvýhodněné nabídce, doručovacích podmínkách nebo dokonce košíku. UX design se snaží právě takové situace eliminovat. ##### **UX design a Apple** Zdá se vám problematika UX designu neuchopitelná? Dáme vám příklad, který přesvědčí snad i ty nejzatvrzelejší z vás, že **UX design není radno přehlížet**! Skvělým příkladem je společnost Apple, která se zdaleka nezabývá jen technickou propracovaností produktů, inovacemi a designem, který je na první dobrou viditelný. ![Loajální-zákazník Apple](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB4DT3BK38RTDMBKH45J.jpg&w=400&h=424&q=80&f=webp) **Co je od konkurentů odlišuje, je obrovské úsilí a investice, které věnují právě do výzkumu a testování, aby měli uživatelé příjemný zážitek spojený s používáním i nakupováním jejich výrobků.** **Jak se to projevuje?** Firma se například detailně zabývá obalovým designem svých produktů, který vás uchvátí ihned po rozbalení svým vzhledem i uspořádáním. Stejně tak přistupuje k designu vlastních kamenných prodejen, webových prezentací, e-shopu, ale i operačního systému vyvíjeného pro svá zařízení. Už jen vstupit do Apple storu je zážitek. **User experience a skvělé zážitky spojené s celým životním cyklem produktu se podílejí na oblíbenosti a pozitivním vnímání značky.**Společnost Apple patří mezi nejhodnotnější globální firmy se silnou základnou - tzv. brand lovers. Je to náhoda, nebo výsledek dobré práce všech v týmu včetně UX designérů? ## **Cesta ke zvyšování výkonu - UX DESIGN** **Pokud chcete v online podnikání uspět i v budoucnu, vaším pomocníkem by neměl být jen kvalitní grafický design, ale také UX designer, jehož přínos všichni návštěvníci vašeho e-shopu sakra dobře pocítí. Jeho úkolem je neustále zlepšovat vaši službu, produkt nebo značku. A vše zároveň testovat. Měl by proto mít velký rozhled, být empatický i zvědavý.** ![UX design-jak zvolit správnou cestu](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB9V26KDA99GFH1SXCXR.jpg&w=706&h=424&q=80&f=webp) **ČINNOST UX-DESIGNERA ZAHRNUJE:** - **Uživatelský výzkum** (poznání reálných potřeb zákazníků) - **Informační architektura** (struktura e-shopu, uspořádání informací na webu) - **Interakční design** (rozmístění prvků na stránce a interakce s návštěvníkem) - **Grafický design** (barvy, grafika, písmo) - **Technické zpracování** (rychlost načítání webu, průchodnost robotů a optimalizace pro vyhledávače) - a další… ## **Náš zákazník, náš pán** V tuto chvíli se vám zdá možná logické, že přece každý e-shopař chce, aby se na jeho e-shopu zákazník cítil dobře a nákup proběhl jednoduše. Přitom v praxi je naprosto běžné, že při vývoji nového nebo rozvoji stávajícího e-shopu **dochází k úplnému vynechání fáze výzkumu** (zákaznických potřeb, použitelnost e-shopu, datové analytiky) a přechází se rovnou k líbivému návrhu grafického designu, který vychází čistě ze subjektivních pocitů grafika, nebo ještě hůře z osobního vkusu majitele e-shopu. ![Citát Tomáše Bati](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB1T2Z6JS4ZF0Y439HZ6.jpg&w=560&h=278&q=80&f=webp) Moudré myšlenky ze světa podnikání přežívají dodnes a platí i ve virtuálním on-line podnikání, o kterém za baťových časů nikdo ani nesnil . Foto: SOKA Zlín Často pak vznikají designy webu, za které se sice majitel e-shopu s grafikem navzájem plácají po zádech, ale zákazník má problém v e-shopu dokončit objednávku. Nebo**e-shop zkrátka nefunguje**, protože to, že má konkurence zelené tlačítko a maskota Ferdu ještě neznamená, že vám to bude fungovat také. Zkrátka i v online podnikání platí zlaté baťovské přísloví:***„Náš zákazník, náš pán.“*** ## **Jak vzniká funkční design e-shopu** Designem je zde myšleno to, jak e-shop funguje, nikoliv to, jak vypadá. Ideální je stavět na objektivních datech a mravenčí práci při hledání chyb a slabých míst celé struktury webu. **Vycházet z dojmologie a pocitů většinou nebude tou správnou cestou!**Takový přístup bývá chybou nejen v designu, ale v podnikání obecně. Zdravý selský rozum je sice fajn, ale pokud není podepřen relevantními daty, stále se jedná jen o vaše subjektivní pocity. ![Analýza e-shopu heatmapa](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB80Q2J96HJWVXKYFJXW.jpg&w=800&h=236&q=80&f=webp) Častou metodou sbírání dat o chování zákazníků na webu jsou tzv. heatmapy, které nám ukážou, o jaká místa na webu mají uživatelé zájem a která naopak ignorují. ### Nastartujte e-shop k novým výkonům Co reálně dokáže přinést UX design? Pojďme se podívat na případovou studii jednoho z předních odborníků na zvyšování výkonnosti e-shopů Lukáše Dubiny, kterého oslovili z e-shopu www.coffeespot.cz, aby lidově řečeno “ohnul šablonu” dle specifických potřeb zákazníků s ohledem na technické možnosti systému. **Držte se, pojedeme z kopce.** ![coffeespot pražírna kávy](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB2E7XZZ07FPYQYNSG17.jpg&w=800&h=296&q=80&f=webp) “E-shopaření je někdy pěkná dřina”, říká Jirka Plšek, zakladatel coffeespotu. Nejsnazší cestou k nastartování online podnikání je využít tzv. [krabicové řešení e-shopu](https://www.eshop-rychle.cz/pronajem-eshopu) a zvolit vhodnou šablonu. Na pár kliknutí si e-shop pronajmete a dále se soustředíte na prodej, obchod a marketing, zatímco technické problémy za vás řeší dodavatel. Takové řešení má v porovnání s e-shopem na míru, které je nesmírně nákladné a náročné na realizaci, [mnoho výhod](https://blog-staging.golemops.ing/moznosti-technickeho-reseni-pri-tvorbe-eshopu/). Proto se i Coffeespot rozhodl využít krabicové řešení od [Eshop-rychle](https://www.eshop-rychle.cz/eshop-zdarma). Šablony nemohou ovšem obsahovat nekonečné množství prvků, funkcionalit, nebo vyhovovat každému prodejci. **Proces úpravy e-shopu je vlastně hledání i těch nejmenších slabých míst.** Právě ty obvykle představují bariéru k dalšímu rozvoji podnikání. Při hledání cesty, jak e-shopy posunout se analyzují jednotlivé sekce, tlačítka, odstraňuje se nepřehledný design, upravuje se menu, špatně zvolené barvy, objednávkový proces atd. ![Navrhování e-shopu](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB9V5NQ1X20RBXEYKCBM.jpg&w=800&h=526&q=80&f=webp) ***“Mým úkolem zkrátka bylo udělat nákup na www.coffeespot.cz co nejjednoduším a zároveň co nejpříjemnějším zážitkem, který vyvrcholí nákupem a přípravou dobrého šálku kávy,”*** dodává Lukáš. ## **Stavební plán výkonného e-shopu - WIREFRAMES** Často zanedbávanou, ale velmi důležitou fází, která šetří čas i peníze, je také tvorba tzv. wireframes. Tato fáze definuje rozmístění a ovládání jednotlivých prvků na stránce. Nazývá se **wireframe** (česky drátěný model) nebo **interakční design.** **Nejedná se o grafický návrh**, protože neobsahuje žádné obrázky. Díky drátěnému modelu lépe pochopíme, jak bude výsledný web vypadat, jak se bude ovládat a co bude komunikovat. Zkrátka jak bude působit na zákazníky a zdali se budou při nakupování cítit komfortně. Zároveň se dá již testovat na reálných uživatelích, proto by měl obsahovat finální obsah. ![ukázka wireframes eshop coffeespot.cz](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AY59X3EXTRXP3P4CJ3XAE.jpg&w=700&h=498&q=80&f=webp) ### **Zvýšení výkonu a růst o desítky procent** Pečlivě provedená analýza a mravenčí práce na úpravách i těch nejmenších detailů přinesla Coffeespotu konkrétní měřitelné výsledky. **Výsledky po 2 měsících** - e-shop navštěvuje o **22%** více uživatelů - tržby se zvýšily o **11%** - průměrná hodnota objednávky **+ 8%** **Výsledky po 6 měsících** - celkové zvýšení návštěvnosti **+ 123%** - hledanost značky COFFEESPOT **+ 267%** - tržby z organického (neplaceného) vyhledávání **+ 197%** Celý postup [redesignu e-shopu ZDE](https://www.lukasdubina.cz/redesign-eshopu). ![google analytics ukázka zvýšení výkonu e-shopu](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYBC4JZ7GBQK15TXYF73M.jpg&w=800&h=118&q=80&f=webp) ## **UX design stojí čas a peníze, proto se zanedbává, aneb není všechno zlato, co se třpytí** UX design napomáhá vytvářet promyšlené struktury e-shopu a potvrzuje staré známé přísloví, že není všechno zlato, co se třpytí. **Kvalitu e-shopu netvoří jen na první pohled líbivý grafický design.**A v záplavě šablon, kterých je dnes na trhu opravdu velké množství, to platí dvojnásob. Mnoho e-shopařů vybírá šablony (v extrémním případě, bohužel, i technologické řešení) pro svůj e-shop hlavně na základě atraktivních obrázků a grafického designu. To ale není ta nejvhodnější cesta vedoucí k dlouhodobě prosperujícímu podnikání. > “Nesnažte se odlišit za každou cenu a nebuďte zbytečně inovativní. To, že máte na e-shopu logo vpravo nahoře a košík vpravo dole není inovace.” říká UX designer [Lukáš Dubina](https://www.lukasdubina.cz/) **Zásadní podíl na výkonnosti e-shopu tvoří také vnitřní struktury, které na první pohled nemusí být tolik patrné.** UX designer je tak často tím pomyslným spoluhráčem v zákulisí, který není vidět, ale podstatně se podílí na výkonnosti celého e-shopu! ![inforgrafika UX design](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB62QBQFTDWPH0BF7C62.jpg&w=800&h=489&q=80&f=webp) „Spojením pevných kostí (kód), zdravých orgánů (UX DESIGN) a příjemného vzhledu (UI-USER INTERFACE) vznikne funkční, smysluplný a esteticky vyhlížející e-shop.“ Povedenou a zábavnou prezentaci na téma UX design naleznete na http://cojeuxui.cz/ Design e-shopu je časově náročná a specializovaná disciplína kladoucí vysoké nároky na odbornost a zkušenosti. My v [Eshop-rychle](https://www.eshop-rychle.cz/) jsme si vědomi, že **ne každý si může dovolit v rámci designu svého eshopu do UX investovat desítky i stovky tisíc korun.** Jak ale uspět ve světě e-podnikání, kde soupeříte nejen s malými, ale i silnými hráči, kteří investují právě do takového vývoje třeba i miliony? ## **Řešení - nová revoluční šablona od Eshop-rychle** Právě výše uvedené otázky jsme si položili u nás v Eshop-rychle při vývoji nové generace šablon. Hlavní důraz jsme proto kladli na uživatelskou přívětivost a technickou kvalitu. Náš cíl byl jediný, říká Karel Jeřábek, jednatel společnosti: ![Karel\_Jerabek-eshop-rychle](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB4AYYDBJGHA9X2NYNR9.jpg&w=155&h=155&q=80&f=webp) *“Připravit pro naše e-shopaře šablony, které nebudou jen přehlídkou líbivých efektů, ale obchodním nástrojem propracovaným do detailů a které skutečně pomohou zvýšit výkon a konkurenceschopnost e-shopu”.* K vývoji našich revolučních šablon jsme si přizvali odborníka na slovo vzatého. Lukáše Dubinu, který je považován za špičku v oboru e-commerce. **Vzniklo tak více než 150 wireframů**, které měly jediný cíl. Aby se na šabloně **komfortněji a snadněji nakupovalo a tak docházelo ke zvýšení prosperity e-shopů**, které běží na [řešení Eshop-rychle](https://www.eshop-rychle.cz/tvorba-eshopu). ![Wireframes eshop rychle](https://blog-staging.golemops.ing/_image?href=https%3A%2F%2Fblog-staging.golemops.ing%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M35AYB80YWA5E0ATD2XA7D6Y.jpg&w=800&h=529&q=80&f=webp) Spojili jsme našich více než deset let zkušeností z e-commerce a vývojem šablon s mnohaletými zkušenostmi při zvyšování výkonů e-shopů předních odborníků. [OTEVŘÍT ŠABLONU NEW YORK](https://www.eshop-rychle.cz/sablona-newyork) ## **UX design není radno přehlížet** Smyslem každého e-shopu je, aby prodával. Čím příjemnější je pro zákazníka celý proces nákupu, tím lepších výsledků e-shop dosahuje. UX design je tak trochu opomíjenou fází vývoje e-shopových šablon. Bez nadsázky lze tvrdit, že**UX design nemusí být zprvu příliš viditelný, ale zcela zásadně se podílí na výkonu e-shopu** a budování vašeho brandu. Ať už se chystáte využívat nové šablony z dílny Eshop-rychle nebo šablony jiných autorů, **upněte svou pozornost zejména k vnitřní kvalitě šablony**, než se rozhodovat ukvapeně podle na první pohled líbivého designu. Zkrátka není všechno zlato, co se třpytí, proto vybírejte pečlivě. ;-)