TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ REDAKČNÍHO SYSTÉMU JOOMLA

TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ REDAKČNÍHO SYSTÉMU JOOMLA ÚLOHA A2 - A4B39TUR MAREK KOZLOVSKÝ KOZLOMA2@FEL.CVUT.CZ

1. ÚVOD Tato semestrální práce má za cíl zhodnotit použitelnost a efektivitu uživatelského rozhraní redakčního systému Joomla. K deatilnímu rozboru použijeme metodu kognitivního průchodu a heuristické evaluace, tedy testování bez uživatelů. Jako člen Campamento 99 jsem jedním ze správců redakčního systému stránky www.campamento99.cz, na kterém budeme testování provádět. 1.1. JOOMLA Redakční systém Joomla je služba dostupná na webu, která umožňuje jednoduše spravovat články, fotografie, hudbu nebo video a další obsah bez toho, aby musel administrátor zasahovat do zdrojových kódů své stránky. Články může uživatel systému dělit do kategorií, přidružit k nim obrázky, zveřejnit, či omezit přístup ostatních správců. Předmětem testování bude verze Joomla 2.5.19. 1.2. CÍLOVÁ SKUPINA Cílová skupina jsou správci webu, kteří chtějí upravovat obsah svých stránek, na kterých Joomla běží. Do skupiny řadíme škálu uživatelů, počínaje lidmi znalými mnoha redakčních systémů, až po nováčky, kteří nemají zkušenosti s žádným dalším redakčním systémem, ale jsou alespoň z části seznámeni se strukturou a obsahem svých stránek. Testovat budeme grafické rozhraní, proto musí být uživatel znalý práce s grafickým browserem. 1.3. METODY TESTOVÁNÍ V této práci se snažíme využívat moderní postupy testování uživatelského rozhraní bez uživatelů. Jednotlivé postupy jsou detailně popsány níže. 1.3.1. METODA KOGNITIVNÍHO PRŮCHODU Tato metoda dělí daný use-case na několik kroků, které vedou ke dokončení zvolené akce. Jednotlivé kroky dále rozdělíme na množinu dilčích podúkolů respektive akcí. Tyto akce posléze procházíme a vyhodnocujeme. V každém kroku si položíme otázky: Q0 Čeho přesně chce uživatel docílit? Q1 Je uživateli zřejmá akce, kterou má provést? Spojí si uživatel popisek akce s jeho cílem? Q3 Má uživatel dostatečnou zpětnou vazbu? Jestliže při zodpovídání otázek narazíme na negativní odpověď, zdůvodníme domněnku, určíme prioritu závažnost a navrhneme řešení. 1.3.2. METODA HEURISTICKÉ EVALUACE Tato metoda vyhodnocuje použitelnost uživatelského rozhraní s pomocí jednotlivých pravidel. Porušení těchto pravidel přířazujeme priority, kterým podlé své závažnosti navrhneme řešení. H1 Viditelnost stavu systému H2 Shoda mezi reálným světem a systémem H3 Uživatelská kontrola a svoboda H4 Standardizace a konzistence

H5 Prevence chyb H6 Rozpoznávání namísto vzpomínání H7 Flexibilita a efektivnost použití H8 Estetický a minimalistický design H9 Pomoc uživatelům poznat, pochopit a zotavit se z chyb H10 Návody a dokumentace 2. PŘEHLED ZVOLENÝCH USE-CASES 2.1. PŘIDÁNÍ ČLÁNKU S OBRÁZKEM Přidání článku s obrázkem je jednou z nejčastejších akcí, které správce webu provádí. Články se řadí do kategoríí. Znamená to, že nový článek se na stránce zobrazí ve zvolené rubrice jako jedna z interaktivních položek. 2.2. PŘIDÁNÍ GALERIE OBRÁZKŮ Galerií obrázků je myšleno soubor fotek, které může návštevník jednoduše procházet. Stejně jako článek, i galerie má svoji kategorii. Galerie by měla obsahovat rozmanité možnosti ve způsobu zobrazení, jako stránkování, případně počet fotek na stránce, velikost náhledu apod. 2.3. PŘIDÁNÍ POLOŽKY DO KALENDÁŘE Na stránkách si návštěvník hned na začátku všimne přehledného kalendáře akcí, které jsou na následující časové období naplánovány. Plánování akcí je důležitou součástí správy webu a tedy obsluha kalendáře by měla být jednou z priorit. 2.4. PŘIDÁNÍ UŽIVATELE SYSTÉMU Důležitou akcí je také přidání dalšího člověka mezi správce systému. Na tento bod není kladen takový důraz jako na předešlé body. Dokonce, přílišné propragování této volby by mohlo působit zmatečně a způsobilo by aplikaci nepřehlednou.

