TEST UŽIVATELSKÉHO ROZHRANÍ INTERNETOVÉHO

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA ELEKTROTECHNICKÁ TEST UŽIVATELSKÉHO ROZHRANÍ INTERNETOVÉHO PORTÁLU ČESKÉ DRÁHY Testování uživatelského rozhraní (A4B39TUR) Autor: Roubalová Eliška Cvičící: Ing. Adam Sporka, Ph.D. LS 2013/2014

Obsah Popis aplikace CeskeDrahy.cz... 3 Popis cílové skupiny uživatelů... 3 Metody testování... 4 Metoda kognitivního průchodu... 4 Metoda heuristické evaluace... 4 Testované případy užití... 5 Založit nový účet... 5 Zakoupit jízdenku na vlak... 5 Změnit osobní údaje... 5 Vyhledat informace o spojení... 5 Vyhledat informace o omezeních provozu... 5 Testování metodou kognitivního průchodu... 5 Případ užití Založit nový účet... 5 Případ užití Zakoupit jízdenku na vlak... 7 Případ užití Změnit osobní údaje... 9 Testování metodou heuristické evaluace... 11 Vyhledat informace o spojení... 11 Vyhledat informace o omezeních provozu... 12 Přehled nálezů... 13 Kritické... 13 Lze udělat lépe... 14

POPIS APLIKACE CESKEDRAHY.CZ Portál Českých drah by měl sloužit jako hlavní zdroj informací o cestování s touto společností bez nutnosti osobní návštěvy jejich pobočky. Uživatel zde najde informace o jízdenkách, slevách, nádražích i o doplňujících službách ČD nebo speciálních nabídkách pro firmy. Může si zakoupit jízdenku na vlak a naplánovat celou svou cestu. Měl by se dozvědět i o možných omezeních provozu na jeho plánované trase. Portál Českých drah je rozdělen na několik stránek, podle toho, jaké konkrétní informace hledáme. Toto rozdělení není na první pohled zcela zřejmé, ale pokud o něm víme, je poměrně snadné dostat se tam, kam potřebujeme. Vzhledem k tomu, že vybrané případy užití jsou z oblasti osobní dopravy, bude testovanou částí portálu přímo stránka cd.cz (viz Obrázek 1), přes kterou vyhledává informace převážná většina cílové skupiny. Obrázek 1 Úvodní stránka www.cd.cz POPIS CÍLOVÉ SKUPINY UŽIVATELŮ Cílovou skupinou této aplikace jsou všechny osoby potenciálně využívající železniční dopravu. Stránka tedy musí být využitelná pro osoby bez rozdílu pohlaví, můžeme však předpokládat, že věk uživatelů bude vyšší než minimálně 15, spíše 18 let (mladší osoby zřejmě přes internet nenakupují a informace touto cestou získávat nepotřebují). Nemůžeme však u uživatelů předpokládat žádné znalosti z používání jiných aplikací ani PC obecně, stránka musí být přehledná i pro uživatele, který vyhledává informace úplně poprvé (senioři apod.).

METODY TESTOVÁNÍ K dispozici máme dvě metody testování bez uživatele, metodu kognitivního průchodu a metodu heuristické evaluace. Vybrané případy užití umožňují použití obou těchto metod, některé totiž odpovídají dané posloupnosti kroků vedoucí k cíli, zde využijeme metodu kognitivního průchodu, jiné zas vyžadují snadné, přesné a rychlé zorientování se na stránce, zde použijeme metodu heuristické evaluace. Metoda kognitivního průchodu Při testování kognitivním průchodem projde tester samostatně předem stanovenou posloupnost kroků, jak ji zamýšlel designer, vedoucí k dosažení kýženého výsledku. Během průchodu se zaměřuje i na možné chybové stavy a problémy, které mohou pro uživatele nastat v neočekávaných situacích. Na začátku případu užití se vždy stanoví daný cíl: Otázka 0: Čeho chce uživatel dosáhnout? Pak je pro každý krok testovaného případu užití třeba odpovědět na tři otázky: Otázka 1: Bude uživateli zřejmé, co má nyní udělat? Otázka 2: Spojí si uživatel popisek akce se svým cílem? Otázka 3: Dostane uživatel srozumitelnou reakci na jeho volbu? Výsledkem je seznam nalezených nedostatků a případné poznámky pro zlepšení aplikace. Metoda heuristické evaluace Slouží především k odhalení nedostatků ve vzhledu, které by mohly vést k nejasnostem a chybám. Využívá k testování obecně platné požadavky na kvalitní design. Testeři zkoumají GUI samostatně a snaží se odhalit případy porušení heuristik. Pro naše potřeby k tomu využijeme seznam následujících deseti heuristik: 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation Výsledkem je seznam případů porušení těchto heuristik ve zkoumaném návrhu tak, jak je subjektivně vnímal tester.

