1.

Interakcia lovek - pota (HCI), paradigmy HCI,

histria HCI, zkladn terminolgia

Interakcia lovek - pota

- interakcia lovek-pota (HCI) je tdium interakcie medzi umi (pouvatemi) a potaom
- disciplna, ktor sa zaober dizajnom, vyhodnocovanm a implementovanm interaktvnych potaovch systmov
pre udsk pouitie a tdium hlavnch fenomnov okolo nich
- dizajn tdi a pouitie potaovch technolgi
- zameriava sa na rozhrania medzi umi (pouvatemi) a potami
- skma spsob akm udia pracuj s potami
- navrhuje technolgie, ktor umouj uom pracova s potami novmi spsobmi

Preo HCI?
- optimalizcia vkonu loveka a potaa spolu ako jeden systm
- me pomc pri vvoji systmov, ktor s:
* uiton (useful) - umouje vykonva poadovan lohy
* pouiten (usable) - umouj jednoduchos a prirodzenos
* pouvan (used) - udia chc aby ich pouvali
- zvenie asti (dostupnosti)
- medzinrodn smernice a normy (tandardy)
- bezpenos - kritick systmy, kritick chyby

Paradigmy HCI
1. Ininierstvo udskch faktorov (Human factors engineering)
- interakcia ako pr lovek-stroj
- optimalizova vzah medzi lovekom a potaom
- poadovan metodolgie: cool hacks (vhodn rady, dobr rieenie)
- vhodn formt znalost: pragmatick objektvne detaily/informcie
- hodnoty:
* menia chybovos aby to fungovalo
* cool hacks, ktor odhauj pecifick poadovan intancie

2. Klasick kognitvne informcie (Classicel cognitive information)

- interakcia ako vmena informci
- optimalizova presnos a efektvnos prenosu informci
- poadovan metodolgie: overiten kvalitatvne a hodnotiace metdy pouiten bez ohadu na kontext
- vhodn formt znalost: objektvne fakty a modely so veobecnou pouitenosou
- hodnoty:
* optimalizcia, snaha podpori ciele, abstrakcia, zoveobecnenie informci
* hlavn hodnotenie je nezvisl na sksenosti lepie, pretoe dizajn me by truktrovan
tak aby sedel, vyhovoval paradigme
* truktrovan dizajn je lep ako netruktrovan
* niia nejednoznanos
* pohad na vedomosti zhora nadol

3. Vtelen/situovan interakcia (Embodied/situated interaction)

- interakcia ako fenomenaly situated
- podpora akcie v danej situci v okolitom svete
- poadovan metodolgie: paleta umiestnench dizajnov a hodnotiacich stratgi
- vhodn formt znalost: ir popis kontextu a zujem astnkov pracujcich so softvrom
- hodnoty:
* kontrukcia vznamu je intern, zvis na interakcii
* o sa deje v okol systmu je dleitejie ako o sa deje v rozhran
* cieom je zachyti zloitos celho systmu
* znalosti nemusia by len siln abstrakcie ale mu by vloen vo svete ako skryt kontext
a implicitn vedomosti alebo schopnosti, ktor sa odhauj iba poas stretnutia
Histria HCI
- bolo vytvoren a vyvinut spolone s potaovmi technolgiami

Pre-desktop, desktop, post-desktop

-WIMP
* windows, icons, menus a pointers
* predvolen tl rozhrania pre vinu potaovch systmov

Pre-internet, Internet, ?
- pred internetom bol stand-alone PC
* iadna alebo mal loklna sie
* iaden internet
* jeden alebo zopr pouvateov
* niekoko samostatnch aplikci (few stand-alone applications)
* tabuky boli prv vek spech HCI

- Web 1.0 --> statick web

* statick webov strnky
* server vytvra, prehliada ta a zobrazuje
* pomal internet
* mal poet tvorcov obsahu
* vek farby a rozvrhnutie pouitenosti do webovho obsahu

- Web 2.0 --> dynamick web

* client-side code (JS)
* server-side databases (PHP, MySQL)
* pouvatelia ako tvorcovia obsahu

Mobiln zariadenia, socilne mdia

- smartphones
- aplikcie vs. HTML5
- Local Based Services (LBS) --> softvrov sluba, ktor vyuva daje o polohe pre ovldanie funkci
- komunikcia a tvorba obsahu
- neustle sa meniace interakcie, socilny kontext a miesto
- napr. Twitter, Facebook, Google Maps

Socilne programovanie (Social programming)

- potaom podporovan kolaboratvne prce
- etnografia - nrodopis, nuka o chovan ivochov a ud
- etnometodolgia - netradin sociolgia zdrazujca vznam praktickch kadodennch innost

Virtulna a rozren realita (Virtual and augmented reality)

- virtulny svet --> simulcie, ponorenie (immersion)
- virtulna realita
--> oddelenie virtulneho miesta
--> head-mounted displays (okuliare pre virtulnu realitu)
- rozren realita
--> virtulny svet a navye
--> tablety, smartphones, Google okuliare

Vadeprtomn potaov spracovanie

- potae s prtomn ale neviditen
- bezdrtov, nositen, mal a vstavan zariadenia
* RFID --> identifikan prvok na identifikciu tovaru (napr. iarov kd)
* mikro radie
* speckled computing
* computer-computer programs
- IOT --> Internet of Things
Hmataten systmy
- fyzick pouvatesk rozhranie
- bohato hmatov a inak vnmaten sptn vzba
- fyzick umonenia a obmedzenia vo fyzickom svete

Zkladn terminolgia

Pouvatesk rozhrania
- rozhodujce pre podporu interakcie
- grafick pouvatesk rozhranie
--> pouvatesk rozhranie, ktor umouje ovlda elektronick zariadenie pomocou sboru interaktvnych
obrzkovch prvkov
--> vyuva grafick prvky (napr. ikony, menu, dialgov rmeky, okn) a ovldacie prvky v kombincii
s textom

- prirodzen pouvatesk rozhranie (hlas, dotyk, gest)

--> pouvatesk rozhranie, ktor je v skutonosti neviditen a zostane neviditen, pretoe pouvate
sa u stle viac zloitejie interakcie

- Multi-modal interaction
--> dva pouvateovi slobodu komunikova so systmom prostrednctvom viac ako jednho udskho zmyslu
(dotyk, re, gest a pod.)
--> tento termn oznauje pomerne nov typ uvateskho rozhrania a to rozhranie s viacermi reimami

- fyzick pouvatesk rozhranie

Interaction design
- je potrebn vzia do vahy:
--> kto s nai pouvatelia
--> ak aktivity bud vykonan
--> kde interakcia prebieha
--> tomu sa hovor analza domny
- je potrebn optimalizova interakcie, ktor pouvatelia bud ma s vrobkom

Nvrh/dizajn orientovan na pouvatea (User-centered design)

- rastca popularita elektronickho obchodu posilnila pralivos pouitenosti a UCD ako pouvatelia mu vzia
ich podnikanie niekam inam len jednm kliknutm myi
- pouvate je na prvom mieste
- iteratvny (opakovan) vvoj prototypov
- vyhodnotenie v relnych podmienkach
- vyhodnotenie sledovania relnych pouvateov
- zznam, odstrnenie nedostatkov

Pouitenos (Usability)
- nauitenos (learnability)
--> ahko sa ui, rchlo zaa pracova
- efektvnos(effectiveness)
--> ak sa pouvate nau raz s tm pracova, tak je mon vyia rove produktivity
- zapamtatenos (memorability)
--> ahko zapamtaten
--> prleitostn pouvate sa me vrti do systmu aj po dlhej dobe bez toho aby sa znovu nieo nauil
- chyby (errors)
--> nzka frekvencia chb
--> uvatelia robia menej chb
--> jednoduch obnova
--> iadne katastrofick poruchy
- spokojnos (satisfaction)
--> prjemn na pouitie, subjektvna spokojnos, pouvateom sa to pi
Dostupnos, prstupnos (Accessibility)
- vnmaten (perceivable)
- operovaten, ovldaten, funkn (operable)
- pochopiten (understandable)
--> aspekt domny pouitenosti svis s terminolgiou
* obsah domny
* primeran miera pecifickosti
* konzistencia
* jazykov bariry
* chyby
- robustn (robust)

Uvatesk priatesk rozhranie

- pouiten, dostupn, pochopiten/zrozumiten, intuitvny, prjemn na pouitie
- nevzbudzuje negatvne emcie
- podporuje vetky lohy pre domnu
- na mieru pre domnu pouitia a jeho pouvatea
- neustle sa zdokonauje na zklade potrieb pouvateov

*************************************************************************************************
CVIENIA
*************************************************************************************************

Zkladn pravidl HCI

- neexistujce obmedzenia (constraints) - fyzick, logick
- neidentifikovaten umonenia (affordances) - Ako viem, ak lohy viem vykona a ako identifikujem, i je
(alebo nie je) mon vykona prve tto lohu?
- neexistujca alebo oneskoren sptn vzba - Ako viem, e sa nieo stalo?
- neexistujce alebo neprirodzen mapovanie - Ako viem, o je o?
- nedodran existujce tandardy a konvencie

Najdleitejie faktory spechu

- sprvne fyzick, logick alebo kulturlne obmedzenia
- identifikovaten umonenia
- sprvna sptn vzba v sprvnom ase
- prirodzen mapovanie
- dodranie existujcich tandardov a konvenci
- ergonomick ovldanie
- nauitenos
- praliv, estetick dizajn
Otzka . 2

Defincia pouvateskho rozhrania

Pouvatesk rozhranie alebo rozhranie lovek-stroj s programy a zariadenia, ktor s k dispozcii
pouvateovi systmu na spracovanie dt.

V oblasti informanch technolgi, pouvatesk rozhranie (UI) je vetko navrhnut do informanho

zariadenia, s ktorm osoba me interagova. To me zaha - obrazovka, klvesnica, my a vzhad
pracovnej plochy. Je to tie spsob, prostrednctvom ktorho pouvate pracuje s aplikciou alebo
webovch strnok.

Pouvatesk rozhranie definuje t as systmu, ktor me pouvate pouva. Pouvatesk

rozhranie je as potaovho programu, s ktorou pouvate aktvne komunikuje.

Kov aspekt : komunikatvny dialg cie: dosiahnu nejak lohy

All mechanisms that are part of this process form the UI:
Vetky mechanizmy, ktor s sasou tohto procesu:
Fyzick zariadenia klvesnica a displej
Potaov programy navrhnut na ovldanie interakcie

Rozdiel medzi grafickm pouvateskm rozhranm a pouvateskm rozhranm

Grafick pouvatesk rozhranie (angl. Graphical User Interface), skratka GUI, je typ pouvateskho
rozhrania, ktor umouje ovlda elektronick zariadenie pomocou sboru interaktvnych
obrazovch prvkov. Tie spaj prkazy a umouj priamu interakciu so zariadenm.

Rozdiel:
GUI
Vina pouvateov dnes pracuj s grafickm uvateskm rozhranm. S grafickm uvateskm
rozhranm (GUI), sa interakcia s ponukami (menu) a vizulnym obrazom, ako s tlaidl a in grafick
objekty na zadvanie prkazov..
UI
Interakcia so softvrom prostrednctvom pouvateskho rozhrania. To znamen, e uvatesk
rozhranie kontroluje, ako zad daje a pokyny a ako sa nsledne tieto informcie zobrazia na
obrazovke. Existuj dva typy uvateskch rozhran a to grafick a prkazovho riadku. Operan
systmy obas poui kombinciu tchto rozhran na definovanie, ako pouvate pracuje s potaom.

Typy a histria pouvateskch rozhran

