13. diel - Konštrukčné systémy v UX - Mobile First, Flat Design

V predchádzajúcej lekcii, UX: Ako vybudovať dôveru užívateľa , sme si predstavili niekoľko zásad, ktoré je dobré dodržať, aby sme si vybudovali dôveru užívateľa.

V tomto kurze sme si už povedali veľa vecí o tom, ako vytvárať užívateľsky prívetivé prostredie a čo všetko je na to potrebné poznať a aplikovať. V dnešnej lekcii je potrebné ale doterajšie vedomosti rozšíriť o ďalšiu oblasť – tzv. Konštrukčné systémy. Konkrétne sa zameriame na tri prístupy, ako je možné pojať tvorbu užívateľských rozhraní - Mobile First, Flat Design a Material Design.

Konštrukčné systémy pre stavbu užívateľských rozhraní

Aj keď názov Konštrukčné systémy znie skôr ako z oblasti stavebníckej, aj UX dizajnér svoje weby a aplikácie svojim spôsobom stavia. A pre každú stavbu je potrebné vybrať vhodný systém, ktorého pravidiel sa treba držať. Každý konštrukčný systém je vypracovaný na inom základe. Niekedy je primárnym zameraním nejaký cieľ, niekedy vizuálna stránka, inokedy zase systém práce. My si dnes predstavíme tri prístupy – Mobile First, Flat Design a Material Design.

Začneme tým v dnešnej dobe najaplikovanejším. Na tento prístup by sme mali v základe myslieť pri každej našej tvorbe.

Mobile First prístup

Ako Mobile First prístup či Mobile First Design označujeme spôsob navrhovania a vytvárania webových aplikácií, ktorý dáva na prvé miesto zobrazenie v mobilnom zariadení pred desktopovým zobrazením. Tento prístup vznikol v čase, keď sa začalo dbať na responzivitu webov. Predtým totiž programátori tvorili weby s ohľadom na veľké a široké obrazovky desktopových zariadení, pretože zobrazovanie stránok na mobilných zariadeniach bolo mizivé percento. A tak sa úpravy pre nich robili až na konci celého procesu a boli veľmi kostrbaté. Toto sa ale začalo rapídne meniť a dnes už je všeobecne oveľa viac prístupov z mobilov a tabletov a s tým ruka v ruke vznikol opačný postup - tvoriť prvýkrát pre mobilné zariadenia, teda Mobile First prístup, ktorý prináša mnohé výhody.

Ako prvý prišiel s myšlienkou na túto zmenu prístupu Luke Wroblewski, americký špecialista na on-line a stratégie v roku 2009. Vzápätí o tejto problematike spísal aj svoju knihu Mobile First.

Malý displej – lepšia použiteľnosť

V desktopovej dobe býval vzhľad stránok značne neučesaný. Často obsahovali rôzne stĺpce, kde sa zdvojovali informácie, ktoré mohli používateľov aj zavádzať. Boli tu zbytočné prvky a tie trieštili pozornosť. Zmenou sústredenia na malú obrazovku sa tak dospelo aj k veľkému triedeniu, čo je naozaj dôležité, čo posunúť dole a čo úplne odstrániť. A ak sme túto zmenu akceptovali na mobilných zariadeniach, bolo zrejmé, aby podobné úpravy boli aj na desktopovej verzii. Keďže čo nebolo dôležité na mobile, rovnako tak strácalo váhu na bežných veľkých screenoch.

Najdôležitejšie vpred

Rovnako tak získala na dôležitosti aj prioritizácia, ktorá je vzhľadom k veľkostiam mobilných telefónov veľmi dôležitá – musíme dobre premyslieť, čo užívateľovi naservírujeme ako prvé a čo môžeme odsunúť. Aj preto je prístup Mobile First vhodný používať ako základ svojej práce. Vždy sa ľahšie informácie pridávajú a rozširujú sa alebo prekladávajú elementy pre desktopové varianty.

Rýchlosť a zase rýchlosť

Mobile First prístup berie aj do úvahy rýchlosť načítania stránok. Ak navrhujeme pre mobily, musíme počítať nielen s najnovšími typmi smartfónov, ale musíme počítať aj s oveľa staršími typmi telefónov, ktoré sú stále medzi ľuďmi. Na nich sa zložité stránky s mnohými grafickými prvkami načítajú skutočne pomaly. Preto je treba "úspora" aj na tomto mieste a stránky či aplikácie musíme vytvárať tak, aby neboli plné zbytočného balastu a nadmerne veľkej grafiky.

Mobile First Indexing

Mobile First prístup má aj ďalšie pozitíva. Kvalita a prevedenie stránok pre mobilné zariadenia majú veľký vplyv aj pre pozície vo vyhľadávačoch a poťažmo SEO. Spoločnosť Google totiž čoraz viac prioritne reaguje a hodnotí práve mobilné zobrazenie webu, ale štruktúrované dáta musia súhlasiť na oboch verziách webových stránok.

