Testování uživatelského rozhraní aplikace Messenger

Testování uživatelského rozhraní aplikace Messenger Autor: Předmět: Školní rok: Michaela Urbanovská, urbanm30@fel.cvut.cz A4B39TUR 2016/2017, letní semestr

Obsah 1. Úvod... 3 1.1. Popis aplikace... 3 1.2. Cílová skupina... 3 1.3. Verze a data... 3 2. Metodiky použité k testování... 3 2.1. Kognitivní průchod... 3 2.2. Heuristická evaluace... 4 3. Testované případy užití... 4 3.1. Napsání a odeslání nové zprávy... 5 3.1.1. Nalezení tlačítka Nová zpráva... 5 3.1.2. Vyhledání adresáta... 6 3.1.3. Vybrání adresáta... 7 3.1.4. Smazání adresáta... 8 3.1.5. Napsání zprávy... 9 3.1.6. Odeslání zprávy... 10 3.2. Založení skupinové konverzace... 10 3.2.1. Založení skupiny... 11 3.2.2. Nastavení skupiny... 12 3.2.3. Přejmenování skupiny... 13 3.3. Nastavení upozornění a zvuků... 14 3.3.1. Otevření nastavení... 14 3.3.2. Otevření nastavení... 15 3.3.3. Vypnutí zvukových upozornění... 17 3.4. Odeslání souboru... 18 3.4.1. Výběr souboru... 19 3.4.2. Nahrání souboru... 20 4. Přehled nálezů... 21 5. Závěr... 22 6. Zdroje... 22 A4B39TUR Michaela Urbanovská 2

1. Úvod 1.1. Popis aplikace Messenger je aplikace společnosti Facebook, která slouží ke komunikaci uživatelů, kteří Facebook používají nebo alespoň vlastní Facebookový účet. Poměrně nedávno došlo k tomu, že Messenger, který jsem do té doby znala jako samostatnou aplikaci, byl integrován přímo na webové stránky Facebooku. Budu tedy testovat tuto webovou verzi. Aplikace slouží k odesílání zpráv jednotlivým uživatelům nebo v rámci skupin, posílání fotek nebo jiných souborů a dále je v ní možné nastavovat různé detaily jako je barva konverzace, přezdívky uživatelů a další. 1.2. Cílová skupina Aplikace je určena všem uživatelům Facebooku. V této práci se zaměřuji zejména na skupinu uživatelů do věku 30 let, kteří mají v dnešní době tendenci být online co nejvíce. 1.3. Verze a data Bohužel se mi nepodařilo zjistit označení současné verze této aplikace, veškeré screenshoty a uvedená data byly pořízeny 20. 3. 2017. 2. Metodiky použité k testování Pro testování aplikace využijeme dvou metod, které umožňují testování bez uživatelů. První metodou je kognitivní průchod, druhou metodou pak heuristická evaluace. 2.1. Kognitivní průchod Metoda kognitivního průchodu [1] je metoda používaná ke zjišťování použitelnosti pro nového uživatele. Průchod každého úkolu začíná stanovením cíle. Q0: Čeho chce uživatel dosáhnout? Po definování cíle následuje několik kroků, přičemž se u každého z nich ptáme na tři zásadní otázky. Q1: Je uživateli zřejmé, co má provést, aby dosáhl cíle? Q2: Ví uživatel, jak tuto akci provést? Q3: Obdržel po provedení akce dostatečnou zpětnou vazbu? Pro každý krok je dále uvedena tabulka s jednotlivými odpověďmi a objevenými nálezy. Dále uvedeme doporučení, jak by bylo možné nalezené problémy řešit. A4B39TUR Michaela Urbanovská 3

