Semestrální práce do předmětu Principy tvorby mobilních aplikací

Transkript

1 Ondřej Šatera, zimní semestr 2011/2012 Semestrální práce do předmětu Principy tvorby mobilních aplikací D1: Project description Aplikace INFORMAČNÍ SERVIS Jednalo by se o aplikaci, která by uživateli poskytovala různé informace v závislosti na denní době, ročním období, věku a pohlaví uživatele (pokud by je poskytl) nebo dle údajů z různých senzorů ve smartphonu - pohyb, geolokace. Například: ráno by aplikace zobrazila informace o předpovědi počasí na daný den (geolokace) a přehled zpráv ze zahraničí, co se udály přes noc. Odpoledne by poskytovala spíše informace o kultuře a jiná "odlehčená" témata. Večer pak hlavní přehled zpráv z domova (geolokace pro konkrétnější výběr), předpověď počasí na další den nebo sportovní informace. D2: Problem description Users Cílovou skupinou uživatelů této aplikace budou lidé v jakémkoliv věku, kteří ale aktivně používají smartphone pro přístup k informacím. Budou to spíš lidé pracující v kanceláři než někde venku protože aplikace bude vyžadovat připojení k internetu a v kanceláří je např. Wi-Fi připojení pravděpodobnější. Zároveň půjde o lidi, žijící ve větších městech, kde jsou k dispozici informace o dopravě. IT znalosti nebudou nutné, aplikace by měla fungovat dostatečně intuitivně. Activities zjištění počasí pro aktuální den kontrola dopravní situace v daném městě, před odjezdem přečtení posledních zpráv (posledních 24 hodin) z oblastí, které mě zajímají (domácí, zahraniční, sport...) System support Aplikace podle času rozhodne, který obsah zobrazit. Interval mezi 7:00 a 11:00 bude chápat jako ráno a zobrazí počasí pro aktuální den, příp. i konkrétní město pokud budou údaje k dispozici. Zároveň si bude moct uživatel zobrazit problémy v dopravě v jeho městě (geolokace), pokud budou údaje k dispozici. Údaje se budou moct zpřesňovat pokud aplikace zjistí, že se smartphone pohybuje a zároveň jsou k dispozici přesnější informace ohledně dopravní situace.

2 Časový interval mezi 11:00 a 16:00 bude aplikace chápat jako odpoledne a zobrazí přehled zpráv za posledních 24 hodin z oblastí, které si uživatel předem zvolí v nastavení. Pokud ne, tak zobrazí zprávy z domova a sportu. V čase od 16:00 do 19:00 bude zobrazovat přehled dopravní situace v daném městě a předpověď počasí v noci a ráno. V ostatních časech bude zobrazovat pouze přehled zpráv. Ostatní informace budou samozřejmě dostupné taky, jen se nebudou zobrazovat ve widgetu aplikace. Aplikace bude vyvíjena pro smartphony běžící na operačním systému Android. S podporou tabletů se nepočítá. Context ráno lidi obvykle zajímá jaký v ten den bude počasí a jestli je nečekají problémy v dopravě cestou do práce cestou do práce by je mohly zajímat nečekané problémy v dopravě, které se objevily po ranní kontrole (push notifikace) odpoledne v polední pauze si rádi přečtou zprávy D3: Prototyp a hodnocení prototypu Provedení prototypu Prototyp jsem vytvořil jako interaktivní webovou stránku. Toto zpracování umožňuje otestovaní aplikace přímo na mobilním zařízení. Vývoj prototypu by se dal rozdělit do tří fází: 1. vytvoření jednotlivých screenshotů aplikace 2. provázání obrázků mezi sebou pomocí klikacích map. Každý obrázek má své aktivní oblasti, přes které se dá dostat do jiné části aplikace 3. nahrání stránek na internet, aby se dalo testovat z různých zařízení Jediný problém tohoto řešení je rozlišení. Pomalu každý smartphone používá jiné a není v mých časových možnostech vytvořit verzi pro každé rozlišení. Popis tvorby prototypu Domovská stránka Moje aplikace má tři různé widgety pro různá časová období. Přehled v pořadí: ráno (počasí), dopoledne (dopravní situace), odpoledne (zprávy).

