A2 Testování webu Trello.com

Transkript

1 A2 Testování webu Trello.com Semestrální práce TUR Novotný Michal

2 OBSAH Úvod... 2 Popis aplikace... 2 Cílová skupina... 2 Zadání... 3 Testované případy užití... 3 Registrace uživatele... 3 Vytvořit board... 3 Přidat label ke kartě... 3 Vyhledat karty podle labelu... 3 Obnovit archivovaný seznam... 3 Popis testovacích metod... 3 Kognitivní průchod Testování... 5 Testování případů užití Registrace uživatele Vytvořit board Přidat label ke kartě VyhledaT karty podle labelu Obnovit archivovaný seznam Závěr Vyhodnocení testů kognitivní průchod

3 ÚVOD Popis aplikace Trello je webová aplikace pro správu a řízení projektů pomocí metodiky kanban. Kanban byl popularizován firmou Toyota v roce 1980 a jedná se o systém výroby Just In Time systém který stojí na filozofii vše dělat efektivně s minimem prostředků a důrazem na kvalitu. Jednotlivé projekty jsou zastoupeny tzv. boardy, které obsahují seznamy úkolů. Samotné úkoly si lze představit jako sticky notes (štítky) na kterých je popsán základ problému nebo činnost která má být vykonána. Úkoly lze mezi jednotlivými seznamy přetahovat a tím simulovat workflow v projektu od nápadu k realizaci. Boardy lze sdílet s více uživateli, ti potom můžou úkoly komentovat nebo k nim přidávat různé přílohy (obrázky, checklisty), labelovat (štítkovat) podle potřeby nebo přidávat deadliny. Takovým způsobem lze vytvořit komplexní reprezentaci projektu a místo, kde se projekt přehledně spravuje. Obrázek 1: Příklad projektu v aplikaci Trello Cílová skupina Cílovou skupinou aplikace Trello je potenciálně každý, tedy obecný uživatel. Lze však tvrdit, že většinu uživatelů budou tvořit vývojáři nebo lidé, kteří potřebují spravovat nějaký projekt například manažeři. O těchto uživatelích lze tvrdit, že jsou zvyklý na práci s počítačem a tak základní úkony jako například registrace do aplikace nebo přihlášení jim nebudou dělat problém. 2

4 ZADÁNÍ Testované případy užití V aplikaci budeme testovat několik základních případů užití od vytvoření projektu (boardu) až po archivování a obnovování seznamů karet (úkolů). Případy užití budou testovány z pohledu cílové skupiny, tedy z pohledu uživatele zvyklého na práci s počítačem. Každý případ užití je atomická operace v rámci aplikace. REGISTRACE UŽIVATELE Před vytvářením projektů v rámci aplikace je potřeba si založit uživatelský účet. Registrace je základní operace nad webovou aplikací a tak by měla probíhat jednoduše a přehledně. VYTVOŘIT BOARD Vytvoření boardu, tedy reprezentace projektu, je základní operace, kterou bude provádět každý uživatel aplikace. Jedná se o kritickou část aplikace, protože pokud by bylo složité založit projekt, pak by aplikace n s největší pravděpodobností odradila uživatele hned po prvním přihlášení. PŘIDAT LABEL KE KARTĚ Pokud uživatel bude chtít sdružovat karty v rámci seznamu nebo celého projektu, může pro tento účel využít tzv. labelů. Labelování funguje na principu barevných štítků, které lze pojmenovat. VYHLEDAT KARTY PODLE LABELU Aplikace umožňuje uživateli najít všechny karty s určitým labelem pomocí filtru. OBNOVIT ARCHIVOVANÝ SEZNAM Jestliže uživatel již nechce využívat nějaký seznam, aplikace umožňuje jeho archivování. V opačném případě může nastat situace, kdy uživatel bude chtít obnovit archivovaný seznam. Popis testovacích metod Při našem testování budeme využívat dvě testovací metody: kognitivní průchod a heuristickou evaluaci. Pro každý případ užití proběhne test oběma metodami. 3