2.2. Heuristická evaluace Heuristická evaluace definuje sadu kritérií, která by mělo uživatelské rozhraní splňovat, aby uživatelovi nekomplikovalo práci se systémem, ale naopak, aby mu ji ulehčovalo. Testující uživatel každé kritérium posoudí a vyhodnotí. Zde budeme používat sadu heuristik podle Jakoba Nielsena [2]: H1. Viditelnost stavu systému systém by měl uživateli dávat v rozumné době informace vypovídající o vnitřním stavu systému. H2. Propojení systému a reálného světa systém by měl komunikovat takovým způsobem, který je uživateli blízký. Podávané informace musí dávat uživateli smysl. H3. Uživatelská kontrola a svoboda možnost vrátit se zpět do minulého stavu systému v případě omylu. H4. Konzistence a standardizace funkce systému by měly být zřejmé, ovládání prvků zůstává neměnné po celou dobu interakce se systémem. H5. Prevence chyb systém by měl být schopen chybovým stavům zabránit. H6. Rozpoznávání místo vzpomínání veškeré instrukce a informace by měly být umístěny tak, aby uživatel nebyl nucen si je pamatovat, ale byl schopen je jednoduše najít. H7. Flexibilní a efektivní použití systém by měl být použitelný jak pro nezkušené uživatele, tak pro pokročilé uživatele a ulehčit jim opakující se akce. H8. Estetický a minimalistický design systém by měl být graficky vyvážený tak, aby uživatel nebyl zbytečně zatěžován nedůležitými prvky. H9. Pomoc uživatelům pochopit chybu a vzpamatovat se z ní chybové hlášky by měly být srozumitelné a ideálně by měly navrhovat řešení problému. H10. Nápověda a dokumentace pokud není uživateli jasné, jak má postupovat, měl by být schopen snadno vyhledat správný postup. 3. Testované případy užití U aplikace budeme testovat celkem čtyři případy užití a to: Napsání a odeslání nové zprávy Založení skupinové konverzace Nastavení upozornění a zvuků Odeslání souboru A4B39TUR Michaela Urbanovská 4

3.1. Napsání a odeslání nové zprávy Primárním účelem aplikace je rychlá komunikace s libovolným uživatelem. Jedná se o nejdůležitější akci, se kterou se uživatel při jejím používání setká. Úkolem bude odeslat zprávu uživateli Michaela Urbanovská. Přitom předpokládáme, že uživatel má otevřenou aplikaci Messenger v prohlížeči. Aplikace vždy zobrazuje poslední aktivní konverzaci, tudíž nemá žádnou úvodní stránku. Q0: Napsat a odeslat zprávu uživateli Michaela Urbanovská. 3.1.1. Nalezení tlačítka Nová zpráva První akcí, kterou je nutné provést, je identifikace tlačítka pro vytvoření nové zprávy. Ve screenshotu níže je tlačítko označeno červeným rámečkem. Obrázek č. 1 Úvodní obrazovka při přejití do aplikace Messenger Otázka Odpověď Komentář Nález Q1 Je zřejmé, že uživatel potřebuje najít tlačítko, které mu umožní napsat novou zprávu. Q2 Ne Tlačítko je umístěné vedle nastavení a použitá ikonka neindikuje jeho správnou funkci. Vzhledem k designu aplikace je obtížné tlačítko vůbec lokalizovat. Nevhodně umístěné a vyobrazené tlačítko pro vytvoření nové zprávy. Q3 Uživatel je přesměrován na stránku, kde je možné vytvořit novou zprávu. A4B39TUR Michaela Urbanovská 5

3.1.2. Vyhledání adresáta Vyhledání adresáta a jeho výběr by bylo možné časově zaměnit s psaním zprávy, jelikož aplikace nijak neudává, jak by tyto události měly jít za sebou. Vzhledem k tomu, že po načtení stránky byl focus nastaven na kolonku pro vyplnění adresáta, považuji tuto akci za tu, která by se měla provést dříve. Obrázek č. 2 Kolonka pro vyhledání adresáta a ukázka feedbacku Otázka Odpověď Komentář Nález Q1 Q2 Q3 Kolonka adresáta je na stránce nejvýše tudíž si jí uživatel pravděpodobně všimne jako první. V kolonce je napsáno Napište jméno člověka nebo název skupiny, což jasně určuje další postup. Ihned se zobrazuje seznam uživatelů nebo skupin podle toho, co uživatel zadává. A4B39TUR Michaela Urbanovská 6

3.1.3. Vybrání adresáta Ze zobrazeného seznamu by měl uživatel být schopen vybrat konkrétního člověka, kterému chce zprávu poslat. Obrázek č. 3 Seznam možností, ze kterých by měl uživatel vybrat adresáta Otázka Odpověď Komentář Nález Q1 Chce vybrat adresáta z nabízeného seznamu. Q2 Q3 Ne Ne každému uživateli musí být jasné, že ze zobrazeného seznamu může šipkami nebo myší uživatele vybrat. Po najetí myší na uživatele nebo stisknutím šipky dolů / nahoru je jméno uživatele v seznamu zvýrazněné. Nikde není uvedená instrukce, jak ze zobrazeného seznamu uživatele vybrat. A4B39TUR Michaela Urbanovská 7