3 Widgety by měly být snadné na ovládání, aby se nestávalo, že uživatel vyvolá jinou akci než zamýšlel. Proto jsem ovládací prvky udělal dostatečně velké. Widget počasí Zobrazuje aktuální teplotu a povětrnostní podmínky, zároveň poskytuje hrubý přehled počasí na další den. Aktivní oblastí je celá plocha widgetu. Widget doprava Zobrazuje aktuální dopravní situaci pomocí dvou identifikátorů semaforu a stupňů hustoty dopravy. Semafor Rozsah stupňů Co to znamená svítí zelená zelená barva textu doprava je plynulá svítí oranžová oranžová barva textu doprava je hůře průjezdná svítí červená červená barva textu doprava je zablokovaná Zároveň pod těmito identifikátory se zobrazují hlášení o dopravních nehodách a jiných komplikacích v dopravě. Widget zprávy Zobrazuje tři rychlé odkazy do přehledu zpráv. Uživatel bude mít možnost vybrat si, jaké oblasti chce zobrazovat. Výchozí zobrazení bude: domácí, zahraniční, sport. Aktivní oblastí je vždy celý sloupec, tzn. obrázek i textový popisek. Stavy po zanoření Do aplikace se dá přistoupit i přes ikonu v menu příp. zástupce na ploše. Uživateli se zobrazí hlavní menu, které obsahuje základní části aplikace počasí, doprava, zprávy. Počasí Po kliknutí na widget na domovské stránce, se uživateli zobrazí tento přehled počasí. Uvidí na něm aktuální stav počasí a předpověď počasí na další tři dny (bílá velká čísla) a noci (modrá menší čísla). Snažil jsem se udělat zobrazení maximálně přehledné, aby se uživatel ihned dozvěděl, co ho zajímá.

4 Doprava Po kliknutí na widget s dopravními informacemi se uživatel dostane na toto zobrazení. Jsou zde dvě modré lišty s šipkami. První část ukazuje stupně dopravy v ulicích v aktuálním městě (určí se díky geolokaci). Jsou seřazeny od nejbližší po nejvzdálenější, protože uživatele-řidiče nejspíš nebude zajímat situace na opačné straně města. Pokud ano, může si jednoduše zaskrolovat níž a podívat se. Druhá část, která se zobrazí po kliknutí na druhou lištu v pořadí, ukazuje přehled dopravních nehod a jiných komplikací na silnici. Záznamy jsou opět seřazeny stejně jako u první části, tzn. podle toho jak jsou vzdálené od uživatele.

5 Zprávy Zobrazení zpráv se liší podle cesty kudy uživatel přijde. Existují dvě možnosti přes widget nebo přímo přes ikonu aplikace v menu. Pokud uživatel přijde přes hlavní menu aplikace, zobrazí se mu přehled oblastí zpráv, které jsou k dispozici. Může si vybrat, která ho zajímá a kliknout na jméno oblasti. Pokud uživatel do sekce přijde přes widget, dostane se rovnou do přehledu zpráv z konkrétní oblasti. Může kliknout na titulek nebo úvodník a dostat se tak na detailní výpis zprávy. V detailu zprávy se zobrazí kompletní text a ilustrační obrázek, pokud je k dispozici.

6 Testování prototypu metodou heuristické evaluace Prostředí Prototyp aplikace byl nakonec testován na notebooku, protože tak bylo možné lepe simulovat práci s tlačítky telefonu, ačkoliv prototyp teoreticky umožňuje i testování přímo na mobilním zařízení. Test provedli Ondřej Šatera tvůrce protypu Filip Podstavec student FIT, ČVUT - obor Web a multimedia Zvolené scénáře 1. Zjištění komplikace v dopravě v konkrétní ulici a) Zadání Zjistit zda jsou v ulici Vysočanská nějaké dopravní komplikace. b) Očekávaný průběh 1. klikne přímo na widget na domovské stránce 2. rozevře si odpovídající roletku c) Skutečný průběh 1. vstoupil přes hlavní ikonu aplikace (nikoliv přes widget) 2. zvolil položku Dopravní informace 3. otevřel si roletku s názvem Komplikace na cestě d) Zhodnocení a návrh řešení Navrhl, aby obě roletky na přehledu dopravy byly sbalené, aby si uživatel mohl sám vybrat. e) Můj závěr z testu Widget by měl nějak více vybízet k akci, tzn. aby na něj uživatel klikl. Rozbalené roletka podle mě zkracuje cestu k hledaným informacím, proto bych ji nechal jak je. 2. Zobrazení zpráv z oblasti IT a) Zadání Zobrazit výpis zpráv z oblasti IT. b) Očekávaný průběh 1. klikne na ikonu aplikace 2. v seznamu zvolí Zprávy 3. v dalším seznamu zvolí IT zprávy c) Průběh 1. ve widgetu se IT zprávy nezobrazují proto přešel do hlavního menu aplikace, jako u předchozího scénáře 2. v seznamu zvolil postupně Zprávy a IT zprávy d) Zhodnocení a návrh řešení Ve widgetu chybí nějaké tlačítko pro přejití do seznamu všech sekcí zpráv. Jediná cesta tak vede skrz hlavní menu aplikace, což není moc rychlá cesta.