5 KOGNITIVNÍ PRŮCHOD Při kognitivním průchod uživatel prochází uživatelské rozhraní a snaží se splnit nějaký úkol podle předem známých kroků. Při průchod si uživatel testující aplikaci pokládá otázky: Q0: Co chce uživatel dosáhnout V každém kroku testování se poté testující ptá na základní otázky: Q1: Je uživateli jasné co má dělat? Q2: Je uživatel schopný spojit to co vidí s tím, co chce udělat? Q3: Dostane uživatel dostatečnou zpětnou vazbu? Odpovědi na otázky budeme sdružovat do tabulky pro každý krok, pokud odpověď na některou z otázek bude ne, bude se jednat o nález, kterému později přiřadíme prioritu podle závažnosti. HEURISTICKÁ EVALUACE je metoda založená na heuristikách pravidlech, která jsou předem definována. Pro testování budeme využívat heuristiky od Jacoba Nielsena, kterých je deset. Budeme vždy popisovat, jaké heuristiky jsou porušeny. Pokud nenalezneme v danou chvíli žádné porušení heuristik, budeme uvádět příklad, kdy jsou heuristiky správně aplikovány aplikace je dobře navržena. Seznam heuristik: 1. Viditelnost stavu systému 2. Propojenost systému a reálného světa 3. Uživatelská kontrola a svoboda 4. Standardizace a konzistence 5. Prevence chyb 6. Rozpoznání namísto vzpomínání 7. Flexibilita a efektivní použití 8. Estetický a minimalistický design 9. Pomoc uživateli pochopit, poznat a zotavit se z chyb 10. Pomoc a dokumentace 4

6 TESTOVÁNÍ Testování případů užití 1. REGISTRACE UŽIVATELE Q0: Uživatel se chce zaregistrovat do aplikace. Krok 1: Pro registraci klikneme na tlačítko Sign Up Obrázek 2: Hlavní stránka pro nového uživatele Q1 ANO Uživatel ví, co má udělat. Q2 ANO Tlačítko registrace je viditelné. Q3 ANO Uživatel je odkázán na stránku s formulářem. Úvodní stránka neporušuje žádnou heuristiku, naopak můžeme najít dobrý příklad H8: Minimalistického a estetického designu H4: Standardizace a konzistence 5

7 Krok 2: Vyplníme formulář a zvolíme Create New Account Obrázek 3: Formulář registrace Obrázek 4: Správně vyplněný formulář registrace Q1 ANO Uživatel ví jak vyplnit formulář. Q2 ANO Buňky formuláře jsou popsány + obsahují placeholdery a tím jsou samo vysvětlující. Q3 ANO Uživatel je odkázán do hlavní sekce. 6

8 Obrázek 5: Špatně vyplněný formulář Stránka s formulářem neporušuje heuristiku. Můžeme najít dobrý příklad: H4: Standardizace a konzistence H8: Minimalistický a estetický design H5: Prevence chyb při špatně vyplněném formuláři Krok 3: Potvrzení u Obrázek 6: s verifikací Q1 ANO je výstižný. Q2 ANO Tlačítko je dobře viditelné. Q3 ANO Uživatel je odkázán do hlavní sekce aplikace. 7

9 Stránka s em neporušuje heuristiky. Hlavní sekce aplikace po přihlášení nebo registraci po přihlášení se zobrazuje jako homepage. Obrázek 7: Hlavní sekce aplikace po přihlášení/registraci 2. VYTVOŘIT BOARD Q0: Uživatel chce vytvořit novou reprezentaci projektu board. Krok 1: Klikneme na Create new board na hlavní stránce po přihlášení Obrázek 8: Hlavní stránka vytvoření boardu 8

10 Q1 ANO Uživatel ví co udělat náplň aplikace Q2 ANO Velké tlačítko. Q3 ANO Uživatel dostane nabídku pro vytvoření boardu. Stránka vytvoření boardu neporušuje heuristiky. Krok 2: Vyplnění názvu boardu a vytvoření Uživatel dostal nabídku pro vytvoření boardu může zvolit jméno a další parametry jako například jestli bude board veřejný nebo privátní. Obrázek 9: Vytváření boardu nabídka 1 9

