Webové stránky Student Agency pro rezervaci jízdenek

ČVUT – FAKULTA ELEKTROTECHNICKÁ

Webové stránky Student Agency pro rezervaci jízdenek Semestrální práce A2 – Testování uživatelského rozhraní A4B39TUR

Jan Vrátník 2013 / 2014 Otevřená informatika

Obsah 1.

2.

Úvod .......................................................................................................................... 3 1.1

Popis stránek ................................................................................................................. 3

1.2

Popis cílové skupiny ....................................................................................................... 3

Přehled testovaných use-case .................................................................................... 4 2.1

Registrovat si účet ......................................................................................................... 4

2.2

Rezervovat si jízdenku ................................................................................................... 4

2.3

Přerezervovat si jízdenku ............................................................................................... 4

2.4

Změnit si heslo .............................................................................................................. 4

3.

Testovací metody ....................................................................................................... 4

4.

Vlastní testování ........................................................................................................ 5 4.1 4.1.1 4.1.2

4.2 4.2.1 4.2.2

4.3 4.3.1 4.3.2

4.4 4.4.1 4.4.2

5.

Scénář pro use case ........................................................................................................................... 5 Provedení testu ................................................................................................................................. 6

Kognitivní průchod – Změnit heslo ................................................................................. 7 Scénář pro use case ........................................................................................................................... 7 Provedení testu ................................................................................................................................. 7

Heuristická evaluace – Rezervovat si jízdenku................................................................. 9 Scénář pro use case ........................................................................................................................... 9 Provedení testu ............................................................................................................................... 10

Heuristická evaluace – Přerezervovat si jízdenku .......................................................... 11 Scénář pro use case ......................................................................................................................... 11 Provedení testu ............................................................................................................................... 12

Shrnutí testování ..................................................................................................... 13 5.1

6.

Kognitivní průchod - Registrovat si účet.......................................................................... 5

Přehled nalezených problémů ...................................................................................... 13

Závěr ....................................................................................................................... 15

2

1. Úvod 1.1 Popis stránek Webové stránky pro jízdenky Student Agency slouží jako nejdostupnější způsob, kterým si uživatelé mohou zamluvit jízdenky v rámci služeb této firmy online. Objednání jízdenek přes internet je cenově výhodnější, čímž jsou cestující tlačeni k použití této služby namísto tradičního nákupu jízdenek přes terminál nebo přímo na místě. Stránky nabízí možnost vytvoření vlastního účtu, na který si uživatelé mohou dobíjet kredit, který mohou poté používat ke koupi jízdenek. Mimo to si uživatelé mohou vyhledávat spoje a časy odjezdů. V rámci registrovaného účtu si mohou uživatelé prohlížet zarezervované jízdenky nebo je popřípadě mohou měnit či rušit.

Obrázek 1: Úvodní obrazovka stránek

1.2 Popis cílové skupiny Cílovou skupinou pro nás budou osoby dopravující se pravidelně pomocí autobusů a mají alespoň základní zkušenosti s nákupem přes internet, tedy rozumí principu dobíjení kreditu a chápe podstatu registrace vlastního účtu. Cílový věk není stanoven, podstatnější jsou samotné zkušenosti s ovládáním internetu, ty se očekávají alespoň základní (tj. uživatel umí používat emailovou schránku nebo například vyhledávat podle klíčových slov na různých vyhledávačích).

3

2. Přehled testovaných use-case 2.1 Registrovat si účet Pro plné využití poskytovaných služeb je důležité mít vlastní účet, na kterém si uživatel může spravovat kredit, rezervace a stornování jízdenek. Problémy by mohli být mimo jiné nerozumitelné nebo nesmyslné jednotky formuláře nebo například komplikované zadávání dat citlivých na formát (např. datum narození).

