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ě • Nestartuje • Táhne do strany • Polovina věci nefunguje • atd.
Dobře ???
2. Jak nikdy nebudete mít úspěšný web – příklad s autem Špatně
Dobře
• Nestartuje
• Běžte do nejbližšího autorizovaného dealera vozů BMW ☺
• Táhne do strany • 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ě
Dobře
• SQL error
• 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ě
Dobře
• SQL error
• Ošetřeny chybové hlášky
• Nefunkční formuláře
• Perfektní formuláře (userfriendly)
• Nekorektní zobrazení
2. Jak nikdy nebudete mít úspěšný web – příklad webu Špatně
Dobře
• SQL error
• Ošetřeny chybové hlášky
• Nefunkční formuláře
• Perfektní formuláře (userfriendly)
• Nekorektní zobrazení • 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!
