SlideShare a Scribd company logo
1 of 53
+420 271 752 042       info@h1.cz       www.h1.cz Použitelnost webu František ŠtruplE-mail: 	fstrupl@h1.cz Twitter: 	@fstrupl
Použitelnost webu Použitelnost Snadné používání čehokoliv bez nutnosti nad tím přemýšlet! Soustředění se na cíl
Takhle tedy ne! Použitelnost webu
Použitelnost webu Použitelný web je takový, ze kterého mají uživatelé dobrý pocit. Použitelný je takový web, který se návštěvníkům dobře používá, kde se dobře orientují a rychle naleznou, co hledají. Kde se neztrácí, nedělají zbytečné chyby. Použitelnost webu
Složky použitelnosti webu Workshop: Uživatelské testování a tvorba použitelného webu
Takhle tedy ne! RELOADED Použitelnost webu
Použitelnost webu Jak je použitelnost webu důležitá? WEB Použitelnost Přesvědčivost Konkurenceschopnost nabídky Důvěryhodnost Přístupnost Grafika Značka SEO PPC Bannery E-mailing Silná značka Affiliate Offline reklama
Použitelnost webu Několik čísel Jen 30 % lidí, kteří chtějí na webu nakoupit, se to podaří. (UIE.com) Opuštěnost nákupních košíků – 60 %. MyTravel.com – 20% zvýšení počtu objednávek po skokovém zlepšení použitelnosti.
Základní přístup k použitelnosti Heuristická pravidla Použitelnost webu
Heuristické testování Pravidla vznikla zobecněním mnohauživatelských testování. Web by měl splňovat většinu z nich,i když existují výjimky. Je možné porušit pravidla, pokud vám jejich porušení přinese dostatečný užitek. Heuristické testování  procházím web pravidlo po pravidle. Použitelnost webu
Použitelnost webu Oblasti heuristického testování Layout a rozměry stránky Členění a srozumitelnost textu Odkazy Navigace URL Formuláře Grafika a animace Prvky uživatelského rozhraní Rychlost odezvy
Použitelnost webu Layout a rozměry stránky Obsah čitelný při všech rozlišeních Nejdůležitější informace „nad přehybem“  Pružná šířka okna Název webu a logo, nadpis a title Na první pohled patrný účel a obsah Respektuje zažité konvence Vizuálně odlišené části Vizuální priorita prvků
Použitelnost webu Členění a srozumitelnost textu Obrácená pyramida Odstavce, seznamy a tabulky, nadpisy nižších úrovní Zvýrazněte nejdůležitější informace Délka řádků cca. 70 znaků Výchozí velikost písma a řádkování, zvětšování písma Kontrast písma a pozadí
Google – stránka výsledků hladání Použitelnost webu
Použitelnost webu Odkazy Podtržení a jedna barva Nic jiného nepodtrhávat a nebarvit Konkrétní a výstižné texty odkazů Otevírání do nového okna Odkazy na jiné typy souborů
Použitelnost webu Navigace Jasně vizuálně oddělit Konzistentní napříč webem Odkaz na hlavní stránku a na nadřazenou úroveň Musí být patrné, kam stránka patří ve struktuře webu Neodkazujte na právě zobrazenou stránku
Použitelnost webu URL Duplicitní URL Homepage v rootu, nepoužívat index.html Varianty s www a bez www Co nejkratší srozumitelné vypovídající URL
Použitelnost webu Formuláře Jen nezbytné prvky a informace + odůvodnění Označit povinná pole Akceptovat různé tvary, naznačit formát Zvýraznění chyb
Použitelnost webu Grafika a animace Jen ke zvýšení přehlednosti a informační hodnoty Důležité informace mimo alt a title Ne obrázky na pozadí textu Ne animace pro upoutání pozornosti Umožněte uživatelům zastavit běžící animaci
Použitelnost webu Prvky uživatelského rozhraní Neměňte vzhled uživatelského rozhraní Neotevírejte nová okna bez přičinění uživatele  Samovolně neměňte obsah či formátování stránky
Použitelnost webu Rychlost odezvy Vstupní stránky načíst do 10 sekund Nepoužívat mnoho obrázků či velké obrázky Umožněte přerušení dlouhých akcí K odkazům na objemné soubory info o velikosti
Použitelnost webu Stačí to?
Použitelnost webu Stačí to? NE!
2 přístupy k použitelnosti Pravidla (heuristická) Testování na uživatelích (usertesting) Použitelnost webu
Jak se uživatelské testování provádí 5–8 testerů Mohou a nemusí být z cílovéskupiny webu (podle složitostitématu a použitelnosti webu) Počítač v klidné místnosti 1 volný den Nejlépe ve 2 lidech Přibližně půlhodinové sezení (seance)s každým testerem Průběžně si zapisovat postřehy na papír Možné je i zachycovat testování video kamerou (či vhodným softwarem, např. HyperCam) Typické rozlišení obrazovky pro daný web Pozvěte si na testování šéfa/klienta! Použitelnost webu
Scénář testování Seznam úkolů, které mají uživatelé plnit Typické úkoly pro váš web – např. objednávka zboží, nalezení specifické informace U každého úkolu je důležitý cíl – co si chceme ověřit Úkol může obsahovat „podotázky“ – na co si dát pozor po cestě k hlavnímu cíli Scénář by měl mít 1–2 stránky Spíše méně konkrétní úkoly Pozor na klíčová slova (Ikea) Úkoly s reálným podtextem První úkol jednodušší a více subjektivní Ne všechny úkoly musí začínat na úvodní stránce. Použitelnost webu Zdroj obr.:socialscences.manchester.ac.uk
Příklady úkolů Chtěl byste průběžně sledovat nabídku produktů na webu, ale nechcete myslet na jeho pravidelné navštěvování. Co uděláte? Prohlédněte si nabídku ledniček a vyberte si tu, která vám vyhovuje. Ocitl jste se na jedné ze stránek níže v hierarchii webu. Poznáte, kde se nacházíte? Dokážete se dostat na úvodní stránku? Zjistěte stav svých objednávek. Použitelnost webu
Testeři Mixovat začátečníky, středně pokročilé a pokročilé uživatele. Každý tester maximálně dvakrát. Nabírání testerů: známí, rodinní příslušníci, kolegové sociální sítě diskusní fóra Odměna testerům 300-500 Kč Workshop: Uživatelské testování a tvorba použitelného webu
Sezení s uživatelem – začátek Nabádejte k pomalému postupu (čekat před kliknutím) a „myšlení nahlas“. Nejedná se o testování testera, ale webu. Zeptejte se na základní informace: jméno povolání častost používání internetu nakupování na webu oblíbené servery Umožněte testerovi používat jeho běžný internetový prohlížeč. Použitelnost webu
Sezení s uživatelem – průběh  Buďte milí, ale zároveň mazaní! Vciťte se do uživatele a ptejte se. Zjišťuje očekávání uživatele od akcí na webu. Názory uživatelů vás v tomto případě nezajímají. Nenapovídejte, pokud se uživatel vyloženě nezaseknul. Nenechte uživatele „utéct“, soustřeďte se na cíl. Každého testera se po testování zeptejte na jeden nejvýraznější problém a jednu největší přednost webu. Použitelnost webu
Testování Závěry z testování Workshop: Uživatelské testování a tvorba použitelného webu 1. tester závěry 2. tester závěry … Závěry z testování Prioritizace závěrů Oprava webu
Čeho dosáhnete uživatelským testováním Odhalení špatně použitelných míst webu Zvýšení použitelnosti webu Zlepšení obchodních výsledků webu, podpora značky, snížení nákladů Použitelnost webu
Proč se bez uživatelského testování při tvorbě webu neobejdete Sám od sebe nenavrhne dobrý web nikdo Snížíte riziko neúspěchu Zpětná vazba Učíte se o zvyklostech uživatelů a získáváte cenné know-how Použitelnost webu
Kdy uživatelské testování použít Použitelnost webu
Card sorting Metoda pro vytvoření struktury webu Části obsahu se napíší na kartičky a nechají se testery rozřadit do skupin. Otevřený nebo uzavřený card sorting Uživatelé uvažují při card sortingu pouze v intencích obsahu, ne úkolů Použitelnost webu Kvantifikace card sortingu: jak často jsou dvě karty spolu v jedné skupině (podobnost), jak často je určitá karta zařazená do určité skupiny
Použitelnost webu Stačí to?
Použitelnost webu Stačí to? NE!
3 přístupy k použitelnosti Pravidla (heuristická) Testování na uživatelích (usertesting) Měření a vyhodnocování Použitelnost webu
Použitelnost webu “ Oneaccuratemeasurementisworth1 000 expert opinions. ~ Grace Murray Hopper
Whichtestwon.com Použitelnost webu
Nástroje, které používáme Použitelnost webu +
mYx.cz: Heat mapa Použitelnost webu
Clicktale: Analýza formulářů Použitelnost webu
GWO: Výsledky experimentu Použitelnost webu http://youtube-global.blogspot.com/2009/08/look-inside-1024-recipe-multivariate.html
A/B testování Dvě varianty stejné stránky proti sobě, úspěšnější v běžném provozu se používá dále Je nutné izolovat jednotlivé změny V krátkém časovém úseku Google Website Optimizer - http://services.google.com/websiteoptimizer/ Použitelnost webu
Použitelnost webu Metody ověřování použitelnosti Heuristické testování Uživatelské testování Analýza návštěvnosti A/B testování Testování podle uživatelských scénářů Zpětná vazba od uživatelů Oční kamera (eye-tracking) Testování prototypu (papír, Powerpoint) Testování rozmazané obrazovky (slepá mapa) Testování konkurenčních webů Posudek nezávislého experta (nebo nováčka)
Použitelnost webu Už to konečně stačí?
Použitelnost webu Už to konečně stačí? Ano i NE!
Proč optimalizovat web Použitelnost webu http://blog.filosof.biz/maslowova-pyramida-na-webu/
Použitelnost webu “ Použitelnost zajistí, že nakupující v obchoďáku nebudou padat z jezdících schodů.Obchodní účinnost se postará o to, aby nakupující skutečně nakoupili. ~ Martin Snížek
Použitelnost webu Zdroje – weby Alertbox (http://useit.com/alertbox/) UIE.com (http://uie.com) GUUUI (http://www.guuui.com) Digital Web (http://digital-web.com) IAWiki (http://www.iawiki.net) Usability News (http://psychology.wichita.edu/surl/newsletter.htm) InfoDesign (http://www.informationdesign.org) Dušan Janovský (http://www.jakpsatweb.cz/weblog/) Martin Snížek (http://www.snizekweb.cz) Sova v síti (http://www.sovavsiti.cz)
Použitelnost webu Zdroje - knihy Nenuťte uživatele přemýšlet (Steve Krug, Computer Press, 2003) Použitelnost domovských stránek (Jakob Nielsen & Marie Tahir, Zoner Press, 2004) Information Architecture for the World Wide Web(Louis Rosenfeld & Peter Morville, O'Reilly, 2002) Web ReDesign 2.0: Workflow that Works(Kelly Goto & Emily Cotler, Peachpit Press, 2004)
Děkuji za pozornost! Napište mi e-mail:fstrupl@h1.cz Sledujte můj Twitter: @fstrupl Použitelnost webu

More Related Content

Viewers also liked

Výstava o digitálním designu
Výstava o digitálním designuVýstava o digitálním designu
Výstava o digitálním designuLukas Marvan
 
Eye tracking - vyzkoušeno za vás
Eye tracking - vyzkoušeno za vásEye tracking - vyzkoušeno za vás
Eye tracking - vyzkoušeno za vásLukas Marvan
 
Diplomová práce: Využití eye trackingu v internetovém marketingu
Diplomová práce: Využití eye trackingu v internetovém marketinguDiplomová práce: Využití eye trackingu v internetovém marketingu
Diplomová práce: Využití eye trackingu v internetovém marketinguLukas Marvan
 
Navigace není menu
Navigace není menuNavigace není menu
Navigace není menuLukas Marvan
 
Přístupnost prakticky 2.0
Přístupnost prakticky 2.0Přístupnost prakticky 2.0
Přístupnost prakticky 2.0Lukas Marvan
 
Exhibition "Digital Design: Behind the Pixels" - UX Camp Europe 2016
Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016
Exhibition "Digital Design: Behind the Pixels" - UX Camp Europe 2016Lukas Marvan
 
Testování použitelnosti prakticky
Testování použitelnosti praktickyTestování použitelnosti prakticky
Testování použitelnosti praktickyLukas Marvan
 

Viewers also liked (8)

Výstava o digitálním designu
Výstava o digitálním designuVýstava o digitálním designu
Výstava o digitálním designu
 
Eye tracking - vyzkoušeno za vás
Eye tracking - vyzkoušeno za vásEye tracking - vyzkoušeno za vás
Eye tracking - vyzkoušeno za vás
 
Diplomová práce: Využití eye trackingu v internetovém marketingu
Diplomová práce: Využití eye trackingu v internetovém marketinguDiplomová práce: Využití eye trackingu v internetovém marketingu
Diplomová práce: Využití eye trackingu v internetovém marketingu
 
Navigace není menu
Navigace není menuNavigace není menu
Navigace není menu
 
UI/UX
UI/UXUI/UX
UI/UX
 
Přístupnost prakticky 2.0
Přístupnost prakticky 2.0Přístupnost prakticky 2.0
Přístupnost prakticky 2.0
 
Exhibition "Digital Design: Behind the Pixels" - UX Camp Europe 2016
Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016Exhibition "Digital Design:Behind the Pixels" - UX Camp Europe 2016
Exhibition "Digital Design: Behind the Pixels" - UX Camp Europe 2016
 
Testování použitelnosti prakticky
Testování použitelnosti praktickyTestování použitelnosti prakticky
Testování použitelnosti prakticky
 

Similar to Použitelnost webu

Pouzitelnost - jak mit uspesny a pratelsky web?
Pouzitelnost - jak mit uspesny a pratelsky web?Pouzitelnost - jak mit uspesny a pratelsky web?
Pouzitelnost - jak mit uspesny a pratelsky web?Radek Karban
 
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe Radek Pavlíček
 
Uživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiUživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiSherpas
 
Uživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiUživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiSherpas
 
I pro knihovny je přístupnost důležitá
I pro knihovny je přístupnost důležitáI pro knihovny je přístupnost důležitá
I pro knihovny je přístupnost důležitáRadek Pavlíček
 
Metodika webových auditů
Metodika webových auditůMetodika webových auditů
Metodika webových auditůH1.cz
 
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webuSeologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webuCollabim
 
Přehled metod UX výzkumu
Přehled metod UX výzkumuPřehled metod UX výzkumu
Přehled metod UX výzkumuExperienceU
 
Proč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopyProč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopyIvo Kylián
 
SEO školení pro začátečníky
SEO školení pro začátečníkySEO školení pro začátečníky
SEO školení pro začátečníkyCollabim
 
Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....
Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....
Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....Jan Kvasnička
 
Pro koho děláme web
Pro koho děláme webPro koho děláme web
Pro koho děláme webSherpas
 
KPI - závěrečný úkol (Modul 13)
KPI - závěrečný úkol (Modul 13)KPI - závěrečný úkol (Modul 13)
KPI - závěrečný úkol (Modul 13)Pája Kučerová
 
Efektivní online prezentace
Efektivní online prezentaceEfektivní online prezentace
Efektivní online prezentaceIvo Kylián
 
Content je king, ale...
Content je king, ale...Content je king, ale...
Content je king, ale...Milan Pichlík
 
SEO školení Bělský
SEO školení BělskýSEO školení Bělský
SEO školení BělskýSOVA NET
 
Ms 11-10-2010
Ms 11-10-2010Ms 11-10-2010
Ms 11-10-2010ACOMWARE
 

Similar to Použitelnost webu (20)

Pouzitelnost - jak mit uspesny a pratelsky web?
Pouzitelnost - jak mit uspesny a pratelsky web?Pouzitelnost - jak mit uspesny a pratelsky web?
Pouzitelnost - jak mit uspesny a pratelsky web?
 
Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe Přístupnost webů knihoven - příklady dobré a špatné praxe
Přístupnost webů knihoven - příklady dobré a špatné praxe
 
Uživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiUživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxi
 
Uživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxiUživatelské testování použitelnosti webu v praxi
Uživatelské testování použitelnosti webu v praxi
 
I pro knihovny je přístupnost důležitá
I pro knihovny je přístupnost důležitáI pro knihovny je přístupnost důležitá
I pro knihovny je přístupnost důležitá
 
Domansky
DomanskyDomansky
Domansky
 
Metodika webových auditů
Metodika webových auditůMetodika webových auditů
Metodika webových auditů
 
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webuSeologer 2017 -  Karel Hladiš - Jak využít data pro zlepšení obsahu webu
Seologer 2017 - Karel Hladiš - Jak využít data pro zlepšení obsahu webu
 
Přehled metod UX výzkumu
Přehled metod UX výzkumuPřehled metod UX výzkumu
Přehled metod UX výzkumu
 
Proč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopyProč UX? Ergonomie pro weby a e-shopy
Proč UX? Ergonomie pro weby a e-shopy
 
SEO školení pro začátečníky
SEO školení pro začátečníkySEO školení pro začátečníky
SEO školení pro začátečníky
 
Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....
Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....
Zvyšujeme obchodní výkonnost prakticky | BE IN MARKETING - VŠE Praha | 30.11....
 
Pro koho děláme web
Pro koho děláme webPro koho děláme web
Pro koho děláme web
 
KPI - závěrečný úkol (Modul 13)
KPI - závěrečný úkol (Modul 13)KPI - závěrečný úkol (Modul 13)
KPI - závěrečný úkol (Modul 13)
 
Efektivní online prezentace
Efektivní online prezentaceEfektivní online prezentace
Efektivní online prezentace
 
Content je king, ale...
Content je king, ale...Content je king, ale...
Content je king, ale...
 
Použitelnost
PoužitelnostPoužitelnost
Použitelnost
 
Kpi zavereceny ukol
Kpi zavereceny ukolKpi zavereceny ukol
Kpi zavereceny ukol
 
SEO školení Bělský
SEO školení BělskýSEO školení Bělský
SEO školení Bělský
 
Ms 11-10-2010
Ms 11-10-2010Ms 11-10-2010
Ms 11-10-2010
 

More from H1.cz

Copycamp 2022 - Content gap analýza prakticky
Copycamp 2022 - Content gap analýza praktickyCopycamp 2022 - Content gap analýza prakticky
Copycamp 2022 - Content gap analýza praktickyH1.cz
 
Copycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner Urquell
Copycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner UrquellCopycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner Urquell
Copycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner UrquellH1.cz
 
Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!
Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!
Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!H1.cz
 
Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...
Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...
Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...H1.cz
 
Copycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávy
Copycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávyCopycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávy
Copycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávyH1.cz
 
Copycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brand
Copycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brandCopycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brand
Copycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brandH1.cz
 
Copycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníka
Copycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníkaCopycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníka
Copycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníkaH1.cz
 
Copycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdf
Copycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdfCopycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdf
Copycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdfH1.cz
 
Poslední středa: Chatboti (nejen) v HR kampaních
Poslední středa: Chatboti (nejen) v HR kampaníchPoslední středa: Chatboti (nejen) v HR kampaních
Poslední středa: Chatboti (nejen) v HR kampaníchH1.cz
 
Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020
Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020
Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020H1.cz
 
Poslední středa: Využijte plný potenciál feedu v PPC kampaních
Poslední středa: Využijte plný potenciál feedu v PPC kampaníchPoslední středa: Využijte plný potenciál feedu v PPC kampaních
Poslední středa: Využijte plný potenciál feedu v PPC kampaníchH1.cz
 
Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...
Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...
Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...H1.cz
 
Copycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinky
Copycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinkyCopycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinky
Copycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinkyH1.cz
 
Copycamp2019: Michelle Losekoot - Jak napsat knihu
Copycamp2019: Michelle Losekoot - Jak napsat knihuCopycamp2019: Michelle Losekoot - Jak napsat knihu
Copycamp2019: Michelle Losekoot - Jak napsat knihuH1.cz
 
Copycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírák
Copycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírákCopycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírák
Copycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírákH1.cz
 
Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...
Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...
Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...H1.cz
 
Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...
Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...
Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...H1.cz
 
Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...
Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...
Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...H1.cz
 
Copycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepší
Copycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepšíCopycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepší
Copycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepšíH1.cz
 
Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...
Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...
Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...H1.cz
 

More from H1.cz (20)

Copycamp 2022 - Content gap analýza prakticky
Copycamp 2022 - Content gap analýza praktickyCopycamp 2022 - Content gap analýza prakticky
Copycamp 2022 - Content gap analýza prakticky
 
Copycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner Urquell
Copycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner UrquellCopycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner Urquell
Copycamp 2022 - Miloš Kočí, VMLY&R - Jak se vaří koncept pro Pilsner Urquell
 
Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!
Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!
Copycamp 2022 - Karolína Smolíková, H1.cz - Starý obsah novým kouskům... naučíš!
 
Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...
Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...
Copycamp 2022 - Eliška Gunišová, Obsahová agentura - Jak vidět smysl v dlouho...
 
Copycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávy
Copycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávyCopycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávy
Copycamp 2022 - Pavel Hrdina, ČSOB - Jak psát špatné zprávy
 
Copycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brand
Copycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brandCopycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brand
Copycamp 2022- Holka z Moravy & Týna z vína - Jak budovat svůj brand
 
Copycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníka
Copycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníkaCopycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníka
Copycamp 2022- Lucie Zitterbartová - Poznej a pochop svého zákazníka
 
Copycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdf
Copycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdfCopycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdf
Copycamp 2022- Radka Legerská, Linkedin Academy - Ambasadoři na Linekdinu.pdf
 
Poslední středa: Chatboti (nejen) v HR kampaních
Poslední středa: Chatboti (nejen) v HR kampaníchPoslední středa: Chatboti (nejen) v HR kampaních
Poslední středa: Chatboti (nejen) v HR kampaních
 
Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020
Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020
Poslední středa: Trendy a priority v online marketingu nejen pro rok 2020
 
Poslední středa: Využijte plný potenciál feedu v PPC kampaních
Poslední středa: Využijte plný potenciál feedu v PPC kampaníchPoslední středa: Využijte plný potenciál feedu v PPC kampaních
Poslední středa: Využijte plný potenciál feedu v PPC kampaních
 
Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...
Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...
Copycamp2019: Lucie Hrdinová & Martina Tomková - Někdy stačí milionový nápad ...
 
Copycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinky
Copycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinkyCopycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinky
Copycamp2019: René Nekuda - Práce s příběhem a její vedlejší účinky
 
Copycamp2019: Michelle Losekoot - Jak napsat knihu
Copycamp2019: Michelle Losekoot - Jak napsat knihuCopycamp2019: Michelle Losekoot - Jak napsat knihu
Copycamp2019: Michelle Losekoot - Jak napsat knihu
 
Copycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírák
Copycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírákCopycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírák
Copycamp2019: Richard Dobiáš - 7 fíglů, jak napsat famózní otvírák
 
Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...
Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...
Copycamp2019: Pavel Šenkapoun - 10 originálních autorských stylů českého copy...
 
Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...
Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...
Copycamp2019: Břetislav Stromko - Komunikace v různých fázích životního cyklu...
 
Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...
Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...
Copycamp2019: Martina Vejvodová - Něžná facka, kterou by měl dostat každý cop...
 
Copycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepší
Copycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepšíCopycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepší
Copycamp2019: Marie Háková - Jak udělat skvělý firemní blog ještě lepší
 
Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...
Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...
Copycamp2019: Ondřej Ilinčev - Jak využít přirozené instinkty lidí v textech ...
 

Použitelnost webu

  • 1. +420 271 752 042 info@h1.cz www.h1.cz Použitelnost webu František ŠtruplE-mail: fstrupl@h1.cz Twitter: @fstrupl
  • 2. Použitelnost webu Použitelnost Snadné používání čehokoliv bez nutnosti nad tím přemýšlet! Soustředění se na cíl
  • 3. Takhle tedy ne! Použitelnost webu
  • 4. Použitelnost webu Použitelný web je takový, ze kterého mají uživatelé dobrý pocit. Použitelný je takový web, který se návštěvníkům dobře používá, kde se dobře orientují a rychle naleznou, co hledají. Kde se neztrácí, nedělají zbytečné chyby. Použitelnost webu
  • 5. Složky použitelnosti webu Workshop: Uživatelské testování a tvorba použitelného webu
  • 6. Takhle tedy ne! RELOADED Použitelnost webu
  • 7. Použitelnost webu Jak je použitelnost webu důležitá? WEB Použitelnost Přesvědčivost Konkurenceschopnost nabídky Důvěryhodnost Přístupnost Grafika Značka SEO PPC Bannery E-mailing Silná značka Affiliate Offline reklama
  • 8. Použitelnost webu Několik čísel Jen 30 % lidí, kteří chtějí na webu nakoupit, se to podaří. (UIE.com) Opuštěnost nákupních košíků – 60 %. MyTravel.com – 20% zvýšení počtu objednávek po skokovém zlepšení použitelnosti.
  • 9. Základní přístup k použitelnosti Heuristická pravidla Použitelnost webu
  • 10. Heuristické testování Pravidla vznikla zobecněním mnohauživatelských testování. Web by měl splňovat většinu z nich,i když existují výjimky. Je možné porušit pravidla, pokud vám jejich porušení přinese dostatečný užitek. Heuristické testování  procházím web pravidlo po pravidle. Použitelnost webu
  • 11. Použitelnost webu Oblasti heuristického testování Layout a rozměry stránky Členění a srozumitelnost textu Odkazy Navigace URL Formuláře Grafika a animace Prvky uživatelského rozhraní Rychlost odezvy
  • 12. Použitelnost webu Layout a rozměry stránky Obsah čitelný při všech rozlišeních Nejdůležitější informace „nad přehybem“ Pružná šířka okna Název webu a logo, nadpis a title Na první pohled patrný účel a obsah Respektuje zažité konvence Vizuálně odlišené části Vizuální priorita prvků
  • 13. Použitelnost webu Členění a srozumitelnost textu Obrácená pyramida Odstavce, seznamy a tabulky, nadpisy nižších úrovní Zvýrazněte nejdůležitější informace Délka řádků cca. 70 znaků Výchozí velikost písma a řádkování, zvětšování písma Kontrast písma a pozadí
  • 14. Google – stránka výsledků hladání Použitelnost webu
  • 15. Použitelnost webu Odkazy Podtržení a jedna barva Nic jiného nepodtrhávat a nebarvit Konkrétní a výstižné texty odkazů Otevírání do nového okna Odkazy na jiné typy souborů
  • 16. Použitelnost webu Navigace Jasně vizuálně oddělit Konzistentní napříč webem Odkaz na hlavní stránku a na nadřazenou úroveň Musí být patrné, kam stránka patří ve struktuře webu Neodkazujte na právě zobrazenou stránku
  • 17. Použitelnost webu URL Duplicitní URL Homepage v rootu, nepoužívat index.html Varianty s www a bez www Co nejkratší srozumitelné vypovídající URL
  • 18. Použitelnost webu Formuláře Jen nezbytné prvky a informace + odůvodnění Označit povinná pole Akceptovat různé tvary, naznačit formát Zvýraznění chyb
  • 19. Použitelnost webu Grafika a animace Jen ke zvýšení přehlednosti a informační hodnoty Důležité informace mimo alt a title Ne obrázky na pozadí textu Ne animace pro upoutání pozornosti Umožněte uživatelům zastavit běžící animaci
  • 20. Použitelnost webu Prvky uživatelského rozhraní Neměňte vzhled uživatelského rozhraní Neotevírejte nová okna bez přičinění uživatele Samovolně neměňte obsah či formátování stránky
  • 21. Použitelnost webu Rychlost odezvy Vstupní stránky načíst do 10 sekund Nepoužívat mnoho obrázků či velké obrázky Umožněte přerušení dlouhých akcí K odkazům na objemné soubory info o velikosti
  • 24. 2 přístupy k použitelnosti Pravidla (heuristická) Testování na uživatelích (usertesting) Použitelnost webu
  • 25. Jak se uživatelské testování provádí 5–8 testerů Mohou a nemusí být z cílovéskupiny webu (podle složitostitématu a použitelnosti webu) Počítač v klidné místnosti 1 volný den Nejlépe ve 2 lidech Přibližně půlhodinové sezení (seance)s každým testerem Průběžně si zapisovat postřehy na papír Možné je i zachycovat testování video kamerou (či vhodným softwarem, např. HyperCam) Typické rozlišení obrazovky pro daný web Pozvěte si na testování šéfa/klienta! Použitelnost webu
  • 26. Scénář testování Seznam úkolů, které mají uživatelé plnit Typické úkoly pro váš web – např. objednávka zboží, nalezení specifické informace U každého úkolu je důležitý cíl – co si chceme ověřit Úkol může obsahovat „podotázky“ – na co si dát pozor po cestě k hlavnímu cíli Scénář by měl mít 1–2 stránky Spíše méně konkrétní úkoly Pozor na klíčová slova (Ikea) Úkoly s reálným podtextem První úkol jednodušší a více subjektivní Ne všechny úkoly musí začínat na úvodní stránce. Použitelnost webu Zdroj obr.:socialscences.manchester.ac.uk
  • 27. Příklady úkolů Chtěl byste průběžně sledovat nabídku produktů na webu, ale nechcete myslet na jeho pravidelné navštěvování. Co uděláte? Prohlédněte si nabídku ledniček a vyberte si tu, která vám vyhovuje. Ocitl jste se na jedné ze stránek níže v hierarchii webu. Poznáte, kde se nacházíte? Dokážete se dostat na úvodní stránku? Zjistěte stav svých objednávek. Použitelnost webu
  • 28. Testeři Mixovat začátečníky, středně pokročilé a pokročilé uživatele. Každý tester maximálně dvakrát. Nabírání testerů: známí, rodinní příslušníci, kolegové sociální sítě diskusní fóra Odměna testerům 300-500 Kč Workshop: Uživatelské testování a tvorba použitelného webu
  • 29. Sezení s uživatelem – začátek Nabádejte k pomalému postupu (čekat před kliknutím) a „myšlení nahlas“. Nejedná se o testování testera, ale webu. Zeptejte se na základní informace: jméno povolání častost používání internetu nakupování na webu oblíbené servery Umožněte testerovi používat jeho běžný internetový prohlížeč. Použitelnost webu
  • 30. Sezení s uživatelem – průběh Buďte milí, ale zároveň mazaní! Vciťte se do uživatele a ptejte se. Zjišťuje očekávání uživatele od akcí na webu. Názory uživatelů vás v tomto případě nezajímají. Nenapovídejte, pokud se uživatel vyloženě nezaseknul. Nenechte uživatele „utéct“, soustřeďte se na cíl. Každého testera se po testování zeptejte na jeden nejvýraznější problém a jednu největší přednost webu. Použitelnost webu
  • 31. Testování Závěry z testování Workshop: Uživatelské testování a tvorba použitelného webu 1. tester závěry 2. tester závěry … Závěry z testování Prioritizace závěrů Oprava webu
  • 32. Čeho dosáhnete uživatelským testováním Odhalení špatně použitelných míst webu Zvýšení použitelnosti webu Zlepšení obchodních výsledků webu, podpora značky, snížení nákladů Použitelnost webu
  • 33. Proč se bez uživatelského testování při tvorbě webu neobejdete Sám od sebe nenavrhne dobrý web nikdo Snížíte riziko neúspěchu Zpětná vazba Učíte se o zvyklostech uživatelů a získáváte cenné know-how Použitelnost webu
  • 34. Kdy uživatelské testování použít Použitelnost webu
  • 35. Card sorting Metoda pro vytvoření struktury webu Části obsahu se napíší na kartičky a nechají se testery rozřadit do skupin. Otevřený nebo uzavřený card sorting Uživatelé uvažují při card sortingu pouze v intencích obsahu, ne úkolů Použitelnost webu Kvantifikace card sortingu: jak často jsou dvě karty spolu v jedné skupině (podobnost), jak často je určitá karta zařazená do určité skupiny
  • 38. 3 přístupy k použitelnosti Pravidla (heuristická) Testování na uživatelích (usertesting) Měření a vyhodnocování Použitelnost webu
  • 39. Použitelnost webu “ Oneaccuratemeasurementisworth1 000 expert opinions. ~ Grace Murray Hopper
  • 41. Nástroje, které používáme Použitelnost webu +
  • 42. mYx.cz: Heat mapa Použitelnost webu
  • 43. Clicktale: Analýza formulářů Použitelnost webu
  • 44. GWO: Výsledky experimentu Použitelnost webu http://youtube-global.blogspot.com/2009/08/look-inside-1024-recipe-multivariate.html
  • 45. A/B testování Dvě varianty stejné stránky proti sobě, úspěšnější v běžném provozu se používá dále Je nutné izolovat jednotlivé změny V krátkém časovém úseku Google Website Optimizer - http://services.google.com/websiteoptimizer/ Použitelnost webu
  • 46. Použitelnost webu Metody ověřování použitelnosti Heuristické testování Uživatelské testování Analýza návštěvnosti A/B testování Testování podle uživatelských scénářů Zpětná vazba od uživatelů Oční kamera (eye-tracking) Testování prototypu (papír, Powerpoint) Testování rozmazané obrazovky (slepá mapa) Testování konkurenčních webů Posudek nezávislého experta (nebo nováčka)
  • 47. Použitelnost webu Už to konečně stačí?
  • 48. Použitelnost webu Už to konečně stačí? Ano i NE!
  • 49. Proč optimalizovat web Použitelnost webu http://blog.filosof.biz/maslowova-pyramida-na-webu/
  • 50. Použitelnost webu “ Použitelnost zajistí, že nakupující v obchoďáku nebudou padat z jezdících schodů.Obchodní účinnost se postará o to, aby nakupující skutečně nakoupili. ~ Martin Snížek
  • 51. Použitelnost webu Zdroje – weby Alertbox (http://useit.com/alertbox/) UIE.com (http://uie.com) GUUUI (http://www.guuui.com) Digital Web (http://digital-web.com) IAWiki (http://www.iawiki.net) Usability News (http://psychology.wichita.edu/surl/newsletter.htm) InfoDesign (http://www.informationdesign.org) Dušan Janovský (http://www.jakpsatweb.cz/weblog/) Martin Snížek (http://www.snizekweb.cz) Sova v síti (http://www.sovavsiti.cz)
  • 52. Použitelnost webu Zdroje - knihy Nenuťte uživatele přemýšlet (Steve Krug, Computer Press, 2003) Použitelnost domovských stránek (Jakob Nielsen & Marie Tahir, Zoner Press, 2004) Information Architecture for the World Wide Web(Louis Rosenfeld & Peter Morville, O'Reilly, 2002) Web ReDesign 2.0: Workflow that Works(Kelly Goto & Emily Cotler, Peachpit Press, 2004)
  • 53. Děkuji za pozornost! Napište mi e-mail:fstrupl@h1.cz Sledujte můj Twitter: @fstrupl Použitelnost webu