2.2 Rezervovat si jízdenku Nejdůležitějším prvkem celého webového portálu je možnost rezervovat si sedadlo v autobuse na daný čas s možností cenové výhody. Uživatel si zvolí odkud a kam chce jet, zadá datum a nechá si zobrazit dostupné spoje. U vybraného spoje si zamluví sedadlo a přes svůj nabitý kredit si jízdenku zaplatí. Problémem by mohlo být nepřehledné zobrazení dostupných spojů, komplikovaná volba startovní a cílové lokace nebo nejasná volba sedadel v autobuse (obzvlášť, pokud by jich uživatel mohl chtít víc).

2.3 Přerezervovat si jízdenku Student Agency nabízí v případě včasného oznámení bezplatné stornování, popř. přerezervování jízdenky. Uživatel si může na svém účtu nechat zobrazit všechny zarezervované jízdenky, u kterých může změnit datum nebo čas odjezdu, popřípadě je může kompletně stornovat. Důležité zde je, aby seznam rezervovaných jízdenek byl dostatečně přehledný, aby uživatel věděl přesně, kterou jízdenku chce změnit nebo stornovat. Dále musí být jasné, jaká změna je provedena nebo popřípadě pokud nějaká změna nejde provést, tak aby uživateli bylo jasné, proč tomu tak je.

2.4 Změnit si heslo Uživatelským účtům na webových stránkách by nikdy neměla chybět ani funkce změny hesla. I zde může uživatel změnit své heslo zadáním svého původního hesla a následně zadáním nového. Nové heslo se musí zapsat pro kontrolu dvakrát, jak je tomu i jinde zvykem. Problémem zde může být, že uživatel bude v případě neshodujícího se nového hesla nesrozumitelně upozorněn na chybu nebo nebude upozorněn vůbec.

3. Testovací metody Use case “Registrovat si účet“ (2.1) a “Změnit si heslo“ (2.4) budu testovat metodou kognitivního průchodu a use case “Rezervovat si jízdenku“ (2.2) a “Přerezervovat si jízdenku“ (2.3) budu testovat heuristickou evaluací. Testování kognitivním průchodem se hodí pro činnosti, u kterých se dají jasně odlišovat jednotlivé kroky daného use case (velmi vhodné pro naší registraci nebo změnu hesla). Podstatou této metody je zodpovězení tří základních otázek u každého kroku testu. Odpověď na tyto otázky mnohdy napoví, kde se může nacházet problém a snadněji se tak dá nalézt řešení k danému problému. Ptáme se na následující otázky: 1) Otázka 1: Je uživateli jasný následující krok? 2) Otázka 2: Spojí si uživatel popisek akce s jeho cílem? 3) Otázka 3: Dostane uživatel dostatečnou zpětnou vazbu? 4

Kromě odpovědí Ano/Ne na tyto otázky je vhodné v případě negativní odpovědi navrhout ve zkratce i možné řešení problému. Testování heuristickou evaluací je způsob testování, kdy se ověřuje, zda nebyla porušena jedna či více z heuristik. To zahrnuje mimo jiné prevenci chyb, konzistentnost a ohled na standardy, minimalistický design, přehlednost a srozumitelnost i pro běžného uživatele.

4. Vlastní testování 4.1 Kognitivní průchod - Registrovat si účet 4.1.1 Scénář pro use case 0) Uživatel si chce založit nový účet. 1) Uživatel zvolí funkci „Registrovat“ na hlavní obrazovce webové stránky. 2) Uživatel vyplní povinné údaje 3) Uživatel odsouhlasí přepravní podmínky a zpracování osobních údajů. 4) Uživatel potvrdí vytvoření nového účtu.

Obrázek 2: Registrační tlačítko na hlavní obrazovce

Obrázek 3: Část registračního formuláře 5

4.1.2

Provedení testu

1. otázka 2. otázka 3. otázka

1. otázka 2. otázka 3. otázka

Krok 1 Ano. Ano. Ano, zobrazí se mu registrační formulář.

Krok 2 Ano. Ano. Ano, jednotlivá políčka formuláře budou držet hodnoty vyplněné uživatelem.

