• 20. 3. 2020
  • UX

Neumorphism & UX

Zbavíme se po letech Material designu?

Mojmír Greguš

UX designer

Internet je plný článků o novém skeuomorphismu. Všechny probírají nový grafický trend. Reakce se různí, někteří doufají, že v něm bude nové iOS14, jiní mu věští jepičí život. Podívejme se na neumorphism zblízka.

Výlet časem od skeuomorphismu po Material design a zpět

Všechny nové technologie se na začátku drží vzorců, které uživatelé mají zažité z minulosti. První kamenné řecké chrámy měly vytesány strukturu dřeva, první auta vypadala jako kočáry bez koní. A první weby napodobovaly knihy, papírové zápisníky nebo kovové přístroje. Používaly se textury, napodobování reálných povrchů, detailní až realistické ikony a ovládací prvky napodobovaly své reálné předchůdce. Vše to gradovalo v rozhraní prvních iPhonů. Bylo to hezké, milé a navíc bylo na první pohled jasné, co je ovládací prvek a co dělá.

Kalkulačkaikonky

Skeuomorphism icon by Ferry Eka on Dribbble

Knihovna

ibooks-publishing | jonobacon

Skeuomorphism prohrál boj s responzivitou

Dotykové telefony s úzkými displeji zároveň vytvořily poptávku po webech, které se přizpůsobí velikosti okna. Ukázalo se, že stávající weby mají velký problém s přeskládáním obsahu podle potřeby, protože vymazlená grafika s odlesky, texturami a 3D efekty po změně rozměrů na sebe nenavazuje a rozpadá se. Další nevýhodou byla datová a cenová náročnost těchto prvků při pomalém a drahém mobilním internetu. O rychlosti načtení ani nemluvě.

Flat design a jednoduchost

První reakcí grafiků bylo zahodit vše zbytečné. Zůstaly jen základní tvary a barvy. Zbytek zjednodušili a minimalizovali. Z obrázkových ikon se staly schématické, weby se skládaly z barevných obdélníků různé velikosti, které do sebe krásně zapadly na každém displeji. Vznikl tzv. flat design. Byl čistý a zdál se přehledný.

Windows 8

First Look at Screenshots and What's New in Windows 8 - The Social Operating System - TechNet Articles - United States (English) - TechNet Wiki

Vývojáři jásali, uživatelé ho však nikdy plně nepřijali. Trvalo dlouho, než si zvykli na úplně novou estetiku. Navíc chyběl dojem hloubky, a to ztěžovalo uživatelům rozlišit aktivní prvky. Museli často přejíždět myší nad obsahem, aby zjistili, které prvky na kurzor reagují. V průměru hledali odkazy a tlačítka o 22 % času déle, než předtím. To se majitelům webů oprávněně nelíbilo.

Flat 1Flat 2Flat 3

Rovane Durso

Ve stejnou chvíli byly platformy iOS a Android donuceny hledat náhradu skeuomorphismu. Zvětšováním mobilů a vznikem tabletů se dostaly na tolik rozdílných velikostí displeje, že udržování staré grafiky přestalo dávat vývojářům aplikací ekonomický smysl. Flat design však nebyl pro mobily kvůli svým nedostatkům použitelný, obzvláště, když na mobilu nemáte myš, abyste pátrali po tlačítkách a odkazech. Nahradil ho doteď používaný “moderní design”.

Moderní design a návrat třetího rozměru

Řešením byl částečný návrat hloubky. Přehlednost a jednoduchost v současném moderním designu zůstala, ale prvky získaly různou relativní (fiktivní) výšku nad displejem. Vrátily se stíny a zjednodušila se identifikace aktivních prvků. Použitelnost se v porovnáním s flat designem zlepšila, uživatelé byli spokojení a rostoucí tlak UX designéru zpětně pozitivně ovlivňoval další vývoj moderního designu.

KB mobilní banka

Je moderní design nudný?

Se vznikem různých moderních design systémů, hlavně material designu (od Google), se nejprve sjednotil design aplikací. Pak převzaly některé principy moderního designu webové stránky. Pro uživatele to má výhody, všechny weby a aplikace mají podobnou strukturu, používají stejné vzory a shodné ovládání. Samotný vzhled běžná populace většinou neřeší a alespoň se všude rychleji zorientuje. Jenže grafici se odlišit chtějí. Nebaví je dělat stále to samé, jen v jiných barvách. Naštěstí pro ně, webové technologie se zlepšují a umožňují zkoušet nové grafické přístupy:

  • rozbití mřížky (překrývat prvky a neočekávaně je zarovnávat),
  • návrat ke křivkám (alespoň na pozadí),
  • výrazná typografie,
  • animace a videa.

Typografie

Výrazná typografie G2KxPIT

Mřížka

Rozbitá mřížka Clínica Benessere

Ne webu to jakž takž pomohlo, webové stránky jsou díky tomu pestřejší, ale zdá se, že mobilní aplikace výraznějším změnám odolávají. Úzký displej, předepsané systémové komponenty a jednotné ovládání omezují grafickou kreativitu.

Neuomorphism

Až jednoho dne (5. 11. 2019) spadla mezi grafiky bomba. Na serveru Dribbble se objevil tenhle obrázek a okamžitě spustil velkou diskusi o návratu skeuomorphismu.

Start

Skeuomorph Mobile Banking | Continuation by Alexander Plyuto ? for Heartbeat Agency on

Nejde však o návrat původní verze. Skeuomorphismus prošel evolucí, zahodil všechno, co připomíná materiály reálného světa. Zachoval si čisté rozhraní z flat designu, ale s hloubkou a světlem pracuje jiným způsobem, než material design. Reálněji, kromě stínů, používá také odlesky a výsledkem je měkký plastický vzhled aplikačního rozhraní.

