[AVG-WEB] Zpřístupnění korporátního webu Semestrální práce z předmětu A4M39NUR

Transkript

1 [AVG-WEB] Zpřístupnění korporátního webu Semestrální práce z předmětu A4M39NUR 1 Zadání balikpav@fel.cvut.cz, louckra1@fel.cvut.cz Semestrální projekt se bude zabývat testováním korporátních internetových stránek společnosti AVG a na základě tohoto testování bychom měli případně doporučit změny designu těchto internetový stránek. Se zadavatelem této úlohy bylo dohodnuto, že bude otestováno pouze několik nejdůležitějších průchodů, nikoliv celý web společnosti AVG. 2 Úvod Problematika přístupu zrakově postižených k obsahu prezentovaném na interentu je velmi rozsáhlá. Existují mnoho metodik přístupnosti, které vedou k vytvoření webových stránek vhodných pro lidi se zrakovým hendikepem (např. WCAG 2.0). Ovšem tyto metodiky nabízí pouze technický pohled na věc. Přístupnost je dána i aspekty jako míra zrakového postižení uživatele, zkušenosti s prací na webových stránkách a zkušenosti s prací s asistivní technologií a její typ. 3 Popis cílové skupiny Cílovou skupinou, na kterou je test zaměřen, jsou lidé bez rozdílu věku. Zrakové postižení podle WHO se klasifikuje jako: kategorie 1: střední slabozrakost kategorie 2: silná slabozrakost kategorie 3: těžce slabý zrak kategorie 4: praktická slepota kategorie 5: úplná slepota Test se zaměřuje uživatele, na kteří mají zrakový hendikep klasifikován jako praktická nebo úplná slepota, tedy k navigaci na internetu se nemohou spoléhat na zrakový vjem. Druhým faktorem je zkušenost s používáním počítače a zkušenost s asistivními technologiemi pro nevidomé jako hlasový výstup (čtečky obrazovky) nebo hmatový výstup (speciální hmatový zobrazovač řádku obrazovky ve slepeckém písmu). Naším cílem budou uživatelé, kteří pracují s počítačem na úrovni zkušeného uživatele (vytváření dokumentů, instalace programů ) i asistivními technologiemi, protože není cílem otestovat tyto vlastnosti. 3.1 Screener (veřejní část) 1) Do jaké kategorie se dá zařadit váš hendikep? a. střední slabozrakost 1 z 25

2 b. silná slabozrakost c. těžce slabý zrak d. praktická slepota e. úplná slepota f. jiné 2) Pracujete s počítačem? a. ano, denně b. ano, vícekrát týdně c. ano, jednou týdně a méně d. ne 3) Jaké činnosti provádíte na počítači? (lze vybrat více odpovědí) a. čtení a vytváření dokumentů b. prohlížení webových stránek c. administrace počítače (instalace programů...) d. práce s multimediálním obsahem (videa, hudba ) e. jiné 4) Máte zkušenosti s asistivními technologiemi jako je hlasový výstup (čtečky obrazovky) nebo hmatový výstup (speciální hmatový zobrazovač řádku obrazovky ve slepeckém písmu)? a. Ano, mám zkušenosti jak s hlasovým, tak s hmatovým výstupem b. Ano, pouze s hlasovým výstupem c. Ano, pouze s hmatovým výstupem d. Ne, nikdy jsem ho nepoužil 3.2 Screener (neveřejní část) Screener slouží pro výběr vhodných uživatelů. Do kategorie vhodného uživatele námi definované cílové skupiny spadají nasledující odpovědi na dotazník: 1) Definovali jsme požadavek na uživatele s praktickou nebo úplnou slepotou, to odpovídá odpovědím e a f. 2) Vyhovujícími odpověďmi jsou možnosti a a b, které zajišťují požadovanou zkušenost s prací na počítači. 3) U této otázky zpřesníme uživatelovu úroveň s prací na počítači. Vyhovuje nám odpověď kombinace odpovědí b a c (vybrané zároveň). Říká nám to, že uživatel je pokročilejším uživatelem a zároveň mu nebude dělat problémy se pohybovat na interentu. 4) Vyhovují nám odpovědi a,b,c. Uživatel bude schopen pracovat s interpretovaným textem webové stránky. 2 z 25

