Testování hotového webu
Klasické pojetí uživatelského testování pracuje s hotovým webem. Vytvoříte web, ukážete ho několika uživatelům a zjišťujete, kterým věcem nerozumí (o průběhu testování více v našem starším newsletteru). Potud vše v pořádku, uživatelské testování je skvělá věc. Získáte díky němu obrovské množství užitečných informací. Je nenahraditelným zdrojem poznatků a pomůže vám odhalit spoustu chyb, které by vás nikdy nenapadly.
Nicméně právě v jeho síle je zároveň i slabina. „Pomůže vám odhalit spoustu chyb“. Co s tím? Samozřejmě chyby opravit. Jenže web již máte hotový a každá změna znamená nezanedbatelné množství práce. Ruku na srdce, předělávat všechno od začátku se vám chtít nebude, opravíte jen to, co je ve vašich silách. A co vám termíny a rozpočet dovolí. Jak se tomuto problému vyhnout?
Testujte dříve!
Odpověď je, jak to obvykle bývá, velmi prostá. Otestujte web ještě dříve, než vůbec padne první řádek kódu! Dříve než grafik stráví hodiny času pilováním slušivého kabátku, než kodér grafiku nasadí na HTML šablony, než programátoři vytvoří redakční systém a rozhýbají celý web. Otestujte web ve fázi, kdy je pouhou pokreslenou čtvrtkou papíru nebo soustavou několika obdélníčků ve vektorovém editoru.
Jak obtížné je dělat změny návrhu? Stačí papír zahodit a pokreslit jiný. Nebo v editoru chytit myší pár boxíků a přesunout je jinam. Časová náročnost v řádu minut, maximálně hodin. Oproti desítkám nebo stovkám hodin práce programátorů, grafiků a spol. nepatrný okamžik.
Co jsou návrhy webu
Návrh webu má smysl testovat, pokud představuje vizuální reprezentaci uživatelského rozhraní. Jednoduše řečeno to znamená znázornění toho, kde co na stránce bude, jak se to bude jmenovat a jaký bude obsah.
Návrhy webu mohou mít různou formu:
- Náčrtek na papíře – stačí vzít tužku a nakreslit hrubou strukturu stránky.
Výhoda: velmi jednoduché na vytvoření.
Nevýhoda: horší možnosti úprav. Většinou je třeba celý návrh nakreslit znovu. - Wireframe – neboli „drátěný model“ stránky vytvořené v editoru na počítači. Buď v klasickém vektorovém editoru (např. Inkscape), nebo specializovaném nástroji (Axure, MS Visio).
Výhoda: velmi snadné provádění úprav. Možnost šířit elektronicky, kopírovat a tisknout.
Nevýhoda: stále se jedná o oddělené stránky, které je třeba ukazovat uživatelům jednu po druhé. - Interaktivní wireframe – propojení více wireframů navzájem odkazy. Díky tomu je možné simulovat pohyb na webu klikáním na odkazy. Vytvořit je můžete například pomocí HTML a klikacích map, vygenerovat je umí také některé programy.
Testování papírových náčrtků
Výborný nástroj k otestování již prvních koncepčních nápadů.
Rychlá varianta
Stačí nakreslit na papír svou představu podoby stránky, nebo i její části. Detaily nejsou důležité, vůbec nejde o to, aby náčrtek věrně odrážel podobu webové stránky. Uživatelé vidí, že se jedná o pracovní verzi, a neočekávají plnou funkčnost.
Náčrtek ukážeme uživatelům a ptáme se. Zjišťujeme porozumění jednotlivým prvkům.
Příklady otázek:
- O čem tato stránka pojednává? – Zjistíme, zda je nadpis stránky výstižný a srozumitelný.
- Co byste čekal po kliknutí na tento odkaz? – Zjistíme, zda text odkazu vyvolává správné očekávání.
- K čemu slouží tento prvek? – Zjišťujeme srozumitelnost funkce prvku – tlačítka, posuvníku apod.
A trochu propracovanější
I s papírovými náčrtky se dá simulovat určitá interaktivita webu. Musíte si ovšem dopředu připravit všechny varianty, kterými může uživatel projít. Jak to pak vypadá? Naproti uživateli sedí u stolu člověk, který hraje roli „počítače“. Uživatel ukazuje, na co by kliknul, a „počítač“ podle toho prohazuje varianty náčrtků na stole.
Lepší než zdlouhavé popisování asi bude videoukázka:
video 1,
video 2
.
O testování papírových prototypů pojednává i jedna tlustá kniha.
Nevýhodou je větší časová náročnost přípravy. Je potřeba vše rozkreslit na kousky papíru, promyslet všechny možnosti interakce a dobře se nachystat na roli „počítače“. Z toho důvodu bývá u komplexnějších projektů efektivnější otestovat interaktivní wireframy vytvořené v počítači.
Testování wireframů
V principu velmi podobné testování papírových náčrtků.
Wireframy vytvoříme v počítači za pomoci vektorového grafického editoru nebo specializovaného nástroje. Tipy na zajímavé nástroje přináší například Wireframes Magazine, pomůže i Google.
Jak může wireframe vypadat:
Čím se liší od testování na papíře? Wireframy jsou graficky uhlazenější a uživatel je vidí na monitoru počítače. Hrozí nebezpečí, že je bude považovat za hotovou webovou stránku. Raději jej důrazně upozorněte, že se jedná pouze o náčrtky, aby se vůbec neohlížel na grafické zpracování a nepočítal s tím, že půjde na něco klikat.
Výhodou naopak je, že z testování můžete poměrně snadno pořídit video i audio záznam. Stačí šikovný program, který umí zaznamenat snímek obrazovky a zvuk z mikrofonku. Plně dostačující a navíc zdarma je například HyperCam.
Testování interaktivních wireframů
Forma je velmi podobná testování statických wireframů, ovšem náplň testování je zcela jiná. Interaktivní wireframy vám umožní zadat uživatelům testovací úkoly, podobně jako při testování hotového webu.
Díky tomu není hlavním motivem testování kladení otázek, ale pozorování uživatele při akci. Na co si dát pozor:
Interaktivní wireframy nejsou hotový web. Uživatel přece jen nemůže zabrouzdat, kam chce, řada podstránek webu není hotových. Testovací úkoly s tím musí počítat a uživatel by o tom měl vědět.
- Chybí grafika. Ta může později změnit vizuální prioritu prvků. Co bylo na jednoduchém wireframe dobře vidět, může v grafickém návrhu zaniknout. Z toho vyplývá jediné – nezapomeňte otestovat i hotový web oblečený do grafiky.
- Některé věci neuděláte. I specializovaný software má ve srovnání s běžným webem omezené technické možnosti. Řadu technických či vizuálních vychytávek nelze vytvořit, a tudíž ani otestovat.
Jak vypadá videozáznam z testování wireframu formuláře, si můžete prohlédnout na tomto videu.
Pro vytváření interaktivních wireframů doporučujeme a sami s úspěchem používáme Axure. Není sice nejlevnější, ale plně funkční demoverzi si můžete vyzkoušet zdarma a třeba si díky ní jednou otestovat svůj návrh webu.
Zkuste to!
I když se vám testování návrhů webu může zdát jako složitá věc, nemusíte se ničeho obávat. Uživatelské testování je natolik silný nástroj, že i když jej provedete špatně, pořád získáte daleko lepší informace, než kdybyste ho nedělali vůbec.
ČLÁNKY DO MAILU