Rozdíl mezi UI a UX: proč krásný design nestačí, když lidé na webu bloudí

01UI a UX: co je co

Pojem „user experience“ použil poprvé Don Norman v roce 1993, když vedl tým v Applu. Připomíná to Jakob Nielsen, Normanův pozdější společník ve firmě Nielsen Norman Group. Oba ho v roce 1998 definovali jako všechny aspekty toho, jak koncový uživatel přichází do styku s firmou, jejími službami a produkty. Uživatelské rozhraní je podle nich jen jedna, byť velmi důležitá součást.

Mezinárodní norma ISO 9241-210 z roku 2019 to říká přesněji. UX podle ní tvoří vnímání a reakce člověka, které vznikají z používání produktu nebo služby, ale i z pouhého očekávání, že je bude používat. Patří sem emoce, přesvědčení, pohodlí i to, čeho uživatel dosáhl, a to před použitím, během něj i po něm. UI norma popisuje střízlivěji: všechny součásti systému, které uživateli dávají informace a ovládací prvky, aby mohl splnit úkol.

Norman s Nielsenem to vysvětlují na příkladu webu s recenzemi filmů. I kdyby bylo vyhledávání filmů dokonalé, člověk, který hledá malý nezávislý film, odejde zklamaný, když databáze obsahuje jen snímky velkých studií. Bezchybné UI, špatné UX. Na firemním webu je to stejné: pěkně nakreslený ceník vám nepomůže, když v něm chybí cena služby, kvůli které zákazník přišel.

Česky se UX nejčastěji překládá jako uživatelská zkušenost, občas jako uživatelský prožitek. Pro usability se používá slovo použitelnost: jak snadno, rychle a bez chyb lidé s webem splní, co potřebují. Použitelnost je tedy vlastnost rozhraní a UX je širší pojem, do kterého patří i obsah, rychlost, důvěra nebo zákaznická podpora.

02Proč krásný design klame

V roce 1995 otestovali Masaaki Kurosu a Kaori Kashimura z Hitachi Design Center 26 variant ovládání bankomatu. Podle shrnutí NN/g nechali 252 lidí hodnotit, jak se jim každý návrh líbí a jak snadno se podle nich ovládá. Hodnocení krásy souviselo víc s tím, jak snadné se lidem ovládání zdálo, než se skutečnou snadností ovládání. V UX se tomu dnes říká efekt estetiky a použitelnosti.

Noam Tractinsky s kolegy šel v roce 2000 dál. Nechal 132 studentů pracovat se simulovaným bankomatem, u kterého měnil vzhled i skutečnou použitelnost. Vyšlo mu, že vzhled ovlivnil, jak použitelný lidem systém připadal i po skončení práce. Skutečná použitelnost takový vliv neměla.

Pro firmu to má praktický důsledek. Když ukážete návrh webu vedení nebo pár kolegům, řeknou vám, jestli se jim líbí. Neřeknou vám, jestli se v něm zákazník vyzná. NN/g popisuje účastnici testu, která na webu výrobce náramků Fitbit narazila na řadu problémů včetně vážných chyb v navigaci. Úkol s obtížemi dokončila, a přesto pak snadnost použití ohodnotila velmi vysoko. Kvůli pěknému designu podle NN/g lidé odpustí drobné nedostatky, velké ale ne.

Vzhled přitom rozhoduje rychle. Studie Alexandra Tucha a kolegů z roku 2012, kterou zveřejnil Google Research, ukázala, že vizuální složitost a to, nakolik web vypadá „typicky“ pro svůj obor, ovlivní hodnocení vzhledu během prvních 50 milisekund, v některých případech už za 17. Nejlépe dopadly jednoduché weby, které vypadaly tak, jak lidé u daného typu webu čekají. Za hezký tedy lidé nepovažují originální web, ale takový, který odpovídá jejich představě.

03Jak vypadá bloudění na webu

