Č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ý
[email protected] 2014 / 2015
Obsah 1.
Úvod ................................................................................................................................... 3 1.1.
Popis aplikace .............................................................................................................. 3
1.2.
Popis uživatelů ............................................................................................................. 3
1.3.
Přehled testovaných případů užití ............................................................................... 3
1.3.1.
Registrace nového uživatele ................................................................................ 3
1.3.2.
Vyhledání produktu v katalogu ............................................................................ 3
1.3.3.
Objednání produktu ............................................................................................. 3
1.3.4.
Porovnání produktů ............................................................................................. 3
1.4.
2.
3.
Metody testování ........................................................................................................ 3
1.4.1.
Kognitivní průchod ............................................................................................... 3
1.4.2.
Heuristická evaluace............................................................................................. 4
Testování kognitivním průchodem..................................................................................... 5 2.1.
Registrace nového uživatele ........................................................................................ 5
2.2.
Vyhledání produktu ..................................................................................................... 7
2.3.
Objednání produktu .................................................................................................... 9
2.4.
Porovnání dvou produktů .......................................................................................... 12
Testování heuristickou evaluací ....................................................................................... 14 3.1.
Registrace nového uživatele ...................................................................................... 14
3.2.
Vyhledání produktu ................................................................................................... 14
3.3.
Objednání produktu .................................................................................................. 14
3.4.
Porovnání dvou produktů .......................................................................................... 14
4.
Přehled nálezů .................................................................................................................. 15
5.
Závěr ................................................................................................................................. 16
2
1.
Úvod
1.1. Popis aplikace Testovanou aplikací je e-shop společnosti Softcom (http://softcom.cz). 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.
1.2. 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 18 - 60 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 e-mail.
1.3. Přehled testovaných případů užití 1.3.1. 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.
1.3.2. 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 0 - 500 Kč.
1.3.3. 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.
1.3.4. 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.
1.4. Metody testování 1.4.1. 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
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?
1.4.2. 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 1994. 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
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 http://softcom.cz. 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í e-mail. 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 Q2 Q3
Odpověď Ano Ano Ano
Popis Potřeba najít registraci Odkaz je jasně pojmenován – registrace Zobrazí se formulář
5
Číslo nálezu
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 Q2
Odpověď Ano Ano
Q3
Ano
Popis Vyplnit formulář a potvrdit Odeslat formulář před vyplněním nemá smysl Zobrazí se chybová hláška nebo informace o úspěšné registraci
6
Číslo nálezu
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í e-mail.
2.2. Vyhledání produktu Výchozí stav Výchozím stavem je úvodní stránka e-shopu http://softcom.cz. Uživatel chce dosáhnout nalezení herní myši od výrobce A4 Tech v cenovém rozpětí cca 0 - 500 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 Q2 Q3
Odpověď Ano Ano Ano
Popis Potřeba najít typ, resp. kategorii produktu Sloupec s kategoriemi je označen nápisem „Kategorie“ Každá kategorie zobrazí své podkategorie a produkty
Číslo nálezu
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
Odpověď Q1
Ne
Q2
Ano
Q3
Ne
Popis Seznam výrobců je zaškrtávací seznam, avšak jména výrobců jsou odkazy, uživateli nemusí být jasné, na co kliknout Oblast nastavení filtru má položku výrobci Filtrace se provede okamžitě po kliknutí, občas se nedá postřehnout, že se něco stalo
Číslo nálezu 1
2
Krok 3 Uživatel musí nastavit cenové rozpětí cca 0 - 500 Kč ve filtrování (viz obrázek 4). Krok 2 a krok 3 se mohou během testování zaměnit.
Q1 Q2
Odpověď Ano Ano
Q3
Ne
Popis Nastavit cenové rozmezí Oblast nastavení filtru má posuvník na cenové rozmezí Filtrace se provede okamžitě po nastavení, občas se nedá postřehnout, že se něco stalo
Číslo nálezu
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 Q2 Q3
Odpověď Ano Ano Ano
Popis Zvolit produkt Produkty jsou rozlišitelné, název je odkaz Zobrazí se stránka produktu
Koncový stav Po kliknutí na produkt se uživateli zobrazí stránka s produktem (viz obrázek 6).
8
Číslo nálezu
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 Q2 Q3
Odpověď Ano Ano Ano
Popis Chce-li produkt koupit, musí ho přidat do košíku Jasné označení Vyskočí potvrzení, že produkt byl přidán do košíku
Číslo nálezu
Krok 2 Uživatel musí kliknout na ikonu košíku v pravém horním rohu stránky (viz obr. 6).
Q1 Q2 Q3
Odpověď Ano Ne Ano
Popis Zobrazit košík Hodil by se popisek „Zobrazit košík“ Zobrazí se obsah košíku
9
Číslo nálezu 4
Krok 3
Obrázek 7 - Košík
Uživatel musí kliknout na tlačítko "Pokračovat v objednávání. Odpověď Q1
Ne
Q2 Q3
Ano Ano
Popis 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 Tlačítko je výrazné, jeví se jako vhodné ke kliknutí Zobrazí se druhá část procesu objednání
Krok 4
Obrázek 8 - Zadání kontaktních údajů
10
Číslo nálezu 5
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í. Odpověď Q1
Ano
Q2 Q3
Ano Ano
Popis Jediná možnost stránky je přihlásit se nebo zadat údaje jako nepřihlášený uživatel Stránka má jednoduché členění 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
Číslo nálezu
Uživatel musí zatrhnout způsob dopravy a způsob platby. Poté musí kliknout na tlačítko "závazně objednat".
Q1 Q2 Q3
Odpověď Ano Ano Ano
Popis Doplnit informace o koupi Každá část má svůj titulek Zobrazí se přehled koupě
Číslo nálezu
Koncový stav Uživateli se zobrazí stránka s detaily koupě.
2.4. 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. Odpověď Q1
Ne
Q2
Ano
Q3
Ano
Popis 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 Rovnoramenné váhy jsou jako symbol pro porovnání postačující Uživatel je informován vyskakovací oknem o přidání produktu k porovnání
12
Číslo nálezu 6
Krok 2 Uživatel musí kliknout na ikonu vah nad produkty.
Q1
Odpověď Ano
Q2
Ano
Q3
Ano
Popis Zde už bude jasné, na kterou ikonu kliknout Rovnoramenné váhy jsou jako symbol pro porovnání postačující Zobrazí s porovnání produktů
Číslo nálezu
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
3.
Testování heuristickou evaluací
3.1. Registrace nového uživatele Heuristika 5 9
Popis Číslo nálezu Červenou barvou se většinou označuje chybně vyplněné pole, 7 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í 8 uživatel pátrat jen ve své hlavě (viz obrázek 3)
3.2. Vyhledání produktu Žádný výrazný problém nebyl nalezen.
3.3. Objednání produktu Heuristika 5 8
Popis 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)
3.4. Porovnání dvou produktů Žádný výrazný problém nebyl nalezen.
14
Číslo nálezu 9 10
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
1
2
3 4
5
6
7
8
9
10
Popis Seznam výrobců je zaškrtávací seznam, avšak jména výrobců jsou odkazy, uživateli nemusí být jasné, na co kliknout Filtrace se provede okamžitě po kliknutí, občas se nedá postřehnout, že se něco stalo 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)
15
Priorita
Návrh na zlepšení
Střední
Zrušit odkazy
Střední
Střední
Umožnit uživateli potvrdit filtry tlačítkem nebo přidat nějaké upozornění Umožnit uživateli potvrdit filtry tlačítkem nebo přidat nějaké upozornění
Nízká
Přidat popisek
Střední
Změnit popisek tlačítka
Střední
Změnit ikonu nebo přidat popisek
Střední
Změnit barvu
Střední
Zvýraznit chyby červeně
Střední
Zablokovat tlačítko
Střední
Použít postupný výběr
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