3 4 Interview 4.1 Příprava interview Před samotným testováním bylo potřeba provést interview s představiteli naší cílové skupiny vybranými pomocí screeneru. Uživatel bude mít k dispozici přenosný počítač s připojením k internetu. Cílem interview je zjistit činnosti, ke kterým uživatel používá počítač a zkušenosti s používání počítače s jeho hendikepem. Jaké konkrétní zkušenosti má s používáním asistivních technologií. Jaké webové stránky navštěvuje a s jakými problémy se setkává při jejich prohlížení. Co mu zjednodušuje prohlížení webových stránek. 4.2 Okruhy otázek interview Zkušenosti s počítačem a jeho softwarové vybavení o o o o Na jaké činnosti používáte PC? Jak jste se naučil(a) používat PC? Jak si instalujete software? Při jakých činnostech na PC potřebujete pomoc cizí osoby? Zkušenosti s pomůckami pro nevidomé o Používáte nějaký speciální HW/SW? (JAWS, Braillův řádek, ) o Jakou používáte čtečku obrazovky? o Používáte i nějaké jiné asistivní technologie? Prohlížení webových stránek a problémy při jejich prohlížení o Jaký používáte internetový prohlížeč? o Jakým činnostem se věnujete na webu? o S jakými problémy se nejčastěji setkáváte při prohlížení webových stránek? o Můžete nám popsat proces prohlížení webové stránky? o Používáte ve svém webovém prohlížeči nějaká omezující nastavení? o Máte nějaké oblíbené stránky, které jsou pro vás dobře přístupné? o Jak vnímáte reklamní bannery na webu? Zkušenosti s produkty/stránkami společnosti AVG o Navštívil jste někdy stránky společnosti AVG? Případně jaké je vaše zkušenost s nimi? o Používáte nějaký produkt od této společnosti? o Jak jste se k němu dostal? 3 z 25

4 4.3 Shrnutí Rozhovor s představitelem naší cílové skupiny nám poskytl mnoho užitečných informaci. Zmíníme zde několik zásadních bodů, které budou hrát důležitou roli v dalším průběhu našeho semestrálního projektu: Uživatel používá počítač denně a to i několik hodin, pro čtení, vzdělávání se, programování a také prohlížení webových stránek S instalací si poradí většinou sám, pokud cítí, že to nedokáže, zavolá kamaráda Používá webový browser Internet Explorer, čtečku obrazovky JAWS a dokáže používat také písmenkový řádek ale více používá čtečku obrazovky Nejčastějšími problémy, se kterými se při prohlížení stránek setkává, jsou: o o o o o Javascript čtečka má někdy problém ho správně přečíst Absence alternativních popisků například u obrázků Nesprávné používání elementu h tedy nadpisů Problém dělají také Rich Internet Applications a AJAX Flashové reklamy, které se někdy jako tlačítka, na které lze kliknout Na webových stránkách se pohybuje tak, že si nejdříve nechá přečíst všechny nadpisy, poté odkazy a tímto způsobem získá představu o struktuře stránky V prohlížeči má vypnuté ActiveX prvky a to z důvodu bezpečnosti a neuvažuje o vypnutí flashe ani javascriptu Stránky společnosti AVG navštívil, když si stahoval free verzi jejich produktu 5 Analýza a interpretace získaných dat 5.1 Shrnutí získaných znalostí Na základě těchto odpovědí tedy můžeme stanovit nějaké základní schéma prohlížení webových stránek nevidomými lidmi. Získali jsme představu o tom, jak se tito lidé v prostředí internetu pohybují a co jim činí největší potíže. Ve zbytku času, který jsme měli na interview vyhrazený, s námi uživatel také zrychleně prošel hlavní stránku webu AVG ( a narazil při tom na několik problémů. Ty budou ovšem zmíněny až v další části věnované testování. Jelikož nebudeme moct webové stránky testovat přímo s nevidomými uživateli, získali jsme na základě interwiev představu o tom, jak nevidomí s počítačem pracují a ovládají ho. Při testování je potřeba se zaměřit hlavně na správné používání nadpisů, jejich úrovní (dodržení metodik přístupnosti) a zkontrolovat, zda některé reklamy a flashové prvky nematou čtečku obrazovky a následně také uživatele. Dále je potřeba otestovat, zda jsou všechny prvky dostupné a čtečka na ně upozorní. Hlavním zdrojem bude sloužit webová stránka 4 z 25

5 5.2 Popis problému a požadavky uživatelů Pokud někdo zavítá na stránku společnosti AVG, bude jistě hledat nějaké informace o nabízených produktech. Druhou základní informací, kterou bude uživatel hledat je možnost zakoupení nějakého produktu. Naše testování by se tedy mělo zaměřit právě na tyto dva problémy. Jelikož k testování již nebudeme moci využít nevidomých uživatelů, budeme nuceni si nasimulovat podmínky, které nám přiblíží jejich práci s počítačem a webovými stránkami. Právě díky interview, které jsme v této části provedli, jsme získali představu o tom, jak jejich práce vypadá. 5 z 25

6 6 Use-cases, scénáře 6.1 Use-case 1 - Stáhnutí zkušební verze AVG Antiviru Uživatel zjistil, že jeho počítač se poslední dobou velmi zpomaluje. Pro vyřešení problému využije možnosti si stáhnout zkušební verzi antivirového programu. Scénář: Na internetových stránkách AVG (avg.com) si stáhněte zkušební verzi AVG Antivirus. 1) Přejděte na webové stránky společnosti AVG 2) Zobrazte si nabízené produkty uživatel přejde na stránku, nabízených produktů 3) Vyber produkt podle uživatel si vybere produkt podle vlastního kritéria, tedy problému, pro který si produkt potřebuje stáhnout (projevy počítače zpomalení, vyskakování oken ). 4) Přidejte do košíku produkt AVG Antivirus HTA: Udělej 1, 2, 2.1. Pokud je to potřeba, udělej 2.2. Udělej Use-case 2 Stažení plné verze antivirového programu AVG Uživatel je spokojen s neplacenou verzí antivirového programu a chce si stáhnou plnou verzi pro preventivní ochranu počítače. Scénář: Na internetových stránkách AVG (avg.com) si zakupte produkt AVG Antivirus. 1) Přejděte na webové stránky společnosti AVG 2) Zobrazte si nabízené produkty uživatel přejde na stránku, nabízených produktů 3) Vyber produkt podle uživatel si vybere produkt podle vlastního kritéria, tedy problému, pro který si produkt potřebuje stáhnout (projevy počítače zpomalení, vyskakování oken ). 4) Přidejte do košíku produkt AVG Antivirus 5) Zaplaťte 6) Stáhněte si produkt HTA: Udělej 1, 2, 2.1. Pokud je to potřeba, udělej 2.2. Udělej 2.4, 3, 3.1 a 4. 6 z 25