Krok 3 1. otázka 2. otázka 3. otázka

Ano. N-1: Ne, uživateli může tlačítko pro odsouhlasení podmínek splynout se samotnou podmínkou. Ano.

Problém s poměrně schovaným tlačítkem by se dal snadno vyřešit větším odsazením nebo jiným zvýrazněním daného řádku - větší písmo nebo třeba tučné písmo (viz obrázek 4). Krok 4 1. otázka 2. otázka 3. otázka

Ano. Ano. Ano.

I zde by mohlo být tlačítko vyraznější. Je sice dostatečně odsazené od jiných prvků, ale je bezdůvodně zbytečně malé (viz obrázek 4).

Obrázek 4: Nepřehledný vzhled konce registračního formuláře

6

4.2 Kognitivní průchod – Změnit heslo 4.2.1 Scénář pro use case 0) Uživatel si chce změnit heslo ke svému účtu. 1) Uživatel se přihlásí na svůj účet přes přihlašovací tabulku na hlavní stránce. 2) Uživatel si zobrazí nastavení svého účtu. 3) Uživatel zadá své staré heslo a následně zadá dvakrát nové. 4) Uživatel potvrdí změnu hesla tlačítkem “Změnit heslo“.

Obrázek 5: Formulář pro změnu hesla 4.2.2

Provedení testu

1. otázka 2. otázka 3. otázka

Krok 1 N-2: Ne, uživatel může mít problém tabulku pro přihlašování přehlédnout ve změnit bannerů a nedůležitých tabulek. Ano. Ano, uživateli se zobrazí potvrzení o úspěšném přihlášení.

Obrázek 6: Nepřehledná hlavní strana s přihlašováním uprostřed

7

Problémem může být nepřehlednost hlavní stránky, kde se okno s přihlašováním může snadno novému uživateli ztratit ve změni tabulek, obrázků a jiných bannerů (viz obrázek 6). Uživatel má též možnost přihlásit se přes lištu v hlavičce stránky, což je poměrně snažší způsob. Bylo by vhodné, kdyby byla tabulka uprostřed stránky odstraněna a byla kompletně nahrazenou rychlým přihlašováním v hlavičce stránky (to by mohlo být více zviditelněno).

1. otázka 2. otázka 3. otázka

Krok 2 Ano. Ano. Ano, uživateli se zobrazí formuláře pro nastavení účtu.

Obrázek 7: Hlavička stránky s profilem uživatele a umístěním “Nastavení“ Krok 3 1. otázka 2. otázka 3. otázka

1. otázka 2. otázka 3. otázka

Ano. Ano. Ano.

Krok 4 Ano. Ano. Ano, uživateli se zobrazí potvrzení o úspěšné změně hesla.

8

4.3 Heuristická evaluace – Rezervovat si jízdenku 4.3.1 Scénář pro use case 0) Uživatel si chce rezervovat jízdenku. Předpokládá se, že je uživatel již přihlášen na svém účtu. 1) Uživatel si zvolí odkud a kam chce jet, zvolí datum, počet osob a druh jíždenky. Volbu potvrdí stisknutím tlačítka “Vyhledat“ (viz obrázek 8). 2) Uživatel si zvolí jednu z nalezených možností přepravy. Pokračuje na další stránku pomocí tlačítka “Pokračovat v objednávce“ (viz obrázek 9). 3) Uživatel si zarezervuje sedadlo v autobuse pomocí interaktivního plánovače a potvrdí rezervací tlačítkem “Rezervovat a uhradit z kreditu“ (viz obrázek 10).

Obrázek 8: Vyhledávání spojů

Obrázek 9: Výběr spoje v konkrétní den

9

Obrázek 10: Výběr sedadla v autobuse 4.3.2 Označení P–1

P–2 P–3

