[AVG-WEB] Zpř í stupně ní kořpořá tní ho wěbu Semestrální práce z předmětu A4M39NUR

Transkript

1 [AVG-WEB] Zpř í stupně ní křpřá tní h wěbu Semestrální práce z předmětu A4M39NUR 1 Zadání balikpav@fel.cvut.cz, luckra1@fel.cvut.cz Semestrální prjekt se bude zabývat testváním krprátních internetvých stránek splečnsti AVG a na základě tht testvání bychm měli případně dpručit změny designu těcht internetvý stránek. Se zadavatelem tét úlhy byl dhdnut, že bude testván puze něklik nejdůležitějších průchdů, nikliv celý web splečnsti AVG. 2 Úvd Prblematika přístupu zrakvě pstižených k bsahu prezentvaném na interentu je velmi rzsáhlá. Existují mnh metdik přístupnsti, které vedu k vytvření webvých stránek vhdných pr lidi se zrakvým hendikepem (např. WCAG 2.0). Ovšem tyt metdiky nabízí puze technický phled na věc. Přístupnst je dána i aspekty jak míra zrakvéh pstižení uživatele, zkušensti s prací na webvých stránkách a zkušensti s prací s asistivní technlgií a její typ. 3 Ppis cílvé skupiny Cílvu skupinu, na kteru je test zaměřen, jsu lidé bez rzdílu věku. Zrakvé pstižení pdle WHO se klasifikuje jak: kategrie 1: střední slabzrakst kategrie 2: silná slabzrakst kategrie 3: těžce slabý zrak kategrie 4: praktická slepta kategrie 5: úplná slepta Test se zaměřuje uživatele, na kteří mají zrakvý hendikep klasifikván jak praktická neb úplná slepta, tedy k navigaci na internetu se nemhu spléhat na zrakvý vjem. Druhým faktrem je zkušenst s pužíváním pčítače a zkušenst s asistivními technlgiemi pr nevidmé jak hlasvý výstup (čtečky brazvky) neb hmatvý výstup (speciální hmatvý zbrazvač řádku brazvky ve slepeckém písmu). Naším cílem budu uživatelé, kteří pracují s pčítačem na úrvni zkušenéh uživatele (vytváření dkumentů, instalace prgramů ) i asistivními technlgiemi, prtže není cílem testvat tyt vlastnsti. 3.1 Screener (veřejní část) 1) D jaké kategrie se dá zařadit váš hendikep? a. střední slabzrakst 1 z 17

2 b. silná slabzrakst c. těžce slabý zrak d. praktická slepta e. úplná slepta f. jiné 2) Pracujete s pčítačem? a. an, denně b. an, vícekrát týdně c. an, jednu týdně a méně d. ne 3) Jaké činnsti prvádíte na pčítači? (lze vybrat více dpvědí) a. čtení a vytváření dkumentů b. prhlížení webvých stránek c. administrace pčítače (instalace prgramů...) d. práce s multimediálním bsahem (videa, hudba ) e. jiné 4) Máte zkušensti s asistivními technlgiemi jak je hlasvý výstup (čtečky brazvky) neb hmatvý výstup (speciální hmatvý zbrazvač řádku brazvky ve slepeckém písmu)? a. An, mám zkušensti jak s hlasvým, tak s hmatvým výstupem b. An, puze s hlasvým výstupem c. An, puze s hmatvým výstupem d. Ne, nikdy jsem h nepužil 3.2 Screener (neveřejní část) Screener služí pr výběr vhdných uživatelů. D kategrie vhdnéh uživatele námi definvané cílvé skupiny spadají nasledující dpvědi na dtazník: 1) Definvali jsme pžadavek na uživatele s prakticku neb úplnu sleptu, t dpvídá dpvědím e a f. 2) Vyhvujícími dpvěďmi jsu mžnsti a a b, které zajišťují pžadvanu zkušenst s prací na pčítači. 3) U tét tázky zpřesníme uživatelvu úrveň s prací na pčítači. Vyhvuje nám dpvěď kmbinace dpvědí b a c (vybrané zárveň). Říká nám t, že uživatel je pkrčilejším uživatelem a zárveň mu nebude dělat prblémy se phybvat na interentu. 4) Vyhvují nám dpvědi a,b,c. Uživatel bude schpen pracvat s interpretvaným textem webvé stránky. 2 z 17

