Ceske vysoke ucenı technicke v PrazeFakulta elektrotechnickaTechnicka 2, Praha 6http://fel.cvut.cz

Testovanı systemu pro on-linerezervaci vstupenek do O2 Areny

Semestralnı prace

Y39TUR (A7B39TUR)Testovanı uzivatelskych rozhranı

Ondrej Machuldamachuon1@fel.cvut.cz

3. listopadu 2011

1

Obsah

1 Uvod 31.1 Popis aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Popis uzivatelu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Testovanı bez uzivatele 42.1 Metodika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Prehled prıpadu uzitı . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3 UC1 – vyhledanı akce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.4 UC2 – rezervace vstupenky . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.5 UC3 – registrace uzivatele . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.5.1 Kognitivnı pruchod . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.5.2 Heuristicka evaluace . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 Nalezy 153.1 Hodnocenı zavaznosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.2 Tabulka nalezu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4 Zaver 17

2

1 Uvod

1.1 Popis aplikace

Predmetem testovanı je webove uzivatelske rozhranı prazske O2 Areny, urcene k nakupuvstupenek, mj. na hokejova utkanı tymu HC Slavia Praha:

http://www.o2arena.cz/

O2 Arena, otevrena v roce 2004 pod puvodnım nazvem Sazka Arena, je modernı vıceucelovahala, ktera stojı v Praze 9, na hranici Libne a Vysocan. Poradajı se v nı sportovnı udalosti,ale i kulturnı a zabavnı akce, koncerty, veletrhy a dalsı.

Pravidelne se v nı pak konajı domacı utkanı tymu HC Slavia Praha, na ktere jekapacita haly az 17 000 mıst. Od sameho zacatku probıha prodej techto vstupenekprostrednictvım internetoveho systemu Sazka Ticket. Na webu O2 Areny je pak provo-zovana

”nadmnozina“ tohoto systemu, ktera zobrazuje pouze akce konane v O2 Arene –

a tuto cast prave podrobıme testovanı.

Aplikace umoznuje vyber utkanı, sektoru (a tedy cenove relace vstupenky), vyber konkretnıhosedadla v danem sektoru a rezervaci vstupenky (ci vstupenek). Jejı uhrada a vyzvednutıpak probıha fyzicky u terminalu spolecnosti Sazka (trafiky, posty aj.).

Aplikace ma rovnez uzivatelske funkce (registrace, prihlasenı atd.).

Obrazek 1: Vstupnı stranka webu O2 Areny, http://www.o2arena.cz/

3

1.2 Popis uzivatelu

Beznymi uzivateli systemu jsou hokejovı fanousci, kterı si chtejı rezervovat a nasledne za-koupit vstupenku na hokejove utkanı tymu HC Slavia Praha. Protoze internetovy systemfunguje jiz dlouho (a to v podobne verzi casto i na jinych stadionech), jsou vetsinou vnakupu vstupenek tımto zpusobem zvyklı.

Predpokladame tak, ze uzivatele umı obsluhovat internetovy prohlızec na urovni beznehouzivatele, ma zakladnı zkusenosti s obsluhou podobnych systemu (naprıklad nakup ve-shopu), avsak na teto konkretnı strance muze vstupenku rezervovat poprve.

2 Testovanı bez uzivatele

2.1 Metodika

K testovanı bez uzivatele pouzijeme dve metody – kognitivnı pruchod a heursitickouevaluaci.

Kognitivnı pruchod

Jedna se o metodu, pri ktere se postupne prochazı uzivatelskym rozhranım podle danehoscenare smerujıcıho k dosazenı urceneho cıle, pricemz se simuluje bezne kognitivnı chovanıuzivatele. V kazdem kroku se pomocı urcenych otazek overuje srozumitelnost a jednodu-chost rozhranı a hledajı se problemy v pouzitelnosti, na ktere by mohl uzivatel narazit.

Metoda je obzvlaste vhodna na analyzovanı ukolu s dobre strukturovanymi kroky a jakonenarocny a pomerne rychly zpusob testovanı obyklych prvku v uzivatelskem rozhranı.

