Notes by Edems

CZU_3_UX - ustní

12 min read

up:: UX source:: docs-zelené

Info

  • 2025
    • ( Pivoňka )
    • 4 - struktura
      • spíš pár minut, sedíš u něj v kabinetu na gauči, na stůl mu dáš notebook s prezentací, rychle to projede (zvlast kdyz si na tvuj projekt vzpomene), zepta se na pár věci jak psal Boháček, mě zkusil i nachytat větou:
        • Takže první persona je ta co to vůbec nepoužívá? pak dá nějakou tu otázku a za pár minut seš hotovej. Je dobrý vědět co v tom rpojektu máš no
    • 3 - mluv
        1. Prostě a jednoduše, nepusťte ho ke slovu a máte to za 1 xdd
      • Co doporučuju neseďte a nečekejte až se zeptá. Jsme tam byli s kámošem asi 5 minut dohromady, protože jsme pořád něco mleli o tom projektu, jenom se ho zeptal co je persona, co heuristika a jaká naše byla nejhorší v tom projektu. Já šla po něm a vlastně se mě zapomněl zeptat protože jsem pořád mu něco o tom projektu říkala.
    • 2 - Boháček
        1. Čas: VÁŠ PROJEKT
          1. zeptá se na vase use cases
        • Co je to scénář
          1. co je to persona a zda tomu rozumíme
          1. zepta se na nejvetši chybu na designu co jste opravoval
        1. Část: 2x otázky
        • Usability testing
          • A jaky jsou jejich typy:
              1. quantative
              1. qualitativni
        • Co jsou Lo-fi a hi-fi
          • Jaký jsou jejich česky nazvy
          • A k čemu jsou
        • Mentalní model
    • 1
      • Na předtermínu se Pivoňka ptal jen na věci z projektu takže např. co je to scénář, persona A, B, C, use case atd, nevím jak to bylo u Pavlíčka
        • Jo, Pivoňka to zmínil i na cviku, že se bude ptát na věci z projektu.
  • 2024
    • Bellingova: Krátce předvedeš svojí práci, jen chce vědět jestli znáš persony, omezení a motivaci, asi aby poznala, jestli jsi to dělal ty, pak se ptá na otázky z teorie

Otázky

1) Jaké jsou základní kroky návrhu UI?

( Jaký je cyklus návrhu? )

  • AI
    1. Základní vize produktu Posouzení potřeb
    2. Brainstorming případů užití Definice seznamu úkolů
    3. Analýza úkolů
    4. Prototypování
    5. Evaluace / Hodnocení (Kognitivní průchod, Heuristická evaluace)
    6. Re-design (Přepracování)
  • docs
    1. Analýza publika a konkurence
    2. Vytvoření modelových uživatelů (person)
    3. Tvorba informační architektury (struktury) webu
    4. Vytvoření wireframu a prototypu
    5. Návrh vizuálního designu uživatelského rozhraní
    6. Uživatelské testování

( reálný příklad: Nejdřív zjistím, že chci aplikaci na hubnutí, pak sepíšu, co tam lidé chtějí dělat, nakreslím to na papír, nechám to zkontrolovat kolegou a pak to opravím. )

2) Co je to “Product statement”?

( Vize produktu )

  • Stručné prohlášení o dlouhodobém cíli a účelu produktu.
  • Definuje pro koho, co a proč to děláme.
  • Slouží jako “Severka” pro orientaci týmu.
  • ( reálný příklad: “Tato aplikace je digitální kuchařka, která pomáhá zaneprázdněným rodičům vařit do 15 minut.” )

3) Co říká zásada 80:20 (někdy se jí říká také 90:10)?

( Paretovo pravidlo )

  • 80 % tvoří běžné případy užití musí být okamžitě přístupné.
  • 20 % tvoří specifické funkce mohou být skryté v menu.
  • docs
    • 80% výsledků pochází z 20% úsilí
  • ( reálný příklad: V textovém editoru jsou tlačítka “Tučné” a “Kurzíva” hned vidět, ale “Vložit poznámku pod čarou” je schované v menu Vložit. )

