TESTOVÁNÍ BLOGOVACÍHO SYSTÉMU TUMBLR

ÚLOHA A2 Z TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ TESTOVÁNÍ BLOGOVACÍHO SYSTÉMU TUMBLR badalmar@fel.cvut.cz 1

OBSAH 1 Úvod... 3 1.1 Popis aplikace... 3 1.2 Popis uživatelů... 4 1.3 Přehled případů užití... 4 1.4 Testování kognitivním průchodem... 4 1.5 Závažnost problémů... 4 2 Testování jednotlivých případů užití... 5 2.1 Registrace uživatele... 5 2.1.1 Krok 1: Kliknout na tlačítko registrace... 5 2.1.2 Krok 2: Vyplnění registračního formuláře... 6 2.1.3 Krok 3: Ověření e-mailu... 8 2.2 Publikace příspěvku... 9 2.2.1 Krok 1: Výběr typu příspěvku... 9 2.2.2 Krok 2: Vyplnění formuláře pro odeslání příspěvku... 9 2.3 Sdílení příspěvků s určitým tagem... 11 2.3.1 Krok 1: Zadání hledaného tagu do pole pro vyhledávání... 11 2.3.2 Krok 2: Kliknout na tlačítko pro sdílení příspěvku... 12 2.3.3 Krok 3: Vyplnění formuláře pro sdílení... 13 2.4 Vytvoření sekundárního blogu... 14 2.4.1 Krok 1: Kliknout na seznam svých blogů a vytvoření nového blogu... 14 2.4.2 Krok 2: Vyplnění formuláře pro nový blog... 15 3 Přehled nálezů... 17 3.1 Problémy se závažností 1... 17 3.2 Problémy se závažností 2... 18 3.3 Problémy se závažností 3... 18 4 Závěr... 18 2

A7B39TUR ZS 2013/2014 1 ÚVOD 1.1 POPIS APLIKACE Obrázek 1 - logo služby Semestrální projekt se bude zabývat webovou stránkou tumblr.com.. Jedná se o blogovací platformu mu umožňující uživatelům publikovat různorodý obsah a odebírat novinky z blogů ostatních uživatelů. Služba sídlí na adrese http://www.tumblr.com. Uživatel zde může zveřejnit text, obrázky, audio či video. Na úvodní stránce ánce se mu zobrazují nejnovější příspěvky z jeho oblíbených blogů. Je zde také možnost vyhledávat mezi příspěvky od všech uživatelů podle určitého tagu. Každý blog má svoji vlastní stránku s adresou ve formátu název-blogu.tumblr.com blogu.tumblr.com s libovolně nastavitelným ým vzhledem. Důležitým elementem je zde sdílení: uživatel může publikovat cizí článek s vlastním komentářem, zůstane u něj však odkaz na původního autora. Obrázek 2 - hlavní uživatelská stránka 3

1.2 POPIS UŽIVATELŮ Registrovat se zde mohou pouze osoby starší třinácti let. Služba je oblíbená hlavně mezi náctiletými a vysokoškolskými studenty, je proto možné předpokládat, že jsou uživatelé zvyklí pracovat s jinými webovými aplikacemi a sociálními sítěmi. Lidem, kteří na práci s podobnými stránkami nejsou zvyklí, může minimalistický design činit potíže. Jazykem stránky je primárně angličtina, dá se přepnout do několika dalších, avšak čeština mezi nimi chybí. 1.3 PŘEHLED PŘÍPADŮ UŽITÍ 1 Registrace uživatele Registrace je pro tuto službu naprosto zásadní, bez ní není možné používat žádné funkce kromě prohlížení jednotlivých blogů. 2 Publikace příspěvku Do příspěvků je možné vkládat text, obrázky, hudbu či video. Pro usnadnění třídění jak na vlastním blogu tak v rámci příspěvků celé komunity se označují tagy (štítky). 3 Sdílení příspěvku Obsah blogu vzniká publikováním vlastních příspěvků nebo sdílením s určitým tagem příspěvků cizích uživatelů, ke kterým lze přidávat vlastní komentáře. 4 Vytvoření sekundárního blogu 1.4 TESTOVÁNÍ KOGNITIVNÍM PRŮCHODEM Každému uživateli se při zaregistrování automaticky vytvoří primární blog s jeho uživatelským jménem v názvu. Vedle něj může uživatel vlastnit ještě sekundární blogy, které může spravovat společně s jinými uživateli. Kognitivní průchod je jednou z metod testování uživatelských rozhraní bez uživatele. Jejím cílem je ověřit použitelnost a srozumitelnost pro naši cílovou skupinu. Procházením předem připravených scénářů se odhalují problematická místa, která by mohla uživatelům znepříjemňovat či dokonce znemožňovat práci. Na začátku testování každého případu užití se položí základní otázka: Q0 Čeho chce uživatel dosáhnout? Každý úkol je rozdělen do několika kroků, ve kterých se analyzují následující otázky: Q1 Je uživateli jasné, co v tomto kroku udělat? Q2 Spojí si uživatel popisek akce se svým cílem? Q3 Obdrží uživatel srozumitelnou odezvu? Pokud je odpověď na některou z otázek negativní či nejasná, nález je popsán, je mu přidělena závažnost a je navrženo řešení problému. 1.5 ZÁVAŽNOST PROBLÉMŮ 1 Drobná nejasnost, může uživatele zmást, ale nebrání mu ve výkonu 2 Znatelně znepříjemňuje uživateli plnění úkolu 3 Naprosto znemožňuje uživateli práci 4