3.1.4. Smazání adresáta V případě chyby, kdy uživatel vybere špatného adresáta, mělo by být jasné, jak chybu napravit. Obrázek č. 4 Ukázka aplikace po vybrání adresáta Otázka Odpověď Komentář Nález Q1 Uživatel chce smazat vybraného adresáta. Q2 Ne Není jasně zřejmé, že adresáta je možné smazat pouze kliknutím do kolonky s adresáty a stisknutím klávesy Backspace. Není zřejmé, jak smazat vybraného adresáta. Q3 Po smazání adresáta zmizí z kolonky. A4B39TUR Michaela Urbanovská 8

3.1.5. Napsání zprávy Po vybrání adresáta by měl uživatel přejít k psaní samotné zprávy, kterou chce poslat. Je tedy potřeba lokalizovat textové pole, kam je možné zprávu napsat. Obrázek č. 5 Umístění textového pole pro psaní zprávy Otázka Odpověď Komentář Nález Q1 Je jasné, že dále je cílem napsat zprávu. Q2 Ne Stránka je převážně prázdná a textové pole, které je označeno velmi světlým textem není na první pohled dobře vidět. Textové pole k psaní zprávy není označené dost výrazně a zabírá velmi malou část stránky. Q3 Text, který uživatel píše, je v textovém poli viditelný. A4B39TUR Michaela Urbanovská 9

3.1.6. Odeslání zprávy Posledním krokem je samotné odeslání zprávy. Obrázek č. 6 Umístění tlačítka Odeslat v aplikaci Otázka Odpověď Komentář Nález Q1 Uživatel chce odeslat napsanou zprávu zadanému uživateli. Q2 Ne Dokud nezačneme psát text, není viditelné tlačítko odeslat a je umístěno na úplném kraji panelu. Ne každý nutně posílá zprávy stiskem klávesy Enter. Nápověda k tlačítku je Odeslat Enterem, což je značně matoucí. Nevhodně umístěné a zobrazované tlačítko pro odeslání. Popisek tlačítka je matoucí. Q3 Zpráva se zobrazí na obrazovce. 3.2. Založení skupinové konverzace Další funkcionalitou aplikace Messenger je například zakládání skupinových konverzací, tj. konverzací, kde je možné komunikovat s více uživateli mezi sebou v rámci jednoho vlákna zpráv. Aplikace bohužel nemá jednoduchý způsob, jak takovou konverzaci založit, tudíž je nutné začít ji posláním zprávy všem uživatelům, kteří v ní mají být. Už to, jak je proces komplikovaný považuji za problém. Předpokládáme, že uživatel má před sebou stránku z prvního use-casu, kde je možné poslat novou zprávu. Vzhledem k tomu, že kroky vybrání uživatelů a napsání a odeslání zprávy byly již analyzovány v předchozím use-casu, budu se zabývat prvním krokem v procesu založení a dále pojmenováním skupiny. A4B39TUR Michaela Urbanovská 10

3.2.1. Založení skupiny Obrázek č. 7 Výchozí obrazovka pro poslání nové zprávy Q0: Založit skupinovou konverzaci s alespoň dvěma uživateli. Prvním krokem by mělo být založení skupiny. Vzhledem k funkcionalitě aplikace je potřeba vybrat požadované uživatele jako příjemce zprávy, aby skupina mohla být založena. Obrázek č. 8 Kolonka, kam je potřeba zadat požadované uživatele A4B39TUR Michaela Urbanovská 11

Otázka Odpověď Komentář Nález Q1 Ne Na první pohled není jasné, jakou akci je potřeba pro založení skupinové konverzace provést. Nejasný postup. Q2 Ne Není jasné, jak postupovat. V kolonce pro vyplnění uživatelů je napsáno Napište jméno člověk nebo název skupiny. Není jasné, zda to nemá být název budoucí skupiny, kterou chceme založit. Není jasné, jak provést založení skupinové konverzace, zmatečné označení kolonky. Q3 Při vyplňování uživatelů je zobrazena nápověda. 3.2.2. Nastavení skupiny Pro další práci se skupinovou konverzací je potřeba se dostat do jejího nastavení. Obrázek č. 9 Umístění ikonky nastavení skupinové konverzace Otázka Odpověď Komentář Nález Q1 Pro další práci se skupinou je potřeba najít její nastavení. Q2 Najít ikonku odpovídající této funkci. Q3 Po kliknutí na ikonku se otevře menu dostupných nastavení. A4B39TUR Michaela Urbanovská 12

