Pˇr´ıstupnost AVG str´anek Semestr´aln´ı projekt pˇredmˇetu N´avrh uˇzivatelsk´eho rozhran´ı (NUR) Pavel Janovsk´ y, Martin Schaefer CVUT FEL, Otevˇren´a informatika 29. ˇr´ıjna 2011
1
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Obsah 1 Deliverable 1 ˇ 1.1 Skoln´ ı zad´ an´ı . . . . . . . . . . . . . . . . . . 1.2 Zad´ an´ı upˇresnˇen´e firmou AVG . . . . . . . . 1.3 Screener . . . . . . . . . . . . . . . . . . . . . 1.3.1 Formulace dotazn´ıku . . . . . . . . . . 1.3.2 Forma kontaktu . . . . . . . . . . . . 1.4 Interview . . . . . . . . . . . . . . . . . . . . 1.4.1 T´emata . . . . . . . . . . . . . . . . . 1.4.2 Ot´ azky . . . . . . . . . . . . . . . . . 1.5 Anal´ yza a interpretace nashrom´aˇzdˇen´ ych dat 1.5.1 Z´ıskan´e vˇedomosti . . . . . . . . . . . 1.5.2 Popis probl´emu . . . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
3 3 3 3 3 3 3 3 4 5 5 5
2 Deliverable 2 2.1 Use-cases, sc´en´ aˇre . . . . . . . . 2.2 Hierarchical task analysis (HTA) 2.3 Pl´ any . . . . . . . . . . . . . . . 2.4 Sketches . . . . . . . . . . . . . . 2.5 Storyboard . . . . . . . . . . . . 2.6 Z´ avˇer D2 . . . . . . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
5 5 6 6 7 8 10
. . . . . .
. . . . . .
. . . . . .
. . . . . .
2
. . . . . .
. . . . . .
. . . . . .
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
1
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Deliverable 1
1.1
ˇ Skoln´ ı zad´ an´ı
Pr´ ace se m´ a zab´ yvat doporuˇcen´ımi zmˇen designu korpor´atn´ıho webu. C´ılovou skupinou jsou zrakovˇe hendikepovan´ı. Low-fid prototyp by mˇel obsahovat sbˇer dat, testov´an´ı a doporuˇcen´ı zmˇen webu. High-fid prototyp by potom mˇel b´ yt ve verzi HTML, kter´a se bude testovat pomoc´ı ˇcteˇcek obrazovky.
1.2
Zad´ an´ı upˇ resnˇ en´ e firmou AVG
Zad´ an´ı firmy AVG se od ˇskoln´ıho m´ırnˇe liˇs´ı. Poˇzadavky firmy nezahrnuj´ı v´ yvoj HTML, ale pˇrev´aˇznˇe jen testov´ an´ı str´ anek pomoc´ı ˇcteˇcky Jaws a n´asledn´e n´avrhy zmˇen str´anek. Pr´ace se m´a vˇenovat jen hlavn´ım str´ ank´ am webu (homepage, product pages).
1.3
Screener
ˇ ceno jin´ Screener by mˇel slouˇzit k filtraci nevhodn´ ych kandid´at˚ u pro interview. Reˇ ymi slovy urˇcit, zda respondent odpov´ıd´ a poˇzadovan´e c´ılov´e skupinˇe. C´ılovou skupinou jsou v naˇsem pˇripadˇe nevidom´ı. Vych´ az´ıme v tomto aspektu z poˇzadavk˚ u firmy AVG na testov´an´ı pˇr´ıstupnosti na nevidom´ ych uˇzivatel´ıch. Zpˇr´ıstupnˇen´ı webu nevidom´ ym by mˇelo pokr´ yt vˇetˇsinu obecn´ ych poˇzadavk˚ u na pˇr´ıstupnost. I pˇres pomˇernˇe u ´zkou c´ılovou skupinu nevidom´ ych poˇzadujeme od respondent˚ u znalost pr´ ace s poˇc´ıtaˇcem. Respondent by mˇel pracovat se ˇctˇeˇckou na zp˚ usobu jiˇz zmiˇ novan´e ˇcteˇcky Jaws. 1.3.1
Formulace dotazn´ıku
U vyhovuj´ıc´ıch respondent˚ u oˇcek´ av´ ame kladn´e odpovˇedi na n´asleduj´ıc´ı ot´azky. Pˇredpokl´ad´ame dotazov´ an´ı osob se zrakov´ ym postiˇzen´ım. • Pracujete s poˇc´ıtaˇcem? • Vyuˇz´ıv´ ate pˇri pr´ aci na poˇc´ıtaˇci moˇznosti internetu? • Pouˇz´ıv´ ate softwarov´e ˇcteˇcky obrazovky? Napˇr´ıklad Jaws? 1.3.2
Forma kontaktu
Pro nav´ az´ an´ı kontaktu s potenci´ aln´ımi respondenty vol´ıme formu doporuˇcen´ı od pˇr´ısluˇsn´ ych odborn´ık˚ u. Takto jsme pˇredstaveni Jaroslavovi Kuˇcerovi ˇci pˇres speci´aln´ı pedagoˇzku PaeDr. Janu Vachulovou oslovujeme dalˇs´ı potenci´ aln´ı respondenty. Vzhledem k ˇcasov´ ym moˇznostem se uskuteˇcnilo interview pouze s panem Kuˇcerou. V kontaktu jsme t´eˇz se Zdeˇ nkem Ryb´akem, kter´ y pˇredbˇeˇznˇe souhlasil se spolupr´ ac´ı.
1.4
Interview
Kv˚ uli n´ aroˇcnosti sehn´ an´ı vhodn´ ych respondent˚ u se n´am podaˇrilo do dan´eho term´ınu uspoˇr´adat pouze jedno interview. Naˇs´ım respondentem byl pan Jaroslav Kuˇcera, dlouhodob´ y nevidom´ y spolupracovn´ık fakulty. 1.4.1
T´ emata
Pˇred samotn´ ym interview jsme si stanovili n´asleduj´ıc´ı hlavn´ı t´emata: • Pouˇ z´ıv´ an´ı poˇ c´ıtaˇ ce - zde n´ as zaj´ımal uˇzivatel˚ uv n´azor na pouˇz´ıv´an´ı poˇc´ıtaˇce, frekvence pouˇz´ıv´ an´ı poˇc´ıtaˇce, operaˇcn´ı syst´em
3
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
• Pom˚ ucky pro nevidom´ e - V tomto oboru jsme pˇredem nemˇeli mnoho znalost´ı, zaj´ımali jsme se o ˇcteˇcky obrazovky a braill˚ uv ˇr´adek. • Pouˇ z´ıv´ an´ı internetu - zaj´ımaly n´as internetov´e prohl´ıˇzeˇce, jejich kompabilita se ˇcteˇckou, ˇcasto navˇstˇevovan´e str´ anky, technologie. • AVG web - s respondentem jsme pˇr´ımo zkouˇseli pˇr´ıstupnost AVG str´anek. 1.4.2
Ot´ azky
N´ asleduje pˇrehled pokl´ adan´ ych ot´ azek spolu s zestruˇcnˇen´ ymi odpovˇed’mi. • Jak ˇ casto pouˇ z´ıv´ ate PC? dennˇe, nekolik hodin • Co na PC dˇ el´ ate? ˇcten´ı, uˇcen´ı, programov´ an´ı • Jak´ y pouˇ z´ıv´ ate operaˇ cn´ı syst´ em? Windows XP (dobr´ a kompabilita se ˇcteˇckou) • Jak´ y m´ ate v PC antivirus? P˚ uvodnˇe AVG free, ted’ pln´ a verze • Jak´ e pom˚ ucky pro nevidom´ e pouˇ z´ıv´ ate? kl´ avesov´e zkratky, ˇcten´ı kl´ aves, ˇcteˇcka odchyt´avaj´ıc´ı zpr´avy na obrazovce - Jaws (pˇr´ıpadnˇe Orca - Linux Ubuntu) • Jak´ y internetov´ y prohl´ıˇ zeˇ c pouˇ z´ıv´ ate? Internet explorer - nejlepˇs´ı podpora ˇcteˇcky, ve virtu´aln´ım reˇzimu vyd´av´an´ı povel˚ u pomoc´ı p´ısmen • Jak´ e str´ anky navˇ stˇ evujete? divoch.cz, novinky.cz, centrum.cz, google vyhled´av´an´ı • M´ aˇ cteˇ cka probl´ emy s nˇ ejak´ ymi typy webov´ ych technologi´ı? ano, s javascript, ajax, flash prezentace. • Proch´ azen´ı AVG webu (zde neuv´ ad´ıme ot´ azky): Po otevˇren´ı str´ anky se nevidom´ y uˇzivatel orientuje pomoc´ı nadpis˚ u. M˚ uˇze proch´azet nadpisy, podnadpisy, tlaˇc´ıtka. Uˇzivateli nen´ı jasn´ y hlavn´ı nadpis str´anky. Nˇekter´a tlaˇc´ıtka ˇcteˇcka ˇspatnˇe zpracov´ av´ a (jde pˇrev´ aˇznˇe o reklamu). Str´anky jsou aˇz na drobn´e nedostatky na prvn´ı pohled pro respondenta celkem ˇciteln´e.
4
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
1.5
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Anal´ yza a interpretace nashrom´ aˇ zdˇ en´ ych dat
Do t´eto doby jsme se vˇenovali shromaˇzd’ov´an´ı informac´ı o zp˚ usobech, jak´ ym nevidom´ı uˇzivatel´e pracuj´ı s poˇc´ıtaˇcem respektive na internetu. 1.5.1
Z´ıskan´ e vˇ edomosti
Vˇetˇsina ˇcinnosti na poˇc´ıtaˇci je nevidom´emu uˇzivateli zprostˇredkov´ana tzv. softwarovou ˇcteˇckou. Uˇzivatel ke vstupu vyuˇz´ıv´ a standardn´ı kl´avesnici. Hojnˇe vyuˇz´ıv´a kl´avesov´ ych zkratek. Ud´alosti mu jsou zprostˇredkov´ any hlasov´ ym v´ ystupem. Uˇzivateli je pˇr´ıstupn´ a struktura webu. Ovˇsem je nutn´e ji proch´azet postupnˇe napˇr´ıklad po nadpisech ˇci sekc´ıch. Uˇzivatel je omezen ˇcek´an´ım na zpˇetnou hlasovou vazbu o sv´e ˇcinnosti. Grafick´e prvky, kter´e jsou nevidom´emu uˇzivateli skryt´e, by nemˇely obsahovat v´ıce informac´ı, neˇz je moˇzn´e popsat v tzv. alt atributech. Vyuˇzit´ı technologi´ı jako je Javascript ˇci Flash pˇrin´aˇs´ı zv´ yˇsen´ı rizika nepˇr´ıstupnosti. 1.5.2
Popis probl´ emu
Pro podrobnou anal´ yzu webu AVG je nutnost´ı testov´an´ı pomoc´ı ˇcteˇcky Jaws. V prvn´ı f´azi by mˇelo doj´ıt k urˇcen´ı prvk˚ u, kter´e jsou nevidom´emu uˇzivateli nepˇr´ıstupn´e ˇci znepˇr´ıjemˇ nuj´ı prohl´ıˇzen´ı str´ anek. V dalˇs´ı f´ azi bude nutn´e navrhnout opatˇren´ı a u ´pravy, kter´e by probl´emov´e ˇc´asti str´anek pokud moˇzno opravily.
2
Deliverable 2
2.1
Use-cases, sc´ en´ aˇ re
Po rozhovorech se zadavatelem i vybran´ ym uˇzivatelem jsme vytvoˇrili n´asleduj´ıc´ı tˇri sc´en´aˇre, kter´e popisuj´ı naprostou vˇetˇsinu pˇr´ıpad˚ u navˇst´ıven´ı AVG str´anek nevidom´ ym. • Sc´ en´ aˇ r 1: Zakoupen´ı nov´ eho antiviru Nevidom´ y uˇzivatel se rozhodne koupit AVG Anti-virus (licenci na 1 rok). Po naˇcten´ı str´anky www.avg.com chce nejjednoduˇsˇs´ım moˇzn´ ym zp˚ usobem z´ıskat informace o produktu a n´aslednˇe ho zakoupit (pˇr´ıpadnˇe si st´ ahnout zkuˇsebn´ı verzi). • Sc´ en´ aˇ r 2: Obnoven´ı licence Spokojen´ y uˇzivatel AVG softwaru si chce po roce pouˇz´ıv´an´ı antiviru prodlouˇzit licenci. Mus´ı otevˇr´ıt pˇr´ısluˇsnou str´ anku a n´ aslednˇe zadat k´od, (kter´ y je v souˇcasn´e verzi str´anek dostupn´ y jen vizu´ alnˇe). • Sc´ en´ aˇ r 3: Z´ısk´ an´ı podpory Uˇzivatel m´ a se zakoupen´ ym softwarem probl´emy, potˇrebuje se pod´ıvat na ˇcast´e dotazy. Pokud zde pomoc nenajde, chce z´ıskat kontakt a poˇz´adat o pomoc pˇr´ımo oper´atora (telefonicky nebo emailem).
5
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
2.2
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Hierarchical task analysis (HTA)
V t´eto ˇca´sti anal´ yzy jsme se zamˇeˇrili na strukturu probl´emu. Podle specifikovan´ ych sc´en´aˇr˚ u jsme sestrojili hierarchickou anal´ yzu - viz obr´azek 1. Dˇelen´ı v hloubce jedna odpov´ıd´a rozdˇelen´ı sc´en´aˇr˚ u. Zelenˇe jsou oznaˇceny situace, ve kter´ ych se uˇzivatel u ´spˇeˇsnˇe dobral poˇzadovan´eho c´ıle.
AVG web
Zakoupení nového antiviru
AVG Antivirus
Obnovení licence
AVG Internet security
Koupit nyní
Získání podpory
Podpora
Zadat email, potvrdit odeslání kódu
Časté dotazy
Kontakt na operátora (telefon, email)
Nákupní košík
Obr´ azek 1: HTA anal´ yza pouˇz´ıv´an´ı str´anek AVG
2.3
Pl´ any
Pl´ any jsou posloupnosti operac´ı, kde operace odpov´ıdaj´ı poloˇzk´am HTA. Pˇri anal´ yze jsme tedy uvaˇzovali n´ asleduj´ıc´ı tˇri pl´ any: • Pl´ an 1: Zakoupen´ı nov´ eho antiviru AVG web − > Zakoupen´ı nov´eho ativiru − > Volba softwaru − > Koupit nyn´ı − > N´akupn´ı koˇs´ık • Pl´ an 2: Obnoven´ı licence AVG web − > Podpora− > Obnoven´ı licence − > Zadat email, potvrdit odesl´an´ı k´odu • Pl´ an 3: Z´ısk´ an´ı podpory ˇ e dotazy − > Kontakt na oper´atora (telefon, email) AVG web − > Podpora − > Cast´
6
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
2.4
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Sketches
N´ asleduj´ıc´ı sketche n´ as uv´ ad´ı do problematiky pouˇzit´ı poˇc´ıtaˇce resp. internetu nevidom´ ym uˇzivatelem.
Obr´ azek 2: Nevidom´ y
Obr´azek 3: U poˇc´ıtaˇce
Obr´azek 4: Periferie
Nevidom´ y uˇzivatel vyuˇz´ıv´ a jin´ ych vstupnˇe-v´ ystupn´ıch zaˇr´ızen´ı neˇz uˇzivatel vid´ıc´ı. Vyuˇz´ıv´ a softwarov´ y odeˇc´ıtaˇc, kter´ y pˇrev´ad´ı zobrazenou str´anku do zvukov´e podoby. K prozkoum´an´ı str´ anky si je tˇreba nechat pˇreˇc´ıst, co se na str´ance nach´az´ı. V pˇr´ıpadˇe rozs´ahl´ ych str´anek tato ˇcinnost m˚ uˇze b´ yti ˇcasovˇe n´ aroˇcn´ a. Obsah obr´ azk˚ u bez popisku je pro poˇc´ıtaˇc resp. uˇzivatele nedostupn´ y.
ˇ Obr´ azek 5: Casov´ a n´ aroˇcnost
Obr´azek 6: Obr´azky bez popisku
7
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Dobˇre strukturovan´ a str´ anka je pˇrehlednˇejˇs´ı, uˇzivatel m˚ uˇze vyuˇz´ıt proch´azen´ı po nadpisech urˇcit´e u ´rovnˇe - ulehˇc´ıme mu orientaci.
Obr´ azek 7: Nepˇrehledn´ a struktura
2.5
Obr´azek 8: Pˇrehlednˇejˇs´ı struktura
Storyboard
N´ asleduj´ıc´ı storyboard zn´ azorˇ nuje pˇr´ıklad Sc´en´aˇre 1.
Tak mám nový počítač
Nezapomeň na antivir!
Obr´azek 9: Inspirace
8
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
...AVG.COM Nejlepší antivir zdarma.
Tak, co najedeme na Googlu....” antivir”
Pro domácnost! Vida, mrkneme se na to!
Obr´ azek 10: Volba antiviru
Page has twentyfour headings and one hundred fifteen links Antivir AVG vertical bar Antivirus a zabezpečení Internetu … .… … Heading 1 : Pro domácnost
Obr´azek 11: Prvn´ı pˇr´ıstup k AVG str´ank´am
… Heading 2 : AVG Antivirus...
… Link: Stánout AVG Antivirus
Tak si ho stáhneme! Enter!
OK
Obr´ azek 12: Volba AVG softwaru
Obr´azek 13: Staˇzen´ı AVG softwaru 9
NUR - Pˇr´ıstupnost AVG str´ anek Datum: 29. ˇr´ıjna 2011
2.6
Pavel Janovsk´ y, Martin Schaefer t´ ym5, AV-WEB
Z´ avˇ er D2
Na z´ akladˇe rozhovor˚ u s potenci´ aln´ımi uˇzivateli a zadavatelem jsme v t´eto ˇc´asti vytvoˇrili 3 z´akladn´ı sc´en´ aˇre. Se sc´en´ aˇri jsou u ´zce sv´ az´ any pl´any akc´ı, kter´e jsou v hierarchizovan´e podobˇe zaneseny v HTA. Vyuˇzili jsme moˇznosti sketchov´an´ı, v naˇsem pˇr´ıpadˇe jsme si ujasnili pˇredstavu o pr´aci nevidom´eho uˇzivatele s webov´ ymi str´ ankami AVG. Uveden´ y storyboard ilustruje jeden z moˇzn´ ych sc´en´ aˇr˚ u pouˇzit´ı webov´ ych str´ anek nevidom´ ym uˇzivatelem.
10
