Přehledně: Jaký je rozdíl mezi UX a UI designem?

Proč je návrh designu jako stavba domu?

Představte si, že stavíte dům. Aby vám výsledné dílo nespadlo na hlavu a dobře se vám v něm žilo, je potřeba při stavbě dodržovat určitou posloupnost prací. Stejně to funguje i při tvorbě nového webu.

UX design jako hrubá stavba

Nejprve přichází na řadu UX design. Ve stavební terminologii si ho můžete představit jako hrubou stavbu. Říká nám, jak velký bude dům, kolik bude mít místností, jak budou uspořádané pokoje nebo kudy povedou chodby.

Architekt při návrhu vychází z informací o tom, kdo bude v domě bydlet, jak ho bude používat nebo proč ho chce vůbec stavět. Asi se shodneme, že charakter domu bude odlišný, pokud se do něj nastěhuje pětičlenná rodina se dvěma psy, nebo si ho pořídí manželský pár na důchod.

Oba domy mohou mít stejný počet místností, přesto budou pravděpodobně dost odlišné. Zatímco v prvním případě velkou část prostoru zaberou dětské pokoje a velkorysý obývák, kam se vejde celá rodina, v druhém případě budou hvězdami projektu dvě ložnice pro větší pohodlí, prostorná spíž za kuchyní a třeba i menší kutilská dílna.

U webů je to zrovna tak. Můžete mít dva srovnatelně robustní weby, ve výsledku ale budou rozdílné. Proč? Každý bude cílit na jiný typ uživatelů a bude mít odlišné cíle. Jeden se soustředí na prodej dětského oblečení maminkám na mateřské, druhý na sběr poptávek od IT ředitelů firem.

UX designer proto klade stejné otázky jako architekt. Zajímá ho, proč web vzniká, jaké plány s ním klient má (chce každý měsíc prodat dětské oblečení za milion korun, nebo získat sto poptávek z formuláře?), kdo bude web používat a jaké potřeby tito lidé mají. Ve chvíli, kdy získá dostatek informací, začne navrhovat strukturu webu (stejně jako se architekt pouští do návrhu půdorysu).

Na co přitom designer myslí? Aby návštěvníci webem snadno procházeli, vždy našli, co hledají (v kuchyni taky nebudete pátrat po vaně, to dá rozum) a udělali všechno, co po nich chcete (objednali produkt, poslali poptávku nebo se třeba přihlásili k odběru newsletteru).

Pokud je web navržený tak, aby se na něm návštěvníci cítili dobře, přinášel konverze a plnil stanovené cíle, je vyhráno. Máte web, který je radost používat (a dům, ve kterém se dobře bydlí). Nebo to ještě úplně pravda není?

UI design jako fasáda

B je správně. Máte základ domu. Teoreticky by se v něm dalo začít bydlet – jenže většina z nás chce, aby to nejen fungovalo, ale i hezky vypadalo. A proto máme UI design. Ten slouží jako závěrečné doladění domu. Současně ale často mívá ten největší wow efekt. Říká, jakou barvu bude mít fasáda, střešní krytina, okna i dveře. Vybírá obklady, styl podlah i vnitřní výmalby. Rozhoduje o tom, jaké typy obrazů budou viset na stěnách a jestli pokojům bude slušet monstera nebo spíš fíkus.

U webů jde o stylový kabátek, do kterého designéři oblékají první kostru webu (takzvaný drátěný model čili wireframe). Řeší se barevnost, fonty, fotky, vizualizace, videa, vzhled komponent i tlačítek a taky to, jestli je web přístupný pro všechny bez rozdílu a dodržuje pravidla vizuální identity vaší značky. 

Dost ale povídání o domech, pojďme si pojmy UX a UI rozebrat podrobněji.

Co je UX design (User Experience)?

UX design neboli design uživatelské zkušenosti se zaměřuje na to, jak se uživatelé cítí a jak se jim navrhovaný produkt používá. Cílem je připravit vše tak, aby produkt splnil očekávání uživatelů a jejich cesta byla při používání produktu logická, snadná, srozumitelná a bez zbytečných překážek.

Na první pohled není UX design vidět, tvoří ale základ všech návrhů. Nemusí přitom jít pouze o tvorbu webu – designéři řeší uživatelskou zkušenost u různých typů produktů.

