D2
A7B39PDA
Tomáš Kozák
České vysoké učení technické v Praze Fakulta elektrotechnická
Semestrální práce D2 předmětu A7B39PDA
[BAL-MLP] Multiplayer
Tomáš Kozák (další členové týmu: Tomáš Bruštík, Jaroslav Havelík) LS 2012/2013 17. 3. 2013 Vedoucí práce
Ing. Jan Balata
1
D2
A7B39PDA
Tomáš Kozák
Multiplayer – Paper mockup 1. ANALÝZA UI GUIDELINES Aplikace bude určena na mobilní zařízení s operačním systémem Android. Uživatelé andoidu jsou zvyklí na aplikace, se specifickými rysy spjatými s touto platformou, proto je potřeba aplikaci navrhnout v souladu s Android UI guidelines. Android guidelines lze nalézt na oficiálních stránkách androidu [1]. Jelikož vlastní hra (červíci) nebude obsahovat rozsáhlé a složité uživatelské rozhraní, pouze tlačítka na ovládání hada a tlačítko pro přístup k menu. Tak jsem se zaměřil především na vzhled tlačítek a obecné rozložení prvků. 1.1. VZHLED PRVKŮ Tlačítka by měla dodržovat standart 48dp Rhythm, což znamená, že výška interaktivních prvků je 9mm veliká. Jelikož v naší aplikaci nemáme v jednotlivých obrazovkách rozsáhlé texty, velké tabulky nebo větší množství ovládacích prvků, tak můžeme interaktivní prvky udělat přes 9mm velké a tím ještě více snížit riziko překlepů. Prvky budou dodržovat barevné standarty. Například změnu barev tlačítka, podle toho, jestli je aktivní, neaktivní nebo stisknuté. Také, aby barva pozadí a textu byly dostatečně kontrastní a příjemné na pohled. 1.2. VKLÁDÁNÍ DAT Dilema, které budeme muset vyřešit je jakým způsobem získat data potřebná při založení hry. Jestli uživatel bude vybírat z nabídky možností nebo jestli necháme uživatele vyplnit data do textového pole a kontrolovat jeho vstup. Prozatím v prototypu uživatel vkládá data pomocí textového pole. 1.3. TEXTOVÉ POPISY Dialogy a popisky by měli být co nejstručnější a nejvýstižnější, aby uživatel nevzdal čtení popisku v polovině. V naší situaci, kdy se od uživatele očekávají trochu nestandardní akce, zase nechceme, aby kvůli nedostatku informací došlo k problémům při kalibraci a spojení zařízení. Tento problém by mělo vyřešit (pod stručným popisem instrukci) tlačítko, které uživateli (který bude tápat), zobrazí podrobný návod, třeba i s video tutoriálem.
2. PAPER MOCKUP V této kapitole popíši navržený papírový prototyp aplikace. Prototyp pokrývá všechny kritické části našeho problému. 2.1. ÚVODNÍ MENU Po zapnutí aplikace se uživateli zobrazí úvodní menu (obr. 1), zde může zvolit položku „Nastavení“, kde bude moct, nastavit například preferovanou barvu svého hada či hodnoty při zakládání hry. Další možnost v menu je „Nápověda“, zde budou podrobně popsány instrukce pro kalibraci a pravidla hry.
2
D2
A7B39PDA
Tomáš Kozák
Tyto dvě položky v úvodním menu nejsou v prototypu pokryté, jelikož se chceme zaměřit hlavně na ostatní části aplikace a tyto sekce nejsou primárně naším cílem. Po kliknutí na tlačítko „Založit hru“ se objeví obrazovka (obr 2), kde po vyplnění údajů nutných pro spuštění hry, se zaktivní tlačítko „Založit“. Údaje vyplňované při zakládání hry, budou po první hře předvyplněné daty od minule. Po kliknutí na tlačítko „Založit“ se zobrazí obrazovka (obr. 4) s „čekáním na ostatní hráče“.
Obrázek 1
Obrázek 2
Obrázek 3
Pokud v úvodním menu klikneme na tlačítko „Připojit se“ objeví se obrazovka (obr 3) se seznamem dostupných her. Uživatel musí v seznamu her označit tu, ke které se chce připojit a pak stisknout tlačítko „Připojit“.
Obrázek 5
Obrázek 4
3
D2
A7B39PDA
Tomáš Kozák
2.2. KALIBRACE V okamžiku, kdy jsou v jedné hře alespoň 2 hráči a zařízení nejsou spolu propojená, začíná kalibrace (obr 5). Na obrazovce hráče co se chce připojit, se objeví speciální obrazovka sloužící ke kalibraci. Uživatel přejede prstem podél jedné modré čáry na sousední zařízení. Zařízení uživatelům ukážou, jak proběhla kalibrace. Pokud se propojení nezdaří (obr 6), tak se kalibrují zařízení znovu dokud se úspěšně nespojí (obr 7).
Obrázek 6
Obrázek 7
2.3. VLASTNÍ HRA
Po úspěšném kalibrování se objeví hrací obrazovka (obr 8), zde stačí zakládajícímu hráči pouze kliknout na tlačítko „Začít“ a hra začíná. Na hrací obrazovce ( obr 9) se náhodně objeví hadi v barvách hráčů. Ovládání mají hráči v rozích svých zařízení, kde nejméně překáží hře. Každý hráč má na své obrazovce možnost jít do menu (obr 11), kde může bezpečně opustit hru nebo nastavit si například barvu svého hada. Po skončení kola se objeví zakládajícímu hráči na obrazovce (obr 10) tabulka se skóre a tlačítko pro pokračování hry.
4
D2
A7B39PDA
Tomáš Kozák
Obrázek 8
Obrázek 9
Obrázek 10
Obrázek 11
3. NEFORMÁLNÍ TESTOVÁNÍ 3.1. PARTICIPANTI Testování jsem provedl se dvěma participanty. Participant 1 pracuje jako správce sítě ve větší firmě, je mu 50 let a s dotykovými zařízeními má jen malé zkušenosti. Participant 2 studuje vysokou školu ekonomicky zaměřenou, je mu 22let a denně používá mobilní telefon s operačním systémem android.
5
D2
A7B39PDA
Tomáš Kozák
3.2. SCÉNÁŘE TESTŮ Pro testování jsem si připravil 2scénáře: 1) Založte novou hru, se jménem „Test hra“ pro 4 hráče. 2) K dříve vytvořené hře se připojte a zahrajte si. 3.3. PRŮBĚH TESTŮ Úkol 1: Oba participanti neměli s úkolem větší problémy. Jediné v čem participant č. 1. znejistil, bylo zvolení rychlosti hry. Úkol 2: V druhém úkolu participanti narazili na problém, jak poznat, že byla kalibrace úspěšná. Jelikož aplikace žádným způsobem nenaznačuje, že by úspěšná kalibrace měla být indikována navazujícími čárami mezi zařízeními. 3.4. ZHODNOCENÍ TESTŮ - ŘEŠENÍ Během testování se objevili 2 problémy. Nedostatečně vysvětlená položka rychlost hry, tento problém by se dal vyřešit například nastavením počáteční hodnoty na „100“ a za políčko přidat „%“. Nebo přidat tlačítko „?“ vedle popisku, které ukáže podrobnější popis problému. Druhým problémem je zpětná vazba po pokusu o skalibrování. Zde by měli být uživatelé upozorněni jak takové správné kalibrování poznat. 4. ZÁVĚR Papírový prototyp nám ukázal, jak v hrubých rysech může vypadat výsledná aplikace. Testování prototypu odhalilo několik problémů, které bychom bez něj pravděpodobně mnohem obtížněji hledali. Těmto chybám se teď při dalším vývoji můžeme naštěstí vyhnout.
5. POUŽITÉ ZDROJE [1] - Android Developers, Desing guidelines http://developer.android.com/design/index.html
6
