UX Design (4IT112)

Published: 3/5/2026 • Updated: 4/1/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
  - Probirame se stakeholdery
- Ideate
  - Hledame reseni na dany problem
  - Pomaha nam, kdyz mame tezky problem, chceme podporit kreativitu
  - 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
- 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