TESTOVANÉ PŘÍPADY UŽITÍ Založit nový účet K využívání elektronických služeb ČD je potřeba si založit na této stránce svůj účet. Můžeme předpokládat, že většinu počítačově gramotných uživatelů tato akce napadne, vzhledem k cílové skupině uživatelů by však bylo dobré nějak uživatele po příchodu na stránku upozornit, že účet nemá založený a měl by to tudíž udělat. Princip uživatelských účtů nemusí být neseznámenému uživateli hned jasný. Zakoupit jízdenku na vlak V posledních letech ČD omezili možnost nákupu jízdenek na některých menších nádražích, jízdenky se na těchto místech musí kupovat přímo ve vlaku u průvodčího, což může být pro někoho nepohodlné (nelze například platit kartou, musíte počítat s protivným průvodčím při placení velkými bankovkami i tím, že nemusí mít nazpět a lístek vám vůbec nebude chtít prodat ). Řešením může být zakoupení jízdenky online a buď její vytištění, nebo prokazování se SMS kódem. Změnit osobní údaje Je pravděpodobné, že velká část uživatelů při zakládání účtu chvátá a nepovinné informace nevyplní, případně se některé údaje změní a je třeba je opravit. Jednodušší nákup jízdenek zajistí doplnění informací do sekce eshop. Bohužel úprava údajů je v tomto případě řešena poněkud nešťastně, údaje je totiž nutno měnit na několika místech. Vyhledat informace o spojení Zřejmě nejdůležitější případ užití ze všech. Pro potenciální zákazníky je důležité najít snadno informace o spojení, ať už pak budou pokračovat nákupem jízdenky online, koupí si jízdenku až na místě nebo budou hledat informace o případných omezeních. Vyhledat informace o omezeních provozu Pro uživatele je důležité snadno zjistit informace o případných omezeních a přizpůsobit jim svůj plán. Uživatel může znát požadovanou trasu a pouze chtít zjistit, zda na ní není nějaké omezení. V případě nákupu jízdenky je případné omezení provozu bohužel skryto v detailech spojení, jako důležitý rozhodovací faktor bych radši tuto informaci umístila na hned viditelné místo. TESTOVÁNÍ METODOU KOGNITIVNÍHO PRŮCHODU Případ užití Založit nový účet Posloupnost kroků vedoucí k požadovanému výsledku: 1. Klepnout na odkaz Přihlásit se. (Obrázek 2) 2. Zvolit možnost Registrujte se a získejte přístup. (Obrázek 3) 3. Vyplnit formulář a potvrdit ho stiskem tlačítka Registrovat. (Obrázek 4) 4. Aktivovat účet emailem. (Obrázek 5)

