Návrh vzhledu aplikace mobilního rozvrhu
Vzhled aplikace mobilního rozvrhu by se měl co nejvíce podobat již zavedenému webovému školnímu rozvrhu kvůli snadnému a intuitivnímu ovládání. Dále by měl zachovat ovládací prvky pro zobrazení rozvrhu, jako je například filtr pro výběr učitele, studenta nebo místnosti a kalendář k výběru data, ve kterém se má daný rozvrh zobrazit. S možnostmi mobilních technologií bude mít mobilní aplikace pro školní rozvrh rozšířenou funkcionalitu.
Návrh vzhledu aplikace a název
Název aplikace tohoto rozšíření informačního systému EPI, s.r.o. je „EPI rozvrh“. Dále již bude používán pouze tento název. Tento název byl vytvořen tak, aby byl snadno zapamatovatelný a bylo jej možné vyhledat pomocí následujících klíčových slov: EPI, rozvrh hodin, EPI rozvrh.
Návrh vzhledu a funkčního designu aplikace EPI rozvrh probíhal v následujících krocích:
- náčrt funkčního designu,
- tvorba grafických prvků a ikon v grafickém editoru,
- tvorba layoutu jednotlivých funkčních prvků.
Návrh funkčního vzhledu aplikace EPI rozvrh probíhal za použití mockup návrhu. Mockup je model zařízení, který se používá pro demonstraci. U aplikací se používá k demonstraci funkčních prvků, přechodů mezi obrazovkami a celkovému nastínění vzhledu v kombinaci s funkcionalitou aplikace. Je to hrubý návrh, který nezachycuje veškeré detaily, ale zachycuje pouze kostru, která se v průběhu vývoje aplikace často změní. Mockup slouží vývojáři aplikace pro vytvoření si určité představy o tom, jakým způsobem se bude aplikace dále vyvíjet.
EPI rozvrh se skládá z hlavního menu, kde jsou umístěny prozatím tři položky reprezentované ikonami s popiskem pro snazší orientaci. Prozatím proto, že se v průběhu vývoje aplikace může počet položek změnit. Tyto položky se nazývají rozvrh hodin, o aplikaci a nastavení, viz obrázek č. 9. Na obrazovce hlavního menu je také ActionBar, který neobsahuje žádné ovládací prvky, ale obsahuje pouze ikonu s logem a název.
Po kliknutí na položku rozvrh hodin se zobrazí rozvrh hodin v aktuálním týdnu pro přihlášeného uživatele. Na obrazovce bude tabulka s rozvrhem hodin, kde v prvním levém sloupci budou zkratky jednotlivých dnů a na prvním řádku budou čísla hodin s časem začátku a konce hodiny, viz obrázek č. 9. Pokud se na této obrazovce zmáčkne systémové tlačítko „Zpět“, EPI rozvrh přejde zpět do hlavního menu. Na následujících obrázcích bude vždy zeleně znázorněn postup aplikací, červeně bude znázorněn návrat zpět. Vyplněným kruhem stejné barvy bude znázorněno kliknutí.
Na obrazovce rozvrhu hodin je také ActionBar, který mimo loga obsahuje číslo právě zobrazovaného týdne a další ovládací prvky. Ovládací prvky jsou: další, předchozí a další ovládací prvky se skrývají pod rozbalovacím menu, jež reprezentují tři tečky v pravé části ActionBar. Ovládací prvek „Další“ zobrazí rozvrh hodin, který je právě zobrazovaný pro následující týden. Oproti tomu ovládací prvek „Předchozí“ zobrazí rozvrh hodin právě zobrazovaného rozvrhu hodin pro předcházející týden. Na obrázku č. 9 jsou tyto přechody mezi jednotlivými obrazovkami znázorněny.
Obrázek č. 1: Mockup návrh EPI rozvrh pro API 11 a větší.
Zdroj:Vlastní
V rozbalovacím menu se nachází ovládací prvky s názvy „Zadej datum“ a „Filtr“, viz obrázek č. 10. Tyto ovládací prvky slouží k ovlivnění obsahu rozvrhu hodin. Principielně dojde po kliknutí na některý z těchto ovládacích prvků k vyvolání dialogu pro upřesnění provedené změny.
Kliknutím na „Filtr“ dojde k vyvolání dialogu (obrázek č. 10 obrazovka č. 3), ve kterém jsou tři položky. Filtr slouží uživateli k výběru kritérií pro zobrazení rozvrhu hodin. První položka se nazývá „Volba“, kde si uživatel může vybrat ze tří položek: třída, učitel a místnost. Na základě zvolení jedné ze tří položek dojde k ovlivnění druhé a třetí položky. Tedy v položce „Seznam“ bude buď seznam učitelů, místností nebo studijních kruhů. Poté kliknutím na tlačítko „Zobraz rozvrh hodin“ obrazovka přejde zpět na rozvrh hodin (obrázek č. 10, obrazovka č. 1) a dojde k zobrazení rozvrhu na základě výběru. Poslední, tedy třetí, položka, nazývající se „Zadej ručně“, slouží k zadání zkratky učitele, místnosti či studijního kruhu, což ovlivňuje výběr položky s názvem „Volba“. Mezi druhou a třetí volbou si uživatel vybere pomocí RadioButton, nacházející se po pravé straně u druhé a třetí volby.
Obrázek č. 2: Mockup návrh EPI rozvrh v kombinaci s filtrem a zadej datum.
Zdroj:Vlastní
Teď zpět k obrazovce rozvrhu hodin a rozbalovacímu menu. Kline-li uživatel na „Zadej datum“, dojde k vyvolání dialogu s kalendářem (obrázek č. 10, obrazovka č. 2). Výběrem data v tomto kalendáři a kliknutím na tlačítko „Hotovo“ dojde k návratu k předchozí obrazovce, na které bude zobrazený rozvrh hodin pro zvolené datum. Předchozí výběr z filtru však zůstane zachován. To znamená, že jestliže vybere uživatel ve filtru učitele se zkratkou XX a následně vybere datum, pro který má být rozvrh zobrazen, bude zobrazen rozvrh hodin pro učitele se zkratkou XX ve vybraném datu.
Dojde-li ke zmáčknutí tlačítka „Zpět“ nebo kliknutí mimo dialog pro výběr data nebo filtru, zobrazí se předtím zobrazovaný rozvrh hodin beze změn.
Obrázek č. 3: Návrh nastavení EPI rozvrh pro API 11 a větší.
Zdroj: vlastní
Další položkou na hlavní obrazovce (obrázek č. 11, obrazovka č. 1) je nastavení. Klikne-li uživatel na tuto položku, aplikace přejde na obrazovku s číslem 2, kde se nachází nastavení aplikace, ve kterém lze nastavit celou řadu vlastností a dějů.
Lze zde nastavit, zda se má aplikace aktualizovat automaticky, anebo až po kliknutí na tlačítko „Aktualizovat“. Dále je zde položka pro nastavení četnosti aktualizací. To znamená, jak často se má aplikace aktualizovat, například denně, každý druhý den anebo každý týden.
Také jsou zde přihlašovací údaje do školního systému, avšak jsou viditelné pouze dvě položky a to přihlašovací jméno a kontext. Položka heslo není uživateli zobrazena, aby nedošlo k zneužití těchto údajů třetí osobou.