3. TESTOVÁNÍ ZVOLENÝCH USE-CASES Všechny případy užití vychází z body, kdy je uživatel přihlášen do systému a browser zobrazuje hlavní stránku. 3.1. PŘIDÁNÍ ČLÁNKU S OBRÁZKEM Přidání článku s obrázkem je jednou z nejčastejších akcí, které správce webu provádí. Články se řadí do kategoríí. Znamená to, že nový článek se na stránce zobrazí ve zvolené rubrice jako jedna z interaktivních položek. Pro ujasnění cíle si položme otázku: Q0 Čeho přesně chce uživatel docílit? Uživatel chce dosáhnout toho, aby se v rubrice Aktuality na webu www.campamento99.cz zobrazil nový článek s malým ilustračním obrázkem. Rubrika Aktuality na webu www.campamento99.cz

3.1.1. NAVIGACE V prvním kroku musíme vyhledat formulář, který slouží k přidávání článků. Velmi přehledná uvítací stránka nabízí hned několik možností, které mají něco společného s články dokonce tlačítko Přidat nový článek. Uplatněme metodu kognitivního průchodu: odpověd nález / popis doporučené řešení Q1 Tlačítko Přidat nový článek jasně napovídá uživateli, kam se má ubírat. Tlačítko svojí animací přímo vybízí ke kliknutí ve chvíli, kdy na něj uživatel najede myší. Q3 Po kliknutí je uživatel přesměrován na příslušnou stránku.

3.1.2. VYPLNĚNÍ FORMULÁŘE Dostáváme se do fáze, kdy uživatel systému musí začít přemýšlet. Tato fáze může být kritická, pro lajka může být vyplnění formuláře obtížné. Jednou z povedených věcí je lišta, která se vyskytuje vždy viditelně v horní části stránky. Nabízí uložení článku a nápovědu. Tabulka otázek metody kognitivního průchodu: odpověd nález / popis doporučené řešení Q1 Je jasné, že formulář slouží k přidání článku. ne Formulář obsahuje možná až příliš možností, které jsou pro základního uživatele nepodstatné. Možnost rozčířených možností Q3 Po uložení článku se v horní částí stránky objeví jasný nápis Článek byl uložen.

3.1.3. PŘIDÁNÍ OBRÁZKU Po uložení článku je třeba přidat obrázek. Uživatelské rozhraní nabízí jak tlačítko Obrázek v dolní části formuláře, tak panel Obrázky a odkazy. Je docela jasné, že tlačítko u formuláře dává možnost přidat obrázek do textu. Panel vpravo celkem dobře napovídá titulkem Obrázek úvodníku. Co však znamená Odkaz A, Odkaz B a Odkaz C, to není vůbec jasné. Tyto titulky dokonce poskytují při najetí myší na ně nápovědu, ani ta však nestačí k tomu, aby uživatel pochopil důvod jejich existence. odpověd nález / popis doporučené řešení Q1 Obrázek úvodníku napovídá vše potřebné. Uživateli může chvíli trvat zorientovat se v několika možnostech, správný popis však vede k cíli. Možnost rozčířených možností Q3 Tlačítko Uložit poskytuje zpětnou vazbu výpisem příslušné hlášky. Co na to řeknou naše otázky spojené s kognitivním průchodem?

