Jak navrhnout úspěšný web
22.5. 2013 Jiří Komár
Jak navrhnout úspěšný web

Co nás dnes čeká
• Nepodceňujte tvorbu nového webu
• Jaký je optimální postup realizace
nového webu
• Metody, které lze při návrhu využít
• Nástroje, které vám můžou pomoct
• Co se povedlo, a co ne
• Otázky a diskuze
Jak navrhnout úspěšný web

Tvorbu nového webu i
redesign stávajícího jde pokazit
Jak navrhnout úspěšný web

Redesign může zabíjet
Jak navrhnout úspěšný web

Někdo zapomněl změnit cestu k XML pro zbozi.cz,
klient přišel průměrně o 60 objednávek / měsíc.
Díky špatnému přesměrování došlo k poklesu návštěvnosti o 30%,
klient se dostal na historické minimum v návštěvnosti.
Jak navrhnout úspěšný web

Zadání Realizace Spuštění
Jak se většinou tvoří
nebo redesignuje web
Jak navrhnout úspěšný web

Jak by se to mělo dělat
Záměr Analýza Příprava Zadání
Optimalizace,
testování a
rozvoj
Spuštění Testování Realizace
Jak navrhnout úspěšný web

Záměr nového webu
Jak navrhnout úspěšný web

Proč web vlastně dělat?
• Nedělejte nový web jen z nutnosti
• Snažte se odlišit a vyniknout
• Dělejte web pro své zákazníky
• Určete si měřitelné cíle, kterých chcete
dosáhnout
Záměr
Jak navrhnout úspěšný web

Kde je prostor?
• Zajímavý obsah
• Komunita
• Podpora a poradenství
• Zkušenosti zákazníků
• Mobilní web ?!
• Pak se možná dostaví i UX
Záměr
Jak navrhnout úspěšný web

Analýza je základ úspěchu
Jak navrhnout úspěšný web

Analýza dat z Google Analytics
• Zdroje návštěvnosti
Analýza
Jak navrhnout úspěšný web

Analýza dat z Google Analytics
• Vstupní stránky
Analýza
Jak navrhnout úspěšný web

Analýza klíčových slov
• Nástroj v Skliku
• Nástroj v AdWords
• Data z Google Analytics
• PPC reklama
Analýza
Plugin ulehčující analýzy klíčových
Jak navrhnout úspěšný web

Co s klíčovými slovy?
• Poslouží k návrhu informační
architektury a jednotlivých landing page
• Můžeme připravit SEO strategii
• Lze začít připravovat PPC reklama
Analýza
Jak se dělá klasifikační analýza klíčových slov
Jak navrhnout úspěšný web

Poznáváme uživatele
Analýza
• Kvalitativně
• Rozhovory s uživateli
• Dotazníky a studie v terénu
• Třídění karet
• Kvantitativně
Jak navrhnout úspěšný web

Rozhovory s uživateli
Analýza
• Vydefinujte si co potřebujete vyřešit
• uživatel / zaměstnanec
• Vyberte správné uživatelé pro rozhovor
• Analyzujte výsledky
The Chatterbox → výřečný uživatel
The Clam → nemluvný uživatel
The Pollyanna → optimistický uživatel
The Unraveler → sebekritický uživatel
The Distracted & Evasive → nepozorní a vyhýbavý uživatel
The Attitude Problem → sebestředný a problematický uživatel
Jak navrhnout úspěšný web

Analýza
Jak vypadá uživatel vašeho webu?
Jak navrhnout úspěšný web
V říjnu se bude se vdávat Chce si koupit nové pneumatiky na auto

Rozhovor vám pomůže
navrhnout lepší web
Analýza
Ukázka:
Zjištěné informace
• Je nutné nastavit až 23 políček pro objednání zájezdu
• Na zájezd jezdili lidé ve věku 89 let
• Klient chtěl funkčnost přenést na nový web, ale proč?
• Rozhovor pomohl s odhalením nesmyslné objednávky
Jak navrhnout úspěšný web

Třídění karet
Analýza
• Nechte data uspořádat uživatele
HDD
OptimalSort
Jak navrhnout úspěšný web

Kvanta vám řeknou jak moc
Analýza
• Odkud lidí odchází?
• Jakou funkčnost nepoužívají?
• Kdo umí číst v datech má vyhráno!!!
Jak navrhnout úspěšný web

Navrhněte si navigaci
Analýza
• Máte analýzu klíčových slov
• Víte, jak lidi uvažují a co potřebují
• Víte co chtějí nejvíc a co méně
• Použijte návrhové vzory
Jak navrhnout úspěšný web
fivesecondtest.com, navflow.com, treejack