Bloudění málokdy vypadá dramaticky. Návštěvník neklikne na menu, protože ho nevidí. Klikne na „Služby“, i když hledá ceník. Zadá do vyhledávání „reklamace“ a dostane výsledky z blogu. Po půl minutě odejde a v analytice z toho zbude jen krátká návštěva.

Schovaná navigace

Nielsen Norman Group v roce 2016 otestovala se 179 lidmi šest webů ve třech verzích: s navigací schovanou pod ikonou „hamburgeru“, s viditelným menu a s kombinací obojího. Na počítači sáhli lidé po schovaném menu jen ve 27 % případů, po viditelném ve 48 % a po kombinovaném v 50 %. Úkoly jim se schovanou navigací trvaly nejméně o 39 % déle. Obtížnost úkolů hodnotili lidé (na počítači i mobilu dohromady) o 21 % hůř než u viditelného menu. Na mobilu lidé po navigaci sahají častěji, i tak ale kombinovanou navigaci použili v 86 % případů a schovanou jen v 57 %.

Kategorie, které dávají smysl jen firmě

Baymard Institute každý rok testuje přední e-shopy v USA a Evropě. V hodnocení za rok 2025 vyšla navigace přes úvodní stránku a kategorie jako průměrná až slabá u 58 % webů na počítači a 67 % na mobilu. Celých 95 % webů v hlavním menu nezvýrazní, ve které sekci člověk právě je. Příliš jemné dělení sortimentu do mnoha kategorií, které lidem brání najít vhodné zboží, našel Baymard u 75 % testovaných webů.

Vyhledávání, které nezná vaše slova

Kdo se ztratí v menu, zkusí vyhledávání. Podle Baymardu ho ale 56 % webů zvládá jen průměrně nebo hůř. Nejhůř dopadají dotazy, které se netýkají zboží: 66 % webů s nimi má potíže, přestože 34 % účastníků testů hledalo vyhledávacím polem třeba podmínky vrácení zboží nebo zrušení objednávky.

Odkazy typu „více“ a „zde“

Digitální a informační agentura kontroluje přístupnost webů státu a obcí. Podle její zprávy za roky 2022 až 2024 bylo čtvrtou nejčastější chybou, že z odkazu nebylo poznat, kam vede: 581 nálezů. Nejčastější chybou vůbec byl nedostatečný kontrast textu, hlavně u tlačítek a nadpisů (715 nálezů). Obojí jsou přesně ty chyby, které v grafickém návrhu vypadají elegantně a v praxi lidi zdržují.

04Bloudění v číslech: jak jsou na tom Češi

Eurostat se každé dva roky ptá, jestli lidé při používání webu nebo aplikace úřadů narazili na problém. V roce 2024 uvedlo 20 % Čechů ve věku 16 až 74 let, že web nebo aplikace úřadu byly obtížně použitelné. Průměr EU byl 13,65 %. V roce 2022 to v Česku bylo 15,4 %. Vyšší podíl než Česko hlásilo jen pět zemí EU.

Zajímavé je srovnání s technickými potížemi. Na chyby a výpadky úředních webů narazili Češi méně často než průměr EU (14,01 % proti 15,97 %). Že se web úřadu nedal použít na mobilu, uvedlo 11,02 % Čechů, v EU 6,79 %. Technických potíží tedy Češi hlásí méně než průměr EU, s použitelností a s mobilem je to naopak. Nevysvětluje to ani častější používání: weby a aplikace úřadů použilo v roce 2024 73,99 % Čechů proti 70,01 % v EU, což je rozdíl mnohem menší.

Nešikovností uživatelů se to vysvětlit nedá. Aspoň základní digitální dovednosti má podle Eurostatu 70,45 % Čechů ve věku 16 až 74 let, výrazně víc než průměr EU (60,4 %). Když se na webech úřadů ztrácí populace, která je digitálně zdatnější než evropský průměr, ukazuje to spíš na chyby ve webech.

Úřady jsme vybrali proto, že pro ně existuje srovnatelná evropská statistika zaměřená přímo na obtížnou použitelnost. Firemní weby a e-shopy trpí často stejnými chybami, jak ukazují data Baymardu výše, celostátně se ale takhle přímo neměří. Jak se to projeví na poptávkách a objednávkách, rozebíráme v článku Proč hezký web nestačí.

