Přednáška z akce APPLE JUICE meeting na téma "Jak navrhnout úspěšný web". Cílem přednášky bylo ukázat, jak by se měl tvořit nový web nebo co by mělo předcházet redesignu webu, aby byl úspěšný.

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

2. 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

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

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

5. 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

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

7. 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

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

9. 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

10. 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

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

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

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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

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

21. 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

22. 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

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

24. 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

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

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

27. Jak navrhnout úspěšný web

28. 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

29. 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

30. 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

31. Realizace
Jak navrhnout úspěšný web

32. Jak navrhnout úspěšný web

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

42. 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

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

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