UX/UI design

A/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.

Adaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.

Alfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.

Alt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.

Animace klíčových snímků je technika, při které animátor zadá hodnoty vlastnosti (polohu, rotaci, barvu, průhlednost) jen v několika vybraných časech a software dopočítá všechny mezilehlé snímky interpolací. Klíčový snímek tedy nese stav v daném okamžiku, křivka mezi klíči určuje rychlost změny a výsledkem je plynulý pohyb bez ručního kreslení každého snímku.

Anti-aliasing je soubor technik, které omezují zubaté hrany a třepení detailů vznikající při převodu spojitého obrazu na mřížku pixelů. V grafice barvy na hranách obvykle průměruje nebo vzorkuje vícekrát, aby diagonály, text a 3D modely působily plynuleji, i když za cenu výkonu nebo mírné ztráty ostrosti.

Barevný prostor je definice toho, jakou skutečnou barvu představují číselné hodnoty v obrázku nebo na displeji. Určuje tři věci: primární barvy (rozsah zobrazitelných odstínů), bílý bod a přenosovou funkci mezi uloženým číslem a jasem. Bez této definice je trojice čísel jako 255,128,0 jen bezvýznamný údaj.

Card sorting je výzkumná metoda UX, při které účastníci třídí kartičky s názvy obsahu do skupin podle vlastní logiky a skupiny pojmenovávají. Výstupem je podklad pro informační architekturu: strukturu navigace, menu a kategorií. Metoda odhaluje, jak obsahu rozumí uživatelé, ne jak ho vidí interní tým.

Chatbot je software, který vede s uživatelem dialog v přirozeném jazyce, nejčastěji přes web, aplikaci nebo komunikační platformu. Může být pravidlový, napojený na databáze nebo založený na jazykovém modelu; cílem je vyřídit požadavek, poradit, sbírat údaje nebo předat případ člověku.

Cílová skupina je vymezená část trhu, na kterou firma míří produktem, komunikací a cenou, protože u ní očekává nejvyšší pravděpodobnost nákupu. Vymezuje se demografií, chováním, potřebou nebo situací, ve které se člověk nachází. V digitálním marketingu se překlápí do konkrétních parametrů kampaní, segmentů v analytice a rozhodnutí o obsahu webu.

Core Web Vitals je sada uživatelsky orientovaných metrik, kterými Google hodnotí rychlost načtení, odezvu na interakce a vizuální stabilitu webové stránky. V praxi jde hlavně o LCP, INP a CLS, tedy signály, které pomáhají odhalit pomalý obsah, zaseknuté rozhraní nebo poskakující layout.

CSS je jazyk pro popis vzhledu webových dokumentů, zejména HTML stránek. Určuje barvy, typografii, rozestupy, rozvržení, animace i přizpůsobení různým obrazovkám. Díky kaskádě kombinuje pravidla z více zdrojů a podle přesně daných priorit rozhoduje, které vlastnosti se na prvek použijí.

Cumulative Layout Shift je metrika ze sady Core Web Vitals, která měří, jak moc se viditelný obsah stránky během načítání a používání samovolně posune. Hodnota vzniká součtem jednotlivých posunů, kde každý se počítá jako podíl zasažené plochy viewportu vynásobený vzdáleností posunu. Za dobrou se považuje hodnota do 0,1.

Dashboard je vizuální panel, který soustředí klíčové metriky, grafy, upozornění a odkazy na jednu přehlednou obrazovku. Pomáhá rychle sledovat stav produktu, firmy nebo systému, odhalit odchylky a rozhodovat podle aktuálních dat místo procházení mnoha samostatných reportů v různých nástrojích a týmech.

Design sprint je časově ohraničený pracovní formát, obvykle pětidenní, ve kterém malý tým převede podnikatelskou otázku na prototyp a otestuje ho na skutečných uživatelích. Metodiku popsali Jake Knapp a kolegové z Google Ventures. Cílem není hotový produkt, ale rychlé rozhodnutí, zda má smysl daný směr dál vyvíjet.