05Jak zjistit, že lidé bloudí, bez velkého rozpočtu

Dobrá zpráva: na odhalení většiny problémů nepotřebujete laboratoř ani stovky respondentů. Stačí pár lidí z cílové skupiny, jasně zadané úkoly a ochota dívat se, aniž byste radili.

Test s pěti lidmi

Jakob Nielsen a Thomas Landauer v roce 1993 spočítali, že jeden testovací uživatel odhalí v průměru 31 % problémů použitelnosti a pět uživatelů zhruba 85 %. Nielsen z toho odvodil známé doporučení: místo jednoho velkého testu s 15 lidmi udělejte tři menší po pěti a mezi nimi opravujte. Platí to pro kvalitativní test se srovnatelnými uživateli. Pro statisticky spolehlivá čísla doporučuje NN/g nejméně 20 lidí a pro třídění karet nejméně 15 na skupinu.

První klik

Bob Bailey a Cari Wolfson vyhodnotili 12 testů použitelnosti na webech americké státní správy z let 2006 až 2009. Když lidé klikli napoprvé správně, dokončili úkol s pravděpodobností 87 %. Když ne, jen se 46 %. Test prvního kliku je přitom rychlý: jeden scénář zabral účastníkům méně než 30 sekund. Ukážete člověku stránku, zadáte úkol („Kde byste hledali ceník servisu?“) a zapíšete, kam klikne.

Test stromu a třídění karet

Menu se dá otestovat dřív, než existuje grafika. Při testu stromu (tree testing) dostanou lidé jen textovou strukturu webu a hledají v ní zadané věci. Uvidíte, kde odbočí špatně, a vzhled přitom výsledek nezkresluje. Při třídění karet (card sorting) naopak lidé sami skládají obsah do skupin, takže zjistíte, jak o vašich službách přemýšlejí oni. Podle dat Tullise a Wooda odpovídá výsledek pěti účastníků konečnému výsledku jen s korelací 0,75, patnácti účastníků s korelací 0,90.

Co vám řekne analytika

• Co lidé píšou do vyhledávání na webu. Častý dotaz na věc, která v menu je, obvykle ukazuje na nejasný popisek nebo přehlédnutelné menu.
• Stránky, ze kterých lidé odcházejí brzy po příchodu, i když na nich má pokračovat cesta k poptávce.
• Kliknutí na prvky, které odkazem nejsou. Ukáže je heatmapa nebo záznam relací.
• Otázky v telefonech a e-mailech. Když se lidé opakovaně ptají na věc, která na webu je, nenašli ji.

Analytika vám ukáže, kde se lidé ztrácejí. Proč se ztrácejí, zjistíte jedině tak, že se na ně při práci podíváte.

06Přístupnost: část UX, kterou hlídá zákon

Web, který nepřečte čtečka obrazovky, který nejde ovládat klávesnicí nebo má světle šedý text na bílém pozadí, je pro část lidí neprůchozí. Od 28. 6. 2025 je účinný zákon č. 424/2023 Sb., český převod evropského aktu o přístupnosti (směrnice 2019/882). Týká se jen vyjmenovaných služeb pro spotřebitele, například e-shopů a dalších služeb elektronického obchodování, finančních služeb, elektronických komunikací, prodeje e-knih nebo vybrané dopravy.

• Mikropodniky jsou vyňaté. Služby firmy s méně než 10 lidmi a obratem nebo bilanční sumou do 2 mil. EUR pod zákon nespadají (MPO).
• Dozor má Česká obchodní inspekce, u některých služeb jiné úřady. Za nepřístupnou službu hrozí pokuta až 10 mil. Kč (§ 25 zákona).
• Informace o přístupnosti musí být ve všeobecných obchodních podmínkách nebo podobném dokumentu (§ 14).
• Neaktualizovaný obsah je výjimkou jen do první změny. ČOI upozorňuje, že jakmile obsah po 28. 6. 2025 upravíte, musí být web přístupný.
• Weby státu, krajů a obcí řeší samostatný zákon č. 99/2019 Sb., dozor nad ním má Digitální a informační agentura.

