Internetový obchod Mironet

České vysoké učení technické v Praze Fakulta elektrotechnická Internetový obchod Mironet Semestrální práce A2 Testování uživatelských rozhraní A4B39TUR Pavel Štíbal Stibapa1@fel.cvut.cz 2013/2014 Otevřená informatika

Obsah 1 Úvod... 3 1.1 Popis internetového obchodu... 3 1.2 Popis cílové skupiny... 3 2 Přehled testovaných use-cases... 4 2.1 Registrovat si nový účet... 4 2.2 Vyhledávat podle parametrů... 4 2.3 Vyhledat zboží pomocí vyhledávače... 4 2.4 Změnit/přidat dodací adresu... 4 2.5 Objednat zboží... 4 3 Testovací metody... 4 4 Testování... 5 4.1 Kognitivní průchod Registrovat si nový účet... 5 4.1.1 Scénář pro use case... 5 4.1.2 Provedení testu... 6 4.2 Kognitivní průchod Změnit/přidat dodací adresu... 7 4.2.1 Scénář pro use case... 7 4.2.2 Provedení testu... 8 4.3 Kognitivní průchod Objednat zboží... 9 4.3.1 Scénář pro use case... 9 4.3.2 Provedení testu... 10 4.4 Heuristická evaluace - Vyhledávat podle parametrů... 11 4.4.1 Scénář pro use case... 11 4.4.2 Provedení testu... 13 4.5 Heuristická evaluace - Vyhledat zboží pomocí vyhledávače... 13 4.5.1 Scénář pro use case... 13 4.5.2 Provedení testu... 14 5 Shrnutí testování... 14 5.1 Přehled nalezených problémů... 14 6 Závěr... 15 2

1 Úvod 1.1 Popis internetového obchodu Internetový obchod s elektronikou Mironet, který se nachází na webové adrese www.mironet.cz. Jedná se o internetový obchod (tzv. eshop), který je jedním z největších českých obchodů s počítači a spotřební elektronikou. Hlavní funkcí, výše zmíněného internetového obchodu je umožnit, snadný nákup z pohodlí domova. Jelikož má velké množství sortimentu, nabízí uživateli přehledné rozdělení zboží do kategorií. Je možno také využít filtrování podle parametrů požadovaných zákazníkem. Samozřejmě u každého produktu nechybí popis daného produktu. Obrázek 1: Úvodní obrazovka internetového obchodu Mironet 1.2 Popis cílové skupiny Cílovou skupinou pro nás budou osoby, které mají zájem o nákup elektroniky přes internet a chápou podstatu registrace vlastní účtu. Cílový věk není sice omezen, ale zkušenosti s ovládáním počítače a internetu jsou podstatné a měli by být alespoň základní. 3

