Jiří Troup ČESKÉ VSOKÉ UČENÍ TECHNICKÉ V PRAZE Testování uživatelských rozhraní 1. Obrázek: Jiří Troup - Semestrální práce A2 troupjir@fel.cvut.cz ZS: 14.10.2012 1 / 19
Jiří Troup Obsah 1. Úvod...3 1.1 Seznámení s výrobkem...3 1.2 Parametry...3 1.3 Popis ovládacích prvků...4 2. Cílová skupina...5 3. Technologie testování...5 3.1 Kognitivní průchod...5 3.2 Heuristická evaluace...5 4. Testované Use-casy...7 4.1 Testované use-casy...7 2) Přiřazení knihy do příslušné kolekce...7 3) Vložení poznámky do textu a její editace...7 4.2 Založení kolekce...8 4.2.1 Stiknout Menu...8 4.2.2 Zvolit Create New Collection...8 4.2.3 Zadat název kolekce...8 4.3 Přiřazení knihy do příslušné kolekce...10 4.3.1 Vybrat kolekci / Knihu...10 4.3.2 Otevřít podrobnosti Knihy/Kol...10 4.3.3 Zvolit přidání...10 4.4 Vložení poznámky do textu a její editace...13 Zde jako výchozí bod považujeme otevřenou stránku knihy....13 Souhrn...13 4.4.1 Přepnout do textového režimu...13 4.4.2 Vložit poznámku do textu...13 4.4.3 Uložit poznámku...14 4.4.4 Najít poznámku v textu...14 4.4.5 Editovat poznámku...14 4.5 Vložení poznámky do textu a její editace - Heuristika...15 4.5.1 Přepnout do textového režimu...15 4.5.2 Vložit poznámku do textu...15 5. Souhrn Nálezů...18 6. Návrh řešení...19 6.1 N1: Zadání názvu kolekce...19 6.2 N2 Otevření podrobnosti knihy nebo kolekce...19 6.3 N3 Přepnutí do textového režimu...19 6.4 N4 Vložení poznámky do textu a její editace...19 2 / 19
Jiří Troup 1. Úvod 1.1 Seznámení s výrobkem Amazon Kindle je elektronická čtečka, používající technologii E-Ink Pearl. Díky tomu má řádově vyšší výdrž na baterie než čtečky používající technologii LCD či OLED. E-Ink také umožňuje mnohem příjemnější čtení textu. Text vypadá, jako by byl opravdu vytištěný na papíře. K tomuto faktu přispívá i kontroverzní absence podsvícení. Mezi další slabou stránku Kindlu patří pouze černobílý displej, a z povahy E-Ink technologie vyplívající také nemožnost přehrávat videa (E-Ink má velice pomalou obnovovací frekvenci). Dále je také Kindlu vyčítána absence podpory.doc,.epub formátu. Kindle používá formát.mobi bez DRM (Digital Rights Management). Tento fakt odrazuje některé obchody s ebooky. Na druhou stranu se domnívám, že tato vlastnost je vítána uživateli, kteří pak mají plnou kontrolu nad koupenou knihou. V tomto materiálu se testujeme s modelem dnes oficiálně nazývaným Kindle Keyboard, firmware 3.3 (611680021) bez 3G podpory. Od ostatních verzi Kindlu se liší hardwarovou klávesnicí, díky které je možné použít Kindle jako webový browser. Jedná se o první generaci "nových" Kindle čteček. 1.2 Parametry Výška 19.05 cm Šířka 12.19 cm Tloušťka 00.86 cm Váha 240.4 gr Velikost displeje 15.24 cm Rozlišení 800px * 600px Typ displeje E Ink Pearl (16 odstínů šedé) Vnitřní paměť 4 GB Wi-Fi podpora 802.11n, 802.11g, 802.11b Konektor Micro USB Tabulka 1.1 3 / 19
Jiří Troup 1.3 Popis ovládacích prvků 2. Obrázek: Ovládací prvky Kindlu A) Tlačítka Kupředu a Dozadu. Na obou stranách je větší z nich tlačítko Kupředu. B) Tlačítko Menu. C) Navigační kříž - Nahoru, Dolu, Vlevo, Vpravo. Uvnitř navigačního kříže je čtvercové tlačítko Enter. D) Tlačítko Zpět. E) Tlačítko Home (Home ponechávám v angličtině, protože český ekvivalent Domů, mi nepřipadá vhodný). 4 / 19
Jiří Troup 2. Cílová skupina Naše cílová skupina je muž, ve věku 20-30 let. Má zájem o technologii a proto si koupil Kindle. Náš uživatel se nebojí přístroj používat, a často pracuje stylem pokus-omyl. Návod si přečte pouze když už nemá jinou možnost. Náš uživatel očekává vysoký standart ovládání. Očekává, že okamžitě najde přislušný ovládací prvek. Pokud se tak nestane, rozčílí se a přistupí k rychlému zkoušní pokus-omyl, během něhož ale nevěnuje příliš mnoho pozornosti popiskům, či nápovědě. Předpokládáme, že uživatel si rychle umí přisvojit návyky používání Kindlu. Přesněji řečeno, nepřepokládáme, že se uživatel ztratí vícekrát při řešení stejného/podobného problému. Základní premisou používání Kindlu je alespoň základní znalost angličtiny. Očekáváme, že Use-casy, které budeme testovat, uživatel zkouší poprvé. Dále nepřepokládáme omezení času na příslušné příslušný test. 3. Technologie testování V tomto dokumentu budeme používat dvě metody testování UI. Za prvé Kognitivní průchod, za druhé je Heuristická evaluace. 3.1 Kognitivní průchod Zadájí se kroky, které uživatel musí udělat, aby dosáhl cíle. U každého takového kroku se ptáme na tři otázky. Q1: Je další akce zřejmá? Q2: Dokáže si spojit popisky s tím co chce udělat? Q3: Dostane uživatel adekvátní odezvu? V dokumentu používám anglickou verzi: Q1: Is action obvious? Q2: Are labels good? Q3: Reasonable feedback? 5 / 19
Jiří Troup 3.2 Heuristická evaluace Jedna ze základních metod testování použitelnosti spočívá v procházení a hodnocení stránek odborníky na použitelnost. Odborníci zkoumají jestli stránky splňují jednotlivá doporučení ohledně použitelnosti. Na konci je vytvořen seznam problémů a nedostatků řazený podle důležtosti. V tomto dokumentu budu používat hodnocení od 1 do 10, kde 10 se považuje za chybu největší důležitosti, a 1 za chybu čistě kosmetickéh rázu bez většího vlivu napoužitelnost. Při analýze se budume řídit desaterem principů použitelnosti jednoho ze zakladatelů heuristické analýzy Jakobem Nielsnem. 1. Viditelnost stavu systému systém by měl vždy dát uživateli vědět co se právě odehrává 2. Spojení mezi systémem a reálným světem komunikace systému s uživatelem by se měla odehrávat uživatelsky příjemným způsobem (srozumitelný jazyk bez odborných termínů) 3. Uživatelská kontrola a svoboda uživatelé při práci se systémem dělají chyby a potřebují proto únikový východ pro návrat do předchozího stavu. 4. Konzistence a standardizace uživatelé by neměli být nuceni přemýšlet jesti různé termíny znamenají to stejné, proto se doporučuje dodržovat obecné zásady. 5. Prevence chyb vyvarovat se chybovým hlášením bezpečným designem, který bude preventivně působit proti problémům 6. Rozpoznání místo vzpomínání uživatel by neměl být nucen vzpomínat si na provádění operací v systému, instrukce by měly být v systému vždy viditelně umístěny 7. Flexibilní a efektivní použití umožnění zrychlení práce se systém pro pokročilé uživatele 8. Estetický a minimalistický design bez nepotřebných informací 9. Pomoc uživatelů poznat, pochopit a vzpamatovat se z chyb chybové hlášky by měly být uváděny v přirozeném jazyce a měly by navrhovat řešení 10. Nápověda a návody všechny informace se musí dát lehce vyhledat, nápověda by měla obsahovat postupy v krocích [převzato z http://human-computer-interaction.webnode.cz/testovani-a-hodnocenirozhrani/metody-testovani/heuristicka-analyza/ ] 6 / 19
Jiří Troup 4. Testované Use-casy Jako výchozí bod testování bereme přehled knih a kolekcí po stisknutí Home. Kindle je tím pádem uživately přístupný v okamžiku zapnutí. 4.1 Testované use-casy 1) Založení kolekce 2) Přiřazení knihy do příslušné kolekce 3) Vložení poznámky do textu a její editace Obrázek 3: Výchozí bod testování 7 / 19
4.2 Založení kolekce Shrnutí: # Postup Q1: Is action obvious? Q2: Are labels good? Q3: Reasonable feedback? 1 Stisknout Menu es es es 2 Zvolit Create New Collection es es es 3 Zadat název kolekce es es No Tabulka 4.1 4.2.1 Stiknout Menu Q1: V Home (dle obrázku 3) není jiná smysluplná možnost než stisknout Menu. Home vrací do stejného míste, kde uživatel je. Back vrací zpět, ale my jsem žádnou akci neudělali. Přepokládáme, že si uživatel rychle odvodí, že založení nové kolekce by mohlo být v menu. Q2: Název menu odpovídá jeho obsahu. Q3: Po stisku se otevře menu. To je dostatečně viditelná odezva. 4.2.2 Zvolit Create New Collection Q1, Q2: I s elementární znalostí angličtiny si uživatel jistě přeloží, co může "Create new Collection" znamenat. Q3: Po stisku se objeví nový dialog Enter Collection Name. 4.2.3 Zadat název kolekce Q1: Další pomoc při vedení uživatele je symbol kurzoru, který se zobrazí při psaní textu. Tím Kindle naznačuje, že se nyní má psát. Navíc obsahuje nápovědu, že pod Tlačítkem Sym jsou zvláštní znaky (počítají se mezi ně i číslice). Q2: Save i Cancel odpovídají jejich funkci. Q3: Zde je problém. Po stisku Save se dialog vypne, a mezi kolekcema se objeví nová kolekce se zadaným jménem. Objeví se na prvním místě nahoře. Ale bohužel není jinak zvýrazněná, a pokud má velice podobné jméno s kolekcí, může dojít k záměně, či chvilkové dezorientaci. Navíc po ukončení dialogu uživatel v první moment neví jestli se něco pokazilo, nebo vytvoření proběhlo v pořádku.
Obrázek 4: Menu dialog Obrázek 5: Dialog vložení jména kolekce
4.3 Přiřazení knihy do příslušné kolekce Souhrn. Pozn. bod 2 se dá udělat dvěma způsoby. # Postup Q1: Is action obvious? Q2: Are labels good? Q3: Reasonable feedback? 1 Vybrat kolekci / Knihu es es es 2 Otevřít podrobnosti Knihy/Kol. es No es 3 Zvolit přidání es es es Tabulka 4.2 4.3.1 Vybrat kolekci / Knihu Q1: Chci přidat knihu do kolekce / nebo do kolekce novou knihu. Q2, Q3: Aktuálně vybraná kniha je podtržená černou linkou. Po chvíli se zprava a zleva objeví malé trojúhelníkové šipky. 4.3.2 Otevřít podrobnosti Knihy/Kol. Q1: Je zřejmé, že po zvolení knihy/kolekce se má otevřít její nastavení. Q2: Zde není zřejmé jak se mají podrobnosti kolekce/knihy otevřít. Otevírají se Navigačním křížem stiknutím tlačítka Doprava. Tento fakt běžného uživatele rozhodně napoprvé nenapadne. Q3: Po stiknutí se otevře příslušný dialog. 4.3.3 Zvolit přidání Q1: Jasný další krok. Q2: U kolekce je nápis Add/Remove Items. U knihy Add to Collection. Oba shledáváme za vhodné. Q3: V pravo se zobrazí fajfka, označující že kniha byla přidána.
Obrázek 8: Menu kolekce Obrázek 7: Výběr kolekce Obrázek 6: Výběr knihy k vložení do kolekce
Obrázek 9: Menu knihy Obrázek 10: Přidání knihy do kolekce
4.4 Vložení poznámky do textu a její editace Zde jako výchozí bod považujeme otevřenou stránku knihy. Souhrn # Postup A Q1: Is action obvious? Q2: Are labels good? Q3: Reasonable feedback? 1 Přepnout do textového režimu No No es 2 Vložit poznámku do textu No es es 3 Uložit poznámku es es es 4 Najít poznámku v textu es es es 5 Editovat poznámku es es es Tabulka 4.3 4.4.1 Přepnout do textového režimu Q1: Přepnutí do režimu, kde se zadávají poznámky, se děje mocí Navigačního kříže, stiknutím tlačítka Dolů. Nikde není nápověda, že má uživatel právě toto tlačítko zmáčknout. Q2: Možnost stisku tlačítka Dolů není nikdy poznačená. Q3: Zobrazí se kurzor editace textu. Tím je uživatel informován o přepnutí do jiného režimu. 4.4.2 Vložit poznámku do textu Q1: Uživatel očekává, že poznámku bude vkládat tam kde je kurzor. Ta se ale vloží až z adalší slovo. Q2: Dole je napsáno Begin typing to create o note. Q3: Otevře se dialog psaní poznámky.
Jiří Troup 4.4.3 Uložit poznámku Q1: Uživately je jasné, že je potřeba poznámku uložit. Q2: Dialog obsahuje tlačítko Save note. Q3: Za slovem se objeví horní index označují místo poznámky. 4.4.4 Najít poznámku v textu Q1: Uživatel musí naject kurzorem na poznámku. Q2: Poznámka je značena horním indexem. Zde je diskutabilní jestli pouze číslo na popis poznámky stačí. Q3: Po najetí na poznámku se indexu invertují barvy. 4.4.5 Editovat poznámku Q1: Uživatel musí otevřít poznámku Q2: Dole je dialog sdělující, že pro editaci poznámky je potřeba zmáčknout Enter. Q3: Znovu se otevře dialog jako při editaci. 14 / 19
Jiří Troup 4.5 Vložení poznámky do textu a její editace - Heuristika Pro stručnost vyjádření vypisuji pouze body, ve kterých dochází k porušení principů dobrého User Interface. Krok 1 2 3 4 5 6 7 8 9 10 Přepnout do textového režimu N N N Vložit poznámku do textu N N N N Uložit poznámku Najít poznámku v textu Editovat poznámku Tabulka 4.4 Heuristika 4.5.1 Přepnout do textového režimu 6) Uživatel si musí vzpomenout, že pro zadání poznámky se stiskne tlačítko Dolů. 7) Systém nenabízí rychlení práce, či rozšířené možnosti pro pročilé. 10) Systém nenapovídá jak se správně přepnout. 4.5.2 Vložit poznámku do textu 2) Není jasné na které pozici se poznámka vkládá. 3) Nejde pojmenovat poznámku. 5) Program nenaznačuje místo vložení poznámky. 7) Systém opět nenabízí rozšířené možnosti. 15 / 19
Obrázek 13: Výchozí bod Obrázek 12: Objevení kurzoru Obrázek 11: Psaní poznámky
Obrázek 15: Kurzor před slovem ale poznámka se vloží až za slovo Obrázek 14: Označená poznámka zblízka Obrázek 16: Editace poznámky Obrázek 17: Dialog editace poznámky
5. Souhrn Nálezů Zde je souhrn všechn nálezů jak pomocí kognitivního přístupu tak pomocí heuristické analýzy. # Nález Popis Priorita Testováno pomocí N1 Zadání názvu kolekce Nedostatečný feedback při založení kolekce. 3 kognitivní p. N2 Otevření podrobnosti knihy nebo kolekce Přidat výraznější ikony označující akci, co se stane při zmáčknutí tlačítka Vlevo a v Pravo. 8 kognitivní p. N3.1 Přepnutí do textového režimu Není jasné jak se přepnout textového/výběrového režimu 9 kognitivní p. N3.2 Přepnutí do textového režimu Schází nápověda, či jakýkoliv popisek. Systém nedovoluje pokročilé nastavení chování. 2 heuristika N4.1 Vložení poznámky do textu a její editace Nejde pojmenovat poznámku, neexistuje nastavení poznámky. 3 heuristika N4.2 Vložení poznámky do textu a její editace Poznámka se nevloží na místo, kde by jí uživatel očekával, ale až za další slovo. 10 kognitivní p. Tabulka 5.1
6. Návrh řešení 6.1 N1: Zadání názvu kolekce Řešením může být dialog oznamující správé založení kolekce. Další zlepšení by bylo zvýraznění nově přidané kolekce. 6.2 N2 Otevření podrobnosti knihy nebo kolekce Autor patrně zamýšlel, že malé trojúhelníkové šipky vpravo a vlevo naznačují možnost použít navigační kříž. Domnívám se, že by měly být mnohem větší a výraznější. Za úvahy stojí změna šipek na lépe srozumitelné ikony. 6.3 N3 Přepnutí do textového režimu Buď během psaní zobrazit malou ikonu, naznačující možnost použití tlačítka Dolů, nebo přidat přepnutí do výběrového režimu do Menu. Uživatel by měl alternativní způsob jak režim vyvolat. Je dobré zvážit, možnosti zrychlení práce pro uživatele, již déle použivající Kindle. 6.4 N4 Vložení poznámky do textu a její editace Vkládat poznámku přesně na místo kde je umístěný kurzor. Dát uživateli možnost si poznámku pojmenovat, či jinak vizuálně upravit.