UI v minulost
Traja udia - Uvate, ktor chcel dosiahnu nejakho lohy
- Keypunch operator (Opertor dierkovaa), pouva offline zariadenia na
vytvorenie dierkovacch kariet so zakdovanmi lohami
- Computer operator (Opertor potaa), vlo karty do potaa pouitm taky
kariet
Pota odpovedal psanm sprv na papier (viac vzdialen prbuzenstvo, nepripomna konverzan
dialg

6 generci UI (Nielsen )
1. Genercia Prehistory - pravek, pred 1945
Hardware technology mechanick, elektromechanick
Operan md nebol vemi pouit na rozdiel od vpotov
Programovacie jazyky Moving cables around pohybujce sa kble okolo
Terminal technolgie tanie blikajcich svetiel a kariet
Typy pouvateov sami investori
Obrzok v reklame iaden, najprv museli potae opusti laboratria
Paradigmy pou. rozhrania- iadne (priamy kontakt s hardwerom bola jedin dleit vec)

2. Genercia Batch dvkovanie, 1945 - 1955

Hardware technology sveteln trubice (elektrnky), obrovsk stroje krtka priemern doba
medzi chybami
Operan md jeden pouvate v jednom okamihu obsluhujci stroj (ale na obmedzen
dobu)
Programovacie jazyky strojov jazyk - 001100111101
Terminal technolgie alekopis, elektronick psac stroj. Pouva sa v kombinci
s potaovm (vpotovm) strediskom
Typy pouvateov odbornci, priekopnci
Obrzok v reklame pota ako kalkulaka
Paradigmy pou. rozhrania- programovanie, dvkovanie

3. Genercia Line-based (1955-1965)

Hardware technology tranzistory viac spoahlivejie. Potae zanaj by viden aj
mimo laboratri
Operan md dvkovanie (centralizovan pota ako chrm, nie je priamo dostupn)
Programovacie jazyky Assembler ADD A,B
Terminal technolgie Single-line terminly (glass TTY")
Typy pouvateov Technokrati, potaovi fanikovia
Obrzok v reklame pota ako informan stredn jednotka (procesor)
Paradigmy pou. rozhrania- prkazov jazyky

4. Genercia full screen (1956-1980)

Hardware technology integrovan obvody. Spolonosti si mu dovoli potae
Operan md zdiaanie asu (online systmy na spracovanie transakci)
Programovacie jazyky jazyky na vysokej rovni, Fortran, Pascal, C
Terminal technolgie full-screen terminly, ale iba alfanumerick. Vzdialen prstup ben
Typy pouvateov pecializovan skupiny bez potaovch znalosti (naprklad bankov
pracovnci)
Obrzok v reklame Mechanizcia administratvnej prce
Paradigmy pou. rozhrania- prsne hierarchick menu a vypanie formulrov
 5. Genercia GUIs/WIMP (1980-1995)
Hardware technology VLSI. Jednotliv osoby si mu dovoli osobn potae
Operan md Single-user osobn potae
Programovacie jazyky problmovo orientovan jazyky, spreadsheets (tabulky?)
Terminal technolgie grafick displeje, pracovn stanice ako premiestniten
Typy pouvateov bussines profesionli, fanatici
Obrzok v reklame osobn produktivita (pota ako nstroj)
Paradigmy pou. rozhrania- WIMP (Windows, Icons, Menus, Pointing device polohovacie
zariadenie)

6. Genercia Future budcnos (1995-today)

Hardware technology irok integrcia. Jednotliv osoby si mu dovoli viac ne jeden
pota.
Operan md Potae v sieti, s jednm pouvateom, vstavan systmy
Programovacie jazyky non-imperative (neprkazov), objektovo orientovan, aj grafick
Terminal technolgie dynabook mutimdia, I / O, ahko prenosn, s bezdrtovm
pripojenm
Typy pouvateov ktokovek
Obrzok v reklame pota ako prstroj
Paradigmy pou. rozhrania- Rozhranie nie je zaloen na prkazoch, prrodn, draz na lohy

Zkladn spsoby komunikcie prostrednctvom pouvateskch rozhran

udsk vnmanie, psycholgia HCI

Vedeck (kognitvna) psycholgia v IT
- ahk, efektvne a bezchybn UI
Po druhej svetovej vojne chpanie loveka ako aktvny informan procesor
1976 - 1986 - experimentlna udsk psycholgia, vnmanie, vkon, pam, rieenie problmov,
psycholingvistika, ...
1983 applied information processing psychology (Card et al.) Know the user!

udsk informan procesor

Model pre analzu interakcie lovek-pota
- zjednoduen
- integrovan opis psychologickch poznatkov o udskej vkonnosti
Pomha pochopi ako vytvra systmy
Takto modely s vytvoren cez experimentovanie

Model Human Processor (MHP) Model udskho procesora

Vnemov systm senzory a nahromaden spomienky
Kognitvny systm pracovn pam (krtkodob) a dlhodob
- symbolicky kdovan informcie
Motoricky systm fyzicky spust odozvu
Vlastnost MHP
Procesy mu by vykonan sriovo alebo paralelne
Parametre pamte:
- kapacita pamte v polokch
- - as rozpadu (zniku) poloky
- - hlavn typ kdovania (fyzick, akustick, vizulny, smantick)
Parametre procesora
- cyklov as procesora

Perceptual system (PS) Vnemov systm

Vnmanie fyzickho sveta - integrovan senzorick systmy, takmer automatick funkcie
Prklad: vizulny systm
- on rohovka - svetlo, intenzita, vlnov dka, priestorov rozmiestnenie
- priestorov rozsah, detaily len 2
- nepretrit pohyb v kmitan oka (30 ms) , zostane na jednom mieste po dobu 60 ~
700ms
Eye movement = 230 70~700 ms

Pamte PS
VIS (Visual Store Image) - vizulna pam
AIS (Auditory Store Image) - zvukov pam

Informcie kdovan fyzicky

-Neidentifikovan , nesymbolick analgie
-Vlastnosti stimulu (napr. intenzita)

zko svis s kognitvnou pracovnou pamou

- overen informcie s presunut do pracovnej pamte
Polas rozpadu (zniku) - VIS = 200 90~1000 ms
AIS = 1500 900~3500 ms

kapacita pamte - VIS = 17 7~17 letters

AIS = 5 4.4~6.2 letters

Vnemov procesor doba cyklu = jednotka odozvy impulzu

P1:Ukazovate vnemovho procesora princp: doba cyklu vnemovho procesora p sa nepriamo men
s intenzitou stimulu

Motor system (MS) motorick systm

Mylienka je preloen do akcie aktivciou svalovch vzorov
- jeden po druhom
Najdleitejie systmy v oblasti IT
- Shoulder-hand-finger (rameno, ruka, prst)
- Head-eye (hlava-oi)

Motorick procesor
Pohyb sa sklad zo srie mikropohybov
Kognitvny systm
-Odkazy vstupy z VS do MS
-Najviac komplexn
- Uenie, zskavanie faktov, rieenie problmov
-Pracovn pam
-Dlhodob pam

Working memory pracujca, krtkodob pam

Okamit myslenie, reprezentcia produkovan vnemovm systmom
Predstavuje veobecn zoznamy kognitvneho procesora (CP)
Kontrukne tvoria podmnoinu LTM prvkov, ktor stali aktivovanmi

Kdovanie pracovnej pamte symbolick akustick kdovanie (telefn, re), vizulne kdovanie
Ksky v pracovnej pamti prvky pracovnej pamti sa skladaj zo symbolov tzv. kskov, tieto ksky s
organizovan do jednotiek, je tam vnoren abstraktn vraz :
CHUNK1 = (CHUNK2 CHUNK3 CHUNK4)
CHUNK4 = (CHUNK5 CHUNK6)
Ksky mu svisie s inmi kskami, aktivcia sa ri na zklade svisiacich kskov, nov ksky s
v rozpore s tmi starmi, rozklad zo starch kskov

Ke sme poiadan pripomen si nejak informciu po niekokch sekundch o sme ju pouli, tak
udia pouvaj obe WM (pracovn-krtkodob) aj LTM (dlhodob)

Long-Term Memory (LTM) dlhodob pam

Uklad masu znalost, sie svisiacuich kskov, me by asociatvne prstupn z WM, nie je
vymazaten

LTM ako smantick sie pri nespenom vyhadvan (efektvne zdruenia nie je mon njs,
podobn zdruenia alebo niekoko alch kskov sa plet???

KdovanieLTM inf musia by kdovan do symbolickej formy

P2: princp pecifickosti zakdovania
P2: Encoding Specificity Principle: Specific encoding operations performed on what is perceived
determine what is stored, and what is stored determines what retrieval cues are effective in providing
access to what is stored.

Ruenie me spsobi funkn stratu kskov

P3: diskriminan princp
P3: Discrimination Principle: The difficulty of memory retrieval is determined by the candidates that
exist in memory, relative to the retrieval clues.
Ukladanie v LTM nie priamo ale cez WM, ak mme pln kapacitu WM tak poklesne schopnos
ukladania na LTM
LTM rchle tanie, pomal zpis, pomaly rozpad systmu
WM ultra rchle tanie, rchly zpis, rchly rozpad systmu

Kognitvny procesor
1 cyklus: asociatvne prepojenie obsahu WM s innosami v LTM (rozpoznanie), modifikcia obsahu
WM (Prevedenie- realizcia), prprava na al cyklus

Frekvencia CP
P4: princp variabilnej rchlosti kognitvneho procesora
P4: Variable CP Rate Principle: The CP cycle time C is shorter when greater effort is induced by
increased task demands or information loads; it also diminishes with practice

CS- kognitvny systm je paraleln v tejto rozpoznvacej fze a sriovo v realizanej fze (vnmame
viac vec naraz, ale robi to vieme len jedno po druhom)

Zkladn zkony udskho vkonu

Modely loveka slowman (najhor vkon, najhorie parametre)
- Fastman (najlep vkon, najlepie paramentre)
- Middleman (priemern hodnoty z rozsahu hodnt)
Vkonnos sa vypotava na zklade vnmania (rchlos, presnos), motorick schopnosti, jednouch
rozhodnutie, uenie

udia maj obmedzenia spracovanie

- Motorick obmedzenia (Fittsov zkon)
- Vizulny rozsah pohybu, farba, detaily, a ich dsledky pre rozhodnutie pri nvrhu
- Modely vizulnej pozornosti
- Alternatvne prdy snmaov

Fitts law for pointng (1954) Fittsov zkon o bodovan

Doba T na presunutie ruky do ciea o vekosti S, ktor le vo vzdialenosti D je dan vzahom
Aplikcia: zni vzdialenos pohybu, urobi cie v
Prklad: kalkulaka, asto vs menej asto pouvan tlaidl

Power law of practce (1926) - Powerov zkon praxe

Doba Tn na vykonanie lohy na n-t proces sa riadi sudkom alebo rozhodnutm
Vznam: doba nauenia kles s praxou
Aplikcia: K k pochopeniu klvesovej skratky (jeden k, viac kov), rzne metdy vstupu (rzna
efektivita, rzna asov nauitenos)

Uncertainty principle, Hicks Law (1968) - princp neistoty, Hicksov zkon

Rozhodovacia doba T vzrast s neistotou ohadom sudku alebo rozhodnutia
Aplikcia: rozhodnutie je aie ak existuj vea monosti na vybratie, malo informcii o problme
o robi: Vytvori hierarchiu, vytvori skupinu vec, ktor maj nejak spol. vlastnosti, poskytn o
najviac inf ako je to mon

Reacton tme reakn as

Reakn doba (na spracovanie, rozpoznvanie)
REACTION TIME + MOVEMENT TIME = RESPONSE TIME
Reakn as + as pohybu = doba odozvy
Simple reaction time jeden podnet s jedinou sprvnou odpoveou
Choice (vber) reaction time niekoko podnetov, jedna alebo viac monch reakc alebo len jeden
podnet s radom monch reakci

Aplikcia reaknho asu- lepie poatie o zai pamte vizulnych a zvukovch podnetov
Predikcia zae na udsk vkon vplyv na reakn dobu v rznych situciach

Pam, pripomenute a zabudnute

Informcie s prstupn niekoko seknd po vstupe a to bu vo WM alebo v TLM alebo v oboch
Niekoko mint po vstupe s uveden inf prstupn iba z TLM
Aplikcia: Nzvy, ktor dvaj zmysel, s lepie prenesen do TLM a maj viac asocici na
vyhadvanie

Interferencia (pletenie) pamte

Najviac akustick a smantick. WM najviac znepokojujce s akustick, pretoe udia s zvyknut
vnma zvuky (re). LTM diskriminan princp: Obtianos natania pamte je uren kandidtmi,
ktor existuj v pamti, vzhadom k navrteniu stopy

Podobn indcie = interferencie

Aplikcia: pam m svoje limity, dodriavanie dohodnutch metafor a terminolgie, nerui star
spsoby vykonvanm novmi lohami, nepredklada podobn alebo rovnak poloky, ktor
vykonvaj alebo maj rovnak funknos

Ratonality principle princp racionlnost

Osoba sa sprva tak, aby si dosiahla svoje ciele prostrednctvom racionlneho sprvania, vzhadom na
truktru lohy a vstupy informci, ohranien obmedzenm jeho znalost a schopnosti spracovania:
Aplikcia: vnmanie udskej innosti ako komplexnej zleitosti, nie je to jednoduch rozhodnutie,
predikcia udskho sprvanie

Problem Space Principle - princp problmovej oblast

Racionlne innosti, v ktorch udia sa angauj vyriei problm
Aplikcie: rozhranie by malo modelova cieov domnu, jeho procesy a vzahy (domnov
pouitenos)
7 tdi akcie poda Normana
1. Formovanie ciea
2. Formovanie zmeru/elu
3. pecifikovanie akcie/krokov
4. Vykonvanie krokov
5. Vnma stav sveta
6. Interpretova stav sveta
7. Vyhodnotenie vsledkov

Dopredn deje (feed forward) sa stan prostrednctvom sprvneho pouitia :

- popisovaoch(povolen)
- obmedzen
- plnovania/mapovan
Sptn vzba prostrednctvom:
- podrobnej informcie o vplyvoch na krok
- koncepn model je vemi dleit

Konceptulny model

Konceptulny model definuje, o systm mus urobi na

splnenie zkladnch defincii.
Konceptulny model pouvateskho rozhrania by mal obsahova:
- lohy, ktor pouvate me vykona.
- Objekty, s ktormi bude pracova.
- Vzahy medzi objektmi.
- Atribty objektov.
- Akcie, ktor me pouvate vykona na objektoch.
- Akcie, ktor sa mu vykona genericky na viacerch objektoch.
- Pojmy, ktor sa pouvaju na referovanie sa k objektom, atribtom, akcim, at.
Konceptulny s ktorm pouvate interaguje/pracuje ako s reprezentujcim konceptom
Mental model s ktorm si uvate mysl e interaguje
Johnson & Henderson conceptual model
Popis na vysokej rovni o tom ako je systm organizovan a riaden.
Popis:
- dizajn pecializovan na metafory a analgie
- koncepty systmu odhalen pre uvateov
o domnovo-orientovan dtov objekt uvatelia vytvraj a ovplyvuj
o ich atribty
o opercie ktor mu by vykonan na nich
- vzahy medzi tmito konceptami
- plnovanie/mapovanie medzi tmito konceptami
Vlastnosti:
- jednoduch
- zameran na lohu
o nie je conceptual model:
- pouvatesk rozhranie
- mentlny model pouvatea
- prpady pouitia
- implementcia architektry
Iba opisuje to, o udia mu robi so systmom a ak pojmy potrebuj na jeho prevdzku.

Nvrhov cyklus interakcie

Rogers, Sharp & Preece
Dix et al., p. 195

nvrh centrovan na pouvatea

UCD (User-Centered Design) je povaovan veobecne ako pouitie tchto zsad :
- aktvne zapojenie uvatea pre jasn predstavu o uvateovi a poiadaviek na lohu
- iteratvny nvrh, vvoj a vyhodnocovanie
- multidisciplinrny prstup
UCD by nemal by vnman len ako testovanie pouitenosti alebo softvrovho ininierstva.
UCD princpy (Wallach & Scholtz)
- skor zameranie na pouvatea
- empirick meranie pomocou prototypov
- iteratvny vvoj
Je dleit rozliova medzi pochopenm uvateov a ich identifikciou, popisom, stereotypmi. To je
dvod, preo dizajnri a developery musia by v priamom kontakte s potencilnymi pouvatemi.

Analza loh
-Zisti uvateove vysvetujce znalosti o lohe poas rozhovoru:
-erpa zo zavedench konvenci, pouva existujce dokumentcie a systmy
-metda laddering (rebrk) zaa s poiatonou polokou (napr. typ psma) potom sa pohybova
okolo taxonmie pomocou pokynov
-Pohyb nadol: Mete uvies prklady z psiem?
-Pohyb naprie: alternatvne spsoby ako zmeni vzhad textu?
-Pohyb hore: o Verdana a Helvetica maj spolon?
Stupne analzy loh:
- definovanie elu a rozsahu
o o chce vedie a ako to bude pouva?
- zskanie dt
o Skma o skuton udia robia, relnu lohu v relnom kontexte ->video zznam,
existujci systm
o Dokumentcia, trningov programy, rozhovory so zainteresovanmi subjektmi
o generovanie scenrov
- Vyahovanie zoznamu innosti
- Organizovanie a popis vykonvanej lohy
- Potvrdenie platnosti opisu
o ak je potrebn opakova predchdzajce kroky
Hierarchick analza loh (HTA) je jednm s primrnych spsobov tvorby konceptulneho modelu.

Domnov analza
WDA (Work domain analysis) umouje pochopenie loh, ktor pouvatelia potrebuj vykona pre
dosiahnutie uritch cieov. Ak analza loh je zoznam intrukci ako sa dosta z bodu A do bodu B,
potom WDA je ako ma mapu ternu, ktor zaha bod A a bod B. WDA zaha:
- analzu existujcich systmov,
- analzu existujcej dokumentcie,
- analzu dostupnch webovch zdrojov.
rovne domny:
- el domny dvod preo pracovn systm existuje
- hodnoty domny kov hodnoty uren na posdenie, ako dobre systm funguje
- funkcie domny mu by vykonan systmom
- fyzick funkcie ktor objekty mu vykonva, nezvisle od ich elu
- fyzick objekty suma vetkch relevantnch objektov ktor tvoria vetky technolgie
komponentov, nezvisle od ich elu

Scenre
- neformlny podrobn popis pecifickch interakcii zvyajne situovan do relneho sveta
- Persony typicky pouvatelia (hypoteticky pouvate)
- Nepodstatn detaily pomhaj veci vytvra relnejie, vyhba sa chybm
Scenr je prbeh nho pouvatea, ktor pouva n softvr alebo zariadenie na vykonanie
pecifickej lohy alebo ciea (napr. Jana si chce s zajtra veer s kamartmi zahra bedminton).
Scenre by mali by detailn, mali by opisova "kto", "o", "kedy", "kde", "preo" a "ako". Na tvorbu
scenrov sa zvykne pouva mapovanie scenra.
Mapa scenra mapuje kroky pecifickej lohy v horizontlnej rovine zava doprava a obsahuje:
- Meno persony a nzov ciea - vo vrchnej asti mapy scenra.
- Opis lohy v krokoch - sstrete sa na to, o sa stane, nie nutne na to, ako sa to stane.
- Akkovek komentre o tom, o je poda vs v tomto kroku dleit.
- Akkovek otzky alebo predpoklady, ktor vyvstan poas tohto kroku a ktor je potrebn
zodpoveda alebo vyriei.
- akkovek npady alebo odporania, ktor udia maj.

Prototypy
- Hmataten prejavy dizajnu
- Pouvatelia, dizajnry a ostatn zainteresovan osoby mu interagova s prototypmi rchlo
a lacno
Existuj tri zkladn spsoby tvorby papierovch prototypov softvrovch aplikci:
1. Manulne - obrazovky sa nakreslia rukou na papier alebo na predpripraven ablny .
Interaktvne asti obrazoviek alebo komponenty sa vystrihn, aby ich bolo mon zamiea.
Jednotliv nakreslen komponenty je mon zlepi aby tvorili skupiny komponentov.
2. S pomocou abln - podobn manulnemu prototypovaniu, no obrazovky sa vyskladaj
pomocou predpripravench abln komponentov. Tieto mu by nakreslen alebo vopred
vytlaen na papier a vystrihnut alebo vyrezan. Vhoda oproti klasickmu prototypovaniu
rukou je etrenie asu pri procese nvrhu obrazovky, pretoe komponenty netreba kresli, s
u hotov. Tie vaka tomu, e je mon vidie vetky dostupn komponenty, je nvrh asto
bohat.
3. S pomocou nstroja - nadstavba nad manulnou alebo ablnovou tvorbou prototypov.
Umouj "zinteraktvni" papierov prototypy tm, e je mon vytvori prechody medzi
obrazovkami. Obrazovky mu by nakreslen a odfoten, alebo vytvoren priamo v nstroji.
Existuj tri typy prototypov:
1. Statick - nvrh statickch obrazoviek sli vinou na zhmotnenie predstv nvrhrov alebo
predben nvrhy.
2. Dynamick - obsahuj zkladn interakciu vo forme zmien obrazoviek. Pouvaj sa na
overenie sprvnosti postupnost obrazoviek.
3. Interaktvne - obsahuj pokroil interakciu, animcie, vide a pod. Psobia ako hotov
aplikcia. Tvoria sa vo finlnych tdich vvoja, kedy je potrebn uplatni pouvatesk
testovanie, napr. pri vbere z viacerch verzi rozhrania.
Screen Sequence Diagrams (SSQ)
- Sekvencia obrazoviek pouvateskho rozhrania z ktorch kad je vyvolan lohou
pouvateskho rozhrania (o sa zobraz po tejto lohe?)
- Mali by pokrva vetky lohy a obrazovky pouvateskho rozhrania
- Pomu nm predstavi si finlny systm (nvrh protypu)
Pouitenos je atribt kvality, ktor hodnot, ak ahk s na pouitie pouvatesk
rozhrania. Vyuitenos sa tie tka spsobov pre zlepenie jednoduchosti pouitia poas
procesu nvrhu.
Pouitenos - 5 sast (Nielsen):
Nauitenos: Ak ahk je pre pouvatea vykona zkladn lohy, ke prvkrt
naraz na dizajn?
o ui sa ahko, rchlo zaa pracova
innos: Akonhle sa pouvatelia nauili nvrh, ako rchlo mu plni lohy?
Zapamtatenos: Ke sa pouvate vrti do nvrhu po dobe, poas ktorej ho
pouva, ako ahko si mu obnovi vedomosti?
Chyby: Koko chb s pouvatelia schopn urobi, ak zvan s tieto chyby, a ako
ahko sa mu zotavi z chb?
o nzka frekvenn chyba
o Uvatelia robi menej chb
o jednoduch obnova
o iadne katastrofick poruchy
Spokojnos: Ak prjemn je pouva dizajn?
o subjektvna spokojnos, pouvateovi sa to pi

Existuje mnoho alch dleitch atribtov kvality. Hlavnm z nich je nstroj, ktor sa
odvolva na funknos dizajnu : Rob to, o pouvatelia potrebuj?
Pouitenos a uitonos s rovnako dleit a spolone zisuj, i nieo je uiton:
Nezle na tom, e nieo nie je jednoduch, ak to nie je to, o chcete. Je to tie k niomu, ak
je systm schopn hypoteticky robi, o chcete, ale nemete pretoe uvatesk rozhranie je
prli ak.

Defincia Utility (prospenos, funknos) = i poskytuje funkcie, ktor potrebujete.

Defincia pouitenosti (Usability )= ako ahk a prjemn tieto funkcie s na pouitie.
Defincia Uitonosti =Usability + Utility

Zsady a usmernenia pre tvorbu pouvateskch rozhran:

- pouitenos
- Domain pouitenos (domnov)
- prstupnos
- dosiahnutenos
- Prstup orientovan na pouvatea :
Predasn zameranie na pouvatea a lohy
empirick meranie
iteratvny nvrh, vvoj, ohodnotenie
 nemala by by vnman ako testovanie pouitenosti
Gould a Lewis 1985

Pouitenos
Jacob Nielsen - otec pouitenosti

10 pravidiel pouitenosti pri nvrhu uvateskho rozhrania (Nielsen):

Viditenos stavu systmu
o Systm by mal vdy priebene informova pouvatea o tom, o sa
deje, a to prostrednctvom vhodnej sptnej vzby v primeranej
dobe.
Sdrnos a tandardy
o Postupujte poda konvenci platformy prostrednctvom
konzistentnch slov, situci a akci
o Pouvatelia by sa nemali pta, i rzne slov, situcie, alebo akcie
znamenaj to ist. Postupujte poda konvencie platformy.
prevencia chyby
o Predchdza problmom: eliminova nchylnosti k chybm, prs
na ne skr, ne pouvatelia
o Dokonca lep, ne dobr chybov sprvy je starostliv nvrh, ktor
v prvom rade zabrauje vskytu problmov.
uvatesk ovldanie (kontrola) a sloboda
o Podpora sp, znova a vstupn body, ktor pomhaj
pouvateom opusti neiadci stav spsoben chybami
o Pouvatelia si asto vyberaj systmov funkcie omylom, musia sa
jasne oznai ndzov vchody pre opustenie neiadceho stavu,
bez toho aby museli prejs rozren dialg.
Zhoda medzi systmom a relnym svetom
o Poui relne slov, pojmy a konvencie znmych pouvateom v
prirodzenom a logickom porad
 o Systm by mal hovori jazykom uvateov, slov, frzy a pojmy
znme pre uvateov, skr ako z hadiska systmovo orientovan.
Postupujte poda relnych konvenci, take informcie sa objavia v
prirodzenom a logickom porad.
Uznanie skr ne odvolanie
o Minimalizova zaaenie pamte pouvatea tm, e objekty, akcie
a monosti bud viditen. Pouvate by nemal ma na pamti,
informcie z jednej asti dialgu do druhho. Nvod na pouitie
tohto systmu by mal by viditen alebo ahko dosiahnuten,
kedykovek je to vhodn.
Flexibilita a efektivita vyuvania
o Urchovaa - neviditen od zanajceho pouvatea - me
asto urchli psobenie na vyhotovenie znaleckho pouvatea
tak, e systm me uspokoji ako pre nesksench i sksench
pouvateov. Umouj pouvateom prispsobi ast akcie.
Estetick a minimalistick dizajn
o Dialgy nesm obsahova informcie, ktor s irelevantn alebo len
zriedka potrebn. Kad alie jednotka informci v dialgu sa
s prslunmi jednotkami informci a zniuje ich relatvnu
viditenos.
Pomc pouvateom rozpozna, diagnostikova a zotavi sa z chb
o Chybov hlsenie by mali by vyjadren jednoduchm jazykom
(bez kdu), presne ukazuj problm, a kontruktvne navrhn
rieenie.
Pomocnka a dokumentcia
o Aj napriek tomu, e je lepie v prpade, e systm me by
pouit, bez dokumentcie, me by potrebn poskytn pomoc a
dokumentciu. Kad takto informcie by sa mali da ahko
vyhadva, zamera sa na lohu pouvatea, zoznam konkrtnych
krokov, ktor maj by vykonan, a nesmie by prli vek.

pokyny Usability.gov pre web design

Poskytova uiton obsah
Stanovenie poiadaviek uvateov, splni oakvania pouvatea
o zapoji pouvatea
Zamera sa na vkonnos pred preferenciami
Poui paraleln dizajn
tandardizova sekvencie loh, aby boli jasn, zjednoti obsah
Zni pracovn zaaenie pamti uvatea
Poskytn sptn vzbu, ke pouvatelia musia aka (dlh sahovanie)
o Tie po vykonan lohy
Nevyaduj, aby pouvatelia vyuvali vhody multitaskingu pri tan
poskytn pomoc
 Dizajn pre ben operan systmy, prehliadae, zariadenia, rozlenie
obrazovky, rchlos pripojenia
Zobrazi vetky hlavn monosti na domovskej strnke
Vyhn sa prepchatmu displeju
truktra pre jednoduch porovnanie, zarovnanie poloiek
o Dleit poloky dsledne, na strede hornej asti
o Pouite naviganch monost
Mapy pouitia v mieste omrvinkovej navigcia
Poui popisn nzvy strnok a ttky z kariet, odkazy
Eliminova horizontlne rolovanie
Poskytuj pouvateom dobrmi spsobmi, ako zni monosti
Zabezpei vizulnu konzistenciu, emulova objekty relneho sveta
o emulova, znamen vo vpotovej technike schopnos napodobni
jeden systm inm
Poui video, audio a animcie zmysluplne

Prstupnos
W3C o prstupnosti webovch aplikci
o Sila webu je v jeho univerzlnosti. Prstup pre kadho bez ohadu
na zdravotn postihnutie je dleitm hadiskom.
Vnmaten
Operatvne
Pochopiten
Robustn

Vnmaten
Alternatvny text pre non-text

o vekoplon tla, slepeck psmo, re, symboly, jednoduch jazyk

Rzne spsoby prezentcie
o jednoduchie usporiadanie, bez straty informci alebo truktry
Nech je to ahie vidie / pou, obsahovo prispsobiten
o Vrtane odlenia popredia / pozadia
Rozoznaten
o Pouitie farby, kontrast, textu a obrazu (re) vekosti, itatench
fontov
Operatvne
Klvesnica prstupn - podporn technolgia pre vstup
o Re, lupa obrazovky
o software pre rozpoznvanie hlasu
o vberov spnae
Dos asu na tanie a poui obsah
Pomoc navigciou, vyhadva obsah
Pomc uri, kde s
o Drobekov navigcie (Omrvinkov)
Fotosenzitvne epilepsie / zchvaty
o Blik na krtku dobu a potom sa zastav
o Blikajce nie menej ako 3 krt za sekundu
Rzne spsoby prezentcie
o Zmyslupln truktra, organizcia a vnmaten prezentcia

Pochopiten
textov obsah itaten a zrozumiten
o Jazyk, skratky, nezvyajn slov, tanie rovni, preklady
Strnka sa objav a prevdzkuje predvdatenm spsobom
Pomoc uvateom vyvarova a opravi chyby
o Finann daje: reverzibiln, kontrolovan, potvrden

Robustn
Maximalizova kompatibilitu s:
o Pouvateskm agentom (aktulnych a tch budcich)
o Vrtane asistennch technolgi
Spracovaten, plat:
o Vyhn sa duplicitnm atribtom
o Poiaton a koncov znaky, hniezdenia
Nzov, loha, hodnota komponentov - programovo uriten
Stavy, vlastnosti, hodnoty - programovo premenliv

Domna pouitenos a WDA, TA

 WDA a TA
o WDA - Analza prce domny
o TA - analza loha

pokyny pouitenosti domny (domnovej pouitenosti)

Pouitie domny - pecifick terminolgia
o Pouva jazyk pouvatea
o Mapovanie UI akcie k lohm v relnom svete
o Mapovanie relnych vzahov
Poskytn popisky funknch prvkov, a to najm:
o Ikona tlaidla / poloky v menu
o Domna - pecifick funkcie
Poskytn ttky pre zloky, tvori a poui konzistentn ttky
Nenechajte zoveobecni prli vea
Vyhn sa gramatickm chybm
Preklada vetky frzy v pouvateskom rozhran

Mobiln zariadenia - plne odlin kapitoly

Mobiln zariadenia s diferencilny tandem, maj svoje obmedzenia
Men displej, hor vkon (lep) v poslednom ase
o Variabilita zariadenia
Manipulcia s hmatom
o Virtulna klvesnica, iadny my
Odlin kontext pouitia
Pomalie pripojenie k internetu
vybitia baterky

Responzvny dizajn
Navrhnut pre viac zariaden, rznym obrazovkm
o Be na smartphonoch a tabletoch, nb, pc
o HTML5, CSS, JavaScript, AngularJS
Opatrne, je ahk zlomi pokyny cieovej platforme
o Android, iPhone, Windows alebo BlackBerry? Windows alebo
Linux?
Vek dizajnov displej nie je pouiten na malch a naopak
Niekoko rd pre responzvny dizajn
o Na malch zariadeniach:
Skry poloky, ktor s menej dleit
Urobi viac krokov, viac detailov obrazoviek
 Robi veci skrvaten, skladacie
Adaptova na cieovej platforme aj vekos obrazovky
Nespoliehajte sa len na dve vekosti obrazovky (pc +
Mobile)

Metafory relneho sveta

- Poui relnych metafory v prpade potreby
Vyhodnocovanie pouitenosti (Usability evaluation)
- Posdi vplyv pouvateskho rozhrania na vkonnos a spokojnos pouvatea
- Identifikova problmy s pouitenosou
- Zhodnoti prstup uvatea k funkcionalite systmu
- Porovna rzne dizajny/prototypy

Kedy vyhodnocova?
- Na zaiatku (early)
- Poas (intermediate)
- Na konci (full)
- Po nasaden
- V priebehu celho ivotnho cyklu, nie len na konci =iteratvny dizajn
(pre kad etapu s rzne metdy https://www.usability.gov/how-to-and-
tools/methods/index.html)

Hodnotiace metody
1. Inpekn metody
a. Cognitive walkthrough (kognitivny prechod? Ani ona to v slovniku pojmov
neprelozila)
b. Heuristicke vyhodnocovanie
c. Kontrola/inpekcia pravidiel
2. Testovanie pouitenosti
a. Laboratrny experiment
b. tdia v terne

Formatvne VS Sumatvne vyhodnotenie

1. Formatvne identifikuje problmy s pouitenosou
a. Kvalitatvne opatrenia
b. Etnografick metdy
2. Sumatvne meria/porovnva vkon pouvatea
a. Kvantitatvne opatrenia
b. tatistick metdy

a) Cognitive Walkthrough
- Ako vemi pome dizajnov podpora pouvateovi v uen sa loh?
- Zvyajne je vykonvan odbornkom v kognitvnej psycholgii. Prechdzka nvrhom
na identifikciu potencionlnych problmov pouva psychologick princpy.
- Scenre mu dopomc
- Inak to je to, o kresl prototyp na papier a presva tie papieriky poda toho na o
ukne a pod.

a) Vyhodnotenie dizajnu Cognitive Walktrough

Pre kad lohu zvi:
1. Ak vplyv bude ma interakcia na uvatea?
2. Ktor kognitvne procesy s nevyhnutn?
3. Ak problmy s uenm mu nasta?
 - Zamera sa na ciele a znalosti uvatea.
- Vedie dizajn uvatea k vygenerovaniu sprvnych cieov?

b) Heuristicke vyhodnocovanie
Kritri pouitenosti (heuristik) s identifikovan:
Experti na pouitenos kontroluj softvr porovnvaj s akceptovanmi zsadami
pouitenosti. Prklad heuristiky:
- sprvanie systmu je konzistentn
- sptn vzba je poskytovan
Heuristickej vyhodnotenie "lad" (debugs) dizajn

