User-friendly web je základ. Bez dobrého webu není úspěch. Pavel Matoušek Barcamp Brno 2012
Pavel Matoušek Povolání: podnikatel, investor Profesní zájmy: internetový marketing, použitelnost webu, programování
Ukažse.cz Fotoseznamka, hodnocení fotek, komunitní server Rok založení: 2003 Návštěvnost: 35 tis. (GA) Exit: Mafra (idnes.cz) leden 2007
Filmová databáze FDb.cz Databáze filmů, mobilní aplikace (TV a kino program) Rok založení: 2003 Akvizice: 2012 - prodáno 49% United Movie Rentals s.r.o. Partnerství s největší komerční televizí: 2012 TV Nova
AAA POPTÁVKA.CZ, s.r.o. Největší poptávkový systém a největší databáze veřejných zakázek Rok založení: 2006, spuštění 2007 Exit: plán 21.12.2030
Hyperslevy.cz Server pro hromadné nakupování Rok založení: 2010 Exit: 2011 (Hypermedia a.s.)
Klikniavolej.cz Nový způsob jak levněji telefonovat a posílat sms z vašeho telefonu Rok založení: 2008 (Mafra) Koupeno: 2011
SkromnýKluk.cz Nový pokusný projekt Tržby: 0 Kč Náklady: 1hod času denně
Co si dnes povíme a ukážeme 1. Teorie pixel-perfect 2. Jak nikdy nebudete mít úspěšný web 3. Jak má vypadat úspěšný web 4. Jak spustit nový design bez poklesu konverzí a návštěvnosti
1. Teorie pixel-perfect Jak vznikla?
1. Teorie pixel-perfect Jak vznikla? Co to je?
1. Teorie pixel-perfect Jak vznikla? Co to je? Pixel perfect v praxi
2. Jak nikdy nebudete mít úspěšný web příklad s autem Špatně Nestartuje
2. Jak nikdy nebudete mít úspěšný web příklad s autem Špatně Nestartuje Táhne do strany
2. Jak nikdy nebudete mít úspěšný web příklad s autem Špatně Nestartuje Táhne do strany Polovina věci nefunguje
2. Jak nikdy nebudete mít úspěšný web příklad s autem Špatně Nestartuje Táhne do strany Polovina věci nefunguje atd.
2. Jak nikdy nebudete mít úspěšný web příklad s autem Špatně Dobře??? Nestartuje Táhne do strany Polovina věci nefunguje atd.
2. Jak nikdy nebudete mít úspěšný web příklad s autem Špatně Nestartuje Táhne do strany Dobře Běžte do nejbližšího autorizovaného dealera vozů BMW Polovina věci nefunguje atd.
2. Jak nikdy nebudete mít úspěšný web příklad webu Špatně SQL error
2. Jak nikdy nebudete mít úspěšný web příklad webu Špatně SQL error Nefunkční formuláře
2. Jak nikdy nebudete mít úspěšný web příklad webu Špatně SQL error Nefunkční formuláře Nekorektní zobrazení
2. Jak nikdy nebudete mít úspěšný web příklad webu Špatně SQL error Dobře Ošetřeny chybové hlášky Nefunkční formuláře Nekorektní zobrazení
2. Jak nikdy nebudete mít úspěšný web příklad webu Špatně SQL error Nefunkční formuláře Nekorektní zobrazení Dobře Ošetřeny chybové hlášky Perfektní formuláře (userfriendly)
2. Jak nikdy nebudete mít úspěšný web příklad webu Špatně SQL error Nefunkční formuláře Nekorektní zobrazení Dobře Ošetřeny chybové hlášky Perfektní formuláře (userfriendly) Fungující ve všech prohlížečích
Příklady chyb na webech bezrealitky.cz nefungující formulář alza.cz chyba v platbě kartou v kamenné prodejně (firewall) czc.cz zmatený počet kusů a problematický osobní odběr kasa.cz dám zaplatit kartou a nefunguje to (SQL error při vracení zpět na stránku UPC kontaktní formulář - katastrofa. Odešlu a místo děkujeme se mi tam zobrazí v iframe celý web Hlasování BarCamp Brno - na ipadu nefunguje stránkování, to samé pizzatime.cz (pak opraveno)
Tím, že vše bude fungovat, nic nezkazíte!
Otázka: Znáte úspěšný web plný chyb?
Fungující web = úspěch!
3. Jak má vypadat úspěšný web Musí fungovat (Testovat, testovat, testovat ) Dobrý byznys plán A další standardní věci
3. Jak má vypadat úspěšný web Alza.cz Slevomat.cz Seznam.cz
3. Jak má vypadat úspěšný web Alza.cz Slevomat.cz Seznam.cz Weby velkých společností si mohou dovolit tak trochu chaotický web (operátoři apod.) protože miliardy do reklamy to vynahradí ale stále tam nejsou chyby
3. Jak má vypadat úspěšný web Podtržené odkazy (lidí nosí brýle, špatný monitor, podtržení vše vyřeší.. Nepřehánět to s grafikou (flash apod.) Nepřehánět to s ajaxem apod.) Snažit se udělat dobrou navigaci, jednoduchou
3. Jak má vypadat úspěšný web Podtržené odkazy (lidí nosí brýle, špatný monitor, podtržení vše vyřeší.. Nepřehánět to s grafikou (flash apod.) Nepřehánět to s ajaxem apod.) Snažit se udělat dobrou navigaci, jednoduchou Požádejte známé ať vám web otestují, jednoduché úkoly tedy říct, ségro brácho, zkus mi v mém novým shopu nakoupit pantofle a uvidíte jestli je to použitelný nebo ne. (takto jsem já rozjel původní design aaapoptávky )
3. Jak má vypadat úspěšný web Steve jobs řekl: nepustím ven ipod dokud se na všechny volby nedostanu maximálně pomocí tří kliků
4. Jak spustit nový design bez poklesu konverzí a návštěvnosti Nejdůležitější body: 1. Otestovat na části reálných uživatelů (např. 20%)
4. Jak spustit nový design bez poklesu konverzí a návštěvnosti Nejdůležitější body: 1. Otestovat na části reálných uživatelů (např. 20%) 2. Používejte neustále A/B testování
4. Jak spustit nový design bez poklesu konverzí a návštěvnosti Nejdůležitější body: 1. Otestovat na části reálných uživatelů (např. 20%) 2. Používejte neustále A/B testování 3. Nechat zhodnotit web core uživateli = zpětná vazba v praxi
4. Jak spustit nový design bez poklesu konverzí a návštěvnosti Nejdůležitější body: 1. Otestovat na části reálných uživatelů (např. 20%) 2. Používejte neustále A/B testování 3. Nechat zhodnotit web core uživateli = zpětná vazba v praxi 4. Zapracovat připomínky a vylepšit landing page
Doporučené počteníčko Použitelnost domovských stránek ( Jakob Nielsen & Marie Tahir Nenuťte uživatele přemýšlet! (Steve Krug) Tvoříme přístupné webové stránky (David Špinar) Blog skromnykluk.cz
Děkuji za pozornost!