jak navrhnout úspěšný web

Jak navrhnout úspěšný web

22.5. 2013 Jiří Komár


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


Tvorbu nového webu i redesign stávajícího jde pokazit


Redesign může zabíjet


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.


Zadání Realizace Spuštění

Jak se většinou tvoří nebo redesignuje 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


Záměr nového webu


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


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


Analýza je základ úspěchu


Analýza dat z Google Analytics

• Zdroje návštěvnosti

Analýza


Analýza dat z Google Analytics

• Vstupní stránky

Analýza


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


https://www.sklik.cz/navrh-klicovych-slov

https://adwords.google.com/o/KeywordTool

http://netemsvetem.cz/ke-stazeni/?did=3



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


http://vyhledavace.info/clanky/246/klasifikacni-analyza-klicovych-slov

Poznáváme uživatele Analýza

• Kvalitativně • Rozhovory s uživateli • Dotazníky a studie v terénu • Třídění karet

• Kvantitativně


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


Analýza

Jak vypadá uživatel vašeho webu?


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


Třídění karet Analýza

• Nechte data uspořádat uživatele

HDD

OptimalSort


http://www.optimalworkshop.com/optimalsort.htm

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


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


fivesecondtest.com, navflow.com, treejack

http://fivesecondtest.com/

http://navflow.com/

http://www.optimalworkshop.com/treejack.htm

Připravte se


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


http://www.axure.com/

http://www.balsamiq.com/products/mockups

http://www.balsamiq.com/products/mockups

Návrh Příprava webu


Výsledek Příprava webu


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)


Vytvořte jasné zadání Zadání projektu

• Sepište důkladně seznam funkčností • Design? • Máte wireframe? • Internetový marketing? • Hosting? • Budoucnost projektu?


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


Realizace


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


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


Do.com, Basecamp

https://www.do.com/

https://basecamp.com/

Pomalý web odrazuje zákazníky Testování


Jak působí rychlost načítání stránky na uživatele

http://blog.kissmetrics.com/loading-time/?wide=1

Na co taky kouknout? Testování

• 404 stránku • Hledání • Kontakty


Jak měřít 404 stránku v GA, Jak měřit hledání na webu

http://www.michaelwhitaker.com/blog/2010/07/20/finding-404-error-pages-in-google-analytics/




http://www.kaushik.net/avinash/kick-butt-with-internal-site-search-analytics/

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


Zmáčkni internet Spuštění webu


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

http://www.slunecnice.cz/sw/xenu/




Web už běží a co dál? Optimalizace webu


• 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


• A/B testování • Google Experimenty • Visual Website Optimizer

• Heatmap – teplotní mapy • ClickTale, mYx, Crazyegg

SEO funguje Optimalizace webu


• 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


• nikl.cz • lintech.cz • rogelli.cz/blog • info.radynacestu.cz • megapixel.cz/magazin • snowboard-zezula.cz

Co se povedlo, a co ne


Děkuji za pozornost

Čas na dotazy

@jirikomar

[email protected]


jak navrhnout úspěšný web

Business