3 4 Interview 4.1 Příprava interview Před samtným testváním byl ptřeba prvést interview s představiteli naší cílvé skupiny vybranými pmcí screeneru. Uživatel bude mít k dispzici přensný pčítač s připjením k internetu. Cílem interview je zjistit činnsti, ke kterým uživatel pužívá pčítač a zkušensti s pužívání pčítače s jeh hendikepem. Jaké knkrétní zkušensti má s pužíváním asistivních technlgií. Jaké webvé stránky navštěvuje a s jakými prblémy se setkává při jejich prhlížení. C mu zjedndušuje prhlížení webvých stránek. 4.2 Okruhy tázek interview Zkušensti s pčítačem a jeh sftwarvé vybavení Na jaké činnsti pužíváte PC? Jak jste se naučil(a) pužívat PC? Jak si instalujete sftware? Při jakých činnstech na PC ptřebujete pmc cizí sby? Zkušensti s pmůckami pr nevidmé Pužíváte nějaký speciální HW/SW? (JAWS, Braillův řádek, ) Jaku pužíváte čtečku brazvky? Pužíváte i nějaké jiné asistivní technlgie? Prhlížení webvých stránek a prblémy při jejich prhlížení Jaký pužíváte internetvý prhlížeč? Jakým činnstem se věnujete na webu? S jakými prblémy se nejčastěji setkáváte při prhlížení webvých stránek? Můžete nám ppsat prces prhlížení webvé stránky? Pužíváte ve svém webvém prhlížeči nějaká mezující nastavení? Máte nějaké blíbené stránky, které jsu pr vás dbře přístupné? Jak vnímáte reklamní bannery na webu? Zkušensti s prdukty/stránkami splečnsti AVG Navštívil jste někdy stránky splečnsti AVG? Případně jaké je vaše zkušenst s nimi? Pužíváte nějaký prdukt d tét splečnsti? Jak jste se k němu dstal? 3 z 17