11 Obrázek 10: Vytváření boardu nabídka 2 Q1 ANO Uživateli je jasné, že bude potřeba pojmenovat board. Q2 ANO Viditelný formulář popsaný popisky. Q3 ANO Uživatel je přesměrován do vytvořeného boardu. Dialog pro vytvoření boardu neporušuje heuristiky. Krok 3: Nabídka vytvoření listu Uživatel je hned po vytvoření boardu nabádán k vytvoření nového seznamu. Nemusí na nic klikat a rovnou seznam pojmenovat a uložit. 10

12 Obrázek 11: Vytvořený board přidávání listu Obrázek 12: Vytvořený board s prvním listem TODO Q1 NE Aplikace nabízí N1 vytvoření hned vytvoření listu chce po uživateli něco ukládat. (Obr.: 11) Q2 ANO Uživateli je při pohledu jasné, že tlačítko save bude ukládat list. Q3 ANO Dojde k vytvoření listu (Obr.: 12) 11

13 Stránka po vytvoření boardu neporušuje heuristiky. 3. PŘIDAT LABEL KE KARTĚ Q0: Uživatel chce ke kartě (úkolu) přidat label. Krok 1: Uživatel klikne na kartu, kterou chce oštítkovat Obrázek 13: Zvolení karty pro přidání labelu Q1 ANO Uživatel ví, že má kliknout na kartu pro více informací Q2 ANO Karta je jednoznačně označena Q3 ANO Otevře se nabídka pro editaci karty Heuristický evaluace Stránka boardu s kartami neporušuje heuristiky. Lze vidět dobrý příklad heuristik: H1: Viditelnost stavu systému H4: Standardizace a konzistence H7: Flexibilita a efektivní použití 12

14 Krok 2: Uživatel kline na tlačítko Labels pro přidání štítku Obrázek 14: Editace karty Q1 ANO Uživatel ví, co má dělat Q2 ANO Tlačítko je viditelné v pravém menu Q3 ANO Otevře se nabídka pro výběr labelů Stránka boardu s kartami neporušuje heuristiky. Lze vidět dobrý příklad heuristik: H1: Viditelnost stavu systému H3: Uživatelská kontrola a svoboda 13

15 Krok 3: Uživatel vybere požadovaný štítek Obrázek 15: Vybrání labelu Obrázek 16: Label u karty Q1 ANO Uživatel ví, že má vybrat label Q2 ANO Jednotlivé labely jsou dobře vidět Q3 ANO Label se objeví u karty Stránka boardu s kartami neporušuje heuristiky. 14

16 4. VYHLEDAT KARTY PODLE LABELU Pro otestování případu užití bylo několik karet označeno unikátním labelem s názvem My Special Label. Obrázek 17: Označení speciálním labelem Krok 1a: Vyhledání karet přes vyhledávač Pro hledání labelů bohužel nelze využít vyhledávání na vrchní straně. Uživatele může nepříjemně zaskočit, že po zadání jména labelu se neobjeví žádné výsledky. Obrázek 18: Vyhledávač nenajde nic 15

17 Q1 ANO Uživatel chce vyhledat karty Q2 ANO Vyhledávání je jasně umístěné na hlavní stránce Q3 ANO Uživatel je informován, že vyhledávač nic nenašel. Stránka vyhledávání porušuje heuristiky H6: Rozpoznávání namísto vzpomínání uživatel musí najít jinou cestu než je intuitivní Krok 1b: Kliknutí na menu v pravé části Obrázek 19: Menu Q1 ANO Uživatel chce rozkliknout menu více možností Q2 NE Uživatel by N2 přednostně pro vyhledání kliknul na hlavní vyhledávač Q3 ANO Menu se otevře s nabídkou možností 16

18 Krok 2: Uživatel klikne na tlačítko Filter Cards Obrázek 20: Menu 2 Q1 ANO Uživatel hledá vyhledávání/filtrování karet Q2 ANO Tlačítko je dobře viditelné Q3 ANO Otevře se menu nastavení filtru karet Stránka s otevřeným menu neporušuje heuristiky 17

19 Krok 3: Zvolení labelu, podle kterého se bude filtrovat Obrázek 21: Zvolení typu labelu Obrázek 22: Zvolený typ labelu Q1 ANO Uživatel chce zvolit label pro filtrování Q2 ANO Hledaný label je dobře označený Q3 ANO Zobrazí se pouze karty oštítkované daným labelem (Obr.: 22) Stránka s vybírání labelu neporušuje heuristiky 18

