Flat 2.0 & Jak řeší problémy s užitím plochého designu

Plochý design vznikl již od padesátých let, kdy byl vyvinut mezinárodní typografický styl. V nedávné době získala širokou popularitu od uvedení nového Microsoftu konstrukce metra zaměřená na geometrii a typografii jazyk, nejprve v novém Windows Phone v roce 2010, pak ve Windows 8 v roce 2012.

Plochý design je charakterizován nedostatek tří dimenzionálních efektů a lesklých vizuálních prvků k dosažení čistota, minimalismus, a jasnost. Je to v rozporu s dříve převládajícím stylem designu, skeuomorphism, který využívá lesklých tlačítek a ilustrací napodobujících realistické 3D objekty.

Plochý design má v podstatě za cíl zefektivnit webové stránky, zvýšit zaměření na obsah, nabídnout intuitivnější interakce a poskytnout rychlejší a funkčnější uživatelské prostředí. Je také snadné používat jednoduché, krabicové prvky a rozvržení založené na mřížce pro citlivý design.

Problémy použitelnosti plochého designu

Zatímco plochý design nám poskytuje ohromnou pomoc a skvělou sadu nástrojů, která našim uživatelům poskytuje rychlé a neporušené webové stránky, může způsobit určité problémy s použitelností, zejména když je příliš nadměrná.

Žádné vizuální signifikátory kliknutí

Používáme-li trojrozměrné efekty, přirozeně dává našim návrhům iluzi hloubky. To pomáhá uživatelům rychle najít interaktivní prvky, ty, na které lze buď kliknout (např. tlačítka a ikony), nebo vyplnit (jako pole formuláře). Jedním z hlavních obav o plochý design je, že to ztěžuje uživatelům rozpoznat klikací prvky.

Před bytem éry, web designéři obvykle ukázali kliknutelnost použitím vizuálních řešení takový jak přechody, textury, vyvýšené okraje nebo vržené stíny aby tlačítka a další objekty, na které lze klepnout, vypadaly, jako by mohly být stlačeny.

Plochý design tyto vizuální signifikátory postrádá a musí řešit stejný úkol s mnohem menší sadou nástrojů: barvy, tvary, blízkost, a kontextové prvky.

Proč je to problém? Zkusme experiment.

Podívejte se na tento obrázek níže. Pokuste se odhadnout, které prvky lze na základě tohoto snímku obrazovky kliknout. Nejde o ty, na které byste si poprvé mysleli. Můžeme najít mnoho dalších podobných problémů s použitelností po celém webu.

Snížená viditelnost díky neosové ose Z

Lidé v reálném životě najdou předměty a pohybují se ve třech rozměrech: osa x, y a z. Když se dostanou do minimalisticky navržené, ploché webové stránky bez 3D efektů, získají zážitek, který je odlišný od toho, na co jsou zvyklí, co jsou především familar s.

To znamená, že potřebují použít více úsilí k odhalení vztahů mezi objekty, a pochopit vizuální hierarchii stránek. Potřebujeme například strávit více času na domovské stránce vývojářské sítě společnosti Microsoft, abychom vizuálně dekódovali informace a účel jednotlivých prvků na webu..

Zásadním pravidlem návrhu UX je vždy snažit se minimalizovat kognitivní zátěž uživatele, aby se maximalizovala využitelnost. Jak to vidíme v mnoha případech, ne vždy se to děje s plochým designem.

Nízká hustota informací

Plochý design byl také kritizován za riskování nízké informační hustoty expertem UX Nielsen-Norman Group.

V jejich kritice na použitelnost Windows 8, oni používali příklady aplikací obchodu Windows, a internetové stránky Los Angeles časů ukázat záležitosti to \ t nízká hustota informací (s málo příběhy na úvodní obrazovce, titulky bez shrnutí, sotva rozeznatelné seskupení atd.) může způsobit z hlediska použitelnosti.

Z jiného hlediska může být méně informací také považováno za odstraňování rušivých vlivů, což umožňuje uživatelům zaměřit se pouze na důležité věci, ale pokud je minimalismus přehnaný, může snadno obětovat primární cíl stránky, tj. Transformovat informace na diváky..

Vzestup bytu 2.0

Jak stále více a více designérů rozpoznává chyby v použitelnosti plochého designu, objevila se nová, zralejší verze, nazvaná “Byt 2.0” nebo “Téměř Flat” design. Zatímco změna od skeuomorphism k bytu byla radikální, vývoj plochého designu je mnohem více nepolapitelný.

Nový styl je stále plochý přidává k návrhům trochu tři rozměrnosti ve formě jemné stíny, světla, a vrstev. Flat 2.0 - pokud je používán dobře - může opravit výše uvedené problémy s použitelností tím, že vrátí trochu realismu (skeuomorphism), a přidáním nějaké hloubky a detailů, při zachování výhod minimalismu, jako jsou zjednodušené webové stránky, jasnost a rychlejší načítání stránek.

Materiálové provedení

Nový designový jazyk Google, nazvaný Material Design, je pravděpodobně nejpozoruhodnějším příkladem stylu Flat 2.0. Společnost Google vydala v roce 2014 materiál Design s platformou Android L. Zatímco materiál Design zachovává hlavní vlastnosti plochého designu, používá určité metafory z fyziky, aby pomohl uživatelům rychle najít analogie mezi skutečným světem a digitálním světem.

Materiál Design používá osu z, udává jemná hloubka a inteligentně využívá vrstev oddělit je s vrženými stíny a animace. Google má popis supercool o tom, jak to funguje, a stojí za to si jej přečíst a porozumět jeho hlavním principům a pravidlům.

Závěr

Jako dobrý návrháři se vždy snaží zlepšit zkušenosti svých uživatelů, web design průmyslu se neustále mění. Plochý design nahradil skeuomorphism rychle, končit mřížkové, minimalistické rozvržení a zjednodušující prvky které v poslední době přesáhly web (to vyvolalo nějaké povídání o tom, jak se web design stává nudným nebo dokonce umírajícím, ale nemohlo by to být dále od pravdy).

Flat 2.0 dává odpovědi na vnímané problémy plochého designu. Je to chytrý kompromis mezi funkčností, estetikou a použitelností. Samozřejmě, že nemusíme používat sady materiálu UI všude, pochopení filosofie, která je za ním, nám však může poskytnout pevné zázemí jak rozvíjet náš vlastní styl v souladu s nejnovějšími poznatky v designu uživatelských zkušeností.