Proč rozlišovat UX a UI
UX (User Experience) a UI (User Interface) jsou dvě úzce provázané, avšak rozdílné disciplíny. UX se zabývá celkovou zkušeností uživatele s produktem nebo službou – od očekávání a nalezení hodnoty až po podporu a retenci. UI se soustředí na vizuální a interakční vrstvu rozhraní – typografii, barvy, komponenty, stavy a mikropohyby. Přesné vymezení obou disciplín pomáhá budovat lepší produkty, efektivněji rozhodovat a vyhnout se častým nedorozuměním v týmu i u stakeholderů.
Definice: co je UX a co je UI
- UX (User Experience): souhrn vjemů a výsledků uživatele při interakci s produktem. Řeší proč, co a jak – z hlediska hodnoty, použitelnosti, užitečnosti a dostupnosti. Výstupy zahrnují výzkumné artefakty, informační architekturu, uživatelské toky, prototypy a doporučení.
- UI (User Interface): vizuální a interakční podoba rozhraní. Řeší jak přesně se prezentuje a ovládá – barvy, typografie, ikonografie, mřížky, komponenty a jejich stavy. Výstupy zahrnují design systém, komponentové knihovny, obrazovky ve vysoké věrnosti a specifikace pro vývoj.
UX vs. UI: srovnání kompetencí
| Dimenze | UX | UI |
|---|---|---|
| Zaměření | Hodnota, použitelnost, tok úkolů, informační architektura | Vizuální hierarchie, estetika, interakční stavy, konzistence |
| Metody | Uživatelský výzkum, persony, scénáře, testování použitelnosti, analytika | Design mřížek, typografie, barvy, komponenty, motion, prototypování |
| Artefakty | Mapy empatie, CJM, sitemap, user flows, low-fi prototypy, doporučení | UI kit, design systém, high-fi obrazovky, specifikace, tokeny |
| Úspěch měří | Task success rate, SUS/UMUX-Lite, NPS, konverze, retence, čas na úkol | Shodu s design systémem, vizuální konzistenci, chybovost interakcí, rychlost implementace |
| Nástroje | Výzkumné platformy, analytika, mapovací nástroje, prototypy low-fi | Figma/Sketch/XD, knihovny komponent, motion nástroje, inspektory |
Uživatelský výzkum a evidence-based přístup (UX)
- Kvalitativní metody: rozhovory, kontextové sondy, moderované testování použitelnosti, deníkové studie.
- Kvantitativní metody: A/B testy, analýza funnelů, heatmapy, clickstream, dotazníky SUS/UMUX-Lite/NPS.
- Syntéza: persony (evidence-based), scénáře, klíčové úkoly (JTBD), priorita problémů dle dopadu a frekvence.
Informační architektura a tok uživatelů (UX)
IA určuje uspořádání obsahu a navigačních struktur. Cílem je minimalizovat kognitivní zátěž, zkrátit cestu k hodnotě a udržet predikovatelnost. Uživatelské toky popisují kroky k dosažení cíle (např. registrace, nákup), včetně větvení, výjimek a chybových stavů.
Vizuální jazyk a konzistence (UI)
- Typografie a mřížky: hierarchie, čitelnost, baseline a modulární škály.
- Barevné tokeny: primární/sekundární paleta, stavy (hover, focus, pressed, disabled), kontrast podle WCAG.
- Ikony a metafory: sémantika, jednotný stroke, optická vyváženost.
Interakční vzory a mikrointerakce (UI)
Mikrointerakce vytvářejí dojem plynulosti a srozumitelnosti (potvrzení, loading, chyby). Vzory jako modály, toast notifikace, akordeony, pagination či infinite scroll musí být konzistentní a přístupné (fokus management, klávesnice, ARIA role).
Design systém a design tokens
- Design tokens: atomické proměnné (barvy, spacing, radius, typografie) sdílené napříč platformami.
- Komponenty: tlačítka, formuláře, taby, tabulky, karty – s definovanými stavy a chováním.
- Governance: verze, přispívací model, dokumentace, audit konzistence a adopce ve vývoji.
Prototypování: low-fi vs. high-fi
- Low-fi (UX): skici, drátěné modely pro rychlé ověření toku a informační architektury bez vizuálního šumu.
- High-fi (UI): pixel-precise obrazovky s typografií, barvami, stavy a motion pro validaci vizuálu a mikrointerakcí.
Přístupnost (a11y) jako společná odpovědnost
- UX: definice požadavků a úloh pro uživatele s asistivními technologiemi, obsahová struktura a texty.
- UI: kontrasty, stavy fokusu, čitelnost, velikost cílových ploch, čitelné chyby a nápovědy.
- Výsledky: splnění WCAG 2.1 AA (minimálně), testy s reálnými uživateli a screen readery.
Obsah a mikrotexty: role UX writingu
Jasné popisky, microcopy a chybové zprávy zkracují čas na úkol a snižují chybovost. UX writer spolu s UX/UI designéry ladí tón a hlas, konzistenci terminologie a smysluplnost call-to-action.
Metodiky a proces: double diamond, lean UX, design sprint
- Double Diamond: diverguj–konverguj ve fázích objevování a doručení (Discover, Define, Develop, Deliver).
- Lean UX: malé iterace, hypotézy, měření dopadu; propojení s produktovým řízením.
- Design Sprint: rychlá validace klíčového rizika v pěti dnech – od mapy problému po uživatelské testy prototypu.
Handoff do vývoje a spolupráce s inženýry
- Specifikace: měřítka, okraje, tokeny, stavy, prázdné a chybové stavy, responzivní breakpoints.
- Zdroj pravdy: knihovna komponent ve Figmě + implementační knihovna (React/Vue/Native), verzování a changelogy.
- Kontrola kvality: UI review, vizuální regresní testy, living styleguide, linie odpovědnosti mezi designem a FE.
Metodiky měření a KPI
- UX KPI: Task Success Rate, Time on Task, Error Rate, SUS, NPS, konverze, retence, aktivace.
- UI KPI: míra vizuálních chyb, shoda s design systémem, počet odchylek, rychlost implementace, počet reflow oprav.
- Experimentace: A/B testy s dostatečnou silou, definované guardraily (např. chybovost, výkon).
Časté omyly a antipatterny
- „UI = UX“: zaměňování vrstev vede k focusu na „hezké obrazovky“ místo řešení uživatelských problémů.
- Překreslování bez výzkumu: redesign bez evidence často nezlepší klíčové metriky a zvýší riziko.
- Komponenty bez pravidel: UI kit bez zásad použití a výjimek vede k nekonzistenci.
- Ignorace prázdných/chybových stavů: chybí navedení a prevence chyb – zhoršení UX i podpory.
- „Dribbblizace“: preference efektních vizuálů před přístupností, výkonem a čitelností.
Role v týmu a kompetenční překryvy
- UX Researcher: plánuje a provádí výzkum, syntetizuje poznatky, validuje hypotézy.
- Product/UX Designer: propojuje výzkum, IA a tok s prvky UI v rámci produktových cílů.
- UI/Visual Designer: rozvíjí vizuální jazyk a komponenty, pečuje o konzistenci a detail.
- Content/UX Writer: navrhuje srozumitelný obsah a microcopy.
- Design Ops: nástroje, procesy, knihovny, měření kvality a efektivity designu.
Příklady: jak se liší přístupy na jednom problému
- Košík e-commerce: UX mapuje bariéry (opouštění košíku, doprava, platby), navrhuje zkrácení toku a jasné informace; UI řeší vizuální hierarchii cen, CTA, stavy validace a responsivní mřížku.
- Onboarding v SaaS: UX formuluje kritickou cestu k „aha momentu“, měří aktivaci; UI vytváří přehledné průvodce, ilustrace a srozumitelné stavy.
Etika a inkluze v UX/UI
Dodržování etických zásad (transparentní sběr dat, respekt k soukromí, žádné temné vzory), podpora inkluze (jazyk, kultura, přístupnost) a vyhodnocování dopadů designových rozhodnutí na různé skupiny uživatelů jsou společnou odpovědností UX i UI.
Jak správně organizovat spolupráci UX a UI
- Sdílená vize a cíle produktu, jasné definice „hotovo“ pro artefakty obou disciplín.
- Společný backlog hypotéz, problémy řazené dle dopadu, pravidelné design crits.
- Design systém jako most: tokeny z UX principů použitelnosti, komponenty z UI potřeb implementace.
- Pravidelná validace s uživateli a kontrola vizuální konzistence při implementaci.
Závěr: dvě poloviny jedné mince
UX a UI design řeší odlišné aspekty téže výzvy – vytvářet produkty, které jsou žádoucí, použitelné a proveditelné. UX stanovuje směr a strukturu založenou na potřebách a datech, UI převádí strategii do srozumitelných, estetických a konzistentních rozhraní. Nejlepších výsledků dosahují týmy, které obě disciplíny vědomě integrují, měří dopad a průběžně iterují.