7 6.3 Use-case 3 Vytvoření nového tématu na diskuzním fóru zákaznické podpory Uživatel se potýká s určitým druhem útoku na svůj počítač. Neví si rady, jak má dál postupovat. Navštíví tedy diskuzní fórum na stránkách AVG, aby požádal o radu. Scénář: Vytvořte nové téma na diskusním fóru zákaznické podpory AVG. 1) Přejděte na webové stránky společnosti AVG 2) Přejděte do sekce zákaznické podpory 3) Vstupte do diskusního fóra 4) Vytvořte nové téma HTA: Udělej 1, 2, 3, 3.1, 3.1.3, 3.2, 3.3, Use-case 4 - Napsání u na zákaznickou podporu Uživatel se potýká s určitým druhem útoku na svůj počítač. Neví si rady, jak má dál postupovat. Chce konzultovat problém individuálně a tak využije možnost zaslat na zákaznickou podporu. Scénář: Napsat na zákaznickou podporu AVG. 1) Přejděte na webové stránky společnosti AVG 2) Přejděte na webové stránky společnosti AVG 3) Přejděte do sekce zákaznické podpory 4) Pošlete dotaz pomocí formuláře 7 z 25

8 HTA: Udělej 1, 2, 3, 3.1, 3.1.2, 3.2, 4. 7 Sketch 8 z 25

9 8 Storyboard 9 z 25

10 9 Tvorba prototypu Součástí našeho zadání pro tuto část je odhalit problémová místa současných webových stránek a navrhnout řešení jejich problematických částí. K otestování našich návrhů na zlepšení přístupnosti internetových stránek společnosti AVG, jsme se rozhodli použít elektronické prototypy, které pokryjí námi nalezená problémová místa a umožní nám otestovat naše navrhované řešení. Protypy jsou vytvořené jako jednoduché webové stránky. Uživatel prochází standardní webové stránky a nejdřív se pokouší splnit úkol na těchto stránkách. Po dokončení úkolu nahradíme původní stránky našimi prototypy a požádáme ho o to samé. V post-testovém rozhovoru se zeptáme na to, se kterou verzí se mu pracovalo lépe. 9.1 Zjištěné problémy a jejich řešení v prototypu Když jsme si stránky procházeli čtečkou, narazili jsme na některé prvky, které mohou nevidomým působit potíže. Prvním úskalím je hned hlavní stránka a na ní řešení menu. Toto menu je uděláno pomocí javascriptu, to dělá čtečce potíže a takové menu nedokáže přečíst. Vidí pouze první úroveň jako je domácnost, podniky, podpora Kvůli obsáhlosti vyskakovacího menu jsme usoudili, že přepis do podoby pro nevidomé není možný. A jelikož existuje i tak cesta, i když delší (přes odkaz na domácnosti nebo přes mapu stránek), k dosažení cíle, tak tuto strukturu ponecháme. Obr. 1 Obrázek ukazující problémové rozbalovací menu Dalším problémem je tabulka používaná pro porovnání a stažení jednotlivých produktů. Tuto část průchodu naším scénářem jsme označili za nejvíce problematickou, a proto jsme se rozhodli na ní navrhnout naše vlastní řešení. Problém v původní tabulce byl s tím, že některé buňky byly prázdné a čtečka je tudíž přeskakovala, takže nevidomý byl poté zmatený, kde se v tabulce právě nachází a k jakému sloupci daná informace v tabulce náleží. Náš prototyp doplňuje prázdné buňky v tabulce obrázky a alternativní popisky ke každé buňce (zda-li je daná vlastnost u daného produktu přítomna). Také jsme přidali alternativní popisy a podrobnější popisky tlačítek pro stažení souboru. 10 z 25

