TOPlist

Vyvíjíme aplikace pro WP: Uživateli modré z nebe (4. díl)

Uživatel má vždy pravdu a vše co děláme, děláme jen pro jeho blaho. A děláme-li aplikaci pro Windows Phone, nechceme jen aby se uživatel najedl, ale aby mu i chutnalo.

Uživatel má vždy pravdu a vše co děláme, děláme jen pro jeho blaho. Děláme-li mobilní aplikaci, myslíme dokonce i na jeho účet za telefon. A děláme-li aplikaci pro WP, nechceme jen aby se uživatel najedl, ale aby mu i chutnalo.

Sice jsem dnes chtěl psát o vytváření dlaždic, ale právě probíhající soutěž o 100x Nokia Lumia poukázala na docela závažný problém. Měl jsem totiž možnost nahlédnout na první výtvory našich vývojářů (se kterými se snaží soutěžit o jeden ze sta Nokia Lumia telefonů), kteří právě začínají, a cítím že je dobrá příležitost připomenout si nejdůležitější  stavební kameny aplikací pro Windows Phone: rychlost, čitelnost, konzistence a integrace. Někdy stačí opravdu málo, a věřím že následující extrémně stručně popsané rady dovedou k zamyšlení se co nejvíce z těch, kteří nejsou, kulantně řečeno, tak uvědomělí.      

Rychlost, rychlost, rychlost!

Když dáte telefon s Windows Phone do ruky uživateli Androidu nebo iPhonu, první dojem je většinou stejný: Windows Phone je skutečně svižný. I aplikace můžou být svižné. Microsoft se snažil jak mohl a například volání webových služeb lze dělat pouze asynchronně, takže zatímco aplikace čeká na vstup z internetu, uživatel nemá zamrzlé uživatelské prostředí. Někteří nadávají, já to chápu.

Jak udělat rychlou aplikaci? Jednoduchá odpověď neexistuje, je to jen na vás. Vy si jen pamatujte, že na to máte myslet. Pracujete-li s online daty, pomožte si a nechte toho co nejvíc dělat server. Sice si tím vývojář může nadělat pár problémů, ale funguje to stoprocentně a jde nám přeci o uživatele. Příklad: podívejte, kolik lze telefonu ušetřit práce a uživateli výdajů za přenesená data.

-

Potřeboval jsem udělat aplikaci, která bude stahovat novinky ze všech významných zdrojů, které sledují dění kolem Windows Phone. Protože je jich přes třicet a protože uživatele nechci nutit stahovat třicet webových stránek a poté jeho telefon zbytečně trápit načítáním a řazením 700 záznamů (aplikace si navíc musí uvědomit, zdali záznam už uživatel již nečetl a pokud ano, tak ho zprůhlednit), rozhodl jsem se nejít cestou klasické RSS čtečky. Tím jsem docílil extrémní rychlosti, která odpovídá stažení jednoho XML a radikálního zmenšení zpomalení, které doprovází zpracovávání dat v telefonu.

Zkoušeli jste již skvělý nástroj Performance Analysis, který spustí profiling na pouhý jeden klik (a i při deployi do telefonu)? Takto vypadá běžná práce s aplikací Program Kin z hlediska zatížení zdrojů přístroje HTC Titan:

-

Čitelnost

Školácká chyba, která se šíří jako mor. A to i přes to, že když jsem ji několikrát udělal já, aplikace mi neprošla schvalovacím procesem. Nechápu, jak se vám to kluci daří, ale připomínám, že Visual Studio obsahuje nástroj Marketplace Test Kit, který vám pomůže uvědomit si naprostou většinu těchto základních nedostatků.

-

Obrázek vlevo ukazuje hned několik problémů – například tlačítko nápovědy vpravo nahoře, aka na co že to je ten standardizovaný spodní ApplicationBar? – ale zařadil jsem jej kvůli obrázku v pozadí. Když umisťujete do pozadí aplikace obrázek, nebo měníte jeho (standardně průhlednou) barvu, mějte na paměti čitelnost textu při obou nastaveních tématu systému – při tmavém i světlém. Systém vám totiž automaticky změní barvu všech fontů textací aplikace. Viz. pravá část obrázku. Zároveň nezapomínejte na to, že vaši aplikaci bude člověk používat i na ostrém slunci, na kterém je vysoký kontrast textu vůči okolí naprosto kritický. 

Mluvímeli o čitelnosti, určitě ještě stojí za to zmínit velikost textu. Standardní velikost běžného textu je „20“, a pokud už chcete text zmenšovat či zvětšovat, využijte standardizované styly a nezkoušejte měnit čísílka tak aby se vám líbila:

