Semestrální práce - D4. NUR - Návrh uživatelského rozhraní. Aplikace pro seniory a začátečníky

Semestrální práce - D4 NUR - Návrh uživatelského rozhraní Aplikace pro seniory a začátečníky

Vypracovali

Cvičící

Rubeš Petr ([email protected])

Ing. Ivo Malý, Ph.D.

Slováček Simon ([email protected]) Voda Miroslav ([email protected])

Obsah 1. Prototyp 1.1 Krátký popis aplikace 1.2 Diagram 1.3 Popis technologií 1.4 Implementační problémy 2. Testování 2.1 Cíle testování 2.2 Scénář testování 2.3 Průběh testování 2.3.1 Respondent 1 2.3.2 Respondent 2 2.4 Závěr testování 3. Závěr Příloha A - popis aplikace

1. Prototyp 1.1 Krátký popis aplikace Aplikace je určena pro uživatele, kteří nemají velké nebo dokonce žádné zkušenosti s používáním dotykových zařízeních (dále jen tabletů). Aplikace má za cíl uživatelům zprostředkovávat informace, které jsou v běžném životě zjišťovány každý den. Cílovými skupinami tedy jsou začátečníci, kde většina uživatelů jsou převážně senioři, kteří často mívají oční vady, problémy s jemnou motorikou, horší pamětí a orientací. Aplikace poskytuje uživateli aktuální zprávy z internetu a také předpověď počasí. Dále umožňuje spravovat poznámky uživatele v kalendáři. Tyto osobní data jsou navíc nahrávána a zálohována na server. Popis jednotlivých funkcí včetně screenshotů viz. příloha A.

1.2 Diagram Následující diagram zobrazuje všechny vizuální stavy aplikace (obrazovky). Program je rozdělen do tří částí. První částí je kalendář. V této části je možné zobrazit kalendář, události uložené v kalendáři nebo přidat novou událost. Druhou častí programu jsou zprávy z internetu. V této části lze zobrazit všechny načtené zprávy nebo zobrazit zprávy dle určitého zdroje či určité kategorie. Poslední částí je počasí. V této části lze zobrazit aktuální počasí, hodinovou předpověď (krátkodobá předpověď, údaje s odstupem jedné hodiny) či denní předpověď (dlouhodobá předpověď s údaji po dnech). Tlačítko zpět ve většině případů vrací na předchozí obrazovku od aktuální obrazovky. V případě Přidat událost - krok 3 ze 3 odkazuje tlačítko zpět na obrazovku Kalendář menu. Důvodem je, že třetí krok přidání události uživatele pouze informuje, že událost již byla přidána. Ukázka jednotlivých oken viz. příloha A.

1.3 Popis technologií Použili jsme architekturu client-server, kdy na serveru se připravují data (zprávy) a ty se následně stahují do aplikace. Aplikace komunikuje se serverem pomocí REST API. Data se pak cachují do zařízení, ve kterém je aplikace nainstalována, což umožňuje prohlížení dat i v offline režimu. Serverová část - OpenStack: ● OS : Turnkey Tomcat ● Služby: Apache 2, MySQL 5, Tomcat 6 ● Použité knihovny: ❏ Hibernate(ORM) ❏ JavaX ❏ Jersey

Klientská část: ● Android 4.0.3+ ● Doporučená velikost displaye > 9” ● REST API - komunikace se serverem ● SQLite Cache

● Použité knihovny: ❏ AsyncHttpClient ❏ Standardní Android a Java knihovny

1.4 Implementační problémy 1. Načítání zpráv ze serveru - občas dochází k chybě při načítání zpráv ze serveru. Kontrolovali jsme výpisy akcí na straně serveru a data normálně odešla. Důvod závady se nám nepodařilo odhalit. Je možné, že závada byla způsobena samotným zařízením, jelikož ve virtuálním prostředí na počítači aplikace fungovala správně. 2. Rozlišení displaye - Testovali jsme na zařízení s displayem o uhlopříčce 9.7” a rozlišením 1024x768. Ovšem pokud je jiné zařízení o podobné úhlopříčce ale s větším rozlišením zobrazí menší tlačítka. Doporučujeme vytvoření různých verzí aplikace v závislosti na daném zařízení, kde se aplikace spouští. 3. Kalendář - pro kalendář jsme využili standardní android kalendář. Ten ovšem na různých zařízení a verzí androidů vypadá jinak a má jiné ovládání a velikost. Pro další vývoj aplikace navrhujeme se zamyslet, zda implementovat vlastní kalendář, či upřesnit cílová prostředí a zařízení, na kterých bude aplikace fungovat se zamýšleným účelem (tedy být snadno ovladatelná a mít dostatečně velké ikony a texty).