2 Přehled testovaných use-cases 2.1 Registrovat si nový účet Pro plné využití poskytovaných služeb je důležité mít vlastní učet, na kterém si uživatel může navíc sledovat vlastní objednávku a tím může zjistit, jestli jí dostane daný den. Pokud si pošle objednané zboží na prodejnu, dostane textovou zprávu, jakmile je zásilka na prodejně, o možností jejího vyzvednutí. Registrovaný uživatel si může prohlížet historii svých objednávek. 2.2 Vyhledávat podle parametrů Jedna z největších výhod internetového obchodu, kterou nabízí uživateli, je vyhledávání podle parametrů. Protože při nákupu má každý uživatel své priority, nastaví si při vyhledávání své parametry. Využívají se zde dvě funkce, kategorie a filtry, které pomohou uživateli vybrat podmnožinu produktu podle kriterií. 2.3 Vyhledat zboží pomocí vyhledávače Pokud uživatel zná celý název produktu, který by si rád objednal, využije vyhledávač, ve kterém je zabudován našeptavač. Také slouží uživatelům, kteří se nechtějí využívat výše zmíněné vyhledávání, tedy vyhledávání podle parametrů. 2.4 Změnit/přidat dodací adresu V internetových obchodech by měla být možnost změnit nebo přidat dodací adresu. I v tomto internetovém obchodě si může uživatel změnit nebo přidat dodací adresu, která slouží pro dodání zboží na adresu vybranou zákazníkem, a ne na adresu trvalého bydliště. 2.5 Objednat zboží Nákup zboží je nejdůležitější funkci internetového obchodu. Jedná se o vkládání zboží do košíku. Výběr počtu kusů a výběr dopravy a platbu. Při žádném z těchto kroků nesmí nastat problém, který by odradil zákazníka od dokončení nákupu. 3 Testovací metody Use cases Registrovat si nový účet (2.1), Změnit/Přidat dodací adresu (2.4) a Objednat zboží (2.5) budu testovat metodou kognitivního průchodu. Use cases Vyhledávat podle parametrů (2.2) a Vyhledat zboží pomocí vyhledávače budu testovat metodou heuristickou evaluací. Testování kognitivním průchodem se hodí pro činnosti, u kterých se dají jasně odlišit jednotlivé kroky daného use case. Jedná se o testování bez uživatelů. Podstatou této metody je zodpovědění tří základních otázek u každého kroku testu. Odpověď na otázku může odhalit problém (chybu). Před testováním se musí zodpovědět otázka: 0) Čeho chce uživatel dosáhnout? 4

Ptáme se na následující otázky u každého kroku: 1) Je uživateli jasné, co má udělat? 2) Spojí si uživatel popisek akce s tím, jak má tu akci skutečně udělat? 3) Dostane uživatel dostatečnou zpětnou vazbu? Odpovědi na výše zmíněné otázky mohou být Ano/Ne, ale v případě negativní odpovědi je vhodné přidat popis problémů i případně jeho řešení. Testování heuristickou evaluací je testování, které se dělá bez účasti uživatelů. Používá se k ověření, zda nebyla porušena jedna, či více heuristik. To zahrnuje i prevenci chyb, konzistentnost, ohled na standardy, minimalistický design, přehlednost a srozumitelnost pro běžného uživatele. 4 Testování 4.1 Kognitivní průchod Registrovat si nový účet 4.1.1 Scénář pro use case 0) Uživatel si chce založit nový účet. 1) Uživatel zvolí funkci Přihlásit na hlavní obrazovce. 2) Uživatel zvolí funkci Nová registrace. 3) Uživatel vyplní povinné údaje. 4) Uživatel potvrdí vytvoření nové účtu. Obrázek 2: Přihlašovací tlačítko na hlavní obrazovce 5

Obrázek 3: Registrační tlačítko Obrázek 4: Část registračního formuláře 4.1.2 Provedení testu Krok 1 1. Otázka N-1: Ne, uživatel nevidí odkaz pro registraci a neví, kde ho hledat. Ano, zobrazí se okno, kde uvidí nová registrace Problém by mohl být vyřešen přidáním odkazu registrace na hlavní obrazovku. (viz obrázek 2) Krok 2 Ano, zobrazí se mu registrační formulář Krok 3 Ano, jednotlivá políčka formuláře budou držet hodnoty vyplněné uživatelem 6

Ano Krok 4 4.2 Kognitivní průchod Změnit/přidat dodací adresu 4.2.1 Scénář pro use case 0) Uživatel si chce změnit/přidat dodací adresu. 1) Uživatel zvolí funkci Přihlásit na hlavní obrazovce. 2) Uživatel vyplní přihlašovací údaje. 3) Uživatel zvolí Přihlásit. 4) Uživatel zvolí funkci Jméno a Přímení uživatele. 5) Uživatel zvolí funkci Nastavení osobního učtu. 6) Uživatel vyplní/změní údaje které chce. 7) Uživatel potvrdí změny. Obrázek 5: Přihlašovací formulář Obrázek 6: Odkaz na osobní údaje 7

