České vysoké učení technické v Praze Fakulta elektrotechnická Testování systému pro on-line nákup vstupenek do O 2 Areny Semestrální práce předmětu Y39TUR 1 Ondřej Machulda machuon1@fel.cvut.cz 24. října 2011
Obsah 1 Úvod 3 1.1 Popis aplikace.................................. 3 1.2 Popis uživatelů................................. 4 2 Testování bez uživatele 4 2.1 Metodika..................................... 4 2.2 Přehled případů užití.............................. 5 2.3 UC1 vyhledání akce.............................. 5 2.4 UC2 rezervace vstupenky........................... 7 2.5 UC3 registrace uživatele........................... 12 2.5.1 Kognitivní průchod........................... 12 2.5.2 Heuristická evaluace.......................... 14 3 Nálezy 15 3.1 Hodnocení závažnosti.............................. 15 3.2 Tabulka nálezů................................. 16 2
1 Úvod 1.1 Popis aplikace Předmětem testování je webové uživatelské rozhraní pražské O 2 Areny, určené k nákupu vstupenek, mj. na hokejová utkání týmu HC Slavia Praha: http://www.o2arena.cz/ O 2 Arena, otevřená v roce 2004 pod původním názvem Sazka Arena, je moderní víceúčelová hala, která stojí v Praze 9, na hranici Libně a Vysočan. Pořádají se v ní sportovní události, ale i kulturní a zábavní akce, koncerty, veletrhy a další. Pravidelně se v ní pak konají domácí utkání týmu HC Slavia Praha, na které je kapacita haly až 17 000 míst. Od samého začátku probíhá prodej těchto vstupenek prostřednictvím internetového systému Sazka Ticket. Na webu O 2 Areny je pak provozována nadmnožina tohoto systému, která zobrazuje pouze akce konané v O 2 Areně a tuto část právě podrobíme testování. Aplikace umožňuje výběr utkání, sektoru (a tedy cenové relace vstupenky), výběr konkrétního sedadla v daném sektoru a rezervaci vstupenky (či vstupenek). Její úhrada a vyzvednutí pak probíhá fyzicky u terminálů společnosti Sazka (trafiky, pošty aj.). Aplikace má rovněž uživatelské funkce (registrace, přihlášení atd.). Obrázek 1: Vstupní stránka webu O 2 Areny, http://www.o2arena.cz/ 3
1.2 Popis uživatelů Běžnými uživateli systému jsou hokejoví fanoušci, kteří si chtějí rezervovat a následně zakoupit vstupenku na hokejové utkání týmu HC Slavia Praha. Protože internetový systém funguje již dlouho (a to v podobné verzi často i na jiných stadionech), jsou většinou v nákupu vstupenek tímto způsobem zvyklí. Předpokládáme tak, že uživatele umí obsluhovat internetový prohlížeč na úrovni běžného uživatele, má základní zkušenosti s obsluhou podobných systémů (například nákup v e-shopu), avšak na této konkrétní stránce může vstupenku rezervovat poprvé. 2 Testování bez uživatele 2.1 Metodika K testování bez uživatele použijeme dvě metody kognitivní průchod a heursitickou evaluaci. Kognitivní průchod Jedná se o metodu, při které se postupně prochází uživatelským rozhraním podle daného scénáře směřujícího k dosažení určeného cíle, pričemž se simuluje běžné kognitivní chování uživatele. V každém kroku se pomocí určených otázek ověřuje srozumitelnost a jednoduchost rozhraní a hledají se problémy v použitelnosti, na které by mohl uživatel narazit. Metoda je obzvláště vhodná na analyzování úkolů s dobře strukturovanými kroky a jako nenáročný a poměrně rychlý způsob testování obyklých prvků v uživatelském rozhraní. Na začátku testování každého případu užití je nejprve třeba přesně určit odpověd na následující otázku, s kterou pak evaluátor pracuje: Q0. Čeho chce uživatel dosáhnout? V rámci každého jednotlivého kroku ve scénáři si pak odpovíme na tyto otázky: Q1. Bude uživateli zřejmá správná akce? Q2. Spojí si uživatel popisek akce s tím, co chce udělat? Q3. Obdrží uživatel odpovídající odezvu na provedenou akci? Výstupem z testování kognitivním průchodem jsou odpovědi na tyto otázky s komentářem, ze kterých se dají zpracovat konkrétní nálezy a doporučení. Heuristická evaluace Při této metodě je testované rozhraní podrobeno zkoumání několika expertů, kteří analyzují zda nedošlo k porušení nějaké heuristiky (= obecně platná doporučení) v návrhu uživatelského rozhraní. 4
Heuristická evaluace je vhodná pro testování méně strukturovaných úkolů. Pro naše testování jsme použili sadu heuristik od Jakoba Nielsena [1]: H1. viditelnost stavu systému H2. podobnost systému a reálného světa H3. kontrola nad systémem a uživatelská svoboda H4. konzistence a standardy H5. prevence chyb H6. rozpoznání namísto vzpomenutí H7. flexibilní a efektivní použití H8. estetický a minimalistický vzhled H9. pomoc s rozpoznáním, diagnostikou a zotavením se z chyb H10. nápověda a dokumentace 2.2 Přehled případů užití Testovali jsme následující tři případy užití (use case): UC1 vyhledání akce UC2 nákup vstupenky UC3 registrace uživatele Pro UC1 byla použita heuristická evaluace, pro UC2 testování kognitivním průchodem a pro UC3 obě metody. 2.3 UC1 vyhledání akce Pokud chce uživatel rezervovat vstupenku, musí nejdříve přirozeně najít akci, na kterou ji chce rezervovat. V našem případě uvažejeme nákup vstupenky na hokejové utkání týmu HC Slavia Praha to může návštěvník po vstupu na hlavní stránku O 2 Areny učinit několika různými způsoby. Pro testování tohoto případu užití použita heuristická evaluace, právě proto, že je zde několik různých možností jak tento případ užití splnit. Nález 1 (N1) Úvodní stránka (viz Obrázek 1) není zcela přehledná, nový návštěvník nemusí poznat, že možnost rezervovat vstupenky na utkání týmu HC Slavia Praha je skryta pod obrázkem vpravo, pod nadpisem Domácí tým (může pod ním očekávat například odkaz na domovskou stránku klubu apod.). Seznam dalších akcí se rovněž zobrazuje až poměrně nízko na stránce, za záplavou animovaných bannerů. 5
Porušené heuristiky: H7, H8 Nález 2 (N2) Pokud se uživatel rozhodne nalézt utkání týmu pomocí členění akcí do kategorií, vstoupí pomocí menu Akce v levé dolní části stránky logicky do kategorie Sport. Avšak zde nenalezne žádné akce, a to ani utkání týmu HC Slavia Praha (viz Obrázek 2). Rovněž mu není nabídnuta žádná další možnost, co dělat dále. Podobný problém je při použití Plánu akcí (rovněž z levého menu) (viz Obrázek 3). Ani zde uživatel hokejové akce nenalezne, navíc uživatel ani nepozná, že skutečně vybral plán akcí (ve skutečnosti se totiž jedná o totožnou stránku jako je stránka hlavní) Porušené heuristiky: H1, H2, H9 Obrázek 2: Prázdná kategorie Sport, je nutno použít obrázek vpravo Obrázek 3: Plán akcí (položka v menu červeně zvýrazněna) neobsahuje žádné akce HC Slavia Praha Nález 3 (N3) Ani vyhledávání nepomůže uživateli nalézt hokejová utkání zdá se, že v nich totiž vůbec nevyhledává, vyhledávání dotazu slavia nalezne pouze odkazy na fotogalerii z posledních utkání a různé starší články (viz Obrázek 4). Porušené heuristiky: H2, H7 6
Obrázek 4: Výsledek vyhledávání dotazu slavia Nález 4 (N4) Když se uživatel konečně dostane na stránku s možností rezervace vstupenek na hokejová utkání HC Slavia Praha, samotný seznam utkání je utopen až téměř na koneci stránky (viz Obrázek 5). Porušené heuristiky: H7 Nález 5 (N5) Seznam navíc zobrazuje pro uživatele zcela nerelevantní údaj ID akce, který k tomu u již odehraných utkání není ID, ale ve skutečnosti gólový výsledek tohoto utkání. (viz Obrázek 6). Porušené heuristiky: H2, H8 2.4 UC2 rezervace vstupenky Tento případ užití testuje asi nejběžnější činnost, kterou návštěvníci na webu vykonávají totiž rezervace vstupenky. Protože se jedná o dobře strukturovaný případ užití s přesně definovanými kroky, použili jsme testování kognitivním průchodem. Q0: Uživatel si chce rezervovat vstupenku na akci. Seznam kroků: 7
Obrázek 5: Informace o hokejových utkáních HC Slavia Praha a umístění odkazů na rezervaci vstupenek na jednotlivá utlání (červeně zvýrazněno) Obrázek 6: Detail nesmyslně uváděných informací (ID akce) 8
1. Výběr sektoru 2. Výběr míst 3. Přihlášení 4. Potvrzení rezervace 5. Zobrazení výsledné rezervace Výchozí stav: uživatel má vybranou akci, na kterou si chce rezervovat vstupenku. Uživatel je v systému registrován, avšak není momentálně přihlášen. Krok 1 Prvním krokem je výběr sektoru, tedy oblasti na stadionu, kde si chce uživatel vstupenku rezervovat (viz Obrázek 7). Q1. Ano. Obrázek 7: Výběr sektoru (krok 1) Q2. Ano, avšak na některé sektory na plánku není možno kliknout (vstupenky do nich se neprodávají) uživatel tak na první pohled nepozná, kam může a kam nemůže kliknout. (N6) Q3. Ano. Krok 2 Nyní je třeba vybrat jedno či více sedadel, jejichž lístky chce uživatel rezervovat (viz Obrázek 8). Q1. Ne, chybí popisek co přesně má uživatel dělat. (N7) Q2. Ne, chybí bližší popis čemu odpovídají jednotlivá čísla, jak je hlediště orientováno a podobně. (N8) Q3. Ano. 9
Obrázek 8: Výběr míst (krok 2) Krok 3 Uživatel je vyzván k přihlášení (viz Obrázek 9). Obrázek 9: Výzva k přihlášení (krok 3) Q1. Ne, neočekávaně vyskočila chybová hláška. (N9) Q2. Ne, chybová hláška obsahuje neodpovídající text (zatím jsme žádné přihlašovací údaje ani nezadávali). (N10) Q3. Ano. 10
Krok 4 Po přihlášení může uživatel potvrdit rezervaci vybraných vstupenek (viz Obrázek 10). Obrázek 10: Potvrzení rezervace (krok 4) Q1. Ne, chybí popisek co má uživatel dále dělat. (N11) Q2. Ano. Q3. Ano. Krok 5 Na konec je zobrazeno číslo rezervace a další pokyny, jak si lístky vyzvednout (viz Obrázek 11). Obrázek 11: Zobrazení výsledné rezervace (krok 5) Q1. Ne, potvrzení není zcela zřejmé. (N12) 11
Q2. Ano. Q3. Ne nutně, v případě výskytu chyby při rezervaci (viz Obrázek 12) se uživateli může zobrazit pouze prázdná stránka. (N13) Obrázek 12: Jak také může dopadnout potvrzení rezervace (krok 5) 2.5 UC3 registrace uživatele Pro rezervaci jakéhokoliv lístku prostřednictvím systému je nutná registrace (a následné přihlášení) uživatele viz také krok 3 u UC2, kde je uživatel vyzván k přihlášení či k registraci. Jediné místo odkud se na webu může uživatel registrovat (i přihlásit), je až v okamžiku kdy začne objednávku vstupenky. Odtud tedy začíná případ užití (stejně tak může začít i z dalších kroků objednávky, viz např. Obrázek 9. Pro tento případ užití jsme použili jak testování kognitivním průchodem, tak testování heuristickou evaluací. 2.5.1 Kognitivní průchod Q0: Uživatel se chce registrovat do systému. Seznam kroků: 1. Kliknutí na odkaz 2. Vyplnění registračních údajů Výchozí stav: uživatel se nachází na stránce s rámečkem s odkazem na registraci. 12
Krok 1 Uživatel nejprve klikne na odkaz Registrace nového uživatele, který se nachází v rámečku spolu s formulářem pro přihlášení (viz Obrázek 13). Obrázek 13: Rámeček (červeně zvýrazněno) s odkazem na registrační formulář (červená šipka) Q1. Ano. Q2. Ne, není zřejmé že se jedná o odkaz (vypadá stejně jako nadpis přihlášení, který ale odkazem není). (N14) Q3. Ne, odkaz se otevře v novém okně (což může uživatel přehlédnou, případně mít blokované). (N15). Krok 2 Uživatel vyplní registrační formulář a odešle jej (viz Obrázek 14). Q1. Ano. Q2. Ne, zvýraznění povinných položek není skoro vidět, popisek max.10 pro počet znaků je neúplný. (N16) Q3. Ne, po odeslání formuláře se okno s ním automaticky zavře a uživatel je přihlášen na původní stránce, (N17) aniž by se zobrazilo jakékoliv potvrzení. 13
Obrázek 14: Registrační formulář 2.5.2 Heuristická evaluace Nález 1 (N18) Stránka s registračním formulářem se otevírá v novém vyskakovacím okně, což je pro mnohé uživatele nepříjemné, navíc mohou mít vyskakovací okna blokována. Porušené heuristiky: H3, H4 Nález 2 (N19) Registrační formulář nekontroluje formát zadaných data, pouze jejich přítomnost či nepřítomnost. Porušené heuristiky: H9 Nález 3 (N20) Registrační formulář neobsahuje správné popisky a ani žádnou nápovědu viz Obrázek 14. Porušené heuristiky: H10 14
3 Nálezy Jednotlivé nálezy uvedné výše v dokumenty byly ohodnoceny prioritou (stupněm závažnosti) viz další bod, a souhrně sepsány do tabulky níže, spolu s doporučením jak je možno daný problém vyřešit. 3.1 Hodnocení závažnosti Při posuzování stupně závažnosti byly brány v potaz tyto čtyři faktory [2]: Frekvence toho, jak často se problém objevuje: Je častý nebo ojedinělý? Dopad problému v případě jeho výskytu: Bude pro uživatele jednoduché nebo obtížné problém překonat? Setrvalost problému: je to jednorázový problém který po jeho objevení mohou uživatele překonat, nebo jím budou opakovaně obtěžováni? Dopad na produkt: ovlivní problém zásadním způsobem prodejnost produktu? Kombinací těchto faktorů byly jednotlivé problémy ohodnoceny čísly 0 až 4: 0 nepředstavuje problém 1 kosmetický problém 2 méně významný problém, nízká priorita opravy 3 zásadní problém, je důležité jej opravit 4 katastrofický problém v použitelnosti, nutno odstranit 15
3.2 Tabulka nálezů Č. Pri. Popis nálezu Doporučení N1 4 Nepřehledná úvodní strana Změnit nadpis obrázku např. na Akce domácího týmu, zjednodušit hlavní stranu. N2 4 Nenalezitelné akce V kategorii Sport by měly být sportovní utkání, stejně jako by měla být hokejová utkání zařazena do plánu akcí. Případně by měl být uživatel pří výpisu těchto kategorií upozorněn, kde má hokejová utkání hledat. I z menu by mělo být patrné, jakou kategorii uživatel právě zobrazi. N3 4 Nefunkční vyhledávání Opravit vyhledávání. N4 3 Těžko nalezitelný Přesunout seznam utkání více na začátek stránky seznam utkání N5 1 Zbytečný sloupec Sloupec odstranit či přejmenovat. ID akce N6 1 Na sektory nelze Barevně odlišit sektory, do kterých již/zatím není možno kliknout lístek zakoupit. N7 2 Popisek další akce Doplnit popisek, co má uživatel dále dělat. N8 2 Nejasný výběr Doplnit vysvětlivky a nápovědu. sedadla N9 2 Přihlášení Nabídnout uživateli možnost přihlášení dříve, než se zobrazí chybová hláška. N10 2 Chybová hláška Opravit chybovou hlášku, aby odpovídala skutečně (ne)provedené akci, či ji rovnou odstranit v případě vyřešení N9. N11 2 Popisek další akce Doplnit popisek, či nejlépe dodělat grafické znázornění jednotlivých kroků objednávky (podobně jako je běžné v e-shopech). N12 1 Potvrzení Doplnit jednoznačné potvrzení, např. byla provedena N13 2 Výskyt chyby Pří vyskytu chyby doplnit chybové hlášky. N14 2 Podoba odkazu Upravit vzhled odkazu. Vaše rezervace N15, 3 Otevírání nového Odkazy neotevírat v novém okně. N18 okna N16, N20 2 Popisky formuláře Doplnit do formuláře jednoznačné a výrazné popisky a nápovědu. N17 2 Potvrzení registrace Informovat uživatele o prevedené registraci (potvrzovací hláška apod.). N19 2 Kontrola zadaných dat Kontrolovat formát zadaných dat (číslice, písmena, délka...). 16
Reference [1] http://www.useit.com/papers/heuristic/heuristic_list.html 5 [2] http://www.useit.com/papers/heuristic/severityrating.html 15 17