2. Testování 2.1 Cíle testování Cílem každého testování během vývoje by mělo být zdokonalení aplikace. Proto je důležité směřovat scénáře na situace, které si myslíme, že by mohly být problémové, či na situace, které se budou často využívat. Výstup z testování je tedy eliminace chyb a následná změna některých funkcí ku prospěchu cílových uživatelů. Proto jsme testování zaměřili na následující oblasti: ●

Intuitivní ovládání - scénáře cíleně nevedli uživatele krok za krokem, neboť aplikace má být intuitivní vzhledem k cílové skupině uživatelů, která nemá velké zkušenosti s elektronickými zařízeními

●

orientace v aplikaci - přechody mezi jednotlivými okny mohou být zavádějí a uživatel se může lehce ztratit. Proto v testovacích scénářích se některé úkoly podobají, či se opakují, aby se zjistilo, zda se uživatel po chvíli ovládání aplikace je schopen se orientovat mezi jednotlivými okny, či je navigace mezi okny matoucí

●

zpětná vazba aplikace - při provádění akce musí být jasné, že uživatel provedl akci, kterou měl v úmyslu vyvolat. Tento problém je vyřešen tím, že jakmile se uživatel dotkne nějaké komponenty v aplikaci, komponenta změní barvu a uživatel aktuální ví “na co ukazuje”

●

složité ovládání - vzhledem k tomu, že cílová skupina nemá příliš velké zkušenosti s ovládáním aplikací, je scrollování na stránkách zastoupeno šipkami “NAHORU”, “DOLŮ”, které posouvají jednotlivé seznamy a stránky dat

2.2 Scénář testování

1. zobrazit všechny události v kalendáři 2. přidat událost 3. zobrazit všechny zprávy 4. zobrazit zprávu s datem 11.12.2013 14:01:24 5. zobrazit zprávy ze zdroje idnes.cz 6. zobrazit zprávu s datem 11.12.2013 14:01:09 ze zdroje idnes.cz 7. zobrazit zprávy z kategorie domácí 8. zobrazit zprávu s datem 11.12.2013.14:01:37 z kategorie domaci 9. zobrazit aktuální počasí 10. zobrazit hodinovou předpověď počasí a projít až na poslední položku 11. zobrazit denní předpověď počasí a projít až na poslední položku 12. přidat událost 13. zobrazit událost z bodu 12 v kalendáři 14. zobrazit všechny události 15. zobrazit zprávu s datem 11.12.2013 14:01:28 16. zobrazit hodinovou předpověď počasí 17. vrátit se do Hlavní nabídky

2.3 Průběh testování Prototyp aplikace jsme testovali na 2 subjektech, kteří byli vybráni s ohledem na cílové skupiny. Jeden z testovacích uživatelů neměl zkušenosti s elektronickými zařízeními podobného typu (tablet) a druhý již nějaké základní zkušenosti měl. Před zahájením samotného testování, byla uživatelům představena aplikace. Představení mělo cíl ukázat uživateli možnosti aplikace a základy v jejím ovládání. Toto představení mělo sloužit stejně, jako slouží uživatelské návody aplikací. Z našeho týmu provedl testy náš testovací manager Petr Rubeš, který byl přítomen po celou dobu testu a monitoroval chování, váhání a problémy testujících uživatelů.

2.3.1 Respondent 1 Muž, 61 let, základní zkušenosti s tabletem Tento uživatel měl již nějaké zkušenosti s dotykovými zařízeními. Provedení úkolů proběhlo bez jakéhokoliv zaváhání. Při testování byl nedostatečný signál Wi-Fi sítě a proto stahování některých informací (např. zprávy) trvalo místy i několik sekund. Jednotlivé screenshoty z testování v časové souslednosti viz přiložený soubor (respondent 1)

2.3.2 Respondent 2 Žena, 59 let, bez zkušeností s tabletem Test proběhl hned po respondentovi 1. Vzhledem k problémům s připojením, bylo rozhodnuto, že aplikace se spustí v offline módu a poběží na datech stažených při prvním testu. Při testování byla znatelná nízká úroveň znalosti práce s dotykovým zařízením. Po projití popisu aplikace, byla uživatelka schopna úkoly splnit bez větších obtíží. Jednotlivé screenshoty z testování v časové souslednosti viz přiložený soubor (respondent 2)