3.2.3. Přejmenování skupiny Dalším krokem je přejmenování skupiny, což pomůže jak k jejímu vyhledávání v ostatních konverzacích, ale i k identifikaci toho, čeho se týká. Obrázek č. 10 Umístění možnosti přejmenování skupiny Obrázek č. 11 Ukázka reakce aplikace na výběr možnosti Přejmenovat A4B39TUR Michaela Urbanovská 13

Otázka Odpověď Komentář Nález Q1 Přejmenovat skupinovou konverzaci. Q2 První volbou v menu, Přejmenovat. Q3 Na místě, kde je dosavadní jméno konverzace se objeví možnost napsat vlastní (obr. č. 11). 3.3. Nastavení upozornění a zvuků Nastavení upozornění a zejména pak zvuku by mělo být jednoduše dostupné všem uživatelům. Zejména vzhledem k tomu, že defaultně nastavená hlasitá upozornění nevyhovují každému uživateli. Předpokládáme, že uživatel má před sebou stejnou obrazovku jako na začátku 3.1., tedy vidí svoji poslední otevřenou konverzaci. 3.3.1. Otevření nastavení Q0: Globálně vypnout zvuk notifikace z aplikace Messenger. Prvním krokem je lokalizace tlačítka nastavení ve výchozím okně. Obrázek č. 12 Umístění ikonky globálního nastavení aplikace A4B39TUR Michaela Urbanovská 14

Obrázek č. 13 Ukázka menu zobrazeného po kliknutí na ikonu nastavení Otázka Odpověď Komentář Nález Q1 Otevřít nastavení aplikace Messenger. Q2 Nalezením příslušné ikonky. Q3 Zobrazí se různé možnosti správy aplikace, jako první možnost Nastavení. 3.3.2. Otevření nastavení Obrázek č. 14 Umístění volby pro otevření nastavení A4B39TUR Michaela Urbanovská 15

Obrázek č. 15 Dialogové okno se všemi nastaveními Otázka Odpověď Komentář Nález Q1 Otevřít nastavení aplikace. Q2 Kliknutím na možnost Nastavení. Q3 Otevře se dialogové okno s výčtem možných nastavení. A4B39TUR Michaela Urbanovská 16

3.3.3. Vypnutí zvukových upozornění Obrázek č. 16 Nastavení zvuku před vypnutím Obrázek č. 17 Nastavení zvuku po vypnutí A4B39TUR Michaela Urbanovská 17

Otázka Odpověď Komentář Nález Q1 Najít a změnit nastavení pro zvuková upozornění. Q2 Identifikací správného řádku nastavení, kterých je malé množství, tudíž by to neměl být problém. Q3 Ne Checkbox v příslušném řádku sice není odškrtnutý, ale slovní popis nastavení zůstává stále na Zapnuto a to i po znovuotevření nastavení. Popis nastavení neodpovídá skutečnosti. 3.4. Odeslání souboru Odesílání souborů je další hojně používaná funkcionalita aplikace. Souborem se může myslet třeba archiv dat nebo fotografie. Předpokládáme, že uživatel má otevřenou konverzaci, do které chce soubor poslat. Q0: Odeslat soubor účastníkům vybrané konverzace. Obrázek č. 18 Otevřená konverzace, kam má být soubor poslán A4B39TUR Michaela Urbanovská 18

3.4.1. Výběr souboru Obrázek č. 19 Umístění ikonky pro výběr souboru k odeslání Otázka Odpověď Komentář Nález Q1 Vybrat soubor k odeslání. Q2 Ne Uživatel by mohl automaticky hledat ikonku papírové svorky, která je hojně používaná pro upload souborů, nebo jiné označení, než je ikona obrázku. Hlavně pak, když nebude jeho záměrem posílat fotografie. Nevhodně vybraná ikona. Q3 Otevře se dialogové okno pro výběr souboru. A4B39TUR Michaela Urbanovská 19

3.4.2. Nahrání souboru Předpokládejme, že uživatel umí pracovat s dialogovým oknem pro výběr souboru. Dalším krokem je soubor potvrdit a nahrát. Obrázek č. 20 Okno pro výběr souboru Obrázek č. 21 Ukázka nahraného souboru v konverzaci A4B39TUR Michaela Urbanovská 20