2 TESTOVÁNÍ JEDNOTLIVÝCH PŘÍPADŮ UŽITÍ 2.1 REGISTRACE UŽIVATELE Q0: Bude uživatel schopen zaregistrovat se do systému? 2.1.1 KROK 1: KLIKNOUT NA TLAČÍTKO REGISTRACE Úvodní stránka nabízí formulář pro přihlášení pro stávající uživatele. Pod ním je odkaz na registraci nového účtu. Obrázek 3 - úvodní stránka s formulářem pro přihlášení stávajícího uživatele Obrázek 4 - formulář pro registraci nového uživatele Q1 ANO Q2 ANO Popisek dokonce obsahuje slova "nový účet" Q3 ANO Formulář se změní na registrační 5

2.1.2 KROK 2: VYPLNĚNÍ REGISTRAČNÍHO FORMULÁŘE Uživatel musí vyplnit e-mail, heslo a uživatelské jméno. Při vyplnění adresy, kterou už někdo používá, a příliš krátkého hesla se pod formulářem objeví políčko informující o problému. Při zadání obsazeného uživatelského jména se zobrazí nabídka použitelných jmen. Méně zkušený uživatel by nemusel pochopit barevné obdélníčky u hesla hodnotící sílu hesla, o jejichž významu se zde nenachází žádná slovní zmínka. Obrázek 5 - upozornění na délku hesla Obrázek 6 - hodnocení síly hesla Obrázek 7 - nabídka volných uživatelských jmen 6

Po úspěšném odeslání formuláře se přejde do další části registrace - zadání věku a souhlas s podmínkami stránky. Zde může dojít k problému: uživatelům stránky musí být alespoň třináct let. Při zadání nižšího věku se objeví chybová hláška, která však nevypovídá nic o problému. Při opakovaném pokusu o registraci se stejným e-mailem se stejná hláška objeví ještě před zadáním věku. Je otázkou, zda je toto chyba použitelnosti, nebo trik, jak odradit příliš mladé uživatele od registrace. Obrázek 8 - zadání věku a souhlas s podmínkami Obrázek 9 - neurčitá chyba Obrázek 10 - hlavní uživatelská stránka hned po registraci 7

Q1 ANO Q2 ANO Q3 ANO/NE (3) Uživatel pod třináct let se nedozví, proč se nemůže zaregistrovat Ukázat informaci, že uživatelé musí být starší třinácti let 2.1.3 KROK 3: OVĚŘENÍ E-MAILU Uživatel se ocitne na své hlavní stránce. Nahoře se objeví upozornění, že je potřeba ověřit e- mailovou adresu, a odkaz na opětovné odeslání odkazu pro dokončení registrace. Obrázek 11 - odkaz na ověření e-mailu Po kliknutí na odkaz v potvrzovacím e-mailu se zobrazí nabídka stažení verzí aplikace pro mobilní zařízení a odkaz na hlavní stránku. Po návratu na hlavní stránku upozornění zmizelo. Obrázek 12 - stránka bezprostředně po ověření e-mailu Q1 ANO Q2 ANO Q3 NE(1) Uživatel zjistí, že se ověření zdařilo pouze podle toho, že na hlavní stránce zmizelo upozornění Ukázat informaci, že ověření e-mailu proběhlo úspěšně 8

2.2 PUBLIKACE PŘÍSPĚVKU Q0: Bude uživatel schopen publikovat příspěvek? 2.2.1 KROK 1: VÝBĚR TYPU PŘÍSPĚVKU V horní části hlavní stránky se nachází pole s ikonami znázorňujícími jednotlivé typy příspěvků. Po kliknutí na jednu z nich se objeví pole s formulářem. Pro účel testování vybereme nejběžnější, textový příspěvek. Obrázek 13 - typy příspěvků Q1 ANO Q2 ANO Přehledná nabídka s popisky Q3 ANO 2.2.2 KROK 2: VYPLNĚNÍ FORMULÁŘE PRO ODESLÁNÍ PŘÍSPĚVKU Formulář obsahuje pole pro volitelné vyplnění titulu, lištu s nejdůležitějšími volbami pro formátování textu (tučné písmo, kurzíva, přeškrtnutý text, odkazy, odsazení, vložení obrázku). Při najetí kursorem nad ikony voleb se zobrazí jejich popis. Je zde také možnost psát přímo v HTML. Pokud uživatel netuší, že do posledního řádku má vyplnit tagy, dozví se to, když začne psát - objeví se mu nabídka populárních tagů. Obrázek 14 - formulář příspěvku 9

