D2 - GUI design Radek Mečiar 28.3.2014 1 Úvod Zvolená platforma: Android Verze: 4.x Nástroj pro kreslení: Pencil Platformu a verzi jsem zvolil, protože je v současnosti nejpoužívanější. Informace o standardu jsou dostupné na tomto odkazu https://developer.android.com/design/index.html. Také protože jsem vlastník tabletu se systémem Android verze 4 a programovací principy by měly být podobné jako v jazyku Java. Zajímavé je určitě také prostředí Qt (http://www.qt.io), které podle všeho umí vytvořit aplikaci platformě nezávislou (po zkompilování na danou platformu). Podporované jsou jak mobilní platformy (Symbian, Android, Apple) tak i dektopové platformy (Linux, Windows, Apple) a mnohé další. Programovací jazyky se dají na takto vytvořené GUI napojit různé (Python, C++, atd.), ale protože s tím nemám žádné zkušenosti, tak raději voĺım Android SDK + Andoid Studio. 2 Úvodní obrazovka Aplikace bude volně dostupná ke stažení pro kohokoliv z Google Play. Všichni ale nejsou zákazníky firmy Bisnode, tedy je úvodní obrazovka opatřena nápovědou. Obsah informací v nápovědě by se měl skládat z odkazu na firmu Bisnode a také o tom co aplikace umožňuje, pro případné nalákání nových zákazníků. Úvodní obrazovka požaduje přihlášení do aplikace v podobě klasického formuláře. Je zde možnost zapamatovat si heslo či nikoliv. Heslo by se pak ukládalo v šifrované podobě nebo by se využila správa účtů v systému Android. Správu a registraci uživatelů zajišťuje webový portál a tato aplikace pracuje pouze s již známými zákazníky, tedy registraci zde není možné nabídnout. 3 Zobrazení změn Hlavní těžiště návrhu této aplikace, je filtr pro volbu zobrazení změn a způsob zobrazení změn. 3.1 Návrh filtru Filtr by měl umožnit výběr jako ukazuje obrázek 2a. Je potřeba zvolit časový úsek, pro který zobrazuje aplikace změny, dále pak typ změn a to jak jednotlivé (firmy s execucí, insolvencí atd.), tak podle skupin (pozitivní změny, negativní atd.). Filtr z obrázku 2a by byl velice nepraktický. Další verze filtru je vidět na obrázku 2b. Po zmáčknutí tlačítka/ikonky by se zobrazilo dialogové okno, která umožní vyplnění filtru podle požadavku. Tento filtr šetří místo, ale vyžaduje kliknutí navíc, což je celkem přijatelné. Poslední návrh filtru je vidět na obrázku 2c. Je složen z tří stavových tlačítek, kde první označené jako D umožňuje přepínat zobrazovaný časový úsek, druhé označené jako T pak přepíná jednotlivé skupiny (negativní změny, pozitivní, atd.) a poslední C by umožňovalo přepínání mezi jednotlivými druhy změn (insolvence, score, atd.). Při každém přepnutí by se změnilo tlačítko podle toho co je na něm aktuálně navolené. Například nastavení časového úseku by bylo pro jeden den označeno 1, dále by mělo stav 3 dny, týden (T) a měsíc (M). Podobně nastavení typu změn by podle webového portálu mělo pro pozitivní změny zelené +, pro negativní červené -, pro neutrální fialové N a pro všechny typy 1
(a) Login page (b) About dialog Obrázek 1: Login page 2
(a) Filtr - první návrh (b) Filter - druhý návrh (c) Filter - třetí návrh Obrázek 2: Filtry například písmeno A. Věřím, že tento filtr by byl asi nejrychlejší pro již znalé uživatele, ale ti co vidí aplikaci poprvé by asi chvíli nevěděli k čemu co slouží. 3.2 Zobrazení položek Zobrazení jednotlivých změn by bylo ideální v tabulkové podobě. Umožnilo by jednoduchou volbu řazení a dalšího co tabulka umožňuje. Problém ale je posouvání se jak vertikálně, tak horizontálně. Na malém mobilním zařízení se uživatel lehce ztratí. Možná tabulkové zobrazení bude vhodné pro tablety. Proto jsem zvolil formu zobrazení v jednotlivých boxech (viz. obrázek 2c), kde každý box bude mít podbarvení podle druhu změny. Informace obsažená v jednom záznamu o změně se skládá ze staré a nové hodnoty, jaký druh hodnoty se změnil a koho se tato změna týká. Proto je také vhodné, každý box opatřit ikonkami podle webového portálu (firma/osoba, změna insolvence, exekuce, atd., pozitivní/negativní/neutrální) (zde nejsou zobrazeny nemám je). Dále pak je dole na obrazovce umístěno tlačítko přibĺıžit a oddálit. Uživatelé mají různé mobilní telefony a vidí různě dobře a tato funkce by měla umožnit zmenšit či zvětšit font a s tím také množství zobrazených informací. Poslední zobrazovací mód by právě měl být tabulka. Toto by šlo zajistit také zoom gestem, ale domnívám se, že by většina uživatelů na něco takového přišla jen náhodou. Mysĺım, že by bylo ideální zobrazit po kliknutí na položku aktuální stav firmy, případně historii dané firmy. V požadavcích to ale není a nevím jak moc budu mít možnost to ovlivnit (ze změn se celý stav neposkládá a jestli mi přes API omezí přístup pouze na změny, tak tuto informaci nezískám). 4 Nastavení Aplikace by také obsahovala jednoduchou formu nastavení (obrázek 3), která slouží zároveň i jako nápověda k možnostem. Do aplikace bych implementoval variantu 1 filtru z obrázku 2b a 2c a dal uživateli možnost si vybrat. Obdobně s možností zvětšování a zmenšování zobrazeného obsahu. 1 Obdobnou volbu používá Google Chrome s experimentálním menu. 3
Obrázek 3: Settings 5 Widget a systémové upozornění Aplikace určitě nemůže upozorňovat na každou změnu zvlášť, někteří uživatelé sledují mnoho firem a to by telefon zahltilo. Systémové upozornění na změny se tedy určitě musí seskupovat. Také by mohlo být užitečné přidání jednoduchého widgetu. Ten by měl za úkol zobrazit ještě nezobrazené (nové) změny v jednoduché číselné a barevné podobně asi jako ukazuje obrázek 4. Obrázek 4: Widget 6 Uživatelský test Konkrétního uživatele webového portálu neznám, tedy jsem nemohl cílovou skupinu požádat o test aplikace. Test aplikace jsem alepoň vyzkoušel s ekonomicky zaměřeným člověkem (ženou). Test spočíval 4
v přihlášení se do aplikace a přenastavení filtru. Z výsledku bylo patrné, že můj stavový filtr (2c) je složitější na pochopení a tedy jako počáteční volbu filtru ponechám přes tlačítko a dialog z obrázku 2b. Obdobně dopadla možnost volby velikosti zobrazení (na gesta by jen tak nikdo nepřišel, ikonky jsou patrné). 7 Závěr Zjistil jsem, že aplikace Pencil je relativně dobrý nástroj pro vytváření GUI na různé platformy a je pod GPL2 licencí. Umožňuje i vytvořit jednoduché proklikávací menu například za účelem testu. Pro takto jednoduchou aplikaci jako je Monitoring se hodí možná i jiný druh implementace (jako například do chytrých hodinek, či Google Glass), ale protože s tím nemám už vůbec žádné zkušenosti (a ani je nevlastním), tak to zmiňuji jen v závěru. Jinak je aplikace podle požadavků velice jednoduchá a nejspíš záleží pouze na tom co je zajímavé pro stávající uživatele webového portálu. 8 Reference Pencil Program pro jednoduchý návrh gui: http://pencil.evolus.vn Android guide lines Odkaz: https://developer.android.com/design/index.html 5