UX Design (4IT112)

Published: 3/5/2026 • Updated: 4/28/2026

Meta:
- Aktivita 15b
- Semestralni prace 55b
- Zaverecny test 30b
- 7.-10. 4. “workshop” misto inovacniho tydnu
- Prednasky s Davidem Vobeckym, …,
  - David je hater Applu
- Cilem tohoto predmetu je MINDSET
Svata trojice —> business, users, tech
Co je to design?
- Myslenkovy proces, ktery usti v navrh, ktery ma nejaky cil
- Je to zpusob komunikace
- Design prinasi uzitek —> i znacka muze prinaset uzitek, pocit
Co je UX?
- User Experience, prekladano jako “uzivatelsky prozitek”
- Vnimani uzivatele, jak neco funguje, vypada a slouzi svemu ucelu
Uzivatel je jedinec, ktery prijde do kontaktu s nasi sluzbou/produktem
UX design je remeslo, ktere zastresuje cinnosti ke zlepsovani UX
Dokonaly produkt je:
- funkcni
- uzitecny
- smysluplny
- a spojuje byznys (uspokojuje to nas business need), technologie (proveditelnost) a uzivatele (da se to pouzivat)
Feng shui je technika z 4 000 pr. n. l., takovy predchudce moderniho UX
- Pote 20. stoleti velke zmeny, zkoumani interakce s nastroji a stroji (Henry Ford, F. W. Taylor)
- —> kontrolky a tlacitka se hledaji hur, kdyz jsou dal a mensi od vychoziho viewpointu
- 1. stoleti prinasi penetraci pocitacu uplne vsude
UI design
- Jak digitalni produkt vypada?
- “Uzivatelske rozhrani”
- Vizualni elementy
Fail fast – ze zacatku jsou naklady na zmenu nizke
Design process / Design thinking:
- Define
  - Definovat proces kterym se chceme ridit
  - “Dobre definovany problem je napul vyreseny”
  - Vyzkumnik patra po potrebe (co je ta potreba pri vyuzivani produktu/sluzby)
    - Urovne potreb
      - Chci postavit vesmirnou lod
        
        Prozit pribeh
        
        Proces staveni
        
        Tvorivost
      - Povesit obraz
        
        Vyvrtat diru, hmozdinka, prach, povesit
        
        Chci dostat obraz na stenu
        
        Chci utulny domov
  - Porozumeni problemu (techniky):
    - Pricina/nasledek:
      - pricina, prislo hodne lidi, nasledek cekani ve fronte (frustrace, spatny pocit)
      - To, jestli resime pricinu nebo nasledek resime podle potreby
      - Soutezime s dalsimi potrebami uzivatele
  - Paradox of value
    - Diamant neni vic hodnotny kdyz je uzivatel stuck v pousti
  - Okolni potreby
    - Duvera
  - Proveditelnost vs business cile vs uzivatelske potreby
    - Business cile
      - Akvizice
      - Retence
      - Konvere
      - Engagement
  - “How might we” otazky:
    - pozitivne formulovane jako prilezitost
    - soutredi pozornost na potrebu uzivatele
    - skutecny problem z “Empathize”
    - nenaznacuje reseni
    - Udelat co, pro koho, aby [efekt]
    - Mozne chyby: naznacovani reseni, nesoustredenost na potrebu uzivatele
    - Jednoducha otazka, pomoci ktere nas uzivatel docili neceho
  - Probirame se stakeholdery
- Ideate
  - Hledame reseni na dany problem
  - Pomaha nam, kdyz mame tezky problem, chceme podporit kreativitu
  - Pristupujeme k tomu pomoci
  - Moznosti:
    - group ideation
    - deep thinking
    - thinking out of the box
