A2 – Testování webu Trello.com Semestrální práce TUR
Novotný Michal
[email protected]
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 .................................................................................................................. 4 Heuristická evaluace ............................................................................................................... 4 Testování .......................................................................................................................................... 5 Testování případů užití ................................................................................................................ 5 1. Registrace uživatele ............................................................................................................ 5 2. Vytvořit board ..................................................................................................................... 8 3. Přidat label ke kartě .......................................................................................................... 12 4. VyhledaT karty podle labelu ............................................................................................. 15 5. Obnovit archivovaný seznam............................................................................................ 19 Závěr ............................................................................................................................................... 23 Vyhodnocení testů .................................................................................................................... 23 kognitivní průchod ................................................................................................................ 23 Heuristická evaluace ............................................................................................................. 23
1
Ú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
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
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 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
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
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel ví, co má udělat. Tlačítko registrace je viditelné. Uživatel je odkázán na stránku s formulářem.
Nález -
Heuristická evaluace - Ú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
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
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel ví jak vyplnit formulář. Buňky formuláře jsou popsány + obsahují placeholdery a tím jsou samo vysvětlující. Uživatel je odkázán do hlavní sekce.
6
Nález -
-
Obrázek 5: Špatně vyplněný formulář
Heuristická evaluace - 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í emailu
Obrázek 6: Email s verifikací
Otázka Q1 Q2
Odpověď ANO ANO
Q3
ANO
Komentář Email je výstižný. Tlačítko je dobře viditelné. Uživatel je odkázán do hlavní sekce aplikace. 7
Nález -
Heuristická evaluace - Stránka s emailem 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
Otázka Q1
Odpověď ANO
Q2 Q3
ANO ANO
Komentář Uživatel ví co udělat – náplň aplikace Velké tlačítko. Uživatel dostane nabídku pro vytvoření boardu.
Nález -
Heuristická evaluace - 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
Obrázek 10: Vytváření boardu - nabídka 2
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživateli je jasné, že bude potřeba pojmenovat board. Viditelný formulář popsaný popisky. Uživatel je přesměrován do vytvořeného boardu.
Nález -
-
Heuristická evaluace - 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
Obrázek 11: Vytvořený board - přidávání listu
Obrázek 12: Vytvořený board s prvním listem – TODO
Otázka Q1
Odpověď NE
Q2
ANO
Q3
ANO
Komentář Aplikace nabízí vytvoření hned vytvoření listu – chce po uživateli něco ukládat. (Obr.: 11) Uživateli je při pohledu jasné, že tlačítko save bude ukládat list. Dojde k vytvoření listu (Obr.: 12)
11
Nález N1
-
-
Heuristická evaluace - 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
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel ví, že má kliknout na kartu pro více informací Karta je jednoznačně označena Otevře se nabídka pro editaci karty
Nález -
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
-
Krok 2: Uživatel kline na tlačítko „Labels“ pro přidání štítku
Obrázek 14: Editace karty
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel ví, co má dělat Tlačítko je viditelné v pravém menu Otevře se nabídka pro výběr labelů
Nález -
Heuristická evaluace - 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
-
Krok 3: Uživatel vybere požadovaný štítek
Obrázek 15: Vybrání labelu
Obrázek 16: Label u karty
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel ví, že má vybrat label Jednotlivé labely jsou dobře vidět Label se objeví u karty
Heuristická evaluace - Stránka boardu s kartami neporušuje heuristiky. 14
Nález -
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
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel chce vyhledat karty Vyhledávání je jasně umístěné na hlavní stránce Uživatel je informován, že vyhledávač nic nenašel.
Nález -
-
Heuristická evaluace - 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
Otázka Q1
Odpověď ANO
Q2
NE
Q3
ANO
Komentář Uživatel chce rozkliknout menu více možností Uživatel by přednostně pro vyhledání kliknul na hlavní vyhledávač Menu se otevře s nabídkou možností 16
Nález -
N2
-
Heuristická evaluace
Krok 2: Uživatel klikne na tlačítko „Filter Cards“
Obrázek 20: Menu 2
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel hledá vyhledávání/filtrování karet Tlačítko je dobře viditelné Otevře se menu nastavení filtru karet
Heuristická evaluace - Stránka s otevřeným menu neporušuje heuristiky
17
Nález -
-
Krok 3: Zvolení labelu, podle kterého se bude filtrovat
Obrázek 21: Zvolení typu labelu
Obrázek 22: Zvolený typ labelu
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel chce zvolit label pro filtrování Hledaný label je dobře označený Zobrazí se pouze karty oštítkované daným labelem (Obr.: 22)
Heuristická evaluace - Stránka s vybírání labelu neporušuje heuristiky 18
Nález -
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
Otázka Q1
Odpověď ANO
Q2 Q3
ANO ANO
Komentář Uživatel chce rozkliknout menu více možností Menu je viditelné Menu se otevře s nabídkou možností
Heuristická evaluace - Stránka s otevřeným menu neporušuje heuristiky
19
Nález -
-
Krok 2: Zvolení tlačítka „Archived items“ pro nabídku archivovaných věcí
Obrázek 24: Menu archivace
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel hledá archivované seznamy Tlačítko je dobře viditelné Otevře se menu archivovaných věcí
Heuristická evaluace - Stránka s otevřeným menu neporušuje heuristiky
20
Nález -
-
Krok 3: Změna výběru archivovaných věcí z karet na seznamy
Obrázek 25: Archivované věci
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel hledá archivované seznamy Nad vyhledáváním je tlačítko „switch to lists“ Otevře se seznam archivovaných seznamů
Nález -
-
-
Heuristická evaluace - 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
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
Otázka Q1
Odpověď ANO
Q2
ANO
Q3
ANO
Komentář Uživatel chce poslat seznam zpět do boardu Tlačítko je dobře označené Otevře se seznam archivovaných seznamů
Heuristická evaluace - Stránka s výběrem archivovaných věcí porušuje heuristiky: 22
Nález -
-
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
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
priorita: malá
N2
4. Vyhledat karty podle labelu, krok 1 priorita: střední
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
Porušená heuristika H6
H4
Případ užití
Popis
4. Vyhledat karty podle labelu, krok 1
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
5. Obnovení archivovaného seznamu, krok 3/4
24