Čeho chce uživatel dosáhnout? Uživatel si chce založit nový účet na portálu ČD. ZAKOUPENÍ JÍZDENKY Krok 1 Krok 2 Krok 3 Krok 4 BUDE UŽIVATELI ZŘEJMÉ, CO MÁ NYNÍ UDĚLAT? Ne, uživatel nemusí vědět, že pod možností přihlásit se je tradičně i možnost registrace. SPOJÍ SI UŽIVATEL POPISEK AKCE SE SVÝM CÍLEM? Ne, pokud uživatel nemá předchozí zkušenosti. DOSTANE UŽIVATEL SROZUMITELNOU REAKCI? Ano, zobrazí se podokno s přihlášením a volbou registrace. Ano. Ano. Ano, zobrazí se registrační formulář. Ano. Ano. Ano, zobrazí se oznámení. Ano. Ano. Ano, zobrazí se oznámení o aktivaci. NÁVRHY/POZNÁMKY Upravit popisek na Přihlásit se/registrovat se. Při oznámení je přítomen i krok Dokončit, tam se ale uživatel nikdy nedostane. Zaslání emailu dost dlouho trvá. Obrázek 2 Úvodní stránka Obrázek 3 Podokno přihlášení Obrázek 5 Potvrzení registrace Obrázek 6 Potvrzení aktivace Obrázek 4 Formulář s návodnými instrukcemi

Případ užití Zakoupit jízdenku na vlak Posloupnost kroků vedoucí k požadovanému výsledku: 1. Klepnout na tlačítko Koupit jízdenku. 2. Vyplnit formulář a klepnout na tlačítko Koupit. (Obrázek 7) 3. Doplnit údaje do formuláře v eshopu a dát Vyhledat. (Obrázek 8) 4. Vybrat vyhovující spojení klepnutím na tlačítko Koupit. (Obrázek 10) 5. Vybrat případné doplňkové služby. (Obrázek 12) 6. Zkontrolovat údaje a vyplnit osobní informace. (Obrázek 14) 7. Vybrat způsob platby a zaplatit. (Obrázek 15) Čeho chce uživatel dosáhnout? Uživatel si chce zakoupit jízdenku na vlak online. ZAKOUPENÍ JÍZDENKY BUDE UŽIVATELI ZŘEJMÉ, CO MÁ NYNÍ UDĚLAT? SPOJÍ SI UŽIVATEL POPISEK AKCE SE SVÝM CÍLEM? Krok 1 Ano. Ano. Ano. Krok 2 Krok 3 Ano. Ne, poprvé se zobrazí okno s aktivací eshopu a v pozadí jsou zcela jiné jízdenky. Ne, uživatel neví, zda může nechat něco nevyplněné, a rozevírací seznam není dostatečně sebevysvětlující. Ano, po klepnutí na Pokračovat jsou popisky jasné. Krok 4 Ano. Ano. Ano. Krok 5 Ano. Ano. Ano. Krok 6 Ano. Ano. Ano. Krok 7 Ano. Ano. Ano. DOSTANE UŽIVATEL SROZUMITELNOU REAKCI? Ano. Bude přesměrován do eshopu. Ano, zobrazí se seznam spojení. NÁVRHY/POZNÁMKY Po klepnutí na tlačítko Eshop se dostaneme k téměř stejnému výsledku. Proč je nutné službu eshop aktivovat? Nelze tento krok vynechat? Trochu matoucí je popisek vyberte Registrovaný nebo neregistrovaný nákup, uživatel je přece přihlášen. Někteří uživatelé neradi platí kartou, bylo by vhodné přidat možnost převodu z účtu. Platební brána se navíc objeví ve stejném okně, bylo by vhodnější pro ni otevřít nový panel. Pokud si uživatel rozmyslí akci až po klepnutí na Zaplatit, nejde smazat položku z košíku.

Obrázek 7 Formulář Koupit jízdenku Obrázek 9 Aktivace eshopu Obrázek 8 Doplnění údajů vyhledávání Obrázek 10 Výběr spojení Obrázek 11 Detail spojení Obrázek 12 Volba doplňkových služeb Obrázek 13 Položka v košíku