Provedení testu Popis problému V případě jednosměrné jízdy zůstane viditelná položka pro datum návratu. Pole je sice neaktivní, ale je na něm vidět aktuální datum, které může mást uživatele. Při výběru konkrétního spoje vyjíždí datum zobrazených spojů ze stránky (viz obrázek 11). Potvrzení o úspěšné rezervaci jízdenky je ztraceno v záplavě informací.

Typ problému

Možné řešení

H8 – Aesthetic and minimalistic design

Při jednosměrné jízdě toto okno schovat.

H4 – Consistency and standards H8 – Aesthetic and minimalistic design

Oprava zarovnání v kódu stránky. Zvýraznění potvrzovací zprávy, přidání vyskakovacího okna.

10

Obrázek 11: Ilustrace chyby P-2, s vyznačeným levým okrajem stránky.

4.4 Heuristická evaluace – Přerezervovat si jízdenku 4.4.1 Scénář pro use case 0) Uživatel si chce přerezervovat jízdenku. Předpokládá se, že je uživatel již přihlášen na svém účtu a má rezervovanou jízdenku. 1) Uživatel si zvolí z uživatelského menu v hlavičce stránky možnost “Seznam rezervací“ (viz obrázek 12). 2) V seznamu rezervovaných jízdenek si zvolí u jedné možnost “Přerezervovat“. 3) Uživatel si nechá vyhledat nový spoj. Zadá počáteční a cílovou destinaci a datum. Volbu potvrdí tlačítkem “Vyhledat“. 4) Uživatel si zvolí jeden z nalezených spojů tlačítkem “Rezervovat“. 5) Na obrazovce výběru sedadla si uživatel zvolí místo a potvrdí tlačítkem “Pokračovat“.

Obrázek 12: Umístění “Seznamu rezervací“ v hlavičce stránky.

Obrázek 13: Vyhledávání spoje a seznam spojů při přerezervování jízdenky. 11

4.4.2 Označení P–4

P–5 P–6

P–7

Provedení testu Popis problému Okno pro vyhledávání nového spoje při přerezervování vypadá jinak, než když si uživatel přes hlavní stránku vyhledával spoje (viz porovnání na obrázku 14). Seznam nalezených spojů vypadá jinak, než když si uživatel přes hlavní stránku nechal nalézt spoje pro daný den (viz obrázek 14). Datum nalezených spojů vyjíždí ze stránky, není zarovnané s okrajem. Po zvolení sedadla tlačítko “Pokračovat“ ve skutečnosti potvrdí změnu rezervace, jedná se o poslední krok procesu. Byť je funkce tlačítka podobná tomu, kterým uživatel dokončuje rezervaci kompletně nové jízdenky, neshodují se významy popisků (viz obrázek 16).

Typ problému

Možné řešení

H4 – Consistency and standards

Sjednotit vzhled obou vyhledávačů.

H4 – Consistency and standards

Sjednotit vzhled seznamů

H4 – Consistency and standards

Oprava zarovnání v kódu.

H2 – Match between system and real world

Přejmenovat tlačítko, aby měl význam blíže k dokončení přerezervování.

Obrázek 14: Porovnání vzhledu dvou vyhledávačů a dvou seznamů výhledaných spojů, nahoře vyhledávání nového spoje pro novou rezervaci, dole přerezervování již existující rezervace. 12

Obrázek 16: Ilustrace problému P-7. Porovnání dokončení “přerezervování jízdenky“ (vlevo) a “rezervování nové jízdenky“ (vpravo). Obě tlačítka zakončují proces.

5. Shrnutí testování Z testování plyne, že hlavním problémem, kterým trpí rezervační systém pro jízdenky Student Agency, je nekonzistentnost jednotlivých prvků stránky a malá viditelnost některých podstatných informací. Ty se mnohdy ztrácejí v záplavě méně důležitých informací (z hlediska uživatele). Z funkčního hlediska nevykazuje uživatelské rozhraní žádné problémy. Níže naleznete rychlý přehled nalezených nedostatků s odkazy na příslušný test a přidělenou prioritou. Priority jsou hodnoceny 1 až 4 a to následujícím způsobem: 1 – Kosmetický problém 2 – Málo závažný problém 3 – Středně závažný problém 4 – Velmi závažný problém