- Empathize
  - Resime problemy
  - Snazime se zjistit “Proc?”
    - Typicky: kdo je nase user base?
      - Co jsou ty blockery, kvuli kterym lide nas produkt nepouzivaji vice?
    - Jakob Nielsen: “You are not the user”
  - Snazime se vklouznout do bot uzivatelu (pochopit je)
  - Nevnaset do toho nase vlastni zkresleni
  - Podle vyzkumu hodne firem krachne kvuli nedostatku user researche
    - Bez nej muzou lidi produkt nepochopit, nebo ho vubec nepotrebuji
  - User research process:
    - Stanoveni si cilu a hypotez
      - Co si myslime? Co uz vime? A co chceme overit?
    - Vyber vyzkumne metody
      - Dotazniky
      - (Hloubkove) Rozhovory (1<>1)
    - Priprava a rektrutace respondentu
      - Timeline
      - Budget
      - Rekrutace
      - Scenar
        
        Na co se budeme ptat
        
        Chceme konzistenci, aby se dalo dobre analyzovat
        
        Nelze rict nic spatne (ze strany uzivatele)
        
        Struktura:
        
        Uvod
        
        Predstaveni – kdo jsem, co je moje prace
        
        Cas a obsah – jak dlouho, co se bude dit
        
        Nahravani?
        
        Ostatni ucastnici (shadowing)
        
        Anonymizace
        
        Telo
        
        Warm-up
        
        Specificke otazky
    - Sber dat
      - Viz scenar z pripravy
      - Chceme zajistit komfort uzivatele
      - Na co se muzeme ptat?
        
        Minule a soucasne zazitky a chovani
      - Jak se ptat?
        
        Keep it VIEW
        
        Prizpusobene jazyku respondenta
        
        Ptat se jen na jednu vec
      - Tipy a triky:
        
        Metoda “Echo”
        
        Opakujeme, aby respondent dovysvetlil, co si mysli
        
        Boomerang
        
        Otocit otazku na respondenta – jak si myslite VY ze to funguje?
        
        Columbo
        
        Opakujeme vety ostatnich, nechame otevrene konce vet —> realne manipulace lidi nebyt v trapny situaci otevreny vety
      - Caste chyby
        
        My si myslime, ze nas produkt je super a neni chybovy
        
        Viditelne emoce
        
        Predsudky
        
        Co kdyby
    - Analyza, interpretace vysledku a finalni report
      - Affinity diagram
        
        Lepiky s problemy, nazory, odpovedmi, seskupene podle podobnosti
        
        Take muzu kategorizovat podle emoci
- Prototype
  - Prototyp je maketa
  - Faze, ve ktere vytvarime prototype (neco hmatatelneho)
  - Co nejblize k realnemu produktu —> priklad s balenim plenek s dirou
  - High fidelity (skici a wireframy) vs low fidelity (klikatelne)
    - Extremy na obou stranach jsou skici a realny produkt
    - Velmi verny prototyp, muze byt az moc drahy a nemenny
    - Ke konci iteraci mame vyssi miru vernosti
  - Proc je [prototype] delame?
    - Externalizace (formovani a zhmotnovani napadu)
    - Komunikace se stakeholdery
    - Predani do vyvoje
    - Uzivatelske testovani
  - Je to tvurci proces
  - Co prototypujeme?
    - Struktura
      - Informacni architektura
        
        Obsah na prvnim miste (treba na obrazovky, stranky)
        
        Navigace
        
        Taxonomie
        
        Mentalni modely
        
        Faze:
        
        business cil
        
        business strategie
        
        obsahova strategie
        
        informacni architektura
    - Skeleton
    - Surface
  - Metody:
    - klikaci prototyp
    - wireframe
    - user flows
      - pomahaji s IA
        
        Card Sorting: udelame si karticky, a potom z nich delame kanban
    - papirovy prototyp
    - storyboard
    - design studio
  - Figma je dulezita tady pro UI design
  - Protopie je dulezitej pro Prototyping
  - Figma
    - $\exists$
    - Umim nastroj ≠ navrhuju fajn veci
    - Je to z casti obsolete
    - Da se rict, ze jejim predchudcem je z casti Photoshop
    - HW: libovolna stranka ve Figme
      - Vybere 30 nahodnych lidi a pokud to nebudeme mit, je to -15b
    - Mame screeny, rozdelene na UI elementy (realne DOM nody)
    - Molekuly jsou nejaka mala funkcni mnozina UI elementu (muze byt level 1, 2, 3)
    - Domaci ukoly maji vlastni slozku
    - Frame je group, ale ma vlastnosti
      - Export
      - Styles
    - Typicky pracuje s vektory
    - Dela v bodech, ne v pixelech
    - Muzeme udavat lowk priklady do hodnot v atributech
    - Tlacitka bychom meli delat novym framem
    - Autolayout
    - Komponenty jsou re-usable
    - Keyboard shortcuts:
      - frame
      - i (eyedropped)
      - Shift+A vytvori frame ze selekce
      - k + resize respektuje aspect ratio
