Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 13 - Konstrukční systémy v UX - Mobile First, Flat Design

V tomto kurzu jsme si již řekli hodně věcí o tom, jak vytvářet uživatelsky přívětivé prostředí a co vše je k tomu nutné znát a aplikovat. V dnešní lekci je třeba ale dosavadní vědomosti rozšířit o další oblast – tzv. Konstrukční systémy. Konkrétně se zaměříme na tři přístupy, jak je možné pojmout tvorbu uživatelských rozhraní - Mobile First, Flat Design a Material Design.

Konstrukční systémy pro stavbu uživatelských rozhraní

I když název Konstrukční systémy zní spíše jako z oblasti stavařské, i UX designér své weby a aplikace svým způsobem staví. A pro každou stavbu je třeba vybrat vhodný systém, jehož pravidel je třeba se držet. Každý konstrukční systém je vypracován na jiném základu. Někdy je primárním zaměřením nějaký cíl, někdy vizuální stránka, jindy zase systém práce. My si dnes představíme tři přístupyMobile First, Flat Design a Material Design.

Začneme tím v dnešní době nejaplikovanějším. Na tento přístup bychom měli v základu myslet při každé naší tvorbě.

Mobile First přístup

Jako Mobile First přístup či Mobile First Design označujeme způsob navrhování a vytváření webových aplikací, který dává na první místo zobrazení v mobilním zařízení před desktopovým zobrazením. Tento přístup vznikl v době, kdy se začalo dbát na responzivitu webů. Dříve totiž programátoři tvořili weby s ohledem na veliké a široké obrazovky desktopových zařízení, jelikož zobrazování stránek na mobilních zařízeních bylo mizivé procento. A tak se úpravy pro ně dělaly až na konci celého procesu a byly velmi kostrbaté. Toto se ale začalo rapidně měnit a dnes již je všeobecně mnohem více přístupů z mobilů a tabletů a s tím ruku v ruce vznikl opačný postup – tvořit prvně pro mobilní zařízení, tedy Mobile First přístup, který přináší mnohé výhody.

Jako první přišel s myšlenkou na tuto změnu přístupu Luke Wroblewski, americký specialista na on-line a strategie v roce 2009. Vzápětí o této problematice sepsal i svou knihu Mobile First.

User Experience (UX)

Malý displej – lepší použitelnost

V desktopové době býval vzhled stránek značně neučesaný. Často obsahovaly různé sloupce, kde se zdvojovaly informace, které mohly uživatele i zavádět. Byly zde zbytečné prvky a ty tříštily pozornost. Změnou soustředění na malou obrazovku se tak dospělo i k velkému třídění, co je opravdu důležité, co posunout dolů a co úplně odstranit. A pokud jsme tuto změnu akceptovali na mobilních zařízeních, bylo nasnadě, aby podobné úpravy byly i na desktopové verzi. Jelikož co nebylo důležité na mobilu, stejně tak ztrácelo váhu na běžných velkých screenech. 

Nejdůležitější vpřed

Stejně tak získala na důležitosti i prioritizace, která je vzhledem k velikostem mobilních telefonů velmi důležitá – musíme dobře promyslet, co uživateli naservírujeme jako první a co můžeme odsunout. I proto je přístup Mobile First vhodný používat jako základ své práce. Vždy se snadněji informace přidávají a rozšiřují se či přeskladávají elementy pro desktopové varianty. 

Rychlost a zase rychlost

Mobile First přístup bere i v potaz rychlost načítání stránek. Pokud navrhujeme pro mobily, musíme počítat nejen s nejnovějšími typy chytrých telefonů, ale musíme počítat i s mnohem staršími typy telefonů, které jsou stále mezi lidmi. Na nich se složité stránky s mnoha grafickými prvky načítají opravdu pomalu. Proto je třeba "úspora" i na tomto místě a stránky či aplikace musíme vytvářet tak, aby nebyly plné zbytečného balastu a nadměrně velké grafiky.

Mobile First Indexing

Mobile First přístup má i další pozitiva. Kvalita a provedení stránek pro mobilní zařízení mají velký vliv i pro pozice ve vyhledávačích a potažmo SEO. Společnost Google totiž čím dál více prioritně reaguje a hodnotí právě mobilní zobrazení webu, ale strukturovaná data musejí souhlasit na obou verzích webových stránek.