Design system je sdílený soubor pravidel, komponent, vizuálních tokenů a dokumentace, který pomáhá týmu navrhovat a vyvíjet konzistentní digitální produkty. Propojuje UX, UI a frontend, aby tlačítka, formuláře, barvy, typografie i chování aplikace nevznikaly pokaždé znovu a šly bezpečně měnit napříč produkty.

Design tokeny jsou pojmenované hodnoty vizuálních rozhodnutí, jako jsou barvy, odsazení, poloměry rohů nebo velikosti písma, uložené odděleně od kódu i od návrhu. Místo konkrétního zápisu #0B5FFF se v designu i v aplikaci odkazuje název color.action.primary, takže jedna změna hodnoty se promítne do webu, mobilní aplikace i dokumentace současně.

Eye tracking je měření polohy pohledu a pohybu očí v čase pomocí kamery a infračerveného osvětlení. Zaznamenává fixace, sakády a jejich pořadí, takže odhalí, kam se člověk na obrazovce nebo v prostoru skutečně díval, jak dlouho a v jakém sledu. Používá se ve výzkumu použitelnosti, reklamy, v medicíně i jako ovládací vstup.

Favicon je malá ikona přiřazená k webové stránce nebo webové aplikaci, kterou prohlížeče zobrazují hlavně v panelech, záložkách, historii a někdy i ve výsledcích vyhledávání. Pomáhá uživateli rychle poznat web, posiluje značku a obvykle se nastavuje pomocí HTML odkazu na soubor ikony.

Flutter je open source UI framework od Googlu, který z jedné kódové základny v jazyce Dart staví aplikace pro Android, iOS, web, Windows, macOS a Linux. Uživatelské rozhraní si vykresluje vlastním grafickým enginem místo nativních komponent, takže vypadá na všech platformách stejně a chová se předvídatelně.

Formulářová validace je kontrola, zda data zadaná uživatelem do formuláře odpovídají očekávanému formátu, rozsahu a obchodním pravidlům, ještě než je aplikace zpracuje nebo uloží. Probíhá ve dvou vrstvách: v prohlížeči kvůli rychlé zpětné vazbě a na serveru kvůli bezpečnosti a integritě dat, protože klientskou kontrolu lze obejít.

Informační architektura je návrh uspořádání, pojmenování a propojování informací v produktu, webu nebo organizaci. Určuje, jak se obsah seskupuje, jaké má štítky, kudy k němu lidé přicházejí a jak se v něm orientují, aby dokázali najít správnou věc ve správný okamžik.

iOS je mobilní operační systém pro iPhone, který zajišťuje běh aplikací, správu hardwaru, bezpečnostní model, uživatelské rozhraní a integraci se službami Applu. Pro vývojáře znamená cílovou platformu s vlastním SDK, distribucí přes App Store a pravidly, která ovlivňují návrh, testování i vydávání aplikací.

Kontrast textu je měřitelný rozdíl jasu mezi barvou písma a barvou pozadí, vyjádřený kontrastním poměrem od 1:1 do 21:1. Metodika WCAG požaduje pro běžný text alespoň 4,5:1 a pro velký text 3:1 na úrovni AA. Nízký kontrast znesnadňuje čtení lidem se slabším zrakem i uživatelům na slunci.

Landing page je samostatná webová stránka postavená kolem jediné akce, na kterou návštěvník přichází z konkrétní kampaně, reklamy nebo e-mailu. Na rozdíl od běžné podstránky webu nenabízí rozptýlení v podobě rozsáhlé navigace: obsah, důkazy i formulář vedou k jedné konverzi, jejíž úspěšnost se měří.

Largest Contentful Paint je metrika webového výkonu, která měří dobu od začátku načítání stránky do okamžiku, kdy se v okně prohlížeče vykreslí největší obrázkový nebo textový blok. Patří mezi Core Web Vitals od Googlu a hodnotí se jako dobrá do 2,5 sekundy měřeno na 75. percentilu reálných návštěv.