c) Kontrola/inpekcia pravidiel
Psomn pokyny s odporan pre vie projekty
- truktra obrazovky
- Vzhad objektov
- terminolgia
- znenie vzviev a chybovch sprv
- ponuky
- priamej manipulcie s akciami a sptnou vzbou
- On-line pomocnk a in dokumentcia
Skupina pouitenos by mala ma stanoven inpektor (designated inspector?)

Testovanie pouitenosti
Testovanie produktu / prototypu s reprezentatvnym uvateom
- uvate sprav vopred stanovench lohy
- Pozorovatelia pozeraj, povaj, robia si poznmky
- cie:
- identifikova problmy pouitenosti
- zhromaova daje
- uri spokojnos pouvatea
- porovna alternatvne nvrhy
- vyvin pevn pln testovania
- naverbova astnikov
- analyzova a reportova svoje vsledky
- vhody:
- Zistm, i s uvatelia schopn dokoni dleit lohy
- uri, ako dlho to trv
- Zistite, ako s uvatelia spokojn
- identifikova zmeny na zlepenie
- analyzova vkon, aby som zistila, i spa moje ciele s pouitenosou

astnci pouvateskho testovania:

- maj by podobn ako uvatelia softvru
- Niekoko potencilnych skupn uvateov v zvislosti na produkte ??? (str 14
prednaska 5)
- vrtane zstupcov vetkch skupn
 - V optimlnom prpade treba realizova testovanie s kadou skupinou zvl