Na zacatku testovanı kazdeho prıpadu uzitı je nejprve treba presne urcit odpoved’ nanasledujıcı otazku, s kterou pak evaluator pracuje:

Q0. Ceho chce uzivatel dosahnout?

V ramci kazdeho jednotliveho kroku ve scenari si pak odpovıme na tyto otazky:

Q1. Bude uzivateli zrejma spravna akce?

Q2. Spojı si uzivatel popisek akce s tım, co chce udelat?

Q3. Obdrzı uzivatel odpovıdajıcı odezvu na provedenou akci?

Vystupem z testovanı kognitivnım pruchodem jsou odpovedi na tyto otazky s komentarem,ze kterych se dajı zpracovat konkretnı nalezy a doporucenı.

Heuristicka evaluace

Pri teto metode je testovane rozhranı podrobeno zkoumanı nekolika expertu, kterı ana-lyzujı zda nedoslo k porusenı nejake heuristiky (= obecne platna doporucenı) v navrhuuzivatelskeho rozhranı.

4

Heuristicka evaluace je vhodna pro testovanı mene strukturovanych ukolu.

Pro nase testovanı jsme pouzili sadu heuristik od Jakoba Nielsena [1]:

H1. viditelnost stavu systemu

H2. podobnost systemu a realneho sveta

H3. kontrola nad systemem a uzivatelska svoboda

H4. konzistence a standardy

H5. prevence chyb

H6. rozpoznanı namısto vzpomenutı

H7. flexibilnı a efektivnı pouzitı

H8. esteticky a minimalisticky vzhled

H9. pomoc s rozpoznanım, diagnostikou a zotavenım se z chyb

H10. napoveda a dokumentace

2.2 Prehled prıpadu uzitı

Testovali jsme nasledujıcı tri prıpady uzitı (use case):

• UC1 – vyhledanı akce

• UC2 – nakup vstupenky

• UC3 – registrace uzivatele

Pro UC1 byla pouzita heuristicka evaluace, pro UC2 testovanı kognitivnım pruchodema pro UC3 obe metody.

2.3 UC1 – vyhledanı akce

Pokud chce uzivatel rezervovat vstupenku, musı nejdrıve prirozene najıt akci, na kterou jichce rezervovat. V nasem prıpade uvazejeme nakup vstupenky na hokejove utkanı tymuHC Slavia Praha – to muze navstevnık po vstupu na hlavnı stranku O2 Areny ucinitnekolika ruznymi zpusoby.

Pro testovanı tohoto prıpadu uzitı pouzita heuristicka evaluace, prave proto, ze je zdenekolik ruznych moznostı jak tento prıpad uzitı splnit.

Nalez 1 (N1)

Uvodnı stranka (viz Obrazek 1) nenı zcela prehledna, novy navstevnık nemusı poznat, zemoznost rezervovat vstupenky na utkanı tymu HC Slavia Praha je skryta pod obrazkemvpravo, pod nadpisem

”Domacı tym“ (muze pod nım ocekavat naprıklad odkaz na do-

movskou stranku klubu apod.). Seznam dalsıch akcı se rovnez zobrazuje az pomerne

”nızko“ na strance, za zaplavou animovanych banneru.

5

Porusene heuristiky: H7, H8

Nalez 2 (N2)

Pokud se uzivatel rozhodne nalezt utkanı tymu pomocı clenenı akcı do kategoriı, vstoupıpomocı menu

”Akce“ v leve dolnı casti stranky logicky do kategorie Sport. Avsak zde

nenalezne zadne akce, a to ani utkanı tymu HC Slavia Praha (viz Obrazek 2). Rovnez munenı nabıdnuta zadna dalsı moznost, co delat dale.

Podobny problem je pri pouzitı”Planu akcı“ (rovnez z leveho menu) (viz Obrazek 3).

Ani zde uzivatel hokejove akce nenalezne, navıc uzivatel ani nepozna, ze skutecne vybralplan akcı (ve skutecnosti se totiz jedna o totoznou stranku jako je stranka hlavnı).

Porusene heuristiky: H1, H2, H9

Obrazek 2: Prazdna kategorie Sport, je nutno pouzıt obrazek vpravo