4 4.3 Shrnutí Rzhvr s představitelem naší cílvé skupiny nám pskytl mnh užitečných infrmaci. Zmíníme zde něklik zásadních bdů, které budu hrát důležitu rli v dalším průběhu našeh semestrálníh prjektu: Uživatel pužívá pčítač denně a t i něklik hdin, pr čtení, vzdělávání se, prgramvání a také prhlížení webvých stránek S instalací si pradí většinu sám, pkud cítí, že t nedkáže, zavlá kamaráda Pužívá webvý brwser Internet Explrer, čtečku brazvky JAWS a dkáže pužívat také písmenkvý řádek ale více pužívá čtečku brazvky Nejčastějšími prblémy, se kterými se při prhlížení stránek setkává, jsu: Javascript čtečka má někdy prblém h správně přečíst Absence alternativních ppisků například u brázků Nesprávné pužívání elementu h tedy nadpisů Prblém dělají také Rich Internet Applicatins a AJAX Flashvé reklamy, které se někdy jak tlačítka, na které lze kliknut Na webvých stránkách se phybuje tak, že si nejdříve nechá přečíst všechny nadpisy, pté dkazy a tímt způsbem získá představu struktuře stránky V prhlížeči má vypnuté ActiveX prvky a t z důvdu bezpečnsti a neuvažuje vypnutí flashe ani javascriptu Stránky splečnsti AVG navštívil, když si stahval free verzi jejich prduktu 5 Analýza a interpretace získaných dat 5.1 Shrnutí získaných znalstí Na základě těcht dpvědí tedy můžeme stanvit nějaké základní schéma prhlížení webvých stránek nevidmými lidmi. Získali jsme představu tm, jak se tit lidé v prstředí internetu phybují a c jim činí největší ptíže. Ve zbytku času, který jsme měli na interview vyhrazený, s námi uživatel také zrychleně pršel hlavní stránku webu AVG ( a narazil při tm na něklik prblémů. Ty budu všem zmíněny až v další části věnvané testvání. Jelikž nebudeme mct webvé stránky testvat přím s nevidmými uživateli, získali jsme na základě interwiev představu tm, jak nevidmí s pčítačem pracují a vládají h. Při testvání je ptřeba se zaměřit hlavně na správné pužívání nadpisů, jejich úrvní (ddržení metdik přístupnsti) a zkntrlvat, zda některé reklamy a flashvé prvky nematu čtečku brazvky a následně také uživatele. Dále je ptřeba testvat, zda jsu všechny prvky dstupné a čtečka na ně upzrní. Hlavním zdrjem bude služit webvá stránka 4 z 17

5 5.2 Ppis prblému a pžadavky uživatelů Pkud někd zavítá na stránku splečnsti AVG, bude jistě hledat nějaké infrmace nabízených prduktech. Druhu základní infrmací, kteru bude uživatel hledat je mžnst zakupení nějakéh prduktu. Naše testvání by se tedy měl zaměřit právě na tyt dva prblémy. Jelikž k testvání již nebudeme mci využít nevidmých uživatelů, budeme nuceni si nasimulvat pdmínky, které nám přiblíží jejich práci s pčítačem a webvými stránkami. Právě díky interview, které jsme v tét části prvedli, jsme získali představu tm, jak jejich práce vypadá. 5 z 17

6 6 Use-cases, scénáře 6.1 Use-case 1 - Stáhnutí zkušební verze AVG Antiviru Uživatel zjistil, že jeh pčítač se pslední dbu velmi zpmaluje. Pr vyřešení prblému využije mžnsti si stáhnut zkušební verzi antivirvéh prgramu. Scénář: Na internetvých stránkách AVG (avg.cm) si stáhněte zkušební verzi AVG Antivirus. 1) Přejděte na webvé stránky splečnsti AVG 2) Zbrazte si nabízené prdukty uživatel přejde na stránku, nabízených prduktů 3) Vyber prdukt pdle uživatel si vybere prdukt pdle vlastníh kritéria, tedy prblému, pr který si prdukt ptřebuje stáhnut (prjevy pčítače zpmalení, vyskakvání ken ). 4) Přidejte d kšíku prdukt AVG Antivirus HTA: Udělej 1, 2, 2.1. Pkud je t ptřeba, udělej 2.2. Udělej Use-case 2 Stažení plné verze antivirvéh prgramu AVG Uživatel je spkjen s neplacenu verzí antivirvéh prgramu a chce si stáhnu plnu verzi pr preventivní chranu pčítače. Scénář: Na internetvých stránkách AVG (avg.cm) si zakupte prdukt AVG Antivirus. 1) Přejděte na webvé stránky splečnsti AVG 2) Zbrazte si nabízené prdukty uživatel přejde na stránku, nabízených prduktů 3) Vyber prdukt pdle uživatel si vybere prdukt pdle vlastníh kritéria, tedy prblému, pr který si prdukt ptřebuje stáhnut (prjevy pčítače zpmalení, vyskakvání ken ). 4) Přidejte d kšíku prdukt AVG Antivirus 5) Zaplaťte 6) Stáhněte si prdukt HTA: Udělej 1, 2, 2.1. Pkud je t ptřeba, udělej 2.2. Udělej 2.4, 3, 3.1 a 4. 6 z 17

7 6.3 Use-case 3 Vytvření nvéh tématu na diskuzním fóru zákaznické pdpry Uživatel se ptýká s určitým druhem útku na svůj pčítač. Neví si rady, jak má dál pstupvat. Navštíví tedy diskuzní fórum na stránkách AVG, aby pžádal radu. Scénář: Vytvřte nvé téma na diskusním fóru zákaznické pdpry AVG. 1) Přejděte na webvé stránky splečnsti AVG 2) Přejděte d sekce zákaznické pdpry 3) Vstupte d diskusníh fóra 4) Vytvřte nvé 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ákaznicku pdpru Uživatel se ptýká s určitým druhem útku na svůj pčítač. Neví si rady, jak má dál pstupvat. Chce knzultvat prblém individuálně a tak využije mžnst zaslat na zákaznicku pdpru. Scénář: Napsat na zákaznicku pdpru AVG. 1) Přejděte na webvé stránky splečnsti AVG 2) Přejděte na webvé stránky splečnsti AVG 3) Přejděte d sekce zákaznické pdpry 4) Pšlete dtaz pmcí frmuláře 7 z 17

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

9 8 Strybard 9 z 17