Obrázek 15 - našeptávač tagů Po dopsání klikneme na tlačítko "Publish". Nový článek se zobrazí na prvním místě na úvodní stránce. Obrázek 16 - zveřejněný příspěvek 10

Q1 ANO Q2 ANO?(1) Pokud uživatel nepochopí význam posledního řádku podle ikony, zjistí, Při najetí na ikonu zobrazit nápis "tags" podobně jako u nástrojů že jde o tagy až když začne psát Q3 ANO 2.3 SDÍLENÍ PŘÍSPĚVKŮ S URČITÝM TAGEM Q0: Bude uživatel schopen vyhledat příspěvky s určitým tagem a následně je sdílet nebo přidat do oblíbených? 2.3.1 KROK 1: ZADÁNÍ HLEDANÉHO TAGU DO POLE PRO VYHLEDÁVÁNÍ Vpravo nahoře na hlavní stránce je pole pro vyhledávání. Obrázek 17 - vyhledávací pole Podobně jako při psaní článku zde funguje nápověda. Hledání spustíme kliknutím na lupu nebo klávesou Enter. Obrázek 18 - našeptávač tagů Zobrazí se příspěvky s daným tagem seřazené podle času publikace od nejnovějšího. 11

Q1 ANO?(1) Lupa vlevo od vyplněného textu Umístit lupu doprava může působit dojmem, že nejde o potvrzovací tlačítko Q2 ANO Q3 ANO 2.3.2 KROK 2: KLIKNOUT NA TLAČÍTKO PRO SDÍLENÍ PŘÍSPĚVKU Každý příspěvek má ve spodní části tři ikony: ignorovat, sdílet (Reblog) a přidat do oblíbených (Like). Klikneme na ikonu pro sdílení (prostřední). Obrázek 19 - příspěvek, který chceme sdílet Q1 ANO Q2 ANO?(1) Tumblr je jedinou z populárních sociálních sítí, který výraz "Reblog" Snažit se uživatele na začátku poučit o terminologii stránky používá pro sdílení; každý uživatel si nemusí domyslet, k čemu tlačítko slouží Q3 ANO 12

2.3.3 KROK 3: VYPLNĚNÍ FORMULÁŘE PRO SDÍLENÍ Obrázek 20 - formulář pro sdílení příspěvku Ke sdílenému příspěvku je možné cokoliv přidat jako při psaní vlastního článku, není to však nutné. Po kliknutí na tlačítko pro odeslání se vpravo dole od příspěvků zobrazí informace, že jsme příspěvek sdíleli, a odkaz na příspěvek na našem blogu. Obrázek 21 - odkaz na námi sdílený příspěvek 13

Obrázek 22 - sdílený příspěvek na našem blogu Q1 ANO?(1) Uživateli nemusí být jasné, jestli je nutné něco napsat nebo ne Umístit informaci, že přidání vlastního obsahu je volitelné Q2 ANO Q3 ANO 2.4 VYTVOŘENÍ SEKUNDÁRNÍHO BLOGU Q0: Bude uživatel schopen vytvořit další blog? 2.4.1 KROK 1: KLIKNOUT NA SEZNAM SVÝCH BLOGŮ A VYTVOŘENÍ NOVÉHO BLOGU Nahoře v pravém menu se po kliknutí na políčko s názvem a adresou našeho blogu otevře seznam s odkazem na náš blog a volbou vytvořit nový blog. 14

Obrázek 23 - pravé menu se zavřeným seznamem Obrázek 24 - pravé menu s otevřeným seznamem Q1 NE(2) Nic nenasvědčuje tomu, že se volba nachází zrovna na tomto místě Umístit alternativní přístup do tvorby nového blogu například do nastavení Q2 NE(2) Na tlačítku je pouze název a adresa Umístit popisek stávajícího blogu Q3 ANO 2.4.2 KROK 2: VYPLNĚNÍ FORMULÁŘE PRO NOVÝ BLOG Obrázek 25 - formulář pro vytvoření nového blogu 15