- Ja nie som mj uvate. astnci by mali by
- nezapojen do dizajnu / vvoja vrobku!
- reprezentova cieov skupinu
- intern zamestnanci mu by pouit v pilotnom testovan

Experimenty pouitenosti
- Nadizajnova viac experimentlnych prototypov
- vyska vetky prototypy s rznymi skupinami uvateov
- kontrolovan experimenty mal, vznamn rozdiely
- zhodnoti sa to lepie
- Zlepova a viackrt zopakova
- Konvertova testovac nstroj

Experimenty s webovmi strnkami

Obsahov experimenty - ktor verzia vsledkov vstupnch strnok prina najvie zlepenie
v ?conversions?
- A / B Experiment - dva alebo viac rznych verzi strnok oproti pvodnej strnke
- Experiment s rozdelenm URL - odlin verzie strnky (alebo strnok), ktor s u
uroben a s k dispozcii.
- Experimenty s viacermi variantami zisuje sa najlepia kombincia dvoch alebo viac
rznych poloiek na strnke.

Obrzok 2 A/B Obrzok 1 URL Obrzok 3 Viac variant

Metdy pre zber dt/dajov

Papier a ceruzka - lacn, obmedzen
Audio / Video - potrebuje pecilne zariadenie, dotierav
- automatizovan nstroje s k dispozcii
Logovanie potaom - automatick a nevtierav, ak analyzova
- nahrvanie obrazovky
Uvatesk notebooky /poznamky?- neprepracovan a subjektvne, uiton nahlianutie
In techniky: rozhovory, focus groups, dotaznky a prieskumy, pozorovania v terne,
nepriame pozorovanie, experimenty