Připravte se
Jak navrhnout úspěšný web

Tvorba wireframe / protopů
Příprava webu
• Ušetří vám velké starosti (čas, peníze)
• Popíšete přesně rozmístění prvků na
celém webu
• Pokud není čas → skicujte
Axure, Balsamiq
Jak navrhnout úspěšný web

Návrh
Příprava webu
Jak navrhnout úspěšný web

Výsledek
Příprava webu
Jak navrhnout úspěšný web

Jak navrhnout úspěšný web

Obsah je král
Příprava webu
• Kdo bude tvořit nový obsah?
• Co udělat s obsahem ze starého webu?
• Chce to copywritera!!!
• Připravte se na přesměrování
(pak se na to zapomene)
Jak navrhnout úspěšný web

Vytvořte jasné zadání
Zadání projektu
• Sepište důkladně seznam funkčností
• Design?
• Máte wireframe?
• Internetový marketing?
• Hosting?
• Budoucnost projektu?
Jak navrhnout úspěšný web

Vyberte dodavatele
Zadání projektu
• Bez schůzky to nejde
• Termín do Vánoc určitě ne!!!
• Ptejte se na zkušenosti klientů
• Stanovte mezníky projektu
• Sankce a součinnost
• Finální cena není vše – co bude dál?
• Velikost není vždy výhra
Jak navrhnout úspěšný web

Realizace
Jak navrhnout úspěšný web

Jak navrhnout úspěšný web

Vaříme nový web
Realizace
• Určete kompetentní osoby za vaši
stranu
• Chtějte kontakt na člověka u dodavatele
• Pravidelné schůzky vše usnadní
• Dodavatel je partner, ne nepřítel →
řvaním si jenom zvýšíte hodinovku
Jak navrhnout úspěšný web

Chyby ničí UX
Testování
• Testujte možné i nemožné
• Pokud web akceptujete → z chyb se
stanou více práce
• Nezapomeňte na testování na lidech
Jak navrhnout úspěšný web
Do.com, Basecamp

Pomalý web odrazuje zákazníky
Testování
Jak navrhnout úspěšný web
Jak působí rychlost načítání stránky na uživatele

Na co taky kouknout?
Testování
• 404 stránku
• Hledání
• Kontakty
Jak navrhnout úspěšný web
Jak měřít 404 stránku v GA, Jak měřit hledání na webu

Jak testovat na uživatelích
Testování
• Do testu vybíráme obyčejné uživatele, ne pracovníky firmy
• Testujeme na 3, optimálně na 6 a více uživatelích
• Před testem sestavíme scénář uživatelského testování
• Při testu nutíme uživatele uvažovat nahlas
• Testování nahráváme nebo si děláme poznámky
• Z poznámek vypracujeme výstupní analýzu, tu předáme k dalšímu
zpracování zhotoviteli
• Hledáme chyby v použitelnosti a ne v aplikaci, ani v uživatelích
• Každý uživatel je jiná osobnost
• Uživatele odměníme, věnoval nám svůj volný čas
Free scan to video
Jak navrhnout úspěšný web

Zmáčkni internet 
Spuštění webu
Jak navrhnout úspěšný web
Xenu Link Sleuth
• Před spuštěním nezapomeňte na:
• Přesměrování – 301 !!!
• Google Analytics
• Exporty pro zbozi.cz, heureku, RSS
• Nastavte si v GA upozornění
• Otestujte objednávku/poptávku
• Změňte odkazy, upravte PPC

Web už běží a co dál?
Optimalizace webu
Jak navrhnout úspěšný web
• Necháme naběhnout nová data
• Začínáme s optimalizací
• A/B testování
• Teplotní mapy
• SEO

Jaké nástroje využít?
Optimalizace webu
Jak navrhnout úspěšný web
• A/B testování
• Google Experimenty
• Visual Website Optimizer
• Heatmap – teplotní mapy
• ClickTale, mYx, Crazyegg

SEO funguje
Optimalizace webu
Jak navrhnout úspěšný web
• SEO není zadarmo
• Zaměřte se na zajímavý obsah
• Zapojte uživatele webu
• Reagujte na současné trendy –
buďte vždy o krok na před
• Nesledujte pozice

Kdo dělá dobré SEO a proč?
Optimalizace webu
Jak navrhnout úspěšný web
• nikl.cz
• lintech.cz
• rogelli.cz/blog
• info.radynacestu.cz
• megapixel.cz/magazin
• snowboard-zezula.cz

Co se povedlo, a co ne
Jak navrhnout úspěšný web

Děkuji za pozornost
Čas na dotazy
@jirikomar
jiri.komar@advisio.cz
Jak navrhnout úspěšný web