11 V původních stránkách totiž byla všechna tlačítka označena popiskem "stáhnout", což působilo problémy při rozeznání, co si uživatel vlastně stahuje. Oba tyto problémy jsou zobrazeny na obrázku níže. Obr. 2 Obrázek problémové tabulky Obr. 3 Obrázek prototypu, kterým jsme nahradili původní tabulku 11 z 25

12 Obrázky obsahují alternativní popis se jmény jednotlivých produktů a dostupností nabízených služeb. Dalším problémem, na který jsme narazili je horší orientace v nákupním košíku. Momentálně jsou všechny položky v nákupním košíku uložené v tabulce, a když ji uživatel prochází, tak si musí pamatovat informace o tom, na kterém řádku a ve kterém sloupci se právě nachází. Tomu by se dalo předejít například tím, že by se jednotlivé atributy zapisovaly do sloupců, tak jak je to na obrázku našeho prototypu níže. Uživatel by si tedy vždy vyslechl dvě věci, které k sobě patří, hned za sebou. Obr. 4 Obrázek nákupního košíku současná verze Obr. 5 Prototyp našeho návrhu nákupního košíku 12 z 25

13 Předposledním problém, se kterým jsme se při našem průchodu setkali, se objevil při pokusu o vytvoření nového tématu na fóru zákaznické podpory. Uživateli se objeví vcelku jednoduchý formulář se dvěma textovými poli. Bohužel druhé textové pole nemá absolutně žádný label, takže ho čtečka přečte jako neoznačené a uživatel nemá ponětí o tom, co má do pole zadat. Další problém je se zaškrtávacím políčkem, které také není nijak označeno pro čtečku. Náš prototyp tato označení přidává. Obr. 6 Současný formulář sloužící pro vytvoření nového tématu Obr. 7 Prototyp vytvoření nového tématu 13 z 25

14 Poslední problém, na který jsme narazili, je s posláním u na zákaznickou podporu. Jedná se o jeden z největších problémů pro čtečky obrazovek, kdy se náhle objeví vyskakující okno, o kterém uživatel nemá ani potuchy, protože ho čtečka vůbec nezaregistruje. Přesně takové okno se objeví, pokud uživatel zvolí možnost . Vzhledem k nedostatku času, který budeme na provedení testu našich prototypů mít k dispozici, jsme se rozhodli tuto možnost zatím neprezentovat, protože vyžaduje další rozmyšlení toho, jak tuto situaci vyřešit. 10 Evaluace 10.1 Nastavení testu Nastavení testu je pro oba dva participanty totožné. Test probíhal v prostorné místnosti. Participant byl posazen bokem pozorovatelům. Toto rozmístění bylo zvoleno z důvodu potřeby sledovat co se děje na monitoru testovaného. Participant měl k dispozici notebook s klasickým rozložením klávesnice i s numerickou klávesnicí. Na daném počítači byl nainstalován operační systém Windows 7, Internet Explorer 9 a čtečka obrazovky JAWS 13 demo (anglický jazyk). V prohlížecí byla zobrazena úvodní stránka webu AVG ( která byla výchozí pro každá scénář. Zároveň ve druhém panelu byla otevřená struktura námi upravených stránek. Vzhledem k časovým možnostem jsme se rozhodli s každým participantem provést právě 3 usecasy Scénáře 1) Uživatel zjistil, že jeho počítač se poslední dobou velmi zpomaluje. Pro vyřešení problému využije možnosti si stáhnout zkušební verzi antivirového programu. Scénář: Na internetových stránkách AVG (avg.com) si stáhněte zkušební verzi AVG Antivirus. 2) Uživatel je spokojen s neplacenou verzí antivirového programu a chce si stáhnou plnou verzi pro preventivní ochranu počítače. Scénář: Na internetových stránkách AVG (avg.com) si zakupte produkt AVG Antivirus. 3) Uživatel se potýká s určitým druhem útoku na svůj počítač. Neví si rady, jak má dál postupovat. Navštíví tedy diskuzní fórum na stránkách AVG, aby požádal o radu. Scénář: Vytvořte nové téma na diskusním fóru zákaznické podpory AVG. 4) Uživatel se potýká s určitým druhem útoku na svůj počítač. Neví si rady, jak má dál postupovat. Chce konzultovat problém individuálně a tak využije možnost zaslat na zákaznickou podporu První participant První participant je zvyklý pracovat se čtečkou Window-eyes. I přesto mu nedělá problémy pracovat se čtečkou JAWS, ovšem nezná zkratky a tak webové stránky prochází pomocí tabulátorů a šipek. Scénář 1 stažení produktu AVG FREE - Participant se snadno dostává z hlavní stránky na stránku produktu AVG Free. Přítomnost pro něj skrytého menu mu nevadí. 14 z 25