Nesrozumiletnost části zmíněného panelu je sice chybou, ale jak vidíme na použitelnost to vliv nemá. Výsledkem toho use-case je úspěšné přidání článku s ilustračním obrázkem. 3.2. PŘIDÁNÍ GALERIE OBRÁZKŮ Galerií obrázků je myšleno soubor fotek, které může návštevník jednoduše procházet. Stejně jako článek, i galerie má svoji kategorii. Galerie by měla obsahovat rozmanité možnosti ve způsobu zobrazení, jako stránkování, případně počet fotek na stránce, velikost náhledu apod. Pro ujasnění cíle si položme otázku: Q0 Čeho přesně chce uživatel docílit? Uživatel chce dosáhnout toho, aby se v rubrice Aktuality na webu www.campamento99.cz zobrazila nová položka, která odkazuje na galerii obrázků. Pro uživatele může být matoucí, že galerie obrázků se svým způsobem chová jako článek. Jedná se totiž o článek, ke kterému je dále přidána interkativní tabulka obrázků. 3.2.1. NAVIGACE Uživatele může zmást položka Správce médii, správně by však měl pokračovat do Přidat nový článek. Jinak by však měl postupovat stejně, jako v navigaci případu užití Přidání článku s obrázkem. odpověd nález / popis doporučené řešení Q1 Q3 Ve chvíli, kdy je uživatel seznámen s faktem, že galerie je vždy součástí nějakého článku, je vše v pořádku. Jsouc si vědomi nedostatečné informovsti uživatele o tomto způsobu galerie, musíme dát kladné. Prohlížeč je přesměrován na cílovou adresu. Metodou heuristické evaluace v tomto kroku dostáváme: Částečné porušení bodu H10: Nový uživatel je z části povinnen pročíst si tutoriál systému, který používá, avšak zdravý rozum říká, že galerie obrázků je dostatečné důležitá akce, že by měla být předhazována uživateli alespoň v rychlé nápovědě či rychlotutoriálu pro nováčky. Závažnost tohoto nýlezu považuji za středně malou.

3.2.2. PŘIDÁNÍ GALERIE Ve spodní částí formuláře z bodu 3.1.2. je tlačítko Admirror Gallery. Toto tlačítko slouží k přidání galerie obrázků jako sekvence HTML kódu do textového pole. Obrázky a odkazy z bodu 3.1.3. nemá s galerií nic společného. Po stisknutí tlačítka se objeví vyskakovací okno s výběrem složky, jejíž obsah bude přidán jako galerie. Zaškrtnutím volby Parameters nám umožní galerii upravit podle vlastních potřeb. Zhodnoťme efektivitu metodou kognitivního průchodu. odpověd nález / popis doporučené řešení Q1 ne Uživatel nejdříve se musí zorientovat a prozkoumat všechny možnosti formuláře. Procházet další zbytečné funkce může být neefektivní. Seznámení uživatele s problematikou galerie, nejlépe krátkým videem. ne Tlačítko Admiror Gallery dostatečně nevystihuje svoji funkci. Nahrazení stávajícího obrázku lepší ilustrací. Q3 Přidání galerie do textového pole jako HTML sekvence je dostatečně výrazný feedback. Výsledek našeho případu užítí vypadá následovně:

3.3. PŘIDÁNÍ POLOŽKY DO KALENDÁŘE Na stránkách si návštěvník hned na začátku všimne přehledného kalendáře akcí, které jsou na následující časové období naplánovány. Plánování akcí je důležitou součástí správy webu a tedy obsluha kalendáře by měla být jednou z priorit. Pro ujasnění cíle si položme otázku: Q0 Čeho přesně chce uživatel docílit? Uživatel chce dosáhnout toho, aby se v levém panelu Kalerndář na webu www.campamento99.cz zobrazila nová položka s datem a názvem akce. 3.3.1. NAVIGACE Uvítací stránka opět poskytuje velmi snadnou orientaci a naízí možnost Správy kalendáře. Dále poskytuje seznam dosud přidaných akcí a nabídku úpravy, či vytvoření nové položky. odpověd nález / popis doporučené řešení Q1 Tlačítko Správa kalendáře jasně napovídá uživateli, kam se má ubírat. Tlačítko svojí animací přímo vybízí ke kliknutí ve chvíli, kdy na něj uživatel najede myší. Q3 Po kliknutí je uživatel přesměrován na příslušnou stránku.