- Test
  - Cilem je vyhodnotit pouzitelnost
    - Meli bychom resit realne uzivatelske problemy
    - Zvladne to uzivatel?
  - Feedback od uzivatelu s produktem v ruce
  - Typy metod
    - Kvantitativni
      - Kolik?, jak casto?
    - Kvalitativni vyzkum
      - Vzdycky uzivatel dostane zadane ukoly
      - Treba premysleni nahlas
        
        Na nic se uzivatele nedoptavam
      - Moderovany vyzkum
        
        Pokud uzivateli reknu reseni, zkresluju si vystup
      - “Uzivatel neni blbej”
      - Wireframy jsou fajn, pokud chceme odvest pozornost od jinych casti designu (barvicek, fontu)
      - Co se testuje?
        
        Wireframy
        
        Prototypy
        
        Csti produkcnich webu a aplikaci
        
        Hry
      - Nektere cilovky u agentur jsou drazsi
        
        Agentury zajistuji respondenty do user testingu
    - Casto kombinace
  - Jak pripravit testovani?
    - Goal: co je cil vyzkumu?
    - Co chceme zjistit?
    - Jak to chceme zjistit?
    - Koho se budeme ptat?
    - Kolik me to bude stat? (budget)
    - Kdy to budu delat?
    - Faze pripravy:
      - Jaky myslime, ze bude user flow
      - Sepiste si scenar
        
        Uvod
        
        Vysvetlujeme, ze testujeme prototyp, ne uzivatele
        
        Wam-up
        
        Task 1, 2, 3, …, $n$
        
        Shrnuti
      - Ujistujeme se, ze to, co uzivatel rika, je pravda (nechceme treba jenom hodnoceni 1-10, ale zduvodneni)
        
        Doptavame se na “proc?”
        
        “Co ocekavate, ze se stane, kdyz kliknete na …?”
    - Je levnejsi a mene narocne testovat na znamych, ale existuje tu zkresleni
    - Pres agenturu je cena a narocnost horsi
    - Je fajn si zaznamy nahravat
    - Affinity mapa
      - Seskupujeme lepiky podle nejakych atributu (frustraci, prilezitosti, spolecnych problemu, …,)
  - Je to proces, pri kterem se nekdy musim vracet zpatky do ideate / prototype
  - UX engineer je u procesu od zacatku do konce (zadani, vyvoj, testovani)
  - Dulezity je time management
    - Da se zlepsit tim, ze si testy zkousim nanecisto
  - Dulezity je, aby se respondent citil dobre
    - Davame mu prostor
    - Doptavame se ho porad “proc?”
  - Davame dohromady vysledky
    - Spojujeme poznatky podle temat

Inovak

Brief
- Cilovka
Pro zkouskovy prototyp
Bodiky:
- 10b za aktivitu behem innoweeku
- 12b za prezentaci pri zkousce
  - Chceme prodat zadavateli nase reseni
  - Odargumentovat, ukazat data z rozhovoru (vychazi to z uzivatelske potreby)
  - Ukazat, ze je to otestovane, ze feedback je zapracovany
- 18b za praci odvedenou po skonceni innoweeku
- 15b za schopnost diskutovat o metodach a propojeni praxe s teorii (realne ustni zkouska)

Design principles (tips & tricks pro lepsi UI)

Struktura: (od nejnizsiho po nejvyssi)
- Informacni architektura a interakcni design
- UI elementy a vzory (jake pouziju), UX writing (copy)
- Typografie, vizualni design
Systemove rozhrani je to, co komunikuje s klientem
- Vytvarime ho z naseho designerskeho modelu
- Muze byt v kolizi s uzivatelskym modelem
- Tohle zkouma kognitivni psychologie
https://userinyerface.com/game.html
- Prumerna doba odeslani tohohle formulare je kolem 15 minut
Vizualni hierarchie
- Kam se divam jako prvni, vrstvy komplexity
Jaboc Nielsen – Heuristiky
- Priklady
  - Viditelnost stavu systemu
    - Pokud se neco deje, uzivatel by o tom mel vedet
    - Pokud se neco pokazi, uzivatel by to mel vedet taky
  - Shoda systemu a realneho sveta (kalkulacka vypada jako kalkulacka, ikonka diskety pro ukladani)
  - Uzivatelova kontrola a svoboda
    - Destruktivni akce by mely byt undo-able
  - Flexibilita a efektivita pouzivani
    - Power users by meli mit moznost mit vic efektivni experience
  - Dokumentace
- Problemy s UX zjistuji heuristickou analyzou/evaluaci
Gestalt principy (tvarova psychologie)
- Priklady
  - Reification
  - Invariance
    - Lidska vlastnost, pomaha nam rozlisovat mimiku
  - Figure/Ground
    - Dovednost oddelit Popredi a pozadi
- Opira se o myslenku, ze celek je vic nez suma jeho casti
- The Law of Proximity
  - Veci u sebe patri k sobe
  - Varianty tlacitek patri k sobe
