Stavební kameny dobré WP aplikace

Miroslav Holec       3. 1. 2014       Windows Phone, Grafika       5750 zobrazení

Původní Microsoft Metro založený na typografii, jednolitém pozadí a barvách odvozených od schéma telefonu už uživatelům nestačí. Přestože se jedná o striktní pravidla, která zajišťují konzistentní ovládání mobilních aplikací a při jejich dodržení lze s nadsázkou říct “moje aplikace má dobré UX”, uživatelé chtějí design. V dnešním článku poukážu na zásadní bariéry, přes které se mnoho aplikací na Windows Phone nedokáže dostat.

Abych nejprve vysvětlil problém, dovolím si začít příkladem, jak to stačilo před 2 lety. A sice u aplikace Obědové menu. Ta se sice striktně drží všech pravidel Metro stylu ale je dobrou ukázkou toho, že “UX + data” nestačí. A pokud ano, tak jen do té doby, než budete chtít od uživatele zaplatit, nebo se objeví konkurenční aplikace, která řešení doplňuje o pěkný design. Problém tisíců podobných aplikací je, že uživateli nedají žádný zážitek z designu. Řeší sice problém uživatele ale nedělají to pěkně. Nejhorší co může uživatele potkat, je vzhled postavený na původním schémování. Zatímco světlé schéma telefonu přenesené do aplikace ještě evokuje pocit čistoty a decentnosti, aplikace přejímající tmavé téma s jakoukoliv barvou popředí připomínají spíše časy IBM s monitorem zobrazujícím zelený text na černém pozadí.

Aplikace

Jak jsem nastínil, základním trojúhelníkem každé aplikace jsou data, UX a design. Jsou to tři stavební kameny dobré aplikace a čím propracovanější a originálnější je vytvoříme, tím bude výsledná aplikace lepší. Při vývoji aplikace máme nejprve data nebo algoritmus a teprve poté skicujeme jak by měla aplikace vypadat a co by měla dělat. Výsledek většina vývojářů získá zmateným vývojem a kombinováním různých fází tvorby aplikace do sebe. Přitom díky tomu, že je Microsoft Metro zcela nové rozhraní má každý prostor jej inovovat o zajímavé nápady.

Data (algoritmus)

To, s čím většinou operujeme primárně jsou data, která chceme uživateli poskytnout. Když nejde o data, máme například nějaký algoritmus, který řeší problém nebo se může jednat také o uživatele, kteří obsah tvoří. Data nebo algoritmus jsou srdcem aplikace, je to primární důvod, proč uživatelé aplikaci stahují. Do této části spadá mimo jiné i to, jaká data nakonec budeme chtít poskytnout v závislosti na tom, co zhruba uživatel očekává. Měly bychom mít jasný přehled o tom, jaká data uživatel skutečně potřebuje aby byl maximálně uspokojen. Také bychom měli mít jasno o míře abstrakce dané domény. Například u aplikace Volby ČR se můžeme zaměřit pouze na aktuální výsledky, můžeme jít na podrobné výsledky krajů nebo poskytneme i seznamy zvolených poslanců. Můžeme jít ale ještě o úroveň dál a nabídnout historické výsledky voleb za posledních 10 let. Nejlepší je najít cílovou skupinu uživatelů a přímo od nich zjistit, jaká data potřebují a jakým způsobem je chtějí poskytovat. Více o tomto tématu se dočtete v článku “Metodika vývoje Windows Phone aplikací”, který brzy zveřejním.

UX

Data chceme samozřejmě poskytnout co nejpřívětivější formou a bude-li uživatel s aplikací pracovat, potřebujeme, aby vše dělal intuitivně a efektivně. Snažíme se minimalizovat okamžiky, kdy za uživatele přestane pracovat podvědomí a v hlavě mu začne šrotovat, co asi tak má udělat aby….. Na Windows Phone je skvělé, že UX je tak nějak nastíněno už od momentu, kdy zakládáte projekt. Přechody mezi stránkami, navigace napříč aplikací, ikonografie a chování prvků je to, co nás v případě UX zajímá. Uživatel by se měl k aplikaci rád vracet a práce s aplikací by mu měla činit radost. Měl by mít dobrý feel z toho, že dostal tak snadno to, co chtěl. Já osobně odděluji UX od designu, přestože mnoho kolegů tyto termíny spojuje v jeden.

Design

Poslední přísadou je samozřejmě opomíjený design. Je to ve své podstatě snaha udělat aplikaci pěknou, líbivou a pro uživatele přitažlivou, aniž by se nějakým způsobem stala data nečitelná nebo aplikace hůře použitelná (dostáváme se zpět k UX). Měla by to být kombinace grafických prvků, které pomáhají pochopit ovládání nebo doplňují a usnadňují čtení dat (informací). Mohou to být nápadité ikony, které staví na těch typických ale jsou hezčí nebo originálnější. Je to kombinace barev, která vyjadřuje styl, vytváří atmosféru nebo podporuje brand.

