České vysoké učení technické v Praze Semestrální práce pro předmět A4B39TUR testování uživatelského rozhraní Heuristická evaluace a kognitivní průchod u HTC Chacha Vojtěch Novák, novakvo5@fel.cvut.cz
Obsah Popis testovaného zařízení... 3 Cílová skupina... 4 Testovací metodiky... 4 kognitivní průchod... 4 Heuristická evaluace... 4 Use cases (testované případy užití)... 5 Use case 1: Pořízení fotografie a její rychlé odeslání na Facebook pomocí Facebook tlačítka (Kognitivní průchod)... 5 Krok 1: Spuštění fotoaparátu... 6 Krok 3: pořízení fotografie... 6 Krok 4: nasdílení fotografie na Facebook vyvolání okna pro sdílení... 7 Krok 5: nasdílení fotografie na Facebook vybrání alba pro uložení... 7 Krok 6: nasdílení fotografie na Facebook přidání popisku... 8 Krok 7: nasdílení fotografie na Facebook označení lidí na fotografii... 8 Krok 8: nasdílení fotografie na Facebook nalezení jmen v seznamu... 9 Krok 9: nasdílení fotografie na Facebook uložení obrázku... 9 Shrnutí... 10 Use case 2: chat na facebooku pomocí programu Messenger (Kognitivní průchod)... 10 Krok 1: napsání nové zprávy... 11 Krok 2: nalezení adresáta z Friend listu... 11 Krok 3: psaní zpráv... 12 Shrnutí... 13 Use case 3: Navigace pomocí aplikace Maps (Heuristická evaluace)... 13 Shrnutí... 14 Přehled nálezů... 14 Literatura... 14 2
Popis testovaného zařízení Testované zařízení je mobilní telefon HTC Chacha, spadající do kategorie smarthphonů. Je to první HTC poháněné operačním systémem Android s qwerty klávesnicí přímo pod displejem. Dodaný Android je ve verzi 2.3.3, rozměry jsou 114 65 11 mm, velikost dipleje 2,6" a jeho rozlišení 480 320 pixelů. Telefon má 512MB RAM, procesor Qualcomm o taktu 800 MHz, dále 512MB vnitřní uživatelské paměti, která je rozšiřitelná o kartu microsd. Dále telefon obsahuje fotoaparát s rozlišením 5 megapixelů, GPS, 3G, WIFI, Bluetooth, FM rádio a konektor pro sluchátka. Díky samostatnému tlačítku se z telefonu snadno pracuje se sociální sítí Facebook. ChaCha je mobil pro ty, kdo často píší zprávy, e-maily a chtějí mít rychlý přístup ke svému Facebook účtu. Při ceně kolem 4000Kč (březen 12) se model řadí mezi cenově dostupné pro mladé uživatele, na které cílí. Obr. 1: Testovaný mobilní telefon Obrázek č. 1 ukazuje mobilní telefon ze všech stran. V horní části se nachází kapacitní displej, pod nímž jsou (taktéž kapacitní) tlačítka. Pod nimi se dále nachází QWERTY klávesnice a úplně dole je umístěno Facebook tlačítko. Na levém boku nalezneme tlačítko pro ovládání hlasitosti a konektor pro nabíječku. Na zadní straně je 5megapixoelový fotoaparát s bleskem (diodou). Na horní straně potom je konektor pro sluchátka (jack 3,5 mm) a tlačítko pro zapnutí. 3
Cílová skupina Typickým představitelem cílové skupiny je student ve věku 16 26 let, který často píše textové zprávy a ke kontaktu s lidmi využívá síť Facebook. U tohoto uživatele se předpokládá zkušenost s ovládáním tzv. chytrých telefonů a znalost standardních prvků pro ovládání dotykových mobilních zařízení. Testovací metodiky kognitivní průchod Popis použité metody: Kognitivní průchod je metoda testování uživatelského rozhraní, při které je simulován uživatel z cílové skupiny. Cílem této metody je zjistit, zda je uživatel schopen zvládnout daný scénář, případně kde a jak se od optimálního (předpokládaného) průchodu odchyluje. V každém kroku si pozorovatel (testující) klade tyto otázky: Q0: Čeho chce uživatel dosáhnout. Q1: Bude uživateli zřejmé co udělat? Q2: Spojí si uživatel správně popisek akce se svým cílem? Q3: Dostane uživatel dostatečnou odezvu? Heuristická evaluace Popis použité metody: Heuristická evaluace je metoda založená na sadě pravidel (heuristik), která jsou předem definována. Aplikace je poté otestována na dodržování těchto pravidel. Heuristická pravidla podle Nielsena [1] vypadají následovně: 1. Viditelnost stavu sytému Systém by měl v rozumném čase informovat uživatele o tom, co se právě děje. 2. Shoda mezi systémem a reálným světem Systém by měl být v jazyku uživatele a měl by užívat srozumitelných pojmů. Informace by měla být předána logickou a přirozenou formou. 3. Kontrola uživatele a svoboda ovládání Uživatelé někdy zvolí špatnou funkci a potřebují zadní vrátka k opuštění funkce, kterou si nepřejí. Podpora undo a redo. 4. Konzistence a standardizace Uživatelé by neměli přemýšlet, jestli jsou rozdílná slova nebo stavy stejné. Dodržování konvencí. 5. Prevence chyb Lepší než pěkné hlášení o chybě je dobrý návrh, který chybě předejde. 6. Rozpoznání místo vzpomínání Uživatel by neměl být nucen pamatovat si nějakou informaci mezi několika kroky dialogu. Všechny možnosti by měly být viditelné. 7. Flexibilní a efektivní použití Systém by měl obsahovat zkratky tak, aby bylo umožněno rychlé ovládání zdatnějšímu uživateli. 8. Estetický a minimalistický design Dialogy mají obsahovat jen důležité a relevantní informace. 9. Pomoc uživatelům rozpoznat chyby a vzpamatovat se z nich 4 Chybové hlášky by měly být snadno čitelné (žádný kód) a navrhovat řešení.
10. Nápověda a dokumentace Přestože je lepší, když dokumentace není potřeba, mohla by se ukázat jako nutná. Měla by být snadno nalezitelná, jasná a stručná. Use cases (testované případy užití) Mobilní telefon bude testován v situacích uvedených níže. Dva testy se týkají interakce s Facebookem. Tyto testy jsem zahrnul záměrně, právě kvůli zjevnému zaměření mobilu na Facebook. Na první a druhý use case použiji metodou kognitivního průchodu, jelikož se jedná o postupy, které jdou krok po kroku. Navigace je naopak pestřejší a komplikovanější aplikace a proto k jejímu otestování použiji heuristickou evaluaci. 1. Pořízení fotografie a její rychlé odeslání na Facebook pomocí Facebook tlačítka (kognitivní průchod) 2. Chat na facebooku pomocí programu Messenger (kognitivní průchod) 3. Navigace pomocí Google maps (heuristická evaluace) Use case 1: Pořízení fotografie a její rychlé odeslání na Facebook pomocí Facebook tlačítka (Kognitivní průchod) HTC Chacha má 5 MPx fotoaparát s bleskem (diodou). Pořizování fotografií a jejich sdílení na Facebooku je jednou z věcí, které bude typický uživatel po telefonu požadovat. V tomto testu projdeme proces od pořizování fotografie až po její nasdílení. Obr. 2: výchozí stav 5
Krok 1: Spuštění fotoaparátu Spuštění fotoaparátu lze docílit několika způsoby. Kliknutím na ikonku v menu All Apps, pomocí klávesové zkratky Fn + tlačítko s ikonkou fotoaparátu nebo ikonkou na domovské obrazovce (pokud je ikonka přítomna). Následně se vyvolá okno aplikace Camera. Obr. 3: okno aplikace Camera Q0: Spustit aplikaci Camera, obsluhující fotoaparát Q1 ano Je jasné, že pro pořízení fotografie je potřeba zapnout aplikaci fotoaparátu (Camera). Způsobů pro spuštění aplikace je několik. Q2 ano Díky ikonce fotoaparátu je uživateli účel aplikace Camera jasný. Q3 ano Po kliknutí na ikonku se aplikace spustí. (obr. 3) Krok 3: pořízení fotografie Pořízení fotografie je jednoduché a je otázkou okamžiku. Q0: pořídit fotografii Q1 ano Q2 ano Fotografie se pořídí stisknutím uzávěru umístěného u spodní hrany displeje. Uživatelům z cílové skupiny bude jasné, že ho mají stisknout. Rovněž lze použít tlačítko s ikonkou fotoaparátu na HW klávesnici. Toto je užitečné zejména při focení sebe sama. Q3 ano Pořízení fotografie je doprovázeno zvukovým signálem. Fotografie se poté na několik sekund zobrazí na displeji. 6
Krok 4: nasdílení fotografie na Facebook vyvolání okna pro sdílení Pro upload fotografie na Facebook je zapotřebí stisknout Facebook tlačítko. Q0: poslat fotku na Facebook Q1 ano Intuice napovídá, že pro sdílení fotografie na Facebook bude zapotřebí stisknout Facebook tlačítko. Q2 ano Účel tlačítka je zřejmý. Tlačítko se navíc po pořízení fotografie rozbliká. Q3 ano Zobrazí se okno pro upload obrázku. (obr. 4) Obr. 4: okno pro upload na Facebook Krok 5: nasdílení fotografie na Facebook vybrání alba pro uložení V okně pro upload vybereme album, kam chceme fotku uložit. Q0: vybrat album pro uložení Q1 ano Okno používá standardních komponent. Q2 ano Všechny ovládací prvky jsou přehledné. Q3 ano Název alba se zobrazí pod nápisem Upload photos to: 7
Krok 6: nasdílení fotografie na Facebook přidání popisku Pro přidání popisku musíme kliknout na tlačítko Add tag and description (obr. 4). Dostaneme se do okna zobrazeného na obrázku č. 5. Q0: přidat k fotce popisek Q1 ano Okno používá standardních komponent. Q2 ano Políčko pro přidávání popisku je označené. Q3 ano Po kliknutí na políčko mohu vepsat text. Obr. 5: přidání popisku a označování lidí na fotografii Krok 7: nasdílení fotografie na Facebook označení lidí na fotografii Pro označení člověka na fotografii je zapotřebí stisknout tlačítko Tag this photo. Dostaneme se na další obrazovku. Obr. 6: označování lidí na fotce 8
Q0: označení lidí na fotce Q1 ano Okno používá standardních komponent. Q2 ano Nahoře je instrukce. Q3 ano Po kliknutí na políčko se dostanu na další obrazovku Krok 8: nasdílení fotografie na Facebook nalezení jmen v seznamu Na další obrazovce bychom měli do políčka zadat jména lidí, které chceme označit. Zadávání nám ale nadává žádné výsledky viz obrázek č. 7. Obr. 7: hledání uživatele pro označení Q0: nalezení uživatele, který se má označit Q1 ano Q2 ano Políčko nahoře obsahuje popisek. Q3 ne Aplikace na vstup nijak nereaguje Krok 9: nasdílení fotografie na Facebook uložení obrázku Stisky tlačítka pro návrat se navrátíme se zpět na obrazovku na obr. 4 a provedeme uložení. Q0: uložit obrázek Q1 ano Q2 ano Q3 ano Viz obr 8. 9
Obr. 8: ukládání obrázku Shrnutí Pořizování fotografií a jejich upload na Facebook je intuitivní a uživatel z cílové skupiny ho zvládne bez problému. Chyba v programu ovšem uživateli znemožní označit své přátele. Use case 2: chat na facebooku pomocí programu Messenger (Kognitivní průchod) HTC Chacha má hardwarovou QWERTY klávesnici, která ho předurčuje pro rychlé psaní zpráv nebo e- mailů. Komunikace s přáteli na Facebooku je další z aktivit, kterou bude uživatel z cílové skupiny pravděpodobně vykonávat. Test chatu provádím v aplikaci Messenger, která je určena čistě pro účel chatování na Facebooku. Po instalaci je program připraven k použití. Program spustíme ze seznamu všech aplikací All Apps (obr. 9). Obr. 9: menu All Apps se všemi instalovanými aplikacemi 10
Krok 1: napsání nové zprávy Po spuštění programu se zobrazí úvodní obrazovka s přehledem posledních Facebookových konverzací. (obr. 10) Program nás sám navede k tlačítku pro napsání nové zprávy. Obr. 10: úvodní obrazovka programu Messenger Q0: napsat novou zprávu Q1 ano Q2 ano Program nám při prvním spuštění napoví. Q3 ano Krok 2: nalezení adresáta z Friend listu Po kliknutí na tlačítko nové zprávy se vyvolá okno, ve kterém zvolíme adresáta zprávy, kterou chceme napsat. (obr. 11). Tím přejdeme do okna konverzace s vybraným přítelem (obr. 12). Pokud chceme pokračovat v konverzaci uvedené v seznamu v úvodním okně (obr. 10), stačí kliknout na konverzaci a dostaneme se rovnou do okna na obrázku 12. 11
Obr. 11: výběr adresáta nové zprávy Q0: vybrat adresáta Q1 ano Q2 ano Q3 ano Krok 3: psaní zpráv Psaní a odesílání zpráv v okně konverzace (obr. 12) je naprosto intuitivní. Stačí do řádku napsat libovolný text a odeslat ho stisknutím Send. Obr. 12: okno konverzace Q0: něco příteli poslat Q1 ano Q2 ano Q3 ano 12
Shrnutí Ovládání aplikace Messenger je jednoduché a zvládne ho i začínající uživatel. Use case 3: Navigace pomocí aplikace Maps (Heuristická evaluace) Nalezení cesty v neznámém prostředí patří mezi časté problémy, se kterými se člověk může potýkat. HTC Chacha má předinstalovanou aplikaci Maps, která, mimo jiné, nabízí funkci navigace. Test bude proveden pomocí Heuristické evaluace. Obr. 13: nalezená cesta Nalezené konflikty: Konflikt Porušuje heuristiku Doporučení Dialog kladoucí otázku, ale nenabízející zvolit si odpověď. 2 / 8 Dát uživateli možnost rozhodnout přidat tlačítka Yes a No Absence nápovědy 10 Přidat nápovědu 13
Obr. 14: Dialog nesplňuje principy testované heuristickou evaluací Shrnutí Heuristická evaluace odhalila závadu v dialogu zobrazovaném při potřebě zapnutí GPS. Dále aplikace neobsahuje nápovědu. Aplikace ale je malá a cílovému uživateli nemůže seznámení s ní trvat dlouho. Proto tento nedostatek nepovažuji za závažný. Přehled nálezů V use case 1 jsem nalezl kritickou chybu nefunkční označování lidí na fotce. I přes různé snahy problém překonat jsem neuspěl. Tato chyba brání ve využívání všech možností aplikace. V use case 3 jsem nalezl menší chybu v dialogu. Priorita Popis problému Řešení Kritická Nemožnost označit lidi na fotce. Pravděpodobně bug Nalezní chyby a oprava. v programu. Nízká Nestandardní dialog. Přidání Yes, No tlačítek Literatura [1] Nielsen, J. (1994) Heuristic evaluation. 14