7 e) Můj závěr z testu Widget by se měl určitě upravit, tak aby měl uživatel rychlejší cestu k tomu, co ho momentálně zajímá. Náměty na změny do verze D4 změnit widget s dopravou tak, aby více vybízel k akci změnit widget se zprávami např. přidat tlačítko přejít na přehled všech oblastí D4 opravy a vylepšení prototypu, uživatelské testování Změny v prototypu Hlavní změnou bylo převedení prototypu na více interaktivní formu, aby bylo možné udělat uživatelské testování bez kompromisů. Jednotlivé obrazovky se teď skládají z vrstev a aktivní je vždy jen část. Zároveň je v něm implementováno i chování podle času, takže se výchozí obrazovka mění tak, jak by měla průběhu času. Toto chování lze ale obejít například pro potřeby testování. Prototyp vyžaduje ke svému běhu nainstalované PHP, proto jsem jej uvedl na mojí doméně: Ve widgetu, který zobrazuje informace z dopravy, byl upraven řádek s aktuální informací. Jeho barva byla změněna z nečitelné červené na bílou a font byl o něco zvětšen. Obrazovka s počasím byla rozšířena o tlačítko více >>, které vede na detailnější informace o počasí, viz dále.

8 Byla přidána úplně nová obrazovka s informacemi o počasí pro konkrétní města. Měla by se zde zobrazovat všechna krajská města s aktuální situací pro den a předpovědí na noc. Uživatelské testování Testování bylo provedeno na mém mobilním telefonu LG Optimus ONE, pro který je prototyp optimalizován. První dva testy byl provedeny v domácím prostředí, třetí v pomalu jedoucím autě. První z testů byl proveden za chůze, aby bylo otestováno, že aplikace se dá použít i pokud člověk není úplně v klidu. Druhý test byl proveden staticky tzn. bez pohybu. Třetí test, který byl nejnáročnější na provedení, byl proveden v jedoucím autě na málo frekventované silnici, aby byl otestován i třetí kontext, ve kterém by měla být aplikace používána. Telefon byl kvůli bezpečnosti připojen na handsfree. Scénáře 1. Zjistěte, jaké bude počasí dnes v Jihlavě 2. Zjistěte, zda jsou na ulici Vysočanská nějaké komplikace v dopravě 3. Zjistěte zprávy z domova (pozn. na domovské stránce je widget s počasím, nikoli se zprávami) 4. Zjistěte jaká bude teplota v noci pozítří 5. Zjistěte jak je hustý provoz na ulici 5.května Účastníci testování Filip Podstavec (21 let) student FIT ČVUT, slabší zkušenosti s mobilními zařízeními, nevlastní dotykový smartphone Martina Osobová (21 let) student sociální antropologie, vlastní dotykový smartphone

9 Luboš Žáček (33 let) podnikatel, shodou okolností vlastní smartphone LG Optimus ONE Průběh testu 1. Filip Podstavec i. test proběhl hladce, uživatel zvolil nejrychlejší cestu přes widget ii. test proběhl hladce, uživatel zvolil nejrychlejší cestu přes widget iii. test proběhl hladce, uživatel zvolil cestu přes ikonu aplikace na ploše iv. objevil se menší problém daný pravděpodobně nepozorností uživatel označil jako pozítří až třetí položku na obrazovce s počasím v. test proběhl hladce, uživatel zvolil nejrychlejší cestu přes widget 2. Martina Osobová i. chvílí váhá, nakonec volí cestu přes ikonu aplikace a její hlavní menu ii. test proběhl hladce, uživatelka zvolila nejrychlejší cestu přes widget iii. test proběhl hladce, uživatelka zvolila cestu přes ikonu aplikace na ploše iv. uživatelka zvolila cestu přes ikonu aplikace, pak váhá delší dobu, než vybere správnou teplotu v. test proběhl hladce, uživatelka zvolila nejrychlejší cestu přes widget 3. Luboš Žáček i. uživatel měl trochu problém trefit se na tlačítko více, které by mohlo být větší příp. líp ohraničené ii. test proběhl hladce, nebyl problém trefit požadované tlačítko iii. po kliknutí na widget zjistil, že tudy cesta nevede. Vrátil se zpět a použil ikonu na ploše. iv. test proběhl hladce, problémy se neobjevily v. test proběhl hladce, uživatel zvolil nejrychlejší cestu přes widget Shrnutí testu Test lze označit jako víceméně úspěšný. Uživatelé neměli problém splnit zadané scénáře a většinou neváhali s odpovědí. Pár problému se ukázalo při použití v autě, kdy byly některé ovládací prvky příliš malé. V další fázi vývoje by ale neměl být problém tyto vady odstranit. Při rozhovorech po testu se ukázalo, že není úplně jasné, kterého místa se týká předpověď počasí, situace v dopravě apod. Tyto nejasnosti by ale měl odstranit popis aplikace v Marketu (nebo AppStore), kde by bylo uvedeno, že aplikace se řídí geolokací. Doporučení do další fáze vývoje Následující doporučení jsou podloženy výsledky testů a měly by odstranit vzniklé problémy a nejasnosti. zvětšit tlačítko více >> u obrazovky s počasím u počasí označit, kterého dne se týká předpověď