Jak navrhnout úspěšný web
description
Transcript of Jak navrhnout úspěšný web
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