Style=”{StaticResource PhoneTextSubtleStyle}” – malý méně výrazný
Style=”{StaticResource PhoneTextNormalStyle}” – malý výrazný
Style=”{StaticResource PhoneTextLargeStyle}” – velký
Style=”{StaticResource PhoneTextExtraStyle}” – největší

Kdyby autor aplikace na předpředešlém obrázku vlevo alespoň nezmnenšoval text… Půlku obrazovky má teď prázdnou a uživatelé si naprosto zbytečně kazí zrak. Ale to už se dostáváme k dalšímu bodu.

-

Konzistence

Již v prvním dílu tohoto seriálu jsem psal, jak jsou vývojáři a jejich aplikace důležité pro platformu jako takovou. Design guidelines mají i na Androidu, mají je na iPhonu, ale my na Windows Phone začínáme znova, vidíme jakou neplechu může snaha o zbytečnou originalitu natropit a tak se opět dostáváme k Metru. Metro je o vzhledu, o ovládání i uživatelské zkušenosti. Dodržování odsazení tlačítek, velikostí a stylů fontů, používání standardních komponent a postupů, a k tomu  všemu uvědomění si, že Metro se hýbe.

Osobně se snažím nevymýšlet nic nového: soustředím se na práci s informací (otravovat uživatele jen s tím nejpodstatnějším, ušetřit znaky a tím si zjednodušit pozicování a členění textu), poté se snažím bezhlavě kopírovat design tak jak ho vidím všude v operačním systému (berte s nadsázkou) a když mám přebytečného výkonu na rozdávání, přidám nice to have věci, které aplikaci uvedou do pohybu.

PerformanceProgressBar (aby uživatel věděl, že na něco čeká – to by měl být standard)
– Tilt efekt (uživatel pozná, že tu položku v seznamu opravdu zmáčknul – položka se „promáčkne“)

– animace přechodů mezi stránkami („MainPage.xaml“ -> „Oprogramu.xaml“)
– ContextMenu (vyjede uživateli při dlouhém stisku položky)

Mimo PerformanceProgressBar jsou to všechno „nice to have“ věci, které ale aplikaci přidají šmrnc a hlubší nádech skutečného Windows Phone.

-

Integrace

Protože se Windows Phone snaží uživateli zpřístupnit informace pokud možno bez nutnosti spouštět aplikace, a zároveň co nejvíce služeb shromažďovat na svá vyhrazená místa (kterých je co nejméně, aby se uživatel nikdy v systému neztratil), i od vývojářů se očekává, že své aplikace tomuto trendu uzpůsobí. Díky tomu máme možnost integrace naší maličkosti do systému, můžeme využít systémové služby, a tím aplikace udělat chytřejší.

Určitě by vás nemělo minout následující…

– Vytvoření dlaždic, třeba i živých a s deep linky (uživatel může získat informaci bez nutnosti spustit aplikaci, nebo se dostat rovnou do podobrazovky aplikace)

– Využití „Launchers“ a „Choosers“ (např. tweetnutí za využití účtu, který si uživatel přihlásil v systému bez nutnosti znovuzadávání údajů)

– Využití systémového přehrávače a ovládání hlasitosti a integrace do Hudba+video Hubu (zde se shromažďuje historie všech přehraných médií telefonu)

– Zařazení do „Extras“ menu (děláte aplikaci pro úpravu fotek? uživateli se může zobrazit přímo v menu při procházení fotek)

-

Závěr

Pokud není UX vaším hobby, tak vás my, uživatelé vašich aplikací, prosíme, abyste nevymýšleli nic nového a drželi se pravidel – šetřete svůj čas. Ten věnujte zrychlení odezev aplikace, přemýšlejte nad velikostí přenesených dat, nebo integraci do systému.

A to je vše. Za týden si ukážeme práci s dlaždicemi – jak upravit primární dlaždici a jak vytvořit sekundární s takzvaným „hlubokým“ (deep) linkem do aplikace.

O autorovi – Robert Varga

- Aktuálně pracuji v GE Money Bank na pozici IT Systems Analyst a čtvrtým rokem jsem Microsoft Influencer. Programování je více než dekádu mým „hobby na doma“ a mimo dosavadní online (VymenaVeci.cz, CzechGamer.com…) a offline (ComputeMark, RemoteServerAdmin…) světy v posledních dvou letech kotvím ve vodách Windows Phone (TV Program, Počasí, Rádio, Svátky, Program Kin, WP Bench…). Aplikace ComputeMark a WP Bench jsou používány v recenzích nejvýznamnějších webů průmyslu (Engadget.com, AnandTech.com…). Aktuálně úzce spolupracuji s Nokia ČR a SR.

Autor článku Robert Varga
Robert Varga

Kapitoly článku