Přístup Mobile First je tedy velmi důležitou metodou, která by v současné době měla být alfou a omegou jakéhokoliv projektu. V tomto konstrukčním systému tedy berme jako nejdůležitější prvek rozhraní, na kterém se zobrazuje. Další dva přístupy mají ve svém hledáčku spíše jednoduchý vizuál.  

Flat Design

Tento konstrukční přístup má svou podstatu v celkovém uchopení projektu v absolutní jednoduchosti a jde o pojetí, kde je na prvním místě celkové nerušené působení. Flat Design se zaměřuje na tzv. autenticky digitální podstatu a výrazný minimalismus. Jde o design, který je osekán "až na kost" a nepracuje s žádnými metaforami. Jde o cílené zaměření na funkčnost s ohledem na čistou estetičnost. 

Hlavní prvky Flat Designu

Mezi hlavní prvky Flat Designu řadíme:

  • jednoduchý design s jasnou typografií,
  • nevyužívá se zde vůbec stínování či rozmazání,
  • jediná možnost zvýraznění je ztučnění,
  • velice snadno se přizpůsobuje pro responzivní design (pokud tak již není vytvořen),
  • díky jednoduchosti se rychle načítá.

Přílišná snaha o vytvoření jednoduchého a čitelného designu paradoxně způsobuje i jeho největší nevýhody, a to například, že v tomto přístupu příliš nefungují tzv. CTA (call to action) prvky. Ty bez jasného zvýraznění a odlišení mohou ztrácet svou funkci, jelikož je uživatel vůbec nemusí rozeznat.

Material Design

Material Design je konstrukční systém od společnosti Google, který by měl dávat rámec pro tvorbu všem zúčastněným odborníkům. Navrhuje přesnou cestu, jak uchopit styl, rozvržení, animace i jednotlivé komponenty. Jejich výsledkem je pak jednotný a příjemný zážitek, který se uživateli dostává, když interaguje s jakýmkoliv produktem společnosti Google. Společnost Google také neustále pracuje na rozsáhlé dokumentaci a aktualizacích tohoto přístupu.

Při vývoji tohoto principu dala společnost Google vysoký důraz na využívání dotykových obrazovek, i když vycházel z principů klasického zachycování inkoustem na papír. Snažil se totiž o přiblížení fyzikálních vlastností papíru pro obrazovky – vnímá obrazovku jako list papíru, se kterým jde dále pracovat, může měnit tvar, vrhat stín atd.**

User Experience (UX)

Cíle Material Designu

Cílem společnosti Google bylo vytvořit praktický, přístupný a koherentní vizuální jazyk, který využívá klasických principů proto, aby nedocházelo k tvorbě velmi nesourodých rozhraní. Tímto přístupem tak vybudovali systém s jasnými pravidly, který by měl být ideálně používán napříč všemi typy uživatelských zařízení s důrazem na ty mobilní. 

Principy Material Designu

Mezi principy Material Designu řadíme:

  • realističnost vizuálních prvků,
  • "papírová metafora" - inspirace tiskem a papírem ,
  • vysoký význam pohybu, který by nikdy neměl být nadbytečný.

Zhodnocení Material Designu

Jeho výhody spočívají v:

  • jednotnosti a jednoduchosti,
  • jasných principech a cílech jednoduše aplikovatelných pro všechny odborníky,
  • intuitivním používání,
  • využití pohybu jako ukázky, co se děje na obrazovce.

I když celkový přístup Material Designu se snaží být všeobjímající, existují kontexty, ve kterých ani tento přístup není vhodný, nejedná se tak o všeobecnou spásnou metodu. Jednoduchost je dobrá vlastnost, ale některé složitější systémy by přílišnou jednoduchostí ztratily.

V této lekci jsme si tedy představili tři přístupy, jeden založený na přístupu dle zařízení koncového uživatele, a další dva založené na celkové jednoduchosti a soudržnosti designu.

V příští lekci, Konstrukční systémy v UX - Atomický a vizuální design, si představíme princip Atomického a Vizuálního designu jako konstrukčních systémů pro tvorbu uživatelských rozhraní.


 

Předchozí článek
Kvíz - Interakční design a informační architektura v UX
Všechny články v sekci
User Experience (UX)
Přeskočit článek
(nedoporučujeme)
Konstrukční systémy v UX - Atomický a vizuální design
Článek pro vás napsala Natálie Růžičková
Avatar
Uživatelské hodnocení:
53 hlasů
Autorka je odbornicí na digitální marketing, specializuje se také na UX/UI Design. Její oblíbenou disciplínou je SEO a jako nováček se pouští do webového vývoje a programování.
Aktivity