10 9 Tvrba prttypu Sučástí našeh zadání pr tut část je dhalit prblémvá místa sučasných webvých stránek a navrhnut řešení jejich prblematických částí. K testvání našich návrhů na zlepšení přístupnsti internetvých stránek splečnsti AVG, jsme se rzhdli pužít elektrnické prttypy, které pkryjí námi nalezená prblémvá místa a umžní nám testvat naše navrhvané řešení. Prtypy jsu vytvřené jak jednduché webvé stránky. Uživatel prchází standardní webvé stránky a nejdřív se pkuší splnit úkl na těcht stránkách. P dknčení úklu nahradíme půvdní stránky našimi prttypy a pžádáme h t samé. V pst-testvém rzhvru se zeptáme na t, se kteru verzí se mu pracval lépe. 9.1 Zjištěné prblémy a jejich řešení v prttypu Když jsme si stránky prcházeli čtečku, narazili jsme na některé prvky, které mhu nevidmým půsbit ptíže. Prvním úskalím je hned hlavní stránka a na ní řešení menu. Tt menu je udělán pmcí javascriptu, t dělá čtečce ptíže a takvé menu nedkáže přečíst. Vidí puze první úrveň jak je dmácnst, pdniky, pdpra Kvůli bsáhlsti vyskakvacíh menu jsme usudili, že přepis d pdby pr nevidmé není mžný. A jelikž existuje i tak cesta, i když delší (přes dkaz na dmácnsti neb přes mapu stránek), k dsažení cíle, tak tut strukturu pnecháme. Obr. 1 Obrázek ukazující prblémvé rzbalvací menu Dalším prblémem je tabulka pužívaná pr prvnání a stažení jedntlivých prduktů. Tut část průchdu naším scénářem jsme značili za nejvíce prblematicku, a prt jsme se rzhdli na ní navrhnut naše vlastní řešení. Prblém v půvdní tabulce byl s tím, že některé buňky byly prázdné a čtečka je tudíž přeskakvala, takže nevidmý byl pté zmatený, kde se v tabulce právě nachází a k jakému slupci daná infrmace v tabulce náleží. Náš prttyp dplňuje prázdné buňky v tabulce brázky a alternativní ppisky ke každé buňce (zda-li je daná vlastnst u danéh prduktu přítmna). Také jsme přidali alternativní ppisy a pdrbnější ppisky tlačítek pr stažení subru. 10 z 17

11 V půvdních stránkách ttiž byla všechna tlačítka značena ppiskem "stáhnut", cž půsbil prblémy při rzeznání, c si uživatel vlastně stahuje. Oba tyt prblémy jsu zbrazeny na brázku níže. Obr. 2 Obrázek prblémvé tabulky Obr. 3 Obrázek prttypu, kterým jsme nahradili půvdní tabulku 11 z 17

12 Obrázky bsahují alternativní ppis se jmény jedntlivých prduktů a dstupnstí nabízených služeb. Dalším prblémem, na který jsme narazili je hrší rientace v nákupním kšíku. Mmentálně jsu všechny plžky v nákupním kšíku ulžené v tabulce, a když ji uživatel prchází, tak si musí pamatvat infrmace tm, na kterém řádku a ve kterém slupci se právě nachází. Tmu by se dal předejít například tím, že by se jedntlivé atributy zapisvaly d slupců, tak jak je t na brázku našeh prttypu níže. Uživatel by si tedy vždy vyslechl dvě věci, které k sbě patří, hned za sebu. Obr. 4 Obrázek nákupníh kšíku sučasná verze Obr. 5 Prttyp našeh návrhu nákupníh kšíku 12 z 17

13 Předpsledním prblém, se kterým jsme se při našem průchdu setkali, se bjevil při pkusu vytvření nvéh tématu na fóru zákaznické pdpry. Uživateli se bjeví vcelku jednduchý frmulář se dvěma textvými pli. Bhužel druhé textvé ple nemá abslutně žádný label, takže h čtečka přečte jak neznačené a uživatel nemá pnětí tm, c má d ple zadat. Další prblém je se zaškrtávacím plíčkem, které také není nijak značen pr čtečku. Náš prttyp tat značení přidává. Obr. 6 Sučasný frmulář služící pr vytvření nvéh tématu Obr. 7 Prttyp vytvření nvéh tématu 13 z 17