Lazy loading je technika, při níž aplikace, stránka nebo knihovna načte data, komponentu či obrázek až ve chvíli, kdy jsou skutečně potřeba. Odkládá práci mimo první vykreslení nebo inicializaci, čímž může zrychlit start, snížit přenos dat a paměť, ale přidává složitost při měření, chybách a načítání obsahu.

Mikrointerakce je malá, cílená reakce digitálního rozhraní na konkrétní akci uživatele nebo změnu systému. Typicky potvrzuje kliknutí, ukládání, přetažení, chybu či dokončení úkolu. V UX pomáhá lidem pochopit stav aplikace, snižuje nejistotu a dodává produktu pocit plynulosti bez zbytečné složitosti.

Modální okno je vrstva rozhraní, která překryje stránku nebo aplikaci a dočasně zablokuje interakci se vším pod sebou, dokud uživatel neprovede volbu nebo okno nezavře. Používá se pro potvrzení nevratné akce, přihlášení, krátký formulář nebo detail položky. Ovládání klávesnicí, fokus a klávesa Escape jsou u něj povinné, ne volitelné.

Nadpisová struktura je hierarchické uspořádání nadpisů h1 až h6 na stránce, které vyjadřuje vztah nadřazenosti a podřazenosti mezi jejími částmi. Slouží čtečkám obrazovky k rychlé navigaci, vyhledávačům k pochopení tématu a autorům jako kostra textu. Správná struktura postupuje po úrovních bez přeskakování a odráží obsah, nikoli vzhled písma.

Nativní aplikace je software vytvořený pro konkrétní operační systém nebo platformu, například iOS, Android, Windows či macOS. Používá jejich oficiální SDK, jazyky a rozhraní zařízení, takže může nabídnout vysoký výkon, přirozené ovládání a hlubokou integraci, ale často vyžaduje samostatný vývoj pro každou platformu.

Objednávkový proces je sled kroků, který převádí nákupní záměr zákazníka na potvrzenou, zaplacenou a vyřízenou objednávku. V e-commerce zahrnuje košík, checkout, výběr dopravy a platby, validaci údajů, rezervaci zásob, potvrzení, fakturaci, komunikaci se skladem a řešení výjimek, například zamítnuté platby nebo změny adresy.

Onboarding uživatele je řízený úvod nového nebo vracejícího se člověka do digitálního produktu, který mu pomáhá pochopit hodnotu, dokončit první důležité kroky a bezpečně nastavit účet. Dobrý onboarding zkracuje cestu k aktivaci, omezuje zbytečné vysvětlování a dává týmu data o místech, kde uživatel ztrácí motivaci nebo důvěru.

Page experience je souhrn signálů, kterými Google hodnotí, jak se návštěvníkovi stránka používá nezávisle na obsahu: rychlost načtení a stabilita měřené přes Core Web Vitals, zabezpečení přes HTTPS, použitelnost na mobilu a absence rušivých vyskakovacích prvků. Do vyhledávání vstupuje jako doplňkový faktor, nikoli jako náhrada za kvalitní obsah.

Persona je výzkumem podložený model typického uživatele, zákazníka nebo rozhodovatele, který shrnuje jeho cíle, potřeby, chování a kontext používání produktu. V UX, produktovém řízení a marketingu pomáhá týmu hodnotit návrhy z pohledu konkrétní skupiny lidí místo podle dojmů nebo interních preferencí.

Pixel je nejmenší adresovatelný prvek rastrového obrazu, kterému lze přiřadit jednu barvu. Digitální fotografie, obsah obrazovky i textura ve hře jsou mřížkou pixelů uspořádaných do řádků a sloupců. Ve webovém designu navíc CSS pixel neznamená fyzický bod displeje, ale referenční jednotku délky nezávislou na hustotě zobrazovače.

Použitelnost je míra, s jakou mohou konkrétní uživatelé v daném kontextu dosáhnout svých cílů účinně, efektivně a s přijatelnou spokojeností. V praxi popisuje, zda rozhraní, produkt nebo proces lidé pochopí, zvládnou používat bez zbytečných chyb a nebudou při tom narážet na překážky.

