[AVG-WEB] Zpřístupnění korporátního webu ČVUT FEL, OI, 1. ročník, cermam14@fel.cvut.cz, boksajak@fel.cvut.cz, svobop24@fel.cvut.cz 1 Zadání Semestrální práce je zaměřena na testování a návrh změn korporátního webu společnosti AVG. Web je dostupný na adrese http://www.avg.com. Cílem budou tzv. landing pages a to www.avg.com a free.avg.com. Další stránky, kterým se budeme věnovat jsou: Výběr produktů společnosti AVG a vzájemné porovnání jejich vlastností Stahování produktů AVG, zejména AVG Free Zakoupení produktů AVG, zejména AVG Internet Security 2 Cílová skupina Cílová skupina jsou nevidomí lidé s těžkým zdravotním postihnutím (úplná, praktická slepota). Jsou to lidé bez rozdílu věku. Zvládají práci s počítačem (navigace v operačním systému, instalace programů atd.) v rámci jejich možností. Pro ovládání počítače využívají jak softwarové (např. čtečky obrazovek), tak hardwarové (např. braillský řádek) pomůcky. Typickou činností těchto uživatelů je prohlížení webových stránek a vytváření elektronického obsahu (např. psaní dokumentů, tvorba internetového obsahu). 3 Screener 3.1 Veřejná část 1. Jaká z následujících možností nejlépe vystihuje Váš handicap? Můžete vybrat více možností a. úplná nebo praktická slepota (závažná ztráta zrakových pocitů) b. zbytky zraku (méně závažná ztráta zrakových pocitů) c. poruchy binokulárního/barevného vidění d. slabozrakost e. postižené obě oči f. porucha zraku je trvalá g. porucha zraku je krátkodobá nebo opakující se 2. Kolik je Vám let? a. 0-20 - 1 -
b. 21-30 c. 31-45 d. 46+ 3. Vlastníte počítač a. ano b. ne 4. Jak často používáte počítač a. denně b. několikrát do týdne c. jednou za týden d. jednou za měsíc a méně 5. K jakým činnostem používáte počítač? a. čtení knih b. prohlížení webových stránek c. multimédia (hudba, filmy atd.) d. tvorba a čtení obsahu (dokumenty, internetový obsah) e. jiné 3.2 Neveřejná část Screener byl navržen tak, aby vybraní participanti spadali do cílové skupiny popsané výše. Následuje výčet odpovědí, které potencionálního účastníka zařadí do cílové skupiny. U první otázky zjišťujeme jeho zrakovou vadu. Ve zbylých otázkách vybíráme participanty, kteří používají počítač a Internet aktivně alespoň několikrát do týdne a vykonávají složitější činnosti. 3.2.1 Požadované odpovědi 1. a + e + f zrakově postižený s úplnou slepotou postihující obě oči, trvale 2. od každé skupiny 2-3 osoby na věku nezáleží 3. a má vlastní počítač 4. a, b počítač používá alespoň několikrát do týdne 5. b, d prohlíží web nebo vytváří obsah 4 Interview 4.1 Příprava interview Interview proběhne s nevidomým, který bude mít k dispozici svůj vlastní laptop s připojením na Internet (WIFI). Interview se zúčastní také osoby z dalších týmů (celkem 6). Cílem interview je zjistit, jak nevidomí používají PC a konkrétně jak si prohlížejí webové stránky. Zajímají nás všechny okolnosti: prostředí, použité technologie, přídavný HW/SW atd. Zajímáme se o to, jakým způsobem stránku čte, na jaké problémy přitom narazí a také o to, co mu prohlížení webu zjednoduší. Budeme muset testovat webové stránky jako bychom byli sami nevidomí, proto musíme využít interview na získání představy, jak se do role nevidomého vžít. - 2 -
4.1.1 Témata Práce s PC z pohledu nevidomého. Prohlížení webových stránek. Používání pomůcek pro nevidomé (čtečky, Braillův řádek, ). Potřeba cizí pomoci. 4.1.2 Otázky Na jaké činnosti používáte PC? Jak jste se naučil(a) používat PC? Používáte nějaký speciální HW/SW? (JAWS, Braillův řádek, ) Jakým způsobem používáte JAWS? (ideálně ukázka) Jakým činnostem se věnujete na webu? Jaké stránky navštěvujete? Které jsou vaše oblíbené? Jaký používáte prohlížeč? Používáte nějaký vyhledávač? Můžete nám ukázat jak prohlížíte stránku? Co vám způsobuje problémy při prohlížení stránek? Jak vnímáte reklamní banery na webu? Jak si instalujete software? Při jakých činnostech na PC potřebujete pomoc cizí osoby? 4.2 Průběh interview 4.2.1 Základní údaje Věk: 58 let Nevidomý je od 14 let - od úrazu. Používá Windows XP SP 3 a Internet Explorer + čtečka JAWS (dobrá podpora prohlížeče ze strany JAWS). Je uživatelem antiviru AVG (placené verze) - vyzkoušel AVG Free, poté ho zakoupil. Kromě Windows XP používá také Linux (příležitostně) a v něm čtečku pro nevidomé Orca (je součástí GNOME). - 3 -
4.2.2 Používaní PC SW si instaluje sám pomocí čtečky JAWS, v systému Windows bez problému instaluje aplikace využívající nativního instalátoru, problémy jsou však u některých jiných instalátorů (např. instalace Flash). Preferuje stahování instalačních souborů ze stránky výrobce, nemá rád servery jako např. slunecnice.cz, stahuj.cz a podobné. Počítač používá denně několik hodin. Čte knihy, prohlíží si webové stránky a programuje. Nehraje hry (pro nevidomé žádné neexistují ), ale měl by o ně zájem. V systému Windows a v prohlížeči hojně používá klávesové zkratky. Braillův řádek připojený k PC používá pouze v případě, když potřebuje přesně vědět, jak se dané slovo píše nebo když nerozumí tomu, jak to přečte hlasový syntetizátor. Hlasový syntetizátor (JAWS) je jinak rychlejší a lepší než Braillův řádek. V JAWS se dá přepínat česká a anglická výslovnost. Je možné nastavit automatické přepínání, ale nepoužívá to - nefunguje to úplně dobře. Programy, které používají standardní Windows API jsou čitelné bez větších problémů. 4.2.3 Prohlížení webových stránek Jako vyhledávač používá Google, je podle něj nejlepší a dobře přístupný pro nevidomého. Záznam výsledků si upraví tak, aby zobrazoval 100 výsledků současně. Výsledky jsou zobrazené jako nadpisy, po kterých může dobře přecházet a číst si je (JAWS). Má zájem o ARIA tagy, které budou součástí standardu HTML5 - jsou to nové značky zlepšující přístupnost. Nepoužívá je prohlížeč, ale JAWS. Oblíbenou stránkou je divoch.cz (počasí), novinky.cz (dobrá přístupnost, proto preferuje i přes horší kvalitu) a centrum.cz (počasí). Při výběru stránky volí kompromis mezi kvalitou obsahu a přístupností. Nepoužívá žádné zvláštní nastavení prohlížeče, má zapnutý JavaScript a Flash (protože i tyto prvky, pokud jsou dobře přístupné, jsou pro něj použitelné). Čtečka nemá problémy se standardním HTML, u JavaScriptu není schopná přečíst některé prvky (nevzpomněl si, které to jsou). Má zakázané Active X prvky kvůli bezpečnosti (čtečce nedělají problémy) Nechce reklamu, přestože mu nezpůsobuje žádné větší komplikace. - 4 -
4.2.4 Čtení stránky Snaží se najít všechny nadpisy a prochází po nich (zjistí, jaké nadpisy jakých úrovní jsou na stránce, získá přehled o struktuře). JAWS mu čte jednotlivé nadpisy, u každého také řekne jeho úroveň (první, druhá, ). Projde odkazy a tlačítka (zjistí, že některé nemají atribut alt - například klikací reklamy), JAWS mu čte pouze to, že tam je tlačítko, neví popis. Může procházet různé prvky stránky (combobox, listboxy, ), přitom u některých mu čtečka neřekne popis (chybí atribut alt ), nemá žádnou možnost zjistit, co se stane když na to klikne. 4.3 Analýza a interpretace interview Data, která jsme získali z interview nám budou sloužit pro návrh jednotlivých změn webových stránek. Velmi důležité informace jsou především ty, které se týkají samotného prohlížení webových stránek. Ze zjištěných faktorů ovlivňují přístupnost webu jsme stanovili následující podmínky, ze kterých budeme vycházet při návrhu změn. 4.3.1 Struktura nového webu Vhodné rozvržení nadpisů a správné použití jednotlivých úrovní. Pro nevidomého je vhodnější, pokud stránka obsahuje více nadpisů. Přítomnost alternativních popisů u jednotlivých HTML prvků stránek jako jsou hypertextové odkazy, tlačítka, grafika, klikací mapy a další Správná struktura HTML tabulek (využití značek header, body, footer) Vhodné využití titulků na stránkách (při live ukázce čtení webu AVG nebylo zřejmé, zda přečtený text je titulek a uživatel ho považoval za hypertextový odkaz). Jako další zdroj informací bude sloužit web www.blindfriendly.cz. 4.3.2 Testování existujícího webu Pomocí JAWS čtečky, která se dá považovat za referenční nástroj (ostatní čtečky pracují podobně) Použití prohlížeče Internet Explorer 6 a vyšší, jelikož podpora čtečky JAWS je na velmi dobré úrovni Nespoléhat pouze na Braillův řádek, slouží především pro zjištění, jak se dané slovo přesně píše Zapnutý Javascript a Flash - 5 -
5 Deliverable 2 5.1 Storyboard - 6 -
5.2 HTA 5.3 Use cases a scénáře 5.3.1 Use case 1 Uživatel má problém s počítačem. Zdá se, že ho způsobuje virus. Použije systém ke zjištění, který produkt je pro vyřešení problému nejvhodnější a stáhne ho. V případě placeného produktu ho zakoupí. 5.3.2 Scénář 1 1. Popsat můj problém (HTA 2.1): Uživatel specifikuje problém, který má se svým počítačem. Problémy mohou být například následující: Počítač je infikován viry/malware Uživatel má problém s nevyžádanou poštou (spam) Problém se spyware (programy, které bez vědomí uživatele odesílají data z počítače). Uživateli je nabízeno co nejvíce možností k popsání jeho problému, které může kombinovat. 2. Zobrazit zajímavé produkty (HTA 2.2, 2.3.1): Na základě specifikace problému jsou uživateli nabídnuty odpovídající produkty. Každý produkt má specifické vlastnosti a funkce. Tyto parametry jsou také zobrazeny na seznamu. Uživatel si může stanovit cenový interval, do kterého musí nabízený produkt spadat. 3. Porovnat vlastnosti produktu (HTA 2.3.2): Uživatel si porovná vlastnosti zobrazených produktů v přehledné tabulce. Je zobrazeno co nejvíce detailů o produktech. - 7 -
4. Zvolit vyhovující produkt (HTA 2.3.2): Uživatel zvolí jeden z produktů, který nejvíce vyhovuje jeho požadavkům. Je to produkt, který si chce koupit (nebo zdarma stáhnout). 5. Výběr metody platby a platba (HTA plán 3): V případě, že si uživatel zvolil placený produkt, zvolí si jednu z nabízených metod platby. Zvolený systém platby (třetí strany) provede uživatele platbou. Po úspěšném zadání platby je uživateli nabízeno stažení instalačního souboru vybraného produktu. 6. Stáhnout instalační soubor (HTA 4): Uživateli je nabídnuta možnost stáhnout instalační soubor aplikace. Stažením souboru scénář končí. 5.3.3 Use case 2 Uživatel se už rozhodl pro konkrétní produkt (z TV reklamy, ) Chce si ho koupit. Na webové stránce co nejrychleji vyhledá možnost zakoupení (v případě placeného produktu) a/nebo stažení tohoto produktu. 5.3.4 Scénář 2 1. Zvolit vyhovující produkt (HTA 2.3.2): Bez zvolených filtrů systém nabízí všechny produkty. Uživatel si ze seznamu přímo vybere ten, o který má zájem. Scénář dále probíhá podobně jako v předchozím use case. Liší se tím, že vynechává volitelné kroky. 2. Výběr metody platby a platba (HTA plán 3): V případě, že si uživatel zvolil placený produkt, zvolí si jednu z nabízených metod platby. Zvolený systém platby (třetí strany) provede uživatele platbou. Po úspěšném zadání platby je uživateli nabízeno stažení instalačního souboru vybraného produktu. 3. Stáhnout instalační soubor (HTA 4): Uživateli je nabídnuta možnost stáhnout instalační soubor aplikace. Stažením souboru scénář končí. 6 Deliverable 3 6.4 Příprava prototypů a testů Pro testování s uživateli jsme zvolili testování s low fidelity prototypem. Jednotlivé web stránky jsou připraveny jako text, který přečte nevidomému čtečka JAWS. Navigace mezi stránkami bude řešena metodou Wizard of Oz. Tato navigace je připravena a popsána níže uvedenými schématy prototypů. Tato schémata zároveň slouží jako návod pro navigaci mezi stránkami, kterou provádí moderátor testu (Wizard of Oz). - 8 -
6.4.1 Scénáře Jsou připraveny 3 scénáře. Každý je určen primárně pro jednu variantu prototypu. Ale je možné je použít i při jiných variantách (záleží na časových možnostech testování). Jsou připraveny na míru příslušné variantě, abychom mohli vytěžit co nejvíce poznatků o příslušné variantě. Scénář 1 Zadání testu Váš počítač nepracuje správně. Je pomalý a do emailové schránky Vám denně přichází mnoho nevyžádané pošty. Na stránkách AVG je v nabídce mnoho produktů. Vyberte si ten, který bude pro Váš problém nejvhodnější a stáhněte ho. Počáteční stav Je zobrazena úvodní stránka (welcome page) varianty A. Koncový stav Uživatel stáhl instalační soubor produktu, který si vybral (Prototyp obsahuje pouze 2, nezáleží na tom, který si vybere). Na výběr produktu použil filtr na welcome page. Účel testu Zjistit, zda je filtr na welcome page srozumitelný a nápomocný při výběru produktu. Dálším cílem je vyzkoušet, zda následovné stránky s porovnáním produktů pomůžou uživateli s výběrem, nebo jsou zbytečné. Ideální průběh 1. Uživatel zaškrtne problémy, které s počítačem má a vybere volbu filter. 2. Na další stránce je seznam produktů, které vyhovují výběru. V seznamu si zaškrtne ty, které ho zaujaly a klikne na tlačítko compare. 3. Zde už vidí tabulku s detailním porovnáním vlastností produktů, o které projevil zájem. 4. Kliknutím na název produktu si může zobrazit jeho product page (bližší informace o tomto produktu. 5. Tlačítkem koupit nebo stáhnout buď na product page nebo v seznamu produktů se přesune na stránku payment nebo download page. 6. Úkol je splněn. Scénář 2 Zadání testu Zajímáte se o produkty společnosti AVG, kterých je na stránkách AVG hned několik. Chcete se o nich dozvědět více informací a jednotlivé produkty porovnat. Jeden z produktů si vyberte a stáhněte. Počáteční stav Je zobrazena úvodní stránka (welcome page) varianty B. Koncový stav - 9 -
Zajímáte se o produkty společnosti AVG, kterých je na stránkách AVG hned několik. Chcete se o nich dozvědět více informací a jednotlivé produkty porovnat. Jeden z produktů si vyberte a stáhněte. Účel testu Test má pomoci zjistit, zda je webová stránka obsahující porovnání jednotlivých produktů (comparsion chart) při výběru vhodného produktu užitečná a pro uživatele srozumitelná. Ideální průběh 1. Uživatel vybere v horním menu položku All products. 2. Na další stránce (comparation chart) se nachází tabulka obsahující seznam všech produktů společnosti a také jejich vlastností. Kliknutím na název produktu si může zobrazit jeho product page (bližší informace o tomto produktu). 3. Tlačítkem buy nebo download buď na product page nebo v seznamu produktů se přesune na stránku payment nebo download page. 4. Úkol je splněn. Scénář 3 Zadání testu Zajímáte se o produkty společnosti AVG, kterých je na stránkách AVG hned několik. Chcete se o nich dozvědět více informací a jednotlivé produkty porovnat. Jeden z produktů si vyberte a stáhněte. Počáteční stav Je zobrazena úvodní stránka (welcome page) varianty C. Koncový stav Uživatel stáhl instalační soubor produktu, který si vybral (Prototyp obsahuje pouze 2, nezáleží na tom, který si vybere). Účel testu Zjistit, zda uživatel je schopen zobrazit a porovnat vlastnosti jednotlivých produktů bez použití filtru a tabulky obsahující vlastnosti jednotlivých produktů. Ideální průběh 1. Uživatel na welcome page vybere položku Alll products. 2. Na další stránce je seznam všech produktů 3. Kliknutím na tlačítko detail zobrazí product page (bližší informace o tomto produktu) 4. Tlačítkem Get it na product page se přesune na stránku payment nebo download page(v případě, že se jedná o placený produkt) 5. Úkol je splněn. 6.4.2 Prototypy Pro testováni jsme vytvořili 3 varianty struktury a navigace stránek. Varianty se liší počtem kroků a způsobem výběru produktů. Účelem vytvoření více variant je zjistit, která z nich bude pro uživatele nejpoužitelnější. Je třeba vybrat vhodný kompromis mezi nabízenými - 10 -
možnostmi výběru a jednoduchostí řešení. Jednotlivé prototypy jsou vyhotoveny v elektronické podobě následujícím způsobem. Aby jsme mohli testovat s nevidomým, musíme mít hlasový výstup. Ideálně stejný (co se týče tempa a barvy hlasu) na jaký je uživatel zvyklý při surfování na webu. Proto jsme se rozhodli vytvořit prototypy jako webové stránky, které dokáže prohlížeč otevřít a čtečka JAWS přečíst. Nejsou to ale skutečné HTML stránky. Jedná se pouze o části textu uzavřených do tagů <p>. Tím dosáhneme toho, že uživatel dostává hlasový výstup stejný jako při prohlížení webu a zároveň nám to umožňuje testovat strukturu stránek a navigaci mezi nimi bez toho, aby jsme museli řešit problémy optimalizace HTML pro čtení pomocí JAWS. VARIANTA A Tato varianta zahrnuje největší množství kroků. Umožňuje uživateli filtrovat produkty (Web page 1) na základě problému, který chce novým produktem od AVG vyřešit. Vyhovující produkty nabídne uživateli (Web page 2). Dále pak umožňuje porovnat vlastnosti jednotlivých produktů v přehledné tabulce (Web page 4) a zobrazit detaily produktu (Web page 3). Další 2 stránky řeší platbu a stažení produktu. Obr. 1 Struktura a navigace stránek prototypu varianty A - 11 -
VARIANTA B Druhá varianta zjednodušuje výběr vhodného produktu tím, že není přítomen žádný filtr produktů. Uživatel si zobrazí tabulku se všemi produkty a jejich vlastnostmi (Web page 4). Stále má možnost zobrazit detaily o kterémkoli produktu (Web page 3). V případě velkého množství produktů by mohla být tabulka nepřehledná. Je potřeba zjistit, zda to uživateli nebude vadit a nebude preferovat variantu s filtrem. Obr. 2 Struktura a navigace stránek prototypu varianty B VARIANTA C Poslední varianta zobrazuje podobně jako předchozí seznam všech produktů (Web page 2). S tím rozdílem, že nevypisuje vlastnosti produktů. Vlastnosti si musí zobrazit na stránce detailu konkrétního produktu (Web page 3). Seznam je tím přehlednější, ale za cenu menšího množství informací. - 12 -
Obr. 3 Struktura a navigace stránek prototypu varianty C 6.5 Testování 6.5.1 Příprava testu Test se odehrává v pokud možno tiché místnosti s dobrým osvětlením, ovšem ne na přímém slunci. Participant sedí u stolu, vedle něj sedí moderátor a provází participanta průběhem testu. Prototypy a scénáře se zadáním úkolů jsou vyhotoveny a vytištěny. Před testováním je potřeba připravit následující: 1. Musíme na počítač participanta přenést prototypy webových stránek. Jsou připraveny na flash disku. 2. Moderátor testu (Wizard of Oz) musí mít k dispozici schémata jednotlivých variant, aby mohl podle nich řídit test. (Vybrat právě testovanou variantu) 3. Nastaven diktafon a připraven ke spuštění. 4. Participant poučen o nahrávání testu a anonymitě. Je požádán, aby využíval Think aloud protocol (přemýšlení nahlas). - 13 -
5. Testujeme aplikaci, ne Vás. 6.5.2 Průběh testů Testování probíhalo postupně se 2 participanty. Každý byl vykonán v jiných podmínkách, následuje popis každého testu samostatně. Testy byly nahrávány na diktafon a pořízený záznam je přiložen k dokumentu. Test 1 - participant P5 U tohoto participanta jsme testovali všechny 3 scenáře a tím jsme pokryly všechny varianty prototypů. Test probíhal tak, že jsme webové stránky předčítali a participant dával pokyny, jak chce se stránkou interagovat. Později se ukázalo, že oproti čtení pomocí JAWS to mělo určitou výhodu. Participantovi bylo jasné, že se jedná o nefunkční prototyp a nesnažil se ho použít jako skutečnou webovou stránku (viz. druhý participant). Test 2 - participant P1 Tento participant použil pro čtení prototypů vlastní počítač a čtečku JAWS. Testovány byly pouze první 2 scénáře. Třetí scénář byl vypuštěn, protože by jsme nezjistili další poznatky. Participant totiž vykonal poslední scénář v rámci průchodu prvních dvou scénářů. Tento participant měl hodně negativní předešlé zkušenosti s produkty AVG. 6.5.3 Vyhodnocení testů Findings Jednotlivé findings se vztahují k jednotlivým scénářům. Každý obsahuje prioritu, popis příčiny vzniku a také návrh na řešení. Význam priorit: 1. Nízká priorita 2. Střední priorita 3. Vysoká priorita (nejzávažnější problém) Finding 1 (priorita 3): Platí pro variantu A: Na stránce welcome page ani jeden z participantů nenašel filtr produktů. Poté, co mu JAWS přečetl odkaz na produkty, participant rovnou klikal na tento odkaz. Suggestions: Jsou zde 3 možnosti: - přesunout filtr produktů z hlediska struktury stránky před hlavní menu - filtr produktů zcela vynechat - přesunout filtr na samostatnou stránku a poskytnout odkaz v hlavním menu Finding 2 (priorita 2)Ve variantě C chybí stránka s porovnáním produktů (Comparison chart) a uživatel si tedy musí u jednotlivých produktů zobrazit detail a poté se (pokud chce přejít na další produkt) vrátit zpět na výpis všech. To se ukázalo jako ne zcela vhodné, protože pokud si chce uživatel porovnat více produktů, je to velmi zdlouhavé. Navíc tímto způsobem nemůže vlastnosti jednoduše porovnat, protože je nemá zobrazené současně vedle sebe na jedné stránce. - 14 -
Suggestions: Do výsledné struktury webu zahrnout stránku tabulkou obsahující produkty a jejich vlastnosti (stránka Comparison chart) Finding 3 (priorita 2) Platí pro variantu C: Seznam produktů bez možnosti stažení je úplně nevhodná varianta, protože uživatel musí zobrazit detail produktu, i když se už rozhodl a chce si produkt pouze stáhnout. Suggestions: Ke každému produktu v seznamu přidat tlačítko pro stažení, v případě placeného produktu tlačítko pro zakoupení. 6.5.4 Závěr testování Průběh testů ukázal směr dalšího vývoje. Navržené varianty A a B jsou vhodné pro další vývoj. Varianta C postrádá porovnání produktů, což je klíčová funkce pro výběr produktu při koupě. Ideální by bylo upravit variantu B tak, aby obsahovala filtr, který je teď na welcome page varianty A. Ten musí být jednoduše dostupný a nalezitelný. Zároveň nebude vyfiltrované produkty zobrazovat na stránce product list, ale přímo v tabulce comparison chart. Tím zkombinujeme nejlepší vlastnosti obou variant. Tento návrh zachycuje schéma na obr.4. Případné další testovaní bude muset probíhat buď formou jako u participanta A předčítání prototypu), nebo s plnou HTML implementací. Ukázalo se, že prototyp s falešným HTML je velmi dobrá cesta k testování struktury a navigace mezi stránkami. Ale když participant zjistí, že nemůže stránky používat jako normální HTML (případ druhého participanta), je zbytečně zmaten a nesoustředí se na cíle testu. Příloha obsahuje zvukový záznam průběhu testování s uživatelem a elektronické verze prototypů. - 15 -
Obr. 4 Finální návrh struktury a navigace stránek - 16 -