14 Pslední prblém, na který jsme narazili, je s psláním u na zákaznicku pdpru. Jedná se jeden z největších prblémů pr čtečky brazvek, kdy se náhle bjeví vyskakující kn, kterém uživatel nemá ani ptuchy, prtže h čtečka vůbec nezaregistruje. Přesně takvé kn se bjeví, pkud uživatel zvlí mžnst . Vzhledem k nedstatku času, který budeme na prvedení testu našich prttypů mít k dispzici, jsme se rzhdli tut mžnst zatím neprezentvat, prtže vyžaduje další rzmyšlení th, jak tut situaci vyřešit. 10 Evaluace 10.1 Nastavení testu Nastavení testu je pr ba dva participanty ttžné. Test prbíhal v prstrné místnsti. Participant byl psazen bkem pzrvatelům. Tt rzmístění byl zvlen z důvdu ptřeby sledvat c se děje na mnitru testvanéh. Participant měl k dispzici ntebk s klasickým rzlžením klávesnice i s numericku klávesnicí. Na daném pčítači byl nainstalván perační systém Windws 7, Internet Explrer 9 a čtečka brazvky JAWS 13 dem (anglický jazyk). V prhlížecí byla zbrazena úvdní stránka webu AVG ( která byla výchzí pr každá scénář. Zárveň ve druhém panelu byla tevřená struktura námi upravených stránek. Vzhledem k časvým mžnstem jsme se rzhdli s každým participantem prvést právě 3 usecasy Scénáře 1) Uživatel zjistil, že jeh pčítač se pslední dbu velmi zpmaluje. Pr vyřešení prblému využije mžnsti si stáhnut zkušební verzi antivirvéh prgramu. Scénář: Na internetvých stránkách AVG (avg.cm) si stáhněte zkušební verzi AVG Antivirus. 2) Uživatel je spkjen s neplacenu verzí antivirvéh prgramu a chce si stáhnu plnu verzi pr preventivní chranu pčítače. Scénář: Na internetvých stránkách AVG (avg.cm) si zakupte prdukt AVG Antivirus. 3) Uživatel se ptýká s určitým druhem útku na svůj pčítač. Neví si rady, jak má dál pstupvat. Navštíví tedy diskuzní fórum na stránkách AVG, aby pžádal radu. Scénář: Vytvřte nvé téma na diskusním fóru zákaznické pdpry AVG. 4) Uživatel se ptýká s určitým druhem útku na svůj pčítač. Neví si rady, jak má dál pstupvat. Chce knzultvat prblém individuálně a tak využije mžnst zaslat na zákaznicku pdpru První participant První participant je zvyklý pracvat se čtečku Windw-eyes. I přest mu nedělá prblémy pracvat se čtečku JAWS, všem nezná zkratky a tak webvé stránky prchází pmcí tabulátrů a šipek. Scénář 1 stažení prduktu AVG FREE - Participant se snadn dstává z hlavní stránky na stránku prduktu AVG Free. Přítmnst pr něj skrytéh menu mu nevadí. 14 z 17

