Pojďme se podívat na bitvu dvou UX stylů! Zkusíme porovnat 'Flat Design' s Material Designem, abychom zjistili, které rozhraní je k uživatelům více přívětivé a slibuje lepší uživatelský zážitek.
'Flat Design' vs. Material Design - který z nich je lepší? Ponoříme se do tajů Materialu, stejně jako dalšího designového trendu, který se v posledních letech proměnil v komunitu UX - 'Flat' (plochý) Designu. Víme o jejich minimalistickém přístupu a vzhledové podobnosti, zkusme se tedy podívat na faktory, které ovlivňují vývojáře v jejich volbě mezi těmito systémy.
Co je to 'Flat design'?
'Flat Design' by mohl být považován za opak skeumorfismu (skeumorf je odvozený objekt, který imituje funkční prvky originálu). Namísto použití reálných obrazů používá 'Plochý design' dvourozměrné vizuální detaily.
Narozdíl od Material Designu nepoužívá stíny. Zatímco jiné konstrukční systémy spoléhají na metaforu a realismus, aby odhalily svou podstatu, 'Plochý design' to ignoruje a podle společnosti Microsoft je považován za autenticky digitální.
Minimalismus a 'Plochý design' jdou ruku v ruce, takže spousta jeho vzorů bude vypadat záměrně 'řídká'.
Výhody 'Flat designu':
- Velice jednoduchý design bez rozmazání (distraction)
- Vysoká čitelnost s jasnou typografií
- Snadno přizpůsobitelné pro responzivní design
- Rychlejší načtení do prohlížečů a aplikací
Nevýhody 'Flat Designu'
'Flat design' je osekán na minimum. Ne úplně minimalistický, ale zaměřený na funkci designu (návrhu). V plochém designu hraje výraznou roli estetika, kde se také výrazně využívá tučná barva. Nedostatek stínů a 'hloubky' může ale na druhou stranu způsobit problémy s použitelností.
CTA (call to action - výzva k akci) bez silných signifikantů se může snadno stát 'neviditelnou', uživatel si jí nemusí hned všimnout, což samozřejmě nechcete. Pokud totiž něco na první pohled nevypadá klikatelně, uživatel neví, že kliknout může a to je základní chyba.
Další nevýhodou 'Flat designu' je to, že navzdory tomu, že existuje a má téměř vedoucí roli v UX posledních zhruba 5 let, stále existují lidé, kteří o něm smýšlí pouze jako o trendu, něčemu, co nebude mít tak dlouhého trvání jako například Material Design, který má už i svůj vlastní sadu pokynů (guidelines).
Co je to Material Design?
Material Design je návrhový systém vyvinutý společností Google. Google přišel s Material Designem proto, aby vytvořil koherentní, praktický a přístupný vizuální jazyk. Cílem bylo a je vytvořit webové a mobilní zážitky, které jsou založeny na plném využití dotykových obrazovek (zařízení) a čerpají inspiraci z papíru a inkoustu.
Říkáte si, proč papíru a inkoustu? Principy návrhů se pokoušejí přeložit fyzikální vlastnosti papíru na obrazovku. Pozadí se chová jako list papíru a prvky a chování uživatelského rozhraní napodobují schopnost papíru být zvětšen, zmenšen, promícháván a spojován.
Materiály jako je papír vrhají stíny, jsou pevné, mohou změnit tvar a můžeme s nimi manipulovat mnoha různými způsoby. Všech těchto vlastností využívá Material Design.
Principy Material Designu
Existují dva hlavní cíle, na kterých je Material Design založen:
- Vytvořit jazyk, který používá klasické principy návrhu
- Vytvořit unifikovaný systém, který může být použit napříč všemi typy zařízení, přičemž klade největší důraz na zařízení mobilní
Stejně jako cíle uvedené výše, které napomáhají návrhovému systému společnosti Google, existují také 3 principy, které je k tomu směřují:
- Materiál jako metafora: vizuální znamení by měla být realistická
- Tučné, grafické: inspirace z designu založeného na tisku
- Poskytování významu pohybu: žádný pohyb by neměl být nadbytečný
Dokumentace Material Designu je rozsáhlá a neustále aktualizovaná týmem společnosti Google.
Jak vypadá Material Design?
Material Design přináší zpět UI element, který se v minulosti již vytratil - skeumorfismus.
Vzhledem k tomu, že Material Design využívá papír jako metaforu, zachovává rovinnost, je však vícerozměrný. Pokud je něco příliš ploché, pro uživatele může být obtížné rozlišit mezi prvky UI jejich účel (například výše zmiňovanou klikatelnost).
Proč je Material Design tak důležitý?
Material dává webmasterům a grafikům UI rámec, který je třeba dodržovat. Aby nedocházelo k vytváření různorodých a hrozivých rozhraní, Material Design dává vývojářům jasnou cestu, jak navrhnout animace, styly, rozvržení, komponenty a vzory. Výsledkem pak je to, že každý, kdo jakýmkoli způsobem interaguje s nějakým z produktů nebo služeb Google má jednotný a příjemný zážitek.
Výhody Material Designu
- Jednotné a zjednodušené rozhraní
- Principy a cíle zajišťují konzistenci pro návrháře
- Z-osa vytváří 'hloubku' designu
- Intuitivní použití
- Používá pohyb, aby uživatelům ukázal, co se děje na screenu
Nevýhody Material Designu
Material Design pomáhá poskytovat komplexní rámec pro návrháře, kteří vytvářejí mobilní a webové zážitky. Přesto není Material Design žádným svatým grálem designu. Zatímto principy mohou být mimořádně přínosné, existují kontexty a situace, ve kterých by jeho použití nebylo vhodné.
Příkladem by mohla být třeba situace, kdy byste vzali Facebook a přidali do něj principy Materialového návrhu. Výsledkem je Google+ a všichni víme, jak to vypadá. Material Design podporuje jednoduchost, ale příliš jednoduché weby a návrhy mohou být také překážkou. Například na níže uvedeném obrázku není okamžitě jasné, které části jsou klikatelné, což může spoustu uživatelů odradit.
Zatímco vzory UI v rámci Material Designu mají být jasné a směřují uživatele smysluplným způsobem, některé komponenty mají nevýhodu, protože jsou nadbytečné. Například pohyblivé tlačítko, které na obrazovce moc není potřeba. Samozřejmě k nim ale existují vždy alternativy.
Material Design je také neoddělitelně spojen se společností Google a je dominantní v systému Android. Tento vztah, i když úmyslný, způsobuje problémy při návrzích pro jiné systémy - například iOS.
Čím se tedy liší 'Flat' a Material?
Na začátek řekněme, že oba sdílejí podobné vlastnosti. Jsou minimalistické - žádné nadbytečné detaily. 'Flat' má tendenci používat omezené barvy a jednoduchost návrhů prvků UI podporuje účinnost a funkčnost. 'Flat' je inspirován designovými pohyby minulého století.
Plochý design cílí na to, aby byla funkčnost krásná, ale není to na úkor formy?
Jedním ze způsobů, jakým se 'Flat' odlišuje od ostatních stylů je to, že se nesnaží replikovat nic od reality (jako například papír v Materialu). Plochý design zdůrazňuje význam ostré typografie a jasné vizuální hierarchie.
Závěr
Je zřejmé, že jak 'Flat' tak Material systémy mají své vlastní zásluhy, výhody, ale také chyby. Je také jasné, že se jejich principy a cíle kříží. Narozdíl od 'Flatu' ale Material poskytuje pevný základ, který lze budovat a zlepšovat.