FOCUS GROUPS:
- Kvalitatvny vskum
 - Skupina ud sa navzjom pta na svoje postrehy, nzory, presvedenia, postoje voi
(potencilnemu) produktu
- Otzky s poloen v interaktvnom skupinovom prostred
- astnci maj monos hovori s ostatnmi lenmi
- Cie: tudova ud radej o v najviac prirodzenej konverzcii ne v one-to-one
rozhovore

Dotaznky, prieskumy
Otzky o:
- Zujem o potencilne nov funkcie
- Zhodnotenie existujcich funkci
- Demografick preferenci (vek, pohlavie, krajina)
- Zvyajne 1-5 / 7/10 rozsaha alebo otvoren otzky

pozorovanie uvatea
Priame - vyetrovate je prtomn poas lohy v oblasti - v terne
Nepriame lohy s ukazovan niektormi inmi prostriedkami (videorekordr, obrazovka
prehrva, sledovanie o, at.) laboratria pre testovanie pouitenosti

Meranie pouvateskho vkonu

Meranie nauitenosti
- as na dokonenie radu loh novikom
- nauitenos / innos trade-off (Learnability/efficiency trade-of??? )
Meranie innosti
- as pri plnen loh odbornkom
- ako definova a lokalizova "sksench" uvateov?
Meranie zapamtatenosti
- najaie, pretoe je ak njs "bench" uvateov pre experimenty
- pamov kvzy mu by zavdzajce
Meranie spokojnosti uvateov
- Likertova stupnica/kla
- smantick rozdiel stupnice
- psychologick meranie stresu
Meranie chb
- klasifikova mal vs. vne
- poetnos chb na lohu

Po testovan
Retrospektvny priechod
Poznmky o tom, o pouvatelia spravili
Vyjadren:
- ciele, chaos a nedorozumenia
- chyby
- reakcie

In zaujmav metdy
Testovanie prvho kliknutia:
Na o astnk klikne ako na prv v rozhran na dokonenie svojej lohy - vo fungujcom
systme, prototype, wireframe
Preo?
Sprvna cesta prvho kliknutia -> complete task successfully 87% of the time
Zl cesta prvho kliknutia -> complete task successfully 87% of the time

Sledovanie pohybu oka:

Meranie, kde sa oko pohybuje a na o sasstred
Preo?
- Kde sa pozerme?
- Ako dlho sa pozerme?
- Ako sstredme svoj pohad na poloku z inej poloky na webovej strnke?
- Ak as rozhrania si nevmame?
- Ak vekos a umiestnenie poloiek prilka nau pozornos?
- Ako sa orientujeme na celej strnke?

Diakov testovanie:
- Uvatelia s vo svojom prirodzenom prostred
- Podporovan softvr: zdieanie obrazovky, nahrvanie obrazovky, online pouitenos
sluieb predajcu.
- Trv 15-30 min, 3-5 otzok
- Moe to by moderovan/nemoderovan

kla pouitenosti systmu: (SUS)

- Rchly a pinav", spoahliv nstroj pre meranie pouitenosti
- 10 otzok, 5 monost odpovede (Rozhodne neshlasm/Rozhodne shlasm)
- Skre nad 68 je nadpriemern ??

Triedenie kartiiek:
Vyhodnoti informan architektru softvru
Uastnci organizuj tmy do kategri, poda ich zmyslu (Me tie pomc oznai skupiny)
Vhody:
- Zostavenie truktry
- Rozhodn sa, o da na domovsk strnku
- Otikova (label) kategrie a navigciu

Metda Pouvate je opit

Predstav si svojho uvatea opitho:
- Rozmazan videnie
- Slab pozornos
- Emcie

Koko astnkov?
Testy pouitenosti: 5 uvateov v kadej itercii
Kvantitatvne tdie: najmenej 20 uvateov pre zskanie tatisticky vznamn mnostvo
Triedenie kartiiek: najmenej 15 uvateov
Sledovanie pohybu oka: 39 uvateom pre heat maps
6. Aktri v nvrhu a vvoji pouvateskch rozhran, optovn pouitenos (reuse), vvoj
softvru riaden komponentmi, komponentov tvorba pouvateskch rozhran, vzor
Model-View-Controller, vzor Observer, AngularJS 2.

Aktri v nvrhu a vvoji pouvateskch rozhran

grafick dizajnr - vytvra grafick aktva -> ako obrazovka bude vyzera, prechody
a animcie
dizajnr interakcie - definuje obrazovky a prietok uvateskho rozhrania
- vysok level aplikanej logiky
- definuje dta uvateskho rozhrania ktor bud prezentovan
- vzhad obrazoviek
softvrov ininier - pripja dtov sluby na middleware -> potaov softvr, ktor
prepja softvrov komponenty alebo osoby a ich aplikcie
- integruje aplikan logiku s middleware a udalosami

Dizajnr uvateskho zitku (User Experience Designer)

- jeho prca zaha sledovanie udskej interakcie s danm systmom, zahajci rozhranie,
grafiku, priemyslov dizajn, fyzick interakciu a manul. Vo vine prpadov plne zaha
tradin Dizajn komunikcie loveka s potaom (Humancomputer interaction - HCI) a
roziruje ho tm, e riei vetky aspekty vrobku alebo sluby, tak ako je vnman
uvatemi.

Vstupy: wireframes obrazoviek, storyboardy, sitemaps, SSQ

Nstroje: Photoshop, Sketch, Illustrator, Invision

Nvrhr uvateskho rozhrania (UI) - vytvra rozhranie s drazom na maximlnu

pouitenos a uvatesk komfort. Cieom nvrhu uvateskho rozhrania je, aby bola
interakcia uvatea o najjednoduchie a najefektvnejie.
Vstupy: wireframes obrazoviek, storyboardy, sitemaps, SSQ
Nstroje: Photoshop, Sketch, Illustrator, Fireworks

Visual designer (Graphic designer)- vytvraj dizajnov koncepty pre konkrtny projekt,
zaoberaj sa vizulnou, estetickou strnkou produktu
vstupy: ikony, obrzky, ...
Nstroje: Photoshop, Sketch

Interaction designer (Motion designer) - dizajnr interakcie

- navrhuj to o rozhranie vykon po dotyku, stlaen pouvatea

Vstupy: animcie, 3D modelovanie, grafika pohybu

Nstroje: AfterEffects, Core Composer, Flash, Origami

UX researcher (User researcher)- vskumnk uivateov?

- maj za lohu njs odpovede na otzky: Kto s uvatelia a o oakvaj od danho
produktu

vstupy: Personas, vsledky testov A / B, uvatesk tdie a rozhovory

Nstroje: Mic, papier, docs

Front-end developer (UI developer)

implementuj uvatesk rozhranie
Nstroje: GUI Builders, IDE, HTML, CSS, JavaScript

Product designer
- jednoroec v UX vvoj (Mtick dizajn pouvateskho rozhrania, architekt s pokroilm
adaptvnym rozsahom zrunost. Vysoko kvalifikovanch pracovnkov v grafickom dizajne,
prototypovania drtovch modelov, CSS3 HTML5, jQuery, testovanie s viacermi
premennmi, use case scenrov, marketing a branding.)

Vstupy: vetky aspekty nvrhu

interakcie
vizulne
produkt
prototypovania
pixel-perfektn vysmieva a kd pre novmi funkciami
cez web a mobiln zariadenia

Optovn pouitenos (reuse)

Systmy s zloen z komponentov
optovn pouitie aplikci
optovn pouitie komponentov
optovn pouitie funkci
Vhody
Vyia kvalita
Rchlejie kontrukcia
Niie nklady
Komponentovo zaloen softvrov ininierstvo (CBSD)
-asto sa spolieha na optovn vyuitie kdu
- objavil sa z nespechu OOP na inn podporu optovnho pouitia
- Pre podporu optovnho pouitia objektov (triedy) s
- prli konkrtne
- prli podrobn
- Komponenty s viac abstraktn ako triedy
mono povaova poskytovateov sluieb stand-alone

o je to komponent?
-Uzavret sbor sprvania alebo procesu a logiky
-Znme rozhrania alebo API
-prstup k jeho funknosti
- opakovan pouitie, Standard, Portable

Vvoj softvru riaden komponentmi

- postaven, vystavan grafick pouvatesk rozhranie z komponentov
- Drobn diely s konzistentn API (rozhranie pre programovanie aplikci)
- ahko instrumentovaten ako sas vej obrazovky, aplikcie, alebo systmu
- Vybavuje pomocou pouvateskho rozhrania udalosti

o je to GUI komponent?
- sada sprvania sa ktor zapuzdruje svisiace ovldae a sprvanie s nm asociovan
- zkladna podpora pre:
- udalosti pri manipulcii
- zmena vekosti
- ovldanie fontov
- komponenty na kreslenie
- pridvanie komponentov do kontajnerov

komponentov tvorba pouvateskch rozhran

Java: vizulny sprievodca pre manarov rozvrhnutie
GUI stavitelia
HTML:
<div>
(S) CSS
displej (blok / ded / flex), max-width,
pozcie (relatvna / absoltna)
Animcia
je lepie vyui existujci frame (rm)

vzor Model-View-Controller
- model
- uklada dta poda prkazov z riadiaceho systmu a zobraz ich v pohade? (view)
- view
- generuje vstupn prezentciu pouvateovi zaloen na zmench v modeli
- ovladae
- posiela prkazy modelu na obnovenie jeho stavu
- posiela prkazy k jeho prslunmu view na zmenu jeho prezentcie modelu

vzor Observer
Oddeuje zobrazenie stavu objektu od samotnho objektu
ak je potrebn viacnsobn monitorovanie stavu
AngularJS 2.
- full verzia vydan v septembri 2016
- cel napsan v ECMAScript6
- vyuva vinu funkci ES6
- nov syntax silne inpirovan ReactJS
komponenty
- abln v JS kde
- nepouva sa 2-way viazanie dt v predvolenom nastaven
ukzal sa ako neinn vo vekch aplikcich
oficilne vukov videa vyuvaj verziu TypeScript Angularu
TS dodva spolon koncepty JS, ako s:
- triedy, rozhrania, moduly, generik
-(volitene) statick psanie, modifiktory prstupu
-kompilcii-time kontrola typu
- automatickho dokonovania

Angular 2.0 vlastnosti

1. Komponenty
Zapuzdri ablny, dta a sprvanie na ely
- zlokou je trieda strojopisom
- Me ma vlastnosti a metdy
- Jedna testovaten jednotka? (A single unit-testable unit)
- Root zloka - obsahuje podriaden zloky

2. Smernice - Directives
Ak chcete upravi DOM prvky a / alebo predi ich
sprvanie:
- nemaj iadne ablny alebo znaky HTML
- Viac vstavan smernice
- prida / odobra element
- prida / odobra CSS triedy
- ich opakovanie
<input type="text" autoGrow/>

3. Service
- Zapuzdruje akkovek ne-UI logiku
- Prstup k dtam, logovanie, obchodn logika, konfigurcia
4. Router
- Zodpovedn za navigciu
- Zobrazuje komponenty zaloen na URL

o budete potrebova
NodeJS (NPM)
- intaluje balky, spust aplikciu
- TypeScript (alebo ES6)
- npm install g typescript
- (oficilny AJS2 ES6 tutorial doteraz nevydan)
- genertory (s to zatia nie je pripraven):
- Oficilne Uhlov 2,0 genertor
- Yeoman Uhlov 2,0 genertor
- trochu ovlda TypeScript
- TypeScript compiler
- npm install g typescript
- IDE podporujci TypeScript
- Visual Studio
- WebStorm
- Sublime, Atom,
- prehadva (Chrome)

prednka 7. pokrauje spsobom ako naintalova Angular a je tam ukzan prklad ak by

Vs to zaujmalo :D
7. Virtulna realita (VR), zmiean realita (MR), priestor a sstavy, spsoby interakcie, VR
systm, jeho zloenie a spsob fungovania, historick nvznosti, vstupno-vstupn
prostriedky, pracovisk VR a MR, 3D stereo zobrazovanie, 3D tla.

