Testování - Pixlr Tomáš Kraus, FEL ČVUT

1

Testování webové aplikace Pixlr

Semestrální práce

A7B39TUR – Testování uživatelského rozhraní

ZS 2012

Tomáš Kraus, FEL ČVUT

Testování - Pixlr Tomáš Kraus, FEL ČVUT

2

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

Testování - Pixlr Tomáš Kraus, FEL ČVUT

3

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

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

Obr. 1: Domovská stránka webové aplikace Pixlr

Testování - Pixlr Tomáš Kraus, FEL ČVUT

4

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.

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.

Obr. 2: Varianta Open Pixlr editor (Advanced)

Testování - Pixlr Tomáš Kraus, FEL ČVUT

5

Obr. 3: Varianta Open Pixlr express (Efficient) – klasický režim

Obr. 4: Varianta Open Pixlr express (Efficient) – režim koláže

Testování - Pixlr Tomáš Kraus, FEL ČVUT

6

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í.

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.

Obr. 5: Varianta Open Pixlr-o-matic (Playful)

Testování - Pixlr Tomáš Kraus, FEL ČVUT

7

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ů.

Testování - Pixlr Tomáš Kraus, FEL ČVUT

8

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.

Testování - Pixlr Tomáš Kraus, FEL ČVUT

9

2) Uživateli se zobrazilo okno „Nový obrázek“ s několika volbami.

AKCE Uživatel zvolí možnost „Vytvořit nový obrázek“.

Q1 Ano

Q2 Ano

Q3 Ano

AKCE Uživatel nastaví parametry nového obrázku. A poté zvolí „OK“.

Q1 Ano

Q2 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?

Q3 Ne

[2] – Po vložení vlastních hodnot „šířka” a „výška” se nijak nezmění

předběžná nastavení.

Obr. 6

Obr. 7

Testování - Pixlr Tomáš Kraus, FEL ČVUT

10

3) Cílovým stavem je zobrazení prázdného dokumentu na pracovní ploše.

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

Obr. 8

Testování - Pixlr Tomáš Kraus, FEL ČVUT

11

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ží.

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ě.

Obr. 9

Obr. 10

Testování - Pixlr Tomáš Kraus, FEL ČVUT

12

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)

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.

Obr. 11

Testování - Pixlr Tomáš Kraus, FEL ČVUT

13

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.

Obr. 12

Testování - Pixlr Tomáš Kraus, FEL ČVUT

14

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.