Při grafickém návrhu Windows Phone aplikací tedy hledám řešení jediného problému: Maximálně aplikaci ošatit do sexy designu a zachovat nebo ještě zlepšit UX. Nic víc. V praxi to znamená, že například:

  • používám panorama stránky, ale dělám je po svém,
  • používám typickou ikonografii ale vylepšuju si ji,
  • používám jedno písmo, ale nebojím se použít jiné než Segoe WP (byť ho preferuji kde to jde),
  • používám nápaditá pozadí, ale netvořím je přechody,
  • použiju schémata, ale pouze k decentní dekoraci,
  • barvy a schéma barev řeším primárně vzhledem k aplikaci nebo corporate identity

Zejména poslední bod je dle mého názoru klíčový. Představte si koneckonců, jak by vypadal Facebook, kdyby nebyl ve svých typických barvách:

Jak by vypadal facebook v nestandardní barvě

Příklady

Nakonec ještě uvedu tři typické příklady chyb, které vytváří prostor pro to, aby byly aplikace lepší. Když naleznu zajímavou aplikaci (z hlediska nápadu), která spadá do některé z kategorií níže, je dobrým kandidátem na to, udělat ji lépe a konkurovat jí.

Ignorace Metro

Speciální kategorií WP aplikací jsou pokusy, které naprosto ignorují Microsoft Metro a jsou evidentně vytvořené naprosto zmatenou metodou pokus-omyl člověkem, který vůbec netuší podstatu WP aplikací. Nejen, že tyto aplikace často nenabízejí originální obsah ale nepřináší praktický žádný UX ani design. Příkladem jsou například Obstetric nebo Yoga. Naprosto nekonzistentní design, špatně čitelný obsah, nepěkné přechody… prakticky je těžký nalézt něco, co je správně.

Ukázka chyb na aplikaci Obstetric

Absence Designu

Další kategorií jsou aplikace, jejichž autoři většinou mají data, která chtějí poskytnout ale dělají to nejjednodušší možnou formou. Aplikace pak typicky vychází z úplně původní šablony, která je dostupná po založení projektu a “design” tvoří barevné schéma zvolené v nastavení Windows Phone. Příklady budiž Slovník cizích slov nebo SMS Přání.

Degenerace UX

Někdy se aplikace sice snaží přinést pěkný vzhled, ale úplně zapomíná na použitelnost, čímž se uživateli značně zhoršuje prožitek z používání. Jsou to ty zmíněné momenty, kdy uživatel přestane pracovat podvědomě a tápe jak dál. Jsou to přitom mnohdy různé detaily:

  • přílišná originalita při tvorbě ikonek v AppBaru
  • nevhodný způsob navigace mezi stránkami
  • chybějící překlady kvůli vkládání textů do obrázků
  • různé obrázkové klikací mapy a nestandardní ovládání

Například aplikace MP3 Download se pokouší dělat vše po svém. Nejen, že design je tragický ale zároveň i naprosto degraduje UX, tím, že nahrazuje naprosto standardní Application Bar vlastními ikonami, používá nestandardní ikonografii i typografii a ještě navíc nedodržuje vzdálenost prvků pro snadné dotykové ovládání.

Shrnutí

  • dobrou aplikaci tvoří data, UX a design současně
  • uživatelé spíše zaplatí za aplikaci, která nabízí všechny tyto tři “přísady”
  • obrandování aplikace a obarvení vlastními barvami má přednost před schémováním
  • design by měl v lepším případě vždy zlepšit UX

 

hodnocení článku

0       Hodnotit mohou jen registrované uživatelé.

 

Nový příspěvek

 

Příspěvky zaslané pod tento článek se neobjeví hned, ale až po schválení administrátorem.

Adobe PDF

Čtečka PDF od Adobe je taky otřesná, nikdy vůbec netuším jak zobrazit jejich appbar, ale vždy když ho nepotřebuji tak zase zjišťuji, jak ho skrýt.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Hlavně se jejich AppBar zobrazuje na úplně špatném místě. Jejich myšlenku - udělat více prostoru pro čtení sice chápu ale kdyby použily výchozí AppBar, uživatele by stejně ani nenapadlo, že by tam mohlo být místa více. AppBar je v dolní části pohodlný, protože se dá do určité míry (na menších zařízeních) ovládat palcem - což je v případě Adobe Reader nemyslitelný.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Pěkný článek

Určitě dobré tipy, které je dobré vědět.

nahlásit spamnahlásit spam 0 odpovědětodpovědět
                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

Příspěvky zaslané pod tento článek se neobjeví hned, ale až po schválení administrátorem.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback