České vysoké učení technické v Praze, fakulta elektroniky Testování webového rozhraní obchodu Czech Computer Semestrální práce z předmětu Testování uživatelského rozhraní (A7B39TUR) Vypracoval: Michael Baroň, baronmi6 Dne: 14.10.2012
Abstrakt: Czech Computer, neboli CZC.cz, je jeden z největších internetových obchodů v České republice. I když vlastní i kamenné obchody, tak převážné množství objednávek z tohoto obchodu je prováděno přes webové prohlížeče pomocí jejich stránek. Kamenné obchody tedy slouží pouze k vyzvedávaní a reklamaci zboží. Vzhledem k tomu, že se jedná o tak veliký obchod, pak se dá očekávat, že bude vlastnit i dostatečně profesionální internetové stránky, které budou velice intuitivní na použití i běžným ne příliš technicky zdatným uživatelem. 2
Obsah: Popis aplikace...4 Přehled případů užití...5 Use Case 1...6 Use Case 2...9 Use Case 3...11 Use Case 4...15 Závěr...17 3
Popis aplikace: Jedná se o internetové stránky obchodní společnosti Czech Computer, neboli CZC.cz, zaměřené na prodej počítačových komponent a jiné elektroniky. Stránky jsou udělány tak, aby byly jednoduše renderovány (zobrazitelné) jakýmkoli moderním internetovým prohlížečem. Veškeré zboží v tomto webovém rozhraní je kategorizováno a tedy lehce dohledatelné. Navíc je umožněno uživateli zřídit si zde účet a tak může sledovat stav své objednávky, prohlížet své minulé objednávky a na tento učet i sbírat různé slevy, které uplatní při dalších nákupech. Na těchto internetových stránkách obchodu si může zákazník dohledat zboží, které potřebuje, vybrat si způsob jeho dodání, typ platby za něj a přímo si jej takto zakoupit. Obrázek 1 (náhled úvodní strany) Popis cílové skupiny uživatelů: Webové stránky jsou navrženy tak, aby je mohl obsluhovat kdokoli se základní znalostí navigace na počítači, případně nějakém mobilním zařízení a se základní schopností pohybovat se po internetu, aby se maximalizoval počet případných zákazníků. Vzhledem k nabídce obchodu se ale dá prohlásit, že je zejména zaměřen na technicky zdatnější zákazníky, kteří jsou schopni operovat s počítačovými zařízeními lépe, než průměrný uživatel. 4
Přehled případů užití: Use Case 1 Navigace v nabídce Otestování přehlednosti hlavního menu produktů. Schopnost rychlého a intuitivního nalezení vytouženého typu produktu. Testování, zda jsou položky logicky rozčleněny a zda netrvá zákazníkovi příliš dlouho, než nalezne, co hledá. Testování bude pomocí kognitivního způsobu i heurestické evaulace. Use Case 2 Vyhledání určitého typu produktu specifikováním jeho vlastností Po nalezení určitého produktu testováno v use case 1 - pokus o lepší specifikování, jaký produkt je hledán. Testování možností specifikování vlastností hledaného zboží a přehlednost tohoto seznamu. Testování bude pomocí heurestické evaulace. Use Case 3 Nakup zboží (možnosti při dokončování objednávky) Po nalezení vytouženého produktu a vybrání jej k nákupu, testování možností nabízených při specifikaci objednávky. Testování přehlednosti navigace při dokončování objednávky, při vybírání typu platby, způsobu doručení atd. Testování, jak rychle a s jak velikými problémy, je běžný zákazník schopný dokončit objednávku a nechat si zaslat zboží. Testování bude pomocí kognitivního způsobu. Use Case 4 Navigace ve stránkách na mobilním zařízení Testování, jak dobře jsou stránky navštěvovatelné na mobilních zařízeních, jako jsou mobilní telefony a jiná zařízení s přístupem k internetu a mající malý displej. Otestování, zda mají stránky i mobilní verzi. A pokud neexistuje, tak jak rychlá a přehledná je navigace na těchto stránkách pomocí mobilního zařízení. Testování bude pomocí heurestické evaulace. 5
Use Case 1 Navigace v nabídce Cíl: Pro testování se pokusíme najít mezi produkty herní grafické karty. Výběr dále specifikovat nebudeme, stačí seznam nabízených karet. Kognitivní průchod: Q1 Q2 Q3 Krok 1 Ano Ano Ano Krok 2 Ano Ano Ano Krok 3 Ano Ano Ano Krok 1 Vybrání jedné záložky ze seznamu v hlavním menu. V tomto případě se nabízí logicky pouze jedna správná varianta Komponenty, která je přehledně označena a rychle volitelná. Po najetí myší se nabídka rozvine na seznam jednotlivých komponent. Obrázek 2 (výběr komponenty) Krok 2 Vybrání kategorie zboží grafické karty. Položka je náležitě označena a sama se nabízí. Po kliknutí na ni se přepne stránka do seznamu grafických karet. 6
Obrázek 3 (seznam grafických karet) Krok 3 Omezení výběru všech nabízených grafických karet, na pouze herní zařízení. Výběrem Herní v levém menu se omezí výběr na hledané karty. Obrázek 4 (vybrání herních grafických karet) 7
Heureistická evaulace: 1. Příliš mnoho reklam na stránkách odvádí pozornost, rozptyluje zákazníka a znepřehledňuje stránky. To vede ke špatné k problémovější navigaci a prodlužuje se tak čas nutný k proklikání se k vytoužené položce. Porušuje: estetický a minimální design (priorita = nízká). 2. Špatně navržené menu pro vybírání herních grafických karet. Je nutné příliš dlouho zkoumat stránku, než se dané tlačítko pro omezení výběru nalezne. Jedná se o špatný design. Porušuje: estetický a minimální design (priorita = nízká). Závěr: Kognitivní průchod při testování dopadl velice dobře a není k němu žádná výtka. Za to Heureistická evaulace odhalila dva menší problémy, které jsou spíše kosmetického typu a nejsou nutné opravovat. Při opravě by stačilo pouze zvýraznit dané položky oproti zbytku stránek. 8
Use Case 2 Vyhledání určitého typu produktu specifikováním jeho vlastností Cíl: Mezi zbožím typu herní grafické karty specifikujeme vlastnosti zboží tak, aby byly zobrazeny pouze karty NVIDIA, PCI-EXPRES 3.0, DDR5 a mezi 3000,- a 5000,- Kč. Postup: Krok 1 Vybrat v menu vlevo veškeré chtěné vlastnosti, až na omezení ceny. Zatrháváním políček se omezuje okamžitě seznam zobrazovaných produktů. Obrázek 5 (výběr vlastností grafických karet) Krok 2 Omezení ceny nalezených výrobků na požadované rozmezí. Posunováním levého a pravého posuvníku se navolí správné hodnoty minimální a maximální ceny zboží. 9
Obrázek 6 (výběr ceny karet) Heureistická evaulace: 1. Při zatrhávání položek jednotlivých vlastností se nemusí měnit výběr na první straně seznamu a uživatel pak nepozná, zda se již změny projevili, pokud není se systémem seznámen. Pak bude hledat tlačítko na provedení změn a zdržovat se tak. Porušuje: zobrazování systémového statutu (priorita = nízká). 2. Volení ceny je poměrně nepřesné a chvíli trvá, než se nastaví správná hodnota minimální a maximální částky. Porušuje: flexibilita a efektivnost použití (priorita = nízká). Závěr: Test proběhl dobře, kdy se objevili pouze dva minimální problémy, které ale nijak nezasahují do použití služby na omezení zobrazované nabídky podle vlastností produktů. První z problémů by byl odstraněn obyčejnou hláškou systému, že se něco děje a druhý možností zadání ceny přímo napsáním. 10
Use Case 3 Nakup zboží (možnosti při dokončování objednávky) Cíl: Vybrání jedné ze zobrazovaných položek a projití celým formulářem pro její objednaní. Postup: Krok 1 Při vybrané jedné hledané položky, kliknout na tlačítko Do košíku, kdy vybíráme položku k nákupu. Obrázek 7 (výběr položky k nákupu) Krok 2 Přejití k objednávce. Vyskočilo okamžitě okno, které nabízí specifikovat objednávku a dokončit ji tak. 11
Obrázek 8 (přejití k objednávce) Krok 3 Specifikace platby za nákup a způsob dodání zásilky. Obrázek 9 (specifikace platby a vyzvednutí zásilky) Krok 4 Vyplnění dodacích a kontaktních údajů potřebných pro dodání zásilky. 12
Krok 5 Kontrola a potvrzení objednávky. Obrázek 10 (vyplnění dodacích údajů) Obrázek 11 (potvrzení zásilky) 13
Kognitivní průchod: Q1 Q2 Q3 Krok 1 Ano Ano Ano Krok 2 Ano Ano Ano Krok 3 Ano Ano Ano Krok 4 Ano Ano Ano Krok 5 Ano Ano Ano Závěr: Poměrně překvapivě dopadl test naprosto bezchybně, i když se dá na dané věci poměrně hodně pokazit. Systém zákazníka navede skrz veškeré kroky potřebné pro objednání zboží. A dá se tedy říct, že není na něm třeba nic měnit. 14
Use Case 4 Navigace ve stránkách na mobilním zařízení Cíl: Otestovat webové stránky obchodu i na mobilním zařízení, přesněji mobilním telefonu Sony Ericsson W995 s displejem o úhlopříčce 3,5 palce. Testovat se bude především navigovatelnost v menu, specifikování vlastností hledaného produktu a objednávka zboží. Postup: Bod 1 Testování navigace v menu stránek. Možnosti a schopnost vybrat co je potřeba. Obrázek 12 (navigace na stránkách) Bod 2 Specifikování vlastností jednotlivých produktů tak, aby se výběr omezil pouze na požadované produkty. Obrázek 13 (specifikování vlastností) Bod 3 Projití celé objednávky, až ke konečnému dokončení nákupu. 15
Obrázek 14 (objednání zboží) Heureistická evaulace: 1. Absence verze stránek pro mobilní zařízení s malými displeji. Extrémně se tak zhoršuje navigovatelnost na stránkách. Porušuje: flexibilita a efektivnost použití (priorita = extrémní). Závěr: Test odhalil jen jeden problém, který je ovšem natolik extrémní, že vyžaduje okamžitou opravu a to nejspíše doděláním verze stránek pro zařízení s malými displeji. Problém poškozuje stránky zhoršenou navigací a odrazuje tak potencionální zákazníky. 16
Závěr: Webové stránky obchodní společnosti Czech Computer (CZC.cz) jsou opravdu na dobré úrovni. Veškerá navigace na nich je velice pohodlná, intuitivní a poměrně rychlá. Jediným problémem je zobrazování stránek na mobilních zařízeních s malými displeji, kdy je navigace na stránkách téměř naprosto znemožněna. Jinak se jedná o velice povedenou webovou aplikaci, která naprosto bezpodmínečně plní svou funkci. 17