15 - Postupuje od stránky shora dolů pomocí klávesy TAB, až se dostane na tlačítko s nápisem Stáhnout AVG Free. Ovšem netuší, jaké tlačítko patří k danému produktu, který chce stáhnout (jsou tam 3) ani nedokáže poznat, jaká informace patří k jakému produktu. Poté se po nápovědě dostává ke správnému. - V tomto bodě nastává problém se stáhnutím daného souboru, je totiž přesměrován na stránku, kde vyskočí okno Internet Exploreru pro stažení souboru. Na toto okno se nemůže dostat. Při průchodu naším prototypem již dokáže rozeznat, jaký soubor stahuje. Jinak prochází stránky bez problémů, až opět na přístup k vyskakovacímu oknu. To je ovšem problém Internet Exploreru a není součastí tohoto testování. Scénář 2 zakoupení produktu AVG Anti-virus Participant se dostává z hlavní stránky na stránku produktu AVG Anti-virus Přidává si produkt do košíku, do kterého je hned přesměrován - Kliká na tlačítko pokračovat a dostává se k formuláři s kontaktními údaji a platbou - Scénáře úspěšně dokončil Průchod díky používání tabulátorů mu nedělal žádný problém. Scénář 3 vytvoření nového tématu na fóru AVG - Participant z vrchní lišty správně vybírá odkaz Podpora - Teď má na výběr z možností Podpora pro domácnost nebo Podpora pro aplikaci AVG Free a neví, kterou vybrat - Zkouší tedy nejdříve Podpora pro domácnost, a když nemůže odkaz na fórum najít, tak přechází do Podpory pro aplikaci AVG Free - Navštěvuje AVG Fórum - Vybírá tlačítko Nové téma - Zadává poskytnuté přihlašovací údaje - Snaží se vyplnit formulářová pole, ale je zmatený, protože neví, co má vyplnit do druhého textového pole, protože není popsané - Neví ani co znamená následující zaškrtnutý checkbox - Poté ovšem odesílá zprávu a ta se úspěšně odešle na fórum a scénář úspěšně dokončil Po nahrazení původního formuláře naším prototypem uživatel konečně zjistil, co jednotlivá pole znamenají a neshledává na něm žádné další nedostatky. 15 z 25

16 Druhý participant Druhý participant je zvyklý pracovat se čtečkou JAWS, zná zkratky a i s nimi pracuje. Scénář 1 stažení produktu AVG FREE - Participant se snadno dostává z hlavní stránky na stránku produktu AVG Free. Po zobrazení veškerých odkazů, čtečka nevidí menu, ale ani tomuto paticipantovi to nevadí. - Nejprve prochází pomocí tabulátorů. Nedokáže rozlišit, jaké informace patří k danému produktu. Zobrazuje si odkazy, ale zobrazí se mu třikrát stáhnout tedy netuší, co má stáhnout. Až po přepnutí se do tabulkového režimu se dostává ke správnému odkazu. - S vyskakovacím oknem problémy nemá a úspěšně stahuje soubor. Při průchodu naším prototypem rozeznává vlastnosti produktu i bez přepnutí do tabulkového režimu. Scénář 2 zakoupení produktu AVG Anti-virus Participant se dostává z hlavní stránky na stránku produktu AVG Anti-virus Přidává si produkt do košíku, do kterého je hned přesměrován - Kliká na tlačítko pokračovat a dostává se k formuláři s kontaktními údaji a platbou. Zde vyžívá zobrazení formulářových polí. U typu zákazníka netuší jaký radio button vybrat, nejsou pojmenovány a tak se mu zobrazují všechny stejně. Jiná pole jsou v pořádku. - Scénář úspěšně dokončil U průchodu prototypu opět naráží na nepojmenované radio button. Lepé rozeznává, k čemu jaká položka v košíku patří, nemusí si pamatovat pořadí buněk. Scénář 3 vytvoření nového tématu na fóru AVG - Participant opět vybírá odkaz Podpora - Vybírá nabídku Podpora pro aplikaci AVG Free - Navštěvuje AVG Fórum - Nechává si přečíst jednotlivé odkazy a nakonec vybírá Nové téma - Bez problémů zadává poskytnuté přihlašovací údaje - Má stejný problém jako předchozí participant, protože opět netuší, co má napsat do druhého textového pole a s čím souhlasí zaškrtnutím checkboxu - Poté zvládá odeslat zprávu a úspěšně dokončuje scénář 16 z 25

17 10.2 Závěr low-fidelity testování V průběhu testu se nám potvrdilo, že naše podezření na některá problematická místa, které jsme označili při našem průchodu webovými stránkami, se opravdu potvrdila. Oba participaci byli spokojeni s prezentovanými návrhy na vylepšení designu a shledávali je pro ně lépe použitelné, než původní verze stránek. Ovšem objevili jsme také některé další nedostatky, které nebyly zahrnuty v našem prototypu. Takovýmito překážkami byly vyskakovací okno pro stažení souboru AVG antiviru zdarma, schopnost rozlišit radio button u formuláře pro koupi AVG Anti-virus 2012 a vyskakovací okno při pokusu o ovou podporu. Tyto problémy budou dále zahrnuty do návrhu. 17 z 25