15 - Pstupuje d stránky shra dlů pmcí klávesy TAB, až se dstane na tlačítk s nápisem Stáhnut AVG Free. Ovšem netuší, jaké tlačítk patří k danému prduktu, který chce stáhnut (jsu tam 3) ani nedkáže pznat, jaká infrmace patří k jakému prduktu. Pté se p nápvědě dstává ke správnému. - V tmt bdě nastává prblém se stáhnutím danéh subru, je ttiž přesměrván na stránku, kde vyskčí kn Internet Explreru pr stažení subru. Na tt kn se nemůže dstat. Při průchdu naším prttypem již dkáže rzeznat, jaký subr stahuje. Jinak prchází stránky bez prblémů, až pět na přístup k vyskakvacímu knu. T je všem prblém Internet Explreru a není sučastí tht testvání. Scénář 2 zakupení prduktu AVG Anti-virus Participant se dstává z hlavní stránky na stránku prduktu AVG Anti-virus Přidává si prdukt d kšíku, d kteréh je hned přesměrván - Kliká na tlačítk pkračvat a dstává se k frmuláři s kntaktními údaji a platbu - Scénáře úspěšně dknčil Průchd díky pužívání tabulátrů mu nedělal žádný prblém. Scénář 3 vytvření nvéh tématu na fóru AVG - Participant z vrchní lišty správně vybírá dkaz Pdpra - Teď má na výběr z mžnstí Pdpra pr dmácnst neb Pdpra pr aplikaci AVG Free a neví, kteru vybrat - Zkuší tedy nejdříve Pdpra pr dmácnst, a když nemůže dkaz na fórum najít, tak přechází d Pdpry pr aplikaci AVG Free - Navštěvuje AVG Fórum - Vybírá tlačítk Nvé téma - Zadává pskytnuté přihlašvací údaje - Snaží se vyplnit frmulářvá ple, ale je zmatený, prtže neví, c má vyplnit d druhéh textvéh ple, prtže není ppsané - Neví ani c znamená následující zaškrtnutý checkbx - Pté všem desílá zprávu a ta se úspěšně dešle na fórum a scénář úspěšně dknčil P nahrazení půvdníh frmuláře naším prttypem uživatel knečně zjistil, c jedntlivá ple znamenají a neshledává na něm žádné další nedstatky. 15 z 17

16 Druhý participant Druhý participant je zvyklý pracvat se čtečku JAWS, zná zkratky a i s nimi pracuje. Scénář 1 stažení prduktu AVG FREE - Participant se snadn dstává z hlavní stránky na stránku prduktu AVG Free. P zbrazení veškerých dkazů, čtečka nevidí menu, ale ani tmut paticipantvi t nevadí. - Nejprve prchází pmcí tabulátrů. Nedkáže rzlišit, jaké infrmace patří k danému prduktu. Zbrazuje si dkazy, ale zbrazí se mu třikrát stáhnut tedy netuší, c má stáhnut. Až p přepnutí se d tabulkvéh režimu se dstává ke správnému dkazu. - S vyskakvacím knem prblémy nemá a úspěšně stahuje subr. Při průchdu naším prttypem rzeznává vlastnsti prduktu i bez přepnutí d tabulkvéh režimu. Scénář 2 zakupení prduktu AVG Anti-virus Participant se dstává z hlavní stránky na stránku prduktu AVG Anti-virus Přidává si prdukt d kšíku, d kteréh je hned přesměrván - Kliká na tlačítk pkračvat a dstává se k frmuláři s kntaktními údaji a platbu. Zde vyžívá zbrazení frmulářvých plí. U typu zákazníka netuší jaký radi buttn vybrat, nejsu pjmenvány a tak se mu zbrazují všechny stejně. Jiná ple jsu v přádku. - Scénář úspěšně dknčil U průchdu prttypu pět naráží na nepjmenvané radi buttn. Lepé rzeznává, k čemu jaká plžka v kšíku patří, nemusí si pamatvat přadí buněk. Scénář 3 vytvření nvéh tématu na fóru AVG - Participant pět vybírá dkaz Pdpra - Vybírá nabídku Pdpra pr aplikaci AVG Free - Navštěvuje AVG Fórum - Nechává si přečíst jedntlivé dkazy a naknec vybírá Nvé téma - Bez prblémů zadává pskytnuté přihlašvací údaje - Má stejný prblém jak předchzí participant, prtže pět netuší, c má napsat d druhéh textvéh ple a s čím suhlasí zaškrtnutím checkbxu - Pté zvládá deslat zprávu a úspěšně dknčuje scénář 16 z 17

17 10.2 Závěr lw-fidelity testvání V průběhu testu se nám ptvrdil, že naše pdezření na některá prblematická místa, které jsme značili při našem průchdu webvými stránkami, se pravdu ptvrdila. Oba participaci byli spkjeni s prezentvanými návrhy na vylepšení designu a shledávali je pr ně lépe pužitelné, než půvdní verze stránek. Ovšem bjevili jsme také některé další nedstatky, které nebyly zahrnuty v našem prttypu. Takvýmit překážkami byly vyskakvací kn pr stažení subru AVG antiviru zdarma, schpnst rzlišit radi buttn u frmuláře pr kupi AVG Anti-virus 2012 a vyskakvací kn při pkusu vu pdpru. Tyt prblémy budu dále zahrnuty d návrhu. 17 z 17