20 5. OBNOVIT ARCHIVOVANÝ SEZNAM Obnovení archivovaného seznamu je složitější operace, a tak uvažujeme, že uživatel bude hledat možnost obnovení v menu aplikace. Krok 1: Otevření menu Obrázek 23: Otevření menu Q1 ANO Uživatel chce rozkliknout menu více možností Q2 ANO Menu je viditelné Q3 ANO Menu se otevře s nabídkou možností Stránka s otevřeným menu neporušuje heuristiky 19

21 Krok 2: Zvolení tlačítka Archived items pro nabídku archivovaných věcí Obrázek 24: Menu archivace Q1 ANO Uživatel hledá archivované seznamy Q2 ANO Tlačítko je dobře viditelné Q3 ANO Otevře se menu archivovaných věcí Stránka s otevřeným menu neporušuje heuristiky 20

22 Krok 3: Změna výběru archivovaných věcí z karet na seznamy Obrázek 25: Archivované věci Q1 ANO Uživatel hledá archivované seznamy Q2 ANO Nad vyhledáváním je tlačítko switch to lists Q3 ANO Otevře se seznam archivovaných seznamů Stránka s výběrem archivovaných věcí porušuje heuristiky: H4: Standardizace a konzistence důležité tlačítko přepnutí mezi archivovanými kartami a listy je oproti ostatním prvkům málo výrazné 21

23 Krok 4: Uživatel vybere tlačítko Send to board pro obnovení listu Obrázek 26: Výběr archivovaných seznamů Obrázek 27: Obnovený seznam Q1 ANO Uživatel chce poslat seznam zpět do boardu Q2 ANO Tlačítko je dobře označené Q3 ANO Otevře se seznam archivovaných seznamů Stránka s výběrem archivovaných věcí porušuje heuristiky: 22

24 H4: Standardizace a konzistence důležité tlačítko přepnutí mezi archivovanými kartami a listy je oproti ostatním prvkům málo výrazné ZÁVĚR Vyhodnocení testů KOGNITIVNÍ PRŮCHOD Kognitivní průchod několika případů užití aplikace neodhalil žádné závažné chyby v uživatelském rozhraní. Nalezl jsem ale pár věcí, které lze považovat za lehké chyby tedy chyby s nejnižší prioritou kosmetické chyby. Nález Případ užití Popis N1 2. Vytvoření boardu, krok 3 N2 priorita: malá 4. Vyhledat karty podle labelu, krok 1 priorita: střední Uživateli je vnuceno vytváření karty po vytvoření boardu. Nemusí se nutně jednat o chybu, jelikož tato záležitost urychluje workflow v aplikaci. Na druhou stranu ne každý uživatel má rád, když se od něho najednou očekává nějaké vytváření/ukládání pokud si to sám nevybral. Pro každého uživatele je intuitivní, že ve chvíli vyhledávání něčeho použije nějaký vyhledávač v aplikaci, obvykle umístěný ve vrchní straně okna. Ovšem při vyhledávání podle labelů je třeba použít jiný nástroj a to filtr. Za chybu toto považuji, protože každý uživatel intuitivně nejdříve šáhne po hlavním vyhledávači, ovšem bez úspěchu HEURISTICKÁ EVALUACE Trello má moderní design, který je minimalistický a sám o sobě podporuje mnoho heuristik. Za nejčastější chybu minimalistických designů by šlo považovat porušení heuristiky číslo 1 Viditelnost stavu systému. Při testování jsem porušení této heuristiky neobjevil. Aplikace je na první pohled velmi jednoduchá a tak uživatel vždy ví, kde se nachází. Jednoduchost navíc podporuje heuristiky číslo 4, 7 a 8. Během testování jsem objevil pár porušení heuristik: 23

25 Porušená heuristika H6 H4 Případ užití 4. Vyhledat karty podle labelu, krok 1 5. Obnovení archivovaného seznamu, krok 3/4 Popis Uživatel se musí naučit, že vyhledávání pomocí labelů je pouze pomocí filtru a ne pomocí hlavního vyhledávače neintuitivní Důležité tlačítko pro přepínání mezi archivovanými kartami a seznamy je malé a špatně viditelné, což může způsobit, že jej uživatel přehlédne 24