NeuomorfizmusMaterial design

Odlišné využití světel a stínu u Neomorfismu a Modern/Material designu

Trend dostal jméno neuomorphism nebo neomorfismus (New skeuomorphismus). Designérské servery zaplavily grafické návrhy s jeho ukázkami. O neuomorphismu píše každý, kdo udrží klávesnici a zajímá ho design a použitelnost (včetně nás). Panuje shoda, že neuomorphism propojuje to nejlepší z digitálního a reálného světa. A zdá se, že se to uživatelům podle prvních reakcí líbí. Stačí to však? Je výsledek použitelný a je pro nás přínosem? Nebo je to jen samoúčelná grafická výstřelek?

Start

Skeuomorph Mobile Banking | Continuation by Alexander Plyuto ? for Heartbeat Agency on

Na co si dát pozor z hlediska UX

Kontrast

Jemnost a měkkost neuomorphismu je jeho hlavní slabinou. Zdraví lidé si nejspíš ničeho nevšimnou. Pokud vaše oči nejsou stoprocentní, minimální odlišení prvků od pozadí vám může dělat problémy. Jednotlivé prvky mají totiž úplně stejnou barvu jako podklad, odlišuje je jen jejich výška a tím pádem stín na jedné straně a odlesk na opačné. Zvláště odlesk na světlém pozadí má minimální kontrast a může na podkladu zanikat. Stín má kontrast o něco lepší, ale nachází se jenom na dvou stranách prvků.

Barvy

S nízkým kontrastem souvisí omezená paleta. Neuomorphismus je nejlépe viditelný na světlých a tlumených barvách. V případě, že váš projekt používá sytý podklad, můžete na něj zapomenout. Můžete si to vyzkoušet v online generátoru: https://neumorphism.io.

Sytá barva

Existence odlesku je zároveň důvodem, proč nemůžete použít bílé nebo černé pozadí. Na bílém pozadí není vidět odlesk a na černém neuvidíte stín. Čímž celý efekt zmizí.

Černá bílá

Důsledkem těchto dvou omezení je používání podobné barevné palety pro téměř všechny návrhy, které zatím vznikly.

Neo 3

Search Designs

Přístupnost

Nízký kontrast a slabá viditelnost jednotlivých prvků grafického rozhraní je největším problémem u aktivních prvků, zejména u tlačítek. V návrzích často vidíme označení stavu podle změny výšky tlačítka.

Tlačítka

Rozdíl mezi oběma stavy je minimální a z hlediska použitelnosti není příliš vyhovující. Změna stavu je nevýrazná a někteří uživatelé mohou mít problém s rozpoznáním rozdílu. Proto je nutné změnu stavu zvýraznit, nezávisle na principu neuomorphismu.

Buttin 2

Z toho vyplývá, že pouze pomocí neumorphismu nevytvoříte dostatečně přístupné uživatelské rozhraní. Všechny prvky vám budou splývat. Zvláště u uživatelů s vadou zraku dojde ke komplikacím při skenování obsahu obrazovky. Neuomorfismus se dá spolehlivě použít jen na prvky, které mají pouze minimální význam z hlediska důležitosti, případně jsou doplněné o jinou formu zdůraznění.

Jednou z mála možností je použití neuomorphismu na karty. Karty v aplikacích a na webu vizuálně ohraničují různé informace, které spolu souvisí. To ohraničení nemusí být vždy tlustou čarou. Někdy stačí, když se použije dostatečný odstup od zbylého obsahu stránky. Hlavně když je obsah karty dostatečně strukturovaný. V takovém případě nebude využití neuomorphismu negativem, dokonce pro část uživatelů může použitelnost zlepšit.

Kartičky

Není to pro “převratný” grafický trend ale trochu málo?

Závěr

Předpovědi jsou vždy ošemetná věc, ale za sebe doufám a troufám si tvrdit, že neuomorphismus je jen bouře ve sklenici vody a výrazně neovlivní design aplikací do budoucna. Minimálně ne v současné podobě.

Je vhodný jen pro omezenou barevnou paletu a nízký kontrast výrazně snižuje použitelnost uživatelského rozhraní. To je pro design, do kterého někteří grafici vkládají tolik nadějí, celkem výrazný handicap.

Proč vlastně neuomorphismus začít používat, když nemá téměř žádnou přidanou hodnotu kromě estetické? A i tu estetiku přináší pouze prvkům, které ji vlastně nepotřebují a jen zvyšuje míru vizuálního šumu.

Zdroje

O autorovi

Mojmír Greguš

UX designer

Téměř dvě desetiletí pomáhám online projektům růst. Mám dlouholeté zkušenosti z návrhu a tvorby webů i z jejich provozu a propagace. Teď přetavuji svoje zkušenosti do zlepšování uživatelského zážitku.

Podobné články

16.12.2019

Co nás naučil redesign aplikace Mobilní banka

Už skoro půl roku pracujeme na redesignu aplikace Mobilní banka pro zařízení od Apple. Jako UX designéři spolupracujeme se všemi ostatními rolemi v projektu.
číst více
14.12.2016

Interakční design

Před pár týdny jsme psali o tom, Co je vlastně ono UX. Jedním z podoborů UX je interakční design. Existují ovšem i specializovaní interakční designeři.…
číst více
18.10.2019

Od hamburger menu k navigační liště

Tři vodorovné čárky v levém horním rohu obrazovky telefonu. Prokletí uživatelů i designérů. Jedni v něm na hranici šílenství hledají, druzí do něj schovávají…
číst více