2.4 Závěr testování U testovacích uživatelů bylo znatelné, že nemají velké zkušenosti s dotykovými zařízeními, ale na konci testování, po několika “opakujících” se scénářích se uživatelé v prototypu aplikace orientovali. V orientaci a ovládání aplikace tedy nebyly nalezeny žádné nesrovnalosti. Ve funkčnosti aplikace se vyskytl problém s komunikací se serverem. Tento problém by mohl být částečně odstraněn, například nenahráváním uživatelových dat na server při špatné síti. Tím by se docílilo uvolnění komunikačního kanálu, který by jen stahoval zprávy.

3. Závěr Dle našeho názoru by náš prototyp aplikace mohl jít k uživatelům jako první beta verze, na které by se prováděli následné úpravy. Také odezva od cílových uživatelů, kteří by aplikaci již naplno využívali, by nám jistě pomohla v dalším zdokonalování.

Příloha A - popis aplikace

Tato kapitola obsahuje obrázky obrazovek s popisem jejich funkce. Obr. 1 - Hlavní menu ● obsahuje 3 položky, každá odkazuje do sekce dle popisu tlačítka

Obr. 2 - Kalendář menu ● Zobrazit kalendář odkazuje na obrazovku s kalendářem (Obr. 3) ● Zobrazit události zobrazí veškeré události uložené v kalendáři (Obr. 4) ● Tlačítko Přidat událost odkazuje na první krok vložení nové události(Obr. 6)

Obr. 3 - Kalendář ● stiskem konkretní položky kalendáře se zobrazí události pro vybraný den ● Tlačítka DOLŮ a NAHORU slouží pro posuv textu, tato tlačítka jsou pouze na obrazovkách, kde je nutné posouvat obsah.

Obr. 4 - Přehled všech událostí ● Tlačítkem Odstranit je možné mazat jednotlivé položky událostí

Obr. 5 - Upozornění při pokusu o smazání události ● Při pokusu o smazání události je uživatel dotázán, zda chce tuto operaci skutečně provést.

Obr. 6 - První krok přidání nové události ● Prvním krokem je zadání nové události ● Po vyplnění názvu je nutné stisknout tlačítko v levém dolním rohu, čímž dojde ke schování klávesnice

Obr. 7 - První krok přidání nové události - příklad

Obr. 8 - První krok přidání nové události - dokončení ● Tlačítkem Pokračovat se přejde ke druhému kroku vytvoření nové události(Obr. 9)

Obr. 9 - Druhý krok přidání nové události ● Druhým krokem je výběr data a času pro vytvoření nové události ● Tlačítkem Pokračovat se přejde ke třetímu kroku vytvoření nové události(Obr. 10)

Obr. 10 - Třetí krok přidání ● Tento krok pouze zobrazuje informaci o tom, jak proběhlo přidání nové údálosti ● Tlačítkem Pokračovat se přejde do obrazovky Přehled událostí(Obr. 4,Obr. 11)

Obr. 11 - Přehled všech událostí - s nově přidanou událostí

Obr. 12 - Zpravodajství menu ● Tlačítko Všechny zprávy odkazuje na obrazovku s výpisem všech zpráv(to znamená bez filtrování zdrojů či kategorií zpráv) (Obr. 13) ● Tlačítko Zprávy dle zdroje odkazuje na obrazovku s nabídkou zdrojů zpráv(zdrojem jsou například portály Novinky nebo iDnes) (Obr. 14) ● Tlačítko Zprávy dle kategorie odkazuje na obrazovku s nabídkou kategorií zpráv(napr. Domací, Zahraniční atd.) (Obr. 15)

Obr. 13 - Výpis všech zpráv ● Pro testovací účely všechna tlačítka odkazují na stejný text

Obr. 14 - Výběr zdroje zpráv ● Výběrem zdroje se zobrazí pouze položky zpráv z tohoto zdroje

Obr. 15 - Výběr kategorie zpráv ● Výběrem kategorie se zobrazí pouze položky zpráv z dané kategorie

Obr. 16 - Počasí menu ● Tlačítko Aktuální předpověď odkazuje na obrazovku s aktuálními hodnotami o počasí(Obr. 17) ● Hodinová předpověd obsahuje informace o počasí pro jeden den po hodinách(Obr. 18) ● Denní předpověd obsahuje informace o počasí pro více dní po dnech(Obr. 19)

Obr. 17 - Počasí - Aktuální předpověď

Obr. 18 - Počasí - Hodinová předpověď

Obr. 19 - Počasí - Denní předpověď