4) Na jaké pozici by měla být v menu položka, která se používá statisticky nejčastěji?

( Snadná dosažitelnost )

  • Na hranách nebo v rozích obrazovky (kurzor se tam “zastaví” o okraj).
  • V horním menu (hlavní navigace).
  • docs:
    • Vlevo a větší (YES/No)
  • ( reálný příklad: Tlačítko “Start” ve Windows je v rohu, “Zavřít” (křížek) je taky v rohu – trefíš je i poslepu švihem myši. )

5) Jaké druhy nástrojů k tvorbě lo-fi prototypu znáte?

( Nízkoúrovňové nástroje )

  • fyzický: Tužka a papír / Whiteboard.
  • digitální: Jednoduché kreslící programy / Figma
  • ( reálný příklad: Rychlý náčrt rozložení e-shopu na ubrousek v kavárně. )

6) Co je hlavní důvod výroby lo-fi prototypů?

( Proč kreslit čmáranice? )

  • Cena a rychlost: Oprava chyby na papíře je levná, v kódu drahá.
  • Komunikace: Tým se rychle shodne na logice bez řešení barev.
  • ( reálný příklad: Je lepší zahodit 5 pokreslených papírů, než měsíc programovat funkci, kterou nikdo nechce. )

7) Co to je hi-fi prototyp?

( Prototyp s vysokou věrností )

  • Interaktivní model, který vypadá jako finální aplikace.
  • Obsahuje reálnou grafiku, texty a animace.
  • ( reálný příklad: Klikatelný model aplikace v telefonu, kde fungují přechody mezi stránkami, ale data se neukládají na server. )

8) Jaký jsou hlavní rozdíly mezi lo-fi a hi-fi prototypem?

( Srovnání )

  • Lo-Fi: Ošklivé (obdélníky), statické, hotové za minuty, řeší “funkci”.
  • Hi-Fi: Krásné (grafika), interaktivní, hotové za dny/týdny, řeší “dojem a detail”.
  • ( reálný příklad: Lo-fi je půdorys bytu nakreslený tužkou. Hi-fi je 3D vizualizace s nábytkem a barvami. )

9) Jaký je rozdíl mezi termíny “wireframe” a “mockup”?

( Kostra vs. Model )

  • Wireframe (Drátěný model): Černobílá kostra ukazující rozložení prvků.
    • docs: je první nástřel, který má zamezit tomu, aby se pracovalo na něčem, co je úplně mimo představu klienta.
  • Mockup (Vizuální model): Barevný návrh ukazující finální vzhled.
    • docs: je první nástřel, který má zamezit tomu, aby se pracovalo na něčem, co je úplně mimo představu klienta.
  • ( reálný příklad: Wireframe určuje, že “tady bude obrázek”. Mockup tam vloží konkrétní fotku a vybere barvu rámečku. )

10) Jaké druhy testování bez uživatelů znáte?

( Expertní kontrola )

  • Heuristická evaluace (kontrola podle pravidel).
  • Kognitivní průchod (simulace nováčka).
  • Společná kritika (Collaborative critiquing).
  • ( reálný příklad: Kolega designér si sedne k mému návrhu a hledá v něm chyby, aniž by se ptal uživatelů. )

11) Kdo provádí testování bez uživatelů?

( Role )

  • Experti na použitelnost (nikoliv programátoři, co to psali).
  • ( reálný příklad: Najatý UX specialista, který aplikaci vidí poprvé. )

12) Co je to “cognitive walkthrough”?

( Kognitivní průchod )

  • Expert se vžije do role nového uživatele a prochází konkrétní úkol.
  • Ptá se: “Věděl bych, že mám kliknout sem?”, “Poznal bych, že se to povedlo?“.
  • ( reálný příklad: Expert zkouší koupit lístek na vlak v nové aplikaci a nahlas komentuje, jestli jsou kroky logické. )

13) Co je to heuristická evaluace?