Přístupnost je vlastnost digitálního produktu, díky níž jej mohou používat lidé s různými schopnostmi, zařízeními a způsoby ovládání bez zbytečných překážek. Ve webu zahrnuje sémantické HTML, ovládání klávesnicí, dostatečný kontrast, textové alternativy, srozumitelné formuláře a kompatibilitu s asistivními technologiemi, například čtečkami obrazovky.

Prototyp je záměrně neúplná, rychle vytvořená podoba produktu, funkce nebo rozhraní, která slouží k ověření nápadu před plnou implementací. V softwaru a UX pomáhá odhalit nejasné požadavky, rizikové technické části i chyby v použitelnosti dřív, než tým investuje do finálního řešení.

Responzivní design je způsob navrhování a kódování webového rozhraní, které se přizpůsobuje velikosti obrazovky, hustotě pixelů, způsobu ovládání i možnostem prohlížeče. Místo samostatných verzí webu používá pružné rozvržení, CSS pravidla, responzivní média a testování na různých šířkách viewportu bez ztráty použitelnosti.

Rozlišení je počet rozlišitelných vzorků obrazu, displeje nebo vykreslovací plochy, nejčastěji vyjádřený v pixelech na šířku a výšku. Určuje, kolik detailu lze zobrazit nebo zpracovat, ale samo o sobě neříká nic jistého o fyzické velikosti, ostrosti, kvalitě panelu ani výkonu aplikace.

Single Page Application je webová aplikace, která po prvním načtení obvykle nemění celý HTML dokument, ale aktualizuje rozhraní pomocí JavaScriptu a dat z API. Uživatel tak vnímá plynulejší navigaci, zatímco vývojář řeší klientský routing, stav aplikace, výkon prvního načtení a dopady na SEO.

Skeleton screen je způsob zobrazení načítacího stavu, při kterém rozhraní ukáže šedé obrysy budoucího obsahu (bloky místo textu, obdélníky místo obrázků) namísto spinneru. Uživatel tak vidí strukturu stránky dřív, než dorazí data, čekání mu připadá kratší a po dokreslení obsahu nedochází k poskakování rozvržení.

Splash screen je úvodní obrazovka s logem nebo grafikou, kterou aplikace zobrazí okamžitě po spuštění a nechá běžet, dokud se nenačte hlavní rozhraní. Slouží k překlenutí startovací prodlevy a k potvrzení, že se aplikace opravdu spustila. Na Androidu i iOS ji definuje systém, na webu ji řeší manifest progresivní webové aplikace.

Uživatelská cesta je popis kroků, které člověk projde při dosažení cíle v produktu, službě nebo procesu. Zachycuje nejen obrazovky a akce, ale také motivace, otázky, emoce, kontaktní body a překážky. V UX pomáhá odhalit tření, navrhovat lepší tok a prioritizovat změny podle dopadu na uživatele.

Uživatelské testování je výzkumná metoda, při které skuteční lidé z cílové skupiny plní na produktu předem připravené úkoly a moderátor sleduje, kde narazí na potíže. Cílem není zjistit názor uživatele, ale pozorovat jeho chování: kde zaváhá, co si špatně vyloží a kde úkol vzdá. Výstupem je seznam konkrétních problémů použitelnosti.

Vizuální hierarchie je uspořádání prvků rozhraní tak, aby oko čtenáře vnímalo jejich důležitost ve zvoleném pořadí. Designér ji vytváří velikostí, kontrastem, barvou, tučností, prázdným místem a umístěním na stránce. Cílem je, aby uživatel bez čtení celého obsahu poznal, co je nadpis, co hlavní akce a co doplněk.

Wireframe je hrubý návrh obrazovky, stránky nebo toku, který ukazuje rozmístění obsahu, ovládacích prvků a priorit bez finální grafiky. Slouží k rychlé debatě o struktuře, navigaci a interakci, aby tým odhalil chyby v zadání dřív, než vznikne vizuální design nebo kód.