Prístup Mobile First je teda veľmi dôležitou metódou, ktorá by v súčasnej dobe mala byť alfou a omegou akéhokoľvek projektu. V tomto konštrukčnom systéme teda berme ako najdôležitejší prvok rozhrania, na ktorom sa zobrazuje. Ďalšie dva prístupy majú vo svojom hľadáčiku skôr jednoduchý vizuál.

Flat Design

Tento konštrukčný prístup má svoju podstatu v celkovom uchopení projektu v absolútnej jednoduchosti a ide o poňatie, kde je na prvom mieste celkové nerušené pôsobenie. Flat Design sa zameriava na tzv. autenticky digitálnu podstatu a výrazný minimalizmus. Ide o dizajn, ktorý je osekaný "až na kosť" a nepracuje so žiadnymi metaforami. Ide o cielené zameranie na funkčnosť s ohľadom na čistú estetickosť.

Hlavné prvky Flat Designu

Medzi hlavné prvky Flat Designu radíme:

• jednoduchý dizajn s jasnou typografiou,
• nevyužíva sa tu vôbec tieňovanie či rozmazanie,
• jediná možnosť zvýraznenia je stučnenie,
• veľmi ľahko sa prispôsobuje pre responzívny dizajn (pokiaľ tak už nie je vytvorený),
• vďaka jednoduchosti sa rýchlo načíta.

Prílišná snaha o vytvorenie jednoduchého a čitateľného dizajnu paradoxne spôsobuje aj jeho najväčšie nevýhody, a to napríklad, že v tomto prístupe príliš nefungujú tzv. CTA (call to action) prvky. Tie bez jasného zvýraznenia a odlíšenia môžu strácať svoju funkciu, pretože ich používateľ vôbec nemusí rozoznať.

Material Design

Material Design je konštrukčný systém od spoločnosti Google, ktorý by mal dávať rámec pre tvorbu všetkým zúčastneným odborníkom. Navrhuje presnú cestu, ako uchopiť štýl, rozvrhnutie, animácie aj jednotlivé komponenty. Ich výsledkom je potom jednotný a príjemný zážitok, ktorý sa užívateľovi dostáva, keď interaguje s akýmkoľvek produktom spoločnosti Google. Spoločnosť Google tiež neustále pracuje na rozsiahlej dokumentácii a aktualizáciách tohto prístupu.

Pri vývoji tohto princípu dala spoločnosť Google vysoký dôraz na využívanie dotykových obrazoviek, aj keď vychádzal z princípov klasického zachytávania atramentom na papier. Snažil sa totiž o priblíženie fyzikálnych vlastností papiera pre obrazovky – vníma obrazovku ako list papiera, s ktorým ide ďalej pracovať, môže meniť tvar, vrhať tieň atď.**

Ciele Material Designu

Cieľom spoločnosti Google bolo vytvoriť praktický, prístupný a koherentný vizuálny jazyk, ktorý využíva klasické princípy preto, aby nedochádzalo k tvorbe veľmi nesúrodých rozhraní. Týmto prístupom tak vybudovali systém s jasnými pravidlami, ktorý by mal byť ideálne používaný naprieč všetkými typmi užívateľských zariadení s dôrazom na tie mobilné.

Princípy Material Designu

Medzi princípy Material Designu radíme:

• realistickosť vizuálnych prvkov,
• "papierová metafora" - inšpirácia tlačou a papierom ,
• vysoký význam pohybu, ktorý by nikdy nemal byť nadbytočný.

Zhodnotenie Material Designu

Jeho výhody spočívajú v:

• jednotnosti a jednoduchosti,
• jasných princípoch a cieľoch jednoducho aplikovateľných pre všetkých odborníkov,
• intuitívnom používaní,
• využitie pohybu ako ukážky, čo sa deje na obrazovke.

Aj keď celkový prístup Material Designu sa snaží byť všeobjímajúci, existujú kontexty, v ktorých ani tento prístup nie je vhodný, nejedná sa tak o všeobecnú spásnu metódu. Jednoduchosť je dobrá vlastnosť, ale niektoré zložitejšie systémy by prílišnou jednoduchosťou stratili.

V tejto lekcii sme si teda predstavili tri prístupy, jeden založený na prístupe podľa zariadenia koncového užívateľa, a ďalšie dva založené na celkovej jednoduchosti a súdržnosti designu.

V budúcej lekcii, Konštrukčné systémy v UX - Atomický a vizuálny design , si predstavíme princíp Atomického a Vizuálneho designu ako konštrukčných systémov na tvorbu užívateľských rozhraní.