( Kontrola podle šablony )

  • Kontrola rozhraní vůči seznamu ověřených pravidel (tzv. heuristik).
    • docs: Méně formální metoda pro odhalení chyb v použitelnosti rozhraní
  • ( reálný příklad: Expert prochází web a odškrtává si: “Je vidět stav systému? Ano. Je jazyk srozumitelný? Ne.” )

14) Jaké jsou jednotlivé kroky heuristické evaluace?

  • ( Postup )
    1. Zaškolení: Vysvětlení aplikace expertům.
    2. Evaluace: Hledání chyb jednotlivci.
    3. Určení priority: Jak moc jsou chyby vážné.
    4. Reportování: Sepsání zprávy pro vývojáře.
  • docs
    1. Viditelnost stavu systému
    2. Spojení mezi systémem a reálným světem
    3. Uživatelská svoboda a kontrola
    4. Konzistence a standardizace
    5. Prevence chyb
    6. Rozpoznání místo vzpomínání
    7. Flexibilní a efektivní použití
    8. Estetický a minimalistický design
    9. Pomoc uživatelům poznat, pochopit a vzpamatovat se z chyb
    10. Nápověda a návody
  • ( reálný příklad: Nejdřív si experti aplikaci osahají, pak sepíšou chyby, oznámkují je jako ve škole a předají týmu. )

15) Jaký je ideální počet expertů k provedení heuristické evaluace?

( Pozor chyták! )

  • 8 expertů
    • docs: 5 expertů (najdou kolem 75% chyb)
  • ( reálný příklad: Dle skript 5 lidí najde jen 75 % chyb, proto jich musí být 8, aby našli většinu. )

16) Vysvětlete termín “Usability”

( Použitelnost )

  • Míra toho, jak kvalitní je prožitek uživatele.
  • Zahrnuje: Snadnost učení, efektivitu, zapamatovatelnost, chybovost a spokojenost.
  • ( reálný příklad: Pokud bankomat ovládne i babička napoprvé a bez vzteku, má dobrou použitelnost. )

17) Co je to “Usability testing”?

( Testování použitelnosti )

  • Pozorování reálných lidí při plnění úkolů v aplikaci.
  • Cíl: Zjistit, kde se zasekávají.
    • docs: Hodnocení produktu nebo služby testováním s reprezentativními uživateli
  • ( reálný příklad: Posadíte člověka k e-shopu a řeknete mu “Zkuste si koupit ponožky”, a sledujete, jestli najde tlačítko “Košík”. )

18) Co je to “Qualitative Usability Testing”?

( Kvalitativní - Hledání příčin )

  • Odpovídá na otázku “Proč?“.
  • Malý počet lidí, jde se do hloubky.
    • docs: Objevuje existenci problémů (Co lidi nemají rádi na aplikaci)
  • ( reálný příklad: Uživatel nahlas říká: “Tohle tlačítko mě mate, vypadá jako reklama, proto na něj neklikám.” )

19) Co je to “Quantitative Usability Testing”?

( Kvantitativní - Sběr čísel )

  • Odpovídá na otázky “Kolik?” a “Jak rychle?“.
  • Velký počet lidí, měří se čas a úspěšnost.
    • docs: Striktně vědecké – staticky (výsledky jsou čísla)
  • ( reálný příklad: Měříme, že průměrná doba registrace je 45 sekund a 10 % lidí to vzdá. )

20) Jaké typy testování s uživateli znáte?

  • ( Kde testujeme )
    • V terénu (In situ).
    • V laboratoři.
    • Vzdáleně (přes internet).
    • Automatizovaně (sběr dat na pozadí).
  • docs:
    • Uživatelské průzkumy Etnografická pozorování Inženýrství použitelnosti Kolaborativní inženýrství použitelnosti

21) Co je to “Ethnographic observation”?

( Pozorování v přirozeném prostředí )

  • Sledování uživatele v jeho běžném životě bez zasahování.
  • ( reálný příklad: Výzkumník jde s údržbářem do tunelu a jen sleduje, jak v špíně a hluku ovládá tablet. )

