WordPress Testování redakčního publikačního systému Martin Příhoda 12.10. 2012 České vysoké učení technické v Praze Testování uživatelských rozhraní 1
Obsah 1 Úvod 1.1 Popis aplikace 1.2 Popis cílových uživatelů 2 Testovací metody 2.1 Kognitivní průchod 2.2 Heuristická evaluace 3 Testované případy užití 3.1 Instalace (kognitivní průchod) 3.1.1 Popis 3.1.2 Průchod 3.1.3 Shrnutí 3.2 Změna šablony (kognitivní průchod) 3.2.1 Popis 3.2.2 Průchod 3.2.3 Shrnutí 3.3 Publikování článku (kognitivní průchod) 3.3.1 Popis 3.3.2 Průchod 3.3.3 Shrnutí 3.4 Přidání podstránky (heuristická evaluace) 3.4.1 Popis 3.4.2 Průchod 3.4.3 Shrnutí 4 Závěr 2
1 Úvod 1.1 Popis aplikace Jedná se o publikační systém na webu s velkými možnostmi customizace. Je napsaný v PHP využívající databázi MySQL, což také vyžaduje pro svůj provoz na serveru. Systém je šířen zdarma jako open source (licence GNU GPL) a má širokou uživatelskou i vývojářskou komunitu. Lze využít pro malé a střední publikační weby. Oficiální webové stránky: http://wordpress.org/ Aplikace bude testována ve verzi 2.4.2 (dne 12.10. 2012 nejaktuálnější verze) a poběží na: HTTP Serveru Apache 2.2 http://httpd.apache.org/, PHP 5.3 http://php.net/, MySQL 5.5 http://www.mysql.com/. 1.2 Popis cílových uživatelů Cílová skupina uživatelů je pokročilejší při práci s počítačem a měla by znát také základní principy fungování a zprovoznění webových stránek na serveru. Nepředpokládá se znalost tvorby, ale znalost nasazení. Uživatel se tedy snaží o zprovoznění systému WordPress na svém serveru. Samotný WordPress nabízí na stránkách stručný a přehledný návod v angličtině a tak předpokládejme, že bude mít uživatel následující stav: Uživatel vlastní server se všemi uvedenými náležitostmi. Uživatel připravil systém k instalaci nastavením konfiguračního souboru a nahráním celého systému na server. Uživatel má ponětí o tom co by se mělo při instalaci vyplňovat a proč. Situace před testováním je tedy taková, že si uživatel nahrál WordPress dle instrukcí na svůj webový server a udělal vše potřebné pro spuštění instalace. Testovat se pak bude postupně od samotné instalace až po základní kroky v systému, které dělají uživatelé nejčastěji po instalaci. 3
2 Testovací metody 2.1 Kognitivní průchod Touto metodou testujeme použitelnost a srozumitelnost pro nové uživatele. Určíme si čeho chceme dosáhnout. Případ rozložíme do jednotlivých kroků a při každém kroku si zodpovídáme následující otázky: 1. 2. 3. Dostane uživatel očekávu odezvu? 2.2 Heuristická evaluace Tato matoda se zakládá na dodržování pravidel použitelnosti. Zjišťujeme jestli náš stav aplikace splňuje určená pravidla. Pro svoji potřebu využiji Nielsenovu heuristiku, která patří mezi základní a obsahuje následující pravidla: 1. Viditelnost stavu aplikace 2. Shoda mezi aplikací a reálným světem 3. Uživatelská kontrola a svoboda 4. Konzistence a standardizace 5. Prevence chyb 6. Rozpoznávat radši než vzpomínat 7. Flexibilita a efektivita použití 8. Estetický a minimalistický design 9. Pomoc uživatelů poznat, diagnostikovat a vrátit se z chyby 10. Nápověda a dokumentace 4
3 Testované případy užití 3.1 Instalace (kognitivní průchod) 3.1.1 Popis S instalací se setká každý, a proto jsem jí zavedl do svého testování jako první případ. Uživatel by měl pomocí jednoduchého průvodce kompletně dokončit instalaci systému WordPress. Neměl by se zdržovat vyplňováním zbytečných údajů, ale pouze absolvovat nejzákladnější nastavení pro první spuštění. Uživatel má tedy všechny předpoklady přistoupit k samotné instalaci a ve svém webovém prohlížeči si otevře na webovém serveru ve složce systému instalační skript wp-admin/install.php. 3.1.2 Průchod 1. krok - Vyplnit formulář se základnimi údaji Dostane uživatel očekávu odezvu? * * Odezva je řešena velmi dobře. Při zadávání hesla je vidět indikátor složitosti, který také informuje pokud se hesla neshodují. viz obr.1 - instalační formulář 2. krok - Odeslat vyplněný formulář Dostane uživatel očekávu odezvu? * * Odezva v podobě shrnující tabulky (obr 2. - Shrnující tabulka) je dostačující a správně odkazuje na možnost přihlášení do systému, ovšem údaj password: your chosen password mi přijde zbytečný. Naopak bych uvítal spíše rekapitulaci zaregistrované e-mailové adresy. 5
obr. 1. - Instalační formulář obr. 2. - Shrnující tabulka 6
3. krok - První přihlášení Dostane uživatel očekávu odezvu? obr. 3. - Přihlašovací formulář 3.1.3 Shrnutí V tomto případu užití nenastal žádný výraznější problém. Instalace je uživatelsky přívětivá a jednoduchá. WordPress láká tím, že instalace zabere 5 minut. Pokud uživatel ví jak na to, tak to zhruba odpovídá připočtu-li nahrání systému na server a změnu konfiguračních souborů, ale tím jsem se v testování nezabýval, protože to není součástí aplikace. 7
3.2 Změna šablony (kognitivní průchod) 3.2.1 Popis Ihned po instalaci se snaží uživatel přizpůsobit web tak, aby odpovídal jeho požadavkům. Existují velká množství šablon a nebo si uživatel může vytvořit vlastní. Uvažujeme ale uživatele bez znalostí tvorby webu, který si vybere již z předem vytvořených šablon zdarma. Uživatel v tomto případě ví jaký web chce provozovat, ale nemá předem určené rozložení, a tak by se rád podíval na kompletní nabídku šablon a vybral si nejvhodnější. Výchozí stav tohoto průchodu je hlavní strana administrace (Dashboard). 3.2.2 Průchod 1. krok - Přejít do správy šablon Dostane uživatel očekávu odezvu? obr. 4. - Hlavní strana administrace (Dashboard) a přechod do nastavení šablon (Themes) 8
2. krok - Přejít k instalaci šablony Dostane uživatel očekávu odezvu? obr. 5. - Správa šablon a přechod k instalaci nových šablon (Install Themes) 3. krok - Vyhledání vhodné šablony Dostane uživatel očekávu odezvu? ne* * Systém umožňuje zobrazit třeba nejnovějších 15 šablon a nebo vyhledávat příjemně podle různých filtrů, ale nikde není možnost procházet všechny šablony (obr. 6. - Vyhledávací a filtrovací formuláře). Tato možnost je ukryta pokud použijeme vyhledávání přes filtr, když není žádný filtr aktivován, což není ideální řešení. Člověk na to při chvíli zkoušení přijde, ale není to tak intuitivní jako kdyby to bylo uvedené v nabídce nad filterem pod odkazem zobrazit vše. Uživatel je tak nepřímo nucen použít filtr a když nemá přesnou představu o vzhledu, tak ho to může i odradit. Většina uživatelu ale zřejmě má tušení co chtějí provozovat za web a jaký vyžadují styl šablony, takže tomuto nedostatku dávám nízkou prioritu. 9
obr. 6. - Vyhledávací a filtrovací formuláře 4. krok - Instalace požadované šablony Dostane uživatel očekávu odezvu? obr. 7. - Konkrétní šablona v seznamu 10
obr. 8. - Průběh instalace, systém správně informuje o průběhu a po nainstalování vybídne k náhledu, aktivaci nebo výběru dalších šablon. 5. krok - Aktivace nainstalované šablony Dostane uživatel očekávu odezvu? obr. 9. - Oznámení o úspěšné aktivaci a přesměrování na správu šablon kde je nyní možné vidět, že se změna šablony povedla. 11
3.2.3 Shrnutí Při změně šablony jsem narazil na jeden menší nedostatek při hledání, zřejmě tvůrci počítají s tím, že má každý představu o tom jakou šablonu chce a že si ji vyhledá podle určitých kritérií. Myslím ale, že by nebylo na škodu dát jednoduchý a zřetelný přístup k prohlížení všech šablon co jsou k dispozici. 3.3 Publikování článku (kognitivní průchod) 3.3.1 Popis Jedna z hlavních funkcí systému WordPress je právě publikování článků. Vytvoříme tedy článek s nadpisem a nějakým libovolným textem v obsahu. 3.3.2 Průchod 1. krok - Přejít do sekce přidání nového článku Dostane uživatel očekávu odezvu? obr. 10. - Přechod z hlavní strany administrace k vytvoření nového článku je zcela intuitivní. 12
2. krok - Vyplnění nadpisu a libovolného textu do obsahu Dostane uživatel očekávu odezvu? obr. 11. - Vytváření nového článku 3. krok - Publikování článku Dostane uživatel očekávu odezvu? * * Systém informuje o tom, že byl článek publikován a nabídl také odkaz k nahlédnutí na webu, přičemž pořád zůstal v editaci článku, a tak je možno pokračovat v úpravách, což je určitě užitečné a hodnotím kladně. 13
3.3.3 Shrnutí Svojí klíčovou funkci má WordPress zvládnutou velmi dobře. Publikování jednoduchých článku je takřka dokonale jednoduché pro širokou škálu uživatelů. Žádné zbytečné informace, které by odváděli pozornost, přičemž veškéré potřebné nástroje jsou snadno k dispozici. Formátování článků je velmi intuitivní a lze přepnout i přímo do html formátování pro pokročilejší uživatele. Jediné co bych vytknul je nahrávání úvodního obrázku k článku, které je až uplně vpravo dole. Hledal bych ho spíše někde u nadpisu. 3.4 Přidání podstránky (heuristická evaluace) 3.4.1 Popis Jen málo druhů webů se obejde bez nějaké další podstránky. Nyní budu pomocí heuristik testovat, jak se přidá k hlavní straně ještě nějaká podstránka. Podstránku je třeba nějak nazvat a zařadit do navigace třeba na druhé místo hned vedle hlavní strany. 3.4.2 Průchod 1. krok - Přejít na vytvoření nové podstránky 2. krok - Vyplnění názvu a obsahu podstránky 3. krok - Zařadit podstránku do navigace hned vedle hlavní strany 4. krok - Publikování nové podstránky obr. 12. - Přechod z hlavní strany k vytvoření nové podstránky je intuitivní 14
obr. 13. - Prostředí pro vytvoření podstránky. Nález: Nelogický přesun tabulátorem Porušená heuristika: Flexibilita a efektivita použití Po vyplnění nadpisu se tabulátorem přesunu na psaní obsahu, ovšem poté bych čekal na přesun k tlačítkům po pravé straně pro uložení a publikování, namísto toho jsem se tabulátorem dostal do horní lišty, do menu a až poté k těmto tlačítkům. Tento nález bych ale označil pouze nízkou prioritou. Nález: Zařazení podstránky na určité místo v navigaci Porušená heuristika: Rozpoznávat radši než vzpomínat Je zřejmé že k umístění do navigace je potřeba napsat číslo do formuláře Order (obr. 13. - Prostředí pro vytvoření podstránky - vpravo dole) a stránky se pak setřídí podle toho jakou májí hodnotu Order a to tak, že nejmenší číslo na první pozici a největší na poslední pozici. Ovšem nevím jaké mají čísla ostatní podstránky, jestli náhodou nenapíši číslo, které už nějaká stránka má. Číslování může být také od nuly a tak je uživatel nucen otevřít v novém okně administraci a podívat se na čísla ostatních stránek nebo uložit stránku pod nějakým číslem metodou pokusomyl. Toto považuji za uživatelsky nepřívětivé se střední prioritou. 3.4.3 Shrnutí V tomto případu užití jsem se setkal s nevhodným řazením podstránek v navigaci. Nutí uživatele k tomu si zjišťovat nebo pamatovat věci mimo tuto editační stránku. Ideální řešení bych viděl v nabídnutí uživateli tahem určit na jaké pozici v navigaci by měla podstránka být umístěna. V lehčím řešení může být alespoň seznam podstránek s jejich hodnotami Order. Druhý nedostatek se týkal posunu tabulátorem po stránce, tudíž ovládání klávesnicí se tak značně znepříjemní. Řešení spočívá jen v logickém umístění tabindexů u prvků na stránce. 15
4 Závěr WordPress se vyvíjí už několik let a je vypilován do posledních detailů. Hledání chyb ve zvolených případech užití bylo složité. Za zmínku stojí pouze řazení podstránek v navigaci (sekce 3.4.2) a vyhledávání mezi šablonami bez kritérií (sekce 3.2.2). Z mého pohledu je aplikace hodně intuitivní a jednoduchá pro mnoho typů uživatelů. Nenároční uživatelé nejsou mateni pokročilými funkcemi a naopak pokročilým vývojářům nejsou ukrývána zákoutí systému. V tomto ohledu jsou základní funkce aplikace navržený velmi dobře. Kladnou stránkou je také přehledná a čitelná uživatelská příručka a všudypřítomná nápověda. 16