Proč rozlišovat UX a UI
UX (User Experience) a UI (User Interface) jsou dvě úzce provázané, avšak odlišné 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 napomáhá vytvářet kvalitnější produkty, efektivněji rozhodovat a předcházet častým nedorozuměním v týmu i u stakeholderů.
Definice: co je UX a co je UI
- UX (User Experience): souhrn dojmů a výsledků uživatele při interakci s produktem. Řeší proč, co a jak – z hlediska hodnoty, použitelnosti, užitečnosti a přístupnosti. 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, typografii, ikonografii, mřížky, komponenty a jejich stavy. Výstupy zahrnují design systém, knihovny komponent, 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, nízkofidelitní prototypy, doporučení | UI kit, design systém, vysokofidelitní obrazovky, specifikace, tokeny |
| Úspěch měří | Úspěšnost úkolu, 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, nízkofidelitní prototypy | 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ů podle 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í, načítání, chyby). Vzory jako modály, toast notifikace, akordeony, stránkování či nekonečné scrollování musí být konzistentní a přístupné (management fokusu, ovládání klávesnicí, ARIA role).
Design systém a design tokens
- Design tokens: atomické proměnné (barvy, mezery, radius, typografie) sdílené napříč platformami.
- Komponenty: tlačítka, formuláře, záložky, tabulky, karty – s definovanými stavy a chováním.
- Governance: verze, model přispívání, 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 rušení.
- High-fi (UI): pixelově přesné 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 úkolů pro uživatele s asistivními technologiemi, obsahová struktura a textace.
- UI: kontrasty, stavy fokusu, čitelnost, velikost cílových ploch, srozumitelné chyby a nápovědy.
- Výsledky: splnění WCAG 2.1 AA (minimálně), testy s reálnými uživateli a čtečkami obrazovky.
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 výzev k akci.
Metodiky a proces: double diamond, lean UX, design sprint
- Double Diamond: diverzifikace a konvergence ve fázích objevování a doručování (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ých rizik během pěti dnů – 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 recenze, vizuální regresní testy, living styleguide, rozdělení odpovědností mezi designem a frontendem.
Metodiky měření a KPI
- UX KPI: míra úspěšnosti úkolu, čas na úkol, chybovost, 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 oprav reflow.
- Experimentace: A/B testy s dostatečnou statistickou silou, definované guardraily (např. chybovost, výkon).
Časté omyly a antipatterny
- „UI = UX“: zaměňování vrstev vede ke koncentraci na „hezky vypadající obrazovky“ namísto řešení uživatelských problémů.
- Překreslování bez výzkumu: redesign bez evidencí často nezlepšuje klíčové metriky a zvyšuje riziko neúspěchu.
- Komponenty bez pravidel: UI kit bez zásad použití a výjimek vede k nekonzistenci.
- Ignorace prázdných/chybových stavů: absence navigace a prevence chyb zhoršuje UX i zákaznickou podporu.
- „Dribbblizace“: upřednostňování efektních vizuálních prvků 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: integruje výzkum, IA a uživatelské toky s prvky UI v rámci produktových cílů.
- UI/Visual Designer: rozvíjí vizuální jazyk a komponenty, dbá na konzistenci a detaily.
- Content/UX Writer: navrhuje srozumitelný obsah a mikrotexty.
- Design Ops: zajišťuje 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í procesu a jasné informace; UI řeší vizuální hierarchii cen, CTA, validační stavy a responzivní mřížku.
- Onboarding v SaaS: UX definuje kritickou cestu k „aha momentu“ a 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, řazení problémů podle dopadu, pravidelné designové recenze.
- Design systém jako most: tokeny vycházející z UX principů použitelnosti, komponenty z UI pro implementaci.
- 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 realizovatelné. 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í.
