Semestrální projekt [AZP-IPO] Ideální portrét D2 Jan Hauser, Lukáš Matera 24.10.2013 1 Abstract V druhé části tvorby mobilní aplikace jsme se zaměřili na návrh a desgin aplikace. Pro připomenutí se jedná o aplikaci, která pomůže lidem s horšími zrakovými dispozicemi udělat kvalitní fotku či portrét. V textu je provedena analýza jednotlivých principů, kterými bychom se rádi řídili při tvorbě. Oba jsme provedli papírový návrh o našich představách o aplikaci a její funkčnosti. Tu jsme ověřovali u dvou lidí, kterých jsme se ptali na názory a připomínky a co si o aplikaci myslí. Snažili jsme se v našich návrzích využívat základní principy, které se pro vyvíjení aplikací pro android využívají. Převážně jde o jednoduchost, tedy dostupnost široké sortě uživatelů. Tato aplikace je sice určena pro zrakove handicapované lidi, ale neměl by být problém, aby ji využíval i zdravý člověk. Mezi nejzákladnější principy patří to, že obrázek řekne mnohdy více než slova. Uživatelé mobilních aplikací jsou zvyklí na známé a profláklé animace a chtějí je, když novou aplikaci otevřou, nacházet i v ní. Aplikace se pak stává ráze více tzv. user friendly a populárnější. Snažili jsme se udržovat základní vzhled aplikace, intuitivní umístění tlačítek apod. V případě nastavovacích tlačítek, je vhodné, aby v režimu on svítila a v režimu off byla zhasnutá a mírně zanikala. Nedílnou a jednou z nejdůležitějších vlastností vedle funkčnosti aplikace je její design, vhodně zvolené barvy, které zaujmou, tvary tlačítek, zvolené ikony, které by měly být známé. Dalším příkladem je zoomování v galerii nebo celkově známé akce poklikání roztažení apod. Závěrem této sekce by mohlo být heslo, které je podle nás nejdůležitější. Keep it simple! 2 Úvod & UI Guideline Android 3 Paper mockup of the future app V následující sekci jsou popsány papírové návrhy budoucí aplikace. Popsána jsou všechna okna a záměry. Byla využita aplikace POP - prototyping on paper [1]. V naší aplikaci bychom rádi využili tzv. exploreby-touch. Jedná se o možnost nastavení (dostupné od verze Androidu 4.0), které slouží převážně slepým, či zrakově postiženým lidem. Funguje na následující principu, při prvním přejetí po obrazovce řekne uživateli jaké komponenty se dotýká a jakou akci tato komponenta provádí, následně při poklikání na tuto komponentu (např. tlačítko) se tato akce provede. 1
3.1 1# paper mockup (Lukáš Matera) se uživatel přesune do galerie. Celkově bychom pak chtěly, aby aplikace byla zajímavá a jednoduchá, protože si myslíme, že v jednoduchosti je síla a zvláště pro uživatele s horšími fyzickými či psychickými dispozicemi, avšak aby nebyla na úkor jednoduchosti nějak graficky odfláknutá. 3.1.2 Obrazovka galerie Figure 1: Papírový návrh 3.1.1 Úvodní obrazovka Figure 3: 2# obrazovka Galerie: 1. V sekci galerie se nachází menší okna s názvy jednotlivých kategorií. 2. Jednou z kategorií by byly poslední fotky, kam by se ukládaly poslední vyfocené fotky, kde by potom čekaly na roztřídění do jednotlivých kategorií. Figure 2: 1# obrazovka 3. Po rozkliknutí jednotlivé kategorie by se zobrazilo podobné okno, akorát s jednotlivými fotkami v té dané kategorii. Při zapnutí aplikace se zobrazí úvodní obrazovka, ta nabídne možnost přihlášení na sociální síť Facebook například kvůli sdílení fotek a dalších možností spojené s užíváním Facebooku (nakonec však nemusíme dělat registrace a takové ty věci okolo, tak je možné, že zatím přihlášení a sdílení vynecháme), dále velké dobře rozpoznatelné tlačítko Start, kdy se při stisknutí uživatel dostane přímo k oknu samotného aktu focení. Další tlačítko je sekce galerie, kdy 4. V této sekci bude viditelné také stejné tlačítko pro přechod na focení jako v úvodní obrazovce. 5. Určitě bych udělal v tomto okně scrollování dolů a nahoru. Bylo by vidět několik kategorií a ty nejvíc dole by byly překrývány tlačítkem na přechod k focení, viz obrázek číslo 2. 2
3.1.3 Akce focení 3.1.4 Detail fotografie Figure 4: 3# obrazovka Figure 5: 4# obrazovka Fotka: Focení: 1. V okně focení budou nahoře vidět možnosti navigace uživatele. Jedná se o navigaci dle hlasu, vibrací a zvuku. Udělal bych jednoduché zapnuto nebo vypnuto, takže mohou být zapnuté například všechny nebo žádné. V tom případě bych však asi uživateli oznámil, že nemá zapnutou navigaci. 2. Dole by pak bylo vidět několik posledních fotek, které by se tam po vyfocení automaticky ukládaly a ukazovaly a po kliknutí by se přešlo právě do galerie do kategorie poslední fotky. 1. Při klinutí na jednu z fotek v galerii by se daná fotka zobrazila. 2. Přechod mezi jednotlivými fotkami v dané kategorii by byl scrollováním doleva a doprava. 3. Po kliknutí na fotku a ne při scrollování by se zobrazilo okno jako je na obrázku 4. 4. Nahoře by byla možnost pojmenovat fotku, pokud by uživatel nechtěl mít základní název a možnost zvolit si kategorii. 5. Dále pak tlačítko zpět, kterým se vrátí do galerie. 6. Opět tlačítko pro přechod na focení. 3. Po vyfocení by se fotka uložila a ukázala dole a nic jiného by se nestalo, takže by uživatel mohl pokračovat ve focení hned po předchozím focení. 7. Úplně dole pak tlačítka na smazání fotky popřípadě jejího přiblížení či oddálení. 3
3.1.5 Ověřovací obrazovka Figure 6: 5# obrazovka Figure 7: Papírový návrh Ověřovací tlačítko: 1. Při potvrzování nějakého rozhodnutí například smazání. 2. Jednalo by se o jednoduché okno s fajfkou a křížkem viz obrázek 5 a s položenou otázkou ohledně dané činnosti (např. Chcete tuto fotku opravdu smazat?). 3.2 2# paper mockup (Jan Hauser) Figure 8: Papírový návrh Papírový návrh byl pojat velice jednoduše. Vzhledem k handicapu zrakově postižených nemá smysl zavádět velký počet tlačítek, mohlo by to mít spíše chaotický Figure (1) popisuje hlavní obrazovky aplikace, vliv na uživatele. Zde je návrh celé aplikace s barevně kde bude uživatel pracovat. Figure (2) zahrnuje obrazovky, ukazující zpětnou vazbu aplikace k užioznačenými posuny mezi obrazovkami. 4
vateli, barevně jsou rozlišeny akce a odpovídající tlačítka. Tyto zpětnovazební doplňky by měly být doprovázeny i zvukovou reprezentací slov na obrazovce, z důvodu handicapu cílových uživatelů. 3.2.2 Detail fotografie 3.2.1 Úvodní obrazovka Figure 10: 2# obrazovka Zde jsou vidět tři tlačítka. První z nich FACE- BOOK jasně znázorňuje možnost sdílení fotografie na Facebooku, případně lze tato služba rozšířit pro další sociální sítě (Twitter, Google+...). Největší část obrazovky samozřejmě zaujímá samotný detail fotografie. Na dolní liště se uživateli nabízí dvě tlačítka, první z nich značí Návrat na úvodní obrazovku [4.2.1], na druhé je symbol člověka s odpadkovým košem, toto tlačítko jasně značí smazání fotografie. 3.2.3 Akce focení Figure 9: 1# obrazovka Tato obrazovka zahrnuje v rámci zjednodušení jak galerii, tak tlačítko odkazující přímo do akce focení. Kliknutím na libovolnou fotografii z galerie se uživatel dostává na detail té konkrétní fotografie. Pokud klidne na největší tlačítko na obrazovce, dostává se do režimu fotografování. Figure 11: 3# obrazovka 5
Na třetí obrazovce se dostáváme k samotné akci focení. Na horní liště se nachází nastavení pro pomocné vibrace, navádění hlasem, případně pomocné tóny. Každá z těchto pomůcek lze vypnout, nebo zapnout, dle přání uživatele. Dole na obrazovkce je tlačítko pořídit fotografii. Většinu obrazovky zaujímá dynamická obrazovka fotografování. 3.2.4 Pořízený snímek Další připomínkou je například nutnost zvukového doprovodu aplikace, s čímž počítáme. Námitky se objevily i v souvislosti s přílišnou jednoduchostí, ale zde si dovolujeme nesouhlasit a neprovádět příliš velké změny. Ohledně rozložení obrazovek, tlačítek a dalších komponent, jsme se nesetkali s protesty. Jednou z nejdůležitějších připomínek byla apelace na plynulost aplikace, na což bychom se měli zaměřit. Toto budeme řešit až v rámci programování a ladění aplikace. 5 Závěr Byly provedeny papírové návrhy naší zadané aplikace, které jsou zde prezentovány. Bylo zjištěno, že návrhy jsou si velice podobné, byla nalezena slušná shoda, ohledně představy o aplikaci. Byly provedeny úvahy nad vzhodným názvem aplikace, který musí být chytlavý, zajímavý, průbojný a dostatečně poutavý. Nejvíce se ujal pracovní název SecondEyes. Figure 12: 4# obrazovka Po pořízení snímku se zobrazí 4# obrazovka, umožňující uživateli fotografii uložit do galerie (tlačítko dole vlevo) a následuje přesun na úvodní obrazovku, v případě použití druhého tlačítka se fotografie smaže a akce se přesune focení. References [1] https://popapp.in/ [2] http://developer.android.com 4 Testing Po realizaci papírových návrhů došlo k testování. Každý oslovil jednoho nezávislého člověka, který se vyjádřil k aplikaci. Oslovili jsme dva známé (Šimon Peterka, student VŠE; Štěpán Piller, student konzervatoře) a poprosili jsme je o připomínky. V obou případech jsme se setkali s názorem, Na co bude slepým lidem aplikace na focení, když ty fotografie stejně nikdy neuvidí?. Tímto problémem se zřejmě nemá smysl zabývat, protože zdravý člověk má jiný pohled na svět. 6