4.2.2 Provedení testu Krok 1 Ano, zobrazí se mu přihlašovací formulář Krok 2 Ano, jednotlivá políčka formuláře budou držet hodnoty vyplněné uživatelem Krok 3 Ano, ukáže se, že je přihlášen Krok 4 1. Otázka N-2: Ne, uživatele napadne zvolit funkci učet, místo svého jména. Ano, zobrazí se mu okno se třemi možnostmi Problém by se dalo vyřešit pojmenováním účtu jiným názvem například: zásilka. (viz obrázek 6) Krok 5 Ano, zobrazí se mu formulář podobný registračnímu Krok 6 Ano, jednotlivá políčka formuláře budou držet hodnoty vyplněné uživatelem Krok 7 Ano, oznámí uživateli, že data byla uložená 8

4.3 Kognitivní průchod Objednat zboží 4.3.1 Scénář pro use case 0) Uživatel si chce objednat zboží. 1) Uživatel vybere funkci koupit u vybraného produktu. 2) Uživatel zvolí funkci zobrazit košík. 3) Uživatel zvolí možnost jsem registrován, kde se rovnou přihlásí. 4) Uživatel zvolí možnost Osobně na zvolené prodejně. 5) Uživatel zvolí své město. 6) Uživatel zvolí způsob platby, který se mu nejvíce hodí. 7) Uživatel zvolí funkci objednat. Obrázek 7: Část stránky vybraného produktu Obrázek 8: Informační část o vložení produktu do košíku 9

4.3.2 Provedení testu Obrázek 9: Část formuláře pro objednání produktu Krok 1 Ano, zobrazí se mu informační část Krok 2 1. Otázka N-3: Ne, uživatel si může myslet, že je v košíku, pokud chce objednat pouze jeden produkt Ano, zobrazí se mu košík s formulářem pro objednání produktu Problém by se mohl vyřešit přidání informace, které by byla dosti viditelná a informovala uživatele, že se nenachází v košíku. (viz obrázek 8) Krok 3 Ano, zobrazí se mu přihlašovací formulář, kde se následně uživatel přihlásí Krok 4 Ano, uživateli nezobrazí města, ke se nacházejí jejich pobočky Zde by se mohlo udělat zvlášť 3 stránky pro formulář, jako to má například Alza. Protože se mi zdá, že toho moc na této stránce a je lehce nepřehledná pro normální uživatele. (viz obrázek 9) 10

Krok 5 Ano, uživatel zůstává stále na stejné stránce, ale stránka si pamatuje, co uživatel zvolil za možnost Krok 6 Ano, uživatel zůstává stále na stejné stránce, ale stránka si pamatuje, co uživatel zvolil za možnost Ano Krok 5 4.4 Heuristická evaluace - Vyhledávat podle parametrů 4.4.1 Scénář pro use case 0) Uživatel chce najít černý 15 palcový notebook značky Lenovo 1) Uživatel zvolí možnost Počítače 2) Uživatel zvolí kategorii 15-16 u notebooku 3) Uživatel vybere značku notebooku 4) Uživatel vybere barvu notebooku 5) Uživatel vybere možnost zobrazit Obrázek 10: Stránka po výběru kategorie "Počítače" 11

Obrázek 11: Výběr značky z parametrů Obrázek 12: Výběr barvy z parametrů 12

4.4.2 Provedení testu Označení Popis problémů Typ problémů Možnosti řešení Když si chci vybrat notebook, nikde P-1 nejsou vidět. Musí se zvolit H7 Flexibility Přejmenovat odkaz na počítače (viz obrázek 10), nebo and efficiency of Počítače a notebooky chvíli podržet myš na počítači, use kde vyskočí malé menu. P-2 P-3 Při výběrů parametru si uživatel musí pamatovat, co vše zvolil za parametry. (viz obrázek 11 a obrázek 12) U výběru parametru můžou splynout barvy (barva menu ve filtru a barvy, která určuje, na kterém parametru se nacházím). (viz obrázek 11 a obrázek 12) H1 Visibility of system status H8 Aesthetic and minimalistic design Vhodné by bylo okamžitá změna a ne až zvolení zobrazit, ale to by mohlo přinést jiné problémy. Ztmavit barvu menu ve filtru 4.5 Heuristická evaluace - Vyhledat zboží pomocí vyhledávače 4.5.1 Scénář pro use case 0) Uživatel chce najít XBOX 360 1) Uživatel napíše do vyhledávače xbox 360 2) Uživatel zvolí funkce vyhledat Obrázek 13: Vyhledávání pomocí vyhledávače 13