Technickým měřítkem jsou pravidla WCAG. Aktuální verze WCAG 2.2 z října 2023 přidala mimo jiné požadavek, aby nápověda a kontakt, pokud se opakují na více stránkách, byly vždy na stejném místě, a minimální velikost klikací plochy 24 × 24 CSS pixelů (s výjimkami). Obojí přímo souvisí s tím, jestli se lidé na webu ztrácejí. Pokud si nejste jistí, jestli se na vás zákon vztahuje, ověřte si to u právníka. Tento článek právní radu nenahrazuje.

07Kdo dělá UI, kdo UX a kolik to stojí

Národní soustava povolání popisuje UX designéra (oficiálně „webový interakční designer“) jako člověka, který dělá uživatelský výzkum a navrhuje obsah, strukturu webu i uživatelské rozhraní. Na jeho práci pak navazují webový grafik, kodér a programátoři. UI designér se víc soustředí na vizuální podobu: barvy, typografii, komponenty a to, aby všechny obrazovky držely pohromadě.

U menšího firemního webu dělá obojí často jeden člověk. Není to chyba, pokud se ve výsledku na UX nezapomene. Varovný signál je jiný: když dodavatel ukazuje první grafické návrhy dřív, než se zeptal, kdo jsou vaši zákazníci a co na webu hledají.

Kolik UX designéři v Česku vydělávají, se dá zjistit jen nepřímo. Samostatný kód pro ně statistika nemá. Národní soustava povolání je řadí do skupiny Grafici a výtvarníci v multimédiích (CZ-ISCO 2166), kam patří i grafici, ilustrátoři a animátoři. Podle ISPV měla tato skupina v roce 2025 medián hrubé měsíční mzdy 58 355 Kč. Webový vývojář měl 90 617 Kč, medián za celé Česko byl 43 241 Kč. Podle průzkumu portálu Platy.cz vydělává 80 % UX designérů 47 589 až 130 160 Kč hrubého měsíčně, jde ale o vlastní hlášení uživatelů bez uvedeného období.

Pro vás jako zadavatele z toho plyne hlavně jedno: UX není příplatek za hezčí obrázky. Je to práce, která probíhá před grafikou a po spuštění. Na co se ptát dodavatele a co mít připravené, popisujeme v článku Podklady pro nový firemní web. Jak celý projekt u nás probíhá, najdete na stránce Jak to probíhá.

08Postup: od výzkumu k hezkému rozhraní

Norma ISO 9241-210 stojí na jednoduché myšlence: navrhovat podle skutečných lidí, zapojit je do vývoje a výsledky ověřovat. Sama uvádí, že stavět systémy na nevhodném nebo neúplném pochopení potřeb uživatelů je jednou z hlavních příčin jejich selhání. V praxi to u webu vypadá zhruba takto:

