České vysoké učení technické v Praze Testování internetových stránek WWW.studentagency.cz Semestrální projekt z předmětu Testování uživatelských rozhraní (A7B39TUR) Matouš Zítko 20.10.2011
Obsah 1. Úvod... - 3-1.1. Popis internetové stránky... - 3-1.2. Popis uživatelů... - 3-2. Teorie testování bez uživatele... - 3-2.1. Testované Use-cases... - 3-2.1.1. Registrace uživatele... - 3-2.1.2. Vyhledávání požadovaných autobusových spojů... - 4-2.1.3. Rezervace místa v autobuse... - 4-2.1.4. Vyhledávání a rezervace zahraničních zájezdů... - 4-2.1.5. Vyhledávání a rezervace pracovních pobytů... - 4-2.2. Metody testování... - 4-2.2.1. Kognitivní průchod (Cognitive Walkthough)... - 4-2.2.2. Heuristická evaluace (Heuristic Evaluation)... - 5-2.2.3. Přiřazení priority... - 5-3. Testování jednotlivých případů užití... - 6-3.1. Testování registrace uživatele... - 6-3.2. Vyhledávání požadovaných autobusových spojů... - 7-3.2.1. Testovací tabulka... - 7-3.2.2. Popis jednotlivých kroků... - 8-3.2.3. Popis odhalených chyb... - 8-3.3. Rezervace místa v autobuse... - 9-3.4. Vyhledávání a rezervace zahraničních zájezdů... - 10-3.4.1. Testovací tabulka... - 10-3.4.2. Popis jednotlivých kroků... - 10-3.4.3. Popis odhalených chyb... - 10-3.5. Vyhledávání a rezervace pracovních pobytů... - 11-4. Shrnutí chyb a jejich priorit... - 14-4.1. Testování registrace uživatele... - 14-4.2. Vyhledávání požadovaných autobusových spojů... - 14-4.3. Rezervace místa v autobuse... - 14-4.4. Vyhledávání a rezervace zahraničních zájezdů... - 15-4.5. Vyhledávání a rezervace pracovních pobytů... - 15-5. Závěr... - 15 - - 2 -
1. Úvod 1.1. Popis internetové stránky Internetové stránky www.studenagency.cz vlastní firma STUDENT AGENCY s..r.o. Tato firma je největší cestovní agenturou v České republice. Na svých internetových stránkách firma nabízí velké množství letenek, jízdenek a velký výběr jazykových a pracovních pobytů v zahraničí. Na úvodní stránce je hlavní menu v horní části stránky. Pod hlavním menu je umístěno mnoho odkazů na různé zájezdy či letenky a přímá registrace jízdenek, letenek a jiných produktů (viz. Obrázek č. 1) Obrázek č. 1: Vzhled úvodní stránky 1.2. Popis uživatelů Firma STUDENT AGENGY s.r..o. nabízí širokou nabídku, kterou využívá velké množství lidí. V tomto testování se budu zaměřovat především na muže mezi 40-50 lety. U těchto lidí předpokládám středně pokročilou práci s internetovými nástroji. 2. Teorie testování bez uživatele 2.1. Testované Use-cases 2.1.1. Registrace uživatele Registrace je nutná pro rezervaci jakéhokoliv zájezdu, jízdenky, nebo letenky nabízené na stránkách student agency. Je nutné vyplnit dotazník a poskytnout tak firmě některé osobní údaje. - 3 -
Zde může dojít nejspíše ke špatně nazvaným, nebo nevhodně umístěným dotazovacím polí. K testování jsem použil Heuristická evaluace. 2.1.2. Vyhledávání požadovaných autobusových spojů Pro rezervování místa v autobuse je potřeba nejprve najít požadovaný spoj. Každý nový zákazník by měl mít snadno viditelné tlačítko pro vyhledávání spojů. Dále by se měl zobrazit správně formulovaný dotazník pro vyhledávání a po jeho správném vyplnění by se měl zobrazit jednoduše čitelný a strukturovaný feedback, tzn. přehledně zobrazené vyhledané spoje. K testování jsem použil Kognitivní průchod. 2.1.3. Rezervace místa v autobuse Pokud uživatel správně využije use-case popsaný výše (podkapitola 2.1.2), tedy najde požadovaný spoj, musí si vybrat konkrétní místo v autobuse a zaplatit za něj. Tato činnost je pro uživatele velice důležitá a je proto nutné mít přehledně zobrazená jednotlivá místa a následně musí mít uživatel jasně zobrazeno jak za ně zaplatit. Zde by opět mohlo docházet k nejasným formulacím a hlavně při placení by mohly takové chyby uživatele odradit od používání tohoto systému. Zde budu rezervovat místo pro 2 osoby do zadní části autobusu. K testování jsem použil Heuristickou evaluaci. 2.1.4. Vyhledávání a rezervace zahraničních zájezdů Zprostředkování zahraničních zájezdů je další službou, kterou firma STUDENT AGENCY s.r.o. nabízí. Protože za zahraniční zájezd uživatelé obvykle utratí velké množství finančních prostředků, je velice důležité, aby tato část internetového rozhraní byla přehledná a dobře zpracovaná. Zde by měl být snadno dohledatelný formulář pro vyhledávání zájezdů, který musí obsahovat všechny potřebné a dobře popsané vyhledávací položky. Po vyhledání je nutné mít zcela jasně zobrazené tlačítko pro rezervaci a to musí vést na dobře formulovaný a strukturovaný rezervační formulář. K testování jsem použil Kognitivní průchod. 2.1.5. Vyhledávání a rezervace pracovních pobytů Mezi další služby, které firma STUDENT AGENCY s.r.o. nabízí a kterou budu testovat, patří zprostředkování pracovních pobytu v zahraničí. Podobně jako u zájezdů je zde nutné mít možnost přehledně pracovní pobyt najít a rezervovat. K testování jsem použil Heuristickou evaluaci. 2.2. Metody testování Testování uživatelského rozhraní bez uživatele se provádí pomocí dvou základních metod. 2.2.1. Kognitivní průchod (Cognitive Walkthough) První metoda se jmenuje Kognitivní průchod (Cognitive Walkthrough). Tato metoda nám pomůže zjistit, jak obtížné je pro uživatele, který artefakt používá poprvé, dosáhnout určeného cíle. Místa, kde má uživatel problémy, pak odhalují nedostatky artefaktu. Na začátku testování daného případu užití si položíme otázku: Čeho chce uživatel dosáhnout? Poté si v každém kroku pokládáme sérii otázek: Q1. Bude uživateli jasné co udělat? Q2. Spojí si uživatel popis akce s tím, co chce udělat? Q3. Dostane uživatel smysluplnou odezvu na svoji akci? - 4 -
2.2.2. Heuristická evaluace (Heuristic Evaluation) Druhá metoda se jmenuje Heuristická evaluace (Heuristic Evaluation). Tato metoda je založena na zkoumání artefaktu několika experty, kteří hodnotí, zda artefakt neporušuje nějaké heuristiky. Pro testování pomocí heuristické evaluace jsem používal heuristiky sepsané panem Nielsenem z roku 1994. V tomto testování jsem využil obě zmíněné testovací metody. Nielsenovi heuristiky: 1. Viditelnost stavu systému - Systém dává vždy uživateli vědět, v jakém je stavu 2. Spojení mezi systémem a reálným světem - Systém by měl s uživatelem komunikovat pro něj srozumitelným jazykem 3. Uživatelská kontrola a svoboda - Při chybě uživatele by systém vždy měl mít možnost únikového východu 4. Konzistence a standardy - Konvence a standardy by měli být dodržovány 5. Prevence chyb - Design by měl být navržen tak, aby předcházel chybám uživatele 6. Rozpoznání místo pamatování - Uživatel by neměl být nucen si něco pamatovat - Systémové objekty a možnosti by měli být vždy viditelné 7. Flexibilita a efektivita použití - Systém by měl poskytovat klávesové zkratky - Systém by měl být dobře navržen pro zkušené i nezkušené uživatele 8. Estetický a minimalistický design - Systém by neměl zobrazovat nepotřebné informace 9. Pomoc uživatelů poznat, pochopit a opravit chyby - Chybová hlášení by měla být napsaná srozumitelně a měla by uvádět možná řešení 10. Pomoc a dokumentace - Pro uživatele by mělo být snadné dohledat informace o artefaktu 2.2.3. Přiřazení priority Priorita problému bude přiřazena podle následující tabulky. Popis priority problému Označení priority problému Velký problém je ho třeba opravit přednostně 3 Střední problém oprava je potřebná, ale není nutná okamžitě Malý problém oprava je doporučená, ale problém nezpůsobí velké problémy 2 1-5 -
3. Testování jednotlivých případů užití 3.1. Testování registrace uživatele Toto testování bylo prováděno pomocí heuristické evaluace. Popis chyby Špatné nápisy přihlásit uživatele a registrace Kreditové jízdenky. Není jasné, k čemu se vlastně uživatel registruje. (viz. Obrázek č. 2) U vložení data narození není napsáno, jakým formátem se má datum vložit. (viz. Obrázek č. 3) Po klapnutí na odkaz pro přečtení přepravních podmínek se otevře stránka v miniaturním okně. (viz. Obrázek č. 4) Po potvrzení údajů systém nemá žádný mezikrok pro zrušení registrace. (viz. Obrázek č. 5) Systém nevypíše žádnou zprávu o úspěšné registraci.(viz. Obrázek č. 6) Porušená heuristika H1: Viditelnost stavu systému Návrh na řešení Sjednotit názvy H5: Prevence chyb Napsat do závorky jaký formát systém požaduje 1 H7: Flexibilita a efektivita použití H4: Konzistence a standardy H3: Uživatelská kontrola a svoboda H1: Viditelnost stavu systému Přesměrovat odkaz na soubor ve formátu PDF nebo otevřít stránku v nové 2 záložce Vložit mezikrok, ve kterém bude mít uživatel možnost od registrace ustoupit Zobrazit hlášení o úspěšném přihlášení priorita 3 2 2 Obrázek č. 2: Špatné nápisy při registraci Obrázek č. 3: Chybějící formát pro pole Datum narození - 6 -
Obrázek č. 4: Zobrazení přepravního řádu Obrázek č. 5: Tlačítko pro potvrzení registrace Obrázek č. 6: Následná obrazovka po potvrzení registrace Shrnutí: Při testování tohoto případu užití jsem odhalil několik nedostatků, které jsou velmi vážné vzhledem k tomu, že registrací musí projít každý uživatel. Systém by měl sjednotit názvy u souvisejících popisků, aby nedocházelo ke zmatení uživatele různou terminologií. Dále by měl vždy uživateli říci, v jakém formátu od něj očekává data. Systém také často nezobrazuje uživateli informace o provedené akci. 3.2. Vyhledávání požadovaných autobusových spojů Toto testování jsem provedl pomocí kognitivního průchodu. 3.2.1. Testovací tabulka Uživatel má za úkol vyhledat spoj z Prahy do Hradce Králové. 1. krokk 2. krok Q1 NE (1) ANO Q2 ANO ANO Q3 ANO NE (2) - 7 -
3.2.2. Popis jednotlivých kroků 1. Krok Uživatel se nachází na úvodní stránce www.studentagency.cz. Zde by měl najít tlačítko pro vyhledávání autobusových spojů. 2. Krok Uživatel se nachází na stránce Společný rezervační systém autobusové a vlakové dopravy a zde by měl zadat, odkuda kam chce cestovat. 3.2.3. Popis odhalených chyb 1. Na hlavní stránce se nacházejí dvě tlačítka s názvem jízdenky a uživatel nemůže vědět, jestli obě tlačítka směřují ke stejnému cíli, a tedy neví, které by si měl vybrat. Priorita problému = 3. (viz. Obrázek č. 7) Obrázek č. 7: Dvě stejná tlačítka 2. Po vyhledání spojů se zobrazí jak autobusy zadané uživatelem v daný termín, ale i autobusy jedoucí v opačném směru (tedy s prohozenými destinacemi) a ještě i autobusy jedoucí následující den. Zobrazí se tedy velké množství redundantních informací, které mohou uživatele zmást (viz. Obrázek č. 8). Priorita problému = 3. Obrázek č. 8: Zobrazení vyhledaných spojů - 8 -
Shrnutí: V tomto testování jsem odhalil dvě závažné chyby, které mohou nezkušenému uživateli způsobit velké potíže a měly by se rychle napravit. Tlačítka, která jsou zobrazena blízko u sebe, by neměla mít stejný popis, protože to může uživatele zmást. Také při výpisu hledaných informací by se měly vypisovat pouze ty informace, které jsou pro uživatele relevantní. 3.3. Rezervace místa v autobuse Toto testování jsem provedl pomocí heuristické evaluace. Popis chyby Při výběru místa v autobuse není na první pohled jasné, co který obrázek znamená, a obrázek znamenající nápovědu nic nedělá. (viz. Obrázek č. 9) Porušená heuristika Návrh na řešení H10: Help a dokumentace Aktivovat obrázek znamenající informace. priorita 1 Obrázek č. 9: Vybrání místa v autobuse - 9 -
Shrnutí: Toto testování odhalilo chybu, kdy uživatel nemá nápovědu tam kde by jí čekal, protože obrázek obecně považovaný za nápovědu nic nedělá. 3.4. Vyhledávání a rezervace zahraničních zájezdů Toto testování jsem provedl pomocí kognitivního průchodu. 3.4.1. Testovací tabulka Uživatel má za úkol vyhledat a zarezervovat si zahraniční zájezd letecky do Maroka na přelomu srpna a září. 1. Krok 2. Krok 3. Krok 4. Krok 5. Krok 6. Krok Q1 NE (1) ANO ANO ANO ANO ANO Q2 NE (1) ANO ANO ANO ANO ANO Q3 ANO ANO ANO NE (2) ANO ANO 3.4.2. Popis jednotlivých kroků 1. Krok Uživatel se nachází na úvodní stránce a má za úkol najít tlačítko, které ho přesměruje na výběr zahraničního zájezdu. 2. Krok Uživatel se nachází na stránkách pro vyhledání dovolené, kde si má vybrat destinaci, termín, počat osob, způsob dopravy apod. 3. Krok Po úspěšném vyhledání se zobrazí stránka se všemi nalezenými zájezdy vyhovujícími podmínkám vyhledávání. Uživatel má za úkol si jeden vybrat a zobrazit si informace o hotelu. 4. Krok Uživateli vyskočilo okno se zobrazenými detailními informacemi o hotelu. Uživatel má za úkol vybrat si termín zájezdu. 5. Krok Uživateli se zobrazili možné termíny a teď má za úkol si zájezd objednat. 6. Krok Uživatel se dostal na stránku, kde má vyplnit nezávaznou objednávku a potvrdit ji. 3.4.3. Popis odhalených chyb 1. Na úvodní stránce je několik tlačítek, které mohou odkazovat na požadovaný cíl. Uživatel je zmaten a neví, které tlačítko by si měl vybrat (viz. Obrázek č. 10). Konkrétně se jedná o tlačítka Dovolená, Cestování na míru, Ubytování. Tlačítka Dovolená a Ubytování - 10 -
jsou zde dokonce dvakrát a uživatel nemůže mít jistotu, že stejná tlačítkaa vedou na stejnou stránku nebo jestli v nich není nějaký rozdíl. Tlačítko Cestování na míru uživateli nemůže říct, co po jeho zmáčknutí může očekávat a toto tlačítko se překrývá tlačítkem Pojištění. Priorita problému = 3. Obrázek č. 10: Hlavní menu úvodní stránky 2. Po kliknutí na tlačítko Výběr termínu byl uživatel přesměrován na stránku, na které je zobrazeno totéž co na předchozí stránce, a je nucen kliknout na další tlačítko termíny. Priorita problému = 1. (viz. Obrázek č. 11) Obrázek č. 11: Opakovaná výzva Shrnutí: V tomto testování jsem zjistil, že systém má velkou chybu v názvech tlačítek na hlavní stránce. Tyto chyby mohou vést k zmatení uživatele a jeho přechod na konkurenční službu. Druhá chyba už je méně podstatná ale i ta by se měla opravit. 3.5. Vyhledávání a rezervace pracovních pobytů Toto testování bylo prováděno pomocí heuristické evaluace. Popis chyby Systém po vyplnění dotazníku pro hledání a kliknutí na tlačítko vyhledat zobrazí vyhledané pobyty úplně vespodu stránky a zároveň je přesunut na vrchol stránky. Uživatel má pocit, že se nic nestalo (není upozorněn na úspěšné vyhledávání). (viz. Obrázek č. 12,13,14) Označení povinných položek formuláře je příliš malým fontem a nemá popisek. (viz obrázek č. 16) Porušená heuristika H1: Viditelnost stavu systému Návrh na řešení Po vyhledání zobrazit stránku v místě vyhledaných pobytů nebo na vrcholu stránky napsat hlášení o úspěšném hledání a místě, kde jsou informace zobrazeny. H5: Prevence chyb Zvětšit font a barvu hvězdičky a připsat k formuláři legendu. priorita 3 1-11 -
Obrázek č. 12: Vyplnění a odeslání dotazníku Obrázek č. 13: Posunutí na vrchol stránky Obrázek č. 14: Zobrazené výsledky pod vyhledávacím dotazníkem - 12 -
Obrázek č. 15: Popisek k rezervačnímu dotazníku Obrázek č. 16: Ukázka formuláře pro registraci pobytu Shrnutí: I v tomto testování jsem odhalil několik chyb. Především by systém měl uživateli vždy jasně říci, kde jsou zobrazeny hledané údaje. Dále by se systém měl vyvarovat nic neříkajících hlášení a špatně viditelných informací a upozornění. - 13 -
4. Shrnutí chyb a jejich priorit 4.1. Testování registrace uživatele Špatné nápisy - Nápisy přihlásit uživatele a registrace Kreditové jízdenky. Není jasné, k čemu se vlastně uživatel registruje. - Popisky by se měli sjednotit, aby uživatel nebyl zmatený. - Priorita = 3 Formát data narození - U dotazníku není uveden formát data narození. Pokud uživatel zvolí špatný formát, bude muset zadání zopakovat. - Do závorky k dotazníkovému poli připsat příklad data narození ve správném formátu. - Priorita = 2 Zobrazení přepravních podmínek - Stránka s informacemi o přepravních podmínkách je zobrazena v miniaturním okně a je špatně čitelná. - Odkaz by měl vést na PDF soubor nebo se stránku musí zobrazit v samostatném okně. - Priorita = 2 Potvrzení registrace - Po vyplnění registračního formuláře chybí mezikrok, v kterém by měl uživatel možnost registraci přerušit. - Vložit potvrzovací stránku, na níž budou vypsány uživatelem zadané informace. - Priorita = 2 Chybějící feedback - Po úspěšném odeslání registračního formuláře chybí hlášení o úspěšné registraci. - Vložit řádek s informací o úspěšné registraci. - Priorita = 2 4.2. Vyhledávání požadovaných autobusových spojů Stejně pojmenovaná tlačítka - V hlavní nabídce a přímo pod ní ve vedlejší nabídce jsou stejně pojmenovaná tlačítka Jízdenka. - Pokud mají tlačítka rozdílný význam, tak by se měli rozdílně jmenovat. Pokud mají tlačítka stejný význam, mělo by se jedno z nich vypustit. - Priorita = 3 Nadbytečné informace - Po vyplnění vyhledávacího formuláře sytém zobrazí nejen spoje v hledaný den, ale i v den následující a navíc i v opačném směru. Uživatel může být zmatený a objednat špatný autobus. - Zobrazovat pouze informace vztahující se k datům z dotazníku - Priorita = 3 4.3. Rezervace místa v autobuse Nefungující informační obrázek - Při výběru místa v autobuse je zobrazen informační obrázek, ale ten není aktivní. - Aktivovat informační obrázek - 14 -
- Priorita = 1 4.4. Vyhledávání a rezervace zahraničních zájezdů Stejně pojmenovaná tlačítka - Na úvodní stránce je několik tlačítek, které mohou odkazovat na požadovaný cíl. Uživatel je zmaten a neví, které tlačítko by si měl vybrat. Konkrétně se jedná o tlačítka Dovolená, Cestování na míru, Ubytování. Tlačítka Dovolená a Ubytování jsou zde dokonce dvakrát a uživatel nemůže mít jistotu, že stejná tlačítka vedou na stejnou stránku nebo jestli v nich není nějaký rozdíl. Tlačítko Cestování na míru uživateli nemůže říct, co po jeho zmáčknutí může očekávat a toto tlačítko se překrývá tlačítkem Pojištění. - Rozlišit názvy tlačítek, aby bylo jasné, co které znamená. V případné souvislosti tlačítek je vzájemně vnořit do stromové struktury (stránkově ne v menu). - Priorita = 3 Tlačítko vrací neočekávaný obsah - Po prohlédnutí detailních informací o zájezdu uživatel chce vybrat termín a klikne na tlačítko Vybrat termíny a je přesměrován na stránku, kde opět musí kliknout na další tlačítko Termíny, aby dostal požadovaný obsah. - Přepsat odkaz Vybrat termíny rovnou na stránku s výběrem termínů - Priorita = 1 4.5. Vyhledávání a rezervace pracovních pobytů Zobrazení vyhledáváni - Po úspěšném vyhledávání systém zobrazí výsledky úplně vespodu stránky a zároveň se přesune navrchol. Uživatel zde není upozorněn, že byl dole zobrazen vyhledaný obsah a může mít pocit, že vyhledávání nepřineslo žádné výsledky. - Automaticky posunout stránku na místo, kde jsou zobrazeny vyhledané informace, nebo na vrchol stránky přidat hlášení o úspěšném vyhledávání a informaci, kde jsou zobrazeny výsledky. - Priorita = 3 Nesmyslný popisek - Při registraci pobytu je dotazník pro vyplnění osobních údajů popsán nic neříkajícím hlášením. - Nahradit stávající popisek takovým popiskem aby mu uživatel rozuměl. - Priorita = 2 Označení povinných položek - V dotazníku jsou povinné položky označeny příliš malými značkami, které navíc nejsou popsány. - Zvětšit font zobrazeného znamení a doplnění dotazníku o legendu. - Priorita = 1 5. Závěr Toto testování odhalilo řadu nedostatků, které by společnost STUDENT AGENCY měla napravit. Mnohé z nich mohou uživatele odradit od využívání služeb nabízených na www.studentagency.cz. - 15 -