- pixlr tomáš kraus, fel Čvuthcisemestralky.felk.cvut.cz/system/mems/4159/original/...testování...
TRANSCRIPT
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.