- The Law of uniform connectedness
  - macOS mentioned
- The Law of Common Fate
  - Veci se hybou spolu
Cleneni UI prvku
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Brand guidelines
- Safe zones, UI komponenty
UI komponenty
- Treba sada Tailwind UI
Design systemy
- Human Interface Guidelines (Apple)
- Material Design (Google)
Copywriting
- Dulezita gramatika (i kvuli ambiguite sdeleni)
- Vecny (zadna slovni vata a cizi terminy)
- Vyzivame k akci (tlacitka maji jednoznacny popis)
- Vypravime pribehy (ztotozneni s produktem)
- Pouzivame nadpisy a podnadpisy
- K.I.S.S.
Dark patterns
- Nuceni lidem veci, ktere nechteji
- Neeticky design
- Priklady:
  - volebni listky z Nemecka 1938
  - Alza hazela lidem do kosiku prislusenstvi bez souhlasu
  - MIcrosoft nuceni do upgradu OS
  - Booking.com CTA na kupovani (—> na tohle se kouka 5 lidi, posledni 2 pokoje!)

Ve svete jsou lide se specialnimi potrebami
- Dyslexie, dysgrafie, kratkozrakost, barvoslepost
  - Poskozeni centralni casti sitnice (flek ve videni), diabeticka retinopatie (skoro vsichni maji formu cukrovky, zhorsuje se videni), zeleny zakal
- Jednorukost
  - Mobil se v skoro 50 % okamzicich pouziva jenom jednou rukou
  - Resi se:
    - Swipe down to close
    - Vyhledavani v dolni navigaci
- Neurodiverzita
  - Nemeli bychom navrhovat komplexni UI (pokud je aplikace komplexni, musime to s uzivatele komunikovat)
  - Blbuvzdornost
    - Brouzdani vedle vyhledavani
    - Alternativni cesty
      - Site maps
      - Breadcrumbs
  - Co pritahuje pozornost
    - Naklonene veci
    - Jinak barevne veci
    - Spicate veci
      - I treba hranata tlacitka
  - Rozptylovani
    - Moznost zastavit pohyb
    - Moznost schovat prvky rozhrani
    - Zbaveni se FOMO (countdowns, posledni kusy)
- Hluchota
- Az 15 % lidi na svete
Je to legislativne podporene (European Accessibility Act, American Disability Act)
- EU vyzaduje WCAG 2.1
- U nas se stara Ceska Obchodni Inspekce
  - Posila stiznosti
  - Jeste nevydala ani jednu pokutu
  - 424/2023 Sb. (implementace EAA)
  - Alza se na to vykaslala
Curb-cut effect
- Benefit pro lidi se specialnimi potrebami benefituji i lidem bez nich
Pristupnost pro vsechny
- Touch, see, hear, speak x Temporary, situational, permanent
One-size-fits-men
Produktova strategie
- Jedna vec pro vsechny (koukam na velikost trhu) x Mnoho veci pro 1 cilovku (resim customer lifetime value)
Vyhody a11y
- Usability
- Pristupne vice uzivatelum
- Vyhnuti se pokutam a stiznostem
- A take
  - Lepsi SEO
  - Lepsi vnimani znacky zakazniky
Web Content Accessibility Guidelines
- Nejnovejsi 2.2 (10/2023)
- Tri urovne: A, AA, AAA (cim vic Acek, tim vic Adidas)
- Princip POUR
  - Perceivable
  - Operable
  - Understandable
  - Robust (pouzitelne lidmi & treba i asistivnimi technologiemi)
  - Pokryvaji 4 zakladni oblasti: vision, hearing, motor, cognition
Typografie
- Alespon 16px
- Jasna struktura
- Cleneni
Barvy
- Kontrast
  - Ne vsechno ma pozadavky na kontrast
    - Disabled stavy kontrolek
    - Fotografie & loga
- Barvoslepost (hlavne muzi)
  - Nevideni zelene (deuteranopia)
  - Nevideni cervene (protanopia)
  - Nevideni modre (tritanopia)
  - ==> Neresit problemy v UI jenom barvou
  - ==> problem treba s odkazy (mely by se podtrhavat)
Velikost
- U AAA je minimalni operativni velikost 44px (tlacitka treba)
Asistivni technologie
- Brailovo pismo input klavesnice (crazy lidi to umi rychle)
- Ctecka
  - H skace pres headings
  - Arrow keys jdou po elementech
Multimedia
- Titulky
  - Taky mandated zakonem

UX Design (4IT112)

Inovak

Design principles (tips & tricks pro lepsi UI)

Pristupnost (a11y)