Obrázek 14 Doplnění údajů o cestujícím Obrázek 15 Volba způsobu platby Případ užití Změnit osobní údaje Posloupnost kroků vedoucí k požadovanému výsledku: 1. Klepnout na odkaz se jménem. (Obrázek 17) 2. Klepnout na možnost Změnit údaje. (Obrázek 16) 3. Upravit údaje a potvrdit změnu. (Obrázek 18) 4. Klepnout na možnost Změnit údaje u služby eshop. (Obrázek 16) 5. Upravit údaje a potvrdit změnu klepnutím na možnost Uložit a znovu přihlásit. (Obrázek 19) 6. Pokračovat ve zvolené akci. (Obrázek 20) 7. Přihlásit se. (Obrázek 21) Čeho chce uživatel dosáhnout? Uživatel chce změnit (doplnit) svoje osobní údaje. ZAKOUPENÍ JÍZDENKY Krok 1 Krok 2 BUDE UŽIVATELI ZŘEJMÉ, CO MÁ NYNÍ UDĚLAT? Ne, uživatelé bez předchozích znalostí nemusí vědět, že pod jménem je většinou úprava profilu. Ne, není jasné kde má uživatel upravit údaje, možností je více. SPOJÍ SI UŽIVATEL POPISEK AKCE SE SVÝM CÍLEM? Ano, po najetí na jméno se zobrazí popisek Upravit profil. Ano. DOSTANE UŽIVATEL SROZUMITELNOU REAKCI? Ano. Ano. Krok 3 Ano. Ano. Ano. Krok 4 Ano. Ano. Ano. Krok 5 Ano. Ano. Ano. Krok 6 Ne, uživatel nemusí chápat, co znamenala zvolená akce a proč ji provádí. Ne. Ano. Krok 7 Ano. Ano. Ano. NÁVRHY Přidat ke jménu popisek profil. Nechat jen jednu možnost, kde lze upravit všechny údaje obecně. Bylo by lepší nechat pouze popisek Uložit, o nutnosti přihlášení se informuje následující oznámení. Lepší by byl popisek Znovu se přihlásit.

Obrázek 17 Upravit profil Obrázek 16 Aktualizace profilu Obrázek 18 Aktualizace údajů profilu Obrázek 19 Aktualizace údajů v Eshopu Obrázek 20 Potvrzení změny údajů. Obrázek 21 Přihlášení do systému

TESTOVÁNÍ METODOU HEURISTICKÉ EVALUACE Vyhledat informace o spojení Je jasné, co má uživatel udělat, jaká akce je zvolena, žádné větší nedostatky. Je vidět, v jaké části hledání se uživatel nachází i jaké spojení hledá. Systém používá zavedená pojmenování i standardní zobrazení vyhledaných spojů. Lze snadno zobrazit doplňující údaje, informace o výluce je ihned dobře viditelná, ale zároveň je informace o spojení přehledná a jasná. Při hledání nabízí systém možnosti všech dostupných stanic pro omezení překlepů. Je přítomno tlačítko nápovědy jak nahoře k celému vyhledávání, tak u všech polí, která je třeba vyplnit, a po najetí na otazník se zobrazuje snadno srozumitelný návod. Nejsou přítomny žádné zřejmé nedostatky.

Vyhledat informace o omezeních provozu Porušení heuristiky č. 1: Odkaz na zobrazení omezení provozu je na stránce jen drobný a ve spodní části, po načtení úvodní stránky není bez posunu dolů vidět. Je zřejmé, kde se uživatel nachází. Zobrazení omezení i na mapě je příjemným bonusem, na první pohled se uživatel může přesvědčit, zda se v jeho oblasti nějaká omezení nenacházejí. Porušení heuristik č. 1 a č. 5: Přes velikost mapy není vidět, že ve spodní části stránky je i podrobnější seznam omezení. Uživatel si ho nemusí všimnout a potřebné informace tak nezíská. Omezení jsou vyznačena ikonkami s jasným a dobře viditelným popisem, což usnadňuje orientaci. Porušení heuristik č. 2, č. 3 a č. 7: Informace o čísle trati je pro uživatele zcela nadbytečná a může být i dost matoucí. Porušení heuristik č. 1 a č. 5: Stav události není dost jasně viditelný, uživatel si přečte informaci o mimořádné události, ale nemusí si ve spěchu všimnout, že je již ukončená. Porušení heuristiky č. 5: Není na první pohled patrné, kterých vlaků se omezení dotkne, některá omezení se například nevztahují na rychlíky apod. Uživatel si může o daném omezení zobrazit detaily a snadno mezi omezeními vyhledávat.

