Sepsal jsem 6 častých chyb, které vidím u tvorby nových webů či re-designů.

1. Neřeší se Google Analytics

Při re-designu webu mě zajímají zařízení návštěvníků (popř. rozlišení zařízení), jaké jsou vstupní stránky nebo naopak, jaké jsou výstupní.

Jaké stránky mají nejlepší konverze a ze kterých zdrojů je návštěvnost a další. Bez těchto dat bych byl na začátku úplně slepý. Dívejte se do GA či jiných nástrojů.

2. Fold stránky

Stále víc projektů má silnou návštěvnosti z telefonu a je potřeba se dívat, kde je častý fold stránky (konec displeje bez nutnosti scrollování). Je potřeba si hlídat, co je nad lomem a co je pod lomem displeje. …


Photohop se dlouhá léta používal pro přípravu webového designu. Pak přišel Sketch, Invision studio, Figma, Adobe xD a mnoho dalších. Jak vnímám po 10 letech používání Photoshopu mladšího brášku Adobe xD.

Nejdříve je potřeba říct, že Adobe xD jsem zkoušel před několika lety, jak vyšla první verze a ta mě moc neoslovila. Od té doby se ale tento nástroj velmi posunul a tady je pár mých postřehů.

Fotografie z oficiálního webu adobe.com
Fotografie z oficiálního webu adobe.com
Fotografie z oficiálního webu adobe.com

Neřeším vrstvy

Na sociálních sítích je spousta vtípků na dělení webdesignérů na 2 typy. Na ty, kteří dělají pořádek ve vrstvách, pojmenovávají je a složkují a na ty, kteří na to úplně kašlou.

V Adobe…


Mám za sebou desítky auditů webu a e-shopů na českém trhu. Na těchto webech narážím na “rozsypanou” responzivitu, nefunční odkazy nebo dokonce chyby v odeslání poptávek. To je realita, která se stává například při vývoji webu a když developer zpětně netestuje funkčnost. 🤦‍♂️

Můj osobní web www.tomashrabec.cz

Checklist

Na audit webu jsem si vytvořil checklist, který postupně procházím a sepisuji chyby na webech a e-shopech. Tento seznam neustalé vylepšuji a nebude nejspíš nikdy hotový :-).

Nechybí v něm heatmapy, procházení nahrávek uživatelů, Google Analytics, uživatelské testování, důvěryhodnost produktu, social proof, zobrazení na telefonech a mnohé další. V tomto článku poodhalím pár z nich.

1. Předimplementační analýza

Pro…


Jakmile si uživatel nahází vybrané produkty do košíku, chceme, aby jej co nejrychleji odbavil a dokončil nákup. Na základě svých zkušeností bych Vám rád představil pár tipů, jak košík vylepšit a které u e-shopů fungují. Jdeme na to !

Snímek z mého video spotu / Adam Šebesta

#1 Pryč s hlavičkou

Uživatel má v košíku zboží a my se snažíme ho nasměrovat k dokončení objednávky. Proto odstraňujeme veškeré rušivé elementy, jako jsou kategorie e-shopu nebo navigace. Tyto elementy tedy skryjeme. Samozřejmě musíme zachovat vlevo nahoře možnost vrátit se do obchodu.


Všude se řeší, že se má měřit, ale co vlastně máme na e-shopu měřit? Všichni máme na webu Google analytics, ale většinou ho nepoužíváme a nejsme schopni z něj nic vyvodit. Mám tady pár základních tipů, co měřit.

1. Konverzní poměr

Nejzákladnější měření je zaměřeno na konverzní poměr. Vyjádřeno v %, kolik z návštěvníků dokončilo svůj nákup. Konverze se dá měřit přes GA a její vyhodnocení by mělo být opatrné a spíše dlouhodobé. Náhlé zvýšení konverze může ovlivňovat sezónost nebo trendovost trhu.

Dobré je také se podívat, jaká konverznost je při různých zdrojích návštěvnosti. …


#1 Google Tag Manager — GTM

V minulém článku o optimalizaci webu 1/2 jsem psal, že rychlost načítání webu je důležitá a analytické nástroje nám web zpomalují. Lepší řešení je implementace těchto nástrojů přes Google Tag manager, kde kód pak nevkládáme do hlavičky webu, ale do kontejneru. Ten se vkládá jako jediný pak do webu. Do kontejneru pak jednoduše přidáváme a mažeme kódy nástrojů podle toho jak potřebujeme. Můžeme přes něj implementovat hotjar, smartlook, smartsupp a spousta dalších.

#2 UTM parametr

Píšete články třeba jako já a rádi by jste věděli, z kterého článku Vám chodí nejvíce lidi na web? Návštěvnost můžete měřit pomocí UTM parametru, který přídá k…


9 tipů pro optimalizaci webu 1/2

#1 Sledujte Google Analytics

Analytics má dnes každý naimplementované, ale málo kdo je sleduje a umí se v nich zorientovat. Přitom data z něj Vám mohou odhalit chyby e-shopu pro jednotlivá zařízení (např. podezřele nízká konverze pro Apple iPhone — stránka může být pro iPhone špatně nakódováná), můžete se podívat, jak často a co se vyhledává na vašem webu či jaký konverzní poměr mají tito uživatelé.

Sledujte také nejnavštěvovanější stránky a přemýšlejte, jestli je nemůžete ještě vylepšit či obohatit. Také sledujte stránky s nejvyšším bounce rate.

#2 Nastavte konverzní trychtýř a cíle

Pro nákupní proces si nastavte konverzní trychtýř a sledujte, kolik uživatelů v…


1# Pracujte s prázdným košíkem

Stále spousta e-shopů nemá optimalizovaný prázdný košík. K němu dojde tehdy, pokud něco uživatel vloží do košíku a pak položku odstraní. Pak by měl vést logický krok, aby pokračoval v nákupu a můžeme jej navést na kategorie, doporučené produkty nebo poslední navštívené.

2# Cena bez DPH

Kdo jsou Vaši klienti? Jsou to často živnostníci a firmy? Zobrazujte jim na detailu produktu a v košíku i cenu bez DPH. Hodně se ještě setkávám, že když vybírám do firmy elektroniku, cenu bez DPH si musím ručně počítat. …


1# Klikatelné kontakty

Nechte všechny telefony a emaily na webu prolinkovat tak, aby uživatel na tabletu či telefonu mohl pouze kliknout a hned volat. Pokud to tak není, musí uživatel složitě přeskakovat z webu na klávesnici vytáčení a číslo opisovat.

2# Uvádějte svoje IČ

Pokud jste podnikatelský subjekt, mějte v kontaktu své IČ, popř. DIČ. Je to nejen povinnost, ale také tak usnadníte uživatelům práci, když třeba chtějí na Vaše IČ vystavit fakturu.

Pokud jste zapsán v ŽR, neměla by chybět informace, ve kterém městě jste jako živnostníci vedeni.


Pro mou práci je důležitá volba správných aplikací. Mimo takové ty profláknuté aplikace jako je skype, balíček G-suitu, Dropbox používám těchto 9 aplikací.

1# Photoshop CC

Můj denní chleba je klasicky Adobe Photoshop, ikdyž musím říct, že postupem času mi příjde pro webdesign trošku neohrabaný, hlavně co se týče vrstev a jejich třízení. Photoshop je vyvíjen hlavně pro účely úpravy fotek a při práci na webovém designu to je cítit. Dostal jsem doporučení na Adobe xD, tak se na něj vrhnu a vyzkouším.

Cena předplaného: 3.200 Kč / rok

Tomáš Hrabec

UX / UI designer, my website: www.tomashrabec.cz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store