D2 - GUI design Radek Meˇciar 28.3.2014
1
´ Uvod
Zvolen´a platforma: Android Verze: 4.x N´astroj pro kreslen´ı: Pencil Platformu a verzi jsem zvolil, protoˇze je v souˇcasnosti nejpouˇz´ıvanˇejˇs´ı. Informace o standardu jsou dostupn´e na tomto odkazu https://developer.android.com/design/index.html. Tak´e protoˇze jsem vlastn´ık tabletu se syst´emem Android verze 4 a programovac´ı principy by mˇely b´yt podobn´e jako v jazyku Java. Zaj´ımav´e je urˇcitˇe tak´e prostˇred´ı Qt (http://www.qt.io), kter´e podle vˇseho um´ı vytvoˇrit aplikaci platformˇe nez´avislou (po zkompilov´an´ı na danou platformu). Podporovan´e jsou jak mobiln´ı platformy (Symbian, Android, Apple) tak i dektopov´e platformy (Linux, Windows, Apple) a mnoh´e dalˇs´ı. Programovac´ı jazyky se daj´ı na takto vytvoˇren´e GUI napojit r˚ uzn´e (Python, C++, atd.), ale protoˇze s t´ım nem´am ˇz´adn´e zkuˇsenosti, tak radˇeji vol´ım Android SDK + Andoid Studio.
2
´ Uvodn´ ı obrazovka
Aplikace bude volnˇe dostupn´a ke staˇzen´ı pro kohokoliv z Google Play. Vˇsichni ale nejsou z´akazn´ıky firmy Bisnode, tedy je u ´vodn´ı obrazovka opatˇrena n´apovˇedou. Obsah informac´ı v n´apovˇedˇe by se mˇel skl´adat z odkazu na firmu Bisnode a tak´e o tom co aplikace umoˇzn ˇuje, pro pˇr´ıpadn´e nal´ak´an´ı nov´ych z´akazn´ık˚ u. ´ Uvodn´ ı obrazovka poˇzaduje pˇrihl´aˇsen´ı do aplikace v podobˇe klasick´eho formul´aˇre. Je zde moˇznost zapamatovat si heslo ˇci nikoliv. Heslo by se pak ukl´adalo v ˇsifrovan´e podobˇe nebo by se vyuˇzila spr´ava u ´ˇct˚ u v syst´emu Android. Spr´avu a registraci uˇzivatel˚ u zajiˇsˇtuje webov´y port´al a tato aplikace pracuje pouze s jiˇz zn´am´ymi z´akazn´ıky, tedy registraci zde nen´ı moˇzn´e nab´ıdnout.
3
Zobrazen´ı zmˇ en
Hlavn´ı tˇeˇziˇstˇe n´avrhu t´eto aplikace, je filtr pro volbu zobrazen´ı zmˇen a zp˚ usob zobrazen´ı zmˇen.
3.1
N´ avrh filtru
Filtr by mˇel umoˇznit v´ybˇer jako ukazuje obr´azek 2a. Je potˇreba zvolit ˇcasov´y u ´sek, pro kter´y zobrazuje aplikace zmˇeny, d´ale pak typ zmˇen a to jak jednotliv´e (firmy s execuc´ı, insolvenc´ı atd.), tak podle skupin (pozitivn´ı zmˇeny, negativn´ı atd.). Filtr z obr´azku 2a by byl velice nepraktick´y. Dalˇs´ı verze filtru je vidˇet na obr´azku 2b. Po zm´aˇcknut´ı tlaˇc´ıtka/ikonky by se zobrazilo dialogov´e okno, kter´a umoˇzn´ı vyplnˇen´ı filtru podle poˇzadavku. Tento filtr ˇsetˇr´ı m´ısto, ale vyˇzaduje kliknut´ı nav´ıc, coˇz je celkem pˇrijateln´e. Posledn´ı n´avrh filtru je vidˇet na obr´azku 2c. Je sloˇzen z tˇr´ı stavov´ych tlaˇc´ıtek, kde prvn´ı oznaˇcen´e jako D umoˇzn ˇuje pˇrep´ınat zobrazovan´y ˇcasov´y u ´sek, druh´e oznaˇcen´e jako T pak pˇrep´ın´a jednotliv´e skupiny (negativn´ı zmˇeny, pozitivn´ı, atd.) a posledn´ı C by umoˇzn ˇovalo pˇrep´ın´an´ı mezi jednotliv´ymi druhy zmˇen (insolvence, score, atd.). Pˇri kaˇzd´em pˇrepnut´ı by se zmˇenilo tlaˇc´ıtko podle toho co je na nˇem aktu´alnˇe navolen´e. Napˇr´ıklad nastaven´ı ˇcasov´eho u ´seku by bylo pro jeden den oznaˇceno 1, d´ale by mˇelo stav 3 dny, t´yden (T) a mˇes´ıc (M). Podobnˇe nastaven´ı typu zmˇen by podle webov´eho port´alu mˇelo pro pozitivn´ı zmˇeny zelen´e +, pro negativn´ı ˇcerven´e -, pro neutr´aln´ı fialov´e N a pro vˇsechny typy
1
(a) Login page
(b) About dialog
Obr´azek 1: Login page
2
(a) Filtr - prvn´ı n´ avrh
(b) Filter - druh´y n´ avrh
(c) Filter - tˇret´ı n´ avrh
Obr´azek 2: Filtry napˇr´ıklad p´ısmeno A. Vˇeˇr´ım, ˇze tento filtr by byl asi nejrychlejˇs´ı pro jiˇz znal´e uˇzivatele, ale ti co vid´ı aplikaci poprv´e by asi chv´ıli nevˇedˇeli k ˇcemu co slouˇz´ı.
3.2
Zobrazen´ı poloˇ zek
Zobrazen´ı jednotliv´ych zmˇen by bylo ide´aln´ı v tabulkov´e podobˇe. Umoˇznilo by jednoduchou volbu ˇrazen´ı a dalˇs´ıho co tabulka umoˇzn ˇuje. Probl´em ale je posouv´an´ı se jak vertik´alnˇe, tak horizont´alnˇe. Na mal´em mobiln´ım zaˇr´ızen´ı se uˇzivatel lehce ztrat´ı. Moˇzn´a tabulkov´e zobrazen´ı bude vhodn´e pro tablety. Proto jsem zvolil formu zobrazen´ı v jednotliv´ych boxech (viz. obr´azek 2c), kde kaˇzd´y box bude m´ıt podbarven´ı podle druhu zmˇeny. Informace obsaˇzen´a v jednom z´aznamu o zmˇenˇe se skl´ad´a ze star´e a nov´e hodnoty, jak´y druh hodnoty se zmˇenil a koho se tato zmˇena t´yk´a. Proto je tak´e vhodn´e, kaˇzd´y box opatˇrit ikonkami podle webov´eho port´alu (firma/osoba, zmˇena insolvence, exekuce, atd., pozitivn´ı/negativn´ı/neutr´aln´ı) (zde nejsou zobrazeny – nem´am je). D´ale pak je dole na obrazovce um´ıstˇeno tlaˇc´ıtko pˇribl´ıˇzit a odd´alit. Uˇzivatel´e maj´ı r˚ uzn´e mobiln´ı telefony a vid´ı r˚ uznˇe dobˇre a tato funkce by mˇela umoˇznit zmenˇsit ˇci zvˇetˇsit font a s t´ım tak´e mnoˇzstv´ı zobrazen´ych informac´ı. Posledn´ı zobrazovac´ı m´od by pr´avˇe mˇel b´yt tabulka. Toto by ˇslo zajistit tak´e zoom gestem, ale domn´ıv´am se, ˇze by vˇetˇsina uˇzivatel˚ u na nˇeco takov´eho pˇriˇsla jen n´ahodou. Mysl´ım, ˇze by bylo ide´aln´ı zobrazit po kliknut´ı na poloˇzku aktu´aln´ı stav firmy, pˇr´ıpadnˇe historii dan´e firmy. V poˇzadavc´ıch to ale nen´ı a nev´ım jak moc budu m´ıt moˇznost to ovlivnit (ze zmˇen se cel´y stav neposkl´ad´a a jestli mi pˇres API omez´ı pˇr´ıstup pouze na zmˇeny, tak tuto informaci nez´ısk´am).
4
Nastaven´ı
Aplikace by tak´e obsahovala jednoduchou formu nastaven´ı (obr´azek 3), kter´a slouˇz´ı z´aroveˇ n i jako n´apovˇeda k moˇznostem. Do aplikace bych implementoval variantu1 filtru z obr´azku 2b a 2c a dal uˇzivateli moˇznost si vybrat. Obdobnˇe s moˇznost´ı zvˇetˇsov´an´ı a zmenˇsov´an´ı zobrazen´eho obsahu. 1 Obdobnou
volbu pouˇz´ıv´ a Google Chrome s experiment´ aln´ım menu.
3
Obr´azek 3: Settings
5
Widget a syst´ emov´ e upozornˇ en´ı
Aplikace urˇcitˇe nem˚ uˇze upozorˇ novat na kaˇzdou zmˇenu zvl´aˇsˇt, nˇekteˇr´ı uˇzivatel´e sleduj´ı mnoho firem a to by telefon zahltilo. Syst´emov´e upozornˇen´ı na zmˇeny se tedy urˇcitˇe mus´ı seskupovat. Tak´e by mohlo b´yt uˇziteˇcn´e pˇrid´an´ı jednoduch´eho widgetu. Ten by mˇel za u ´kol zobrazit jeˇstˇe nezobrazen´e (nov´e) zmˇeny v jednoduch´e ˇc´ıseln´e a barevn´e podobnˇe asi jako ukazuje obr´azek 4.
Obr´azek 4: Widget
6
Uˇ zivatelsk´ y test
Konkr´etn´ıho uˇzivatele webov´eho port´alu nezn´am, tedy jsem nemohl c´ılovou skupinu poˇz´adat o test aplikace. Test aplikace jsem alepoˇ n vyzkouˇsel s ekonomicky zamˇeˇren´ym ˇclovˇekem (ˇzenou). Test spoˇc´ıval
4
v pˇrihl´aˇsen´ı se do aplikace a pˇrenastaven´ı filtru. Z v´ysledku bylo patrn´e, ˇze m˚ uj stavov´y filtr (2c) je sloˇzitˇejˇs´ı na pochopen´ı a tedy jako poˇc´ateˇcn´ı volbu filtru ponech´am pˇres tlaˇc´ıtko a dialog z obr´azku 2b. Obdobnˇe dopadla moˇznost volby velikosti zobrazen´ı (na gesta by jen tak nikdo nepˇriˇsel, ikonky jsou patrn´e).
7
Z´ avˇ er
Zjistil jsem, ˇze aplikace Pencil je relativnˇe dobr´y n´astroj pro vytv´aˇren´ı GUI na r˚ uzn´e platformy a je pod GPL2 licenc´ı. Umoˇzn ˇuje i vytvoˇrit jednoduch´e proklik´avac´ı menu napˇr´ıklad za u ´ˇcelem testu. Pro takto jednoduchou aplikaci jako je Monitoring se hod´ı moˇzn´a i jin´y druh implementace (jako napˇr´ıklad do chytr´ych hodinek, ˇci Google Glass), ale protoˇze s t´ım nem´am uˇz v˚ ubec ˇz´adn´e zkuˇsenosti (a ani je nevlastn´ım), tak to zmiˇ nuji jen v z´avˇeru. Jinak je aplikace podle poˇzadavk˚ u velice jednoduch´a a nejsp´ıˇs z´aleˇz´ı pouze na tom co je zaj´ımav´e pro st´avaj´ıc´ı uˇzivatele webov´eho port´alu.
8
Reference
Pencil Program pro jednoduch´y n´avrh gui: http://pencil.evolus.vn Android guide lines Odkaz: https://developer.android.com/design/index.html
5
