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, …,
- 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
-
- 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
- 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
- ∃
- 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
- 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
- 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