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 [email protected] 2013/2014 Otevřená informatika

Obsah 1

2

Úvod ................................................................................................................................................ 3 1.1

Popis internetového obchodu ................................................................................................. 3

1.2

Popis cílové skupiny................................................................................................................. 3

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

4.1.1

Scénář pro use case ......................................................................................................... 5

4.1.2

Provedení testu ............................................................................................................... 6

4.2


4.2.2

Provedení testu ............................................................................................................... 8

Kognitivní průchod – Objednat zboží ...................................................................................... 9

4.3.1


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

Shrnutí testování ........................................................................................................................... 14 5.1

6

Kognitivní průchod – Změnit/přidat dodací adresu ................................................................ 7

4.2.1

4.3

5

Kognitivní průchod – Registrovat si nový účet ........................................................................ 5

Přehled nalezených problémů............................................................................................... 14

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 2. Otázka 3. Otázka

N-1: Ne, uživatel nevidí odkaz pro registraci a neví, kde ho hledat. Ano 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)


Ano Ano Ano, zobrazí se mu registrační formulář


Ano Ano Ano, jednotlivá políčka formuláře budou držet hodnoty vyplněné uživatelem

6


Ano Ano Ano

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


Ano Ano Ano, zobrazí se mu přihlašovací formulář




Ano Ano Ano, ukáže se, že je přihlášen


N-2: Ne, uživatele napadne zvolit funkci učet, místo svého jména. Ano 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)


Ano Ano Ano, zobrazí se mu formulář podobný registračnímu




Ano Ano Ano, oznámí uživateli, že data byla uložená

8

4.3 Kognitivní průchod – Objednat zboží 4.3.1 0) 1) 2) 3) 4) 5) 6) 7)

Scénář pro use case Uživatel si chce objednat zboží. Uživatel vybere „funkci“ koupit u vybraného produktu. Uživatel zvolí funkci „zobrazit košík“. Uživatel zvolí možnost „jsem registrován“, kde se rovnou přihlásí. Uživatel zvolí možnost „Osobně na zvolené prodejně“. Uživatel zvolí své město. Uživatel zvolí způsob platby, který se mu nejvíce hodí. 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

Obrázek 9: Část formuláře pro objednání produktu 4.3.2

Provedení testu


Ano Ano Ano, zobrazí se mu informační část


N-3: Ne, uživatel si může myslet, že je v košíku, pokud chce objednat pouze jeden produkt Ano 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)


Ano Ano Ano, zobrazí se mu přihlašovací formulář, kde se následně uživatel přihlásí


Ano Ano 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


Ano Ano 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 Ano 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 Ano Ano

4.4 Heuristická evaluace - Vyhledávat podle parametrů 4.4.1 0) 1) 2) 3) 4) 5)

Scénář pro use case Uživatel chce najít černý 15 palcový notebook značky Lenovo Uživatel zvolí možnost „Počítače“ Uživatel zvolí kategorii „15-16“ u notebooku Uživatel vybere značku notebooku Uživatel vybere barvu notebooku 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í

P-1

Když si chci vybrat notebook, nikde nejsou vidět. Musí se zvolit „počítače“(viz obrázek 10), nebo chvíli podržet myš na „počítači“, kde vyskočí malé menu.

H7 – Flexibility and efficiency of use

Přejmenovat odkaz na „Počítače a notebooky“

P-2

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)

H1 – Visibility of system status

Vhodné by bylo okamžitá změna a ne až zvolení „zobrazit“, ale to by mohlo přinést jiné problémy.

P-3

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)

H8 – Aesthetic and minimalistic design

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. 2. 3. 4.

Kosmetický problém Málo závažný problém Středně závažný problém Velmi závažný problém

5.1 Přehled nalezených problémů Use case Problém Doporučení Priorita

Registrovat si nový účet

Use case Problém Doporučení Priorita

Změnit/přidat dodací adresu

Use case Problém Doporučení Priorita Use case Problém Doporučení Priorita

Označení

N-1

Obrázek

2

Označení

N-2

Obrázek

6

Označení

N-3

Uživatel nevidí odkaz pro registraci a neví, kde ho hledat. Přidáním odkazu registrace na hlavní obrazovku. 4

Uživatele napadne zvolit funkci učet, místo svého jména. Pojmenováním „účtu“ jiným názvem například: zásilka 3 Objednat zboží

Uživatel si může myslet, že je v košíku, pokud chce objednat pouze jeden produkt Přidání informace, které by byla dosti viditelná a informovala uživatele, že se nenachází v košíku. 2 8 Obrázek Objednat zboží

Označení

-

Při výběrů parametru si uživatel musí pamatovat, co vše zvolil za parametry. Zvlášť 3 stránky pro formulář, který slouží k objednání produktu. 2

Obrázek 14

9

Use case Problém Doporučení Priorita Use case Problém Doporučení Priorita Use case Problém Doporučení Priorita

Vyhledávat podle parametrů

Označení

P-1

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. Přejmenovat odkaz na „Počítače a notebooky“ 1 Vyhledávat podle parametrů

Obrázek

10

Označení

P-2

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. Vhodné by bylo okamžitá změna a ne až zvolení „zobrazit“ 1 Vyhledávat podle parametrů

Obrázek

11 a 12

Označení

P-3

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). Ztmavit barvu menu ve filtru 1

Obrázek

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

11 a 12

Internetový obchod Mironet

Recommend Documents