Zobrazí se formulář, kde je třeba vyplnit název a adresu nového blogu. Je zde také možnost nastavení, zda má být blog dostupný pouze po zadání hesla. Obrázek 26 - varování při vyplňování formuláře Nový blog pojmenujeme testovaci-tur.tumblr.com. Po napsání pomlčky se téměř okamžitě objevilo varování, že URL nesmí končit pomlčkou a pomlčka se smazala. Adresa se dala zadat pouze pokud se text psal bez zastavení. Po odeslání formuláře se v seznamu blogů objevila nová položka. Obrázek 27 - seznam blogů s nově vytvořeným blogem Q1 ANO? (1) Uživatel může nabýt přesvědčení, že v URL blogu nesmí být pomlčka Nekontrolovat obsah formulářového pole okamžitě Q2 ANO Q3 ANO 16

3 PŘEHLED NÁLEZŮ 3.1 PROBLÉMY SE ZÁVAŽNOSTÍ 1 Tyto problémy pramenily hlavně z předpokladu, že nový uživatel nemusí rozumět terminologii a typickým funkcím stránky a má obavy, že by mohl něco pokazit. Můžeme předpokládat, že si velice záhy na používání zvykne a tyto problémy se již nebudou opakovat. 2.1.3 Registrace uživatele - Ověření e-mailu Uživatel zjistí, že se ověření zdařilo pouze podle toho, že na hlavní stránce zmizelo upozornění Ukázat informaci, že ověření e-mailu proběhlo úspěšně 2.2.2 Publikace příspěvku - Vyplnění formuláře pro odeslání příspěvku Pokud uživatel nepochopí význam posledního řádku podle ikony, zjistí, že jde o tagy až když začne psát Při najetí na ikonu zobrazit nápis "tags" podobně jako u nástrojů 2.3.1 Sdílení příspěvků s určitým tagem - Zadání hledaného tagu do pole pro vyhledávání Lupa vlevo od vyplněného textu může působit dojmem, že nejde o potvrzovací tlačítko Umístit lupu doprava 2.3.2 Sdílení příspěvků s určitým tagem - Kliknout na tlačítko pro sdílení příspěvku Tumblr je jedinou z populárních sociálních sítí, který výraz "Reblog" používá pro sdílení; každý uživatel si nemusí domyslet, k čemu tlačítko slouží Snažit se uživatele na začátku poučit o terminologii stránky 2.3.3 Sdílení příspěvků s určitým tagem - Vyplnění formuláře pro sdílení Uživateli nemusí být jasné, jestli je nutné něco napsat nebo ne Umístit informaci, že přidání vlastního obsahu je volitelné 2.4.2 Vytvoření sekundárního blogu - Vyplnění formuláře pro nový blog Uživatel může nabýt přesvědčení, že v URL blogu nesmí být pomlčka Nekontrolovat obsah formulářového pole okamžitě 17

3.2 PROBLÉMY SE ZÁVAŽNOSTÍ 2 Tento problém je pro uživatele určitě rychle řešitelný metodou pokus-omyl, kdy na řešení pravděpodobně narazí během klikání na všechny prvky na hlavní stránce. Jinak je otázkou, zda ho tato varianta napadne. Menu, ve kterém se volba nachází, se využívá pro přepínání blogů, tudíž uživatelé, kteří vlastní pouze jeden blog, na jeho význam nejspíš nepřijdou. Spousta uživatelů volbu nikdy nevyužije, tak je možná dobře, že je takto ukrytá. 2.4.1 Vytvoření sekundárního blogu - Kliknout na seznam svých blogů a vytvoření nového blogu Nic nenasvědčuje tomu, že se volba nachází zrovna na tomto místě Na tlačítku je pouze název a adresa stávajícího blogu Umístit alternativní přístup do tvorby nového blogu například do nastavení Umístit popisek 3.3 PROBLÉMY SE ZÁVAŽNOSTÍ 3 Tato chyba je trochu sporná - je možné, že je to strategie tvůrců stránek, kteří si myslí, že děti se o stránku, poté co se z nějakého neznámého důvodu při registraci vyskytne chyba, přestanou zajímat. Je však pravděpodobné, že děti velmi rychle zjistí, v čem je problém a při příští návštěvě zadají falešný věk. 2.1.2 Registrace nového uživatele - Vyplnění registračního formuláře Uživatel pod třináct let se nedozví, proč se nemůže zaregistrovat Ukázat informaci, že uživatelé musí být starší třinácti let 4 ZÁVĚR Závěrem můžeme říci, že při používání Tumblru se nevyskytují žádné významné překážky. Klade se zde důraz na maximální intuitivnost a minimální obsah nedůležitých prvků. Cílovou skupinu tvoří mladí lidé, není zde tedy problémem nekonvenční design, protože uživatelé jsou schopni adaptovat se na jakékoli prostředí. 18