+420 271 752 042 info@h1.cz www.h1.cz

Použitelnost webuFrantišek Štrupl

E-mail: fstrupl@h1.czTwitter: @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

Learnability (naučitelnost)

Efficiency(rychlost používání)

Memorability (zapamatovatelnost)

Errors(množství chyb a

schopnost dostat se z nich)

Satisfaction (příjemnost)

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á?

SEO

PPC

Bannery

E-mailing

Silná značka

Affiliate

Offlinereklama

WEB

Použitelnost

Přesvědčivost

Konkurenceschopnostnabídky

Důvěryhodnost

Přístupnost

Grafika

Značka

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 textuOdkazyNavigaceURLFormulářeGrafika a animacePrvky 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

1. Pravidla (heuristická)

2. 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í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

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 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énopovoláníčastost používání internetunakupování na webuoblí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

Během vývoje webu

Po dokončení webu (ne před

spuštěním)

Během provozu webu

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 sortingUž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

1. Pravidla (heuristická)

2. Testování na uživatelích (usertesting)

3. Měření a vyhodnocování

Použitelnost webu

Použitelnost webu

One accurate measurement is worth 1 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áleJe nutné izolovat jednotlivé změnyV krátkém časovém úsekuGoogle Website Optimizer - http://services.google.com/websiteoptimizer/

Použitelnost webu

PPCe-mail

A

B

B

WEB

Konverze

Použitelnost webu

Metody ověřování použitelnosti

Heuristické 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)

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