1. UX (User Experience) – Uživatelská zkušenost
Co to je: Celkový zážitek, který člověk má při používání vašeho webu nebo aplikace. Zahrnuje vše – od prvního zobrazení stránky až po dokončení nákupu.
V praxi: Dobrý UX znamená, že uživatel najde, co hledá, rychle a bez frustrace. Špatný UX? To je třeba e-shop, kde musíte vyplnit 15 polí jen proto, abyste si objednali tričko.
Proč je to důležité: Web s dobrým UX má vyšší konverze, spokojené zákazníky a lepší recenze.
2. UI (User Interface) – Uživatelské rozhraní
Co to je: Vizuální stránka webu nebo aplikace. Tlačítka, barvy, fonty, ikony – prostě všechno, co vidíte a s čím interagujete.
V praxi: UI je "oblečení" vašeho webu. Může být krásné, ale pokud tlačítko "Koupit" vidíte špatně nebo je na nesprávném místě, nefunguje to.
Proč je to důležité: První dojem. Lidé posuzují kvalitu firmy podle vzhledu webu během okamžiku.
3. Wireframe – Drátěný model
Co to je: Jednoduchý černobílý náčrt struktury stránky. Žádné barvy, žádné obrázky – jen boxy, které ukazují, kde bude co umístěno.
V praxi: Představte si to jako půdorys domu před stavbou. Architekt vám neukazuje tapety a lustry, ale kde bude chodba, kde kuchyň a kde obývák.
Proč je to důležité: Ušetří peníze. Měnit wireframe je levné. Měnit hotový design je drahé.
4. Mockup – Náhled designu
Co to je: Vizuální návrh, jak bude web vypadat. Už obsahuje barvy, fonty, obrázky – celý grafický design.
V praxi: Mockup je jako katalogový obrázek domu. Vidíte, jak bude vypadat zvenčí i zevnitř, ale nemůžete v něm ještě bydlet (neklikáte na tlačítka).
Proč je to důležité: Než se začne programovat, vidíte přesně, za co platíte.
5. Prototyp – Interaktivní model
Co to je: Klikací verze webu, která vypadá téměř hotově, ale ještě není naprogramovaná. Můžete v ní klikat, přecházet mezi stránkami, testovat procesy.
V praxi: Prototyp je jako model auta v autosalonu. Můžete si sednout dovnitř, zkusit volant, ale ještě to nejede.
Proč je to důležité: Odhalíte problémy dřív, než utratíte spoustu peněz za vývoj.
6. CTA (Call to Action) – Výzva k akci
Co to je: Tlačítko nebo text, který návštěvníka vybízí k nějaké akci. Typicky "Koupit teď", "Stáhnout zdarma", "Kontaktujte nás".
V praxi: Je to nejdůležitější prvek na stránce. Pokud ho návštěvník nevidí nebo nechápe, nic se nestane – žádný nákup, žádný kontakt.
Proč je to důležité: Špatně umístěné nebo nejasné CTA může snížit konverze o desítky procent.
7. Hero sekce – Hlavní sekce
Co to je: První velká oblast, kterou vidíte po načtení stránky. Obvykle obsahuje nadpis, krátký popis a CTA tlačítko.
V praxi: Hero sekce je jako billboard na dálnici. Máte 3 sekundy na to přesvědčit návštěvníka, že je na správném místě.
Proč je to důležité: Rozhoduje, jestli člověk zůstane na webu nebo odejde.
8. Responzivní design – Přizpůsobivý design
Co to je: Web, který vypadá a funguje dobře na všech zařízeních – od mobilu přes tablet až po velký monitor.
V praxi: Text se automaticky upravuje, obrázky se zmenšují, menu se mění na hamburger ikonu.
Proč je to důležité: Přes 60 % návštěvníků přichází z mobilů. Neresponzivní web znamená ztracené příležitosti.
9. White space (Negative space) – Bílé místo
Co to je: Volné místo kolem prvků. Nemusí být nutně bílé, ale jednoduše prostor bez obsahu.
V praxi: Luxusní weby mají hodně bílého místa. Laciné a přeplněné stránky jsou nacpané informacemi od kraje ke kraji.
Proč je to důležité: Pomáhá orientaci, zvyšuje čitelnost a působí profesionálně.
10. Hamburger menu – Hamburger ikona
Co to je: Ikonka se třemi vodorovnými čárkami (☰), která na mobilu ukrývá navigační menu.
V praxi: Kliknete na ni a zobrazí se menu se všemi odkazy. Šetří místo na malých obrazovkách.
Proč je to důležité: Standard mobilního webu. Uživatelé ho intuitivně znají a hledají.
11. Above the fold – Nad zlomem
Co to je: Část webu, kterou vidíte bez scrollování, tedy hned po načtení stránky.
V praxi: Pochází z novin, kde nejdůležitější zprávy byly "nad přehybem". Na webu platí totéž – nejdůležitější informace a CTA by měly být vidět hned.
Proč je to důležité: Většina lidí nescrolluje, pokud je hned nezaujmete.
12. Breadcrumbs – Drobečková navigace
Co to je: Řádek odkazů nahoře na stránce ukazující cestu, kudy jste se dostali. Např.: Domů > Produkty > Elektronika > Telefony
V praxi: Pomáhá uživatelům orientovat se ve struktuře webu a rychle se vrátit o úroveň výš.
Proč je to důležité: Zlepšuje navigaci a SEO (Google to miluje).
13. Heatmapa – Tepelná mapa
Co to je: Vizualizace, která ukazuje, kam návštěvníci nejvíc klikají, jak daleko scrollují a kam se nejvíc dívají.
V praxi: Červené oblasti = vysoká aktivita. Modré = nikdo tam nekouká. Pomáhá zjistit, jestli lidé vidí vaše důležité prvky.
Proč je to důležité: Odhaluje, co funguje a co ne. Můžete optimalizovat na základě reálných dat, ne jen odhadů.
14. Accessibility (A11y) – Přístupnost
Co to je: Design, který je použitelný i pro lidi se zdravotním postižením – nevidomé, slabozraké, s poruchami motoriky a další.
V praxi: Dostatečný kontrast barev, popisky u obrázků pro čtečky, možnost ovládat web klávesnicí.
Proč je to důležité: Dbát na přístupnost je eticky správné, často je to zákonná povinnost a navíc zásadně rozšiřuje vaši cílovou skupinu.
15. Loading time – Doba načítání
Co to je: Čas, za který se web načte a zobrazí.
V praxi: Ideálně do 3 sekund. Každá další sekunda znamená, že část návštěvníků odejde.
Proč je to důležité: Pomalý web = ztráta zákazníků. Google to navíc trestá horším umístěním ve vyhledávání.
Závěr: Mluvte stejným jazykem
Teď už víte, co znamenají nejčastější pojmy z oblasti UX/UI. A to je skvělý start. Když budete příště jednat o webu nebo aplikaci, nebudete se muset ptát "co to vlastně je?" a ušetříte čas sobě i svému dodavateli.
Dobré UX ani UI není luxus – je to investice, která se vrací v podobě spokojených zákazníků i vyšších tržeb.
Potřebujete poradit s redesignem webu nebo vytvořit aplikaci s promyšleným UX? Kontaktujte nás a probereme, jak vám můžeme pomoct.