1. Poznat lidi a jejich úkoly. Rozhovory se zákazníky a obchodníky, data z analytiky, nejčastější dotazy.
2. Navrhnout strukturu. Co na web patří, jak to pojmenovat a seskupit. Tady pomůže třídění karet.
3. Ověřit strukturu. Test stromu ukáže, jestli lidé najdou ceník, kontakt nebo konkrétní službu.
4. Wireframy a [prototyp](/slovnik-pojmu#prototyp). Rozvržení stránek bez barev, na kterém otestujete první kliky a hlavní úkoly s pěti lidmi.
5. Grafický návrh (UI). Barvy, písmo a komponenty na ověřeném základu. Kontrast a velikosti hned podle WCAG.
6. Spuštění a měření. Vyhledávání na webu, odchody, dotazy zákazníků. Opravy podle dat, ne podle dojmu.

Pokud web děláte hlavně kvůli poptávkám, vyplatí se k tomu i text, který lidem hned řekne, kde jsou. Co musí stránka sdělit v prvních vteřinách, popisujeme v článku Pravidlo 3 vteřin, jak psát texty pro vstupní stránky, v článku o copywritingu pro landing page.

09Tři čísla o UX, kterým nevěřte

Kolem UX koluje několik působivých statistik, které se opisují z prezentace do prezentace. Dohledali jsme, odkud se vzaly.

• „Každý dolar vložený do UX se vrátí stonásobně.“ Nejstarší verzi jsme našli u IBM z roku 2001, a to jako orientační pravidlo o návratnosti 10 až 100 dolarů na dolar. Opírá se mimo jiné o Rogera Pressmana, který ale psal o nákladech na opravu chyby: v návrhu stojí 1, ve vývoji 10 a po vydání 100 a víc. Forresterův report, kterému se číslo 100 dnes připisuje, je placený a číslo v jeho veřejném popisu není.
• „88 % lidí se po špatné zkušenosti na web nevrátí.“ Pochází z průzkumu firmy Gomez z roku 2010 mezi 1 500 spotřebiteli. Týkal se rychlosti a výpadků webů, ne designu, a doslova říká, že se lidé na web vrátí „s menší pravděpodobností“, ne že se nevrátí vůbec.
• „94 % prvních dojmů je o designu.“ Připisuje se studii z Northumbria University z roku 2004, ve které 15 žen hledalo zdravotní informace. Autoři zjistili, že vzhled rozhodoval o tom, které weby lidé odmítli, zatímco o důvěře rozhodoval obsah. Samotné číslo 94 % se nám v dostupných textech ověřit nepodařilo.

Na obhajobu UX žádná nafouknutá čísla nepotřebujete. Stačí se podívat, jak pět vašich zákazníků zkouší na webu najít ceník.

10Kontrolní seznam: bloudí lidé na vašem webu?

• Je hlavní navigace na počítači vidět bez klikání na ikonu?
• Jsou položky menu pojmenované slovy zákazníků, ne interními názvy oddělení a produktů?
• Pozná návštěvník na každé stránce, v jaké sekci je?
• Je z textu každého odkazu a tlačítka jasné, kam vede? Žádné „více“ a „zde“.
• Najde vyhledávání i ceník, reklamace nebo obchodní podmínky, nejen zboží?
• Má text dostatečný kontrast a dají se tlačítka pohodlně trefit prstem?
• Viděli jste někdy pět zákazníků plnit na webu běžný úkol? Třeba „najděte cenu a pošlete poptávku“.

Pokud jste u tří a více otázek odpověděli ne, je dost možné, že se lidé na vašem webu ztrácejí. Pro webové aplikace a interní systémy platí totéž, jen je v sázce víc: podrobněji to rozebírá článek UX design webové aplikace. A když budete stavět nový web, začněte strukturou a testy, grafika přijde na řadu potom. Stejně postupujeme i u webů na míru, které navrhujeme.

11Časté otázky

12Zdroje

• Nielsen Norman Group: The Definition of User Experience, 100 Years of UX, Aesthetic-Usability Effect
• Nielsen Norman Group: Hamburger Menus, Test with 5 Users, How Many Test Users, Tree Testing, Card Sorting, Card Sorting: How Many Users
• ISO: 9241-210:2019, 9241-11:2018
• Tractinsky, Katz, Ikar: What is beautiful is usable, 2000; Kurosu, Kashimura: Apparent usability vs. inherent usability, 1995; Google Research: první dojem z webu, 2012
• Bailey, Wolfson: FirstClick Usability Testing (archivní kopie)
• Baymard Institute: navigace, vyhledávání, výpis produktů, kategorie
• Eurostat: problémy s weby úřadů, digitální dovednosti
• Česko: zákon č. 424/2023 Sb., zákon č. 99/2019 Sb., MPO, ČOI
• Digitální a informační agentura: zpráva o monitorování přístupnosti 2022 až 2024
• Mzdy: ISPV 2025, Národní soustava povolání, Platy.cz
• W3C: Co je nového ve WCAG 2.2; směrnice 2019/882