22) Co je to “Usability engineering”?

( Inženýrský přístup )

  • Testování v laboratoři za kontrolovaných podmínek.
  • Simulace reálných úkolů.
  • ( reálný příklad: Testování ovládání kokpitu letadla na trenažéru, kde se přesně měří reakce pilota. )

23) Kde a v jakých podmínkách se odehrává “usability engineering”?

( Prostředí )

  • V laboratoři použitelnosti.
  • Podmínky: Žádné rušení, nahrávání na kamery, polopropustná zrcadla.
  • ( reálný příklad: Místnost, která vypadá jako obývák, ale za zrcadlem sedí tým a sleduje testovaného. )

24) Jakými způsoby můžeme vybrat účastníky uživatelského průzkumu?

( Kde brát lidi )

  • Náhodný výběr.
  • Přes sociologický průzkum.
  • Z existujících statistik.
  • Najmutí lidí, kteří odpovídají našim personám.
  • ( reálný příklad: Pokud dělám aplikaci pro rybáře, jdu lovit respondenty do obchodu s návnadami. )

25) Co je to demografická analýza?

( Kdo jsou naši lidé )

  • Rozdělení populace podle věku, příjmu, vzdělání, pohlaví.
  • ( reálný příklad: Zjištění, že 80 % našich uživatelů jsou ženy ve věku 25-35 let na mateřské. )

26) Co je to “screener”?

( Vylučovací dotazník )

  • Rychlé síto pro výběr správných lidí do testu.
  • ( reálný příklad: Hledáme řidiče. Otázka: “Máte řidičák?” Kdo řekne ne, jde domů. )

27) Co je to persona?

( Fiktivní zástupce )

  • Vymyšlená postava, která reprezentuje typického uživatele.
  • ( reálný příklad: “Učetní Jana, 50 let, nosí brýle, nemá ráda změny a bojí se, že něco smaže.” )

28) Jaké typy person znáte?

( Kategorie )

  • Typická (A): typický uživatel (hlavní)
  • Občasná (B): příležitostný uživatel (Taky to používá, ale méně)
  • Negativní (C): Anti uživatel – nikdy nepoužije náš systém
  • ( reálný příklad: Pro aplikaci na daňové přiznání je A = účetní, C = dítě. )

29) Co je to “Story telling”?

( Vyprávění příběhů )

  • Metoda, kdy uživatel vypráví svou zkušenost jako příběh.
    • docs: Vyprávění příběhu – Někdy nechat uživatele vyprávět příběh přináší více informací než vyplněný dotazník uživatelem
  • ( reálný příklad: Místo “Jak hodnotíte nákup?”, řekne uživatel: “No, spěchal jsem na vlak, chtěl jsem koupit lístek, ale nešlo mi zaplatit kartou a ujel mi to…” )

30) Jaké hlavní části by měl mít uživatelský dotazník?

( Struktura )

  1. Úvod (o co jde).
  2. O uživateli (věk, praxe) (Obecné informace)
  3. Jak to dělá teď.
  4. Jak by to chtěl dělat v budoucnu.
  5. Připomínky

31) Jak maximálně dlouho by mělo vyplňování uživatelského dotazníku trvat?

( Limit )

  • 20 max 30 minut.

32) Co to je a jaké nástroje používá “Remote testing”?

( Vzdálené testování )

  • Sdílí stejné předpoklady jako testování použitelnosti, které se prování pouze vzdáleně
  • Nástroje: Sdílení obrazovky (Teams, Zoom), webkamera.
  • ( reálný příklad: Designér v Praze sleduje přes Zoom, jak uživatel v Brně kliká v prototypu na svém počítači. )

33) Jaké jsou výhody a nevýhody remote testingu?

