Alza.cz aplikace pro Windows Phone Semestrální práce z předmětu Testování uživatelského rozhraní A2 Testování bez uživatele Barbora Suchanová Otevřená informatika suchabar@fel.cvut.cz March 24, 2015
Obsah 1. Úvod... 3 1.1 Popis aplikace... 3 1.2 Cílová skupina... 3 1.3 Přehled testovaných use-cases... 4 1.3.1 Přihlášení uživatele... 4 1.3.2 Vyhledání zboží... 4 1.3.3 Objednání zboží... 4 1.3.4 Přidání objednaného zboží do oblíbených... 4 2. Test bez uživatele... 5 2.1 Výběr metody testu... 5 2.2 Scénáře a vyhodnocení testování pro jednotlivé use-cases... 5 2.2.2 Vyhledání určitého zboží... 7 2.2.3 Objednání určitého zboží... 11 2.2.4 Přidání objednaného zboží do oblíbených... 13 2.3 Seřazení nálezů dle priority a návrh řešení... 15
1. Úvod 1.1 Popis aplikace Alza.cz - nejznámější e-shop s elektronikou v České Republice a na Slovensku představila svoji stejnojmennou mobilní aplikaci pro platformu Windows Phone. Od webové verze se liší přehledností a hlavně zaměřením na nákup zboží bez (téměř) žádných reklam. Mobilní verze má v hlavní nabídce 4 hlavní kategorie zboží (Alza.cz, Alza media, Alza hračky a Alza trendy), které jsou rozdělené na hlavní pivot stránce (komponenta Windows Phone) do 4 pivot items viz obrázek 1. Dále každá kategorie nabízí svůj vlastní katalog zboží s dalšími podkategoriemi. Obrázek 1: Hlavní pivot stránka Uživatel má možnost se v aplikaci přihlásit a využívat s tím spojené výhody během nákupu zboží, jako automatické vyplnění fakturačních údajů, dodací adresy a mimo jiné i přehled archivních objednávek (+ i těch aktivních). K testování si vybírám právě tento tradiční proces nákupu zboží přihlášeného uživatele skrze mobilní aplikaci Alza.cz pro Windows Phone. Tento proces bude rozdělen do jednotlivých use-cases, které popíši níže. 1.2 Cílová skupina Běžní až mírně pokročilí uživatelé používající OS Windows Phone na svém mobilním telefonu. Aplikace je mířena na uživatele, kteří - nárazově potřebují něco zakoupit - nemají čas a jsou zvyklí řešit vše za chodu (na cestách) - jsou otevření novým technologiím a rádi zkoušejí nové věci
1.3 Přehled testovaných use-cases 1.3.1 Přihlášení uživatele Přihlášení uživatele je jeden ze základních kroků aplikace. Tento krok není nutný, pokud uživatel chce zboží pouze zakoupit, avšak v našem případě bude nutný, abychom mohli dokončit úkol, resp. část, ve které si budeme chtít objednané zboží přidat do oblíbených. 1.3.2 Vyhledání zboží Vyhledat zboží podle zadaných specifikací bude možné vyhledáním a postupným filtrováním zboží v katalogu zboží. Tento postup budeme také testovat v našem prvním testu bez uživatele. Druhou možností je vyhledání zboží přímo zadáním klíčových slov do vyhledávacího boxu a dále si zboží přefiltrovat podle výsledků. Tento postup můžeme očekávat u testování s uživatelem, kde z výběru vyhledávání může vzejít zajímavý výsledek testování. 1.3.3 Objednání zboží Tento use-case zahrnuje vložení daného zboží do nákupního košíku, postupný průchod nákupním košíkem volba platby, volby místa vyzvednutí dle zadání a potvrzení objednávky. V testování s uživatelem aplikace bude testovat participanta především, zda rychle a s jistotou projde nákupním procesem a neodradí ho ho od koupi. 1.3.4 Přidání objednaného zboží do oblíbených V případě, že si dané zboží chceme objednávat pravidelně, je praktické, mít takové zboží uložené, v našem případě toto řeší funkce přidat do oblíbených, která se nachází na detailu zboží. V testu bez uživatele budeme uvažovat, že k detailu zboží přejdeme z přehledu objednávek. V testu s uživatelem bude zajímavé, jakým sousledem kroků k detailu zboží participant přistoupí, zda přes přehled objednávek či znova přes vyhledávání.
2. Test bez uživatele 2.1 Výběr metody testu - Máme k dispozici dvě metody pro testování uživatelských rozhraní bez uživatele. Jednou z nich je metoda nazvaná Cognitive Walkthrough a druhá se nazývá Heuristic Evaluation. - Cognitive Walkthrough je metoda určená zejména pro testování aplikací s danou posloupností kroků pro dosažení cíle. - Heuristic Evaluation je metoda založená na expertní znalosti a ověřování, zda nejsou jednotlivé heuristiky v aplikaci porušeny. Tato metoda je především vhodná pro testování webových stránek. - V našem případě jsem zvolila metodu Cognitive Walkthrough, neboť se jedná o mobilní aplikaci, kde je potřeba pro jednotlivé akce provést víceméně přesně dané posloupnosti kroků a je tímto vhodnější než Heuristic Evaluation. 2.2 Scénáře a vyhodnocení testování pro jednotlivé use-cases - U testování budeme předpokládat, že uživatel si bude chtít koupit nejprodávanější SSD disk 2,5 značky Samsung o kapacitě nejméně 200 GB. - Platit budeme chtít hotově a zboží si budeme chtít vyzvednout na pobočce v Praze, kde bude zboží ihned k odběru. - Nakonec po objednání si budeme chtít dané zboží přidat do oblíbených. - Budeme předpokládat, že uživatel již má účet na Alze.cz a vyplněné fakturační údaje. Otázky*, na které se bude odpovídat v každém kroku scénáře: Otázka č. 1 Will the correct action(s) be evident to the users? Otázka č. 2 Will the users connect the label of an action with their goals? Otázka č. 3 Will the user receive a sensible feedback? *Otázky jsem ponechala v originálu - v angličtině, protože lépe vystihují kontext
2.2.1 Přihlášení uživatele 1) Na hlavní stránce aplikace klikneme na aplikační lištu na symbol menu 2) Zvolíme možnost můj učet a otevře se nám nové okno s přihlašovacím formulářem. 3) Vyplníme uživatelské jméno a heslo a klikneme na tlačítko přihlásit. Obrázek 2: Menu Obrázek 3: Přihlašovací formulář Obrázek 4: Notifikace
Krok úkolu 1. 2. 3. 4. Otázka č. 1 Ne (1.) Ano Ano Ano Otázka č. 2 Ano Ano Ano Ano Otázka č. 3 Ano Ano Ano Ano Nálezy: 1. Nejasnost, při hledání stránky pro přihlášení Nezkušeného uživatele Windows Phone by tento úkol mohl zaskočit, poněvadž nevidíme na první pohled žádnou ikonku či nápis označující můj profil či přihlášení. Uživatel je nucen zkusit rozbalit menu, doufajíc, že tam bude položka menu, která ho již přesměruje na přihlašovací formulář. 2.2.2 Vyhledání určitého zboží 1) Na hlavní stránce klikneme na tlačítko celý katalog. Aplikace nás přesměruje na novou stránku a zobrazí kategorie elektroniky dostupné na Alza.cz. 2) Klikneme na kategorii Komponenty (vidíme, že obsahuje pevné disky). Aplikace nás přesměruje na novou stránku s kategoriemi počítačových komponent. 3) Klikneme na kategorii Pevné disky. Aplikace nás přesměruje na novou stránku se všemi druhy dostupných pevných disků. Obrázek 5: Katalog s podkategoriemi
Obrázek 6: Kategorie s pevnými disky; SSD podkategorie s možností filtrování zboží 4) Klikneme na kategorii SSD. Aplikace nás přenese na stránku s SSD disky, kde máme již možnost upřesnit kategorii a upřesnit parametry. 5) Klikneme na Upřesnit kategorii a podle zadání zvolíme možnost velikosti disku - 2,5 HDD. Aplikace spustí rázem progress bar a načte se nám ta samá stránka s již profiltrovaným výběrem disků. 6) Klikneme na Upřesnit parametry a navolíme potřebné parametry podle zadání. Nakonec klikneme na ikonu na aplikační liště, která uloží zadané parametry a přesměruje nás zpět na stránku s SSD disky (již pouze s těmi, které vyhovují naším předvolbám). Obrázek 7: Stránka s možností úpravy parametrů
7) Poslední filtr aktivujeme kliknutím na tlačítko v aplikační liště dole, kde zvolíme možnost Nejprodávanější. Aplikace spustí rázem progress bar a načte se nám ta samá stránka s konečným profiltrovaným výběrem disků. Obrázek 8: Výběr SSD disků po profiltrování a řazení 8) Ve výsledném výběru klikneme na první položku v listu náš hledaný produkt. Aplikace rozbalí novou pivot stránku s detailem produktu. Obrázek 9: Detail produktu; Informace o dostupnosti; Parametry produktu
9) Na stránce produktu klikneme na dostupnost disku a zkontrolujeme, na kterých prodejnách je disk ihned k odběru. Zabudovaným tlačítkem zpět se dostaneme zpět na detail produktu a na druhé pivot položce ještě zkontrolujeme všechny parametry produktu. 10) Klikneme na tlačítko koupit. Obrázek 10: Notifikace o potvrzující úspěšně vložení objednávku zboží do košíku Krok úkolu 1. 2. 3. 4. 5. Otázka č. 1 Ano Ano Ano Ano Ano Otázka č. 2 Ano Ano Ano Ano Ano Otázka č. 3 Ano Ano Ano Ano Ano Krok úkolu 6. 7. 8. 9. 10. Otázka č. 1 Ano Ano Ano Ne(1.) Ano Otázka č. 2 Ano Ano Ano Ano Ano Otázka č. 3 Ano Ano Ano Ano Ano Nálezy: 1. Chybějící vyznačení odkazu Nevýraznému textu pod produktem chybí zdůraznění, že jde o odkaz na novou stránku s detaily o prodejnách. Ikona otazníku spíše slouží pro vysvětlivky a uživatel si proto na první pohled ikonu s odkazem nemusí zasociaovat.
2.2.3 Objednání určitého zboží 1) Pro vložení zboží do košíku klikneme v aplikační liště na ikonu nákupního košíku viz. Obrázek 10. Aplikace nás přesměruje na novou stránku nákupního košíku. 2) Klikneme na tlačítko Pokračovat. Aplikace nás přesměruje na další fázi nákupního košíku doprava a platba. 3) Podle zjištěné prodejny, kde je zboží dostupné ihned, zvolíme místo vyzvednutí a způsob platby. Klikneme na tlačítko Pokračovat. Aplikace nás přesměruje na další fázi nákupního košíku dodací údaje. Obrázek 11: První tři fáze průchodu nákupního košíku
4) Zkontrolujeme zadané kontaktní údaje, popřípadě je upravíme. Klikneme na tlačítko Pokračovat. Aplikace nás přesměruje na poslední fázi nákupního košíku souhrn objednávky. 5) Klikneme na tlačítko Dokončit objednávku. Aplikace nás přesměruje na novou stránku s potvrzením o objednání zboží. Obrázek 12: Poslední 2 fáze nákupního košíku a potvrzení o objednávce Krok úkolu 1. 2. 3. 4. 5. Otázka č. 1 Ano Ano Ano Ano Ano Otázka č. 2 Ano Ano Ano Ano Ano Otázka č. 3 Ano Ano Ano Ano Ne(1.) Nálezy: 1. Abstraktní feedback po závazném objednání zboží I když měl uživatel v průběhu nákupu mnoho času zkontrolovat si obsah svého nákupního košíku, i po závazném objednání by měl následovat srozumitelný feedback a samotné číslo objednávky to pro někoho být nemusí.
2.2.4 Přidání objednaného zboží do oblíbených 1) Po objednání zboží se nacházíme na stránce viz. Obrázek 12, první zprava. Klikneme na tlačítko mé objednávky. Aplikace nás přesměruje na seznam aktivních objednávek přihlášeného uživatele. 2) Klikneme na první položku (označující podle čísla objednávky tu naši právě zadanou). Aplikace nás přesměruje na detail objednávky.(screenshot detailu aktivní objednávky bude bohužel z jiného nákupu) Obrázek 13: Aktivní objednávky uživatele Obrázek 14: Detail objednávky 3) Na stránce detailu objednávky klikneme na název zboží. Aplikace nás rázem přesměruje na detail zboží v e-shopu. 4) Sescrollujeme dolů a klikneme na tlačítko přidat do oblíbených.
Obrázek 15: Detail produktu; Notifikace o vložení produktu do oblíbených Krok úkolu 1. 2. 3. 4. Otázka č. 1 Ano Ano Ne(2.) Ano Otázka č. 2 Ano Ne(1.) Ano Ano Otázka č. 3 Ano Ano Ano Ano Nálezy: 1. Málo podrobný popis položky v aktivních objednávkách Při více aktivních objednávkách, samotné číslo objednávky není dobrý identifikátor objednávek pro běžného uživatele. Pro zjištění obsahu objednávky je potřeba položku rozkliknout. 2. Chybějící náznak odkazu v názvu zboží Není na první pohled vidět, že kliknutím bychom se mohli dostat na detail produktu.
2.3 Seřazení nálezů dle priority a návrh řešení Na základě odpověďí na dané tři otázky budeme hodnotit usability problém na stupnici od 0 do 4, kde: 0 = Není usability problém 1 = Pouze kosmetický problém, který není potřeba řešit (pouze, pokud by zbyl čas) 2 = Menší usability problém, který bychom měli řešit, ale přednost mají nálezy s vyšším stupněm 3 = Větší usability problém, který je potřeba řešit přednostně před nálezy s nižším stupněm. 4 = Vážný usability problém, který je nutno řešit, jinak se produkt nemůže uvést na trh. Abstraktní feedback po závazném objednání zboží (2.2.3) Usability problém - 2 Návrh řešení: K číslu objednávky přidat 1-2 informace (název alespoň jednoho produktu obsahující objednávku, datum, cena) jednoznačně identifikující objednávku. Málo podrobný popis položky v aktivních objednávkách (2.2.4) Usability problém - 2 Návrh řešení: Podobné řešení, jako jsem zmínila výše - přidání obrázku či název produktu do položky. Chybějící náznak odkazu v názvu zboží (2.2.4) Usability problém - 2 Návrh řešení: Podtržení s kombinací jiné barvy písma by mohla zcela jistě zafungovat. Na druhou stranu, musíme myslet i na design, který by neměl utrpět touto změnou. Nejasnost, při hledání stránky pro přihlášení (2.2.1) Usability problém - 1 Návrh řešení: Přidat tlačítko do aplikační lišty dole reprezentující můj profil. Místo stávající položky v menu, viditelné až po rozkliknutí menu. Zkušeného uživatele Windows Phone by ale tato malá nejasnost neměla nijak vyvést z míry. Chybějící vyznačení odkazu (2.2.2) Usability problém - 1 Návrh řešení: Zvážení použití podtržení textu Vzhledem k tomu, že odkaz u sebe má alespoň ikonku otazníku, patří tento nález spíše ke kosmetickým problémům, kde by stálo za to vyzkoušet klasický způsob značení odkazů podtržením.