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

Transkript

1 Č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

2 Obsah 1. Úvod Popis stránek Popis cílové skupiny Přehled testovaných use-case Registrovat si účet Rezervovat si jízdenku Přerezervovat si jízdenku Změnit si heslo Testovací metody Vlastní testování Kognitivní průchod - Registrovat si účet Scénář pro use case Provedení testu Kognitivní průchod Změnit heslo Scénář pro use case Provedení testu Heuristická evaluace Rezervovat si jízdenku Scénář pro use case Provedení testu Heuristická evaluace Přerezervovat si jízdenku Scénář pro use case Provedení testu Shrnutí testování Přehled nalezených problémů Závěr

3 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 ovou schránku nebo například vyhledávat podle klíčových slov na různých vyhledávačích). 3

4 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

5 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 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

6 4.1.2 Provedení testu Krok 1 1. otázka Ano. 2. otázka Ano. 3. otázka Ano, zobrazí se mu registrační formulář. Krok 2 1. otázka Ano. 2. otázka Ano. 3. otázka Ano, jednotlivá políčka formuláře budou držet hodnoty vyplněné uživatelem. Krok 3 1. otázka Ano. N-1: Ne, uživateli může tlačítko pro 2. otázka odsouhlasení podmínek splynout se samotnou podmínkou. 3. otázka 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). 1. otázka Ano. 2. otázka Ano. 3. otázka Ano. Krok 4 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

7 4.2 Kognitivní průchod Změnit heslo 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 Provedení testu Krok 1 N-2: Ne, uživatel může mít problém tabulku pro 1. otázka přihlašování přehlédnout ve změnit bannerů a nedůležitých tabulek. 2. otázka Ano. 3. otázka 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

8 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). Krok 2 1. otázka Ano. 2. otázka Ano. 3. otázka 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í 1. otázka Ano. 2. otázka Ano. 3. otázka Ano. Krok 3 Krok 4 1. otázka Ano. 2. otázka Ano. 3. otázka Ano, uživateli se zobrazí potvrzení o úspěšné změně hesla. 8

9 4.3 Heuristická evaluace Rezervovat si jízdenku 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

10 Obrázek 10: Výběr sedadla v autobuse Provedení testu Označení Popis problému Typ problému Možné řešení P 1 P 2 P 3 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í. H8 Aesthetic and minimalistic design H4 Consistency and standards H8 Aesthetic and minimalistic design Při jednosměrné jízdě toto okno schovat. Oprava zarovnání v kódu stránky. Zvýraznění potvrzovací zprávy, přidání vyskakovacího okna. 10

11 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 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

12 4.4.2 Provedení testu Označení Popis problému Typ problému Možné řešení P 4 P 5 P 6 P 7 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). H4 Consistency and standards H4 Consistency and standards H4 Consistency and standards H2 Match between system and real world Sjednotit vzhled obou vyhledávačů. Sjednotit vzhled seznamů Oprava zarovnání v kódu. 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

13 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 Označení N-1 Problém Tlačítko pro odsouhlasení přepravních podmínek splývá se samotnými podmínkami. Doporučení Větší odsazení tlačítka od textu nebo jiná metoda zvýraznění. Priorita 2 Obrázek 4 Use case Změnit heslo Označení N-2 Problém Okno pro přihlášení je schované ve změti bannerů uprostřed stránky. Doporučení 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. Priorita 3 Obrázek 6 13

14 Use case Rezervovat jízdenku Označení P-1 Problém 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. Doporučení Při jednosměrné jízdě toto okno schovat. Priorita 1 Obrázek - Use case Rezervovat jízdenku Označení P-2 Problém Při výběru konkrétního spoje vyjíždí datum zobrazených spojů ze stránky. Doporučení Oprava zarovnání v kódu stránky. Priorita 1 Obrázek 11 Use case Rezervovat jízdenku Označení P-3 Problém Potvrzení o úspěšné rezervaci jízdenky je ztraceno v záplavě informací. Doporučení Zvýraznění potvrzovací zprávy nebo přidání vyskakovacího okna. Priorita 2 Obrázek - Use case Přerezervovat si jízdenku Označení P-4 Problém 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. Doporučení Sjednotit vzhled obou vyhledávačů. Priorita 3 Obrázek 14 Use case Přerezervovat si jízdenku Označení P-5 Problém Seznam nalezených spojů vypadá jinak, než když si uživatel přes hlavní stránku nechal nalézt spoje pro daný den. Doporučení Sjednotit vzhled seznamů Priorita 3 Obrázek 14 Use case Přerezervovat si jízdenku Označení P-6 Problém Datum nalezených spojů vyjíždí ze stránky, není zarovnané s okrajem. Doporučení Oprava zarovnání v kódu. Priorita 1 Obrázek - 14

15 Use case Přerezervovat si jízdenku Označení P-7 Po zvolení sedadla tlačítko Pokračovat ve skutečnosti potvrdí změnu rezervace, Problém 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í. Doporučení Přejmenovat tlačítko, aby měl význam blíže k dokončení přerezervování. Priorita 2 Obrázek 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