Testování webové aplikace Pixlr Semestrální práce A7B39TUR Testování uživatelského rozhraní ZS 2012 1
Obsah Popis aplikace 3 Popis cílové skupinu uživatelů 6 Přehled případů užití (use cases) 7 Popis použitých metod testování 8 Testování případů užití 8 Závěr 14 2
Popis aplikace Pixlr je freewarová webová aplikace, která slouží k úpravě rastrových obrázků a fotografií. Aplikace je vyvíjena společností Autodesk a nachází se na adrese www.pixlr.com. Pixlr nabízí 3 varianty s ohledem na náročnost ovládání pro různé uživatele. Všechny aplikace Obr. 1: Domovská stránka webové aplikace Pixlr Varianta Open Pixlr editor (Advanced) Tato varianta aplikace Pixlr je určená především pro pokročilejší uživatele. Podobá desktopové aplikaci Photoshop od společnosti Adobe. Editor nabízí některé nástroje a filtry podobné konkurenčnímu produkt. Umožňuje základní funkce jako např. transformace, otáčení nebo nastavení kontrastu, jasu, tónu, sytosti, práce s křivkami a úrovněmi. V Pixlr můžeme aplikovat různé filtry jako je např. zostření, rozštření, šum, pixelizace, vinětace, HDR ], vlis a další. Podobně jako ve Photoshopu i zde je možné provádět operace ve vrstvách. Pracovní plocha je rozdělena do několika částí. Hlavní lišta s nabídkami je umístěna v horní části. Uživatel dále může používat okno nástroje, navigátor, vrstvy a historie. Zvolený nástroj lze nastavit v nástrojové liště umístěné přímo pod hlavní nabídkou. S vlastním obrázkem nebo fotografií se pracuje buď v samostatném okně nebo klasicky na pozadí mezi okny nástrojů. Výslednou práci lze uložit do běžných formátů.jpg,.png,.bmp, TIFF a nebo přímo ve formátu.pxd aplikace Pixlr, který umožňuje zachování nastavení vrstev a pozdější editaci. Velkou výhodou Pixlr je 3
propojení se sociálními sítěmi a weby pro správu fotografií. Obrázek lze nahrát na Facebook, Flickr nebo web Picasa. Obr. 2: Varianta Open Pixlr editor (Advanced) Varianta Open Pixlr express (Efficient) Varianta určená pro nenáročné uživatele s moderním a intuitivním rozhraním. Po otevření stránky varianty express má uživatel možnost ze 4 nabídek, načíst obrázek ze souboru, vložit URL, vytvořit fotografii pomocí webkamery a nebo vytvořit koláž. Po vložení fotografie některým ze třech uvedených způsobů má uživatel na výběr mnoho zajímavých a hravých efektů. První nabídka jsou klasické, ale stále jednoduché efekty typu ořez, kontrast, sytost apod. Další nabídka jsou předdefinované tonální efekty typu efekt staré fotografie, plakátu, vinětace apod. Třetí nabídka obsahuje zvláštní efekty jako např. různé druhy ohně, ohňostroje, kouře, bokehu apod. dále je možné použít nabídku různých ozdobných rámečků. Předposlední možností jsou všemožné klipartové obrázky. A poslední nabídkou je několik nevšedních textových fontů. U všech zmíněných efektů lze nastavit umístění efektu a jeho otočení a dále také bravu a kryvost resp. průhlednost. Ani při ukládání nejsou na uživatele kladeny zbytečné nároky a stále zde platí pravidlo jednoduchosti. Lze zvolit jen název, umístění souboru a jeho kvalita. Režim pro vytváření koláží je opět velmi jednoduchý. Uživatel má na výběr několik možností rozložení koláže. Poté může do připravených tvarů vkládat jednotlivé obrázky nebo fotografie. 4
Obr. 3: Varianta Open Pixlr express (Efficient) klasický režim Obr. 4: Varianta Open Pixlr express (Efficient) režim koláže 5
Varianta Open Pixlr-o-matic (Playful) Tato varianta se velmi podobá té předchozí, ale je pro uživatele ještě více hravější. O tom svědčí i to, že při přejetí myší nad obrázkem se vytvoří efekt vln, který nemá jiný význam, než jen zatraktivnit tuto variantu. Pixlr Playful nemá žádné nástroje na úpravu obrázků a pracuje pouze s efekty. Ty jsou zde velmi podobné, ale již neumožňují žádné další nastavení. Obr. 5: Varianta Open Pixlr-o-matic (Playful) Popis cílové skupiny uživatelů Cílové skupiny uživatelů se budou pro jednotlivé varianty lišit. Jejich zařazení vychází z první kapitoly, popisů jednotlivých variant. Varianta Open Pixlr editor (Advanced) Tuto variantu aplikace využijí pokročilý uživatelé, kteří chtějí obrázek nebo fotografie cíleně upravit. Dále mohou cíleně vytvořit pomocí nástrojů výsledek, o kterém měli již předem představu. Tito uživatelé mají většinou s podobnými, někdy i jednoduššími, editory zkušenost. Lehce se v nich orientují a mají představu o tom jak, který nástroj a efekt funguje. 6
Varianta Open Pixlr express (Efficient) Variantu Efficient použijí dva druhy uživatelů. Buď ti, kteří chtějí nějakým způsobem upravit obrázek nebo fotografii, ale varianta Advanced je pro ně příliš složitá a neznají její nástroje. Druhou skupinou jsou uživatelé, kteří mají fantazii a chtějí si hrát, tj. zkoušet si efekty a vytvářet tak mnohdy vtipné obrázky. Varianta Open Pixlr-o-matic (Playful) Jak již z názvu vyplývá je tato varianta určena pouze pro hraní. Uživatel zde nemá tolik možností, ale zároveň ho neděsí ani nepřeberné množství nástrojů a jejich nastavení. Uživatelé této varianty asi také ocení líbivý avšak pro náročného pro jiné uživatele rušivý webdesign. Proto je Pixlr-o-matic určen pro mladší generace, kteří se denně baví používáním podobných mobilních aplikací apod. Přehled případů užití (use cases) 1. Vytvoření nového obrázku (varianta Advanced) Jedná se o základní úkon při používání aplikace Pixlr. Testovanými aspekty budou jednoduchost použití, vstřícnost k uživateli tj. usnadnění práce a možnosti nastavení této funkce. Tato metoda užití se bude testovat kognitivním průchodem. Jsou zde totiž jasně dány kroky, které musíme použít, abychom dosáhli cíle, tj. vytvořili prázdný dokument. 2. Použití efektu (varianta Efficient) V této variantě Pixlr je použití efektu opět základním úkonem. Chceme tedy zjistit, zda je uživateli jasné a zřejmé, jak při použití vybraného efektu postupovat. Tato metoda užití bude testována heuristickou evaluací. V závěru bychom měli zjistit, zda v uživatelském rozhraní, který využívá extrémního minimalismu a moderního designu jsou kroky pro použití efektu na obrázek srozumitelné. 3. Volná transformace obrázku (varianta Efficient) Tato metoda užití bude testována heuristickou evaluací. To proto, že kroků, které je třeba udělat, není mnoho, ale bude nás spíše zajímat spojitost s okolním světem resp. možné návyky z jiných podobných programů. 7
Popis použitých metod testování Metoda heruistická evaluace Při testování touto metodou použijeme deset principů použitelnosti od Jakoba Nielsena: 1. Viditelnost stavu systému 2. Spojitost mezi systémem a reálným světem 3. Uživatelská kontrola a svoboda 4. Konzistence a standardizace 5. Prevence chyb 6. Rozpoznání místo vzpomínání 7. Flexibilita a efektivita použití 8. Estetický a minimalistický design 9. Pomoc uživatelům poznat chyby, diagnostikovat je a učit se z nich 10. Nápověda a dokumentace Přehled priorit výsledných nálezů. Nejvyšší priorita (1), střední priorita (2), nejnižší priorita (3). Metoda kognitivního průchodu Při testování metodou kognitivního průchodu si budeme klást následující otázky: Q0: Čeho chce uživatel docílit? Q1: Je uživateli akce zřejmá? Q2: Dokáže si uživatel spojit akci s kontextem? Q3: Dostane uživatel dostatečnou zpětnou vazbu? Testování případů užití 1. Vytvoření nového obrázku (varianta Advanced) Scénář: Uživatel vytvoří nový dokument o rozměrech 800 x 600 pixelů. 1) Výchozím stavem je editor tedy varianta Advanced. 8
Obr. 6 AKCE Q1 Q2 Q3 Uživatel zvolí možnost Vytvořit nový obrázek. Ano Ano Ano 2) Uživateli se zobrazilo okno Nový obrázek s několika volbami. Obr. 7 AKCE Q1 Q2 Q3 Uživatel nastaví parametry nového obrázku. A poté zvolí OK. Ano Ne [1] V nabídce předběžné nastavení mám vybranou např. možnost 800 x 600 a do políček šířka a výška zadám např. 200 a 300. Rozměry jsou v konfliktu a jaký format bude mít nový obrázek? Ne [2] Po vložení vlastních hodnot šířka a výška se nijak nezmění předběžná nastavení. 9
3) Cílovým stavem je zobrazení prázdného dokumentu na pracovní ploše. Obr. 8 Shrnutí: Vytvoření nového obrázku je velmi jednoduché. Konflikt nastává při zadávání vlastních rozměrů. Problém [1] a [2] lze vyřešit, tak že by se v nabídce předběžné nastavení objevil po zadání vlastních rozměrů nápis vlastní (angl. custom). 2. Použití efektu (varianta Efficient) 1. Nález: Není-li si uživatel jistý funkčností volby, tak se mu ani po najetí nad volbu kurzorem a setrvání nad volbou nezobrazí popisek resp. vysvětlivka. Heuristika: č.10 (Nápověda a dokumentace) Priorita: 3 (nejvyšší) Problém: Problém nápovědy. Řešení: Uživateli, který si není jistý funkčností dané volby by velmi usnadnilo práci, kdyby se mu po najetí myší zobrazila vysvětlivka, k čemu volba slouží. Druhým řešením by mohlo být zobrazení popisu ve status baru. 2. Nález: Máme-li zavřený náhled všech efektů a stiskneme tlačítko srdíčka, tak se jako odezva zobrazí krátký grafický efekt nad náhledem zvoleného efektu (viz obr. 9). Ale jinak uživatel netuší, co se stalo. Pouze pokud je otevřený náhled, tak se u zvoleného efektu objeví ikona srdíčka a je zřejmé, že se 10
Obr. 9 Heuristika: č. 1 (Viditelnost stavu systému) a č. 8 (Estetický a minimalistický design) Priorita: 3 (nejnižší) Problém: Problémem může být příliš minimalistický design (řešení níže). Možné řešení: Uprostřed pracovní plochy by se mohl na okamžik prolnout informační status Uloženo do oblíbených. Popř. méně nápadně na status baru např. v pravém dolním rohu. Druhým řešením by bylo přidání textového popisu k volbě. Stačil by pouze nápis Favourite. 3. Nález: Po stisknutí tlačítka špendlík není vůbec jasné, co se se stalo (viz obr 10). Tlačítko se ztmaví a uživatel očekává, že volba bude přišpendlena k pracovní ploše. Nicméně po jakékoliv jiné operace daná volba zmizí. K přišpendlení na pracovní plochu tak toto tlačítko neslouží. Obr. 10 Heuristika: č. 1 (Viditelnost stavu systému) a č. 8 (Estetický a minimalistický design) Priorita: 3 (nejnižší) Problém: Problémem může být příliš minimalistický design (řešení níže). Možné řešení: Uprostřed pracovní plochy by se mohl na okamžik prolnout informační status Uloženo do oblíbených. Popř. méně nápadně na status baru např. v pravém dolním rohu. Druhým řešením by bylo přidání textového popisu k volbě. 11
4. Nález: Tlačítko dvou překřížených šipek není zcela zřejmé (viz. obr 9 ) Symbol máme běžně spojení k prohození dvou nebo několika věcí. Tlačítko provede náhodné zvolení efektu. Heuristika: č. 2 (Spojitost mezi systémem a reálným světem) Priorita: 1 (nejnižší) Problém: Opět není zřejmá funkčnost této volby. Možné řešení: Nahradit symbolem hrací kostky, která lépe znázorňuje náhodnou volbu. 3. Volná transformace obrázku (varianta Efficient) Obr. 11 1. Nález: Změní-li uživatel velikost webového prohlížeče při zapnutém nástroji rotace, tak se obrázek naprosto rozhodí a vznikne chyba. 12
Obr. 12 Heuristika: č. 5 (Prevence chyb) Priorita: 1 (nejvyšší) Problém: Chyba webové aplikace popř. kompatibility s webovým prohlížečem. Možné řešení: Pokud nelze vyřešit tuto chybu implementací, bylo by dobré informovat uživatele o možnosti vzniku takové chyby. Může se stát, že uživatel pracně a detailně narovnává horizont, potom si zvětší okno webového prohlížeče a o celou práci přijde. 2. Nález: Posuvník srovnání umožňuje rotaci o pouhých 30 stupňů. Heuristika: č. 3 (Uživatelská kontrola a svoboda) Priorita: 3 (nejnižší) Problém: Větší rotace než jen o 30 stupňů můžeme sice dosáhnout překlopením o 90 stupňů na jednu stranu a další srovnáním posuvníkem. Ale taková práce s nástrojem je velmi nepraktická a zmatená. Možné řešení: Zvětšit rozsah posuvníku srovnání až na celých 360 stupňů. 3. Nález: Po srovnání posuvníkem a následným překlopením o 45 stupňů se rotace srovnáním vynuluje. Heuristika: č. 3 (Uživatelská kontrola a svoboda) Priorita: 3 (nejnižší) Problém: Opět je taková práce s nástrojem je velmi nepraktická a zmatená. Možné řešení: Překlopení o 45 stupňů by zachovávalo srovnání posuvníkem. 13
Závěr Tato webová silně konkuruje další webové aplikaci do společnosti Adobe Photoshopu Express editoru, který je rovněž online. Nabízí téměř totožné funkce a také mají podobný design (ve srovnání s variantou Efficien). Avšak varianta Advanced nabídne uživatelům o něco víc, protože umí pracovat s vrstvami. Na rozdíl ale od Photoshopu nemá Pixlr tak propracovanou dokumentaci. V testování jsem zjistil jednu závažnou chybu a tou bylo ztracení editovaného obrazu při rotaci obrázku. Takto velká chyba na uživatele samozřejmě nepůsobí dobrým dojmem a může je zcela odradit od produktu a mohou přejít ke konkurenci. Za zmínku také stojí chybějící popisky resp. vysvětlivky u několika nástrojů bez textových ikon ve variantě Efficient. Většina mých nálezů není na první pohled zřejmá a uživatel je tak může zaregistrovat až po nějaké době používání nebo při opakovaném používání některých nástrojů. Autodesk tedy při testování Pixlru několikrát pochybyl. 14