18 11 High-fidelity prototyp Při tvorbě high-fidelity prototypu jsme vycházeli z předchozího low-fidelity prototypu (viz kap. 3). Vzhledem k odstranění většiny námi zjištěných nedostatků ve fázi low-fidelity prototypu, jsme se zaměřili na vyřešení problémů, které se objevily při předchozím testování. Upravili jsme tedy stávající prototyp. High-prototyp řeší odstranění problémů s vyskakovacím oknem při koupi AVG Anti-virus 2012 a s ovou podporou Stavový diagram Stavový diagram zachycuje zjednodušeně možné přechody mezi stránkami. Struktura stránek je téměř zachována. Neshledali jsme potřebné tuto strukturu měnit vzhledem k rozsáhlosti stávajících stránek a logickému uspořádání produktů. Jediným problémem pro nevidomé, jak už jsme zmiňovali v předchozí fázi testování, je javascriptové menu, které vidomému uživateli umožňuje rychlejší přechod k hledanému produktu či službě. Nabízelo by se toto menu přepsat do klasické html podoby, ale kvůli přehlednosti jsme zachovali stávající menu, přes které se i tak nevidomý dostane k cíli. Jediným zásadním zásahem do struktury jsou přidané stránky pro získání ové podpory nahrazující stávající vyskakovací okno, které je pro čtečku neviditelné. Obr. 8 Stavový diagram high-fidelity prototypu 11.2 Řešení problému z low-fidelity prototypu Jak už bylo zmíněno výše, vycházeli jsme z low-fidelity protypu, proto základní popis prototypu je uveden v kapitole 9.1. Zde popišeme pouze provedené změny pro vyřešení odhalených problémů. Prvním úskalím, které jsme odhalili v předchozím testování, bylo vyskakovací okno pro uložení souboru s produktem AVG FREE. Tento problém se nám nepodařilo vyřešit vzhledem k tomu, že 18 z 25

19 uložení souboru se řeší na úrovni prohlížeče. Zkusili jsme sami otestovat tuto záležitost i v jiných prohlížecích (Mozilla Firefox, Opera). U nich jsme nenarazili na stejný problém, protože jejich vyskakovací okno pro uložení souboru je snadno a samostatně dostupné pomocí klávesy TAB. Druhým úkolem pro řešení bylo vyskakovací okno pro získání ové podpory. Toto okno je v stávajících stránkách vytvořené javascriptem a čtečka ho nevidí. Nahradili jsme toto okno HTML stránkami. Obr. 10 Řešení ové podpory 19 z 25

20 Obr. 11 Řešení ové podpory Posledním problémem, který jsme objevili, je radio button, u kterého čtečka v režimu zobrazení vybraných prvků nerozliší jednotlivé volby. Tato chyba se nachází na stránce stažení placené verze AVG antiviru. Zároveň zde chybí popisné tagy typu label. Radio button jsme vyřešili náhradou za prvku za prvek select, u kterého už čtečka jednotlivé volby rozliší. Zároveň jsme doplnili potřebné labely. Obr. 12 Stažení placené verze AVG antiviru 20 z 25

21 11.3 Evaluace Nastavení testu Oba participaci mají shodné počáteční nastavení testu. Testování probíhalo ve stejné místnosti jako testování s low-fidelity prototypem. Situační schéma nastavení je zachyceno na obrázku číslo 9. Žádný s participantů si nepřinesl vlastní notebook, takže k dispozici byl náš notebook s operačním systémem Windows 7, Internet Explorer 9 a čtečka obrazovka JAWS 13. Čtečka měla nastavený český jazyk. V internetovém prohlížeči byla nastavena stránka našeho prototypu index.html. Z časových důvodů jsme si pro každého participanta připravili 3 scénáře, které jsme chtěli projít. Toto se ukázalo jako dobré rozhodnutí, protože zbyl ještě dostatek času na post-testové otázky, které jsme participantům pokládali Scénáře 1) Uživatel pociťuje zpomalení svého počítače a jeho netypické chování. Dozví se, že toho chování mohou způsobovat počítačové viry, a tak se rozhodne stáhnout antivirový program. Protože ho chce nejdříve vyzkoušet, volí zkušební verzi, která je k dispozici zdarma. Scénář: Na internetových stránkách AVG (avg.com) si stáhněte AVG Antivirus FREE. 2) Uživatel je spokojen s neplacenou verzí AVG Antivirus FREE, ale chtěl by od svého antivirového programu větší ochranu při surfování na internetu i mimo něj, a proto se rozhodne zakoupit plnou verzi AVG Antivirus Scénář: Na internetových stránkách AVG (avg.com) zakupte produkt AVG Antivirus ) Uživatel se potýká s nastavením samotného antivirového programu, a proto se rozhodne em kontaktovat zákaznickou podporu. Scénář: Z internetových stránek AVG (avg.com) odešlete dotaz na technickou podporu První participant P1 Obr. 13 Nastavení testu Participant P1 je muž, pokročilý v oblasti informačních technologií. Zvládá používat několik druhů čteček obrazovky jeho nejoblíbenější je Window-eyes, ale zná velice dobře také JAWS. Na 21 z 25