Virtulna realita (VR)- Virtulno-realitn systm predstavuje interaktvny potaov

systm, vytvrajci ilziu v danom ase neexistujceho len syntetizovanho priestoru alebo
ete presnejie meme hovori o tzv. dokonalej simulcii v prostred tesnho spojenia lovek
- vpotov systm

Zkladom virtulnej reality je snaha o o najvernejie zobrazenie priestorovch modelov a

scn, manipulcia s nimi, tvorba relneho sveta, jeho uritej asti so vetkmi svojimi
zkonitosami a pravidlami, pohyb v trojrozmernom priestore a to vetko v relnom ase.
Pritom s vyuvan zkladn postupy z oblasti potaovej grafiky.
Virtulna realita je vlastne posun od jednoduchej (dvojrozmernej) interakcie loveka
so strojom , do polohy, ke tto interakcia prebieha v trojrozmernom prostred. Trojrozmern
reprezentcia tejto interakcie me drasticky zmeni spsob prce s potaom ako aj
produktivitu a poteenie z nej. Tieto metdy bvaj umocovan pomocou pouitia
pecilnych perifri, ktor zaisuj obrazov, hmatov, zvukov a polohov interakciu.

Vlastnosti virtulnej reality:

vetky deje sa uskutouj v relnom ase, pokia mono s okamitou odozvou na
akciu uvatea
virtulny svet a objekty v om umiestnen maj trojrozmern charakter, alebo aspo
vytvraj jeho dojem
uvateovi je umonen vstupova do virtulneho sveta a pohybova sa v om po
rozlinch drhach (chod, lieta, ske, rchlo sa presva na predom definovan
miesto)
virtulny svet nie je statick. S jeho asami me uvate manipulova. Taktie
virtulne teles sa pohybuj po animanch krivkch, ovplyvuj uvatea a aj seba
navzjom

Niektor technolgie spadajce do oblasti VR

telerobotika
teleprezencia
teleriadenie
zmiean realita (mixed reality)
rozren realita
rozren virtualita
obohaten realita

Zmiean realita (mixed reality, MR) je oblas potaovho vskumu zaoberajca

sa kombinciou relneho sveta a potaom generovanch dt (virtulnej reality), kde
potaom generovan syntetick objekty s vmieavan do relneho prostredia a naopak, v
relnom ase
Zkladn charakteristiky MR
kombinuje relne a virtulne
je interaktvna
prebieha v relnom ase
je registrovan v troch dimenzich

Systm zmieanej reality je povaovan za definitvne imersvny systm.

Zmiean realita Milgramovo continuum- me vznikn pouitm aspo jednej z

technolgi spomenutch niie
Rozren (obohaten) realita (augmented reality, AR) vkladanie syntetizovanch objektov
do relneho sveta
Rozren virtualita (augmented virtuality, AV) vkladanie relnych objektov do
syntetizovanho sveta

Priestor a sstavy
Aby boli mon manipulcie s virtulnymi objektmi je nutn najprv zadefinova virtulny
priestor. Zkladnou charakteristikou priestoru je jeho rozmer (dimenzia). Tento me by:
seln
neseln
Poznme viacero selnch dimenzi: topologick, Hausdorffov, fraktlna, dimenzia
sebepodobnosti, kapacitn dimenzia alebo neseln napr. : informan dimenzia a pod.
Najviac pouvan dimenzia je topologick dimenzia vyjadren celoselne. Je to rozmernos
objektov bene pouvanch v matematike. Najastejie pouvan objekty s:
0-rozmern objekt (bod)
1-rozmern objekt (priamka, seka)
2-rozmern objekt (plocha)
3-rozmern objekt (teleso)

Dleitm krokom pre aplikciu transformci je definovanie vhodnej sradnicovej sstavy

nad pouvanm priestorom. Prvm kritriom delenia sradnicovch sstav je ich spomnan
dimenzia (rozmer). Najastejie sa pouvaj 2D a 3D sradnicov systmy. Tam kde sa
pouva aj as napr. pri animcich sa pouvaj tvorrozmern sradnicov sstavy. Poda
typu sradnc, ktor sradnicov sstava vyuva ich delme na:
kartezinske
polrne
alej budeme rozobera kartezinsku sstavu. V sekundrnej rovni sa sradnicovej sstave
priradia atribty ako rozmer, typ sradnc prp. mern jednotky (cm, pixle a pod). Z hadiska
charakteru sa bud pouva nasledujce sradnicov sstavy:
USS- Univerzlna sradnicov sstava- predstavuje sradnicov sstavu aplikcie, kt.
pouva pouvate
SSO- Sradnicov sstava objektu - predstavuje sradnicov sstavu prslunho
objektu (dynamick objekty)
 NSS- Normalizovan sradnicov sstava - predstavuje sradnicov sstavu s
rozsahom v intervale <0,1>
SSZ- Sradnicov sstava zariadenia- predstavuje sradnicov sstavu prslunho
grafickho zariadenia
SSC- Sradnicov sstava kamery- predstavuje sradnicov sstavu virtulnej kamery
(objektvu, pozorovatea), pomocou kt. je snman 3D scna
SST- Sradnicov sstava textry- predstavuje sradnicov sstavu prslunej textry,
je zvisl od typu, vekosti (rozlenia) a farebnej hbky textry. Me by 2D a 3D
typ.

Spsoby interakcie
neviem i je to ono ni in som o interakci nenala

Kategorizcia VR systmov
Poda rovne V/V prvkov
Entry VR
Basic VR
Medium VR
Immersive VR
Podsystmy VR
- VR je zloen zo 6 podsystmov
1. Vizualizan
- spracovanie vizulneho vnemu je prioritou slo 1 (80% lovek vnma zrakom)
- vyuvanie trojrozmernho zobrazovania
vyuvaj sa 2 princpy:
sledovanie statickho monitora (projeknho systmu)
- zobrazovanie do okolia pouvatea na projekn plochy s vysokm rozlenm a
vekosou vou ako zorn uhol pozorovatea
- ben sledovanie monitora
- napr. virtulne jaskyne
sledovanie mobilnej zobrazovacej jednotky
- zobrazovacia plocha sa pohybuje s pouvateom (vyuvaj sa dtov prilby)

2. Akustick
- delme ho na vstupn a vstupn
-vstupn- vstup zvuku, rei do VR systmu
-vstupn- prijman zvuk by mal zodpoveda tomu o pouvate vid, aby ilzia bola
dokonal

3. Kinematick a statokinetick
-simulcia a urovanie pohybu pouvatea
delenie:
zariadenia umoujce sledovanie polohy- urovanie pozcie hlavy, rk, nh, celho
tela (pouitene dtov rukavice alebo dtov oblek)
zariadenia umoujce simulciu pohybu- zariadenia dovouj pohyb pouvateovi
vo VR, priom sm stoj na mieste

4. hmat
-dleit strnka interakcie loveka s okolm
- veci vo VR by sme mali vedie zovrie, uchopi zdvihn, nepriepustnos steny- mala by
kls odpor ak sa o u oprieme
-vyuitie exoskeletov
-vhodn umiestnenie vzduchovch vankikov, kt. vytvraj pocit dotyku

4. Ostatn
- napr. :uch, chu, citlivos na feromony, spnok, boles alebo mylienky
-niektor s mlo podstatn preto o nich vo VR neuvaujeme
Historick nvznosti
1960- otec virtualnej reality- Morton L. Heiling - Telespheremask - zariadenie
poskytovalo stereoskopick zobrazenie a stereo zvuk (head mounted display- HMD)
1962 - Sensorama- zariadenie predstavovalo bicyklovanie po Brookline vo forme
hernej simulcie - napr. 9 ventiltorov simulovalo vietor, vibran sedadlo, uvoova
vne
1963- pn Sutherland- Sketchpad- HMD aj so snmanm polohy

1960-1970- prof. Brooks- prv vstupn technick prostriedky pre interaktvnu grafiku-
prilbov displej s monosou 3rozmernho videnia a snmania pohybu hlavy,
kontaktn ruka GROPE
1989- Jaron Lanier - prilbov displej, kontaktn rukavica
Ronald T. Azuma zaviedol pojem zmiean realita

Vstupno- vstupn prostriedky:

Vstupn
Intersense IS9000 SimTracker
MS Kinect 1,2
MYO
Fin
Leap Motion
dtov rukavica
Vstupn
obrazovka, monitor
Microsoft HoloLens
Oculus Rift
Oculus Rift Crescend Bay
3D tlaiare

Pracovisk VR a MR
Prv genercia - vyvinut napr. dtova rukavica
Z hadiska domovskho pracoviska KPI FEI TUKE je virtulnej realite venovan priestor od
roku 1994. Prv verzia VR systmu, hlavne vizualizan, bola postaven na grafickej kninici
Microsoft DirectX v roku 1995. Bol to samostatn vizualizan nstroj, kt. podporoval iba
vlastn formt pre popis scny. Postupnm vylepovanm , do roku 1999, bola aplikcia
schopn generova naraz 3 samostatn pohady do scny, kt. boli samozrejme prepojen.
Zkladn vizualizan podsystm VR systmu je nazvan PROLAND, bol implementovan v
jazyku c/c++ na platforme MSDOS, MS Windows 95/98 a MS Windows NT.

Zkladn rty:
- monos vkladania dynamickch animovanch 3D objektov
-statick a dynamick bodov sveteln zdroje a smerov svetl s monosou stmavenia do
diaky
-detekcia kolzie medzi pozorovateom a virtulnym svetom
- rotcia textry na polygne (efekt plvajcej podlahy)
-smerov svetl
-jednoduch textrovanie
-vlastn formt popis scny
-monos zobrazenia z rznych statickch alebo dynamickch kamier
-ovldanie pomocou myi, klvesnice, cyberpuck-u alebo dtovej prilby
.....

Druh genercia (2000-2002)

-snaha odstrni nevhody predchdzajceho rieenia - operan systm windows, kninica
DirectX- neprenosn na in platformy -> prechod na Silicon Graphics Inc. OpenGL-
podporovan vetkmi platformami
-3D Studio MAX jeden z najrozrenejch 3D modelovacch nstrojov a existuje z neho
export do mnohch formtov
vvoj a modifikcia algoritmov sa dotkla hlavne nasledujcich oblast:
-osvetovacie techniky
- textrovanie
-morfovanie objektov
- rieenie viditenosti .....

Sasou druhej verzie systmu PROLAND bol aj CAVE systm (oceov kontrukcia v
tvare kocky, steny boli potiahnut premietacm pltnom, podlaha z hrubho skla nosnos 120
kg), ktor slil na vytvorenie dokonalej ilzie pre pozorovatea umiestnenho vo vntri.
Bolo potrebn premieta na vetky steny kocky.

Posledn verzia (2008- sasnos)

Zklad systmu sa sklad z pru projektorov s filtrami, pecilneho projeknho pltna pre
zadn projekciu, pecilnych okuliarov, renderovacieho systmu, audio systmu a prslunho
programovacieho vybavenia.

3D stereo zobrazovanie
Hlavn as VR systmu je zobrazovacia as, idelne je ak sa pouije 3D zobrazovanie
Zobrazovacie systmy delme na:
holografick displeje
priestorov displeje
stereoskopick displeje

Z hadiska vekoplonho zobrazovania sa najviac pouva stereoskopick systm so sptnou

projekciou. Systm sa sklad z projektorov, pecilneho projeknho pltna, pecilnych
okuliarov a renderovacieho systmu.

3D tla
-sli na vytvranie relnych objektov z modelov
- najastejie pouvan metda - rapid prototyping -> pri tejto metde sa objekty vytvraj z
tenkch vrstiev, kt. sa na seba postupne ukladaj
- 3D tla vyuva ako stavebn materil kompozitn prach, na kt. je nsledne nanesen
spojivo m sa vytvor jedna vrstva modelu
- materili z kt. sa tlaia modeli s netoxick a alou vhodou je e tento druh tlae je
prakticky bezodpadov
- po vytlaen je potrebn finlny model ete upravi, aby zskal elan tvrdos a pevnos

info erpan z: http://cse.kpi.fei.tuke.sk/predmety/svr/doc/SVR_ucebnica_v1.pdf

UNIX - operan systm potaa pvodne vyvjan v 60tych a 70tych rokoch skupinou
zamestnancov firiem AT&T a Bell Labs

