1. +420 271 752 042 info@h1.cz www.h1.czPoužitelnost webuFrantišek ŠtruplE-mail: fstrupl@h1.czTwitter: @fstrupl

2. Použitelnost webuPoužitelnostSnadné 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 webuPouž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 webuWorkshop: Uživatelské testování a tvorba použitelného webu

6. Takhle tedy ne! RELOADEDPoužitelnost webu

7. Použitelnost webuJak je použitelnost webu důležitá?WEBPoužitelnostPřesvědčivostKonkurenceschopnostnabídkyDůvěryhodnostPřístupnostGrafikaZnačkaSEOPPCBanneryE-mailingSilná značkaAffiliateOfflinereklama

8. Použitelnost webuNěkolik číselJen 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žitelnostiHeuristická pravidlaPouž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 webuOblasti heuristického testováníLayout a rozměry stránkyČlenění a srozumitelnost textuOdkazyNavigaceURLFormulářeGrafika a animacePrvky uživatelského rozhraníRychlost odezvy

12. Použitelnost webuLayout a rozměry stránkyObsah čitelný při všech rozlišeníchNejdůležitější informace „nad přehybem“ Pružná šířka oknaNázev webu a logo, nadpis a titleNa první pohled patrný účel a obsahRespektuje zažité konvenceVizuálně odlišené částiVizuální priorita prvků

13. Použitelnost webuČlenění a srozumitelnost textuObrácená pyramidaOdstavce, seznamy a tabulky, nadpisy nižších úrovníZvýrazněte nejdůležitější informaceDélka řádků cca. 70 znakůVýchozí velikost písma a řádkování, zvětšování písmaKontrast písma a pozadí

14. Google – stránka výsledků hladáníPoužitelnost webu

15. Použitelnost webuOdkazyPodtržení a jedna barvaNic jiného nepodtrhávat a nebarvitKonkrétní a výstižné texty odkazůOtevírání do nového oknaOdkazy na jiné typy souborů

16. Použitelnost webuNavigaceJasně vizuálně oddělitKonzistentní napříč webemOdkaz na hlavní stránku a na nadřazenou úroveňMusí být patrné, kam stránka patří ve struktuře webuNeodkazujte na právě zobrazenou stránku

17. Použitelnost webuURLDuplicitní URLHomepage v rootu, nepoužívat index.htmlVarianty s www a bez wwwCo nejkratší srozumitelné vypovídající URL

18. Použitelnost webuFormulářeJen nezbytné prvky a informace + odůvodněníOznačit povinná poleAkceptovat různé tvary, naznačit formátZvýraznění chyb

19. Použitelnost webuGrafika a animaceJen ke zvýšení přehlednosti a informační hodnotyDůležité informace mimo alt a titleNe obrázky na pozadí textuNe animace pro upoutání pozornostiUmožněte uživatelům zastavit běžící animaci

20. Použitelnost webuPrvky 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 webuRychlost odezvyVstupní stránky načíst do 10 sekundNepoužívat mnoho obrázků či velké obrázkyUmožněte přerušení dlouhých akcíK odkazům na objemné soubory info o velikosti

22. Použitelnost webuStačí to?

23. Použitelnost webuStačí to?NE!

24. 2 přístupy k použitelnostiPravidla (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ístnosti1 volný denNejlépe ve 2 lidechPřibližně půlhodinové sezení (seance)s každým testeremPrůběžně si zapisovat postřehy na papírMožné je i zachycovat testování video kamerou (či vhodným softwarem, např. HyperCam)Typické rozlišení obrazovky pro daný webPozvěte si na testování šéfa/klienta!Použitelnost webu

26. Scénář testováníSeznam úkolů, které mají uživatelé plnitTypické úkoly pro váš web – např. objednávka zboží, nalezení specifické informaceU 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íliScénář by měl mít 1–2 stránkySpíše méně konkrétní úkolyPozor na klíčová slova (Ikea)Úkoly s reálným podtextemPrvní úkol jednodušší a více subjektivníNe všechny úkoly musí začínat na úvodní stránce.Použitelnost webuZdroj 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řiMixovat 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óraOdměna testerům 300-500 KčWorkshop: Uživatelské testování a tvorba použitelného webu

29. Sezení s uživatelem – začátekNabá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énopovoláníčastost používání internetunakupování na webuoblíbené serveryUmož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 webu1. testerzávěry2. testerzávěry…Závěry z testováníPrioritizace závěrůOprava webu

32. Čeho dosáhnete uživatelským testovánímOdhalení špatně použitelných míst webuZvýšení použitelnosti webuZlepš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 neobejdeteSám od sebe nenavrhne dobrý web nikdoSnížíte riziko neúspěchuZpětná vazbaUčíte se o zvyklostech uživatelů a získáváte cenné know-howPoužitelnost webu

34. Kdy uživatelské testování použítPoužitelnost webu

35. Card sortingMetoda 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 sortingUživatelé uvažují při card sortingu pouze v intencích obsahu, ne úkolůPoužitelnost webuKvantifikace card sortingu: jak často jsou dvě karty spolu v jedné skupině (podobnost), jak často je určitá karta zařazená do určité skupiny

36. Použitelnost webuStačí to?

37. Použitelnost webuStačí to?NE!

38. 3 přístupy k použitelnostiPravidla (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

40. Whichtestwon.comPoužitelnost webu

41. Nástroje, které používámePoužitelnost webu+

42. mYx.cz: Heat mapaPoužitelnost webu

43. Clicktale: Analýza formulářůPoužitelnost webu

44. GWO: Výsledky experimentuPoužitelnost webuhttp://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áleJe nutné izolovat jednotlivé změnyV krátkém časovém úsekuGoogle Website Optimizer - http://services.google.com/websiteoptimizer/Použitelnost webu

46. Použitelnost webuMetody ověřování použitelnostiHeuristické testováníUživatelské testováníAnalýza návštěvnostiA/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 webuUž to konečně stačí?

48. Použitelnost webuUž to konečně stačí?Ano i NE!

49. Proč optimalizovat webPoužitelnost webuhttp://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 webuZdroje – webyAlertbox (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 webuZdroje - knihyNenuť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.czSledujte můj Twitter: @fstruplPoužitelnost webu