22 internetu běžně čte zprávy na zpravodajských serverech a má s pohybem na internetu zkušenosti. Rozhodně tedy lze zařadit do pokročilých uživatelů. Scénář 1 stažení produktu AVG Antivirus FREE - Participant se nachází na stránce index.html našeho prototypu - P1 při hledání nevyužívá nabídky menu Pro domácnost, ale hledá přímo odkaz pojmenovaný AVG Antivirus Free. - Odkaz se mu podaří rychle najít a pokračuje na další stránku, na které se již nachází odkaz na stažení - Prochází námi upravenou tabulku, ve které není spokojen s alternativním popisem obrázku není k dispozici v porovnání produktů - Poté již nachází odkaz na stažení, které se po kliknutí spustí Celý průchod tohoto scénáře zabral P1 pouze několik málo minut. Zdržení bylo způsobeno hlavně tím, že tabulka porovnání produktů je velice rozsáhlá a P1 tedy trvalo, než ji celou prošel. Při průchodu stránkami ovšem nenarazil na žádné zásadní překážky a scénář úspěšně dokončil. P1 při průchodu tímto scénářem ocenil hlavně dobře popsaná tlačítka ke stažení, na kterých bylo jasně a srozumitelně uvedeno, co se bude stahovat. Scénář 2 zakoupení produktu AVG Antivirus Participant se opět nachází na indexu našeho prototypu - Opět hledá přímo odkaz pojmenovaný AVG Antivirus Po kliknutí na něj je přesměrován přímo na stránky AVG, protože na této stránce jsme neshledali nic nevyhovujícího - Odkaz ke koupi je velice dobře umístěn hned u horní části stránky, takže je nalezen okamžitě - Po přidání produktu do košíku moderátor přepne myší v záložkách opět na náš prototyp a P1 pokračuje dále v něm - Pochvaluje si strukturu košíku, která se mu zdá velice přehledná oproti jiným stránkám, na kterých doposud byl - Úspěšně se dostává k objednávkovému formuláři, který bez problémů vyplňuje a scénář tak úspěšně končí P1 neměl s tímto scénářem žádné problémy a ani ho podle jeho slov nevyrušilo, když mu moderátor překlikl stránky z originálních zpět na náš prototyp Scénář 3 odeslání u na technickou podporu - Výchozím bodem je opět prototypová stránka index.html - Participant vybírá z horního menu záložku Podpora - Je přesměrován na stránky AVG, ale zde bloudí, protože neví, jestli má zvolit podporu Pro domácnost nebo Pro aplikaci AVG Free - Toto bylo dáno špatně zadaným scénářem, ve kterém toto nebylo vůbec specifikováno, i když by to samozřejmě být mělo - Po dovysvětlení se dostává k odkazu na - V tomto bodě opět používáme náš prototyp na zadání registračního čísla nebo registrovaného u - Ten P1 poskytujeme a konečně se dostává k odeslání samotného dotazu a úspěšnému dokončení 22 z 25

