České vysoké učení technické v Praze. Testování e-shopu Softcom

Transkript

1 České vysoké učení technické v Praze Fakulta elektrotechnická Testování e-shopu Softcom Semestrální práce předmětu A4B39TUR Filip Ryšavý rysavfi1@fel.cvut.cz 2014 / 2015

2 Obsah 1. Úvod Popis aplikace Popis uživatelů Přehled testovaných případů užití Registrace nového uživatele Vyhledání produktu v katalogu Objednání produktu Porovnání produktů Metody testování Kognitivní průchod Heuristická evaluace Testování kognitivním průchodem Registrace nového uživatele Vyhledání produktu Objednání produktu Porovnání dvou produktů Testování heuristickou evaluací Registrace nového uživatele Vyhledání produktu Objednání produktu Porovnání dvou produktů Přehled nálezů Závěr

3 1. Úvod 1.1. Popis aplikace Testovanou aplikací je e-shop společnosti Softcom ( Společnost Softcom je zaměřená na trh s výpočetní technikou a elektronikou. Registrovaný zákazník v e-shopu má přehled objednávek, faktur, reklamací apod. Může také zadávat reklamace, získává body, které je může směnit za odměny, atd Popis uživatelů Cílovou skupinou uživatelů, pro které je e-shop určen, jsou všichni uživatelé internetu zhruba ve věku let. Od uživatele se nečeká žádná pokročilá znalost práce s počítači. Uživateli stačí znát základní ovládání svého počítače, umět ovládat svůj webový prohlížeč, vyplnit formulář a zobrazit si Přehled testovaných případů užití Registrace nového uživatele Jedná se o případ užití, kterým si každý nový uživatel musí projít. Je to jeden z klíčových případů užití, protože pokud je už při něm potenciální uživatel odrazen a nezaregistruje se, společnost přichází o zákazníky. Uživatel bude muset vyplnit kontaktní údaje a potvrdit svou registraci Vyhledání produktu v katalogu Před tím, než uživatel bude moci něco koupit, to musí v e-shop najít. Jednou z možností nalezení požadovaného zboží je využití katalogu. Ten je rozdělen do kategorií a obsahuje filtrování. Pro potřeby testování bude v katalogu hledána herní myš od výrobce A4 Tech v cenové kategorii cca Kč Objednání produktu Když uživatel nalezl, co si chce koupit, musí si to objednat. To udělá tak, že požadované zboží přidá do košíku a poté zadá detaily koupě jako způsob platby apod. Pokud by uživatel nebyl schopen tímto procesem projít, tak kromě nespokojeného uživatele opětovně ztrácí společnost zisk Porovnání produktů Pokud uživatel narazí na několik podobných produktů, e-shop mu je umožní porovnat. Jediné, co uživatel musí udělat, je vybrat produkty k porovnání. Pokud by toto uživatel nebyl schopen provést, musel by produkty porovnávat manuálně a to by mohlo zabrat více času Metody testování Kognitivní průchod První použitá metoda je metoda kognitivního průchodu. Metoda je určená pro testování uživatelského rozhraní bez uživatele. Metoda se používá k otestování uživatelského rozhraní s 3

4 přesně daným scénářem. Metoda testuje, zda uživatel bude schopen scénář zvládnout a jak se od něj odchyluje. Na začátku scénáře se klade otázka: Q0: Čeho chce uživatel dosáhnout? Poté se v každém kroku scénáře kladou tyto otázky: Q1: Bude uživateli zřejmé, co udělat? Q2: Spojí si uživatel správně popisek akcí se svým cílem? Q3: Dostane uživatel dostatečnou odezvu? Heuristická evaluace Druhá použitá metoda je metoda heuristické evaluace. Metoda je také určená pro testování uživatelského rozhraní bez uživatele. Heuristická evaluace využívá sadu předem definovaných heuristik. Uživatelské rozhraní je poté testováno, zda tyto heuristiky dodržuje. Pro testování využívám heuristiky Jakoba Nielsena z roku Tyto heuristiky jsou: 1. Viditelnost stavu systému 2. Spojení mezi systémem a reálným světem 3. Uživatelská kontrola a svoboda 4. Konzistence a standardizace 5. Prevence chyb 6. Rozpoznání místo vzpomínání 7. Flexibilní a efektivní použití 8. Estetický a minimalistický design 9. Pomoc uživatelů poznat, pochopit a vzpamatovat se z chyb 10. Nápověda a návody 4

5 2. Testování kognitivním průchodem 2.1. Registrace nového uživatele Výchozí stav Výchozím stavem je úvodní stránka e-shopu Uživatel chce dosáhnout úspěšné registrace, tzn. obrazovky, kde mu bude sděleno, že registrace proběhla v pořádku a že mu byl zaslán aktivační . Krok 1 Obrázek 1 - Úvodní stránka e-shopu Uživatel musí otevřít registrační formulář kliknutím na odkaz "Registrace" (viz obrázek 1). Q1 Ano Potřeba najít registraci Q2 Ano Odkaz je jasně pojmenován registrace Q3 Ano Zobrazí se formulář 5

6 Krok 2 Obrázek 2 - Registrační formulář Obrázek 3 - Upozornění na špatně vyplněný registrační formulář Uživatel musí vyplnit formulář a kliknout na tlačítko "Potvrdit" (viz obrázek 2). Q1 Ano Vyplnit formulář a potvrdit Q2 Ano Odeslat formulář před vyplněním nemá smysl Q3 Ano Zobrazí se chybová hláška nebo informace o úspěšné registraci 6

7 Koncový stav Pokud uživatel špatně vyplnil formulář, je na to upozorněn a musí opakovat krok 2 (viz obrázek 3). Pokud vše vyplnil dobře, zobrazí se mu obrazovka oznamující mu, že registrace proběhla v pořádku a že si má vyzvednou registrační Vyhledání produktu Výchozí stav Výchozím stavem je úvodní stránka e-shopu Uživatel chce dosáhnout nalezení herní myši od výrobce A4 Tech v cenovém rozpětí cca Kč, tzn. stránky příslušného produktu. Krok 1 Uživatel musí zvolit příslušnou kategorii a podkategorie v levé části stránky (viz obrázek 1), konkrétně "periferie", "myši" a "herní". K herním myším se dá dostat i jinak, pro testování jsem zvolil tento scénář. Q1 Ano Potřeba najít typ, resp. kategorii produktu Q2 Ano Sloupec s kategoriemi je označen nápisem Kategorie Q3 Ano Každá kategorie zobrazí své podkategorie a produkty Krok 2 Obrázek 4 - Seznam produktů po zvolení kategorií Uživatel musí kliknout na výrobce A4 Tech ve filtrování (viz obrázek 4). Krok 2 a krok 3 se mohou během testování zaměnit. 7

8 Q1 Ne Seznam výrobců je zaškrtávací seznam, avšak jména výrobců jsou odkazy, uživateli nemusí být jasné, na co 1 kliknout Q2 Ano Oblast nastavení filtru má položku výrobci Q3 Ne Filtrace se provede okamžitě po kliknutí, občas se nedá postřehnout, že se něco stalo 2 Krok 3 Uživatel musí nastavit cenové rozpětí cca Kč ve filtrování (viz obrázek 4). Krok 2 a krok 3 se mohou během testování zaměnit. Q1 Ano Nastavit cenové rozmezí Q2 Ano Oblast nastavení filtru má posuvník na cenové rozmezí Q3 Ne Filtrace se provede okamžitě po nastavení, občas se nedá postřehnout, že se něco stalo 3 Krok 4 Obrázek 5 - Vyfiltrované produkty Uživatel musí zvolit produkt, který chce zobrazit, kliknutím na název nebo obrázek (viz obrázek 5). Q1 Ano Zvolit produkt Q2 Ano Produkty jsou rozlišitelné, název je odkaz Q3 Ano Zobrazí se stránka produktu Koncový stav Po kliknutí na produkt se uživateli zobrazí stránka s produktem (viz obrázek 6). 8

9 2.3. Objednání produktu Výchozí stav Výchozím stavem je stránka produktu, který chce uživatel koupit (viz obrázek 6). Uživatel chce dosáhnout zakoupení produktu, tzn. stránky, kde mu budou zobrazeny koncové detaily koupě. Krok 1 Obrázek 6 - Stránka produktu Uživatel musí kliknout na tlačítko "Do košíku" (viz obrázek 6). Q1 Ano Chce-li produkt koupit, musí ho přidat do košíku Q2 Ano Jasné označení Q3 Ano Vyskočí potvrzení, že produkt byl přidán do košíku Krok 2 Uživatel musí kliknout na ikonu košíku v pravém horním rohu stránky (viz obr. 6). Q1 Ano Zobrazit košík Q2 Ne Hodil by se popisek Zobrazit košík 4 Q3 Ano Zobrazí se obsah košíku 9

10 Krok 3 Obrázek 7 - Košík Uživatel musí kliknout na tlačítko "Pokračovat v objednávání. Q1 Ne Nápis tlačítka je zavádějící, uživatel si může myslet, že bude pokračovat v přidávání produktů do košíku 5 Q2 Ano Tlačítko je výrazné, jeví se jako vhodné ke kliknutí Q3 Ano Zobrazí se druhá část procesu objednání Krok 4 Obrázek 8 - Zadání kontaktních údajů 10

11 Uživatel musí zadat kontaktní údaje pomocí přihlášení nebo je jako nepřihlášený uživatel vyplnit. Pro účely testování zvolím variantu pomocí přihlášení. Poté musí kliknout na tlačítko "Pokračovat v objednávání. Q1 Ano Jediná možnost stránky je přihlásit se nebo zadat údaje jako nepřihlášený uživatel Q2 Ano Stránka má jednoduché členění Q3 Ano Zobrazí se třetí krok procesu objednání Krok 5 Obrázek 9 - Výběr způsobu dopravy a způsobu platby 1 Obrázek 10 - Výběr způsobu dopravy a způsobu platby 2 11

12 Uživatel musí zatrhnout způsob dopravy a způsob platby. Poté musí kliknout na tlačítko "závazně objednat". Q1 Ano Doplnit informace o koupi Q2 Ano Každá část má svůj titulek Q3 Ano Zobrazí se přehled koupě Koncový stav Uživateli se zobrazí stránka s detaily koupě Porovnání dvou produktů Výchozí stav Výchozím stavem je stránka katalogu s několika produkty. Uživatel chce porovnat dva podobné produkty, tzn. zobrazit stránku s přehledem obou dvou produktů. Krok 1 Obrázek 11 - Katalog produktů Uživatel musí kliknout na ikonu vah u produktů, který chce porovnat. Q1 Q2 Q3 Ikonku vah je možné vidět jak v poli filtru, tak u Ne jednotlivých produktů, uživatel nemusí vědět, na co 6 kliknout Ano Rovnoramenné váhy jsou jako symbol pro porovnání postačující Ano Uživatel je informován vyskakovací oknem o přidání produktu k porovnání 12

13 Krok 2 Uživatel musí kliknout na ikonu vah nad produkty. Q1 Ano Zde už bude jasné, na kterou ikonu kliknout Q2 Ano Rovnoramenné váhy jsou jako symbol pro porovnání postačující Q3 Ano Zobrazí s porovnání produktů Koncový stav Pokud uživatel nevybral žádný produkt k porovnání, je na to upozorněn a musí postupovat od kroku 1. Pokud uživatel vybral dostatečné množství produktů, zobrazí se mu stránka s přehledem. 13

14 3. Testování heuristickou evaluací 3.1. Registrace nového uživatele Heuristika Popis Číslo nálezu 5 Červenou barvou se většinou označuje chybně vyplněné pole, zde všechny položky zůstávají pořád červené (viz obrázek 2) 7 9 Výpis chyb je pěkný, ale po zavření vyskakovacího okna musí uživatel pátrat jen ve své hlavě (viz obrázek 3) Vyhledání produktu Žádný výrazný problém nebyl nalezen Objednání produktu Heuristika Popis Číslo nálezu 5 Tlačítko pokračovat v objednávání je aktivní i přesto, že nic nebylo vyplněno (viz obrázek 8) 9 8 Položek je mnoho s několika informacemi (viz obrázek 9) Porovnání dvou produktů Žádný výrazný problém nebyl nalezen. 14

15 4. Přehled nálezů Pro účely testování zavádím tři priority nálezů. Vysoká priorita - to jsou nálezy takové, které poškozují uživatele, znemožňují funkci aplikace apod. Střední priorita - to jsou nálezy takové, které uživateli zkomplikují život, ale aplikace je stále použitelná. Nízká priorita - to jsou drobné a kosmetické problémy. Číslo nálezu Popis Priorita Návrh na zlepšení 1 Seznam výrobců je zaškrtávací seznam, avšak jména výrobců jsou odkazy, Střední Zrušit odkazy uživateli nemusí být jasné, na co kliknout 2 Filtrace se provede okamžitě po kliknutí, občas se nedá postřehnout, že se něco stalo Střední Umožnit uživateli potvrdit filtry tlačítkem nebo přidat nějaké upozornění Filtrace se provede okamžitě po nastavení, občas se nedá postřehnout, že se něco stalo Hodil by se popisek Zobrazit košík Nápis tlačítka je zavádějící, uživatel si může myslet, že bude pokračovat v přidávání produktů do košíku Ikonku vah je možné vidět jak v poli filtru, tak u jednotlivých produktů, uživatel nemusí vědět, na co kliknout Červenou barvou se většinou označuje chybně vyplněné pole, zde všechny položky zůstávají pořád červené (viz obrázek 2) Výpis chyb je pěkný, ale po zavření vyskakovacího okna musí uživatel pátrat jen ve své hlavě (viz obrázek 3) Tlačítko pokračovat v objednávání je aktivní i přesto, že nic nebylo vyplněno (viz obrázek 8) Položek je mnoho s několika informacemi (viz obrázek 9) Střední Nízká Střední Střední Střední Střední Střední Střední Umožnit uživateli potvrdit filtry tlačítkem nebo přidat nějaké upozornění Přidat popisek Změnit popisek tlačítka Změnit ikonu nebo přidat popisek Změnit barvu Zvýraznit chyby červeně Zablokovat tlačítko Použít postupný výběr 15

16 5. Závěr Aplikace má hodně problémů, které uživateli zkomplikují život, ale neznemožní použití aplikace. Našlo se i pár kosmetických problémů. Aplikace je použitelná, ale, aby se o uživateli dalo říci, že je spokojen, musí být ještě hodně vylepšena. 16