Sebastian Voráč ČVUT FEL STM A7B39TUR voracseb@fel.cvut.cz TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ PROGRAMU PSPAD
Obsah TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ PROGRAMU PSPAD... 1 1) Úvod... 3 1.1 Popis Aplikace... 3 1.2 Popis Cílové skupiny... 3 1.3 Přehled případu užití use cases... 3 2) Způsob testování... 4 2.1 Kognitivní průchod... 4 2.2 Heuristická evaluace... 5 3) Testování... 6 3.1 Založení dvou projektů, vytvoření HTML a PHP stránky... 6 3.1.1 Kognitivní průchod... 6 3.1.2 Heuristická evaluace... 8 3.2 Zapnout číslování řádků, zvýraznění syntaxe a aktuálního řádku. Barevné upravení zvýrazňování syntaxe.... 9 3.2.1 Kognitivní průchod... 9 3.2.2 Heuristická evaluace... 12 3.3 Připojení na FTP klienta, vyhledat konkrétní soubor.... 13 3.3.1 Kognitivní průchod... 13 3.3.2 Heuristická evaluace... 15 3.4 Vyhledání nápovědy na PSPad fóru... 16 3.4.1 Kognitivní průchod... 16 3.4.2 Heuristická evaluace... 19 4) Závěr... 20 4.1 Nálezy Kognitivních průchodů... 20 4.2 Nálezy heuristické evaluace... 20 4.3 Zhodnocení... 21
1) Úvod 1.1 Popis Aplikace PSPad editor je jednoduchý avšak účinný program, ve kterém lze vytvářet a editovat programy napsané v nejrůznějších programátorských jazycích jako je například Java, PHP, HTML, Javascript a další. Všechny tyto programovací jazyky PSPad plně podporuje. Nemá však již zbytečné funkce, které všechny tyto jazyky obsahují. Při vytváření programu bylo dbáno hlavně na jeho rychlost a jednoduchost použití. Je určen také pro uživatele, kteří pracují s velkým množstvím textu, jelikož jsou v programu PSPad mnohé možnosti formátování textu. Podporuje také připojení pomocí FTP a tedy i editaci zdrojových souborů online a to bez nutnosti lokálního stažení souborů. 1.2 Popis Cílové skupiny Cílová skupina jsou začínající a pokročilí programátoři web developeři, tedy cílová skupina se zajímá o vývoj v programovacích jazycích PHP, CSS, HTML a Javascript. 1.3 Přehled případu užití use cases Založení nového projektu vytvoření HTML, CSS, PHP, Javascript stránky, uložit je a vytvořit nový projekt. Zapnout číslování řádků, zvýraznění syntaxe a aktuálního řádku. Barevné upravení zvýraznění syntaxe. Připojení na FTP klienta, vyhledat soubory a soubory obsahující konkrétní text, následně tento text nahradit jiným textem. Vyhledání na PSPad fóru nápovědy k PHP v české i anglické verzi
2) Způsob testování Testování se provádí za pomocí dvou osvědčených a spolehlivých metod, které se nazývají kognitivní průchod a Heuristická evaulace. Za pomoci metody kognitivního průchodu a heuristické evaluace se testují detailně všechny use-cases. Vždy bude explicitně uvedeno, co se jakou metodou testuje. Obě testovací metody jsou vysvětleny a popsány níže. 2.1 Kognitivní průchod Při Kognitivním průchodu je aplikace testována po krocích. Krok zde znamená reálný posun uživatele v testované aplikaci. To může být například rozkliknutí menu nebo kliknutí na potvrzovací tlačítko. Krok by měl být ideálně atomický, případně ne moc komplikovaný v takovém případě je lepší udělat kroků více. Kognitivní průchod zjišťuje, jak moc je aplikace složitá na ovládání, a jak se uživateli srozumitelná a přehledná. V kognitivním průchodu se vždy uživatele, který testuje danou aplikace, ptáme na 4 otázky: Q0: Čeho chce uživatel dosáhnout? Q1: Ví uživatel jak toho dosáhnout? Q2: Spojí si uživatel správnou akci se správným ovládacím prvkem? Q3: Dostane uživatel plnohodnotnou uspokojivou odezvu? Na otázky uživatel odpovídá ANO/NE. Pokud odpoví NE jedná se o nález, kterému je následně přidělena priorita odpovídající jeho závažnosti: 1 - vysoká závažnost (kritická chyba Nutná co nejdříve opravit. Uživatel může chtít přestat používat aplikaci, v některých případech i nepoužitelnost aplikace) 2 - střední závažnost (chyba uživateli snižuje komfort při používání aplikace, avšak nebrání mu k dokončení úkonů, které uživatel na aplikaci provádí) 3 - nízká závažnost (malá chyba jedná se o drobnost většinou kosmetického charakteru, může se opravit, až když na to jsou dostatečné časové kapacity)
2.2 Heuristická evaluace Při testování metodou heuristické evaluace se díváme, zda uživatelské rozhraní aplikace splňuje jednotlivé heuristiky. Neboli sledujeme, jestli aplikace splňuje obecné principy použitelnosti. Tyto principy jsou: 1) Viditelnost stavu systému 2) Shoda systému s reálným světem 3) Uživatelská kontrola a svoboda 4) Konzistence a standardy 5) Prevence chyb 6) Rozpoznání místo vzpomínání 7) Flexibilita a efektivita použití 8) Estetický, minimalistický design 9) Pomoc uživatelům poznat, diagnostikovat, a zotavit se z chyb 10) Nápověda a dokumentace Pokud je jakákoliv heuristika porušena, znamená to negativní nález v uživatelském rozhraní aplikace. Následně je chyba popsána a zhodnocena.
3) Testování 3.1 Založení dvou projektů, vytvoření HTML a PHP stránky Proč je tento test důležitý: Cílová skupina jsou programátoři začátečníci a pokročilí. První s čím se uživatelé při nainstalování aplikace setkají, je právě založení projektů a vytvoření souborů ve kterých budou svou práci tvořit. Pokud bude už tato činnost uživatelsky nepřívětivá, uživatele to může odradit a mohou velice snadno přejít na konkurenční aplikaci. 3.1.1 Kognitivní průchod Q0: Uživatel chce založit projekt a v něm stránky pro editaci php, html. Následně chce projekt uložit a založit nový projekt. Krok 1: Kliknutí na Projekt Krok 2: Založení nového projektu Krok 3: Kliknutí na Soubor Krok 4: Založení Nového souboru Krok 5: Vybrat programovací jazyk (php) Krok 6: Zopakování kroku 4,5 (pro jazk html) Krok 7: Založení druhého projektu Krok 2 - Q3 (Závažnost 3 nízká): Uživatel nejspíše očekává že si při založení projektu bude moci vybrat jaký typ projektu to bude, jako tomu je v ostatních IDE. Navíc by nejspíše také očekával, že si bude moc zvolit alespoň název projektu a jeho umístění. Projekt se ovšem rovnou založí bez jakéhokoliv nastavení. Krok 5 - Q3 (Závažnost 3 nízká): Defaultní soubor pro php, ve kterém je kód <?php?>, se zobrazil ve špatném kódování. Stalo se to pouze jednou z 20-ti pokusů. Jen je náhodný, nedá se replikovat. Krok 7 - Q3 (Závažnost 2 střední): Když si uživatel založí soubory v projektu, nastaví různá nastavení, ale needituje / nepřidá kód v žádném ze souborů, tak po kliknutí na Nový Projekt se mu bez zeptání celý projekt se soubory a nastavením smaže a založí se mu prázdný. Jednotlivé kroky znázorněné graficky. Každý krok = jeden obrázek (směr zleva doprava):
Nález náhodného jevu Krok 5 - Q3: 3.1.2 Heuristická evaluace Porušení 1. a 5. heuristiky Viditelnost stavu systému a Prevence chyb (při zakládání druhého projektu tj. Kroku 7). Uživatel, který vidí program poprvé, vůbec netuší, jestli má vše uloženo či nikoli. Aplikace nedá žádnou informaci o tom, že bude vše přepsáno, pokud se založí nový projekt bez provedení změn v kódu (ovšem uživatel může udělat změny také v nastavení).
3.2 Zapnout číslování řádků, zvýraznění syntaxe a aktuálního řádku. Barevné upravení zvýrazňování syntaxe. Proč je tento test důležitý: Každý chce, aby pro něj vývojové prostředí bylo vizuálně příjemné - proto bude chtít zajisté zvýraznit syntaxi. Jednak kvůli kontrole kódu (jelikož je zde absence jakékoliv kontroly syntaxe) ale i kvůli lepší přehlednosti. Navíc pokud je někdo zvyklí již z jiných aplikací na určité barvy například pro proměnné, chce si aplikaci přednastavit do podoby, na kterou je zvyklý. 3.2.1 Kognitivní průchod Q0: Uživatel chce zobrazit číslování řádků, dále pak zvýraznění syntaxe a zvýraznění aktuálního řádku. Poté si chce pouze zkusit upravit barevné zvýraznění syntaxe html. Krok 1: Rozkliknutí menu Zobrazit Krok 2: Vybrání možnosti Aktuální řádek Krok 3: Zapnutí syntaxe Krok 4: Zvolení možnosti očíslování řádků Krok 5: Přechod do nastavení barevnosti syntaxe Krok 6: Zkouška změny zvýraznění proměnných Krok 5 Q1 (Závažnost 3 nízká): Uživatel není schopen hned najít, kde by mohl vlastní barevné zvýraznění syntaxe nastavit. Musí se proklikávat menu, aby věděl, na co má kliknout. Přitom by přechod do nastavení syntaxe mohl být hned pod tlačítkem, kterým se zapíná a vypíná zvýraznění syntaxe. Krok 6 Q3 (Závažnost 2 střední): Při provedení změn ve vlastním nastavení syntaxe (například změna barvy, stylu písma atd.) se i po kliknutí na storno změny uloží a provedou a toto již nelze vrátit zpět to může vadit uživatelům, kteří si jen chtějí zkusit, jak by dané nové zvýraznění vypadaly a pak se chtějí vrátit k defaultním hodnotám. Zásadní je to u uživatelů, kteří jen něco zkouší a ani nepotvrdí, že chtějí nové styly a zabarvení syntaxe použít, ale naopak chtějí akci stornovat. Jednotlivé kroky znázorněné graficky. Každý krok = jeden obrázek (směr zleva doprava):
3.2.2 Heuristická evaluace Porušení 4. heuristiky Konzistence a standardy. V menu má tato ikonka hover: změní zvýraznění syntaxe na zvolený formát. Po kliknutí je zde možnost pouze změnit syntaxi programovacího jazyka (na výběr mezi programovacími jazyky php, html atd.) Ikonka pro zapnutí vypnutí syntaxe je jiná - to je v pořádku. Zde v menu je stejná ikonka jako v hlavním menu se stejnou funkcionalitou zatím také v pořádku. Zde je ovšem stejná ikonka již potřetí, uživatel tedy očekává, že bude mít stejnou funkcionalitu a to přepínaní syntaxe mezi jazyky, jak tomu ikonka napovídá. Ovšem funkcionalita je jiná zde si lze nastavit vlastní barevné zvýraznění a styly syntaxe, nikoli výběr jazyka syntaxe.
3.3 Připojení na FTP klienta, vyhledat konkrétní soubor. Proč je tento test důležitý: Připojení k FTP je nejpoužívanější funkce v aplikaci. Je pro uživatele klíčová pokud tato funkce nebude fungovat dostatečně korektně a podle očekávání, pak to může být závažný důvod k opuštění používání této aplikace. 3.3.1 Kognitivní průchod Q0: Uživatel se chce připojit k FTP, chce vyhledat konkrétní soubor index.php Krok 1: Kliknout na ikonku k připojení na FTP Krok 2: Vybrat možnost Nové připojení Krok 3: Vyplnit údaje a potvrdit Krok 4: Připojit se k FTP Krok 5: Vyhledat index.php Krok 3 Q1 (Závažnost 3 nízká): Uživatel nemusí vědět, které údaje má zadat - které jsou nutné pro úspěšné přihlášení. Chtělo by to lépe vyznačit, které údaje musí nutně vyplnit. Krok 5 Q1(Závažnost 3 nízká): Hledání se provádí automaticky napsáním hledaného slova do inputu pro vyhledávání. Neexistuje žádné vyhledávací tlačítko to může někoho zmást a neví, jak by mohl vyhledávání spustit. Krok 5 Q3 (Závažnost 2 střední): Když uživatel zadá slovo, které chce hledat, tak se hledání provádí pouze v dané složce (v podsložkách již ne). Samotné zobrazování výsledků je realizované tak, že jen zmizí všechny soubory (ale ne složky), které neodpovídají názvu hledaného souboru. Tedy pokud někdo hledá v umístění, kde jsou jen složky, neproběhne při vyhledávání jakákoliv viditelná změna stavu a uživatel nedostane žádný output. Jednotlivé kroky znázorněné graficky. Každý krok = jeden obrázek (směr zleva doprava):
3.3.2 Heuristická evaluace Porušení 8. a 10. heuristiky Estetický a minimalistický design a Pomoc a dokumentace. Obě porušené heuristiky jsou při zadávání údajů do FTP (viz 3. obrázek). Spodní informace jsou téměř irelevantní téměř nikdo je nepoužívá / neupravuje. Šly by schovat pod tlačítko Rozšířená nastavení. Zbytečně uživatele matou a zabírají prostor (porušení 8. heuristiky) Nejsou jasně vyznačené povinné a nepovinné údaje (porušení 10. heuristiky)
3.4 Vyhledání nápovědy na PSPad fóru Proč je tento test důležitý: Cílová skupina je nezkušená, tedy bude patrně hledat informace na oficiální PSPad fóru, je zapotřebí dbát na jejich nezkušenost a přizpůsobit tomu uživatelské rozhraní vyhledávání, tak aby našli hledaný problém a mohli nadále využívat aplikaci. 3.4.1 Kognitivní průchod Q0: Uživatel se chce zjistit jak provést kontrolu XML tagů a chce využít oficiální nápovědy na kterou je z programu odkázán. Krok 1: Kliknout na Search Krok 2: Napsat hledanou frázi Krok 3: Zvolit možnost Exact Phrase a vyhledám frázi Krok 4: Prokliknout se na nápovědu pomocí odkazu ve výsledcích vyhledávání Krok 5: Zobrazit si nápovědu Krok 3 Q3 (Závažnost 3 nízká): Ačkoli uživatel hledá podle fráze a ne podle autora (pole autora nechám prázdné), tak se mu ve výsledcích vyhledávání ukážou oba inputy pro vyhledávání a oba mají předvyplněnou frázi, která byla do jedno z nich zadána. Navíc se neuchová hodnota Exact Phrase ale zobrazí se defaultní hodnota inputu All words. Jednotlivé kroky znázorněné graficky. Každý krok = jeden obrázek (směr zleva doprava):
3.4.2 Heuristická evaluace Porušení 1. heuristiky Viditelnost stavu systému. Uživatel na první pohled nevidí, že po kliknutí na tlačítko hledat, hledání opravdu probíhá. Má nutkání automaticky kliknout na podtržený odkaz (podvědomě chce pokračovat někam na výsledky vyhledávání). Řešením by mohlo být výrazné zvětšení zeleného textu a implementace nějaké interaktivní ikonky, která by symbolizovala hledání.
4) Závěr Zde je vyhotoven jednoduchý přehled nalezených závad seřazen podle závažnosti (1 = největší závada). 4.1 Nálezy Kognitivních průchodů 4.2 Nálezy heuristické evaluace
4.3 Zhodnocení Program PSPad může být šikovným pomocníkem pro cílovou skupinu uživatelů programátorů. Neobejde se jako každý program bez určitých chyb a omezení, není to však nic, kvůli čemu by se uživatelé rozhodli program dále nevyužívat. Pozitivní na hodnocení je, že nebyla nalezena žádná kritická chyba (chyba s prioritou 1). Proto je aplikace PSPad zcela připravena na její hojné využívání aktivními uživateli.