Semestrální práce [BIS-EXE] D2 Jan Nekvapil, Zdeněk Brabec

Transkript

1 Semestrální práce [BIS-EXE] D2 Jan Nekvapil, Zdeněk Brabec Analýza Android UI Guidelines - Material design Základní myšlenka Material designu platformy Andorid, podobně jako tomu je u ios 7 a výše od Applu, je dát uživateli co největší schopnost orientace v používané aplikaci. To znamená, aby uživatel ve kterékoliv části aplikace věděl jak se tam dostal a jak se dostane zpátky. Toho se docílí použitím vhodných přechodových animací a prvků uživatelského rozhraní. Animace V žádném případě se nesmí stát to, že se další stránka aplikace zjeví "od nikud". Google to nazývá jako tzv. Visual continuity a pro udržení uživatelské orientace v aplikaci je to klíčové. Například u naší aplikace může jít o to, že když se klikne na nový dotaz tak nová stránka s formulářem přijede zprava do leva. A když se klikne na křížek (nebo zpět) tak stránka musí zmizet opačným způsobem, tedy zleva do prava. Barvy Google vytvořil palety barev, což je vždycky jedna barva a jejích 10 odstínů. Dle guidelines je dobré si zvolit dvě barvy: 1. Hlavní 2. Přízvučnou barvu (Accent color) S tím, že u každé barvy je třeba z palety vybrat 3 odstíny. Hlavní barva je pak využívána především v action baru a jiných důležitých prvních. Přízvučná barva je pak důležitá pro kontrast viz obrázek, je kontrastní růžová použitá pro důležitý přepínač. V naší aplikaci bychom asi měli použít barvu zadavatele, tedy něco jako barvu Light Green.

2 Rozložení UI prvků (layout) O aplikaci v Material designu bychom měli přemýšlet jako by byla namalovaná na listech papíru, které se mohou různě přesouvat či ohýbat. Důležité jsou také stíny. Na obrázku jsou přes sebe položené dva listy papíru: na spodním, pro nějaký náš obsah, je položený Action bar. Jedna obrazovka aplikace je pak dělená na různé části: 1. Action bar (App bar) 2. Content area 3. Bottom bar 4. Right nav 5. Side nav Nejdůležitější jsou první dvě části. Ty ostatní jsou volitelné. Navigační panely přijedou odpovídající animací ze strany a vše překryjí.

3 Papírový prototyp Zdeněk Brabec Rozhodl jsem se nepoužít žádný ze softwarových nástrojů a použil papír, nůžky a fix. Takhle to dopadlo: Snažil jsem se dodržovat guidelines popsané výše, kdy všechny obrazovky mají fixní Action bar a nějaký content. Z obrázku je zřejmé, že jsem neřešil barvy ani odstíny. Navrhuji ale jako primární barvu použít Light Green z barevných palet Google. V papírovém prototypu jsou často předěly mezi jednotlivými řádkami. Ty jsou dle guidelines v pořádku u výpisu různých položek, u formuláře či detailu exekuce by to už být nemělo.

4 Úvodní obrazovka Na úvodní obrazovce je vidět hlavní App bar, kde se nachází ikona navigace ( hamburger ikona), po které z leva vyjede nastavení aplikace, kde se lze přihlásit, spravovat účet a další. Následuje název aplikace a nejdůležitější tlačítko Nový dotaz. Pod App barem je input pro vyhledávání v historii dotazů. A následuje výčet historie dotazů. Po označení dotazu checkboxem se App bar změní a nabídne možnost exportovat do PDF, poslat mailem či odstranit zaškrtlé dotazy. Klikem na dotaz se zobrazí jeho výsledek uložený v hiostorii. Příklad vyhledávání K vyhledávání se lze dostat přes úvodní obrazovku po kliknutí na Nový dotaz a následné zvolení způsobu hledání. V příkladu je vyhledávání exekucí osoby (aplikace bude umět vyhledávat ještě exekuce firem a exekuce dle konkrétního čísla exekuce). Po zadání vyhledávacích kriterií lze vyhledat pomocí šipky v App baru nebo zrušit vyhledávání křížkem. Před odesláním dotazu vyskočí upozornění, že se jedná o zpoplatněný dotaz.