( Plusy a mínusy )

  • Výhody: Levné, rychlé, uživatel je v klidu doma.
  • Nevýhody: Nevidíme, co se děje kolem (ruchy), technické výpadky.
  • ( reálný příklad: Výhoda: Nemusím platit cestu uživatele do labu. Nevýhoda: Uživateli spadne wi-fi uprostřed testu. )

34) Co je to “Heat map”?

( Teplotní mapa )

  • Obrázek webu, kde barevné skvrny ukazují, kam lidé klikají nebo koukají.
  • Červená = “horké” (hodně akce), Modrá = “studené” (žádná akce).
  • ( reálný příklad: Mapa ukazuje, že všichni klikají na logo, i když není klikací. )

35) Jaké chování uživatelů nejvíce snižuje výpovědní hodnotu tzv. „Heat maps“?

( Falešné stopy )

  • Podtrhávání textu při čtení.
  • ( reálný příklad: Lidé si při čtení článku nevědomky označují text myší. Mapa pak ukazuje “horká” místa na textu, i když tam nikdo nechtěl kliknout. )

36) Jaké uživatelské akce sledují tzv “Heat maps”?

( Co se měří )

  • Hlavně kliknutí myší na stránce

37) Nakreslete základní schéma jakým lidé zpracovávají informace.

( Cesta informace mozkem )

  • Senzorická paměť (oko/ucho) Krátkodobá paměť Dlouhodobá paměť.
  • ( reálný příklad: Vidím číslo (senzorická) opakuji si ho (krátkodobá) pamatuji si ho navždy (dlouhodobá). )

38) Jaká je kapacita krátkodobé paměti?

( Pozor změna! )

  • položky (shluky informací).
  • ( reálný příklad: Zapamatujete si snadno 4 čísla: 1945, ale 12 náhodných čísel už ne. Staré pravidlo 7±2 tu neplatí. )

39) Jaká je kapacita dlouhodobé paměti?

( Harddisk v hlavě )

  • Neomezená.

40) Jaké základní druhy senzorů obsahuje lidské oko?

( Buňky na sítnici )

  • Tyčinky: Vidí ve tmě, černobíle (periferní vidění).
  • Čípky: Vidí barvy a detaily (ve středu oka).
  • docs
    • Sítnice
    • Čočka
    • Rohovka
  • ( reálný příklad: V šeru vidíte obrysy (tyčinky), ale nepoznáte barvu trička (čípky nefungují). )

41) Kolik druhů čípků obsahuje lidské oko?

( Počet )

  • 3 druhy.
    • docs: 7 milionu

42) Na jaké barvy jsou citlivé čípky v lidském oku?

( RGB senzory )

  • Modrá.
  • Zelená.
  • Žluto-červená.

43) Proč nejde dohromady červená barva textu a modré pozadí?

( Bolest očí )

  • Každá barva se v oku láme jinak.
  • Oko nemůže zaostřit na červenou (blízko) a modrou (daleko) zároveň.
    • docs: Rozostření vidění, po chvilce bolest očí
  • ( reálný příklad: Text vypadá rozmazaně nebo jakoby vibroval a tahá to za oči. )

44) Co je to doplňková barva?

( Kontrast )

  • Barva, která leží na barevném kruhu přesně naproti.
  • V digitálním světě (RGB) vznikne jejich smícháním bílá.
  • ( reálný příklad: Pokud mám modré pozadí, žlutý text bude nejvíc svítit/kontrastovat. )

45-50) Jaká je doplňková barva ??? (uveďte hexadecimálně)

  • (45-50) Jaká je doplňková barva k
    • 45) červené? (#FF0000) (hexadecimálně)
    • 46) zelené? (#00FF00) (hexadecimálně)
      • FF00FF (Purpurová / Magenta).
    • 47) Jaká je doplňková barva k modré? (#0000FF)
      • FFFF00 (Žlutá / Yellow).
      • ( Pozor: V RGB modelu je to žlutá, v malířském oranžová. Zde dle hex kódu platí RGB. )
    • 48) purpurové (#FF00FF)?
    • 49) žluté (#FFFF00)?
    • 50) azurové (#00FFFF)?