Obrazek 3: Plan akcı (polozka v menu cervene zvyraznena) neobsahuje zadne akce HCSlavia Praha

Nalez 3 (N3)

Ani vyhledavanı nepomuze uzivateli nalezt hokejova utkanı – zda se, ze v nich totizvubec nevyhledava, vyhledavanı dotazu

”slavia“ nalezne pouze odkazy na fotogalerii

z poslednıch utkanı a ruzne starsı clanky (viz Obrazek 4).

Porusene heuristiky: H2, H7

6

Obrazek 4: Vysledek vyhledavanı dotazu”slavia“

Nalez 4 (N4)

Kdyz se uzivatel”konecne“ dostane na stranku s moznostı rezervace vstupenek na hoke-

jova utkanı HC Slavia Praha, samotny seznam utkanı je”utopen“ az temer na koneci

stranky (viz Obrazek 5).

Porusene heuristiky: H7

Nalez 5 (N5)

Seznam navıc zobrazuje pro uzivatele zcela nerelevantnı udaj ID akce , ktery k tomuu jiz odehranych utkanı nenı ID, ale ve skutecnosti golovy vysledek tohoto utkanı. (vizObrazek 6).

Porusene heuristiky: H2, H8

2.4 UC2 – rezervace vstupenky

Tento prıpad uzitı testuje asi nejbeznejsı cinnost, kterou navstevnıci na webu vykonavajı– totiz rezervace vstupenky.

Protoze se jedna o dobre strukturovany prıpad uzitı s presne definovanymi kroky, pouzilijsme testovanı kognitivnım pruchodem.

Q0: Uzivatel si chce rezervovat vstupenku na akci.

Seznam kroku:

7

Obrazek 5: Informace o hokejovych utkanıch HC Slavia Praha a umıstenı odkazu na rez-ervaci vstupenek na jednotliva utlanı (cervene zvyrazneno)

Obrazek 6: Detail nesmyslne uvadenych informacı (ID akce)

8

1. Vyber sektoru

2. Vyber mıst

3. Prihlasenı

4. Potvrzenı rezervace

5. Zobrazenı vysledne rezervace

Vychozı stav: uzivatel ma vybranou akci, na kterou si chce rezervovat vstupenku.Uzivatel je v systemu registrovan, avsak nenı momentalne prihlasen.

Krok 1 Prvnım krokem je vyber sektoru, tedy oblasti na stadionu, kde si chce uzivatelvstupenku rezervovat (viz Obrazek 7).

Obrazek 7: Vyber sektoru (krok 1)

Q1. Ano.

Q2. Ano, avsak na nektere sektory na planku nenı mozno kliknout (vstupenky donich se neprodavajı) – uzivatel tak na prvnı pohled nepozna, kam muze a kamnemuze kliknout. (N6)

Q3. Ano.

Krok 2 Nynı je treba vybrat jedno ci vıce sedadel, jejichz lıstky chce uzivatel rezervovat(viz Obrazek 8).

Q1. Ne, chybı popisek co presne ma uzivatel delat. (N7)

Q2. Ne, chybı blizsı popis cemu odpovıdajı jednotliva cısla, jak je hlediste orien-tovano a podobne. (N8)

Q3. Ano.

9

Obrazek 8: Vyber mıst (krok 2)

Krok 3 Uzivatel je vyzvan k prihlasenı (viz Obrazek 9).

Obrazek 9: Vyzva k prihlasenı (krok 3)

Q1. Ne, neocekavane vyskocila chybova hlaska. (N9)

Q2. Ne, chybova hlaska obsahuje neodpovıdajıcı text (zatım jsme zadne prihlasovacıudaje ani nezadavali). (N10)

Q3. Ano.

10

Krok 4 Po prihlasenı muze uzivatel potvrdit rezervaci vybranych vstupenek (viz Obrazek 10).

Obrazek 10: Potvrzenı rezervace (krok 4)

Q1. Ne, chybı popisek co ma uzivatel dale delat. (N11)

Q2. Ano.

Q3. Ano.

Krok 5 Na konec je zobrazeno cıslo rezervace a dalsı pokyny, jak si lıstky vyzvednout(viz Obrazek 11).

