Semestrální projekt
Téma:
Návrh mobilní aplikace Lunch Break
ČVUT -FEL Y39PDA - Principy tvorby mobilních aplikací
Vypracoval : Ondřej Psota psotaond
1. Úvod V rámci tohoto dokumentu detailněji popíši princip návrhu vybrané mobilní aplikace. Ten vychází hlavně z toho, že aplikace bude ovládána převážně za pohybu, někde mimo domov, kdy uživatel nebude mít k dispozici například počítač.
2. Popis projektu 2.1 Lunch break Program bude sloužit jako vyhledávač stravovacích zařízení. Uživateli se na displeji v závislosti na jeho poloze zobrazí aktuální nabídka hotových jídel, či jiného speciálního menu platného pro daný den. Půjde o nabídku různorodých snídaní, hotových jídel včetně polévek v době oběda. Dále se může jednat o různé svačiny či večeře. Svačiny patří do speciální kategorie, protože mohou být nabízeny po celý den kromě rána, kdy jsou nabízeny pouze snídaně. Uživatel si bude moci zvolit, do jaké vzdálenosti aplikace stravovací zařízení vyhledá a do jaké cenové kategorie by měla nabídka spadat. Dále si bude moci vybrat z určitého druhu jídel, a to například: masové pokrmy ;bezmasé jídlo; těstoviny; omáčky; pizzy; sladké, atd (platí jen pro obědy a večeře). Zde musím zdůraznit, že se nejedná o aplikaci, která by uživateli umožňovala prohlédnout si kompletní nabídku určité restaurace. Jedná se převážně o hotová jídla, snídaně, svačiny a ne minutky. Každé nově vytvořené kritérium může být uloženo a poté následně použito pro rychlejší vyhledávání. Jednotlivé nabídky mohou být v závislosti na nastavení řazeny dle ceny, názvu či vzdálenosti podniku, a následně zobrazovány uživateli včetně informace do kolika hodin nabídka platí. Ve skutečnosti se nejprve objeví výpis jídel seřazený pod sebou se základními údaji. Po následném kliknutí na určitou položku se zobrazí detailnější popis jídla s možností přejít na popis podniku. Program automaticky rozpozná kolik je hodin a přizpůsobí tomu své vyhledávání. Nalezne pouze ty nabídky, které podnik aktuálně nabízí. (podle uživatelského nastavení, buď se svačinami a nebo bez svačin). V okamžiku, kdy si uživatel nechá zobrazit mapu, zobrazí se mu konkrétní zařízení na mapě v podobě značky. Pokud si neuloží vybraný podnik do oblíbených, bude značka automaticky smazána a příště se již nezobrazí. Uživatel si kdykoliv může otevřít mapu a kliknout na značku. Následně se objeví vybraný podnik. Z této položky je možné přejít na krátký popis podniku a zobrazit si fotografie z interiéru, popřípadě si uživatel může vložit podnik do oblíbených. K dispozici je také zobrazení širší nabídky jídel a pití stravovacího zařízení. Aplikace se co nejvíce snaží ušetřit uživateli, jak jeho čas, tak i jeho prostředky. Proto se v programu nachází možnost přidávání předdefinovaných míst, na kterých se uživatel často vyskytuje. Například domov, práce. Ty se následně uplatní při vyhledávání, pokud není GPS k dispozici a nebo je vybráno zadávání aktuální pozice pomocí adresy. Údaje o zařízení a aktuální nabídce budou pomocí webového rozhraní vkládat zaměstnanci restaurace. K dispozici jim bude jednoduchý formulář.
3. Popis problému 3.1 Uživatelé Aplikace bude vytvořena především pro lidi v produktivním věku, kteří mobilní telefon nosí stále s sebou, a kteří přístroj nevyužívají pouze na hovory a na posílání textových zpráv. Využívání různých programů, které jsou v mobilu nainstalované, by mělo být pro koncové uživatele samozřejmostí. Aplikace je především vhodná pro lidi, kteří nepracují stále na jednom místě, ale pohybují se někde venku. Takoví lidé často nemají dokonalý přehled o okolních kavárnách či restauracích, kde by si mohli dát snídani nebo dobrý oběd za rozumnou cenu.
3.2 Aktivity Na následujících několika řádcích jsou popsány všechny aktivity, které jsou zapotřebí k dosažení požadovaného cíle :
Uživatel si nejprve zvolí, zda si přeje vstoupit do základního nastavení, nebo si přeje procházet existující mapu podniků, či požaduje vyhledání oblíbených podniků. Popřípadě si může zobrazit v přehledném seznamu oblíbené podniky. V neposlední řadě může hledat nabídky podle nových a nebo uložených kritérií.
V tuto chvíli je na uživateli, zda vybere konkrétní kritérium pro vyhledávání a jaký zvolí způsob řazení nalezených výsledků
Tento krok je tu v případě, pokud není k dispozici technologie GPS. Aplikace se v těchto místech uživatele zeptá na aktuální adresu, kde se právě nachází.
V dalším kroku je možné prohlédnout si nalezenou nabídku
Po kliknutí na vybraný pokrm se automaticky zobrazí detailní popis s možností zobrazení mapy, kde se vytvoří nová značka přesně na místě, kde se nachází daný podnik. Pokud uživatel přidá podnik do oblíbených, značka zde vydrží do té chvíle, než uživatel sám podnik smaže. Kdyby se tak nestalo, značka by se již při příštím spuštění neobjevila.
Každá značka zavede uživatele na aktuální popis vybraného podniku
Z aktuální sekce je možné dostat se na krátký popis podniku a prohlédnout si fotografie interiéru a přidat podnik do oblíbených. Možné je také nahlédnout do širší nabídky podniku.
3.3 Systémová podpora Aplikace bude vyvíjena pro systém Android, který je mezi uživateli čím dál tím více oblíben. Zatímco Symbian pomalu ztrácí, Android naopak své pozice upevňuje. Proto, aby aplikace v mobilním telefonu správně fungovala, je nutné (doporučené) mít mobil vybavený těmito technologiemi:
Wifi či jinou technologii pro přístup na internet - aplikace si stahuje potřebná data z internetu GPS - technologie není zcela vyžadována, ale ulehčí uživateli hledání blízkého podniku. V případě absence GPS je nutné zadávat pozici ve formě adresy. Co se týče velikosti displeje, měl by mít úhlopříčku okolo 10 cm a dostatečně jemné rozlišení. Důvodem je přehlednost zobrazovaných informací. Proto, aby se uživateli lépe a rychleji pracovalo s mapou, je dobré mít mobil vybavený dotykových displejem.
3.4 Kontext Aplikaci uživatel využije například v případech, kdy je na cestě do práce a rád by se někde nasnídal. Program je určen především do městského prostředí, které uživatel zcela nezná a rád by zašel do nejbližší restaurace na dobré jídlo za přijatelnou cenu bez ohledu na denní dobu (kromě noci).
4. Low fidelity prototyp 4.1 Popis prototypu 4.1.1 Základní informace o prototypu Prototyp aplikace byl vytvořen v programu Balsamiq Mockups. Výsledné mockupy jsou navzájem provázané pomocí linků, které odkazují na potřebný mockup. K tomuto textu je přiložen dokument ve formátu PDF s výsledným prototypem. Pomocí tohoto dokumentu si lze vyzkoušet, jak by daná aplikace měla fungovat. Všechna navigační tlačítka jsou funkční. Pouze tlačítko zpět nemusí vždy pracovat korektně, pokud bylo použito dvakrát za sebou. Ostatní prvky pouze znázorňují rozložení komponent na displeji a naznačují jejich funkcionalitu. Program Balsamiq Mockups byl vybrán z několika důvodů. V prvé řadě obsahuje spoustu komponent, které se dají při návrhu použít a to včetně komponent pro systém Android. Dále je možné jednotlivé mockupy mezi sebou provázat a výsledný výtvor vyexportovat do formátu PDF, který zachovává již vytvořené vazby.
4.1.2 Popis mockupů Na Obrázku 1 je vidět hlavní nabídka, která obsahuje několik ikonek: 1) Vyhledat dle zadaných kritérií - umožňuje vyhledat nabídky, podle uložených kritérií. 2) Vyhledat dle nového kritéria - umožňuje vyhledat nabídky, podle nově zvoleného kritéria.
3) Oblíbené podniky - seznam oblíbených podniků 4) Předdefinovaná místa - jedná se o místa, kde se uživatel často vyskytuje. Například domov, práce, atd. 5) Podniky v okolí - pomocí této ikonky je možné vyhledat všechny podniky v okolí bez ohledu na to, co nabízejí. 6) Základní nastavení Obrázek 2 ukazuje výpis definovaných kritérií, které je možné přidávat. mazat, upravovat. Samozřejmě je možné vyhledat nabídku jídel dle zvoleného kritéria. Pokud se na stránce bude nacházet více kritérií než se vejde na displej, tak bude možné pomocí pohybu prstu posunout seznam kritérií buď nahoru a nebo dolu.
Obrázek 1 - Hlavní menu
Obrázek 2 - Definovaná kritéria
Obrázek 3 - Volba kritérií
Obrázek 3 ukazuje, jaká kritéria je možné zvolit. Tyto obrazovky se budou měnit v závislosti na denní době. Ráno se objeví kritéria důležitá pro výběr snídaně. Přes den se již objeví kritéria, která umožní vybrat jídlo k obědu nebo naopak výbornou svačinu. ComboBoxy, které jsou na obrázku budou umožňovat výběr více položek najednou. Pro snadný výběr vzdálenosti podniku a ceny je použit jednoduchý posuvný slider. Nakonec si uživatel může vybrat, zda podle zadaných kritérií bude vyhledávat a nebo si nové kritérium uloží.
Obrázek 4 - Výpis jídel
Obrázek 5 - Detail jídla
Na Obrázku 4 uživatel uvidí výpis jídel, která odpovídají danému kritériu. Každá položka obsahuje název jídla, cenu a vzdálenost. Po kliknutí na tlačítko "Více" se uživatel dostane k detailnějšímu popisu jídla, který je vidět na Obrázku 5. Zde je možné vybraný podnik zobrazit na mapě, což znázorňuje Obrázek 6, a nebo kliknout na tlačítko "Prohlédnout podnik", které uživatele zavede do detailnějšího popisu podniku včetně obrázků. Což znázorňuje Obrázek 7.
Obrázek 6 - Mapa Obrázek 7 - Detail podniku
Uživatel si může vybraný podnik zobrazit na mapě a nebo si jej uložit do oblíbených. Tlačítko "Nabídka podniku" uživatele zavede do širší nabídky jídel a pití. Na Obrázku 8 jsou zobrazeny různé speciální nabídky pro daný den, které vybraný podnik nabízí. Uživatel se zde navíc dozví o cenách vybraných alkoholických a nealkoholických nápojů. Opět je zde možnost zobrazení na mapě.
Obrázek 8 - Nabídka podniku
Do výpisu oblíbených podniků ( Obrázek 9 ) se lze dostat z hlavního menu. Před samotným zobrazením výpisu se program uživatele zeptá, do jaké vzdálenosti má stravovací zařízení vyhledávat. Každý záznam je možné smazat. Tlačítko "Zobrazit", které se nachází u každého záznamu, uživatele zavede na popis zařízení, který je znázorněn již na Obrázku 7.
Obrázek 9 - Oblíbené podniky
Obrázek 10 - Předdefinovaná místa
V hlavním menu se nachází položka "Předdefinovaná místa", která uživatele zavede do sekce, která je zobrazena na obrázku 10. Zde si uživatel může zaznamenat místa, na kterých se často vyskytuje. Například práce, domov. Hlavním účelem je možnost vyhledávání blízkých podniků bez zapnuté GPS. Každou položku je opět možné upravit a nebo smazat.
Obrázek 11 - Podniky v okolí
Obrázek 12 - Volba vzdálenosti
Předposlední ikonka "Podniky v okolí", která se nachází v hlavním menu, uživatele zavede na obrazovku (Obrázek 12), kde si uživatel zvolí, v jak velkém okruhu mají být podniky vyhledány. Následně se objeví mapka ( viz. Obrázek 11), kde se zobrazí všechny podniky v daném okolí. Na každou značku na mapě je možné kliknout a přejít na detailní popis podniku (viz Obrázek7).
Obrázek 13 znázorňuje dialogové okno, které se objevuje, pokud chce uživatel nějakou položku smazat. Týká se to především oblíbených podniků, definovaných kritérií a předdefinovaných míst.
Obrázek 13 - Mazání položek
Následující obrazovka (Obrázek 14) ukazuje, jak se v programu editují a přidávají zadané údaje. Konkrétně předdefinovaná místa.
Obrázek 14 - Přidávání / editace
Obrázek 15 - Základní nastavení
Základní nastavení (Obrázek 15) obsahuje volbu detekce polohy a to buď pomocí GPS a nebo pomocí zadání adresy. Což může být vhodné pokud GPS spotřebovává hodně baterie a nebo se vyskytujeme na oblíbeném místě, které je zadáno v aplikaci.
4.2 Testování prototypu 4.2.1 Příprava testu a nastavení Prototyp byl vytvořen v programu Balsamiq Mockups z něhož byl následně vyexportován PDF dokument, který posloužil expertům pro následné vyhodnocení nedostatků vzhledu dané aplikace. Tento dokument jeden expert obdržel emailem. Jak již bylo zmíněno v textu výše, každá stránka dokumentu obsahuje právě jednu obrazovku aplikace, popřípadě různé varianty, které se v tomto kroku mohou vyskytovat. Stránky jsou mezi sebou provázány pomocí aktivních tlačítek. Všechna fungují korektně kromě tlačítka zpět, které nemusí vždy vrátit experta tam, odkud přišel. Ale to jen v případě, pokud se vrací o dvě a více obrazovek. Návrat o jednu obrazovku je bez problémů. Testování probíhalo pomocí Heuristické evaluace, která se hodí na testování grafické stránky aplikace, což je přesně případ tohoto prototypu. Oba experti vyhodnotili daný prototyp pomocí těchto Heuristik :
H1 - Vidí uživatel aktuální stav systému? Má dostatečnou odezvu? Je mu jasné, co bude systém dělat nadále? H2 - Jak se aplikace uživateli ovládá ? Musí použít obě ruce? Jaké prsty jsou nutné k ovládání?. Jak se aplikace ovládá například v rukavicích? -Dále se řeší otázka svobody uživatele. Je více způsobů, jak daného cíle dosáhnout? Existuje vůbec nějaký způsob, jak cíle dosáhnout ? H3 - Předchází aplikace různým chybám? Je v aplikaci jasné, co dělají tlačítka Cancel, Exit či Zpět ? Předchází aplikace akcím, které by uživatel vykonal nevědomky? Informuje systém o všech důležitých změnách? H4 - Je aplikace dobře navržená po estetické stránce? Nejsou nějaké funkce v aplikaci zbytečné? To samé platí pro tlačítka a jiné prvky (minimalizovaný dizajn). H5 - Dodržuje aplikace standardy? (vzhled tlačítek, popisků, atd) H6 - Je jednoznačný vztah mezi systémem a reálným světem? H 7- Nenutí aplikace uživatele, aby si musel některé informace pamatovat? H 8 - Má uživatel aplikaci stále pod kontrolou ? Oba experti obdrželi tyto doporučené "use-cases", kterých se však nemuseli držet :
1) Vyhledejte jídlo podle daného kritéria, nechte si zobrazit jeho detailní popis a následně si nechte zobrazit na mapě podnik, kde dané jídlo vaří. 2) Najděte nejbližší podnik a přidejte ho do oblíbených. 3) Nadefinujte si své vlastní kritérium. 4) Přidejte a následně editujte záznam v sekci oblíbená místa. 5) Upravte nastavení tak, aby se poloha nastavovala zadáním adresy.
4.2.2 Seznámení s experty Navržený prototyp otestovali celkem dva experti. Jednalo se o studenty předmětu PDA na ČVUT - FELu. Jedním ze dvou expertů jsem byl přímo já jako dizajner prototypu. Oba studujeme stejný obor Web a multimédia. Již máme určité zkušenosti s navrhováním desktopových aplikací a to především z předmětu Tvorba uživatelských rozhraní. Každý otestoval prototyp na svém notebooku, kde byl nainstalován systém Windows 7. Testování probíhalo v domácím prostředí a trvalo přibližně 30 minut.
4.2.3 Nalezené nedostatky
V definici kritéria ( Obrázek 3) není zcela jasné, zda je nutné kliknout na tlačítko uložit kritérium. Možná by bylo lepší zvolit jiný název tlačítka.
Pokud bude mít slider velký rozptyl čísel, nebude pro robustnějšího člověka snadné trefit přesně hodnotu, kterou si přeje nastavit.
Všechna kritéria se nevejdou na jednu stránku, což není problém. Ale problém spočívá v tom, že se samotný obsah posouvá popotažením prstu na displeji, což může například nechtěně posunout slider a nebo změnit jiné kritérium. Uživatel by musel trefit místo, kde se nic interaktivního nenachází, což přináší zbytečné komplikace.
Pokud není k dispozici GPS, je uživatel požádán o vyplnění adresy. Je zde , ale také možnost "předdefinovaná místa". Uživatel nemusí vědět, jak systém zareaguje, pokud žádné místo nevybere. Chtělo by to spíše nějaké rozhodnutí, zda chce uživatel vybrat místo z předdefinovaných míst a nebo zadat novou adresu.
Tlačítka ve výpisu jídel jsou situovaná hodně doprava, což vyhovuje spíše pravákovi. Levák by zde měl určité problémy s ovládáním.
Aplikace nijak nevaruje uživatele, že zapomněl vyplnit některé údaje. Například při vkládání nového místa. (Viz Obrázek 14).
Uživatel má až příliš často možnost zobrazit vybraný podnik na mapě. Například při výpisu širší nabídky podniku tato možnost již není nutná. (Viz Obrázek 8)
V aplikaci na některých místech chybí informace o tom, že se načítají nová data. Což nevadí, pokud vzdálený server pracuje rychle. V případě, že server reaguje pomalu, může mít uživatel pocit, že se aplikace zasekla.
Ve výpisech míst tlačítko "Zobrazit" přesně nevystihuje jeho funkci.
Tlačítko "Zpět" se nachází na všech místech v prototypu zbytečně. Zabírá tak místo na displeji. Toto tlačítko je určitě důležité, ale není využito fyzické tlačítko pod displejem, které by původní tlačítko mohlo nahradit.
V aplikaci chybí tlačítko pro návrat do hlavního menu aplikace. Opět by bylo vhodné využít tlačítko menu pod displejem.
4.2.4 Analýza a vyhodnocení výsledků Největší nedostatek aplikace spočívá v rozmístění některých tlačítek. Člověk, který aplikaci ovládá pravou rukou by měl ovládání o něco snadnější. Proto by bylo vhodné buď do základního nastavení přidat možnost, zda je dotyčný pravák a nebo levák a podle toho upravit rozmístění některých tlačítek. A nebo umístit co nejvíce tlačítek doprostřed. Aplikace dále dostatečně uživatele neinformuje o případných chybách, které mohou vzniknout. Zajisté je zapotřebí vytvořit nová dialogová okna, která budou uživatele informovat například o tom, že nevyplnil všechny požadované údaje a nebo, že systém čeká na odpověď serveru. Pokud
by ji nedostal, vyskočila by chybová hláška o nedostupném serveru. Některá tlačítka jsou v aplikaci zbytečná. Především se jedná o tlačítko "Zobrazit na mapě", které se v aplikaci vyskytuje zbytečně na hodně místech. Další poměrně závažný problém nastal v místech, kde si uživatel vybírá kritéria. Kritérií je zde poměrně hodně a nevejdou se na jednu obrazovku. Což je řešeno posouváním celého obsahu displeje buď nahoru a nebo dolu a to za použití prstu. Dotykem se také ovládají různé slidery a checkBoxy, což spolu může kolidovat a mohlo by dojít k nechtěným změnám. To se dá vyřešit například bočním sliderem a nebo rozdělením formuláře na 2 stránky, mezi kterými by se dalo přejít pomocí tlačítka. V místech, kde aplikace zjišťuje aktuální polohu a zároveň není k dispozici GPS, by se měl nacházet radio button, který by určoval, zda bude poloha vybrána z předdefinovaných míst a nebo bude zadána nová adresa. Dále bude zapotřebí lépe promyslet nápisy na jednotlivých tlačítkách, aby lépe vystihovaly jejich funkcionalitu . Fyzické tlačítko zpět, které je umístěno pod displejem nahradí v příštím prototypu tlačítko "Zpět", které bylo zakomponováno přímo do aplikace. Prototyp navíc postrádá tlačítko, které by uživatele vrátilo do hlavního menu aplikace, proto bych rád v příští verzi prototypu využil tlačítka menu pod displejem .Poslední doporučení se týká rozsahu hodnot jednotlivých sliderů. Každý uživatel má jiné požadavky na to, v jaké vzdálenosti by se měly dané podniky nacházet. Někdo má raději jemnější možnost výběru a menší rozsah a někdo naopak větší rozsah hodnot. Proto by bylo vhodné do základního nastavení umístit položku, která by uživateli umožňovala změnit rozsah hodnot na slideru, kterým se volí vzdálenost podniku.