Zkladnou filozofiou UNIXu je princp stavebnice, v ktorej s zloit kony vykonvan postupnosou
zostavenou z jednoduchch prkazov pomocou uvateskho rozhrania. Uvateskm rozhranm je
zvyajne rovnako jednoduch prkazov interpreter nazvan shell. V sasnch verzich unixoidnch
operanch systmov sa vak oraz astejie pouvaj grafick nadstavby ukrvajce riadkov
(terminlov) rozhranie shellu, robiac tak Unix prstupnejm iriemu okruhu uvateov.

Pvodn UNIX bol a tret systm po jednoduchom a kompatibilnom Time-Sharing System a projekte
Multics, ktor bol funkciami nabit a zkolaboval kli svojej vlastnej vhe

Sila prkazovho riadku:

- Sksen pouvatelia mu pracova ovea rchlejie
- Vetky monosti a opercie by mali by vykonaten a kontrolovaten vo viac-menej
podobnom tle.
- me vykonva opercie v dvkach bez zsahu uvatea. To zna, e ak je opercia
zanalyzovan a pochopen, me by vytvoren a uloen skript, ktor reprezentuje tto
operciu. Takto opercia me by neskr kedykovek vykonan bez alieho silia.
- Klvesnica je asto precznejm vstupnm ako my
- Rozhranie prkazovho riadku si vyaduje omnoho niiu prenosov rchlos pri vzdialenom
ovldan.
- Prkazov riadok je nevhodn na niektor pecifick lohy, napr. pravu grafickch sborov.

Zsady nvrhu CLI

Vzory rozhran prkazovho riadku
Ak peme program, ktor je spustiten z prkazovho riadku, asto mame v ponuke viacero
monosti alebo indiktorov, prpadne viac ako jeden argument. Prkaz m svoj nvrhov vzor, zistme
ako meme usporiada argumenty.
NILSEN (Mobiln pouitenos poda Nilsena)
vod: Ujo sa tu venuje hlavne tomu ako spravi dobr design na mobile, porovnva vhody
nevhody, kadopdne skoro vade pe e vhody a nevhody fiuriek s subjektvne.....

- tdie ukzali e viac ud da prednos notebookom ako mobilom lebo:

o zl pouitenos / sksenos
o mala investcia do designu lebo mobil sa nepouva vemi na business (?)
- Miera pouitenosti zvis aj od zariaden :
o Cellphones 44% mal display, hrozne pouite
o Smartphones(blackberrie) 55% polovin display, klvesnica jak na PC, zle pouite
o Full-screen(Android, iPhone) 74% vek display, prav rozhranie .. najlepie ale aj
tak m chyby
- Web strnku rchlo prescrolluje a dostane sa tam kde chce , no mobil=mal plocha.
- Rieenm je :
o Vyli funkcie a firi o nie s nutnosou pre mobil
o Oreza obsah = zmeni
o Zvi elementy rozhrania (tlatka at. ) Fat Finger Problem
(no tieto rieenia nespaj vysok poiadavky uvateov)

Rozdiel medzi myou a prstom teda dotykom

My Prsty (touch)
Precznos Vysok Nzka
Poet oznaench bodov 1 1, 2-3 multitouch
Poet ovldaov 3, prav/av tlaitko+koliesko 1
Homing Time1 no Nie
Signly Hover2, mouse-up/down Finger-down/up
Zrchlene pohyby no Nie
Vhodn pre vek displaye (30 no Nie
palcov a viac)
Viditen kurzor / pointer no Nie
Zakrva vo vhade Nie no
Vhodn pre mobil Nie no
Priame spojenie s displayom, Nie no
fun to use
Podpora prstupnosti no Nie
ahk na nauenie no Virtualy no learning time (?)

Homing riaden , netum o to je ale prde mi to ako pri presvan objektov s mykou ikony ...
akurt e sa to d aj pri mobile nie ?

Hover- Je to metda ktor sa vol pri prechode myou nad nejakm objektom... zjednoduene : ke
teraz potiahnete kurzor myi na ikonku internetovho pripojenia alebo batrie a postojte tam uke
sa vm popup window .... hover je to ke prejdete myou nad niem a stane sa dao = mouse up ,
mouse down
Mobiln Aplikcie: (Responzvny design je najlepm rieenm) rozdelenie appiek

- Natvne: pevne vo vaom mobile, stiahne ide, po ase sahuje aktualizcie dnes
najlepie
- Webov: Cez rozhranie komunikuje s Appkou ktor je niekde na servery, presne to ist
o webov strnky cez browser .... , nie je nutnos aktualizcie (aktualizuje sa na servery)
v budcnosti najlepia monos
- Hybridn ... aj aj

Mobiln appky s v dnenej dobe najpopulrnejia monos ako previes web strnku do mobilu

- 74% mobile apps vs 64% web-sites

- ahie sa pouvaj
- Lepie ako Strnky pre mobiln zariadenie
- Rzne platformy rovnak vyuitie

Ben myslenie pri vvine appky. ponkni lepie fiur a bude viac pouvan ( nie je to pravda)

- pouitenos vyplva z celkovej pouvateovej sksenosti ktorej dominuje celkov poet

inch sieti ktor udia navtevuj

- tvoja sie je teda asou Web Ecosystem

O BY MALI MOBILNE APLIKCIE resp. MOBIL DESIGN OBSAHOVA

- Nemrhaj miestom v mobilnej aplikcii -> rozde obsah , striedaj rozhrania s rovnakm
obsahom (17 slajd)

-Gest (commands):

- swipe (potiahnutie) nahrad back / next

- alie ako podr ozna , dva prsty od seba pribli ... to viete , vieme ;)
- Problm e mnoh si nepamtaj pouvatelia
- GENERIC commands : -Rovnak prkazy v rznych kontextoch dosiahnu konceptulne
rovnak vsledok e.g. pinch to je ten zoom dvoma prstami
- OVERLOAD commands: Varianty rovnakch prkazov pre dosiahnutie rznych vsledkov
e.g. Undo/Back;

-Fitts law for pointing (Fittov zkon na ukazovanie) = 1cm je nutn na element ?

- Material design : minimlne 48x48 pixelov pre tlaidlo a minimlne 8dp od seba (2
elementy)

-Pokyny pre vypanie formulrov:

- Pomte o naviac pouvateom

- Skratky, predvolen hodnoty, histria uvateov, fotoapart GPS ako input
- Prepotavanie informcii kedykovek to je mon (ZIP state)
- Podpora COPY PASTE
- Pouitie selektorov
- o najkrat formulr aby bol
 - Prepopulating(?) znmych hodnt

-No manual first ! ( iadne manuly najprv)

- Rozhranie by malo by self-explanatory teda seba vysvetujce

- Ak je nevyhnutn tak poui tutorial v aplikcii, - aby sa dal ahko zrui a aby od neho vea
nezviselo

-Early registration must die ! ( registrcia ako podmienka v applikcii nie ! )

-Mobile reading is challengig ( tanie z mobilu je vzva)

- Pre pochopenie na slajde 28 s dva obrzky jeden s obrzkom a par slovami druhy ist
text ... take pri tan pouvatelia bu :
- Mu vidie menej, mlo kontextu=mlo pochopenia + musia sa spolieha na pam
- Alebo musia sa pohybova po strnke, scrolling zaber as, odvdza pozornos + problm
so zorientovanm na strnke pouvate si mus pamta kde bol predtm

-Dobr rady pri mobilnom designe:

- Filtruj = ore obsah ako to ide (Breaking news? Too much, it should be This is what
happened and this is whats going on)
- Odde nedleit obsah na secondary screen ak chce ta viac rozklikni = detail view
o Initial/detail view
o Master/detail view
o Initial info / read more
Nejak to rozdelenie ale nevidm v tom rozdiel :D
.- ale nie a prli aleko to jest okno -> okno -> a v om alie a alie...
- Poui progressive disclosure ( progresvne sprstupnenie )
Protichodn poiadavky . Pouvatelia chc fiury a dostatok monost pre ich
pecilne potreby. Ale chc jednoduchos nechc sa ui ovlda
o postupn odhaovanie
o Rozdelenie na poiaton (initial) a pokroil (secondary) -> Advanced button
o Spoiatku ukza len niekoko fir a funkcii (initial)
o ponknu vea pecializovanch funkcii (secondary)
o zlepite nauitenos, efektivnos a chybovos
- Kategorizovanie
- Nie Linear Paging ... problm e ke sa chcete vrti o niekoko epizd tak len klikte
back, back , back , back ...
- truktrovane usporiada nejako nie od A-Z
o Tri monosti ako trukturova
o One log page ( na jednu strnku) nevhodne, ako sa dostva k subtopics
o Mini-IA zvyuje pouitenos, rozdeuje do kskov, priami prstup k podmetm
o Distributed information - prelna podtmy mnohch tm
MATERIAL DESIGN :
- Cie : Vytvorenie vizulneho jazyka, ktor syntetizuje klasick princpy dobrho dizajnu s
inovciami a monosou vedy a techniky. Vytvorenie jednotnho zkladnho systmu
ktor by sa dal vyui na vetkch platformch

Tri princpy

- Materil : je to len metafora. Zjednocuje to priestor a pohyb a je zakotven v relnom

priestore. Google tudoval pohyb pera a atramentu a dajako priiel nato e najlepie jak
pomc udom dao pochopi je poui vlastnosti znmych hmatovch vlastnost
predmetu.
- Bold, graphic, intentional ( Tun, grafick, myseln) : vyuite dizajnu na tlaovej bze,
typografie, roty, priestoru, mierka, farby ....... Jednoducho pouitie takho designu eby
sa to pilo oku teda bolo atraktvne.
- Motion (pohyb) : poskytuje zmysel, dva odozvu. Primrne akcie uvatea s inflexn
body ktor iniciuj pohyb, transformciu celej kontrukcie ( posledn vetu vypul
transltor, ani mne to nedva zmysel :D ) Ale plne jednoducho povedane je to ako keby
veda o tom ako poui farby, elementy, tiene, pohyb na uptanie pouvatea a uahenie
mu ovldania alebo na nauenie nieoho

Hierarchia objektov:

- Kad objekt m jednho rodia

- Kad objekt me ma viacero potomkov
- Potomkovia dedia vlastnosti rodiov ako ( pozition, rotation, scale , elevation)
- Srodenci su na rovnakej rovni

Animcia : Plynul pohyb, citliv interakcia

Farby: pouvaj sa preddefinovane farby z color palette ( one basic color one accent color ...)

Ikony: dleit as, pouvajte preddefinovan .

- 48px 1dp edges(zarovnanie rohov) pre android klovaten do 192px a 4dp na hranch
- Systmov ikony 24px touch alebo 20px mouse

Layouty : zvisia od vekosti displaya

-Xsmall 4grid , small 8grid, mediaum a large 12grid

-preto najlepie responzvne

Navigcia mysl sa t medzi obrazovkami, pre androiakov medzi aktivitami

- Rchlo a efektvne cez viditen buttony

- Podpora mouse free navigcie ?

Ponuka sptnej vzby alebo poradenstva

Ponuka viacerch jazykov, dokonca aj opan tanie pre tch arabov o taj z av (UI mirroring)

Uistite sa i je appka itaten pouite pestros farieb, zvraznenie textu atd atd
Ako vylepi design:

-predstav si e si slep a m ho ovlda

- hluch, nem, e si farboslep, alebo neni kontrast na mobile, alebo len hlasom ovlda
alebo screen reader ...

PRAVIDL TVORBY MOBILNEJ APLIKCIE:

Menej ako 3,3%.

Tak percento mobilnch aplikci priemern spotrebite poda vskumov aktvne pouva dlhie ako
30 dn od ich naintalovania. Dokonca len 25,5% iOS aplikci udr pouvatesk pozornos dlhie
ako jedin de.

i u si pouvatelia cez aplikciu chc pozrie denn menu ich obbenej retaurcie, objedna si
taxk alebo len hadaj nenron rozptlenie, intuitvny a hrav interface je kovm atribtom pre
obbenos a dlhodob pouvanos aplikcie.

Mobiln interakcie maj totito omnoho vyiu dynamiku ako tie desktopov a kad jedna sekunda,
poas ktorej mus pouvate prema ako alej, trv preho venos. Tchto zkladnch 6 pravidiel
dizajnu pre aplikcie sa mono mnohm bude zda ako samozrejmos, no opakovane si vmame, e
ich dizajnri poruuj.

Na vod u len posledn veta: mobiln aplikcie neslia a nikdy by nemali sli ako nhrada za
kvalitn responzvny dizajn webu. Mali by ponka o nieo viac.