5 Uživatelské testování Zkušebnímu uživateli se líbily dodržované guidelines, co se designu týče. Výběr některých podnětu ke zlepšení: Ve formuláři by měl u Datumu narození být nějaký select box. Nikdo nechce zadávat datum v plain textu. U výsledku hledání nemá počet nalezných výsledků co dělat v App baru. Je potřeba lépe zvolit co vypisovat u historie hledání na úvodní obrazovce tak, aby jednotlivé dotazy byly dobře odlišené. Vyhledávaní v historii by také mělo umět filtrovat výsledky dle různých kritérií. Šipka nabýzející funkce jako export, odeslání mailem nebo aktualizaci hledání by měla být k dispozici i u Výsledků vyhledávání.

6 Papírový Prototyp - Jan Nekvapil Pro papírový prototyp jsem využil Axure, který se ukázal být v některých apektech spíše omezující vzhledem k tomu, že jsem jej používal poprvé, ale když už jsem prototyp rozpracoval, tak už jsem u něj zůstal. Co se týče material designu, části, které mě zaujaly - animace a stínování prvků se v papírovém prototypu neprojevily. Místo app baru bych chtěl využít staršího přístupu s fragmenty, které mi zde přijdou vyhovující. Přihlašivací obrazovka Standartní přihlašovací obrazovka do aplikace. Čtvercové tlačítko s ikonou slouží k anonymnímu přihlášení v případě, že toto bude aplikace podporovat, v opačném případě by byly zarovnány tlačítka Přihlásit a Registrovat na střed a O Aplikaci by se nejspíše přesunulo vpravo. Tlačítka Registrace a O Aplikaci nemají v tomto prototypu obrazovky vzhledem k zatím neurčitému stylu registrace a v případě O Aplikaci se bude jednat pouze o popup/ obrazovku s textem.

7 Hlavní obrazovka vyhledávání Na tuto obrazovku se dostaneme ihned po přihlášení. V horní části vidíme fragmenty pro snadnou navigaci v aplikaci. Při vyhledávání fyzické osoby bude datum narození realizováno spinnboxem (v axure neexistujícím) Při vyplňování jednoho typu by měl být druhý deaktivován, aby bylo jasné která data budou využita jako vstup vyhledávání. Při kliknutí na tlačítko Vyhledat se objeví vyskakovací okno s informací o ceně akce.

8 Výsledky vyhledávání osoby Zde mi šlo vzhledem k možnosti zobrazení většího počtu záznamů o kompaktnost zobrazení. Předpokládám, že zásadním pro uživatele bude shoda jména a poté datum kdy byla exekuce zahájena. Po klepnutí na konkrétní položku se zobrazí detail pro případnou kontrolu adresy a dalších. Pomocí velké šipky se pak přesuneme k detailu dané exekuce (samozřejmě po upozornění na poplatek)

9 Detail exekuce Na detailu exekuce jsem se rozhodl defaultně zobrazit pouze vymáhanou částku, všechny ostatní detaily jsou pak podle kategorie jedno klepnutí daleko. Historie Záložka historie zobrazuje výsledky vyhledávání sdružené podle jména s informací o počtu exekucí. Po klepnutí na některou z položek se dostaneme na stejnou obrazovku jako po vyhledání osoby (nyní však bez platby) s informací o stáří daných výsledků a možností navštívit bezplatně již zobrazené detaily exekucí, nebo za poplatek doplnit ty ještě nenavštívené.

10 Uživatelské testování Cílem bylo použití hlavní funkce aplikace - vyhledání exekucí na osobě. S navigací v aplikaci neměl uživatel větší problémy. Nelíbilo se mu tlačítko pro přechod na detail exekuce. Uživatel postrádal app bar a další prvky material designu. V historii by upřednostnil zobrazení jednotlivých vyhledávání které proběhly. Barevná kompozice se uživateli zdála příliš tmavá, raději by se držel material designu se světlými odstíny. Absence prvku odeslání/uložení výsledku v prototypu.