Pro naše potřeby se ale soustředíme především na digitální platformy – weby, e-shopy, online portály či aplikace. 

Co dělá UX designer

• Analyzuje a definuje (cílové skupiny, potřeby i obavy uživatelů, vize a cíle webu).
• Navrhuje strukturu celého webu (sitemap) s ohledem na uživatelské cíle a layout jednotlivých stránek.
• Tvoří prvotní – drátěný model webu (wireframe).
• Ladí rozložení prvků a obsahu.
• Testuje navržená řešení a optimalizuje je.

Výsledkem je přehledná struktura webu a wireframe, které odpovídají potřebám uživatelů a tomu, jaké má klient s webem plány – resp. co od něj očekává (přečtěte si, proč je důležité si na začátku projektu dobře stanovit cíle).

Proč je UX design důležitý

Dobré UX přináší:

• snadnou orientaci na webu,
• jednoduché používání,
• vyšší konverze,
• spokojenější zákazníky.

Nepřeháníme, když klientům říkáme, že bez kvalitního UX může být i krásný design nepoužitelný. Není radno ho podceňovat, opravdu. 

Co je UI design (User Interface)?

UI design znamená vzhled a styl rozhraní. Zahrnuje vizuální prvky, jako jsou barvy, typografie, tlačítka, ikony nebo ilustrace. Zjednodušeně jde o to, jak produkt vypadá a jak se uživatelům vizuálně prezentuje.

Korespondovat byl měl s (vizuální) identitou značky – aby si uživatel jednoduše web spojil s ostatními výstupy brandu, snáz si ho zapamatoval a měl v něj důvěru. Že vaše značka ještě nemá identitu definovanou? S tím umíme pomoct.

Viditelný je UI design na první pohled. Na rozdíl od UX se ale týká pouze webů a aplikací. 

Co dělá UI designer

• Vybírá barvy a fonty.
• Navrhuje vzhled komponent a tlačítek.
• Dbá na dodržení vizuální identity.
• Hlídá přístupnost– ladí kontrasty barev, velikost písma a přizpůsobuje design zobrazení na různých zařízeních.

Proč je UI design důležitý

Díky kvalitnímu UI:

• produkt působí profesionálně,
• uživatel se lépe orientuje,
• vzniká dobrý první dojem.

UI jednoduše přispívá k  tomu, že uživatel chce navrhovaný produkt používat. A web (či jiná platforma) díky němu zapadá do celkové vizuální prezentace značky.

UX vs UI: Jaký je mezi nimi hlavní rozdíl?

Hledáte rychlé srovnání UX vs. UI?

• UX řeší funkčnost a logiku – tvoří konstrukci produktu.
• UI řeší vzhled a styl – halí produkt do hezkého kabátku.

Obě disciplíny jsou úzce propojené. UX definuje, jak má produkt fungovat, UI mu dává vizuální podobu. Společně tak tvoří silnou dvojku, která stojí za úspěšnou realizací každého webového projektu. 

Příklady UX a UI v praxi

UX a UI design dohromady tvoří webdesign. Za více než dvacet let fungování agentury jsme jich pro klienty vytvořili stovky.

Jak vypadá design v UX fázi a jak v UI fázi? Pojďme si to ukázat na konkrétním příkladu.

Takhle vypadal wireframe webu (UX design) pro klienta Agrotec.

Na co se zaměřit: struktura stránky, rozložení prvků, konverzní cesta, výzva  akci.

A tohle je stejný web poté, co získal vizuálně atraktivní kabátek (UI design). 

Na co se zaměřit: výběr barev, fontu, fotek, barva tlačítek, velikosti písma.

Potřebujete nový design?

Už nějakou dobu váš web běží a vy přemýšlíte, zda se vyplatí investovat do jeho redesignu?  S odpovědí vám může pomoct audit webu – v rámci něj zhodnotíme současný stav a doporučíme případná zlepšení, aby byl web funkční, uživatelé se na něm snadno zorientovali a vy dosáhli vytyčených cílů.

Navrhujeme ale design i zcela nových webů. Pokud teprve začínáte a pro vaši značku zatím nemáte pevně ukotvenou ani vizuální identitu, ze které bychom při UI designu mohli vyjít, můžeme začít nejprve s ní.

Stačí napsat nebo zavolat a probereme možnosti.