Otázka Odpověď Komentář Nález Q1 Nahrát vybraný soubor do konverzace. Q2 Ne V okně není tlačítko, které by mělo popisek Upload nebo Select. Tlačítko Open by mohlo u některých uživatelů vyvolat pochyby. Nevhodně popsané tlačítko pro výběr souboru k nahrání. Q3 Soubor se objeví v konverzaci mezi zprávami. 4. Přehled nálezů Nálezy budeme řadit od nejzávažnějších po nejméně závažné. Závažnost jednotlivých nálezů budeme hodnotit podle tří hlavních kritérií, které definoval již zmiňovaný profesor Jakob Nielsen. 1. Jak často k problému dochází? 2. Jaký je dopad problému na uživatele? Je schopný se z něj zotavit, přejít ho? 3. Jedná se o vytrvalý problém, který budeme muset překonávat neustále nebo nás nebude po prvním vyřešení už obtěžovat? Podle těchto kritérií rozdělíme nálezy do 4 skupin. 1. Kosmetický problém, který nezasahuje do použitelnosti aplikace. 2. Malý problém použitelnosti. 3. Podstatný problém použitelnosti. 4. Kritický problém (showstopper). U každého z uvedených nálezů je napsáno, kde se objevil, jaká je jeho závažnost a zároveň jsou u něj uvedeny heuristiky, které nesplňuje podle nalezených problémů. Místo nálezu 3.1.1. 2 3.1.3. 2 3.1.4. 3 3.1.5. 1 Závažnost Nález Doporučení Heuristiky Nevhodně umístěné a vyobrazené tlačítko pro vytvoření nové zprávy. Nikde není uvedená instrukce, jak ze zobrazeného seznamu uživatele vybrat. Není zřejmé, jak smazat vybraného adresáta. Textové pole k psaní zprávy není označené dost výrazně a zabírá velmi malou část stránky. Lépe tlačítko umístit, popřípadě k němu přidat textový popis. Přidat nápovědu nebo popis pro ovládání zobrazovaného seznamu uživatelů. Přidání ikonky křížku vedle jména adresáta. Lépe umístit textové pole nebo jej výrazněji označit. H6 H10 H3, H4 H6 A4B39TUR Michaela Urbanovská 21

3.1.6. 1 3.2.1. 4 3.3.3. 2 Nevhodně umístěné a zobrazované tlačítko pro odeslání. Popisek tlačítka je matoucí. Q1 i Q2 vedou k nejasnému postupu založení skupinové konverzace. Popis nastavení neodpovídá skutečnosti. 3.4.1. 2 Nevhodně vybraná ikona. 3.4.2. 1 Nevhodně popsané tlačítko pro výběr souboru k nahrání. Umístit tlačítko blíže psanému textu a opravit popisek. Přidat separátní tlačítko při přidání, které povede na stránku s lepšími popisky nebo upravení stávajících popisků. Po kliknutí na checkbox by se měl text vedle něj změnit na Vypnuto. Vybrání ikony, která nebude evokovat především posílání obrázků. Lépe popsat tlačítko Open, které nepopisuje jeho funkcionalitu dobře. Ideálně změnit na Select nebo Upload. H4 H6, H10 H1 H5, H6, H10 H4, H10 5. Závěr Při testování aplikace jsme zjistili, že nejvíce problematickou částí aplikace je zakládání skupinových konverzací, což je funkcionalita, která je k dispozici, ale není na ni nijak poukazováno. Druhým nejzávažnějším nálezem je nepříliš intuitivní smazání adresáta zprávy, které do jisté míry znemožňuje uživateli zotavit se z chyby na první pohled. Dalším problémem je obecně design aplikace, kdy na úkor minimalistického designu mnohdy není jasné, jak postupovat dál nebo jak nalézt požadovaná tlačítka. Jedná se tedy spíše o méně závažně nebo kosmetické změny. 6. Zdroje [1] C. Wharton et. al. "The cognitive walkthrough method: a practitioner's guide" in J. Nielsen & R. Mack "Usability Inspection Methods", http://www.pages.drexel.edu/~zwz22/cognwalk.htm [2] Jakob Nielsen: 10 Usability Heuristics for User Interface Design, https://www.nngroup.com/articles/ten usability heuristics/, 1.1.1995 A4B39TUR Michaela Urbanovská 22