Obrazek 11: Zobrazenı vysledne rezervace (krok 5)

Q1. Ne, potvrzenı nenı zcela zrejme. (N12)

11

Q2. Ano.

Q3. Ne nutne, v prıpade vyskytu chyby pri rezervaci (viz Obrazek 12) se uzivatelimuze zobrazit pouze prazdna stranka. (N13)

Obrazek 12: Jak take muze dopadnout potvrzenı rezervace (krok 5)

2.5 UC3 – registrace uzivatele

Pro rezervaci jakehokoliv lıstku prostrednictvım systemu je nutna registrace (a nasledneprihlasenı) uzivatele – viz take krok 3 u UC2, kde je uzivatel vyzvan k prihlasenı ci kregistraci.

Jedine mısto odkud se na webu muze uzivatel registrovat (i prihlasit), je az v okamzikukdy zacne objednavku vstupenky. Odtud tedy zacına prıpad uzitı (stejne tak muze zacıti z dalsıch kroku objednavky, viz napr. Obrazek 9.

Pro tento prıpad uzitı jsme pouzili jak testovanı kognitivnım pruchodem, tak testovanıheuristickou evaluacı.

2.5.1 Kognitivnı pruchod

Q0: Uzivatel se chce registrovat do systemu.

Seznam kroku:

1. Kliknutı na odkaz

2. Vyplnenı registracnıch udaju

Vychozı stav: uzivatel se nachazı na strance s rameckem s odkazem na registraci.

12

Krok 1 Uzivatel nejprve klikne na odkaz”Registrace noveho uzivatele“, ktery se nachazı

v ramecku spolu s formularem pro prihlasenı (viz Obrazek 13).

Obrazek 13: Ramecek (cervene zvyrazneno) s odkazem na registracnı formular (cervenasipka)

Q1. Ano.

Q2. Ne, nenı zrejme ze se jedna o odkaz (vypada stejne jako nadpis”prihlasenı“,

ktery ale odkazem nenı). (N14)

Q3. Ne, odkaz se otevre v novem okne (coz muze uzivatel prehlednou, prıpadne mıtblokovane). (N15)

Krok 2 Uzivatel vyplnı registracnı formular a odesle jej (viz Obrazek 14).

Q1. Ano.

Q2. Ne, zvyraznenı povinnych polozek nenı skoro videt, popisek”max.10“ pro pocet

znaku je neuplny. (N16)

Q3. Ne, po odeslanı formulare se okno s nım automaticky zavre a uzivatel jeprihlasen na puvodnı strance, (N17) aniz by se zobrazilo jakekoliv potvrzenı.

13

Obrazek 14: Registracnı formular

2.5.2 Heuristicka evaluace

Nalez 1 (N18) Formular s registracı a prihlasenım je prıstupny pouze z podstranekobjednavky, nikoliv z hlavnı strany.

Porusene heuristiky: H4

Nalez 2 (N19) Stranka s registracnım formularem se otevıra v novem”vyskakovacım“

okne, coz je pro mnohe uzivatele neprıjemne, navıc uzivatele mohou mıt”vyskakovacı“

okna blokovana.

Porusene heuristiky: H3, H4

Nalez 3 (N20) Registracnı formular nekontroluje format zadanych data, pouze jejichprıtomnost ci neprıtomnost.

Porusene heuristiky: H9

Nalez 4 (N21) Registracnı formular neobsahuje spravne popisky a ani zadnou napovedu– viz Obrazek 14.

Porusene heuristiky: H10

14

3 Nalezy

Jednotlive nalezy uvedne vyse v dokumenty byly ohodnoceny prioritou (stupnem zavaznosti)– viz dalsı bod, a souhrne sepsany do tabulky nıze, spolu s doporucenım jak je moznodany problem vyresit.

3.1 Hodnocenı zavaznosti

Pri posuzovanı stupne zavaznosti byly brany v potaz tyto ctyri faktory [2]:

• Frekvence toho, jak casto se problem objevuje: Je casty nebo ojedinely?

• Dopad problemu v prıpade jeho vyskytu: Bude pro uzivatele jednoduche neboobtızne problem prekonat?

• Setrvalost problemu: je to jednorazovy problem ktery po jeho objevenı mohouuzivatele prekonat, nebo jım budou opakovane obtezovani?

• Dopad na produkt: ovlivnı problem zasadnım zpusobem prodejnost produktu?

Kombinacı techto faktoru byly jednotlive problemy ohodnoceny cısly 0 az 4, od menevyznamnych k nejdulezitejsım:

0 – Nepredstavuje problem.

1 – Kosmeticky problem.

2 – Mene vyznamny problem, nızka priorita opravy.

3 – Zasadnı problem, je dulezite jej opravit.

4 – Kriticky problem v pouzitelnosti, nutno odstranit.

15

3.2 Tabulka nalezu

C. Pri. Popis nalezu DoporucenıN1 4 Neprehledna

uvodnı stranaZmenit nadpis obrazku napr. na ”Akce domacıho tymu”,zjednodusit hlavnı stranu.

N2 4 Nenalezitelne akce V kategorii Sport by mely byt sportovnı utkanı, stejnejako by mela byt hokejova utkanı zarazena do planuakcı. Prıpadne by mel byt uzivatel prı vypisu techtokategoriı upozornen, kde ma hokejova utkanı hledat. I zmenu by melo byt patrne, jakou kategorii uzivatel pravezobrazil.

N3 4 Nefunkcnı vyh-ledavanı

Opravit vyhledavanı.

N4 3 Tezko nalezitelnyseznam utkanı

Presunout seznam utkanı vıce na zacatek stranky

N5 1 Zbytecny sloupecID akce

Sloupec odstranit ci prejmenovat.

N6 1 Na sektory nelzekliknout

Barevne odlisit sektory, do kterych jiz/zatım nenı moznolıstek zakoupit.

N7 2 Popisek dalsı akce Doplnit popisek, co ma uzivatel dale delat.N8 2 Nejasny vyber

sedadlaDoplnit vysvetlivky a napovedu.

N9 2 Prihlasenı Nabıdnout uzivateli moznost prihlasenı drıve, nez se zo-brazı chybova hlaska.

N10 2 Chybova hlaska Opravit chybovou hlasku, aby odpovıdala skutecne(ne)provedene akci, ci ji rovnou odstranit v prıpadevyresenı N9.

N11 2 Popisek dalsı akce Doplnit popisek, ci nejlepe dodelat graficke znazornenıjednotlivych kroku objednavky (podobne jako je beznev e-shopech).

N12 1 Potvrzenı Doplnit jednoznacne potvrzenı, napr.”Vase rezervace

byla provedena“N13 2 Vyskyt chyby Prı vyskytu chyby doplnit chybove hlasky.N14 2 Podoba odkazu Upravit vzhled odkazu.N15,N19

3 Otevıranı novehookna

Odkazy neotevırat v novem okne.

N16,N21

2 Popisky formulare Doplnit do formulare jednoznacne a vyrazne popiskya napovedu.

N17 2 Potvrzenı regis-trace

Informovat uzivatele o prevedene registraci (potvrzovacıhlaska apod.).

N18 3 Formular sprihlasenım

Pridat formular na hlavnı stranku.

N20 2 Kontrola zadanychdat

Kontrolovat format zadanych dat (cıslice, pısmena,delka...).

16

4 Zaver

Testovanı bez uzivatele odhalilo na webu O2 Areny mnohe nedostatky, vcetne takovovychktere sa dajı povazovat za nedostatky kriticke. Ty mohou totiz dokonce vest k ohrozenısamotneho

”businessu“ stranek a snızenı prodeje (resp. rezervace) vstupenek.

Provozovatel webu by mel testovanı pouzitelnosti stranek rozhodne venovat vetsı (neboalespon nejakou) pozornost, a tyto nedostatky v pouzitelnosti stranek co nejdrıve opravit.Zamerit by se mel primarne na ty s nejvyssı prioritou (tj. 4) - viz predchozı tabulka.

17

Reference

[1] http://www.useit.com/papers/heuristic/heuristic_list.html 5

[2] http://www.useit.com/papers/heuristic/severityrating.html 15

18