5.1 Přehled nalezených problémů Use case

Registrovat účet

Problém

Tlačítko pro odsouhlasení přepravních podmínek splývá se samotnými podmínkami.

Doporučení

Označení

N-1

Větší odsazení tlačítka od textu nebo jiná metoda zvýraznění.

Priorita

2

Obrázek

4

Use case

Změnit heslo

Problém

Okno pro přihlášení je schované ve změti bannerů uprostřed stránky. Větší odsazení od ostatních prvků nebo úplné nahrazení této metody přihlášování za přihlašovací formulář v hlavičce stránky. 3

Doporučení Priorita Obrázek

Označení

N-2

6 13

Use case Problém Doporučení Priorita Obrázek Use case Problém Doporučení Priorita Obrázek

Rezervovat jízdenku Označení P-1 V případě jednosměrné jízdy zůstane viditelná položka pro datum návratu. Pole je sice neaktivní, ale je na něm vidět aktuální datum, které může mást uživatele. Při jednosměrné jízdě toto okno schovat. 1 Rezervovat jízdenku

Označení

Při výběru konkrétního spoje vyjíždí datum zobrazených spojů ze stránky. Oprava zarovnání v kódu stránky. 1 11

Use case

Rezervovat jízdenku

Problém

Potvrzení o úspěšné rezervaci jízdenky je ztraceno v záplavě informací.

Doporučení Priorita Obrázek Use case Problém Doporučení Priorita Obrázek Use case Problém Doporučení

P-3

Přerezervovat si jízdenku Označení P-4 Okno pro vyhledávání nového spoje při přerezervování vypadá jinak, než když si uživatel přes hlavní stránku vyhledával spoje. Sjednotit vzhled obou vyhledávačů. 3 14 Přerezervovat si jízdenku Označení P-5 Seznam nalezených spojů vypadá jinak, než když si uživatel přes hlavní stránku nechal nalézt spoje pro daný den. Sjednotit vzhled seznamů 3

Obrázek

14

Doporučení

Označení

Zvýraznění potvrzovací zprávy nebo přidání vyskakovacího okna. 2 -

Priorita

Use case Problém

P-2

Přerezervovat si jízdenku Označení Datum nalezených spojů vyjíždí ze stránky, není zarovnané s okrajem.

P-6

Oprava zarovnání v kódu.

Priorita

1

Obrázek

-

14

Use case Problém Doporučení

Přerezervovat si jízdenku Označení P-7 Po zvolení sedadla tlačítko “Pokračovat“ ve skutečnosti potvrdí změnu rezervace, jedná se o poslední krok procesu. Byť je funkce tlačítka podobná tomu, kterým uživatel dokončuje rezervaci kompletně nové jízdenky, významy se neshodují. Přejmenovat tlačítko, aby měl význam blíže k dokončení přerezervování.

Priorita

2

Obrázek

16

6. Závěr Testování ukázalo, že hlavním problémem stránek je nekonzistentnost některých prvků. Vyhledávání na hlavní stránce, které je bezpochyby používané ve většině případů, má moderní vzhled a je poměrně jednoduché se v něm orientovat. V kontrastu je podobná funkce při přerezervování již existující jízdenky prováděna v naprosto odlišeném rozhraní, které se nepodobá uživateli mnohem známějšímu rozhraní. Uživatel je detailně informován o stavu objednávky a rezervací, problémem je spíše fakt, že tyto informace nejsou dostatečně viditelné. Stránky trpí přesyceností nejrůznějšími bannery a reklamami na jiné poskytované služby, které ovšem narušují přehlednost. Některé prvky jsou dobře viditelné, ale mohli by být větší pro rychlejší použití (především tlačítka). Trpí tím především potvrzovací tlačítka.

15