PŘEHLED NÁLEZŮ Kritické Nejasný popisek tlačítka Přihlásit se. (5) Stačilo by upravit popisek na Přihlásit se/registrovat se. Formulář Koupit jízdenku není dostatečně sebevysvětlující. (7) Nejasný seznam voleb je pro uživatele nadbytečný, stejně mu nerozumí, jeho odstranění by problém vyřešilo a uživatele by se nedotklo. K políčku Odjezd by bylo vhodné doplnit poznámku, že se nejedná o konkrétní čas odjezdu vlaku, který uživatel nemusí vědět, ale o první pro uživatele přijatelný čas. Proces nákupu je přerušen oknem k aktivaci Eshopu. (7) Je vůbec aktivace eshopu nutná? Uživatel je dostatečně informován o probíhajícím nákupu a vynechání tohoto kroku by nevedlo k žádným chybám. Naopak, zobrazení varovné zprávy je pro uživatele matoucí, není jasné, zda povede k danému cíli a spíše od pokračování v nákupu odrazuje. Pokud si uživatel rozmyslí nákup až po klepnutí na tlačítko Zaplatit, nemůže po návratu na stránku odstranit položku z košíku, dokud se neodhlásí. (7) Nejasný popisek tlačítka profilu. (9) Stačilo by upravit popisek Jméno Příjmení na Profil: Jméno Příjmení. Nejasný a nejednoznačný postup úpravy údajů. (9) Jsou všechny možnosti úpravy údajů nutné? Rozdělení úpravy údajů profilu, v eshopu a v ostatních službách je matoucí a zbytečné. Stačilo by ponechat odkaz v levém menu a všechny potřebné údaje upravovat v jednom formuláři. Matoucí popisek Uložit změny a znovu se přihlásit. (9) Uživateli nebylo zatím vysvětleno, proč je třeba se znovu přihlásit. Neví tudíž, zda tato akce vede k vytyčenému cíli a je pro něj matoucí. Stačil by popisek Uložit změny. Uživatel nemusí hned vědět, co znamená Pokračovat v akci, v jaké akci? Je to potřeba? (9) Uživatel byl poučen o nutnosti nového přihlášení, logické by tedy pro něj bylo klepnout na popisek Přihlásit se. Není vidět seznam omezení přes velikost mapy. (12) Mapa by mohla být o něco menší nebo by mohlo být nahoře na stránce upozornění na seznam nacházející se pod ní. Matoucí informace o čísle trati. (12) Uživatelé nepotřebují číslo trati, jelikož ho stejně neznají. Naopak by si ho neznalí uživatelé mohli splést s číslem vlaku a mohlo by dojít k jejich zmatení. Tato informace je nadbytečná pokud lze zobrazit událost na mapě. Není jasně viditelný stav události, uživatel může tuto informaci minout. (12) Události již uzavřené jsou pro uživatele nerelevantní a nemusely by být zobrazeny vůbec. Pokud už jsou zobrazeny, bylo by dobré na začátku uvést stav události a to podstatně výraznějším způsobem.

Lze udělat lépe Dlouhá doba do přijetí registračního emailu. (5) Nadbytečný krok při registraci. (5) Lze ho vynechat, uživatele mate, že nedošel až ke kroku Dokončení. Zbytečný popis Vyberte registrovaný nebo neregistrovaný nákup. (7) Uživatel je přihlášen a tento popis ho může jen zmást, bylo by lepší ho odstranit. Chybí možnost platby převodem na účet. (7) Špatně viditelný odkaz na seznam omezení provozu. (12) Bylo by dobré zařadit omezení provozu k vyhledávání spojů. Není jasné, zda se omezení dotkne všech vlaků. (12) Stačilo by doplnit chybějící informaci.