3.3.2. PŘIDÁNÍ POLOŽKY DO KALENDÁŘE K přidání položky je připravený jednoduchý formulář, kterému snad není co vytknout. K uložení změny či nově vytvořené položky slouží jednoduchý panel: Výsledek metody kognitivního průchodu dostáváme kladný: odpověd nález / popis doporučené řešení Q1 Tlačítko Správa kalendáře jasně napovídá uživateli, kam se má ubírat. Tlačítko svojí animací přímo vybízí ke kliknutí ve chvíli, kdy na něj uživatel najede myší. Q3 Po kliknutí je uživatel přesměrován na příslušnou stránku. Úspěšně dokončený případ užití se projeví na stránce takto:

3.4. PŘIDÁNÍ UŽIVATELE SYSTÉMU Důležitou akcí je také přidání dalšího člověka mezi správce systému. Na tento bod není kladen takový důraz jako na předešlé body. Dokonce, přílišné propragování této volby by mohlo působit zmatečně a způsobilo by aplikaci nepřehlednou. Pro ujasnění cíle si položme otázku: Q0 Čeho přesně chce uživatel docílit? Uživatel chce dosáhnout toho, aby se i další lidé mohli stát správci a upravovat obsah. Tento nově přidaný uživatel by měl místo ve Správě uživatelů. 3.4.1. NAVIGACE Předpokládejme, že uživatel je seznámen s menu uvítací stránky, která mimo jiné obsahuje položku Spravá uživatelů. Rozhraní poskytuje přehledný seznam všech správců našeho redakčního systému. Každá položka seznamu se rozkliknout a zobrazit detailní informace o uživateli. Pokračujme nabídkou Nový v horní části stránky.

3.4.2. VYTVOŘENÍ NOVÉHO UŽIVATELE Dostali jsme ke třem formulářům. V prvním formuláři uživatel vyplní základní informace o nově přidaném jedinci. Jedná se jednoduchou práci, která je nad očekávání ještě zjednodušena možností použití šablon, což poskytuje náš druhý formulář. Třetí formulář nám dává možnost přidělení pravomocí nového uživatele. Je to jediná věc, která vyžaduje trochu pokročilé porozumnění systému. Zhodnoťme případ užití: odpověd nález / popis doporučené řešení Q1 Vyplnění formuláře je intuitivní. Každá položka má při najetí myší bližší popis, proto se nemůže stát, že by byl uživatel zmaten. Q3 Po uložení uživatele se zobrazí hláška o úspěšném provedení akce.

4. HEURISTICKÁ EVALUACE Provedením analýzy docházime k velmi uspokojivým výsledkům. Projděme jednotlivé kroky, které stojí za zmíňku a ukažme je na systému. H1 Viditelnost stavu systému + H9 Pomoc uživatelům poznat, pochopit a zotavit se z chyb V systému nedochází ke složitějším vůpočtům a aplikace se neseká, proto většinou nenastává chvíle zmatení. Při každé změně, uložení, či zásahu do systému je zobrazena hláška, která informuje správce systému o úspěchu, ši neúspěchu vyvolané akce. H7 Flexibilita a efektivnost použití V systému se nováček ne vždy uplně rychle zorientuje, ale stačí málo k tomu, aby efektivně a snadno využíval pokročilé funkce a možnosti. H10 Návody a dokumentace Celý systém je velmi dobře zdokumentovaný. Každá stránka nabízí tlačítko nápovědy v případě zatoužení po rozsáhlé dokumentaci, ba dokonce u každého titulku poskytuje krátký popis políčka. 5. ZÁVĚR K testování uživatelského rozhraní jsme použili metody kognitivního průchodu a z části heuristickou evaluaci. Aplikace v testu obstála velmi dobře. Negativní hodnocení se vyskytla jen ojediněle a jejich závažnost se pohybovala velmi nízko. Přednostmi aplikace je jednoduchost a přehlednost a stálá podpora. Tento systém a jeho vývojáři má můj respekt už proto, že spadá do kategorie bezplatný open-source projekt. 6. ZDROJE [1] http://www.usabilitybok.org/cognitivewalkthrough [2] https://www.nngroup.com/articles/tenusabilityheuristics/