23 Při tomto scénáři nastal problém hlavně naší vinnou, protože jsme dostatečně nespecifikovali zadání. Po skončení testu měl P1 ze stránek dobrý pocit, nikde se nezasekl a byl spokojený, že zvládl všechny úkoly. Stránky se mu zdají použitelné bez nějakého omezení Druhý participant P2 Naším druhým participantem byla žena, která příležitostně surfuje po internetu, používá čtečku HAL a s jinými si příliš nerozumí. Právě tohle byl hlavní kámen úrazu tohoto testování, protože P2 neovládá čtečku JAWS, tudíž byla nucena vždy prohledávat celé stránky od shora dolů. Testování tedy zabralo podstatně více času než s P1. Na P2 byl také vidět jakýsi ostych a nervozita z toho, že bude muset použít čtečku, se kterou prakticky vůbec neumí. Scénář 1 stažení produktu AVG Antivirus FREE - P2 prochází celý index.html od shora dolů a po krátké chvíli nachází odkaz ke stažení AVG Antiviru FREE - dostává se k tabulce porovnání jednotlivých produktů, která je pro ni ovšem velice zdlouhavá a P2 začíná docházet trpělivost a začíná být frustrována - nakonec se ovšem dostane k odkazu ke stažení a produkt se jí podaří stáhnout P2 není tak zkušená jako byl P1, a proto se nám z ní také hůře dostávají informace o tom, jak se jí postupovalo, jestli bylo něco špatně a tak dále. Jenom tento samotný scénář nám zabral kolem 8-9 minut. Scénář 2 zakoupení produktu AVG Antivirus P2 opět hledá odkaz podobného jména - Úspěšně se dostává na stránku samotného produktu a přidává ho do košíku - Výhodou zde bylo opět umístění odkazu na nákup v horní části stránky - Problém nenastává ani v nákupním košíku a scénář se daří úspěšně dokončit Scénář 3 odeslání u na technickou podporu - Tento scénář se nakonec stal pro P2 velice problematický - Na hlavní stránce se velice rychle podařilo najít odkaz na podporu, protože byl hned 4. v pořadí - Ovšem zde nastal problém, protože na stránkách samotné podpory ( se nachází spousta odkazů - P2 neví kudy dál a žádá nás o radu, kde by se měla ová adresa nacházet - Po navedení na správný odkaz se P2 dostává k odkazu s pojmenováním a ten vybírá - Dostává se na naše proteové stránky, které již nejsou tak složité jako originální AVG stránky a úspěšné odesílá zprávu Tyto tři scénáře nám zabrali necelých 40 minut, což je více než dvojnásobek doby, kterou na splnění těchto úkolů potřeboval P1. Bylo to dáno jak menší zkušeností P2, tak samozřejmě z největší části tím, že P2 s touto čtečkou téměř nikdy nepracovala a nemohla tak využívat některé pomůcky jako čtení pouze odkazů a podobně. P2 byla již ke konci také unavena zdlouhavým průchodem stránek. Na závěr si netroufla posoudit, jestli jsou stránky udělané dobře. 23 z 25

24 Poznatky z uživatelského testování Toto testování nám ukázalo několik věcí. Za prvé to, co se stane, když se nám k testu dostane uživatel, kterého jsme tak úplně nehledali a pravděpodobně by neprošel screenerem. Samotné testování nám potvrdilo to, že až na jednu nesrovnalost s nesrozumitelným popiskem obrázku, jsou stránky použitelné i pro zrakově handicapované uživatele, kteří jsou schopní vykonat základní operace bez problémů. Nahradili jsme některé původní stránky, které se jevily jako problémové v D2, našimi vlastními a jejich otestování dopadlo úspěšně. Dále se nám po tomto testování ukázala zajímavá věc a to sice, že je lepší umisťovat důležité odkazy do horní poloviny stránek, kde se dají rychleji najít Dokumentace Protyp Prototyp je tvořen provázanými HTML stránkami. Pro základ stránek jsme využili stávající stránky které jsme upravili (zaslepili nechtěné odkazy, provedli vyřešení problémů ) a prolinkovali jen námi testované průchody. Ostatní obsah stránek zůstal zachován. Stránky nejsou umístěny na žádném serveru, fungují pouze lokálně. Stránky se zobrazují v internetovém prohlížeči, za který jsme zvolili Internet Explorer 9. Jsou čteny čtečkou obrazovky, doporučena JAWS 13 s nastaveným českým jazykem Funkční požadavky Požadavky jsou seřazeny dle priority. Zachování veškeré funkcionality původních stránek Odstranění problémů při čtení obsahu čtečkou obrazovky rozlišení stejně pojmenovaných prvků, přehlednost tabulky a vyplnění všech její buněk, odstranění javascriptových prvků Doplnění stránek o prvky nezbytné pro dobrou přístupnost (alt, thead, tbody, label ) Zjednodušení přehlednosti stránek odstranění velkého množství nepotřebných odkazů Interaction design V případě nevidomého uživatele nemůže být interakce s počítačem chápána stejným způsobem, jako u vidomého uživatele. Nevidomý uživatel má k dispozici klávesnici a čtečku obrazovky. Nelze použít myš. Webové stránky musí být uzpůsobeny tak, aby šlo dosáhnout cíle bez použití myši a zároveň tak, aby čtečka dokázala přečíst všechny důležité informace. Lze toho dosáhnout vhodně použitými prvky HTML kódu Visual design V našem případě tento faktor není až tak moc důležitý, vzhledem k tomu, že zadáním bylo otestovat webové stránky AVG pro nevidomé. Čtečka přečte stejně jak holý text, tak i graficky upravené stránky. Z toho důvodu jsme využili stávající grafické provedení stránek AVG spíše pro náš přehled při vývoji. 24 z 25

25 User experience design U nevidomého uživatele je ještě více důležitý správný návrh struktury stránek. Průchod stránkami a nalezení relevantních informací pro něj musí být co nejednoduší, bez velkých nároků na potřebu si ukládat v hlavě obraz stránky (např. v jakém sloupečku tabulky se právě nacházím a co tento sloupeček znamená). Snažili jsme se odstranění zmatečných informací (např. v košíku) nebo naopak přidání informací (např. v tabulkách) Závěr V celém návrhu změn na webových stránkách společnosti AVG jsme nejprve zjistili možné komplikace pro nevidomé uživatele. Poté jsme je zahrnuli do našeho prototypu, která jsme otestovali a následně ještě doladili v high-fidelity prototypu. Uživatelé neměli žádný problém stáhnout jak free, tak i plnou verzi antiviru. Bez potíží dokázali napsat svůj dotaz na zákaznickou podporu. Podle reakcí testovaných byl náš prototyp přístupnější než stávající stránky. 25 z 25