4.5.2 Provedení testu U tohoto use case, jsem nešel ani jednu chybu, protože vyhledávač je vidět i tlačítko hledej. Jsou i barevně odlišené od okolí, kde se nacházejí. Našeptávač ve vyhledavači i samotný vyhledávač pracují, jak mají. (viz obrázek 13) 5 Shrnutí testování Z restování plyne, že hlavní problémem absence odkazu pro registraci. Další výrazná chyba je u košíku, který je lehce chaotický, pokud by se použila heuristická evaluace, mohlo by se objevit více problémů. Ale z funkčního hlediska nevykazuje uživatelské rozhraní žádný zásadní problém. Níže je uvedeno rychlý přehled nalezených nedostatků s odkazy na příslušný test a přidělenou prioritou. Priority jsou hodnocený čísly 1 až 4, následujícím způsobem: 1. Kosmetický problém 2. Málo závažný problém 3. Středně závažný problém 4. Velmi závažný problém 5.1 Přehled nalezených problémů Use case Registrovat si nový účet Označení N-1 Problém Uživatel nevidí odkaz pro registraci a neví, kde ho hledat. Doporučení Přidáním odkazu registrace na hlavní obrazovku. Priorita 4 Obrázek 2 Use case Změnit/přidat dodací adresu Označení N-2 Problém Uživatele napadne zvolit funkci učet, místo svého jména. Doporučení Pojmenováním účtu jiným názvem například: zásilka Priorita 3 Obrázek 6 Use case Objednat zboží Označení N-3 Problém Uživatel si může myslet, že je v košíku, pokud chce objednat pouze jeden produkt Doporučení Přidání informace, které by byla dosti viditelná a informovala uživatele, že se nenachází v košíku. Priorita 2 Obrázek 8 Use case Objednat zboží Označení - Problém Při výběrů parametru si uživatel musí pamatovat, co vše zvolil za parametry. Doporučení Zvlášť 3 stránky pro formulář, který slouží k objednání produktu. Priorita 2 Obrázek 9 14

Use case Vyhledávat podle parametrů Označení P-1 Problém Když si chci vybrat notebook, nikde nejsou vidět. Musí se zvolit počítače, nebo chvíli podržet myš na počítači, kde vyskočí malé menu. Doporučení Přejmenovat odkaz na Počítače a notebooky Priorita 1 Obrázek 10 Use case Vyhledávat podle parametrů Označení P-2 Problém Když si chci vybrat notebook, nikde nejsou vidět. Musí se zvolit počítače, nebo chvíli podržet myš na počítači, kde vyskočí malé menu. Doporučení Vhodné by bylo okamžitá změna a ne až zvolení zobrazit Priorita 1 Obrázek 11 a 12 Use case Vyhledávat podle parametrů Označení P-3 Problém U výběru parametru můžou splynout barvy (barva menu ve filtru a barvy, která určuje, na kterém parametru se nacházím). Doporučení Ztmavit barvu menu ve filtru Priorita 1 Obrázek 11 a 12 6 Závěr Testování ukázalo, že hlavním problémem webového rozhraní je občasná chaotičnost (mnoho informaci a ne úplně rozumě rozdělena). Některé prvky by mohly být větší např.: přihlášení, nebo rozumějí pojmenované. Velký problémem je absence odkazu pro registraci na hlavní straně (obrazovky). Nutno podotknout, že toho webové rozhraní má téměř všechny prvky dobře viditelné. Nejvyužívanější prvky má dostatečně veliké. Z hlediska funkčnosti nevykazuje žádný zásadní problém. 15