Jedna aplikcia, jedna funkcia

V roku 2004 bol zaloen web pre fotografov s nzvom Flickr.com s monosou rchleho
uploadovania a real-time zdieania fotografi. Hlavn draz sa vak kldol na priatestv, nstenky a
chatovacie miestnosti. Postupom asu vvojri odstraovali vetky tieto nadbyton funkcie a
sstredili sa do detailov len a len na to hlavn na online organizciu a zdieanie fotografi. Postupne
sa tak stal Flickr najrozsiahlejou a najpouvanejou online slubou pre fotografov.

Flickr nepridval funkcie, odoberal ich. Nerozptyujte zbytone pouvateov a nepremajte nad
tm, o prida, ale nad tm, o je kov funkcia vaej aplikcie a ako ju o najviac vylepi. Ve
takmer vetky najspenejie aplikcie rieia z pravidla len jeden vemi pecifick problm, no rieia
ho naozaj dobre.

Pouvajte mikro-interakcie

Priznajme si to, vina naich interakci je pre ns istm spsobom hra a zbava. Uiton aplikcia
je super, no uiton a zbavn aplikcia je omnoho lepia. Jej pouvanie ns bav a tm pdom sa ju
omnoho rchlejie naume ovlda. Nie je zaujmav, e mnostvo tabletov a telefnov s ahkosou
zvldnu ovlda aj mal deti, zatia o nad desktopami sa asto krt rozuuj aj dospel?

Mikro-interakcie funguj, pretoe udia maj radi sptn vzbu. Kad akciu by mala sprevdza
jasne pochopiten a hrav reakcia. Akkovek interakcia a vmena informci medzi pouvateom a
aplikciou teda mus prebieha hravou vizulnou formou.
 Jednoduch pekn animcia "puknutia" srdca doslova ud lka pre lajknutie ohokovek. Zdroj:
dribbble.com

Viditenos a ergonmia

Telefny nie s ako potae, udia ich vyuvaj naprklad poas sttia v rade, chodenia po ulici,
sedenia v autobuse i opaovania na slnku. Na to vetko treba pri dizajnovan aplikcie myslie. Tu s
3 pravidl ohadom viditenosti a ergonmie, ktor by kad mobiln UI mal dodra:

Vekos buttonov trafi tlatko alebo odkaz uknutm na displej je omnoho nronejie ako klik
myou. Robte preto ovldacie prvky dostatone vek a nechajte okolo nich dostatok priestoru, aby
ste sa vyhli nechcenm interakcim. Aktvna plocha vek cca 1x1 cm (44dp) je pre pohodln a presn
uknutie idelna.

Kontrast mnoho dizajnrov je zvyknutch pracova s nimi kontrastmi, ktor s dobre viditen na
desktope, no na mobilnej obrazovke poas priameho slnka tak u by nemusia. e m vaa znaka
tieto odtiene zakomponovan v jej identite? Pouvateovi je to jedno, zvraznite ich.

Umiestnenie prvkov poda vskumu z dielne Nielsena Normana s smartfny a 49% asu ovldan
jednou rukou. Pri takomto ovldan s najdostupnejie ovldacie prvky v spodnej a strednej asti
obrazovky, nakoko pri klasickom chope len mlo ud dotiahne palcom a na vrhol zariadenia. Dole
by ste teda mali uloi najpouvanejie prvky ovldania i navigcie, vemi obben je aj tzv.

"bottom bar".

chop jednou rukou znamen, e palcom je dostupn len obmedzen as obrazovky.

 Skvel prklad "bottom navigation bar" s najdleitejmi funkciami pre rchlejiu dostupnos.

Chytr npovedy

udia netaj npovedy, udia proste zan aplikcie pouva dfajc, e na ich ovldanie nejako
prdu. Zoberte si najnavtevovanejiu web strnku sveta Google. Naozaj potrebuje niekto nvod na
vyhadvanie na Googli? Sta len napsa otzku do obrovskho poa v strede obrazovky a Google
vm po automatickom doplnen vrazov i opraven chb okamite zobraz relevantn vsledky.

Tvorte vae aplikcie presne tak - jednoduch, mono na pohad a hlpe, a netlate pouvateov
do uenia sa ohokovek. udia maj tisc dleitejch vec, ako ui sa ovlda nejak aplikciu.
Pouvanie hlavnej funkcie mus by cieovej skupine jasn v priebehu seknd, ak nie miliseknd.

Vedajie funkcie a podfunkcie by mali by pochopiten u zo samotnej navigcie, a to nie len

ikonou, ale aj textom pod ou. Ak u je naozaj nutn pouvateovi nieo vysvetli, je dobr to urobi
ahko dostupnmi a interaktvnymi vizulnymi npovedami obsahujcimi minimum textu.

Gest a pohyb

Interakcia so zariadenm me s aj za hranice obyajnho ukania i klikania, nakoko pouvatelia s

vemi intuitvni ohadom rznych gest a pohybov. Vskumy ukzali, e ak boli pouvatelia vyzvan
nieo vymaza, poksili sa takmer bez vnimky presun objekt mimo obrazovky.

Gest s u dlho dleitou sasou dobrho mobilnho UI. No pretoe neobsahuju iadny viditene
interaktvny prvok, ktor by uvateom dval najavo, e vbec existuj, mali by ste v prpade pouitia
netradinch gest op poui vizulne npovedy a vyzva uvatea, aby ich vyskal.

Nezabdajte vetko testova

Bez ohadu na to, ako mu vae dizajnov rozhodnutia psobi prirodzene a sprvne, mali by ste ich
vdy otestova na vaej cieovej skupine pouvateov. Nie vetky gest, mikrointerakcie i npovedy
musia by jasn kadmu, a prve preto je dleit testova ich od samho zaiatku.

Spsobov testovania je vea, od testovania pouitenosti i eyetrackingu a po pouitie first-click a

multi-click testov. V Lighting Beetle mme dlhoron sksenosti s testovanm a dizajnom mobilnch
aplikci a radi vm poradme, akm smerom sa ubera v prpade tvorby mobilnej aplikcie.
RESPONZIVITA :

Responzvny dizajn je s nami u nejak ten rok a my opakovane vidme, e sa pri om robia stle tie
ist chyby. i u ste dizajnr, programtor alebo marketr, tieto chyby sa mu priamo alebo
nepriamo dotkn aj vs. Pretajte si preto niekoko postrehov z naej dlhoronej praxe, ktor vm
mono pomu robi veci jednoduchie a lepie.

Zabudnite na mobily, tablety a desktopy

Vina dizajnrov opakuje t ist chybu a pouva pred klientom vrazy ako nvrh pre mobil, pre
tablet a pre desktop. Problm vak je, e v realite existuje mnoho prpadov, kedy sa zobraz
pouvateovi in verzia. Naprklad:

Existuj tablety, ktor bud pouva v mobiln layout a in tablety, ktor bud pouva
v desktop layout
Mnoho pouvateov nebrowsuje na desktope fullscreen, pouva zoom alebo delen
zobrazenie okien, o asto spsobuje zobrazenie verzie pre tablet aj na desktope
Existuj mal notebooky, v ktorch sa zobraz verzia pre tablety aj pri fullscreen zobrazen
....

To prina mnostvo problmov dizajn pre mobily alebo tablety je totito astokrt optimalizovan
inak ako ten pre desktopy, o komplikuje ich pouvanie na nesprvnom zariaden.

Aby sa tieto problmy dali riei, musme v prvom rade presta katukova responzvny dizajn tlom
pre mobil, tablet a desktop. Zo slovnka by si tieto vrazy mali vyli nielen dizajnri, ale i
programtori, marketri a samotn zadvatelia.

Dobr dizajnr pouva pre oznaenie jednotlivch verzi breakpointy teda rozlenenie dizajnu
poda rky zobrazenia na vekosti S, M, L a niekedy aj XL.

V naej praxi sa osvedili v absoltnej vine prpadov tieto 3, resp. 4 breakpointy:

320px+ pre smartfny a menie tablety

768px+ pre vie smartfny a tablety
1024px+ pre tablety s vym rozlenm a desktopy
1440px+ pre desktopy s vou obrazovkou a televzory

Minimlne hodnoty breakpointov si musme uri vo vemi skorej fze projektu spolone so vetkmi
zainteresovanmi dizajnrmi, programtormi i klientom. Kad z nich totito me do rozhodovania
prinies nov pohad.

Dizajnujte pre situcie, nie pre zariadenia

e dizajnova pre zariadenia nedva zmysel sme u zistili, a prve preto sa pri dizajne radej
sstredme na situciu, v ktorej sa pouvate pri interakcii bude nachdza.

Uveme si prklad dizajn pre najmeniu, teda S verziu strnky, bude ma podobn pravidl
ako dizajn mobilnch aplikci. Me sa pouva:
 V pohodl domova na mobile alebo tablete optimlna, asto vak nie jedin situcia
Vonku na priamom slnku text mus by dostatone vek a kontrastn
Poas chodenia umonme ovldanie aj jednou rukou, teda palcom, a ovldacie prvky
sstredme do dolnej asti obrazovky
V zhone primrnu funkciu strnky dme hne na vrch, aby bola rchlo njditen, a menej
pouvan linky schovme do menu alebo na spodok strnky
Poas cesty autom alebo autobusom ovldacie prvky navrhneme dostatone vek, aby sa
dali ahko trafi aj pri otrasoch

Prve pri vekostiach S a M si dvame extra zlea na dotykovom ovldan, no nepodceujeme ho

ani pri nvrhoch vch vekost L i XL. V dnenej dobe tabletov s vysokm rozlenm a dotykovch
i konvertibilnch notebookov u totito takmer nedva zmysel dizajnova interface vhradne pre
ovldanie myou.

A ako vlastne meme zisti, v akch situciach sa bude konkrtny dizajn najastejie nachdza?
Sptame sa! V naej praxi sa naprklad objavil prpad, kedy sme dizajnovali aplikciu pre mechanikov.
Po poiatonch rozhovoroch s nimi sme prili na nieo, o nikto neakal. Kvli neustle pinavm
rukm totito uprednostovali pri prci takmer vhradne hlasov input pred dotykovm.

Nvrhy kreslite v minimlnom rozlen

Ktor breakpoint si dizajnr vyberie ako prv je len na om, no v duchu prstupu mobile first sa
odpora zaa tm najmenm. Printi ho to prema, o je na webe naozaj dleit a o sa d
skry alebo vypusti plne.

Na jednu vec si vak treba dva vek pozor - vdy pracujeme v najmenej monej rke v rmci
rozptia danho breakpointu. To zabezpe, e sa dizajn v rmci uritho breakpointu bude rozirova
a nie zuova, o je omnoho bezpenejie.

Ak teda naprklad dizajnujeme pre breakpoint 640px 959px, pracujeme s dizajnom v najmenej
monej rke, teda 640px. V opanom prpade riskujeme chyby, ku ktorm dochdza pri zmenovan
strnky a na ktor sa asto prde a poas programovania.

Tomu sa rozhodne nepoteia programtori, ktor sa neraz musia hra na dizajnrov a upravova
dodatone vekos textov a obrzkov, aby sa web zobrazoval sprvne aj v menom okne. Spokojn
nebude samozrejme ani klient, ktor bude musie preplati programtorom extra, as a v konenom
dsledku ani dizajnri, ktor za to cel bud zodpovedn.

Dfame, e sa vm nae postrehy z praxe hodili a e vm pomu tvori weby jednoduchie a

efektvnejie. Ak mte akkovek vlastn tipy i postrehy ohadom responzvnych webov, dajte nm
vedie do komentrov. A nezabudnite sa prihlsi na n newsletter, vaka omu budete dostva raz
mesane shrn uitonch UX tipov.
 HOW TO BAIKOV:
No poda ma tto tma je len ist omka ni podstatn a predsa to m vek vznam. D sa to
obkeca v pohode. Urite si pozrite aj tu prezentciu aj tie posledn lnky o som dal, + ke nemte
o robi alebo sa chcete dao naui tak https://material.google.com/components/cards.html ...

Ale k pointe how to baikov o som poul dos prsna take neviem jak to bude bra, ale ke ste
ikovn a trocha aj rozhaden viete sa na stnej skke rozprava o tom o chcete vy nie o chce ona
trebarz angular 2.0 , viem e sa zaujma aj o ne technologie tae mete rozhovor vies k nieomu o
viete a netka sa skky.